From f30013877b0448d8771b6f3512b870a35a819311 Mon Sep 17 00:00:00 2001 From: Laura Silva <91160746+silvalaura@users.noreply.github.com> Date: Fri, 30 Aug 2024 10:25:37 -0400 Subject: [PATCH] Release 3.9.0 (#1382) Signed-off-by: dependabot[bot] Co-authored-by: Michael Murray <116777356+mcmurray0125@users.noreply.github.com> Co-authored-by: github-bot Co-authored-by: ccedrone <77400920+ccedrone@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Katie Weinstein <62410830+katieweinstein@users.noreply.github.com> Co-authored-by: Katie Weinstein Co-authored-by: Chris Cedrone Co-authored-by: Orion Johnson Co-authored-by: noahwebs <88386737+noahwebs@users.noreply.github.com> Co-authored-by: Jerrod Heiser Co-authored-by: Igor Fesyk <104437118+IgorFesyk@users.noreply.github.com> Co-authored-by: Ihor Fesyk Co-authored-by: acoopa <37028457+acoopa@users.noreply.github.com> Co-authored-by: Collange, Etienne Co-authored-by: ViktorBeshentsev <165167848+ViktorBeshentsev@users.noreply.github.com> Co-authored-by: Viktor Beshentsev Co-authored-by: vverein <167213270+vverein@users.noreply.github.com> Co-authored-by: TetianaTkachenko Co-authored-by: Chris Cedrone Co-authored-by: OlenaYashyna <38716686+OlenaYashyna@users.noreply.github.com> Co-authored-by: yatimov <119411532+yatimov@users.noreply.github.com> Co-authored-by: Alisher Yatimov Co-authored-by: Vladislav Verein Co-authored-by: chris-cedrone-cengage <77400920+chris-cedrone-cengage@users.noreply.github.com> --- .changeset/breadcrumbs-alignment.md | 5 + .changeset/datePicker-calendar-table-role.md | 5 + .changeset/datePicker-clearing-the-date.md | 5 + .changeset/docs-drawer.md | 5 + .changeset/docs-drawerExample2.md | 5 + .changeset/drawer-storybook.md | 5 + .changeset/feat-stepper.md | 5 + .changeset/modal-aria.md | 5 + .changeset/nativeSelect-arrow.md | 5 + .changeset/nested-modal-bg-overlay.md | 6 + .changeset/pre.json | 14 + .changeset/progressbar-color.md | 5 + .changeset/timepicker-example.md | 5 + .nvmrc | 2 +- .storybook/preview.tsx | 1 + package-lock.json | 868 ++++++++++------ package.json | 6 +- packages/charts/package.json | 4 +- packages/dropzone/package.json | 4 +- packages/react-magma-dom/CHANGELOG.md | 2 + packages/react-magma-dom/package-lock.json | 981 +++++++++++++++++- .../components/Breadcrumb/BreadcrumbItem.tsx | 2 + .../components/DatePicker/CalendarMonth.tsx | 1 - .../DatePicker/DatePicker.stories.tsx | 34 + .../components/DatePicker/DatePicker.test.js | 59 +- .../src/components/DatePicker/index.tsx | 6 +- .../src/components/Drawer/Drawer.stories.tsx | 3 + .../src/components/Drawer/Drawer.test.js | 5 +- .../components/Dropdown/Dropdown.stories.tsx | 3 - .../Hyperlink/Hyperlink.stories.tsx | 627 ++++++++++- .../components/Hyperlink/Hyperlink.test.js | 234 ++++- .../src/components/Hyperlink/index.tsx | 146 ++- .../src/components/Input/Input.stories.tsx | 46 + .../src/components/Input/Input.test.js | 7 +- .../src/components/Input/InputMessage.tsx | 2 +- .../src/components/Input/index.tsx | 1 + .../src/components/InputBase/index.tsx | 27 +- .../src/components/Label/index.tsx | 2 +- .../src/components/Modal/Modal.stories.tsx | 2 + .../src/components/Modal/Modal.test.js | 24 + .../src/components/Modal/Modal.tsx | 137 +-- .../NativeSelect/NativeSelect.stories.tsx | 6 + .../components/NativeSelect/NativeSelect.tsx | 21 +- .../ProgressBar/ProgressBar.stories.tsx | 68 +- .../ProgressBar/ProgressBar.test.js | 31 + .../src/components/ProgressBar/index.tsx | 40 +- .../src/components/Select/MultiSelect.tsx | 6 +- .../src/components/Select/Select.stories.tsx | 2 + .../src/components/Select/Select.tsx | 6 +- .../src/components/Stepper/Step.tsx | 292 ++++++ .../components/Stepper/Stepper.stories.tsx | 287 +++++ .../src/components/Stepper/Stepper.test.js | 610 +++++++++++ .../src/components/Stepper/Stepper.tsx | 364 +++++++ .../src/components/Stepper/index.ts | 2 + .../TimePicker/TimePicker.stories.tsx | 8 +- packages/react-magma-dom/src/i18n/default.ts | 5 + .../react-magma-dom/src/i18n/interface.ts | 5 + packages/react-magma-dom/src/index.ts | 4 +- .../src/theme/GlobalStyles/index.tsx | 2 +- packages/react-magma-dom/src/theme/magma.ts | 2 +- packages/schema-renderer/package.json | 2 +- patterns/header/package.json | 4 +- website/react-magma-docs/CHANGELOG.md | 6 + website/react-magma-docs/gatsby-node.js | 8 +- website/react-magma-docs/package-lock.json | 355 +------ website/react-magma-docs/package.json | 3 +- .../src/components/MainContainer/index.js | 3 - .../src/images/stepper/mobile-no-labels.png | Bin 0 -> 3202 bytes .../images/stepper/mobile-standard-labels.png | Bin 0 -> 2690 bytes .../images/stepper/mobile-summary-view.png | Bin 0 -> 3014 bytes .../src/images/stepper/no-labels.png | Bin 0 -> 1772 bytes .../images/stepper/placement-full-page.png | Bin 0 -> 12329 bytes .../src/images/stepper/placement-modal.png | Bin 0 -> 13762 bytes .../images/stepper/placement-side-panel.png | Bin 0 -> 14236 bytes .../src/images/stepper/primary-label.png | Bin 0 -> 5925 bytes .../src/images/stepper/secondary-label.png | Bin 0 -> 6789 bytes .../src/images/stepper/standard-labels.png | Bin 0 -> 4876 bytes .../src/images/stepper/step-active.png | Bin 0 -> 4154 bytes .../src/images/stepper/step-anatomy.png | Bin 0 -> 3847 bytes .../src/images/stepper/step-complete.png | Bin 0 -> 4331 bytes .../src/images/stepper/step-error.png | Bin 0 -> 3329 bytes .../src/images/stepper/step-incomplete.png | Bin 0 -> 4413 bytes .../src/images/stepper/step-navigation.png | Bin 0 -> 7966 bytes .../src/images/stepper/stepper-intro.png | Bin 0 -> 5522 bytes .../src/images/stepper/summary-view.png | Bin 0 -> 4813 bytes .../src/images/stepper/text-wrap.png | Bin 0 -> 10470 bytes .../src/images/stepper/validation-error.png | Bin 0 -> 13617 bytes .../src/images/treeview/intro-image.png | Bin 6217 -> 6221 bytes .../src/pages/api-intro/changelog.mdx | 20 + .../src/pages/api/combobox.mdx | 5 +- .../src/pages/api/date-pickers.mdx | 42 + .../react-magma-docs/src/pages/api/drawer.mdx | 36 +- .../src/pages/api/hyperlink.mdx | 214 ++++ .../react-magma-docs/src/pages/api/input.mdx | 36 +- .../react-magma-docs/src/pages/api/modal.mdx | 4 + .../src/pages/api/progress-bar.mdx | 41 +- .../src/pages/api/stepper.mdx | 880 ++++++++++++++++ .../react-magma-docs/src/pages/api/toast.mdx | 6 +- .../src/pages/design/stepper.mdx | 299 ++++++ 99 files changed, 6164 insertions(+), 872 deletions(-) create mode 100644 .changeset/breadcrumbs-alignment.md create mode 100644 .changeset/datePicker-calendar-table-role.md create mode 100644 .changeset/datePicker-clearing-the-date.md create mode 100644 .changeset/docs-drawer.md create mode 100644 .changeset/docs-drawerExample2.md create mode 100644 .changeset/drawer-storybook.md create mode 100644 .changeset/feat-stepper.md create mode 100644 .changeset/modal-aria.md create mode 100644 .changeset/nativeSelect-arrow.md create mode 100644 .changeset/nested-modal-bg-overlay.md create mode 100644 .changeset/pre.json create mode 100644 .changeset/progressbar-color.md create mode 100644 .changeset/timepicker-example.md create mode 100644 packages/react-magma-dom/src/components/Stepper/Step.tsx create mode 100644 packages/react-magma-dom/src/components/Stepper/Stepper.stories.tsx create mode 100644 packages/react-magma-dom/src/components/Stepper/Stepper.test.js create mode 100644 packages/react-magma-dom/src/components/Stepper/Stepper.tsx create mode 100644 packages/react-magma-dom/src/components/Stepper/index.ts create mode 100644 website/react-magma-docs/src/images/stepper/mobile-no-labels.png create mode 100644 website/react-magma-docs/src/images/stepper/mobile-standard-labels.png create mode 100644 website/react-magma-docs/src/images/stepper/mobile-summary-view.png create mode 100644 website/react-magma-docs/src/images/stepper/no-labels.png create mode 100644 website/react-magma-docs/src/images/stepper/placement-full-page.png create mode 100644 website/react-magma-docs/src/images/stepper/placement-modal.png create mode 100644 website/react-magma-docs/src/images/stepper/placement-side-panel.png create mode 100644 website/react-magma-docs/src/images/stepper/primary-label.png create mode 100644 website/react-magma-docs/src/images/stepper/secondary-label.png create mode 100644 website/react-magma-docs/src/images/stepper/standard-labels.png create mode 100644 website/react-magma-docs/src/images/stepper/step-active.png create mode 100644 website/react-magma-docs/src/images/stepper/step-anatomy.png create mode 100644 website/react-magma-docs/src/images/stepper/step-complete.png create mode 100644 website/react-magma-docs/src/images/stepper/step-error.png create mode 100644 website/react-magma-docs/src/images/stepper/step-incomplete.png create mode 100644 website/react-magma-docs/src/images/stepper/step-navigation.png create mode 100644 website/react-magma-docs/src/images/stepper/stepper-intro.png create mode 100644 website/react-magma-docs/src/images/stepper/summary-view.png create mode 100644 website/react-magma-docs/src/images/stepper/text-wrap.png create mode 100644 website/react-magma-docs/src/images/stepper/validation-error.png create mode 100644 website/react-magma-docs/src/pages/api/stepper.mdx create mode 100644 website/react-magma-docs/src/pages/design/stepper.mdx diff --git a/.changeset/breadcrumbs-alignment.md b/.changeset/breadcrumbs-alignment.md new file mode 100644 index 000000000..5691fed37 --- /dev/null +++ b/.changeset/breadcrumbs-alignment.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': patch +--- + +fix(Breadcrumbs): Fixed alignment issue between elements. diff --git a/.changeset/datePicker-calendar-table-role.md b/.changeset/datePicker-calendar-table-role.md new file mode 100644 index 000000000..6cba28b03 --- /dev/null +++ b/.changeset/datePicker-calendar-table-role.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': patch +--- + +fix(datePicker): Fix date picker calendar table role issue \ No newline at end of file diff --git a/.changeset/datePicker-clearing-the-date.md b/.changeset/datePicker-clearing-the-date.md new file mode 100644 index 000000000..03f3373e7 --- /dev/null +++ b/.changeset/datePicker-clearing-the-date.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': patch +--- + +fix(datePicker): Fix date picker clearing functionality \ No newline at end of file diff --git a/.changeset/docs-drawer.md b/.changeset/docs-drawer.md new file mode 100644 index 000000000..5fe8b6ca8 --- /dev/null +++ b/.changeset/docs-drawer.md @@ -0,0 +1,5 @@ +--- +'react-magma-docs': patch +--- + +fix(Drawer): Fixed drawer appearing open at lower screen resolutions for the doc site navigation. diff --git a/.changeset/docs-drawerExample2.md b/.changeset/docs-drawerExample2.md new file mode 100644 index 000000000..aba4aeab9 --- /dev/null +++ b/.changeset/docs-drawerExample2.md @@ -0,0 +1,5 @@ +--- +'react-magma-docs': patch +--- + +docs(Drawer): Fix Drawer examples diff --git a/.changeset/drawer-storybook.md b/.changeset/drawer-storybook.md new file mode 100644 index 000000000..2d506bc1e --- /dev/null +++ b/.changeset/drawer-storybook.md @@ -0,0 +1,5 @@ +--- +'react-magma-docs': patch +--- + +fix(Drawer): Update site navigation storybook example \ No newline at end of file diff --git a/.changeset/feat-stepper.md b/.changeset/feat-stepper.md new file mode 100644 index 000000000..c0287e624 --- /dev/null +++ b/.changeset/feat-stepper.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': minor +--- + +feat(Stepper): Displays step based content for use in multi-step interfaces. diff --git a/.changeset/modal-aria.md b/.changeset/modal-aria.md new file mode 100644 index 000000000..81c8f7e74 --- /dev/null +++ b/.changeset/modal-aria.md @@ -0,0 +1,5 @@ +--- +"react-magma-dom": patch +--- + +fix(Modal): Remove unnecessary `aria-describedBy=“modal”`. Add `ariaLabel` prop so that Modals without headers can customize the `aria-label` instead of defaulting to `aria-label="modal"` which is not correct for a11y standards. \ No newline at end of file diff --git a/.changeset/nativeSelect-arrow.md b/.changeset/nativeSelect-arrow.md new file mode 100644 index 000000000..c99c41c2f --- /dev/null +++ b/.changeset/nativeSelect-arrow.md @@ -0,0 +1,5 @@ +--- +"react-magma-dom": patch +--- + +fix(NativeSelect): Update arrow placement, arrow color and border color when disabled \ No newline at end of file diff --git a/.changeset/nested-modal-bg-overlay.md b/.changeset/nested-modal-bg-overlay.md new file mode 100644 index 000000000..911bfb13c --- /dev/null +++ b/.changeset/nested-modal-bg-overlay.md @@ -0,0 +1,6 @@ +--- +'react-magma-dom': patch +--- + +fix(Modal): Background overlay issue on nested modals + diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 000000000..65335c955 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,14 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "@react-magma/charts": "6.1.0", + "@react-magma/dropzone": "4.0.0", + "react-magma-dom": "3.8.0", + "@react-magma/schema-renderer": "4.0.0", + "@cengage-patterns/header": "6.0.0", + "react-magma-docs": "5.0.9", + "react-magma-landing": "1.1.3" + }, + "changesets": [] +} diff --git a/.changeset/progressbar-color.md b/.changeset/progressbar-color.md new file mode 100644 index 000000000..640282902 --- /dev/null +++ b/.changeset/progressbar-color.md @@ -0,0 +1,5 @@ +--- +"react-magma-dom": patch +--- + +fix(ProgressBar): Add support for custom colors \ No newline at end of file diff --git a/.changeset/timepicker-example.md b/.changeset/timepicker-example.md new file mode 100644 index 000000000..e58e50821 --- /dev/null +++ b/.changeset/timepicker-example.md @@ -0,0 +1,5 @@ +--- +"react-magma-docs": patch +--- + +storybook(TimePicker): Update clear time example \ No newline at end of file diff --git a/.nvmrc b/.nvmrc index 2ab3d4be5..bb52a169c 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v16.20.2 +v18.18.2 diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index b6bdf3d42..b7cdcf07e 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -21,4 +21,5 @@ export const parameters = { viewport: { viewports: INITIAL_VIEWPORTS, }, + docs: { source: { type: 'code' } }, // required for https://github.com/storybookjs/storybook/issues/19575 }; diff --git a/package-lock.json b/package-lock.json index dd5677e9a..9ecc22eee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -511,28 +511,6 @@ "node": ">=6.9.0" } }, - "node_modules/@babel/helper-member-expression-to-functions": { - "version": "7.20.7", - "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.20.7.tgz", - "integrity": "sha512-9J0CxJLq315fEdi4s7xK5TQaNYjZw+nDVpVqr1axNGKzdrdwYBD5b4uKv3n75aABG0rCCTK8Im8Ww7eYfMrZgw==", - "dependencies": { - "@babel/types": "^7.20.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-module-imports": { - "version": "7.22.15", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz", - "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==", - "dependencies": { - "@babel/types": "^7.22.15" - }, - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/@babel/helper-module-transforms": { "version": "7.16.7", "license": "MIT", @@ -562,9 +540,9 @@ } }, "node_modules/@babel/helper-plugin-utils": { - "version": "7.24.7", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.7.tgz", - "integrity": "sha512-Rq76wjt7yz9AAc1KnlRKNAi/dMSVWgDRx43FHoJEbcYU6xOWaE2dVPwcdTukJrjxS65GITyfbvEYHvkirZ6uEg==", + "version": "7.24.8", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz", + "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==", "engines": { "node": ">=6.9.0" } @@ -629,9 +607,9 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.24.7", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.7.tgz", - "integrity": "sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==", + "version": "7.24.8", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz", + "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==", "engines": { "node": ">=6.9.0" } @@ -1679,14 +1657,14 @@ } }, "node_modules/@babel/plugin-transform-runtime": { - "version": "7.24.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.24.7.tgz", - "integrity": "sha512-YqXjrk4C+a1kZjewqt+Mmu2UuV1s07y8kqcUf4qYLnoqemhR4gRQikhdAhSVJioMjVTu6Mo6pAbaypEA3jY6fw==", + "version": "7.25.4", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.25.4.tgz", + "integrity": "sha512-8hsyG+KUYGY0coX6KUCDancA0Vw225KJ2HJO0yCNr1vq5r+lJTleDaJf0K7iOhjw4SWhu03TMBzYTJ9krmzULQ==", "dependencies": { "@babel/helper-module-imports": "^7.24.7", - "@babel/helper-plugin-utils": "^7.24.7", + "@babel/helper-plugin-utils": "^7.24.8", "babel-plugin-polyfill-corejs2": "^0.4.10", - "babel-plugin-polyfill-corejs3": "^0.10.1", + "babel-plugin-polyfill-corejs3": "^0.10.6", "babel-plugin-polyfill-regenerator": "^0.6.1", "semver": "^6.3.1" }, @@ -1726,12 +1704,12 @@ } }, "node_modules/@babel/plugin-transform-runtime/node_modules/babel-plugin-polyfill-corejs3": { - "version": "0.10.4", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.4.tgz", - "integrity": "sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==", + "version": "0.10.6", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz", + "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==", "dependencies": { - "@babel/helper-define-polyfill-provider": "^0.6.1", - "core-js-compat": "^3.36.1" + "@babel/helper-define-polyfill-provider": "^0.6.2", + "core-js-compat": "^3.38.0" }, "peerDependencies": { "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" @@ -2083,9 +2061,9 @@ "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" }, "node_modules/@babel/standalone": { - "version": "7.24.7", - "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.24.7.tgz", - "integrity": "sha512-QRIRMJ2KTeN+vt4l9OjYlxDVXEpcor1Z6V7OeYzeBOw6Q8ew9oMTHjzTx8s6ClsZO7wVf6JgTRutihatN6K0yA==", + "version": "7.25.5", + "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.25.5.tgz", + "integrity": "sha512-46bI7GJHwgWfWszOWMvJIsJjXd+LBMIlaiw4R54+b7GvDfxTVE6ytsqR8uEiI/zYECoB33ChwfN0wq/MLHLFXg==", "engines": { "node": ">=6.9.0" } @@ -2148,11 +2126,11 @@ } }, "node_modules/@babel/types": { - "version": "7.24.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.7.tgz", - "integrity": "sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==", + "version": "7.25.2", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz", + "integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==", "dependencies": { - "@babel/helper-string-parser": "^7.24.7", + "@babel/helper-string-parser": "^7.24.8", "@babel/helper-validator-identifier": "^7.24.7", "to-fast-properties": "^2.0.0" }, @@ -3403,9 +3381,9 @@ "license": "MIT" }, "node_modules/@data-driven-forms/react-form-renderer": { - "version": "3.22.4", - "resolved": "https://registry.npmjs.org/@data-driven-forms/react-form-renderer/-/react-form-renderer-3.22.4.tgz", - "integrity": "sha512-39tvEvBHn2vYtFaxigmgM26XZeec+xjxYzougi7eyr3QGheVvy8JO2nyzYBX1wKfyALhaonfQbi7m/ak1V0BNg==", + "version": "3.23.3", + "resolved": "https://registry.npmjs.org/@data-driven-forms/react-form-renderer/-/react-form-renderer-3.23.3.tgz", + "integrity": "sha512-rR6nNbjkSOW+lfGLOWPC6hbpmptmIdJIqyD4EPexux9ErneU5du9SF2TdT+UwouzJ+cA4NzYAn8Zvsb2Dly/9Q==", "dependencies": { "final-form": "^4.20.4", "final-form-arrays": "^3.0.2", @@ -3455,15 +3433,15 @@ } }, "node_modules/@emotion/babel-preset-css-prop/node_modules/@babel/plugin-transform-react-jsx": { - "version": "7.24.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.24.7.tgz", - "integrity": "sha512-+Dj06GDZEFRYvclU6k4bme55GKBEWUmByM/eoKuqg4zTNQHiApWRhQph5fxQB2wAEFvRzL1tOEj1RJ19wJrhoA==", + "version": "7.25.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.2.tgz", + "integrity": "sha512-KQsqEAVBpU82NM/B/N9j9WOdphom1SZH3R+2V7INrQUH+V9EBFwZsEJl8eBIVeQE62FxJCc70jzEZwqU7RcVqA==", "dependencies": { "@babel/helper-annotate-as-pure": "^7.24.7", "@babel/helper-module-imports": "^7.24.7", - "@babel/helper-plugin-utils": "^7.24.7", + "@babel/helper-plugin-utils": "^7.24.8", "@babel/plugin-syntax-jsx": "^7.24.7", - "@babel/types": "^7.24.7" + "@babel/types": "^7.25.2" }, "engines": { "node": ">=6.9.0" @@ -17791,9 +17769,9 @@ "integrity": "sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==" }, "node_modules/@types/http-proxy": { - "version": "1.17.14", - "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.14.tgz", - "integrity": "sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w==", + "version": "1.17.15", + "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.15.tgz", + "integrity": "sha512-25g5atgiVNTIv0LBDTg1H74Hvayx0ajtJPLLcYE3whFv75J0pWNtOBzaXJQgDTmrX1bx5U9YC2w/n65BN1HwRQ==", "dependencies": { "@types/node": "*" } @@ -18870,12 +18848,15 @@ } }, "node_modules/array-buffer-byte-length": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz", - "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz", + "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==", "dependencies": { - "call-bind": "^1.0.2", - "is-array-buffer": "^3.0.1" + "call-bind": "^1.0.5", + "is-array-buffer": "^3.0.4" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -19047,17 +19028,33 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/array.prototype.tosorted": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz", + "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==", + "dependencies": { + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-abstract": "^1.23.3", + "es-errors": "^1.3.0", + "es-shim-unscopables": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/arraybuffer.prototype.slice": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz", - "integrity": "sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz", + "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==", "dependencies": { - "array-buffer-byte-length": "^1.0.0", - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1", - "get-intrinsic": "^1.2.1", - "is-array-buffer": "^3.0.2", + "array-buffer-byte-length": "^1.0.1", + "call-bind": "^1.0.5", + "define-properties": "^1.2.1", + "es-abstract": "^1.22.3", + "es-errors": "^1.2.1", + "get-intrinsic": "^1.2.3", + "is-array-buffer": "^3.0.4", "is-shared-array-buffer": "^1.0.2" }, "engines": { @@ -19267,9 +19264,12 @@ } }, "node_modules/available-typed-arrays": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", - "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", + "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==", + "dependencies": { + "possible-typed-array-names": "^1.0.0" + }, "engines": { "node": ">= 0.4" }, @@ -19296,9 +19296,9 @@ } }, "node_modules/axios": { - "version": "1.7.2", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", - "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==", + "version": "1.7.5", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.5.tgz", + "integrity": "sha512-fZu86yCo+svH3uqJ/yTdQ0QHpQu5oL+/QE+QPSv6BZSkDAoky9vytxp7u5qk83OJFS3kEBcesWni9WTZAv3tSw==", "dependencies": { "follow-redirects": "^1.15.6", "form-data": "^4.0.0", @@ -20609,19 +20609,20 @@ "license": "MIT" }, "node_modules/body-parser": { - "version": "1.20.0", - "license": "MIT", + "version": "1.20.2", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz", + "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==", "dependencies": { "bytes": "3.1.2", - "content-type": "~1.0.4", + "content-type": "~1.0.5", "debug": "2.6.9", "depd": "2.0.0", "destroy": "1.2.0", "http-errors": "2.0.0", "iconv-lite": "0.4.24", "on-finished": "2.4.1", - "qs": "6.10.3", - "raw-body": "2.5.1", + "qs": "6.11.0", + "raw-body": "2.5.2", "type-is": "~1.6.18", "unpipe": "1.0.0" }, @@ -20929,9 +20930,9 @@ } }, "node_modules/browserslist": { - "version": "4.23.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.1.tgz", - "integrity": "sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==", + "version": "4.23.3", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz", + "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==", "funding": [ { "type": "opencollective", @@ -20947,10 +20948,10 @@ } ], "dependencies": { - "caniuse-lite": "^1.0.30001629", - "electron-to-chromium": "^1.4.796", - "node-releases": "^2.0.14", - "update-browserslist-db": "^1.0.16" + "caniuse-lite": "^1.0.30001646", + "electron-to-chromium": "^1.5.4", + "node-releases": "^2.0.18", + "update-browserslist-db": "^1.1.0" }, "bin": { "browserslist": "cli.js" @@ -21594,9 +21595,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001632", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001632.tgz", - "integrity": "sha512-udx3o7yHJfUxMLkGohMlVHCvFvWmirKh9JAH/d7WOLPetlH+LTL5cocMZ0t7oZx/mdlOWXti97xLZWc8uURRHg==", + "version": "1.0.30001651", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz", + "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==", "funding": [ { "type": "opencollective", @@ -21656,6 +21657,14 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/centra": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/centra/-/centra-2.7.0.tgz", + "integrity": "sha512-PbFMgMSrmgx6uxCdm57RUos9Tc3fclMvhLSATYN39XsDV29B89zZ3KA89jmY0vwSGazyU+uerqwa6t+KaodPcg==", + "dependencies": { + "follow-redirects": "^1.15.6" + } + }, "node_modules/chalk": { "version": "2.4.2", "license": "MIT", @@ -21778,20 +21787,24 @@ "license": "MIT" }, "node_modules/cheerio": { - "version": "1.0.0-rc.12", - "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz", - "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz", + "integrity": "sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==", "dependencies": { "cheerio-select": "^2.1.0", "dom-serializer": "^2.0.0", "domhandler": "^5.0.3", - "domutils": "^3.0.1", - "htmlparser2": "^8.0.1", - "parse5": "^7.0.0", - "parse5-htmlparser2-tree-adapter": "^7.0.0" + "domutils": "^3.1.0", + "encoding-sniffer": "^0.2.0", + "htmlparser2": "^9.1.0", + "parse5": "^7.1.2", + "parse5-htmlparser2-tree-adapter": "^7.0.0", + "parse5-parser-stream": "^7.1.2", + "undici": "^6.19.5", + "whatwg-mimetype": "^4.0.0" }, "engines": { - "node": ">= 6" + "node": ">=18.17" }, "funding": { "url": "https://github.com/cheeriojs/cheerio?sponsor=1" @@ -21931,9 +21944,9 @@ } }, "node_modules/cheerio/node_modules/htmlparser2": { - "version": "8.0.2", - "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz", - "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz", + "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==", "funding": [ "https://github.com/fb55/htmlparser2?sponsor=1", { @@ -21944,8 +21957,8 @@ "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", - "domutils": "^3.0.1", - "entities": "^4.4.0" + "domutils": "^3.1.0", + "entities": "^4.5.0" } }, "node_modules/cheerio/node_modules/parse5": { @@ -21959,6 +21972,14 @@ "url": "https://github.com/inikulin/parse5?sponsor=1" } }, + "node_modules/cheerio/node_modules/whatwg-mimetype": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz", + "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==", + "engines": { + "node": ">=18" + } + }, "node_modules/chokidar": { "version": "3.5.3", "funding": [ @@ -22775,8 +22796,9 @@ "license": "MIT" }, "node_modules/content-type": { - "version": "1.0.4", - "license": "MIT", + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz", + "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==", "engines": { "node": ">= 0.6" } @@ -23576,8 +23598,9 @@ } }, "node_modules/cookie": { - "version": "0.5.0", - "license": "MIT", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", "engines": { "node": ">= 0.6" } @@ -23917,11 +23940,11 @@ } }, "node_modules/core-js-compat": { - "version": "3.37.1", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz", - "integrity": "sha512-9TNiImhKvQqSUkOvk/mMRZzOANTiEVC7WaBNhHcKM7x+/5E1l5NvsysR19zuDQScE8k+kfQXWRN3AtS/eOSHpg==", + "version": "3.38.1", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz", + "integrity": "sha512-JRH6gfXxGmrzF3tZ57lFx97YARxCXPaMzPo6jELZhv88pBH5VXpQ+y0znKGlFnzuaihqhLbefxSJxWJMPtfDzw==", "dependencies": { - "browserslist": "^4.23.0" + "browserslist": "^4.23.3" }, "funding": { "type": "opencollective", @@ -25258,6 +25281,54 @@ "node": ">=10" } }, + "node_modules/data-view-buffer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz", + "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==", + "dependencies": { + "call-bind": "^1.0.6", + "es-errors": "^1.3.0", + "is-data-view": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/data-view-byte-length": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz", + "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==", + "dependencies": { + "call-bind": "^1.0.7", + "es-errors": "^1.3.0", + "is-data-view": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/data-view-byte-offset": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz", + "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==", + "dependencies": { + "call-bind": "^1.0.6", + "es-errors": "^1.3.0", + "is-data-view": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/dataloader": { "version": "1.4.0", "license": "BSD-3-Clause" @@ -25918,29 +25989,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/define-lazy-prop": { - "version": "2.0.0", - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/define-properties": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz", - "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==", - "dependencies": { - "define-data-property": "^1.0.1", - "has-property-descriptors": "^1.0.0", - "object-keys": "^1.1.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/define-property": { "version": "2.0.2", "license": "MIT", @@ -26872,9 +26920,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.798", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.798.tgz", - "integrity": "sha512-by9J2CiM9KPGj9qfp5U4FcPSbXJG7FNzqnYaY4WLzX+v2PHieVGmnsA4dxfpGE3QEC7JofpPZmn7Vn1B9NR2+Q==" + "version": "1.5.12", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.12.tgz", + "integrity": "sha512-tIhPkdlEoCL1Y+PToq3zRNehUaKp3wBX/sr7aclAWdIWjvqAe/Im/H0SiCM4c1Q8BLPHCdoJTol+ZblflydehA==" }, "node_modules/element-resize-detector": { "version": "1.2.4", @@ -26936,6 +26984,40 @@ "iconv-lite": "^0.6.2" } }, + "node_modules/encoding-sniffer": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.0.tgz", + "integrity": "sha512-ju7Wq1kg04I3HtiYIOrUrdfdDvkyO9s5XM8QAj/bN61Yo/Vb4vgJxy5vi4Yxk01gWHbrofpPtpxM8bKger9jhg==", + "dependencies": { + "iconv-lite": "^0.6.3", + "whatwg-encoding": "^3.1.1" + }, + "funding": { + "url": "https://github.com/fb55/encoding-sniffer?sponsor=1" + } + }, + "node_modules/encoding-sniffer/node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/encoding-sniffer/node_modules/whatwg-encoding": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz", + "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==", + "dependencies": { + "iconv-lite": "0.6.3" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/encoding/node_modules/iconv-lite": { "version": "0.6.3", "license": "MIT", @@ -27166,49 +27248,56 @@ } }, "node_modules/es-abstract": { - "version": "1.22.3", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz", - "integrity": "sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==", + "version": "1.23.3", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz", + "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==", "dependencies": { - "array-buffer-byte-length": "^1.0.0", - "arraybuffer.prototype.slice": "^1.0.2", - "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.5", - "es-set-tostringtag": "^2.0.1", + "array-buffer-byte-length": "^1.0.1", + "arraybuffer.prototype.slice": "^1.0.3", + "available-typed-arrays": "^1.0.7", + "call-bind": "^1.0.7", + "data-view-buffer": "^1.0.1", + "data-view-byte-length": "^1.0.1", + "data-view-byte-offset": "^1.0.0", + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.0.0", + "es-set-tostringtag": "^2.0.3", "es-to-primitive": "^1.2.1", "function.prototype.name": "^1.1.6", - "get-intrinsic": "^1.2.2", - "get-symbol-description": "^1.0.0", + "get-intrinsic": "^1.2.4", + "get-symbol-description": "^1.0.2", "globalthis": "^1.0.3", "gopd": "^1.0.1", - "has-property-descriptors": "^1.0.0", - "has-proto": "^1.0.1", + "has-property-descriptors": "^1.0.2", + "has-proto": "^1.0.3", "has-symbols": "^1.0.3", - "hasown": "^2.0.0", - "internal-slot": "^1.0.5", - "is-array-buffer": "^3.0.2", + "hasown": "^2.0.2", + "internal-slot": "^1.0.7", + "is-array-buffer": "^3.0.4", "is-callable": "^1.2.7", - "is-negative-zero": "^2.0.2", + "is-data-view": "^1.0.1", + "is-negative-zero": "^2.0.3", "is-regex": "^1.1.4", - "is-shared-array-buffer": "^1.0.2", + "is-shared-array-buffer": "^1.0.3", "is-string": "^1.0.7", - "is-typed-array": "^1.1.12", + "is-typed-array": "^1.1.13", "is-weakref": "^1.0.2", "object-inspect": "^1.13.1", "object-keys": "^1.1.1", - "object.assign": "^4.1.4", - "regexp.prototype.flags": "^1.5.1", - "safe-array-concat": "^1.0.1", - "safe-regex-test": "^1.0.0", - "string.prototype.trim": "^1.2.8", - "string.prototype.trimend": "^1.0.7", - "string.prototype.trimstart": "^1.0.7", - "typed-array-buffer": "^1.0.0", - "typed-array-byte-length": "^1.0.0", - "typed-array-byte-offset": "^1.0.0", - "typed-array-length": "^1.0.4", + "object.assign": "^4.1.5", + "regexp.prototype.flags": "^1.5.2", + "safe-array-concat": "^1.1.2", + "safe-regex-test": "^1.0.3", + "string.prototype.trim": "^1.2.9", + "string.prototype.trimend": "^1.0.8", + "string.prototype.trimstart": "^1.0.8", + "typed-array-buffer": "^1.0.2", + "typed-array-byte-length": "^1.0.1", + "typed-array-byte-offset": "^1.0.2", + "typed-array-length": "^1.0.6", "unbox-primitive": "^1.0.2", - "which-typed-array": "^1.1.13" + "which-typed-array": "^1.1.15" }, "engines": { "node": ">= 0.4" @@ -27264,25 +27353,36 @@ "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz", "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==" }, + "node_modules/es-object-atoms": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz", + "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==", + "dependencies": { + "es-errors": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/es-set-tostringtag": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz", - "integrity": "sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz", + "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==", "dependencies": { - "get-intrinsic": "^1.2.2", - "has-tostringtag": "^1.0.0", - "hasown": "^2.0.0" + "get-intrinsic": "^1.2.4", + "has-tostringtag": "^1.0.2", + "hasown": "^2.0.1" }, "engines": { "node": ">= 0.4" } }, "node_modules/es-shim-unscopables": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz", - "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz", + "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==", "dependencies": { - "has": "^1.0.3" + "hasown": "^2.0.0" } }, "node_modules/es-to-primitive": { @@ -28635,15 +28735,16 @@ "license": "MIT" }, "node_modules/express": { - "version": "4.18.1", - "license": "MIT", + "version": "4.19.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz", + "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.0", + "body-parser": "1.20.2", "content-disposition": "0.5.4", "content-type": "~1.0.4", - "cookie": "0.5.0", + "cookie": "0.6.0", "cookie-signature": "1.0.6", "debug": "2.6.9", "depd": "2.0.0", @@ -28659,7 +28760,7 @@ "parseurl": "~1.3.3", "path-to-regexp": "0.1.7", "proxy-addr": "~2.0.7", - "qs": "6.10.3", + "qs": "6.11.0", "range-parser": "~1.2.1", "safe-buffer": "5.2.1", "send": "0.18.0", @@ -31701,15 +31802,15 @@ } }, "node_modules/gatsby-recipes/node_modules/@babel/plugin-transform-react-jsx": { - "version": "7.24.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.24.7.tgz", - "integrity": "sha512-+Dj06GDZEFRYvclU6k4bme55GKBEWUmByM/eoKuqg4zTNQHiApWRhQph5fxQB2wAEFvRzL1tOEj1RJ19wJrhoA==", + "version": "7.25.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.2.tgz", + "integrity": "sha512-KQsqEAVBpU82NM/B/N9j9WOdphom1SZH3R+2V7INrQUH+V9EBFwZsEJl8eBIVeQE62FxJCc70jzEZwqU7RcVqA==", "dependencies": { "@babel/helper-annotate-as-pure": "^7.24.7", "@babel/helper-module-imports": "^7.24.7", - "@babel/helper-plugin-utils": "^7.24.7", + "@babel/helper-plugin-utils": "^7.24.8", "@babel/plugin-syntax-jsx": "^7.24.7", - "@babel/types": "^7.24.7" + "@babel/types": "^7.25.2" }, "engines": { "node": ">=6.9.0" @@ -32128,9 +32229,9 @@ } }, "node_modules/gatsby-recipes/node_modules/ws": { - "version": "7.5.9", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz", - "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", + "version": "7.5.10", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz", + "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==", "engines": { "node": ">=8.3.0" }, @@ -32674,9 +32775,9 @@ } }, "node_modules/gatsby/node_modules/@typescript-eslint/typescript-estree/node_modules/debug": { - "version": "4.3.5", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", - "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==", + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz", + "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==", "dependencies": { "ms": "2.1.2" }, @@ -33124,9 +33225,9 @@ } }, "node_modules/gatsby/node_modules/eslint/node_modules/debug": { - "version": "4.3.5", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", - "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==", + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz", + "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==", "dependencies": { "ms": "2.1.2" }, @@ -34935,11 +35036,13 @@ } }, "node_modules/get-symbol-description": { - "version": "1.0.0", - "license": "MIT", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz", + "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==", "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.1.1" + "call-bind": "^1.0.5", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.4" }, "engines": { "node": ">= 0.4" @@ -35607,17 +35710,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/gopd": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", - "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", - "dependencies": { - "get-intrinsic": "^1.1.3" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/got": { "version": "9.6.0", "license": "MIT", @@ -35968,9 +36060,9 @@ } }, "node_modules/has-proto": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz", - "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz", + "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==", "engines": { "node": ">= 0.4" }, @@ -36009,10 +36101,11 @@ } }, "node_modules/has-tostringtag": { - "version": "1.0.0", - "license": "MIT", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", + "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", "dependencies": { - "has-symbols": "^1.0.2" + "has-symbols": "^1.0.3" }, "engines": { "node": ">= 0.4" @@ -36159,9 +36252,9 @@ } }, "node_modules/hasown": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", - "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", "dependencies": { "function-bind": "^1.1.2" }, @@ -37676,11 +37769,11 @@ } }, "node_modules/internal-slot": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.6.tgz", - "integrity": "sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz", + "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==", "dependencies": { - "get-intrinsic": "^1.2.2", + "es-errors": "^1.3.0", "hasown": "^2.0.0", "side-channel": "^1.0.4" }, @@ -37821,13 +37914,15 @@ } }, "node_modules/is-array-buffer": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz", - "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==", + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz", + "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==", "dependencies": { "call-bind": "^1.0.2", - "get-intrinsic": "^1.2.0", - "is-typed-array": "^1.1.10" + "get-intrinsic": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -37942,6 +38037,20 @@ "node": ">=0.10.0" } }, + "node_modules/is-data-view": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz", + "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==", + "dependencies": { + "is-typed-array": "^1.1.13" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-date-object": { "version": "1.0.5", "license": "MIT", @@ -38189,8 +38298,9 @@ "integrity": "sha512-Y4LTamMe0DDQIIAlaer9eKebAlDSV6huy+TWhJVPlzZh2o4tRP5SQWFlLn5N0To4mDD22/qdOq+veo1cSISLgQ==" }, "node_modules/is-negative-zero": { - "version": "2.0.2", - "license": "MIT", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz", + "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==", "engines": { "node": ">= 0.4" }, @@ -38393,11 +38503,14 @@ } }, "node_modules/is-shared-array-buffer": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz", - "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz", + "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==", "dependencies": { - "call-bind": "^1.0.2" + "call-bind": "^1.0.7" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -38468,11 +38581,11 @@ } }, "node_modules/is-typed-array": { - "version": "1.1.12", - "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz", - "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==", + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz", + "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==", "dependencies": { - "which-typed-array": "^1.1.11" + "which-typed-array": "^1.1.14" }, "engines": { "node": ">= 0.4" @@ -41157,9 +41270,9 @@ } }, "node_modules/joi": { - "version": "17.13.1", - "resolved": "https://registry.npmjs.org/joi/-/joi-17.13.1.tgz", - "integrity": "sha512-vaBlIKCyo4FCUtCm7Eu4QZd/q02bWcxfUO6YSXAZOWF6gzcLBeba8kwotUdYJjDLW8Cz8RywsSOqiNJZW0mNvg==", + "version": "17.13.3", + "resolved": "https://registry.npmjs.org/joi/-/joi-17.13.3.tgz", + "integrity": "sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==", "dependencies": { "@hapi/hoek": "^9.3.0", "@hapi/topo": "^5.1.0", @@ -42345,20 +42458,31 @@ } }, "node_modules/load-bmfont": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.1.tgz", - "integrity": "sha512-8UyQoYmdRDy81Brz6aLAUhfZLwr5zV0L3taTQ4hju7m6biuwiWiJXjPhBJxbUQJA8PrkvJ/7Enqmwk2sM14soA==", + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.2.tgz", + "integrity": "sha512-qElWkmjW9Oq1F9EI5Gt7aD9zcdHb9spJCW1L/dmPf7KzCCEJxq8nhHz5eCgI9aMf7vrG/wyaCqdsI+Iy9ZTlog==", "dependencies": { "buffer-equal": "0.0.1", "mime": "^1.3.4", "parse-bmfont-ascii": "^1.0.3", "parse-bmfont-binary": "^1.0.5", "parse-bmfont-xml": "^1.1.4", - "phin": "^2.9.1", + "phin": "^3.7.1", "xhr": "^2.0.1", "xtend": "^4.0.0" } }, + "node_modules/load-bmfont/node_modules/phin": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/phin/-/phin-3.7.1.tgz", + "integrity": "sha512-GEazpTWwTZaEQ9RhL7Nyz0WwqilbqgLahDM3D0hxWwmVDI52nXEybHqiN6/elwpkJBhcuj+WbBu+QfT0uhPGfQ==", + "dependencies": { + "centra": "^2.7.0" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/load-json-file": { "version": "4.0.0", "license": "MIT", @@ -44608,9 +44732,9 @@ } }, "node_modules/micromark-extension-mdxjs/node_modules/acorn": { - "version": "8.11.3", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", - "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", + "version": "8.12.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", + "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==", "bin": { "acorn": "bin/acorn" }, @@ -46266,9 +46390,9 @@ } }, "node_modules/node-releases": { - "version": "2.0.14", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", - "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==" + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz", + "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==" }, "node_modules/noms": { "version": "0.0.0", @@ -49190,6 +49314,39 @@ "url": "https://github.com/inikulin/parse5?sponsor=1" } }, + "node_modules/parse5-parser-stream": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz", + "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==", + "dependencies": { + "parse5": "^7.0.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, + "node_modules/parse5-parser-stream/node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/parse5-parser-stream/node_modules/parse5": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", + "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", + "dependencies": { + "entities": "^4.4.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, "node_modules/parseqs": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz", @@ -49789,6 +49946,14 @@ "node": ">=0.10.0" } }, + "node_modules/possible-typed-array-names": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", + "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==", + "engines": { + "node": ">= 0.4" + } + }, "node_modules/postcss": { "version": "8.4.16", "funding": [ @@ -51206,8 +51371,9 @@ } }, "node_modules/qs": { - "version": "6.10.3", - "license": "BSD-3-Clause", + "version": "6.11.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", + "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==", "dependencies": { "side-channel": "^1.0.4" }, @@ -51309,8 +51475,9 @@ } }, "node_modules/raw-body": { - "version": "2.5.1", - "license": "MIT", + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz", + "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==", "dependencies": { "bytes": "3.1.2", "http-errors": "2.0.0", @@ -52647,13 +52814,14 @@ } }, "node_modules/regexp.prototype.flags": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz", - "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz", + "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==", "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "set-function-name": "^2.0.0" + "call-bind": "^1.0.6", + "define-properties": "^1.2.1", + "es-errors": "^1.3.0", + "set-function-name": "^2.0.1" }, "engines": { "node": ">= 0.4" @@ -53983,12 +54151,12 @@ } }, "node_modules/safe-array-concat": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz", - "integrity": "sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz", + "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==", "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.2.1", + "call-bind": "^1.0.7", + "get-intrinsic": "^1.2.4", "has-symbols": "^1.0.3", "isarray": "^2.0.5" }, @@ -54020,14 +54188,17 @@ } }, "node_modules/safe-regex-test": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz", - "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz", + "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==", "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.1.3", + "call-bind": "^1.0.6", + "es-errors": "^1.3.0", "is-regex": "^1.1.4" }, + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -56014,13 +56185,14 @@ } }, "node_modules/string.prototype.trim": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz", - "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==", + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz", + "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==", "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1" + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-abstract": "^1.23.0", + "es-object-atoms": "^1.0.0" }, "engines": { "node": ">= 0.4" @@ -56030,26 +56202,29 @@ } }, "node_modules/string.prototype.trimend": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz", - "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==", + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz", + "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==", "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1" + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-object-atoms": "^1.0.0" }, "funding": { "url": "https://github.com/sponsors/ljharb" } }, "node_modules/string.prototype.trimstart": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz", - "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==", + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz", + "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==", "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1" + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-object-atoms": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -56291,9 +56466,9 @@ "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==" }, "node_modules/subscriptions-transport-ws/node_modules/ws": { - "version": "7.5.9", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz", - "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", + "version": "7.5.10", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz", + "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==", "engines": { "node": ">=8.3.0" }, @@ -56587,18 +56762,19 @@ } }, "node_modules/tar": { - "version": "6.1.11", - "license": "ISC", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz", + "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==", "dependencies": { "chownr": "^2.0.0", "fs-minipass": "^2.0.0", - "minipass": "^3.0.0", + "minipass": "^5.0.0", "minizlib": "^2.1.1", "mkdirp": "^1.0.3", "yallist": "^4.0.0" }, "engines": { - "node": ">= 10" + "node": ">=10" } }, "node_modules/tar-fs": { @@ -56633,6 +56809,14 @@ "node": ">=10" } }, + "node_modules/tar/node_modules/minipass": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz", + "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==", + "engines": { + "node": ">=8" + } + }, "node_modules/tar/node_modules/yallist": { "version": "4.0.0", "license": "ISC" @@ -60099,27 +60283,28 @@ "integrity": "sha512-39wxbwHdQ2sTiBB8wAzKfQ9GN+om8w+sjNWzr+vZJR5AMD5J+J7Yc8AtXnU9r/r2c8XiDZ/smxutDmZehX/qpQ==" }, "node_modules/typed-array-buffer": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz", - "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz", + "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==", "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.2.1", - "is-typed-array": "^1.1.10" + "call-bind": "^1.0.7", + "es-errors": "^1.3.0", + "is-typed-array": "^1.1.13" }, "engines": { "node": ">= 0.4" } }, "node_modules/typed-array-byte-length": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz", - "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz", + "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==", "dependencies": { - "call-bind": "^1.0.2", + "call-bind": "^1.0.7", "for-each": "^0.3.3", - "has-proto": "^1.0.1", - "is-typed-array": "^1.1.10" + "gopd": "^1.0.1", + "has-proto": "^1.0.3", + "is-typed-array": "^1.1.13" }, "engines": { "node": ">= 0.4" @@ -60129,15 +60314,16 @@ } }, "node_modules/typed-array-byte-offset": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz", - "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz", + "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==", "dependencies": { - "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.2", + "available-typed-arrays": "^1.0.7", + "call-bind": "^1.0.7", "for-each": "^0.3.3", - "has-proto": "^1.0.1", - "is-typed-array": "^1.1.10" + "gopd": "^1.0.1", + "has-proto": "^1.0.3", + "is-typed-array": "^1.1.13" }, "engines": { "node": ">= 0.4" @@ -60147,13 +60333,19 @@ } }, "node_modules/typed-array-length": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz", - "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==", + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz", + "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==", "dependencies": { - "call-bind": "^1.0.2", + "call-bind": "^1.0.7", "for-each": "^0.3.3", - "is-typed-array": "^1.1.9" + "gopd": "^1.0.1", + "has-proto": "^1.0.3", + "is-typed-array": "^1.1.13", + "possible-typed-array-names": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -60302,6 +60494,14 @@ "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz", "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==" }, + "node_modules/undici": { + "version": "6.19.8", + "resolved": "https://registry.npmjs.org/undici/-/undici-6.19.8.tgz", + "integrity": "sha512-U8uCCl2x9TK3WANvmBavymRzxbfFYG+tAu+fgx3zxQy3qdagQqBLwJVrdyO1TBfUXvfKveMKJZhpvUYoOjM+4g==", + "engines": { + "node": ">=18.17" + } + }, "node_modules/unescape": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unescape/-/unescape-1.0.1.tgz", @@ -60731,9 +60931,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.0.16", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz", - "integrity": "sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz", + "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==", "funding": [ { "type": "opencollective", @@ -62725,9 +62925,9 @@ } }, "node_modules/webpack-dev-server/node_modules/ws": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz", - "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==", + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.3.tgz", + "integrity": "sha512-jmTjYU0j60B+vHey6TfR3Z7RD61z/hmxBS3VMSGIrroOWXQEneK1zNuotOUrGyBHQj0yrpsLHPWtigEFd13ndA==", "dependencies": { "async-limiter": "~1.0.0" } @@ -63079,15 +63279,15 @@ } }, "node_modules/which-typed-array": { - "version": "1.1.13", - "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz", - "integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==", + "version": "1.1.15", + "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz", + "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==", "dependencies": { - "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.4", + "available-typed-arrays": "^1.0.7", + "call-bind": "^1.0.7", "for-each": "^0.3.3", "gopd": "^1.0.1", - "has-tostringtag": "^1.0.0" + "has-tostringtag": "^1.0.2" }, "engines": { "node": ">= 0.4" diff --git a/package.json b/package.json index a371a62ab..d8f48f379 100644 --- a/package.json +++ b/package.json @@ -24,11 +24,11 @@ "test-watch": "jest --watch", "test-dom": "lerna run test --scope react-magma-dom -- --watch --coverage=false", "storybook": "NODE_OPTIONS='--max-old-space-size=4096' start-storybook -p 6006", - "build:docs": "lerna run build --scope react-magma-docs --stream --no-progress", + "build:docs": "NODE_OPTIONS=--openssl-legacy-provider lerna run build --scope react-magma-docs --stream --no-progress", "build:lite": "lerna run build --ignore react-magma-docs --stream --no-progress", "build": "lerna run build --stream --no-progress", - "build:landing": "node website/react-magma-landing/scripts/build.js", - "build:storybook": "build-storybook", + "build:landing": "NODE_OPTIONS=--openssl-legacy-provider node website/react-magma-landing/scripts/build.js", + "build:storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook", "bootstrap": "lerna bootstrap", "lint": "lerna run lint", "develop": "npm run docs", diff --git a/packages/charts/package.json b/packages/charts/package.json index cd3940577..a03562dcf 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -30,7 +30,7 @@ "@emotion/styled": "^10.0.27", "react": "^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0", - "react-magma-dom": "^3.7.0-next.0", + "react-magma-dom": "^3.8.0", "react-magma-icons": "2.3.6" }, "dependencies": { @@ -41,7 +41,7 @@ "@emotion/styled": "^10.0.27", "react": "^16.10.0", "react-dom": "^16.10.0", - "react-magma-dom": "^3.7.0", + "react-magma-dom": "^3.8.0", "react-magma-icons": "2.3.6" } } \ No newline at end of file diff --git a/packages/dropzone/package.json b/packages/dropzone/package.json index 698618914..4adbc9fd3 100644 --- a/packages/dropzone/package.json +++ b/packages/dropzone/package.json @@ -30,7 +30,7 @@ "@emotion/styled": "^10.0.27", "react": "^16.0.0 || ^17.0.0", "react-dom": "^16.0.0 || ^17.0.0", - "react-magma-dom": "^3.7.0-next.0", + "react-magma-dom": "^3.8.0", "react-magma-icons": "2.3.6" }, "dependencies": { @@ -42,7 +42,7 @@ "@emotion/styled": "^10.0.27", "react": "^16.10.0", "react-dom": "^16.10.0", - "react-magma-dom": "^3.7.0", + "react-magma-dom": "^3.8.0", "react-magma-icons": "2.3.6" } } diff --git a/packages/react-magma-dom/CHANGELOG.md b/packages/react-magma-dom/CHANGELOG.md index cb584d984..ec2d7beec 100644 --- a/packages/react-magma-dom/CHANGELOG.md +++ b/packages/react-magma-dom/CHANGELOG.md @@ -1,3 +1,5 @@ + + ## 3.8.0 ### Minor Changes diff --git a/packages/react-magma-dom/package-lock.json b/packages/react-magma-dom/package-lock.json index 6eb603b36..b99c08ce1 100644 --- a/packages/react-magma-dom/package-lock.json +++ b/packages/react-magma-dom/package-lock.json @@ -1,16 +1,31 @@ { "name": "react-magma-dom", - "version": "3.7.0-next.0", + "version": "3.8.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "react-magma-dom", - "version": "3.7.0-next.0", + "version": "3.8.0", "license": "MIT", + "dependencies": { + "@popperjs/core": "^2.6.0", + "csstype": "^3.0.8", + "polished": "^3.2.0", + "react-popper": "^2.2.4" + }, "devDependencies": { + "@emotion/core": "^10.1.1", + "@emotion/styled": "^10.0.27", + "@emotion/styled-base": "^10.0.27", + "date-fns": "^2.16.1", + "downshift": "^5.4.5", + "framer-motion": "^4.1.11", + "mkdirp": "^1.0.4", "react": "^16.10.0", - "react-dom": "^16.10.0" + "react-dom": "^16.10.0", + "react-magma-icons": "2.3.6", + "uuid": "^8.3.0" }, "peerDependencies": { "@emotion/core": "^10.1.1", @@ -18,23 +33,730 @@ "date-fns": "^2.12.0", "downshift": "^5.4.5", "framer-motion": "^4.1.11", - "react": "^15.0.0 || ^16.0.0", - "react-dom": "^15.0.0 || ^16.0.0", + "react": "^16.10.0", + "react-dom": "^16.10.0", "react-magma-icons": "2.3.6", "uuid": "^8.3.0" } }, + "node_modules/@babel/code-frame": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz", + "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==", + "dev": true, + "dependencies": { + "@babel/highlight": "^7.24.7", + "picocolors": "^1.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/generator": { + "version": "7.25.5", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.5.tgz", + "integrity": "sha512-abd43wyLfbWoxC6ahM8xTkqLpGB2iWBVyuKC9/srhFunCd1SDNrV1s72bBpK4hLj8KLzHBBcOblvLQZBNw9r3w==", + "dev": true, + "dependencies": { + "@babel/types": "^7.25.4", + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25", + "jsesc": "^2.5.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz", + "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==", + "dev": true, + "dependencies": { + "@babel/traverse": "^7.24.7", + "@babel/types": "^7.24.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.24.8", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz", + "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz", + "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz", + "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==", + "dev": true, + "dependencies": { + "@babel/helper-validator-identifier": "^7.24.7", + "chalk": "^2.4.2", + "js-tokens": "^4.0.0", + "picocolors": "^1.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.25.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.4.tgz", + "integrity": "sha512-nq+eWrOgdtu3jG5Os4TQP3x3cLA8hR8TvJNjD8vnPa20WGycimcparWnLK4jJhElTK6SDyuJo1weMKO/5LpmLA==", + "dev": true, + "dependencies": { + "@babel/types": "^7.25.4" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/runtime": { + "version": "7.25.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.4.tgz", + "integrity": "sha512-DSgLeL/FNcpXuzav5wfYvHCGvynXkJbn3Zvc3823AEe9nPwW9IK4UoCSS5yGymmQzN0pCPvivtgS6/8U2kkm1w==", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/template": { + "version": "7.25.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz", + "integrity": "sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.24.7", + "@babel/parser": "^7.25.0", + "@babel/types": "^7.25.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.25.4", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.4.tgz", + "integrity": "sha512-VJ4XsrD+nOvlXyLzmLzUs/0qjFS4sK30te5yEFlvbbUNEgKaVb2BHZUpAL+ttLPQAHNrsI3zZisbfha5Cvr8vg==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.24.7", + "@babel/generator": "^7.25.4", + "@babel/parser": "^7.25.4", + "@babel/template": "^7.25.0", + "@babel/types": "^7.25.4", + "debug": "^4.3.1", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.25.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.4.tgz", + "integrity": "sha512-zQ1ijeeCXVEh+aNL0RlmkPkG8HUiDcU2pzQQFjtbntgAczRASFzj4H+6+bV+dy1ntKR14I/DypeuRG1uma98iQ==", + "dev": true, + "dependencies": { + "@babel/helper-string-parser": "^7.24.8", + "@babel/helper-validator-identifier": "^7.24.7", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@emotion/cache": { + "version": "10.0.29", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", + "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", + "dev": true, + "dependencies": { + "@emotion/sheet": "0.9.4", + "@emotion/stylis": "0.8.5", + "@emotion/utils": "0.11.3", + "@emotion/weak-memoize": "0.2.5" + } + }, + "node_modules/@emotion/core": { + "version": "10.3.1", + "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.3.1.tgz", + "integrity": "sha512-447aUEjPIm0MnE6QYIaFz9VQOHSXf4Iu6EWOIqq11EAPqinkSZmfymPTmlOE3QjLv846lH4JVZBUOtwGbuQoww==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.5.5", + "@emotion/cache": "^10.0.27", + "@emotion/css": "^10.0.27", + "@emotion/serialize": "^0.11.15", + "@emotion/sheet": "0.9.4", + "@emotion/utils": "0.11.3" + }, + "peerDependencies": { + "react": ">=16.3.0" + } + }, + "node_modules/@emotion/css": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz", + "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==", + "dev": true, + "dependencies": { + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3", + "babel-plugin-emotion": "^10.0.27" + } + }, + "node_modules/@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==", + "dev": true + }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "dev": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "dev": true + }, + "node_modules/@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "dev": true, + "dependencies": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "node_modules/@emotion/serialize/node_modules/csstype": { + "version": "2.6.21", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz", + "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==", + "dev": true + }, + "node_modules/@emotion/sheet": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==", + "dev": true + }, + "node_modules/@emotion/styled": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.3.0.tgz", + "integrity": "sha512-GgcUpXBBEU5ido+/p/mCT2/Xx+Oqmp9JzQRuC+a4lYM4i4LBBn/dWvc0rQ19N9ObA8/T4NWMrPNe79kMBDJqoQ==", + "dev": true, + "dependencies": { + "@emotion/styled-base": "^10.3.0", + "babel-plugin-emotion": "^10.0.27" + }, + "peerDependencies": { + "@emotion/core": "^10.0.27", + "react": ">=16.3.0" + } + }, + "node_modules/@emotion/styled-base": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.3.0.tgz", + "integrity": "sha512-PBRqsVKR7QRNkmfH78hTSSwHWcwDpecH9W6heujWAcyp2wdz/64PP73s7fWS1dIPm8/Exc8JAzYS8dEWXjv60w==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.5.5", + "@emotion/is-prop-valid": "0.8.8", + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3" + }, + "peerDependencies": { + "@emotion/core": "^10.0.28", + "react": ">=16.3.0" + } + }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", + "dev": true + }, + "node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==", + "dev": true + }, + "node_modules/@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==", + "dev": true + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==", + "dev": true + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", + "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", + "dev": true, + "dependencies": { + "@jridgewell/set-array": "^1.2.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.24" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/set-array": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", + "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", + "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", + "dev": true + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "dev": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@types/node": { + "version": "15.14.9", + "resolved": "https://registry.npmjs.org/@types/node/-/node-15.14.9.tgz", + "integrity": "sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A==", + "dev": true + }, + "node_modules/@types/parse-json": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", + "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", + "dev": true + }, + "node_modules/@types/prop-types": { + "version": "15.7.12", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", + "dev": true + }, + "node_modules/@types/react": { + "version": "16.14.60", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.60.tgz", + "integrity": "sha512-wIFmnczGsTcgwCBeIYOuy2mdXEiKZ5znU/jNOnMZPQyCcIxauMGWlX0TNG4lZ7NxRKj7YUIZRneJQSSdB2jKgg==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "^0.16", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", + "dev": true + }, + "node_modules/@types/uuid": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz", + "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==", + "dev": true + }, + "node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/babel-plugin-emotion": { + "version": "10.2.2", + "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz", + "integrity": "sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/serialize": "^0.11.16", + "babel-plugin-macros": "^2.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^1.0.5", + "find-root": "^1.1.0", + "source-map": "^0.5.7" + } + }, + "node_modules/babel-plugin-macros": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz", + "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.7.2", + "cosmiconfig": "^6.0.0", + "resolve": "^1.12.0" + } + }, + "node_modules/babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==", + "dev": true + }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true + }, + "node_modules/compute-scroll-into-view": { + "version": "1.0.20", + "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz", + "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==", + "dev": true + }, + "node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", + "dev": true + }, + "node_modules/cosmiconfig": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", + "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", + "dev": true, + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.1.0", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.7.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + }, + "node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, + "node_modules/debug": { + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz", + "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==", + "dev": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/downshift": { + "version": "5.4.7", + "resolved": "https://registry.npmjs.org/downshift/-/downshift-5.4.7.tgz", + "integrity": "sha512-xaH0RNqwJ5pAsyk9qBmR9XJWmg1OOWMfrhzYv0NH2NjJxn77S3zBcfClw341UfhGyKg5v+qVqg/CQzvAgBNCXQ==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.10.2", + "compute-scroll-into-view": "^1.0.14", + "prop-types": "^15.7.2", + "react-is": "^16.13.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dev": true, + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, + "node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", + "dev": true + }, + "node_modules/framer-motion": { + "version": "4.1.17", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.17.tgz", + "integrity": "sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==", + "dev": true, + "dependencies": { + "framesync": "5.3.0", + "hey-listen": "^1.0.8", + "popmotion": "9.3.6", + "style-value-types": "4.1.4", + "tslib": "^2.1.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": ">=16.8 || ^17.0.0", + "react-dom": ">=16.8 || ^17.0.0" + } + }, + "node_modules/framesync": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz", + "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==", + "dev": true, + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dev": true, + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==", + "dev": true + }, + "node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", + "dev": true + }, + "node_modules/is-core-module": { + "version": "2.15.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz", + "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==", + "dev": true, + "dependencies": { + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "node_modules/jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "dev": true, + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true + }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -42,6 +764,24 @@ "loose-envify": "cli.js" } }, + "node_modules/mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "dev": true, + "bin": { + "mkdirp": "bin/cmd.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -51,6 +791,80 @@ "node": ">=0.10.0" } }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true + }, + "node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/picocolors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", + "dev": true + }, + "node_modules/polished": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/polished/-/polished-3.7.2.tgz", + "integrity": "sha512-pQKtpZGmsZrW8UUpQMAnR7s3ppHeMQVNyMDKtUyKwuvDmklzcEyM5Kllb3JyE/sE/x7arDmyd35i+4vp99H6sQ==", + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/popmotion": { + "version": "9.3.6", + "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.6.tgz", + "integrity": "sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==", + "dev": true, + "dependencies": { + "framesync": "5.3.0", + "hey-listen": "^1.0.8", + "style-value-types": "4.1.4", + "tslib": "^2.1.0" + } + }, "node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", @@ -91,12 +905,81 @@ "react": "^16.14.0" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-magma-icons": { + "version": "2.3.6", + "resolved": "https://registry.npmjs.org/react-magma-icons/-/react-magma-icons-2.3.6.tgz", + "integrity": "sha512-4huMIo4hcN8cTwWLs0A4cwxgGXUaahYjVIHWNt+E5d0QCgUzJwwlivKJ7S/YmeEuLkP9r18wvNqFx+f6fFqvrQ==", + "dev": true, + "dependencies": { + "@types/node": "^15.3.0", + "@types/react": "^16.9.0", + "@types/uuid": "^8.3.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0", + "react-dom": "^15.0.0 || ^16.0.0", + "uuid": "^8.3.0" + } + }, + "node_modules/react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "dependencies": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + }, + "node_modules/resolve": { + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", + "dev": true, + "dependencies": { + "is-core-module": "^2.13.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/scheduler": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", @@ -106,6 +989,90 @@ "loose-envify": "^1.1.0", "object-assign": "^4.1.1" } + }, + "node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/style-value-types": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz", + "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==", + "dev": true, + "dependencies": { + "hey-listen": "^1.0.8", + "tslib": "^2.1.0" + } + }, + "node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/tslib": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", + "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==", + "dev": true + }, + "node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "dev": true, + "bin": { + "uuid": "dist/bin/uuid" + } + }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, + "node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "dev": true, + "engines": { + "node": ">= 6" + } } } } diff --git a/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx index 58a473592..6903c4777 100644 --- a/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx +++ b/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx @@ -31,6 +31,8 @@ const StyledItem = styled.li` `; const StyledSpan = typedStyled.span<{ isInverse?: boolean }>` + align-items: center; + display: flex; color: ${props => props.isInverse ? props.theme.colors.neutral100 diff --git a/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx b/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx index ad4c4aff0..126d8dbc4 100644 --- a/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx +++ b/packages/react-magma-dom/src/components/DatePicker/CalendarMonth.tsx @@ -174,7 +174,6 @@ export const CalendarMonth: React.FunctionComponent = ( /> { + const [chosenDate, setChosenDate] = React.useState( + undefined + ); + + function handleDateChange(newChosenDate: Date) { + setChosenDate(newChosenDate); + } + + return ( +
+

+ Chosen Date: + {chosenDate && ( + + {`${ + chosenDate.getMonth() + 1 + }/${chosenDate.getDate()}/${chosenDate.getFullYear()}`} + + )} +

+ +
+ +
+ ); +}; + export const Events = args => { const [chosenDate, setChosenDate] = React.useState( undefined diff --git a/packages/react-magma-dom/src/components/DatePicker/DatePicker.test.js b/packages/react-magma-dom/src/components/DatePicker/DatePicker.test.js index c28f50ef2..2e03fe968 100644 --- a/packages/react-magma-dom/src/components/DatePicker/DatePicker.test.js +++ b/packages/react-magma-dom/src/components/DatePicker/DatePicker.test.js @@ -18,6 +18,7 @@ import { import * as es from 'date-fns/locale/es'; import { DatePicker } from '.'; import { Modal } from '../Modal'; +import { ClearingTheDate } from './DatePicker.stories'; import { I18nContext } from '../../i18n'; import { defaultI18n } from '../../i18n/default'; @@ -55,6 +56,63 @@ describe('Date Picker', () => { ); }); + it('should render a Clear icon if isClearable prop is true', () => { + const valueDate = new Date('January 23, 2019'); + const { getByTestId } = render( + + ); + + expect(getByTestId('clear-button')).toBeInTheDocument(); + }); + + it('should clear input and Chosen Date value after clicking on isClearable X button', () => { + const labelText = 'Date Picker Label'; + const now = new Date(); + const day = format(now, 'dd')[0] === '0' ? format(now, 'dd')[1] : format(now, 'dd'); + const chosenDate = `${now.getMonth() + 1}/${now.getDate()}/${now.getFullYear()}` + + const { getByText, getByTestId, getByLabelText } = render( + + ); + + fireEvent.click(getByLabelText('Toggle Calendar Widget')); + + expect(getByText(day)).toBeInTheDocument(); + fireEvent.click(getByText(day)); + + expect(getByText('Chosen Date:').nextSibling.innerHTML).toEqual(chosenDate); + + fireEvent.click(getByTestId('clear-button')); + + expect(getByLabelText('Date Picker Label')).toHaveAttribute( + 'value', '') + expect(getByText('Chosen Date:').nextSibling).not.toBeInTheDocument(); + }); + + it('should clear input and Chosen Date value after clicking on Clear Date button', () => { + const labelText = 'Date Picker Label'; + const now = new Date(); + const day = format(now, 'dd')[0] === '0' ? format(now, 'dd')[1] : format(now, 'dd'); + const chosenDate = `${now.getMonth() + 1}/${now.getDate()}/${now.getFullYear()}` + + const { getByText, getByTestId, getByLabelText } = render( + + ); + + fireEvent.click(getByLabelText('Toggle Calendar Widget')); + + expect(getByText(day)).toBeInTheDocument(); + fireEvent.click(getByText(day)); + + expect(getByText('Chosen Date:').nextSibling.innerHTML).toEqual(chosenDate); + + fireEvent.click(getByText('Clear Date').parentElement); + + expect(getByLabelText('Date Picker Label')).toHaveAttribute( + 'value', '') + expect(getByText('Chosen Date:').nextSibling).not.toBeInTheDocument(); + }); + it('should set the value to the date in the value prop', () => { const defaultDate = new Date('January 17, 2019'); const valueDate = new Date('January 23, 2019'); @@ -509,7 +567,6 @@ describe('Date Picker', () => { key: 'Escape', code: 27, }); - setTimeout(() => { expect(getByTestId('calendarContainer')).toHaveStyleRule( 'display', diff --git a/packages/react-magma-dom/src/components/DatePicker/index.tsx b/packages/react-magma-dom/src/components/DatePicker/index.tsx index fa0ea9303..0e5ccc819 100644 --- a/packages/react-magma-dom/src/components/DatePicker/index.tsx +++ b/packages/react-magma-dom/src/components/DatePicker/index.tsx @@ -179,11 +179,12 @@ export const DatePicker = React.forwardRef( React.useEffect(() => { if (props.value) { - setChosenDate(setDateFromConsumer(props.value)); setFocusedDate( setDateFromConsumer(props.value) || setDefaultFocusedDate() ); + setChosenDate(setDateFromConsumer(props.value)); } + if (props.value === null) setChosenDate(undefined); }, [props.value]); function showHelperInformation() { @@ -344,7 +345,7 @@ export const DatePicker = React.forwardRef( props.onChange && typeof props.onChange === 'function' && - props.onChange(day.toISOString(), event); + props.onChange(day?.toISOString(), event); onDateChange(day); setFocusedDate(day); @@ -435,6 +436,7 @@ export const DatePicker = React.forwardRef( onBlur={handleInputBlur} onFocus={handleInputFocus} onKeyDown={handleInputKeyDown} + onDateChange={handleDateChange} placeholder={placeholder ? placeholder : dateFormat.toLowerCase()} type={InputType.text} value={inputValue} diff --git a/packages/react-magma-dom/src/components/Drawer/Drawer.stories.tsx b/packages/react-magma-dom/src/components/Drawer/Drawer.stories.tsx index 9d6624a28..28bcd6416 100644 --- a/packages/react-magma-dom/src/components/Drawer/Drawer.stories.tsx +++ b/packages/react-magma-dom/src/components/Drawer/Drawer.stories.tsx @@ -30,6 +30,7 @@ export const Default = args => { header="Drawer Title" onClose={() => setShowDrawer(false)} isOpen={showDrawer} + closeAriaLabel="Close drawer" {...args} >

This is a Drawer, doing Drawer things.

@@ -54,6 +55,8 @@ export const SiteNavigation = args => { onClose={() => setShowDrawer(false)} isOpen={showDrawer} position={DrawerPosition.right} + ariaLabel="Site Navigation Drawer" + closeAriaLabel="Close Navigation Drawer" > One diff --git a/packages/react-magma-dom/src/components/Drawer/Drawer.test.js b/packages/react-magma-dom/src/components/Drawer/Drawer.test.js index bfa98122f..7a98dfc2e 100644 --- a/packages/react-magma-dom/src/components/Drawer/Drawer.test.js +++ b/packages/react-magma-dom/src/components/Drawer/Drawer.test.js @@ -1,7 +1,6 @@ import React from 'react'; import { axe } from '../../../axe-helper'; import { Drawer } from '.'; -import { Transition } from '../Transition'; import { render, fireEvent } from '@testing-library/react'; const TEXT = 'Test Text'; @@ -88,9 +87,9 @@ describe('Drawer', () => { }); it('Does not violate accessibility standards', async () => { - const { baseElement } = render({TEXT}); + const { baseElement } = render({TEXT}); const results = await axe(baseElement); return expect(results).toHaveNoViolations(); }); -}); +}); \ No newline at end of file diff --git a/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx b/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx index c2956fbb6..631d0e118 100644 --- a/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx +++ b/packages/react-magma-dom/src/components/Dropdown/Dropdown.stories.tsx @@ -14,9 +14,6 @@ import { DropdownMenuNavItem } from './DropdownMenuNavItem'; import { DropdownSplitButton } from './DropdownSplitButton'; import { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button'; import { Card, CardBody } from '../Card'; -import { Input } from '../Input'; -import { Checkbox } from '../Checkbox'; -import { PasswordInput } from '../PasswordInput'; import { LocalPizzaIcon, LunchDiningIcon, diff --git a/packages/react-magma-dom/src/components/Hyperlink/Hyperlink.stories.tsx b/packages/react-magma-dom/src/components/Hyperlink/Hyperlink.stories.tsx index 172c8f9e2..655ea40b4 100644 --- a/packages/react-magma-dom/src/components/Hyperlink/Hyperlink.stories.tsx +++ b/packages/react-magma-dom/src/components/Hyperlink/Hyperlink.stories.tsx @@ -1,89 +1,397 @@ import React from 'react'; -import { Card, CardBody } from '../Card'; -import { Hyperlink } from '.'; import { ButtonColor, ButtonTextTransform } from '../Button'; +import { Card, CardBody } from '../Card'; +import { Hyperlink, HyperlinkIconPosition } from '.'; +import { Flex, FlexBehavior, FlexJustify } from '../Flex'; import { Meta } from '@storybook/react/types-6-0'; +import { magma } from '../../theme/magma'; +import { Paragraph } from '../Paragraph'; +import { Spacer, SpacerAxis } from '../Spacer'; +import { TypographyVisualStyle } from '../Typography'; +import { + CalendarTodayIcon, + KeyboardArrowLeftIcon, + KeyboardArrowRightIcon, + OpenInNewIcon, +} from 'react-magma-icons'; export default { component: Hyperlink, title: 'Hyperlink', + argTypes: { + iconPosition: { + control: { + type: 'select', + options: HyperlinkIconPosition, + }, + }, + styledAs: { + control: { + type: 'select', + options: ['Button', 'Link'], + }, + }, + }, } as Meta; -export const Default = () => { +export const Default = args => { + const { iconPosition } = args; + + return ( + <> + ] + : args.icon + } + > + Next + + + ); +}; +Default.args = { + styledAs: 'Link', + isInverse: false, + to: 'https://www.google.com', + hasUnderline: false, + icon: , + iconPosition: HyperlinkIconPosition.right, +}; + +export const All = args => { return ( <> Google + Google + + } + iconPosition={HyperlinkIconPosition.left} + > + Back + + , + , + ]} + iconPosition={HyperlinkIconPosition.both} > - Google + Guess + } + iconPosition={HyperlinkIconPosition.right} > - Google + Next + - - Google - + + } + iconPosition={HyperlinkIconPosition.left} + > + Brownie + + + + } + iconPosition={HyperlinkIconPosition.right} + > + Muffin + + + + + + + + +

+ Cupcake ipsum dolor sit amet wafer biscuit toffee. Chocolate bar + brownie lemon drops tootsie roll pudding muffin powder pudding.{' '} + + } + iconPosition={HyperlinkIconPosition.right} + > + I love chocolate cake + {' '} + Pastry dragée cheesecake chocolate bar donut jujubes candy canes + sugar plum bonbon. Toffee pie macaroon{' '} + + apple + {' '} + pie gummi bears gummi bears shortbread. +

+ - This is a link that does not use Hyperlink + Apple pie danish apple pie tootsie roll tiramisu dessert danish.{' '} + + This is a link that does not use Hyperlink. + {' '} + Marzipan candy danish chupa chups icing jelly-o danish halvah jelly. + Cake dragée candy canes liquorice cheesecake tootsie roll danish. + + + + + + + You can{' '} + , + , + ]} + iconPosition={HyperlinkIconPosition.both} + style={{ margin: `0 ${magma.spaceScale.spacing03}` }} + > + schedule an appointment + {' '} + to meet with us. + + + + You can{' '} + , + , + ]} + iconPosition={HyperlinkIconPosition.both} + style={{ margin: `0 ${magma.spaceScale.spacing03}` }} + > + schedule an appointment + {' '} + to meet with us. + + + + You can{' '} + , + , + ]} + iconPosition={HyperlinkIconPosition.both} + style={{ margin: `0 ${magma.spaceScale.spacing03}` }} + > + schedule an appointment + {' '} + to meet with us. + + + + You can{' '} + , + , + ]} + iconPosition={HyperlinkIconPosition.both} + style={{ margin: `0 ${magma.spaceScale.spacing03}` }} + > + schedule an appointment + {' '} + to meet with us. + + + + You can{' '} + , + , + ]} + iconPosition={HyperlinkIconPosition.both} + style={{ margin: `0 ${magma.spaceScale.spacing03}` }} + > + schedule an appointment + {' '} + to meet with us. + ); }; +All.args = {}; +All.parameters = { controls: { exclude: ['iconPosition', 'styledAs'] } }; -export const Inverse = () => { +export const Inverse = args => { return ( <> Google + { > Google + + } + iconPosition={HyperlinkIconPosition.left} + > + Back + + , + , + ]} + iconPosition={HyperlinkIconPosition.both} > - Google + Guess + } + iconPosition={HyperlinkIconPosition.right} > - Google + Next + - + + } + iconPosition={HyperlinkIconPosition.left} + isInverse + > + Brownie + + + + } + iconPosition={HyperlinkIconPosition.right} + isInverse + > + Muffin + + + + + + + + +

+ Cupcake ipsum dolor sit amet wafer biscuit toffee. Chocolate bar + brownie lemon drops tootsie roll pudding muffin powder pudding.{' '} + + } + iconPosition={HyperlinkIconPosition.right} + isInverse + > + I love chocolate cake + {' '} + Pastry dragée cheesecake chocolate bar donut jujubes candy canes + sugar plum bonbon. Toffee pie macaroon{' '} + + apple + {' '} + pie gummi bears gummi bears shortbread. +

+ + + + + + - Google - + You can{' '} + , + , + ]} + iconPosition={HyperlinkIconPosition.both} + style={{ margin: `0 ${magma.spaceScale.spacing03}` }} + > + schedule an appointment + {' '} + to meet with us. + + + + You can{' '} + , + , + ]} + iconPosition={HyperlinkIconPosition.both} + style={{ margin: `0 ${magma.spaceScale.spacing03}` }} + > + schedule an appointment + {' '} + to meet with us. + + + + You can{' '} + , + , + ]} + iconPosition={HyperlinkIconPosition.both} + style={{ margin: `0 ${magma.spaceScale.spacing03}` }} + > + schedule an appointment + {' '} + to meet with us. + + + + You can{' '} + , + , + ]} + iconPosition={HyperlinkIconPosition.both} + style={{ margin: `0 ${magma.spaceScale.spacing03}` }} + > + schedule an appointment + {' '} + to meet with us. + + + + You can{' '} + , + , + ]} + iconPosition={HyperlinkIconPosition.both} + style={{ margin: `0 ${magma.spaceScale.spacing03}` }} + > + schedule an appointment + {' '} + to meet with us. + ); }; +Inverse.args = {}; +Inverse.parameters = { controls: { exclude: ['iconPosition', 'styledAs'] } }; diff --git a/packages/react-magma-dom/src/components/Hyperlink/Hyperlink.test.js b/packages/react-magma-dom/src/components/Hyperlink/Hyperlink.test.js index 24a55b0cb..8582fee7d 100644 --- a/packages/react-magma-dom/src/components/Hyperlink/Hyperlink.test.js +++ b/packages/react-magma-dom/src/components/Hyperlink/Hyperlink.test.js @@ -1,9 +1,25 @@ import React from 'react'; -import { render } from '@testing-library/react'; -import { Hyperlink } from '.'; +import { axe } from '../../../axe-helper'; +import { getByTestId, render } from '@testing-library/react'; +import { Hyperlink, HyperlinkIconPosition } from '.'; import { magma } from '../../theme/magma'; +import { KeyboardArrowRightIcon } from 'react-magma-icons'; +import { ButtonSize } from '../Button'; describe('Hyperlink', () => { + it('does not violate detectible accessibility standards', () => { + const testId = 'a11y-test-id'; + const { container } = render( + + Google + + ); + + return axe(container.innerHTML).then(result => { + return expect(result).toHaveNoViolations(); + }); + }); + it('should find element by testId', () => { const testId = 'test-id'; const { getByTestId } = render( @@ -16,47 +32,61 @@ describe('Hyperlink', () => { }); it('should render a basic anchor element', () => { - const { getByText } = render( - Google + const testId = 'test-id-basic'; + const { getByTestId } = render( + + Google + ); - expect(getByText(/google/i)).toBeInTheDocument(); - expect(getByText(/google/i)).toHaveAttribute( + expect(getByTestId(testId)).toBeInTheDocument(); + expect(getByTestId(testId)).toHaveAttribute( 'href', 'https://www.google.com' ); }); it('should render a basic anchor element with link styles', () => { - const { getByText } = render( - Google + const testId = 'test-id'; + const { getByTestId } = render( + + Google + ); - const element = getByText(/google/i); + const element = getByTestId(testId); expect(element).toHaveStyleRule('color', magma.colors.primary); + expect(element).toHaveStyleRule('color', magma.colors.primary700, { + target: ':hover', + }); }); it('should render an inverse anchor element', () => { - const { getByText } = render( - + const testId = 'test-id'; + const { getByTestId } = render( + Google ); - const element = getByText(/google/i); + const element = getByTestId(testId); expect(element).toHaveStyleRule('color', magma.colors.tertiary); + expect(element).toHaveStyleRule('color', magma.colors.neutral100, { + target: ':hover', + }); }); it('should render an anchor element with default button styles', () => { - const { getByText } = render( - + const testId = 'test-id'; + const { getByTestId } = render( + Google ); - const element = getByText(/google/i); + const element = getByTestId(testId); expect(element).toHaveStyleRule( 'font-size', @@ -67,18 +97,20 @@ describe('Hyperlink', () => { }); it('should render an anchor element with passed in button styles', () => { - const { getByText } = render( + const testId = 'test-id'; + const { getByTestId } = render( Google ); - const element = getByText(/google/i); + const element = getByTestId(testId); expect(element).toHaveStyleRule( 'font-size', @@ -106,4 +138,172 @@ describe('Hyperlink', () => { ); }); + + describe('hasUnderline', () => { + it('has underline text decoration by default', () => { + const testId = 'test-id'; + const { getByTestId } = render( + + Google + + ); + expect(getByTestId(testId)).toHaveStyleRule( + 'text-decoration', + 'underline' + ); + }); + it('can toggle off underline text decoration', () => { + const testId = 'test-id'; + const { getByTestId } = render( + + Google + + ); + expect(getByTestId(testId)).toHaveStyleRule('text-decoration', 'none'); + }); + it('does not have underline when styled as a button', () => { + const testId = 'test-id'; + const { getByTestId } = render( + + Google + + ); + expect(getByTestId(testId)).toHaveStyleRule('text-decoration', 'none'); + }); + }); + + describe('with icons', () => { + it('displays icon on the left', () => { + const { container } = render( + } + iconPosition={HyperlinkIconPosition.left} + > + Back + + ); + const icon = container.querySelector('svg'); + expect(icon.parentElement).toHaveStyleRule( + 'padding-right', + magma.spaceScale.spacing03 + ); + expect(icon).toBeInTheDocument(); + }); + + it('displays icon on the right', () => { + const { container } = render( + } + iconPosition={HyperlinkIconPosition.right} + > + Back + + ); + const icon = container.querySelector('svg'); + expect(icon.parentElement).toHaveStyleRule( + 'padding-left', + magma.spaceScale.spacing03 + ); + expect(icon).toBeInTheDocument(); + }); + + it('displays two icons when an array is passed and position is both', () => { + const { container } = render( + , + , + ]} + iconPosition={HyperlinkIconPosition.both} + > + Back + + ); + const allIcons = container.querySelectorAll('svg'); + expect(allIcons[0].parentElement).toHaveStyleRule( + 'padding-right', + magma.spaceScale.spacing03 + ); + expect(allIcons[1].parentElement).toHaveStyleRule( + 'padding-left', + magma.spaceScale.spacing03 + ); + expect(allIcons.length).toBe(2); + expect(allIcons[0]).toBeInTheDocument(); + expect(allIcons[1]).toBeInTheDocument(); + }); + + it('displays one icon when an array is passed and position is left', () => { + const { container } = render( + , + , + ]} + iconPosition={HyperlinkIconPosition.left} + > + Back + + ); + const icon = container.querySelector('svg'); + const allIcons = container.querySelectorAll('svg'); + expect(icon.parentElement).toHaveStyleRule( + 'padding-right', + magma.spaceScale.spacing03 + ); + expect(allIcons.length).toBe(1); + expect(allIcons[0]).toBeInTheDocument(); + }); + + it('has larger padding when size is large', () => { + const { container } = render( + } + iconPosition={HyperlinkIconPosition.left} + size={ButtonSize.large} + > + Back + + ); + const icon = container.querySelector('svg'); + expect(icon.parentElement).toHaveStyleRule( + 'padding-right', + magma.spaceScale.spacing05 + ); + expect(icon).toBeInTheDocument(); + }); + + it('has smaller padding when size is large', () => { + const { container, getByText } = render( + } + iconPosition={HyperlinkIconPosition.left} + size={ButtonSize.small} + > + Back + + ); + const icon = container.querySelector('svg'); + expect(icon.parentElement).toHaveStyleRule( + 'padding-right', + magma.spaceScale.spacing02 + ); + expect(icon).toBeInTheDocument(); + }); + }); }); diff --git a/packages/react-magma-dom/src/components/Hyperlink/index.tsx b/packages/react-magma-dom/src/components/Hyperlink/index.tsx index 019b45adb..403b7e68a 100644 --- a/packages/react-magma-dom/src/components/Hyperlink/index.tsx +++ b/packages/react-magma-dom/src/components/Hyperlink/index.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ButtonStyles } from '../Button'; +import { ButtonSize, ButtonStyles } from '../Button'; import styled from '@emotion/styled'; import { css, ClassNames } from '@emotion/core'; import { omit, Omit } from '../../utils'; @@ -7,13 +7,20 @@ import { ThemeContext } from '../../theme/ThemeContext'; import { BaseStyledButton, buttonStyles } from '../StyledButton'; import { ThemeInterface } from '../../theme/magma'; import { useIsInverse } from '../../inverse'; +import { IconProps } from 'react-magma-icons'; + +export enum HyperlinkIconPosition { + left = 'left', + right = 'right', + both = 'both', +} -/** - * @children required - */ export interface HyperlinkProps extends ButtonStyles, Omit, 'color'> { + /** + * @children required + */ children: React.ReactNode; /** * How the hyperlink is styled (can look like either a plain link or a button) @@ -28,20 +35,33 @@ export interface HyperlinkProps * The href value of the link */ to: string; + hasUnderline?: boolean; + /** + * Icon to display within the component + */ + icon?: React.ReactElement | Array>; + /** + * Position within the link for the icon to appear + * @default HyperlinkIconPosition.right + */ + iconPosition?: HyperlinkIconPosition; } const linkStyles = props => css` color: ${props.isInverse ? props.theme.colors.tertiary : props.theme.colors.primary}; - text-decoration: underline; + text-decoration: ${props.hasUnderline ? 'underline' : 'none'}; font-family: ${props.theme.bodyFont}; + display: inline-flex; + align-items: center; &:not([disabled]) { &:hover, &:focus { color: ${props.isInverse - ? props.theme.colors.primary100 - : props.theme.colors.primary400}; + ? props.theme.colors.neutral100 + : props.theme.colors.primary700}; + text-decoration: underline; } &:focus { outline: 2px solid @@ -57,14 +77,52 @@ const StyledLink = styled.a<{ isInverse?: boolean; theme: ThemeInterface }>` ${linkStyles} `; +function getIconPadding(props) { + switch (props.size) { + case 'large': + return props.theme.spaceScale.spacing05; + case 'small': + return props.theme.spaceScale.spacing02; + default: + return props.theme.spaceScale.spacing03; + } +} + +const IconWrapper = styled.span<{ + size?: ButtonSize; + position?: HyperlinkIconPosition; +}>` + align-self: center; + display: inline-flex; + padding-left: ${props => + (props.position === HyperlinkIconPosition.right || + props.position === HyperlinkIconPosition.both) && + getIconPadding(props)}; + padding-right: ${props => + (props.position === HyperlinkIconPosition.left || + props.position === HyperlinkIconPosition.both) && + getIconPadding(props)}; +`; + export const Hyperlink = React.forwardRef( (props, ref) => { - const { children, to, styledAs, testId, ...rest } = props; + const { + children, + to, + styledAs, + testId, + hasUnderline = true, + icon, + iconPosition = null, + ...rest + } = props; const other = omit(['positionTop', 'positionLeft', 'type'], rest); const theme = React.useContext(ThemeContext); const isInverse = useIsInverse(props.isInverse); + const hasMultiIcons = icon && icon instanceof Array && icon?.length > 0; + if (typeof children === 'function') { const composedStyle = styledAs === 'Button' @@ -88,18 +146,66 @@ export const Hyperlink = React.forwardRef( const HyperlinkComponent = styledAs === 'Button' ? LinkStyledAsButton : StyledLink; - return ( - - {children} - - ); + if (icon && iconPosition !== null) { + return ( + + {iconPosition === HyperlinkIconPosition.right && <>{children}} + + {hasMultiIcons ? icon[0] : icon} + + {iconPosition === HyperlinkIconPosition.left && <>{children}} + + {iconPosition === HyperlinkIconPosition.both && hasMultiIcons && ( + <> + {children} + + {icon[1]} + + + )} + + ); + } else { + return ( + + {children} + + ); + } } } ); diff --git a/packages/react-magma-dom/src/components/Input/Input.stories.tsx b/packages/react-magma-dom/src/components/Input/Input.stories.tsx index 49984c1ab..326f67878 100644 --- a/packages/react-magma-dom/src/components/Input/Input.stories.tsx +++ b/packages/react-magma-dom/src/components/Input/Input.stories.tsx @@ -243,3 +243,49 @@ WithTwoIcons.args = { WithTwoIcons.parameters = { controls: { exclude: ['isInverse', 'type', 'iconPosition'] }, }; + +export const NumberInput = args => { + const [inputVal, setInputVal] = React.useState(1); + const [hasError, setHasError] = React.useState(false); + + function handleChange(event) { + setInputVal(event.target.value); + } + + React.useEffect(() => { + if (inputVal > 40 || inputVal < 1) { + setHasError(true); + } else { + setHasError(false); + } + }, [inputVal]); + + return ( + + + + ); +}; + +NumberInput.args = { + disabled: false, + helperMessage: 'Enter a number 1 - 40', + isClearable: false, +}; + +NumberInput.parameters = { + controls: { exclude: ['type', 'iconPosition', 'labelWidth'] }, +}; diff --git a/packages/react-magma-dom/src/components/Input/Input.test.js b/packages/react-magma-dom/src/components/Input/Input.test.js index 4a09d7f78..af1d2ccae 100644 --- a/packages/react-magma-dom/src/components/Input/Input.test.js +++ b/packages/react-magma-dom/src/components/Input/Input.test.js @@ -57,23 +57,28 @@ describe('Input', () => { const divColor = '#000000'; const inputColor = '#cccccc'; const labelColor = '#ffffff'; + const wrapperWidth = '60px'; - const { container, getByText, getByLabelText } = render( + const { container, getByText, getByLabelText, getByTestId } = render( ); const div = container.querySelector('div'); const label = getByText(labelText); const input = getByLabelText(labelText); + const wrapper = getByTestId('input-wrapper'); expect(div).toHaveStyle(`color: ${divColor}`); expect(input).toHaveStyle(`color: ${inputColor}`); expect(label).toHaveStyle(`color: ${labelColor}`); + expect(wrapper).toHaveStyle(`width: ${wrapperWidth}`); }); it('should render an inverse input with the correct styles', () => { diff --git a/packages/react-magma-dom/src/components/Input/InputMessage.tsx b/packages/react-magma-dom/src/components/Input/InputMessage.tsx index 608e71e40..74c92b2a8 100644 --- a/packages/react-magma-dom/src/components/Input/InputMessage.tsx +++ b/packages/react-magma-dom/src/components/Input/InputMessage.tsx @@ -32,7 +32,7 @@ function BuildMessageColor(props) { } const Message = typedStyled.div` - align-items: center; + align-items: flex-start; border-radius: ${props => props.theme.borderRadius}; color: ${props => BuildMessageColor(props)}; display: flex; diff --git a/packages/react-magma-dom/src/components/Input/index.tsx b/packages/react-magma-dom/src/components/Input/index.tsx index 456e75e43..7dbca38a0 100644 --- a/packages/react-magma-dom/src/components/Input/index.tsx +++ b/packages/react-magma-dom/src/components/Input/index.tsx @@ -108,6 +108,7 @@ export const Input = React.forwardRef( maxLength={maxLengthNum} onChange={handleChange} onClear={handleClear} + onDateChange={props.onDateChange} ref={ref} testId={testId} value={value} diff --git a/packages/react-magma-dom/src/components/InputBase/index.tsx b/packages/react-magma-dom/src/components/InputBase/index.tsx index 8c045a334..17abce3f6 100644 --- a/packages/react-magma-dom/src/components/InputBase/index.tsx +++ b/packages/react-magma-dom/src/components/InputBase/index.tsx @@ -78,6 +78,10 @@ export interface InputBaseProps * Style properties for the input element */ inputStyle?: React.CSSProperties; + /** + * Style properties for input wrapper element + */ + inputWrapperStyle?: React.CSSProperties; /** * Total number of characters in an input. */ @@ -104,7 +108,6 @@ export interface InputBaseProps * A number value which gives Character Counter the maximum length of allowable characters in an Input. * @deprecated = true */ - maxLength?: number; /** * Action that will fire when icon is clicked @@ -114,6 +117,10 @@ export interface InputBaseProps * Action that will fire when icon receives keypress */ onIconKeyDown?: (event) => void; + /** + * Action that will synchronize chosenDate with input value + */ + onDateChange?: (event) => void; /** * @internal */ @@ -570,9 +577,11 @@ export const InputBase = React.forwardRef( onClear, onIconClick, onIconKeyDown, + onDateChange, inputLength, inputSize, inputStyle, + inputWrapperStyle, testId, type, ...other @@ -611,6 +620,7 @@ export const InputBase = React.forwardRef( function handleClearInput() { onClear && typeof onClear === 'function' && onClear(); setValue(''); + onDateChange && typeof onDateChange === 'function' && onDateChange(null); inputRef.current.focus(); } @@ -620,10 +630,12 @@ export const InputBase = React.forwardRef( props.onChange(event); setValue(event.target.value); + if (!event.target.value && onDateChange && typeof onDateChange === 'function') onDateChange(null); } const passwordBtnWidth = () => { - const btnWidth = children?.props?.children?.[0]?.ref?.current?.offsetWidth; + const btnWidth = + children?.props?.children?.[0]?.ref?.current?.offsetWidth; if (typeof btnWidth === 'number') { return btnWidth; } else { @@ -637,7 +649,10 @@ export const InputBase = React.forwardRef( }; return ( - + ( hasCharacterCounter={hasCharacterCounter} iconPosition={iconPosition} inputSize={inputSize ? inputSize : InputSize.medium} - isClearable={isClearable && inputLength > 0} + isClearable={ + inputWrapperStyle?.width + ? isClearable + : isClearable && inputLength > 0 + } isInverse={useIsInverse(props.isInverse)} isPredictive={isPredictive} hasError={hasError} diff --git a/packages/react-magma-dom/src/components/Label/index.tsx b/packages/react-magma-dom/src/components/Label/index.tsx index 32a8a7a89..c7179e0c2 100644 --- a/packages/react-magma-dom/src/components/Label/index.tsx +++ b/packages/react-magma-dom/src/components/Label/index.tsx @@ -69,7 +69,7 @@ const StyledLabel = styled.label<{ props.iconPosition === InputIconPosition.top || props.labelPosition === LabelPosition.left ? 'inherit' - : 'nowrap'}; + : 'normal'}; `; const StyledSpan = StyledLabel.withComponent('span'); diff --git a/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx b/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx index f60ecb18a..bcd4f6a32 100644 --- a/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx +++ b/packages/react-magma-dom/src/components/Modal/Modal.stories.tsx @@ -246,6 +246,7 @@ export const NoHeaderOrFocusableContent = () => { return ( <> { this. A modal should have something actionable inside it. + diff --git a/packages/react-magma-dom/src/components/Modal/Modal.test.js b/packages/react-magma-dom/src/components/Modal/Modal.test.js index 67b92b317..d68738cbc 100644 --- a/packages/react-magma-dom/src/components/Modal/Modal.test.js +++ b/packages/react-magma-dom/src/components/Modal/Modal.test.js @@ -1,4 +1,5 @@ import React from 'react'; +import { axe } from '../../../axe-helper'; import { Modal } from '.'; import { act, render, fireEvent, queryByText } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; @@ -7,6 +8,29 @@ import { defaultI18n } from '../../i18n/default'; import { magma } from '../../theme/magma'; describe('Modal', () => { + describe('a11y', () => { + it('With header, does not violate accessibility standards', async () => { + const { baseElement } = render( + + Modal Text + + ); + const results = await axe(baseElement); + + return expect(results).toHaveNoViolations(); + }); + it('Without header, does not violate accessibility standards', async () => { + const { baseElement } = render( + + Modal Text + + ); + const results = await axe(baseElement); + + return expect(results).toHaveNoViolations(); + }); + }); + it('should find element by testId', () => { const testId = 'test-id'; const { getByTestId } = render( diff --git a/packages/react-magma-dom/src/components/Modal/Modal.tsx b/packages/react-magma-dom/src/components/Modal/Modal.tsx index 0666173a8..54fb23755 100644 --- a/packages/react-magma-dom/src/components/Modal/Modal.tsx +++ b/packages/react-magma-dom/src/components/Modal/Modal.tsx @@ -27,6 +27,10 @@ export enum ModalSize { * @children required */ export interface ModalProps extends React.HTMLAttributes { + /** + * Custom aria label ONLY for modals that do not have a header + */ + ariaLabel?: string; /** * The text read by screen readers for the close button * @default "Close dialog" @@ -324,6 +328,7 @@ export const Modal = React.forwardRef( } const { + ariaLabel, children, closeAriaLabel, closeButtonSize, @@ -365,71 +370,6 @@ export const Modal = React.forwardRef( } `} /> - - - {header && ( - - {header && ( -

- {header} -

- )} - - )} - - {children} - - {!isCloseButtonHidden && ( - - - - )} - - ( isOpen={isModalOpen} unmountOnExit theme={theme} - /> + > + + + {header && ( + + {header && ( +

+ {header} +

+ )} + + )} + + {children} + + {!isCloseButtonHidden && ( + + + + )} + + + , document.getElementsByTagName('body')[0] ) diff --git a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.stories.tsx b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.stories.tsx index 3dec515ce..2ee157024 100644 --- a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.stories.tsx +++ b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.stories.tsx @@ -14,6 +14,7 @@ const Template: Story = args => ( + ); @@ -42,6 +43,11 @@ export default { type: 'number', }, }, + errorMessage: { + control: { + type: 'text', + }, + }, }, } as Meta; diff --git a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx index 029a2894f..36ddc9fe9 100644 --- a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx +++ b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx @@ -34,7 +34,7 @@ export interface NativeSelectProps const typedStyled = styled as CreateStyled; -const StyledNativeSelectWrapper = styled.div<{ +const StyledNativeSelectWrapper = typedStyled.div<{ disabled?: boolean; hasError?: boolean; isInverse?: boolean; @@ -48,8 +48,10 @@ const StyledNativeSelectWrapper = styled.div<{ ? transparentize(0.6, props.theme.colors.neutral100) : props.disabled ? transparentize(0.4, props.theme.colors.neutral500) - : 'inherit'}; - margin: 0 0 0 -${props => props.theme.spaceScale.spacing06}; + : props.isInverse + ? props.theme.colors.neutral100 + : props.theme.colors.neutral700}; + margin: 0 ${props => props.theme.spaceScale.spacing03} 0 -${props => props.theme.spaceScale.spacing08}; pointer-events: none; z-index: 1; } @@ -60,21 +62,28 @@ function borderColors(props) { if (props.hasError) { return props.theme.colors.danger200; } + if (props.disabled) { + return transparentize(0.85, props.theme.colors.neutral100); + } return transparentize(0.5, props.theme.colors.neutral100); } if (props.hasError) { return props.theme.colors.danger; } + if (props.disabled) { + return props.theme.colors.neutral300; + } return props.theme.colors.neutral500; } -const StyledNativeSelect = styled.select<{ +const StyledNativeSelect = typedStyled.select<{ hasError?: boolean; isInverse?: boolean; theme: ThemeInterface; }>` ${inputBaseStyles}; height: 38px; + padding-right: ${props => props.theme.spaceScale.spacing08}; // Required for Windows && Chrome support background: inherit; > option { @@ -83,7 +92,7 @@ const StyledNativeSelect = styled.select<{ } `; -const StyledFormFieldContainer = styled(FormFieldContainer)<{ +const StyledFormFieldContainer = typedStyled(FormFieldContainer)<{ additionalContent?: React.ReactNode; hasLabel?: boolean; labelPosition?: LabelPosition; @@ -220,4 +229,4 @@ export const NativeSelect = React.forwardRef( return nativeSelect; } } -); \ No newline at end of file +); diff --git a/packages/react-magma-dom/src/components/ProgressBar/ProgressBar.stories.tsx b/packages/react-magma-dom/src/components/ProgressBar/ProgressBar.stories.tsx index 2d11c2a6c..3d015c44d 100644 --- a/packages/react-magma-dom/src/components/ProgressBar/ProgressBar.stories.tsx +++ b/packages/react-magma-dom/src/components/ProgressBar/ProgressBar.stories.tsx @@ -1,7 +1,10 @@ import React from 'react'; import { Card, CardBody } from '../Card'; -import { ProgressBar, ProgressBarProps, ProgressBarColor } from '.'; +import { ProgressBar, ProgressBarColor, ProgressBarProps } from '.'; import { Story, Meta } from '@storybook/react/types-6-0'; +import { magma } from '../../theme/magma'; +import { Button } from '../Button'; +import { Input } from '../Input'; const Template: Story = args => ; @@ -55,6 +58,69 @@ Inverse.args = { isInverse: true, }; +export const CustomColor = args => { + const [colorIndex, setColorIndex] = React.useState(0); + const [color, setColor] = React.useState(null); + const [inverseColor, setInverseColor] = React.useState(null); + const [customColor, setCustomColor] = React.useState('#711E6E'); + + React.useEffect(() => { + setColor(magma.chartColors[colorIndex]); + setInverseColor(magma.chartColorsInverse[colorIndex]); + }, [colorIndex]); + + function changeBarColor() { + if (colorIndex < 11) { + setColorIndex(colorIndex + 1); + } else if (colorIndex === 11) { + setColorIndex(0); + } + } + + return ( + <> + + + Chart Colors + + + + + +
+ + + + + +
+ + + +
+ + + Custom String Color + +
+ setCustomColor(e.target.value)} + /> + + + + ); +}; +CustomColor.args = { + percentage: 50, + isInverse: false, + height: '20', + color: '#711E6E', +}; + +CustomColor.parameters = { controls: { exclude: ['isInverse', 'color'] } }; + Inverse.decorators = [ Story => ( diff --git a/packages/react-magma-dom/src/components/ProgressBar/ProgressBar.test.js b/packages/react-magma-dom/src/components/ProgressBar/ProgressBar.test.js index 0af5db278..a6a5e888e 100644 --- a/packages/react-magma-dom/src/components/ProgressBar/ProgressBar.test.js +++ b/packages/react-magma-dom/src/components/ProgressBar/ProgressBar.test.js @@ -43,6 +43,15 @@ describe('ProgressBar', () => { ); }); + it('should render the progress bar component with primary as the default color', () => { + const { container } = render(); + + expect(container.querySelector('[role="progressbar"]')).toHaveStyleRule( + 'background', + magma.colors.primary + ); + }); + it('should render the progress bar component with danger color', () => { const { container } = render( @@ -65,6 +74,28 @@ describe('ProgressBar', () => { ); }); + it('should render the progress bar component with custom color', () => { + const { container } = render( + + ); + + expect(container.querySelector('[role="progressbar"]')).toHaveStyleRule( + 'background', + 'purple' + ); + }); + + it('should render the inverse progress bar component with primary as the default color', () => { + const { container } = render( + + ); + + expect(container.querySelector('[role="progressbar"]')).toHaveStyleRule( + 'background', + magma.colors.tertiary + ); + }); + it('should render the progress bar component with an inverse danger color', () => { const { container } = render( diff --git a/packages/react-magma-dom/src/components/ProgressBar/index.tsx b/packages/react-magma-dom/src/components/ProgressBar/index.tsx index 2da3d93af..bb3a1eb19 100644 --- a/packages/react-magma-dom/src/components/ProgressBar/index.tsx +++ b/packages/react-magma-dom/src/components/ProgressBar/index.tsx @@ -13,7 +13,7 @@ export interface ProgressBarProps extends React.HTMLAttributes { * The color variant of the progress bar * @default ProgressBarColor.primary */ - color?: ProgressBarColor; + color?: ProgressBarColor | string; /** * The height of the progress bar. Can be a string or number; if number is provided height is in px * @default 8 @@ -55,22 +55,30 @@ const typedStyled = styled as CreateStyled; function buildProgressBarBackground(props) { if (props.isInverse) { - switch (props.color) { - case 'danger': - return props.theme.colors.danger200; - case 'success': - return props.theme.colors.success200; - default: - return props.theme.colors.tertiary; + if ( + typeof props.color === 'string' && + !Object.values(ProgressBarColor).includes(props.color) + ) { + return props.color; + } else if (props.color === ProgressBarColor.primary) { + return props.theme.colors.tertiary; + } else if (props.color === ProgressBarColor.danger) { + return props.theme.colors.danger200; + } else if (props.color === ProgressBarColor.success) { + return props.theme.colors.success200; } } - switch (props.color) { - case 'danger': - return props.theme.colors.danger; - case 'success': - return props.theme.colors.success; - default: - return props.theme.colors.primary; + if ( + typeof props.color === 'string' && + !Object.values(ProgressBarColor).includes(props.color) + ) { + return props.color; + } else if (props.color === ProgressBarColor.primary) { + return props.theme.colors.primary; + } else if (props.color === ProgressBarColor.danger) { + return props.theme.colors.danger; + } else if (props.color === ProgressBarColor.success) { + return props.theme.colors.success; } } @@ -153,7 +161,7 @@ const TopPercentage = typedStyled.div` export const ProgressBar = React.forwardRef( (props, ref) => { const { - color, + color = ProgressBarColor.primary, height, id: defaultId, isAnimated, diff --git a/packages/react-magma-dom/src/components/Select/MultiSelect.tsx b/packages/react-magma-dom/src/components/Select/MultiSelect.tsx index e20b2a446..380fd8a7c 100644 --- a/packages/react-magma-dom/src/components/Select/MultiSelect.tsx +++ b/packages/react-magma-dom/src/components/Select/MultiSelect.tsx @@ -148,10 +148,10 @@ export function MultiSelect(props: MultiSelectProps) { openMenu(); } - onKeyDown && typeof onKeyDown === 'function' && onKeyDown(event); + onKeyDown && typeof onKeyDown === 'function' && onKeyDown?.(event); }, - onKeyPress: (event: any) => onKeyPress(event), - onKeyUp: (event: any) => onKeyUp(event), + onKeyPress: (event: any) => onKeyPress?.(event), + onKeyUp: (event: any) => onKeyUp?.(event), onFocus, preventKeyAction: isOpen, ...(innerRef && { ref: innerRef }), diff --git a/packages/react-magma-dom/src/components/Select/Select.stories.tsx b/packages/react-magma-dom/src/components/Select/Select.stories.tsx index 704d4e7de..cbe6c49f4 100644 --- a/packages/react-magma-dom/src/components/Select/Select.stories.tsx +++ b/packages/react-magma-dom/src/components/Select/Select.stories.tsx @@ -43,6 +43,7 @@ Default.args = { { label: 'Red', value: 'red' }, { label: 'Blue', value: 'blue' }, { label: 'Green', value: 'green' }, + { label: 'Purple mountain majesty', value: 'purple' }, ], errorMessage: '', helperMessage: '', @@ -121,6 +122,7 @@ Inverse.args = { ...Default.args, isMulti: false, isInverse: true, + disabled: false, }; Inverse.decorators = [ Story => ( diff --git a/packages/react-magma-dom/src/components/Select/Select.tsx b/packages/react-magma-dom/src/components/Select/Select.tsx index 6d5b687c7..840a02178 100644 --- a/packages/react-magma-dom/src/components/Select/Select.tsx +++ b/packages/react-magma-dom/src/components/Select/Select.tsx @@ -130,10 +130,10 @@ export function Select(props: SelectProps) { openMenu(); } - onKeyDown && typeof onKeyDown === 'function' && onKeyDown(event); + onKeyDown && typeof onKeyDown === 'function' && onKeyDown?.(event); }, - onKeyPress: (event: any) => onKeyPress(event), - onKeyUp: (event: any) => onKeyUp(event), + onKeyPress: (event: any) => onKeyPress?.(event), + onKeyUp: (event: any) => onKeyUp?.(event), onFocus, ref, }); diff --git a/packages/react-magma-dom/src/components/Stepper/Step.tsx b/packages/react-magma-dom/src/components/Stepper/Step.tsx new file mode 100644 index 000000000..bf6bf1f75 --- /dev/null +++ b/packages/react-magma-dom/src/components/Stepper/Step.tsx @@ -0,0 +1,292 @@ +import * as React from 'react'; +import { CheckIcon, CrossIcon } from 'react-magma-icons'; +import styled from '@emotion/styled'; +import { CreateStyled } from '@emotion/styled'; + +import { ThemeContext } from '../../theme/ThemeContext'; +import { ThemeInterface } from '../../theme/magma'; +import { useIsInverse } from '../../inverse'; +import { transparentize } from 'polished'; +import { HiddenStyles } from '../../utils/UtilityStyles'; +import { StepperLayout } from './Stepper'; + +export interface StepProps extends React.HTMLAttributes { + /** + * Error state for each step. + * @default false + */ + hasError?: boolean; + /** + * @internal + */ + layout?: StepperLayout; + /** + * Label beneath each step. + */ + label?: string; + /** + * Sub label beneath each step. + */ + secondaryLabel?: string; + /** + * @internal + */ + stepStatus?: StepStatus; + /** + * @internal + */ + index?: number; + /** + * @internal + */ + isInverse?: boolean; + /** + * @internal + */ + stepLabel?: string; + /** + * @internal + */ + testId?: string; + /** + * @internal + */ + theme?: ThemeInterface; +} + +export enum StepStatus { + active = 'active', + completed = 'completed', + incomplete = 'incomplete', +} + +function buildStepCircleOutlineColors(props) { + const { isInverse, stepStatus, hasError, theme } = props; + + if (isInverse && !hasError) { + if (stepStatus === StepStatus.active) { + return theme.colors.tertiary500; + } else if (stepStatus === StepStatus.incomplete) { + return theme.colors.primary400; + } + } else { + if (!isInverse && !hasError) { + if (stepStatus === StepStatus.active) { + return theme.colors.primary500; + } else if (stepStatus === StepStatus.incomplete) { + return theme.colors.neutral300; + } + } + } +} + +function buildStepCircleBackgroundColors(props) { + const { isInverse, stepStatus, hasError, theme } = props; + if (isInverse) { + if (stepStatus === StepStatus.completed && !hasError) { + return theme.colors.tertiary500; + } else if (hasError) { + return theme.colors.danger500; + } + } else { + if (stepStatus === StepStatus.completed && !hasError) { + return theme.colors.primary500; + } else if (hasError) { + return theme.colors.danger500; + } + } +} + +function buildStepLabelColors(props) { + const { label, secondaryLabel, theme, isInverse } = props; + + if (isInverse) { + if (label) { + return theme.colors.neutral100; + } else if (secondaryLabel) { + return transparentize(0.3, theme.colors.neutral100); + } + } else { + if (label) { + return theme.colors.neutral700; + } else if (secondaryLabel) { + return theme.colors.neutral500; + } + } +} + +function buildStepSvgColors(props) { + const { theme, hasError, isInverse } = props; + if (isInverse) { + if (hasError) { + return theme.colors.neutral100; + } + return theme.colors.primary600; + } else { + return theme.colors.neutral100; + } +} + +const typedStyled = styled as CreateStyled; + +export const HiddenLabelText = typedStyled.span` + ${HiddenStyles}; +`; + +const StyledStep = typedStyled.div` + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + align-self: self-start; + align-items: center; +`; + +const StyledStepIndicator = typedStyled.span<{ + hasError?: boolean; + stepStatus?: StepStatus; + isInverse?: boolean; + theme?: ThemeInterface; +}>` + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + width: 24px; + height: 24px; + box-shadow: inset 0 0 0 2px + ${props => + (props.stepStatus === StepStatus.incomplete && !props.hasError) || + (props.stepStatus === StepStatus.active && !props.hasError) + ? buildStepCircleOutlineColors + : 'none'}; + background: ${buildStepCircleBackgroundColors}; + svg { + color: ${buildStepSvgColors}; + width: ${props => props.theme.iconSizes.xSmall}px; + height: ${props => props.theme.iconSizes.xSmall}px; + } +`; + +const StyledStepTextWrapper = typedStyled.span` + flex: 1; + display: flex; + align-self: center; + flex-direction: column; + position: relative; + margin: 6px 8px 0; +`; + +const StyledLabel = typedStyled.span<{ + isInverse?: boolean; + label?: string; + theme?: ThemeInterface; +}>` + color: ${buildStepLabelColors}; + font-weight: 600; + font-size: ${props => + props.theme.typographyVisualStyles.bodySmall.desktop.fontSize}; + letter-spacing: ${props => + props.theme.typographyVisualStyles.bodySmall.desktop.letterSpacing}; + line-height: ${props => + props.theme.typographyVisualStyles.bodySmall.desktop.lineHeight}; +`; + +const StyledSecondaryLabel = typedStyled.span<{ + isInverse?: boolean; + secondaryLabel?: string; + theme?: ThemeInterface; +}>` + color: ${buildStepLabelColors}; + font-size: ${props => + props.theme.typographyVisualStyles.bodyXSmall.desktop.fontSize}; + letter-spacing: ${props => + props.theme.typographyVisualStyles.bodyXSmall.desktop.letterSpacing}; + line-height: ${props => + props.theme.typographyVisualStyles.bodyXSmall.desktop.lineHeight}; + margin: 2px 12px 0 12px; +`; + +export const Step = React.forwardRef( + (props, ref) => { + const { + hasError, + index, + label, + layout, + secondaryLabel, + stepLabel, + testId, + isInverse: isInverseProp, + stepStatus, + ...rest + } = props; + const theme = React.useContext(ThemeContext); + const isInverse = useIsInverse(isInverseProp); + + return ( + + + {stepStatus === StepStatus.completed && !hasError && ( + + + + {layout !== StepperLayout.hideLabels && + layout !== StepperLayout.summaryView ? ( + <> + {layout === StepperLayout.showLabels && ( + + {`${ + stepStatus === StepStatus.completed + ? `${stepLabel} ${stepStatus}, ` + : '' + }`} + + )} + {label && ( + + {label} + + )} + {secondaryLabel && ( + + {secondaryLabel} + + )} + + ) : ( + layout !== StepperLayout.summaryView && ( + + {`${ + stepStatus === StepStatus.completed + ? `${stepLabel} ${stepStatus}, ` + : '' + }${label || ''}${secondaryLabel ? ' ' : ''}${ + secondaryLabel || '' + }`} + + ) + )} + + + ); + } +); diff --git a/packages/react-magma-dom/src/components/Stepper/Stepper.stories.tsx b/packages/react-magma-dom/src/components/Stepper/Stepper.stories.tsx new file mode 100644 index 000000000..97b0fa84c --- /dev/null +++ b/packages/react-magma-dom/src/components/Stepper/Stepper.stories.tsx @@ -0,0 +1,287 @@ +import React from 'react'; +import { Button } from '../Button'; +import { Stepper, StepperProps, Step, StepperLayout } from './'; +import { Story, Meta } from '@storybook/react/types-6-0'; +import { Container } from '../Container'; +import { ButtonGroup } from '../ButtonGroup'; +import { InputType } from '../InputBase'; +import { Input } from '../Input'; +import { Flex, FlexAlignItems, FlexBehavior, FlexJustify } from '../Flex'; +import { LabelPosition } from '../Label'; + +export default { + title: 'Stepper', + component: Stepper, + decorators: [ + (Story, context) => ( + + + + ), + ], + argTypes: { + breakpoint: { + control: 'number', + }, + breakpointLayout: { + control: { + type: 'select', + options: StepperLayout, + defaultValue: StepperLayout.hideLabels, + }, + }, + layout: { + control: { + type: 'select', + options: StepperLayout, + defaultValue: StepperLayout.showLabels, + }, + }, + completionLabel: { + control: 'text', + }, + stepLabel: { + control: 'text', + }, + isInverse: { + control: 'boolean', + defaultValue: false, + }, + testId: { + control: 'text', + }, + ariaLabel: { + control: 'text', + defaultValue: 'progress', + }, + }, +} as Meta; + +const Template: Story = args => { + const [currentStep, setCurrentStep] = React.useState(0); + + const [numberOfSteps, setNumberOfSteps] = React.useState(4); + + const handleOnNext = () => { + if (currentStep <= numberOfSteps) { + setCurrentStep(currentStep + 1); + } + }; + const handleOnPrevious = () => { + if (currentStep !== 0) { + setCurrentStep(currentStep - 1); + } + }; + const handleFinish = () => { + if (currentStep === numberOfSteps) { + setCurrentStep(0); + } + }; + + const handleOnChange = event => { + if (numberOfSteps > 0) { + return setNumberOfSteps(Number(event.target.value)); + } else { + return setNumberOfSteps(1); + } + }; + + const step = [...Array(numberOfSteps)].map((_, i) => { + ++i; + return ( + + ); + }); + + return ( + <> + + {step} + + + +
+ {currentStep < numberOfSteps + ? `Item Content ${currentStep + 1}` + : `Items Completed`} +
+ + + + + + + + + + + + + + + ); +}; + +const RealisticLabels: Story = args => { + const [currentStep, setCurrentStep] = React.useState(0); + + const handleOnNext = () => { + if (currentStep !== 4) { + setCurrentStep(currentStep + 1); + } + }; + const handleOnPrevious = () => { + if (currentStep !== 0) { + setCurrentStep(currentStep - 1); + } + }; + const handleFinish = () => { + if (currentStep >= 4) { + setCurrentStep(0); + } + }; + + return ( + <> + + + + + + + + + {currentStep === 0 &&
Fenway seating Content
} + {currentStep === 1 &&
Guest information Content
} + {currentStep === 2 &&
Yankees fans? Content
} + {currentStep === 3 &&
MBTA and parking information Content
} + {currentStep === 4 &&
Steps completed
} + + + + + + + + + + ); +}; + +const ErrorTemplate: Story = args => { + return ( + <> + + + Item Content One + + + Item Content Two + + + Item Content Three + + + Item Content Four + + + +
Item Content Three
+ + + + + + + + + + ); +}; + +export const Default = Template.bind({}); +Default.args = {}; + +export const RealWorldExample = RealisticLabels.bind({}); +RealisticLabels.args = { + stepLabel: 'Module', +}; + +export const WithError = ErrorTemplate.bind({}); +WithError.args = {}; diff --git a/packages/react-magma-dom/src/components/Stepper/Stepper.test.js b/packages/react-magma-dom/src/components/Stepper/Stepper.test.js new file mode 100644 index 000000000..63b08451c --- /dev/null +++ b/packages/react-magma-dom/src/components/Stepper/Stepper.test.js @@ -0,0 +1,610 @@ +import React from 'react'; +import { act } from 'react-dom/test-utils'; +import { axe } from '../../../axe-helper'; +import { magma } from '../../theme/magma'; +import { Stepper, Step, StepperLayout } from '.'; +import { render } from '@testing-library/react'; +import { transparentize } from 'polished'; +import { I18nContext } from '../../i18n'; +import { defaultI18n } from '../../i18n/default'; + +const TEXT = 'Test Text'; +const testId = 'test-id'; + +describe('Stepper', () => { + it('should find element by testId', () => { + const { getByTestId } = render( + + + + ); + + expect(getByTestId(testId)).toBeInTheDocument(); + }); + + describe('Accessibility', () => { + it('Does not violate accessibility standards', () => { + const { container } = render( + + + + + ); + + return axe(container.innerHTML).then(result => { + return expect(result).toHaveNoViolations(); + }); + }); + + it('should use the custom aria-label', () => { + const { getByLabelText } = render( + + + + + ); + + const customAriaLabel = getByLabelText('custom', { selector: 'ol' }); + + expect(customAriaLabel).toBeInTheDocument(); + }); + + it('should have hidden labels for screen readers when layout is set to "showLabels"', () => { + const { getByTestId } = render( + + + + + ); + + expect(getByTestId(`${testId}-1`)).toHaveTextContent( + `Step completed, ${TEXT}-1` + ); + expect(getByTestId(`${testId}-1`).closest('li')).toHaveAttribute( + 'aria-current', + 'false' + ); + expect(getByTestId(`${testId}-2`)).toHaveTextContent(`${TEXT}-2`); + expect(getByTestId(`${testId}-2`).closest('li')).toHaveAttribute( + 'aria-current', + 'step' + ); + }); + + it('should have hidden labels for screen readers when layout is set to "hideLabels"', () => { + const { getByTestId } = render( + + + + + ); + + expect(getByTestId(`${testId}-1`)).toHaveTextContent( + `Step completed, ${TEXT}-1` + ); + expect(getByTestId(`${testId}-1`).closest('li')).toHaveAttribute( + 'aria-current', + 'false' + ); + expect(getByTestId(`${testId}-2`)).toHaveTextContent(`${TEXT}-2`); + expect(getByTestId(`${testId}-2`).closest('li')).toHaveAttribute( + 'aria-current', + 'step' + ); + }); + }); + + it('should use the default completion label', () => { + const { getByText } = render( + + + + + ); + + expect(getByText('All steps completed')).toBeInTheDocument(); + }); + + it('should use the default step label', () => { + const { getByText } = render( + + + + + ); + + expect(getByText('Step 1 of 2')).toBeInTheDocument(); + }); + + it('should use the custom completion label', () => { + const { getByText } = render( + + + + + ); + + expect(getByText("You're victorious")).toBeInTheDocument(); + }); + + it('should use the custom step label', () => { + const { getByText } = render( + + + + + ); + + expect(getByText('Party On 1 of 2')).toBeInTheDocument(); + }); + + describe('i18n', () => { + it('should use the completion label', () => { + const completionLabel = 'completion label'; + const { getByText } = render( + + + + + + + ); + + expect(getByText(completionLabel)).toHaveTextContent(completionLabel); + }); + + it('should use the step label', () => { + const stepLabel = 'Steppin'; + const stepOfLabel = 'of'; + const { getByText } = render( + + + + + + + ); + + expect(getByText(stepLabel + ' 1 of 2')).toBeInTheDocument(); + }); + }); + + describe('Styling', () => { + it('should have an active styled circle', () => { + const { getByTestId } = render( + + + + + ); + + const step = getByTestId(testId).querySelector('span'); + + expect(step).toHaveStyleRule( + 'box-shadow', + `inset 0 0 0 2px ${magma.colors.primary500}` + ); + }); + + it('should have an incomplete styled circle', () => { + const { getByTestId } = render( + + + + + ); + + const step = getByTestId(testId).querySelector('span'); + + expect(step).toHaveStyleRule( + 'box-shadow', + `inset 0 0 0 2px ${magma.colors.neutral300}` + ); + }); + + it('should have a completed styled circle', () => { + const { getByTestId } = render( + + + + + ); + + const step = getByTestId(testId).querySelector('span'); + + expect(step).toHaveStyleRule('background', magma.colors.primary500); + }); + + it('should have a error styled circle', () => { + const { getByTestId } = render( + + + + + ); + + const step = getByTestId(testId).querySelector('span'); + + expect(step).toHaveStyleRule('background', magma.colors.danger500); + }); + + it('should have a primary label', () => { + const { getByText } = render( + + + + + ); + + const label = getByText(TEXT); + + expect(label).toHaveStyleRule('font-size', '14px'); + expect(label).toHaveStyleRule('color', magma.colors.neutral700); + expect(label).toHaveStyleRule('font-weight', '600'); + }); + + it('should have a secondary label', () => { + const { getByText } = render( + + + + + ); + + const secondaryLabel = getByText(TEXT); + + expect(secondaryLabel).toHaveStyleRule('font-size', '12px'); + expect(secondaryLabel).toHaveStyleRule('color', magma.colors.neutral500); + }); + + it('should have an incomplete styled separator', () => { + const { getByTestId } = render( + + + + + ); + + const separator = getByTestId(testId).nextElementSibling; + + expect(separator).toHaveStyleRule('height', '2px'); + expect(separator).toHaveStyleRule('background', magma.colors.neutral300); + }); + + it('should have a completed styled separator', () => { + const { getByTestId } = render( + + + + + ); + + const separator = getByTestId(testId).nextElementSibling; + + expect(separator).toHaveStyleRule('height', '2px'); + expect(separator).toHaveStyleRule('background', magma.colors.primary500); + }); + + describe('Inverse', () => { + it('should have an inverse active styled circle', () => { + const { getByTestId } = render( + + + + + ); + + const step = getByTestId(testId).querySelector('span'); + + expect(step).toHaveStyleRule( + 'box-shadow', + `inset 0 0 0 2px ${magma.colors.tertiary500}` + ); + }); + + it('should have an inverse incomplete styled circle', () => { + const { getByTestId } = render( + + + + + ); + + const step = getByTestId(testId).querySelector('span'); + + expect(step).toHaveStyleRule( + 'box-shadow', + `inset 0 0 0 2px ${magma.colors.primary400}` + ); + }); + + it('should have an inverse completed styled circle', () => { + const { getByTestId } = render( + + + + + ); + + const step = getByTestId(testId).querySelector('span'); + + expect(step).toHaveStyleRule('background', magma.colors.tertiary500); + }); + + it('should have an inverse error styled circle', () => { + const { getByTestId } = render( + + + + + ); + + const step = getByTestId(testId).querySelector('span'); + + expect(step).toHaveStyleRule('background', magma.colors.danger500); + }); + + it('should have an inverse primary label', () => { + const { getByText } = render( + + + + + ); + + const label = getByText(TEXT); + + expect(label).toHaveStyleRule('color', magma.colors.neutral100); + }); + + it('should have an inverse secondary label', () => { + const { getByText } = render( + + + + + ); + + const secondaryLabel = getByText(TEXT); + + expect(secondaryLabel).toHaveStyleRule( + 'color', + transparentize(0.3, magma.colors.neutral100) + ); + }); + + it('should have an inverse incomplete styled separator', () => { + const { getByTestId } = render( + + + + + ); + + const separator = getByTestId(testId).nextElementSibling; + + expect(separator).toHaveStyleRule( + 'background', + magma.colors.primary400 + ); + }); + + it('should have an inverse completed styled separator', () => { + const { getByTestId } = render( + + + + + ); + + const separator = getByTestId(testId).nextElementSibling; + + expect(separator).toHaveStyleRule( + 'background', + magma.colors.tertiary500 + ); + }); + }); + + describe('Layout', () => { + it('should hide labels when layout is set to "hideLabels"', () => { + const { getByText } = render( + + + + + ); + + const label1 = getByText(`Step completed, ${TEXT}-1`); + const label2 = getByText(`${TEXT}-2`); + + expect(label1).toHaveStyleRule('height', '1px'); + expect(label1).toHaveStyleRule('position', 'absolute'); + expect(label1).toHaveStyleRule('overflow', 'hidden'); + expect(label1).toHaveStyleRule('top', 'auto'); + expect(label1).toHaveStyleRule('white-space', 'nowrap'); + expect(label1).toHaveStyleRule('width', '1px'); + + expect(label2).toHaveStyleRule('height', '1px'); + expect(label2).toHaveStyleRule('position', 'absolute'); + expect(label2).toHaveStyleRule('overflow', 'hidden'); + expect(label2).toHaveStyleRule('top', 'auto'); + expect(label2).toHaveStyleRule('white-space', 'nowrap'); + expect(label2).toHaveStyleRule('width', '1px'); + }); + + it('should only show one step label and description at a time along with a counter when layout is set to summaryView', () => { + const { getByTestId } = render( + + + + + ); + + expect(getByTestId(`${testId}-stepper-summary`)).toBeVisible(); + expect(getByTestId(testId)).toHaveTextContent('Step 1 of 2'); + }); + + it('should show labels when layout is set to "showLabels"', () => { + const { getByText } = render( + + + + + ); + const label1 = getByText(`${TEXT}-1`); + + expect(label1).toHaveStyleRule('color', magma.colors.neutral700); + expect(label1).toHaveStyleRule( + 'font-size', + magma.typographyVisualStyles.bodySmall.desktop.fontSize + ); + expect(label1).toHaveStyleRule( + 'line-height', + magma.typographyVisualStyles.bodySmall.desktop.lineHeight + ); + }); + + it('should hide labels when breakpointLayout is set to "hideLabels" if viewport is smaller than set breakpoint prop', () => { + const { getByText } = render( + + + + + ); + act(() => { + global.innerWidth = 1400; + global.dispatchEvent(new Event('resize')); + }); + const label1 = getByText(`Step completed, ${TEXT}-1`); + + expect(label1).toHaveStyleRule('height', '1px'); + expect(label1).toHaveStyleRule('position', 'absolute'); + expect(label1).toHaveStyleRule('overflow', 'hidden'); + expect(label1).toHaveStyleRule('top', 'auto'); + expect(label1).toHaveStyleRule('white-space', 'nowrap'); + expect(label1).toHaveStyleRule('width', '1px'); + }); + + it('should show labels when breakpointLayout is set to "showLabels" if viewport is smaller than set breakpoint prop', () => { + const { getByText } = render( + + + + + ); + act(() => { + global.innerWidth = 1400; + global.dispatchEvent(new Event('resize')); + }); + const label1 = getByText(`${TEXT}-1`); + + expect(label1).toHaveStyleRule('color', magma.colors.neutral700); + expect(label1).toHaveStyleRule( + 'font-size', + magma.typographyVisualStyles.bodySmall.desktop.fontSize + ); + expect(label1).toHaveStyleRule( + 'line-height', + magma.typographyVisualStyles.bodySmall.desktop.lineHeight + ); + }); + + it('should show summaryView when breakpointStyle is set to "summaryView" if viewport is smaller than set breakpoint prop', () => { + const { getByTestId } = render( + + + + + ); + act(() => { + global.innerWidth = 1400; + global.dispatchEvent(new Event('resize')); + }); + expect(getByTestId(`${testId}-stepper-summary`)).toBeVisible(); + expect(getByTestId(testId)).toHaveTextContent('Step 1 of 2'); + }); + }); + }); +}); diff --git a/packages/react-magma-dom/src/components/Stepper/Stepper.tsx b/packages/react-magma-dom/src/components/Stepper/Stepper.tsx new file mode 100644 index 000000000..ea3bec669 --- /dev/null +++ b/packages/react-magma-dom/src/components/Stepper/Stepper.tsx @@ -0,0 +1,364 @@ +import * as React from 'react'; +import styled from '@emotion/styled'; +import { css } from '@emotion/core'; +import { CreateStyled } from '@emotion/styled'; + +import { ThemeContext } from '../../theme/ThemeContext'; +import { ThemeInterface } from '../../theme/magma'; +import { useIsInverse } from '../../inverse'; +import { Step, StepProps, StepStatus } from './Step'; +import { transparentize } from 'polished'; +import { I18nContext } from '../../i18n'; + +export interface StepperProps extends React.HTMLAttributes { + /** + * @internal + */ + testId?: string; + /** + * Customizable aria-label for accessibility. + */ + ariaLabel: string; + /** + * Custom number for responsive styling, uses a minimum 'breakpoint' width from the set number. + */ + breakpoint?: number; + /** + * Changes the Stepper view for responsive layouts, needs a minimum 'breakpoint' number. + */ + breakpointLayout?: StepperLayout; + /** + * Sets the Stepper view + * @default StepperLayout.showLabels + */ + layout?: StepperLayout; + /** + * Sets a custom label for the Step count # of #. + * @default 'Step' + */ + stepLabel?: string; + /** + * Sets a custom label for the completed Step. + * @default 'All steps completed' + */ + completionLabel?: string; + /** + * Current step value. + */ + currentStep: number; + /** + * Inverse styling. + */ + isInverse?: boolean; + /** + * @internal + */ + theme?: ThemeInterface; +} + +export enum StepperLayout { + showLabels = 'showLabels', //default + hideLabels = 'hideLabels', + summaryView = 'summaryView', +} + +function buildSeparatorBackgroundColors(props) { + const { isInverse, theme, stepStatus } = props; + if (isInverse) { + if (stepStatus === StepStatus.completed) { + return theme.colors.tertiary500; + } + return theme.colors.primary400; + } else { + if (stepStatus === StepStatus.completed) { + return theme.colors.primary500; + } + return theme.colors.neutral300; + } +} + +const typedStyled = styled as CreateStyled; + +const StyledStepper = typedStyled.div` + display: flex; + flex: 1; + flex-direction: column; +`; + +const StyledStepContent = typedStyled.ol` + display: flex; + margin: 0; + padding: 0; +`; + +const StyledLiWrapper = typedStyled.li<{ hasLabels?: boolean }>` + list-style-type: none; + ${props => + props.hasLabels + ? css` + position: relative; + flex: 1; + ` + : css` + display: contents; + `} +`; + +const StyledSeparator = typedStyled.div<{ + isInverse?: boolean; + bothLabels?: boolean; + allStepsHaveLabels?: boolean; + secondaryLabel?: boolean; + showLabelsLayout?: boolean; + stepStatus: StepStatus; + theme?: ThemeInterface; +}>` + background: ${buildSeparatorBackgroundColors}; + width: ${props => + props.showLabelsLayout && + (props.bothLabels || props.allStepsHaveLabels || props.secondaryLabel) + ? 'calc(100% - 24px)' + : '100%'}; + height: 2px; + top: 11px; + left: ${props => + props.showLabelsLayout && + (props.bothLabels || props.allStepsHaveLabels || props.secondaryLabel) + ? 'calc(50% + 12px)' + : ''}; + position: ${props => + props.showLabelsLayout && + (props.bothLabels || props.allStepsHaveLabels || props.secondaryLabel) + ? 'absolute' + : 'relative'}; + align-self: baseline; + transition: all 0.4s ease; +`; + +const StyledSummary = typedStyled.div<{ + isInverse?: boolean; + theme: ThemeInterface; +}>` + display: flex; + flex-direction: column; + position:relative; + font-size: ${props => + props.theme.typographyVisualStyles.bodySmall.desktop.fontSize}; + letter-spacing: ${props => + props.theme.typographyVisualStyles.bodySmall.desktop.letterSpacing}; + line-height: ${props => + props.theme.typographyVisualStyles.bodySmall.desktop.lineHeight}; + color: ${props => + props.isInverse + ? transparentize(0.3, props.theme.colors.neutral100) + : props.theme.colors.neutral500}; + span { + display: flex; + text-align: left; + } + svg { + height: 0; + } + div > span:first-child { + height: auto; + margin: 0; + } + div span { + margin: 3px 0; + span:first-child { + margin: 0 + } + span:last-child { + margin: 4px 0 0 0; + } + } +`; + +// Stepper! +export const Stepper = React.forwardRef( + (props, ref) => { + const { + ariaLabel, + breakpoint, + breakpointLayout, + children, + currentStep, + layout = StepperLayout.showLabels, + stepLabel, + isInverse: isInverseProp, + testId, + ...rest + } = props; + const theme = React.useContext(ThemeContext); + const i18n = React.useContext(I18nContext); + const isInverse = useIsInverse(isInverseProp); + + // Controls the varying layouts with a set breakpoint number between a breakpointLayout type and / or a layout type. + const [showLabelsLayout, setShowLabelsLayout] = React.useState(false); + const [hideLabelsLayout, setHideLabelsLayout] = React.useState(false); + const [summaryViewLayout, setSummaryViewLayout] = React.useState(false); + + React.useEffect(() => { + setHideLabelsLayout(layout === StepperLayout.hideLabels); + setShowLabelsLayout(layout === StepperLayout.showLabels); + setSummaryViewLayout(layout === StepperLayout.summaryView); + }, [layout]); + + React.useEffect(() => { + setHideLabelsLayout(breakpointLayout === StepperLayout.hideLabels); + setShowLabelsLayout(breakpointLayout === StepperLayout.showLabels); + setSummaryViewLayout(breakpointLayout === StepperLayout.summaryView); + }, [breakpointLayout]); + + const [windowWidth, setWindowWidth] = React.useState(window.innerWidth); + + React.useEffect(() => { + function handleResize() { + setWindowWidth(window.innerWidth); + if (window.innerWidth < breakpoint && breakpoint) { + setShowLabelsLayout(breakpointLayout === StepperLayout.showLabels); + setHideLabelsLayout(breakpointLayout === StepperLayout.hideLabels); + setSummaryViewLayout(breakpointLayout === StepperLayout.summaryView); + } + + if (window.innerWidth > breakpoint || !breakpoint) { + setShowLabelsLayout(layout === StepperLayout.showLabels); + setHideLabelsLayout(layout === StepperLayout.hideLabels); + setSummaryViewLayout(layout === StepperLayout.summaryView); + } + if (showLabelsLayout) { + setHideLabelsLayout(false); + setSummaryViewLayout(false); + } else if (hideLabelsLayout) { + setShowLabelsLayout(false); + setSummaryViewLayout(false); + } else if (summaryViewLayout) { + setShowLabelsLayout(false); + setHideLabelsLayout(false); + } + } + + window.addEventListener('resize', handleResize); + handleResize(); + + return () => window.removeEventListener('resize', handleResize); + }, [windowWidth]); + + const stepperChildren = React.Children.toArray(children); + const numberOfSteps = stepperChildren.length; + + let allStepsHaveLabels = false; + let allStepsHaveSecondaryLabels = false; + + for (const stepChild of stepperChildren) { + if (React.isValidElement(stepChild)) { + if (Object.keys(stepChild.props).includes('label')) { + allStepsHaveLabels = true; + } + if (Object.keys(stepChild.props).includes('secondaryLabel')) { + allStepsHaveSecondaryLabels = true; + } + } + } + + const stepContent = React.Children.map( + children, + ( + child: React.ReactElement>, + index + ) => { + if (child.type === Step) { + const stepStatusStyles = + currentStep >= index + 1 + ? StepStatus.completed + : currentStep >= index + ? StepStatus.active + : StepStatus.incomplete; + + const item = React.cloneElement(child, { + isInverse, + index, + layout: summaryViewLayout + ? StepperLayout.summaryView + : hideLabelsLayout + ? StepperLayout.hideLabels + : StepperLayout.showLabels, + stepLabel: stepLabel || i18n.stepper.stepLabel, + stepStatus: stepStatusStyles, + }); + + const stepAndSeparator = () => { + return [ + item, + index !== numberOfSteps - 1 && ( + + ), + ]; + }; + + return ( + + {stepAndSeparator()} + + ); + } + } + ); + + // When summaryView is set to true, this shows one step label and description at a time based on the active step below the Stepper component. + const getSummaryStepLabels = () => + React.Children.map(children, (child, index) => { + const item = child as React.ReactElement< + React.PropsWithChildren + >; + + if (item.type === Step && currentStep === index) { + return item; + } + }); + + // Final step description + const completionLabel = + props.completionLabel || i18n.stepper.completionLabel; + + return ( + + + {stepContent} + + {summaryViewLayout && ( + + {currentStep < numberOfSteps + ? stepLabel + ? `${stepLabel} ${currentStep + 1} ${ + i18n.stepper.stepOfLabel + } ${numberOfSteps}` + : `${i18n.stepper.stepLabel} + ${currentStep + 1} ${i18n.stepper.stepOfLabel} ${numberOfSteps}` + : completionLabel} + {getSummaryStepLabels()} + + )} + + ); + } +); diff --git a/packages/react-magma-dom/src/components/Stepper/index.ts b/packages/react-magma-dom/src/components/Stepper/index.ts new file mode 100644 index 000000000..dbd090a2a --- /dev/null +++ b/packages/react-magma-dom/src/components/Stepper/index.ts @@ -0,0 +1,2 @@ +export * from './Step'; +export * from './Stepper'; diff --git a/packages/react-magma-dom/src/components/TimePicker/TimePicker.stories.tsx b/packages/react-magma-dom/src/components/TimePicker/TimePicker.stories.tsx index f29ca1e1d..6da9354f9 100644 --- a/packages/react-magma-dom/src/components/TimePicker/TimePicker.stories.tsx +++ b/packages/react-magma-dom/src/components/TimePicker/TimePicker.stories.tsx @@ -76,13 +76,9 @@ export const Events = () => { onChange called {onChangeCalledTimes} times - +
- + ); }; diff --git a/packages/react-magma-dom/src/i18n/default.ts b/packages/react-magma-dom/src/i18n/default.ts index 112a9b2ed..8b9a608e4 100644 --- a/packages/react-magma-dom/src/i18n/default.ts +++ b/packages/react-magma-dom/src/i18n/default.ts @@ -276,6 +276,11 @@ export const defaultI18n: I18nInterface = { spinner: { ariaLabel: 'Loading', }, + stepper: { + completionLabel: 'All steps completed', + stepLabel: 'Step', + stepOfLabel: 'of', + }, table: { pagination: { ofLabel: 'of', diff --git a/packages/react-magma-dom/src/i18n/interface.ts b/packages/react-magma-dom/src/i18n/interface.ts index 0ce6a4729..2578d75ee 100644 --- a/packages/react-magma-dom/src/i18n/interface.ts +++ b/packages/react-magma-dom/src/i18n/interface.ts @@ -260,6 +260,11 @@ export interface I18nInterface { spinner: { ariaLabel: string; }; + stepper: { + completionLabel: string; + stepLabel: string; + stepOfLabel: string; + }; table: { pagination: { ofLabel: string; diff --git a/packages/react-magma-dom/src/index.ts b/packages/react-magma-dom/src/index.ts index 81e2091c8..7ce0ecc35 100644 --- a/packages/react-magma-dom/src/index.ts +++ b/packages/react-magma-dom/src/index.ts @@ -113,7 +113,7 @@ export { HideAtBreakpointDisplayType, HideAtBreakpointProps, } from './components/HideAtBreakpoint'; -export { Hyperlink, HyperlinkProps } from './components/Hyperlink'; +export { Hyperlink, HyperlinkIconPosition, HyperlinkProps } from './components/Hyperlink'; export { IconButton, ButtonIconPosition, @@ -173,6 +173,8 @@ export { } from './components/SkipLinkContent'; export { Spacer, SpacerProps, SpacerAxis } from './components/Spacer'; export { Spinner, SpinnerProps } from './components/Spinner'; +export { Stepper, StepperLayout, StepperProps } from './components/Stepper'; +export { Step, StepProps } from './components/Stepper/Step'; export { Table, TableProps, diff --git a/packages/react-magma-dom/src/theme/GlobalStyles/index.tsx b/packages/react-magma-dom/src/theme/GlobalStyles/index.tsx index f658b1360..3f49c8253 100644 --- a/packages/react-magma-dom/src/theme/GlobalStyles/index.tsx +++ b/packages/react-magma-dom/src/theme/GlobalStyles/index.tsx @@ -53,7 +53,7 @@ function getStyles(theme, isInverse: boolean) { &:hover, &:focus { - color: ${isInverse ? theme.colors.primary100 : theme.colors.primary400}; + color: ${isInverse ? theme.colors.neutral100 : theme.colors.primary700}; } &:focus { outline: 2px solid diff --git a/packages/react-magma-dom/src/theme/magma.ts b/packages/react-magma-dom/src/theme/magma.ts index a23f11222..bdb4ebee1 100644 --- a/packages/react-magma-dom/src/theme/magma.ts +++ b/packages/react-magma-dom/src/theme/magma.ts @@ -788,8 +788,8 @@ export const magma = { '#00E0CA', '#85D4FF', '#FF99BD', - '#FFB685', '#C7FF99', + '#FFB685', '#E9AFE7', '#99FFF5', ], diff --git a/packages/schema-renderer/package.json b/packages/schema-renderer/package.json index 4761603d3..369fda08c 100644 --- a/packages/schema-renderer/package.json +++ b/packages/schema-renderer/package.json @@ -41,7 +41,7 @@ "react": "^16.10.0", "react-dom": "^16.10.0", "react-dropzone": "11.3.2", - "react-magma-dom": "^3.7.0", + "react-magma-dom": "^3.8.0", "react-magma-icons": "2.3.6", "tsdx": "^0.14.1", "uuid": "^8.3.0" diff --git a/patterns/header/package.json b/patterns/header/package.json index fc2569f25..48a1fe63d 100644 --- a/patterns/header/package.json +++ b/patterns/header/package.json @@ -26,7 +26,7 @@ "downshift": "^5.4.5", "react": "^16.10.0", "react-dom": "^15.0.0 || ^16.0.0", - "react-magma-dom": "^3.7.0-next.0", + "react-magma-dom": "^3.8.0", "react-magma-icons": "2.3.6", "uuid": "^8.3.0" }, @@ -38,7 +38,7 @@ "downshift": "^5.4.5", "react": "^16.10.0", "react-dom": "^16.10.0", - "react-magma-dom": "^3.7.0", + "react-magma-dom": "^3.8.0", "react-magma-icons": "2.3.6", "uuid": "^8.3.0" }, diff --git a/website/react-magma-docs/CHANGELOG.md b/website/react-magma-docs/CHANGELOG.md index 8436463b3..9552a4f7c 100644 --- a/website/react-magma-docs/CHANGELOG.md +++ b/website/react-magma-docs/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 5.0.6-next.0 + +### Patch Changes + +- 37b77c252: chore: Sync dev-patch branch + ## 5.0.5 ### Patch Changes diff --git a/website/react-magma-docs/gatsby-node.js b/website/react-magma-docs/gatsby-node.js index b0b0fa063..988e372f0 100644 --- a/website/react-magma-docs/gatsby-node.js +++ b/website/react-magma-docs/gatsby-node.js @@ -1,8 +1,7 @@ -const path = require('path'); const { createFilePath } = require('gatsby-source-filesystem'); const propertiesJson = require('react-magma-dom/dist/properties.json'); -exports.onCreateWebpackConfig = ({ actions }) => { +exports.onCreateWebpackConfig = ({ actions, plugins }) => { actions.setWebpackConfig({ node: { fs: 'empty', @@ -22,6 +21,9 @@ exports.onCreateWebpackConfig = ({ actions }) => { }, ], }, + plugins: [ + plugins.provide({ process: 'process', Buffer: ['buffer', 'Buffer'] }) + ], }); }; @@ -77,4 +79,4 @@ exports.onCreatePage = async ({ }, }); } -}; +}; \ No newline at end of file diff --git a/website/react-magma-docs/package-lock.json b/website/react-magma-docs/package-lock.json index 86f64ebd0..01d16747d 100644 --- a/website/react-magma-docs/package-lock.json +++ b/website/react-magma-docs/package-lock.json @@ -1,25 +1,25 @@ { "name": "react-magma-docs", - "version": "5.0.4-next.1", + "version": "5.0.6-next.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-magma-docs", - "version": "5.0.4-next.1", + "version": "5.0.6-next.0", "license": "MIT", "dependencies": { "@babel/plugin-transform-react-jsx": "7.10.4", - "@cengage-patterns/header": "6.0.0-next.0", + "@cengage-patterns/header": "6.0.0", "@data-driven-forms/react-form-renderer": "^3.6.0", "@emotion/core": "^10.1.1", "@emotion/styled": "^10.0.27", "@emotion/styled-base": "^10.0.27", "@mdx-js/mdx": "^1.5.5", "@mdx-js/react": "^1.5.5", - "@react-magma/charts": "6.0.0", - "@react-magma/dropzone": "4.0.0-next.0", - "@react-magma/schema-renderer": "^4.0.0-next.0", + "@react-magma/charts": "6.1.0", + "@react-magma/dropzone": "4.0.0", + "@react-magma/schema-renderer": "^4.0.0", "buble": "0.19.4", "core-js": "^3.1.4", "date-fns": "^2.16.1", @@ -39,6 +39,7 @@ "gatsby-remark-images": "^3.1.42", "gatsby-source-filesystem": "^2.1.46", "gatsby-transformer-sharp": "^2.3.13", + "object.assign": "^4.1.5", "prism-react-renderer": "^1.1.1", "react": "^16.10.0", "react-animate-on-scroll": "^2.1.5", @@ -49,7 +50,7 @@ "react-focus-lock": "1.18.3", "react-helmet": "5.2.0", "react-live": "^2.2.1", - "react-magma-dom": "3.7.0-next.0", + "react-magma-dom": "3.8.0", "react-magma-icons": "2.3.6", "react-select": "3.0.8", "react-spring": "6.1.9", @@ -2195,9 +2196,9 @@ } }, "node_modules/@cengage-patterns/header": { - "version": "6.0.0-next.0", - "resolved": "https://registry.npmjs.org/@cengage-patterns/header/-/header-6.0.0-next.0.tgz", - "integrity": "sha512-MkV6MAlZiL7fBk4gSemnlQofatPScLm+XsndIrd/V6xIehTbFl6KCO+BxC37i5Eu3EHj14Hgbi+objC36LlgAw==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@cengage-patterns/header/-/header-6.0.0.tgz", + "integrity": "sha512-aawSxxnut8FMQcn91QJY0IoVzn2gnHpbsP9w1EO3ldqB3ZlkLHxCp28kwGNTrUJsAr/zzkQklFLaRBjZdvGWpA==", "engines": { "node": ">=10" }, @@ -2207,10 +2208,10 @@ "@types/uuid": "^8.3.0", "date-fns": "^2.12.0", "downshift": "^5.4.5", - "react": "^15.0.0 || ^16.0.0", - "react-dom": "^15.0.0 || ^16.0.0", - "react-magma-dom": "^3.7.0-next.0", - "react-magma-icons": "2.3.6", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-magma-dom": "^4.1.0-next.2", + "react-magma-icons": "^3.0.0", "uuid": "^8.3.0" } }, @@ -3586,9 +3587,9 @@ } }, "node_modules/@react-magma/charts": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@react-magma/charts/-/charts-6.0.0.tgz", - "integrity": "sha512-r9iIX9/uOQJWMWcnsAF/VBrUTUeKgrkdX5E0oI5qnrqxipCoaZLC88qqwXQs0oJIlaMuGsYKSWZcU4umrhoWDA==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@react-magma/charts/-/charts-6.1.0.tgz", + "integrity": "sha512-eBMyzvoIcMU6vEJpxlrOZgYB4oVzKGjPkw6hwy4Z6IKO25JUIjNmIlVi+xCA0npVpxWQk+vn7qtccJL8ZsisXA==", "dependencies": { "victory": "^35.4.12" }, @@ -3599,16 +3600,16 @@ "peerDependencies": { "@emotion/core": "^10.1.1", "@emotion/styled": "^10.0.27", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-magma-dom": "^4.3.0-next.2", - "react-magma-icons": "^3.0.0" + "react": "^15.0.0 || ^16.0.0 || ^17.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0", + "react-magma-dom": "^3.7.0-next.0", + "react-magma-icons": "2.3.6" } }, "node_modules/@react-magma/dropzone": { - "version": "4.0.0-next.0", - "resolved": "https://registry.npmjs.org/@react-magma/dropzone/-/dropzone-4.0.0-next.0.tgz", - "integrity": "sha512-0XrC8zJuNFQ8j9eSBeYHXpZ2+zNRq4Fgu9AFfxhqrW0uw5/MdnFGQQhg6y1Kok4ic3o5OANvbSNmjJHNfEIouw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@react-magma/dropzone/-/dropzone-4.0.0.tgz", + "integrity": "sha512-9sLOqslpYX90dpw2VtKS1gjOp2RnPOIg9CJCMivIaOoFsgSGzlpTymZidl3CtTYLLXOvWht9zigH4GBlbO/nYg==", "dependencies": { "polished": "^3.2.0", "react-dropzone": "11.3.2" @@ -3620,10 +3621,10 @@ "peerDependencies": { "@emotion/core": "^10.1.1", "@emotion/styled": "^10.0.27", - "react": "^15.0.0 || ^16.0.0 || ^17.0.0", - "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0", - "react-magma-dom": "^3.7.0-next.0", - "react-magma-icons": "2.3.6" + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-magma-dom": "^4.1.0-next.2", + "react-magma-icons": "^3.0.0" } }, "node_modules/@react-magma/schema-renderer": { @@ -22851,9 +22852,9 @@ } }, "node_modules/react-magma-dom": { - "version": "3.7.0-next.0", - "resolved": "https://registry.npmjs.org/react-magma-dom/-/react-magma-dom-3.7.0-next.0.tgz", - "integrity": "sha512-Kwl/iRXKweE5pFyoL/Caljhiu3VnZQUZbWvW8Nhkk3OjCuzl2gHIuSVdIxq8eBr1O2wDZt4L46BX6+A5Wmcgfg==", + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/react-magma-dom/-/react-magma-dom-3.8.0.tgz", + "integrity": "sha512-7mwDSdf2Fv6k0l4lMhsxV88WILnZyKD/MSpsCehX8ksHEPiLMpn6mRKFFu+sqIBWQx2ZXAKK7vq10FGSND3nzQ==", "dependencies": { "@popperjs/core": "^2.6.0", "csstype": "^3.0.8", @@ -22866,8 +22867,8 @@ "date-fns": "^2.12.0", "downshift": "^5.4.5", "framer-motion": "^4.1.11", - "react": "^15.0.0 || ^16.0.0", - "react-dom": "^15.0.0 || ^16.0.0", + "react": "^16.10.0", + "react-dom": "^16.10.0", "react-magma-icons": "2.3.6", "uuid": "^8.3.0" } @@ -31734,9 +31735,9 @@ } }, "@cengage-patterns/header": { - "version": "6.0.0-next.0", - "resolved": "https://registry.npmjs.org/@cengage-patterns/header/-/header-6.0.0-next.0.tgz", - "integrity": "sha512-MkV6MAlZiL7fBk4gSemnlQofatPScLm+XsndIrd/V6xIehTbFl6KCO+BxC37i5Eu3EHj14Hgbi+objC36LlgAw==" + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@cengage-patterns/header/-/header-6.0.0.tgz", + "integrity": "sha512-aawSxxnut8FMQcn91QJY0IoVzn2gnHpbsP9w1EO3ldqB3ZlkLHxCp28kwGNTrUJsAr/zzkQklFLaRBjZdvGWpA==" }, "@data-driven-forms/react-form-renderer": { "version": "3.22.4", @@ -32822,17 +32823,17 @@ } }, "@react-magma/charts": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/@react-magma/charts/-/charts-6.0.0.tgz", - "integrity": "sha512-r9iIX9/uOQJWMWcnsAF/VBrUTUeKgrkdX5E0oI5qnrqxipCoaZLC88qqwXQs0oJIlaMuGsYKSWZcU4umrhoWDA==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@react-magma/charts/-/charts-6.1.0.tgz", + "integrity": "sha512-eBMyzvoIcMU6vEJpxlrOZgYB4oVzKGjPkw6hwy4Z6IKO25JUIjNmIlVi+xCA0npVpxWQk+vn7qtccJL8ZsisXA==", "requires": { "victory": "^35.4.12" } }, "@react-magma/dropzone": { - "version": "4.0.0-next.0", - "resolved": "https://registry.npmjs.org/@react-magma/dropzone/-/dropzone-4.0.0-next.0.tgz", - "integrity": "sha512-0XrC8zJuNFQ8j9eSBeYHXpZ2+zNRq4Fgu9AFfxhqrW0uw5/MdnFGQQhg6y1Kok4ic3o5OANvbSNmjJHNfEIouw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@react-magma/dropzone/-/dropzone-4.0.0.tgz", + "integrity": "sha512-9sLOqslpYX90dpw2VtKS1gjOp2RnPOIg9CJCMivIaOoFsgSGzlpTymZidl3CtTYLLXOvWht9zigH4GBlbO/nYg==", "requires": { "polished": "^3.2.0", "react-dropzone": "11.3.2" @@ -47316,7 +47317,7 @@ "version": "16.14.0", "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", - "dependencies": { + "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2" @@ -47507,256 +47508,11 @@ } } }, - "node_modules/react-animate-on-scroll": { - "version": "2.1.7", - "resolved": "https://registry.npmjs.org/react-animate-on-scroll/-/react-animate-on-scroll-2.1.7.tgz", - "integrity": "sha512-A4MsApouThr2YhguCQ0fq/HVOLtDMuBM1XCHxhYug8k2NfP0S4S6B7qhrVjylMCX4zFAnTa+YKz7eQG/StizFw==", - "dependencies": { - "lodash.throttle": "^4.1.1", - "prop-types": "^15.5.9" - }, - "peerDependencies": { - "classnames": "^2.2.5", - "react": ">= 15.4.1 < 17.0.0-0" - } - }, - "node_modules/react-clientside-effect": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz", - "integrity": "sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==", - "dependencies": { - "@babel/runtime": "^7.12.13" - }, - "peerDependencies": { - "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/react-codesandboxer": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/react-codesandboxer/-/react-codesandboxer-3.1.5.tgz", - "integrity": "sha512-gao6ydAfVI9DlmxvXJb1poqWDZt4jCSi2DWvfUCLUBmJAxH8+DkoGtjrO3VJDjdwcCFvumWb+ztg3WxsvrsWJw==", - "dependencies": { - "codesandboxer": "^1.0.3", - "lodash.isequal": "^4.5.0", - "lodash.pick": "^4.4.0", - "react-node-resolver": "^1.0.1" - } - }, - "node_modules/react-copy-to-clipboard": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz", - "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==", - "dependencies": { - "copy-to-clipboard": "^3.3.1", - "prop-types": "^15.8.1" - }, - "peerDependencies": { - "react": "^15.3.0 || 16 || 17 || 18" - } - }, - "node_modules/react-dev-utils": { - "version": "11.0.4", - "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", - "integrity": "sha512-dx0LvIGHcOPtKbeiSUM4jqpBl3TcY7CDjZdfOIcKeznE7BWr9dg0iPG90G5yfVQ+p/rGNMXdbfStvzQZEVEi4A==", - "dependencies": { - "@babel/code-frame": "7.10.4", - "address": "1.1.2", - "browserslist": "4.14.2", - "chalk": "2.4.2", - "cross-spawn": "7.0.3", - "detect-port-alt": "1.1.6", - "escape-string-regexp": "2.0.0", - "filesize": "6.1.0", - "find-up": "4.1.0", - "fork-ts-checker-webpack-plugin": "4.1.6", - "global-modules": "2.0.0", - "globby": "11.0.1", - "gzip-size": "5.1.1", - "immer": "8.0.1", - "is-root": "2.1.0", - "loader-utils": "2.0.0", - "open": "^7.0.2", - "pkg-up": "3.1.0", - "prompts": "2.4.0", - "react-error-overlay": "^6.0.9", - "recursive-readdir": "2.2.2", - "shell-quote": "1.7.2", - "strip-ansi": "6.0.0", - "text-table": "0.2.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/react-dev-utils/node_modules/@babel/code-frame": { - "version": "7.10.4", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", - "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==", - "dependencies": { - "@babel/highlight": "^7.10.4" - } - }, - "node_modules/react-dev-utils/node_modules/browserslist": { - "version": "4.14.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.2.tgz", - "integrity": "sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==", - "dependencies": { - "caniuse-lite": "^1.0.30001125", - "electron-to-chromium": "^1.3.564", - "escalade": "^3.0.2", - "node-releases": "^1.1.61" - }, - "bin": { - "browserslist": "cli.js" - }, - "engines": { - "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" - }, - "funding": { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/browserslist" - } - }, - "node_modules/react-dev-utils/node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", - "dependencies": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/react-dev-utils/node_modules/escape-string-regexp": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz", - "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==", - "engines": { - "node": ">=8" - } - }, - "node_modules/react-dev-utils/node_modules/globby": { - "version": "11.0.1", - "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.1.tgz", - "integrity": "sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==", - "dependencies": { - "array-union": "^2.1.0", - "dir-glob": "^3.0.1", - "fast-glob": "^3.1.1", - "ignore": "^5.1.4", - "merge2": "^1.3.0", - "slash": "^3.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/react-dev-utils/node_modules/ignore": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", - "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==", - "engines": { - "node": ">= 4" - } - }, - "node_modules/react-dev-utils/node_modules/loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dependencies": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - }, - "engines": { - "node": ">=8.9.0" - } - }, - "node_modules/react-dev-utils/node_modules/node-releases": { - "version": "1.1.77", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz", - "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==" - }, - "node_modules/react-dev-utils/node_modules/path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "engines": { - "node": ">=8" - } - }, - "node_modules/react-dev-utils/node_modules/prompts": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz", - "integrity": "sha512-awZAKrk3vN6CroQukBL+R9051a4R3zCZBlJm/HBfrSZ8iTpYix3VX1vU4mveiLpiwmOJT4wokTF9m6HUk4KqWQ==", - "dependencies": { - "kleur": "^3.0.3", - "sisteransi": "^1.0.5" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/react-dev-utils/node_modules/react-error-overlay": { - "version": "6.0.11", - "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", - "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" - }, - "node_modules/react-dev-utils/node_modules/shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dependencies": { - "shebang-regex": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/react-dev-utils/node_modules/shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "engines": { - "node": ">=8" - } - }, - "node_modules/react-dev-utils/node_modules/strip-ansi": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", - "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", - "dependencies": { - "ansi-regex": "^5.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/react-dev-utils/node_modules/which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "node-which": "bin/node-which" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/react-dom": { + "react-dom": { "version": "16.14.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", - "dependencies": { + "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", @@ -47835,19 +47591,6 @@ "shallowequal": "^1.1.0", "source-map": "^0.7.3" }, - "peerDependencies": { - "react": "^16.14.0" - } - }, - "node_modules/react-error-overlay": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-3.0.0.tgz", - "integrity": "sha512-XzgvowFrwDo6TWcpJ/WTiarb9UI6lhA4PMzS7n1joK3sHfBBBOQHUc0U4u57D6DWO9vHv6lVSWx2Q/Ymfyv4hw==" - }, - "node_modules/react-final-form": { - "version": "6.5.9", - "resolved": "https://registry.npmjs.org/react-final-form/-/react-final-form-6.5.9.tgz", - "integrity": "sha512-x3XYvozolECp3nIjly+4QqxdjSSWfcnpGEL5K8OBT6xmGrq5kBqbA6+/tOqoom9NwqIPPbxPNsOViFlbKgowbA==", "dependencies": { "loader-utils": { "version": "2.0.4", @@ -47923,9 +47666,9 @@ } }, "react-magma-dom": { - "version": "3.7.0-next.0", - "resolved": "https://registry.npmjs.org/react-magma-dom/-/react-magma-dom-3.7.0-next.0.tgz", - "integrity": "sha512-Kwl/iRXKweE5pFyoL/Caljhiu3VnZQUZbWvW8Nhkk3OjCuzl2gHIuSVdIxq8eBr1O2wDZt4L46BX6+A5Wmcgfg==", + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/react-magma-dom/-/react-magma-dom-3.8.0.tgz", + "integrity": "sha512-7mwDSdf2Fv6k0l4lMhsxV88WILnZyKD/MSpsCehX8ksHEPiLMpn6mRKFFu+sqIBWQx2ZXAKK7vq10FGSND3nzQ==", "requires": { "@popperjs/core": "^2.6.0", "csstype": "^3.0.8", diff --git a/website/react-magma-docs/package.json b/website/react-magma-docs/package.json index de7137f23..ad53c3b69 100644 --- a/website/react-magma-docs/package.json +++ b/website/react-magma-docs/package.json @@ -1,7 +1,7 @@ { "name": "react-magma-docs", "description": "React Magma docs", - "version": "5.0.5", + "version": "5.0.9", "private": true, "repository": { "type": "git", @@ -40,6 +40,7 @@ "gatsby-remark-images": "^3.1.42", "gatsby-source-filesystem": "^2.1.46", "gatsby-transformer-sharp": "^2.3.13", + "object.assign": "^4.1.5", "prism-react-renderer": "^1.1.1", "react": "^16.10.0", "react-animate-on-scroll": "^2.1.5", diff --git a/website/react-magma-docs/src/components/MainContainer/index.js b/website/react-magma-docs/src/components/MainContainer/index.js index 0ba4003ea..3ac496c47 100644 --- a/website/react-magma-docs/src/components/MainContainer/index.js +++ b/website/react-magma-docs/src/components/MainContainer/index.js @@ -16,9 +16,6 @@ const StyledContainer = styled.div` 'masthead masthead' 'nav content'; } - @media (max-width: 1024px) { - display: hidden; - } `; const StyledSkipLink = styled(SkipLink)` diff --git a/website/react-magma-docs/src/images/stepper/mobile-no-labels.png b/website/react-magma-docs/src/images/stepper/mobile-no-labels.png new file mode 100644 index 0000000000000000000000000000000000000000..408f854841efdd3fc50fdc479ac3a5d490dcbd1c GIT binary patch literal 3202 zcmd6ocTf}97RE!7UXq9`ARvTLLI$A=0EOT_AKsn(%o4?Ax7rb>Dk4@6MdLGvB@UJ7?z3`5mH-)ir(|F&+Q_ zz>hSCqW}OF+G$jAv7IWG2k_0)E!W1v-fVq+{p952BfxTSa8Td0a&&Zbe}5mQ770hD zEH5uFeENL4P>v0EJhQj9_vYr;bqy1`x~D3rZ%LU=hlhthQ98`5YUk$WK7Ra&a%vcP zzkpA!4T~yUU0waTdH6@-+ur__#l=Nz;Pcv7)7g3NeS>JXy;^J?GDw-t4>AUdN+&|1 zy2d6p!lTMi4y2zboo%!QTv#(cxen!!L8f$&xKmFn<;_9Duh@rZ( z8mkTQOdgomL{>QVx-#Hz9<&BPcjp+fTN6iC5Jg2n-o|tId#! zW}82$hB7)OpKv@1){&>RvCbNTxrW>LF+il z@Q6grZC--A@$t9%7F@Qx6h9rN3zUGm`rz&b_!LNMw&FOR7a10H1oEqs$=hsP+7%fW z--*G#Uy=#6=q392%~dq0JcAudJ(T>M0?^=&}Y zs-cuia8st+1ax0<7>ZgA5hwF<);ov1NLSFNPR{_&yPZ@$G{PuX5WS6sF|<&Ph#+md zo-7}?u}z_@B*!$+4a4&HQ(BtygOYe%?TgoO1fy7&`nV~tFI8D;F;WahB%+!V^K+yb zL47u3RXzA<69yA0`vG<)mHP%(1$ro;-??I!7|m;aU|gEH$D+9=tD~jjM3fZuf!Z2_ zK}Ot!)$?66MMc_zu%q|*fL6@#2ys7SmL;9NB~d;~Erta%flM*hJ|OCiV|PZgKG~R~ zK?1tISPu4fhN!r7or5cWDlVTSmlt}xWG;k1*V;p-!Ui1~kcY^@nKe18Sq+-_&U4r` zaL9%H1VKh(-7Za5WWK_u7!c3hE^Ww;VTiHloCOF)E~0JJGL@077C3uM*cvLAg&FoZpBfM1(q-fJy2rigU&noHS{L8 z<}DAaJdW02732+*!oY7uVLIjd2blK_<08~F(vt@$;ynoJGFBPjLLQk57e5>J)vp68cm3++RM#>V!26&umqaAUqAy? zqhjQygttb+lDgLZm77C478SCty0=B*o2KXuzSjn5CBwx#wqU<-m`e-ftefm&G|3mA z7=c6h7P6VLCt z>9)*A$6z^V~z79OA$$VXfd1wcv)n-vm(uStI^0QTeqzdQ7$9=R?qW1jN^4ZOzo?|ISxnt*!hKG z-o~yYB)nI!SHmj@46zCyVFl@a@Hg=KA&%hxtRT`F17vLEXQ6!XGb+><2htwXF?+*5 zX6GV0!};If?nsKjtR~zg5uOD(m7r4w%+{Ss2~E6Dt1qv2!{?G)gk1uJE`kic#o@y_plyi(-53ZPM$qv7QYM$Liaz@+~$R*-EP_XJ`pR8O5&LQY&Jzx$eL8 z-~>#Tj+GCq(84e8IAH_QbON&1TzR>aR`A=EArcr3H9-T46qMQ&eNR;?NiAnNo(8&lZb$2`Ry*wjtI2x`w`}uR(N_}EPcSg zi(ZhMI(wBkKc^L45!ksX){AoaR)mbV#HHuson{qJuKhf~BMNFI01)izkXR6lf3k=Z zw+ySuZ=@71H#p#5kUmbk^Zn+U$x+*Q6X@?ej_oAWQUqo7RrMbkdeX86kvU2p$mN0> zc+K>i41LG~rF@wW^rr(K^Ev#h@GwpC#hK-dF2b?pNZ+rO{>FKo$%x}SWoD~X%t}P$ z^Zx&cl>ZId{?5bme?#=&<@keB;s4O1_8ML5^eg#(JZj8I_)572uz}>kO^C5z7FpKo i>?AG)(7z>2F#vLoaBcg`f?R)@sz@^{c)6)t{GS0*7=r}> literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/stepper/mobile-standard-labels.png b/website/react-magma-docs/src/images/stepper/mobile-standard-labels.png new file mode 100644 index 0000000000000000000000000000000000000000..f2cb269d710e694e7cb6609be1cb4dfe34199de9 GIT binary patch literal 2690 zcmeHHc{Cep77wwM+DaEZ)Kb+d8j0E-ZJx#w6s7cO)t=Vc2(g6b5&M=}8roE8q&y5& zMNo~cD3xfd_N77XDrgY3RG!Y6d9O3`*PJtd&OPTl-@U(k?!Djdp7Z;XY^+R$1*HW6 z0Dv&u3}y=eaJB89$^*cCg(&n5D57Nuj5l*HMLAd?^qQA z00OCS*e_SYMwW(Ke8xaxd=sY+GApEG3%bbdug`s*Ze>?2DXefjDF&In!5>cg)hd^8 zM2!rjIugERsCf(QlmE*mw4cCgcveO_>Ei;7{5Ea9u4{REBjA|L^I}xDS5=x)WZW(9 zpYqcl!4<uEP%mfOtHylDv^9B9h$^?xoI8lT2UoiFvFc0?WXLu$=GRLs%^TL9v~sGHwrLG$l5Ac}$oZA_n3AD!1+~81J4aQ4;@x)Bba%dI}kCA^h6+5QSaV=JhPoiA@y#rr*cP;D*!uhIgxn zwU%wfLSPVCR#)yex?m6#0y%2%uFsgur3=BkqeP%GY9v3%!<4j${tk{AsfXH8n*UE%)4_MHgCiK3%E+joPA z19ovJQ5EcQQJo#Lvx}Zs?~)A2LUkt7%=0e!!DyiivYIBjEJt(nGCjR^tICRA)TE~r6dl+MKl&An^@oB7eBEZoLG|zyUujgHvM!yMXbkf9S!PrDsWc??mer-rboL5=CK1U1I zQMgWvb5ORlD{Xrr^jQoUT4`;-n1(bMrQhuodODvCeLD&7QY#6{O`~25Z!`Sx08@^93-K&g6W+$LUN#;aerQQ(F5z?@|5vR8cy5|qVADRB|h zQF+V#ao!EB1?h#nlPqJK%;F~YVn6Gl2L(6LPc*>SS4MYJw4L@mUarSZoSnzqG~>Of z6ZooqI&Xpb`DIb0#)8l6JK?8CGBkT2(d>se{8?OosSCiKQldtnqe9cpx4bm{C%zhE zs4MpOfEDS_WB)I9B!ubOZ!dYExdNPub255Smndj_Sp9=w4MAfW%i;go(nV7-&kIjU?al(*C?N6%H=DhsB`M7(BKwzrHF}hW2u_8lkIZvD~gkyPG=oEqE<}; zV3TU`RNNp00})0-W9(+$nL#tP1M-P#}l7R@p)Hfr|hiyQ;jX0K? zJT#;wJwwIyo_e+liA&z1#`E?UUY<@lNp}o4wh}QR;K|q`2b7+bhax~r<|1D?U0KSc z-G~v)me(d%8d7J^zbEU$e%^oGFW4UYAc%ZtCI`9JBgjTNCu~2-9a1v!AT#6=)5=*vHS8 zb4+pXD$Lk*xfmdimmX?&^#IY+fjH9wHLfFJ(Eng9javn!H(}#Jg%QPCMN$G zRN!_XY}1Y=QQR>4ku`1!jao`lh(8TF;cI9opWrwdaj=+&XWn^!Fo5@3)t84EXKegA zK5+HTq(lJGyN9;QLp>YU1N-gPL35b=>}Ax1U|Cap5kly2h4ZvQjHAK{F=Wj`81M<4 zQLcm}@tHAGsOGZvqKc4<*GK6YJL=nfv}qh~`G+kwQ@1MY>$V zNGWPRnH$~Ej%1%yTWu|ut=1Oi3y`!fsP;3QJxOSh6j`5cVeUjiD8_EUgNw9EgWcZ} zoH*$TItqnrdmGkywAXwl<1;(fk85>SSsLScH9DZ?`w7U+3o9#w2{eUaMswiimq3$c zjRemKpa*p?V3g797VaGZY{E{+ifcmK0Ed7uAu-K~$BI@|2}Qm{NqP6EM6N#_4@JiL zkEv@~*2nnDg@n>{$CpgPoqvY_ukyv4-WkJh=;lh*f#u!(T*n$dMQ$8L(HirB%nC|2@x}y{{uhlV?a)}cYj$RA=XN`IQyPE7c?nKoJ*P8 moQH7W)FB&1670VM!c2i>K-_4|yq?4NA02LN1uHjljs61?zPh6T literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/stepper/mobile-summary-view.png b/website/react-magma-docs/src/images/stepper/mobile-summary-view.png new file mode 100644 index 0000000000000000000000000000000000000000..c4b4e6dfad41263f2570b2b800d483fca63ce52e GIT binary patch literal 3014 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 literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/stepper/placement-modal.png b/website/react-magma-docs/src/images/stepper/placement-modal.png new file mode 100644 index 0000000000000000000000000000000000000000..baebaf74a66337fecd504111d49b3ffc8036c5e5 GIT binary patch literal 13762 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 PJDjUmO!SK{IXwAa_#NK< literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/stepper/placement-side-panel.png b/website/react-magma-docs/src/images/stepper/placement-side-panel.png new file mode 100644 index 0000000000000000000000000000000000000000..c5e9f469df19206b5d41ba0dbc212d1eaf8670f9 GIT binary patch literal 14236 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 KPTB8vPyPp>y6_4B literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/stepper/primary-label.png b/website/react-magma-docs/src/images/stepper/primary-label.png new file mode 100644 index 0000000000000000000000000000000000000000..21a24bf3466162f600221cf8c0e61fc721cddfa8 GIT binary patch literal 5925 zcmeHL`&&|3+s4xLois zHF-Zr{-7Lc>ud`Ed_-^G3R02xYH|48);&>yJLOz#a0(j z&^SiQ+86)mRQ`J7#QmFZn{EVNe1EjROiiO(?O|7#j)oTL+#kP#frl)g?>xQZUoMwo zGfa1#<}5w>d>8-Mh5jeoK^QTSOy`f%VZ!&~dn0jh87h|JK6R~hKG}B_>I&f{nIuM& zlmUQ0S3%kUfZNL=4FEs|C{N7o)qku1$9Wi7I0CqrmE$j^u2E$+HjsoxP3lwa8W)N_ z;x=+K3yOm>d=Zg9wgwKNGYdUhz&@cspHHyrkb{YU#AB6 zZHd+yhsUuNoAV-M-AgFGZwocsaup`)ZUa|TEA9HNOlj9D7P>`Rg9{}$Vs=Apw*>U+ z+!$g!qui|>2IK-4HLcec)@6ErtxfHzqRCFq6xjc)g4@F)4Y$9PG^G&`d$d+BR5Tk| zVl}ELa@pvl{oV1dqk8vGMH;rcMQIlfN(6KPPE#})qmp6<~AbquvH4Z&3y?Q1R*vC-&4nU;=jWwsk3parNXH#7BFpO=dgmu(JU@{ zOM(tX4qb!DdUF`fHg0$K7D7c|*S@4$So8M|)k|k2yptWf0w2j4+TFrcLSsh_3)Av3 zzS+mXS1x<;=6-U}l!}v%06dtc^5WMNPO!Zzp|9>dvKT4j5UL9hCRu|1IgO48wRwQy zGP^Us{@_M-9^)=KX$X9$Ct5s;s?J3$&Bi5n9R}!V%P|G+;BZtZQHGV-lmW^K{;Icq z>bJpQZ9tzvnUc}<3J#{PHRsqK!yS|T2ZqpkxdpjbV7h^4Dna$zvFl1ZaZmw zqGBFU`D4VyZ)novX)DbULh}F@PZm_5K_EbW(gVv5tqsG?Jpb*`?gE zD$maG&pfqtkK1wYah8cwQI6!NnKe!TBXp5Q?e9IV(%Y<+-8o~CN#WhkMEpyzVTEi? zyf(Y>7by#RBryKCpcE|Gm7dXAOx&6?H3&pZ3!3oG`9ya)Az?eZvV5(Rn{r4Z#aj0V zmH@!6Lq9;Y-g{l)KA_;?h!!E1p2|dYpjRQ?W_iQO!gWtIO}Yv-@Gn5*qmYt1K;Qd! zaulVM;?=M2BTqBWyO~;_SMTuucbKdk*<3%<04tTak0i#GNW}BxO^sTR+(R5sPtSa} zpM55}Mrl34-!K+4PAJq`|6s07+-(@D2W{4QY^ZS*g8DkrNHO=}LKA1|fN67bVPzkU z%aqTZAq-m&u{Q2b;*6|0US{M215LH$FQclQpj+dE<+-YQqV;|z9o`n9_#e^<%%&8x zYo|h%^z1=H@HYgq$=K`)#CL%IDowz24R&Zx)ytpIF&6l_n!&o`UU=s~k{? ztCTs5VXtD^Z}ZZ%0hMw|RJm1*Vp|qy81_(&G=nH!xk?LM)dO;v=SEGFmx{7MX}bwC zjc2q0hU*>YiMe`-%WIv*a`>!uL1uvl3CLpjClL{GpGps3>f7EiFDL(k(Y6Jgr}f(u zgW_jWt_sz58wU_CSJ|VjZ_6tjtZco!`CyBRU@|$3uv<{Y`(cLYD%b!UX9eM4MSnF? z#W6I@a|HmoP;M?xtdp*c4GS!SCu*!kEq8pNj)+Y#)n41Vz@=!nhzE(HNwdtpOo|j` z`8pN+#(_02$#Ih1p;)aK|HsxE%XWv99vWw$=&+bDWw$@&F}*70fs4?MS$Ju|kfMl- zU$Tmhum{ZlJgjiLPlej>F`SaT7;nwx0Li@Pn9}v+@8|WsWwTp?0$y^c#6WA9xc0%+ zSuEh@0V;M5&st|}`}#4sXS6Hwct2u4@MyUmk*UkGz-jqSghIs=>)bb`(LKU;VcWHX zZ4jN|gwp*BI1eJ&+nk-UofAEg4{H9TRCdwr3BMy44QbMI5e?ARc5|k#-j)ucQKz+s zs6(%}A!$CV$tKn`zSS|1W%)NoY?rz=+u!6kKW<}rc0G7Pb#btsVv`gxk*{?2QqyrZ zsbbEI4L`}w)-f*HIUIyuAhH;}b-*1XmCu2<+G<@EMfy&)<=CxVZHZCD)hs< zZXZ-T{lIcDh;N6iv@sYjQJ?vdvl9%G^-qKPVu?-$;vi&bH1p@XP3`MAcmeIwL?}JH ztEliYWB(iv_h@ar_wS!#r9aCdUT%!t!QrLK#HHxeEv6aeL++cR0acncx$YO(N$sPe z2==?$*4?;No9T^iaCMcZ4VIZe6i<~)B~fFKK>mpl9vI)5;+)jo*wFWqQ>dl=&kJI( z-_b%$YmZBzY2`4y=boUmHO{aGp8CFgk+|T;^G-w=GxsR1`!3URf#Y#Q8bd-(jE5h2 zrr$kXd(YMAe9#^(Ev>Iq(MbWJ^mG1L$<$5%A}7LS#??$p&hl9}D?53Vz-vzmfdDW0 z;2tzx59k*9x;v2W0G;?DuN-7|n$CbMniDzc46g>E?mFcbG#%s?&A{KPFTCw*n}n*w zTJ@P)>i9GcuDnbqXOa9F?TvedWB0rp>t5nKip0TY(&%pz5!`;2U_^!5-1+v;U719P zZK?s&DctzYgh^HIWXnqTFJlxT!rZd^x!_=JLRndt-We%6rK%WhBlw8MJ$ZcLt>JD_ zdWd(p(#C2#2Q+PTASC6v=o$4IYRoSICzJZR=HaiOh?+ef#BbxJ@XprUU`bdhB_BsZ z>L~@mgC(WbnJJ$pR$lI3*y<+$XuX@SPvjrKQoNci^P`=38?Dc??vdHQCQd$Hl(oiW zG_|+du(uNP&8@nl^+PbYEs_EOZI$_1Z&*~8r~EIHx4D*6PA-^h_^$7P+a?Hcbppwl~G4P6huEoo4 zX8w9q{6u~8&tV543;*2fC%pAwgz7cB?Im{hu6$`?ZA$5wMZ(De{ADDSC);7JD`TA+ zRUS`r9}d!tkW7;%JU;Yre%AKTG7^PzMfV=)_?kz+94s6jS!VH@3O{<bj9cIs1dK7K9q$Y?b`2%)k2EWO{rYa$mgW2c4} za-zk7r8i{;UTohmaS^usa2-iv&VtvSPkSyVqh-%+CFmIPF1PEx}QI9)Wap#6up);kTf%)2`vHB*75FJLn(Z9a{u zgRAVziq}p4@DA&%^PhwWT0t0|zsbirq#DIt z$zszAqJ%sKF_x8mvY1>Mg9bsEk;gIM8iY8zlq)8gi0vO!(P4 z216>qV`(y$?~^uXwdR{a&%!>` zBHiZ>d40FQNGRc@rn2C8XY~nUj6sM{VO~ovu3XR?yw4Sg{-HgM3aE^fVb{JfM-{%W zuoUY^SI?UON4s%b%N5?M*G{P?)cZAU;pX1K^I5m2AHlMnw-2_m>r$_!2i*PGR)EP) zo4O>=q>SV;s9LoKfS;Z*l66r4%?s6prQvi>TGhU`^a_6PnRxJIn;AW~>A?jFn_tmg zc^ajik(OMo=)G{Ba@#rbvSP55yBjkf^Y?M<%8yYdH>-*$=l;`q~EwZH@zXya^XZHYICLVJez8mF+CK;rQAw9v<>hL>G{5bQ2 zHlUaZgXm{n?dzpPhiiv^Z)%^HCV!Fo-UX4A$y3NDLpb|b^2!%fB=siiHo1J1*`ASa zg*#j#X;|6L+~Lq1d8}6WW?e;4b{oYvFBRrr>{dPTE$!tb3?sSf96GL$ZTGh2 zj{==)`s7Ts&E^*2y1o8G4;GkbSipVHvq) z5R7*(=+oFpNwXQ;X6qlso6%RkYW-H&i)W!dDTKjDQD=Fcagxc+nNV?F1pBJsx)r`j zYbfqx{%vi(iNKs-s#pvD;oI4@Sw$mumkF6cc?s4OG;9VTsVo2bA-?1hR+(4@PN4%2 zly?Xh9Kz`8_%l3cTvKy2rEKa%#C|7B8?rRI{{2lxlVn8mxV6u9&(G17B?7a$hUGDR z^p-I3Z6oH7esjMYL}y$smb;G#;XDlXu38o8RQc$~(}~wZW$Mn;rZsyjmzX=wH5c_; ze&v*6{fTPfJS&sDG&&Y5sp}ii=lNF6(H~x5d$hyCa3RiwPvOiXbuZ1SeHKNho04AK zpR$!JS*zKKF;)iZM5kg4rK@FvES>$uDrqlOf{!M{YrMS2bkHBD)SM@Cjh>!%c9 zb{>i>i_m2K8$M~%U*ubX&`8f*VPV@JBCh}GImKfAoAgmA4^pSueZQD{18&H6%=WuW zzGWpA?jOrwG%iEPSItcF0tx*^He}JMpBAn(K~sadH^R0E1z@IQrljE)lNa~7RFPtm zuVTk}O-O@YiO$s9(|rxcxflCxLaxX7GvWd`Q^rb4+LJ@5k1*h6;dBzOKW;PR?G&tj zOwg04I#%#Hp8cjNyWk2TX%VCGAleq95IY!Ui$E){A`~px9Vx;o{Osmyc!aqnTk9T3 zJ)4vyWQ2V)i)vV`dl*IVnwWQTDu3PqR%tBGiI{pMb;c4+HCK?kmlXNEm=|#cV7Ne6UEpNU6@Ta ztYJino9Y*vUw1Y}7u_-0r32$@4~XGDL#wCYX~9$?NKR@7oIbj14{*K%ftx}> zxT>2RHjy0I=00wAX`KXSw7#}|y6As4hnBwvTuiZYBAA7TR8NG}9*afE&m;gv2Oc{7 qC~b8CfNk8OUwJ5!sjN?9R$J}DedVXx0EY`MzgOD@KKLIK-ze+= literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/stepper/secondary-label.png b/website/react-magma-docs/src/images/stepper/secondary-label.png new file mode 100644 index 0000000000000000000000000000000000000000..6414ab053ca0709b7a80a76c412f742a67b552d6 GIT binary patch literal 6789 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 c$PJ^(<42LR69 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 G_&)$qvt|nb literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/stepper/step-active.png b/website/react-magma-docs/src/images/stepper/step-active.png new file mode 100644 index 0000000000000000000000000000000000000000..5a2849628f80246472ba2a5ec76832fc04c775ad GIT binary patch literal 4154 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 S%J<+^A8!5^xCUJ5D`UEE~=?o zE~S=I#NJS9janmADtx`)yuaR=@5gukoH@^PX3m^v&YXFkTUr=%T@bzi006j5O`r$> zfSCdSFln4;`Hg5*-;n#A`YrET!_Lmmz5&cN4c@?Du+Y%Z*4Ebb_4VBZY` zfy3b?<x^$$@|N?7e6>9+{7d>mM5%gIP3p z^{gTsh zw_&^pzf6=zi!$7O#V!%=S!o!)uu=%B&wCo8n5uqutBXV(ra6p z&ANV2p*KQ!YOPo~`}@)ik0l`tUzC!z>sT!rhyMxbF^s7ne_9N!~2t|jLn5_hcH zEr#NsSZ+IbyduU+HP)V1uDVLCSRGjm8=@Lf!t_w`8O3J(U+*#` z&=y|u5L1R6+Tz%eB8j$8z?L#algBR#hNW_l2!cog~0zwsKQdtS6&?E>`AOX6qhPrvdr%cms^ zW4m^Z(Y`r2+7?-rxRQ@UTB3nld zKLgfg(>9N_TFOq_Cc}YL4R#ib7g{A(A~f_Vp^2nL)|&1=5UCe2z?&wb|4)M36}V$F zaRN*T>a&WV^)j`+*|H|L{rN&vw)WjE79Eud3Iq^obIY~6Q|0%BwSWoMPP}3Bk|)^y zaG%kr1Sn`oW>u%8T<-YK4V_fWTMVvAZG@G2iUV?qk&~#WvmTaH*#qW1K(FBPwOPRQ zDEDlh{j`UX2(5EP0&t^gjLVQyHc-+rl|_8^DmyxqffJS2epL}}`ks?X%CYuVZ^Wgk zK!TZI!b5Y=pq9wGWI@Cu9@=z{{iMe~yAOOejOtebe6OF_(p@N?iTX85<74Mq?s{}J z)gDanB`AM>f5%OZNy=*0hAzW)=|)++jEkUyKwGYvTh%X6TkhqCd&GSQt(w6`_yXd* zTRm6~MKU*|8@DyL+h`%Hq^2tBXj@~)%7B&PytnNRT23ZXcGi+)UA7n-%MbmH8hdQ~NSuZi(`$qmwt&CnMuU~-FQHB+(- z?J{IiG)|3!Y&hL@>x@wl7Xfhic5=E)GudB|+0^~+9uAa)n3iJy7qC-&C+iKVED1o;k;90T6YBl4=RoCgox6%5ZE1guI(9pf%?{!qM3kcdxO7iB48 zD?CdyBk=z&_PfSPeR*)nM2Wy*xmTz&acQP91o()?!@>W5mF;IqS74|4YyPRW}&1-{GIvSani~)aHVpL@LuWd$dPAM zCqGQcipr7?3p^Ff!Ol(_X`($>wTN~b*e(pko3d`^mRlt^CF8mmhTRaT9Y4R8)0i>t zr+I|biqdCXBmR#buvP%0T7KOgls0<@;)KTaVR^l~k>@x>cOxbS%hJ4jTGI&!@P3tO z{yt*Wyd*G_m`2Okz`1SAN1Ow}-wxHlwMRO_?ysYEJt&u(Zf@w2`csslu>p%UrZLoz zG087pu!+;z5>Tv4bMQ)A#5yX-Y7cNpp-Xd@dhG4jBt~r%NgN@1-~4d&i8%cx#rhl(?xKvayghM;)3u=2gApsg5YgmO z4@Lbw)*pNuiF3NXlr)e>*~IoMqzpPyC{6#rf_n@Try!0dB1@AO1#e% zEkaH`P5w5easCm1^CY~mZh~vAwDKw?^4&Lx$jvqzC|kb!bpJzCVm46 z7;>|(i#ApSK^Z@*Mnx-vhuyN}D0LPkDQ^q5>b$+6sNxisdrOh(&p^VMWD}ea3{~&v z+og4ja0InCH{RPraI~JdYyRCujQz*9C(uW+g78U0pu>?+MVBrz`dBbO6F8%LLBK>J z9;f-ZLy$a@df#!#PK-aXpDQ5A%yvJiMDe|8%)Vd}Jx6YN(=?F5BP2UnAl^w&z71^+ z8C=8V%L*5OG?eWjk(>f)FE7@K#S-SpZ9k?8x|rU?)Nv(dB4zfXbS~Ke}Ia&`Xnr z8>1K1s`|KRc&GQ>PApZi_HQ> z6CDanaI_=c`&Ae>A3)#w`aP#A$>9TV_~Ku-dJOK$(rUc?SjU?=MrvHZ&~b@P@XKH> z^mA#cJC6fZME$%@s?r0s#qRZ0cWg!$Y|mFA1lW8b%r==o+iIL(qksf(#GN7YW`Il8;h32fsmY}<2xD@@k4bgKd9Dsfcaf@yg{|YKxJ}u5_7RVv>(ph z!)HwHT*0OR!?U&Ct{-b~nVnsu{OCqn`+#U!yGEK<9tQlaL^&URJpq&?ld5X`!6^D+ z!|0R?Z^9bxa&hb4{Ve+a|BBQ&ccjg2S<&urL5(&ivsl1>I8s^qM4tUyEdQ1)g&p!1 zEQrO+x7#tEriraIg$H`Zvn{vX_?x}AR88^l0ZZl6jmLQkT_cqiSAPmjOi6JzbbTk4L?z*`6 zd3E{@9JfOpeD>|TCNcod;|Cr@GmKmv!bMNB>QWX02*dBoVH`+tN@BCb*ur7lYI_J!-YaS*ahr+ejtT+YD31ICr=k|h{3dY+0bib6hn)LVW`K+`YW-a zLUMqqNr7z@%E^=`TytnmT||4}2_gg$n2D9Bp8Mc<@8ufhnkyt)g5Ya>$-1fO$gXtc z=L+gTVaZ0t&)=V_lvEZEifwgULF?~zjJClu3yx07L))jPb8BQLl-RBLf=M-(gmS@8 z2ljiD&1_`{u98S?Q0+I>4|>?X3s;dh`91$0_ey>NXZ8ep>t#+~cqw+P#Q@uv{`tj5 zgXb;pn7V1se<8zvyPxqGoCI?NS^srqtjA8eCT#!h&;C=t0i*{o)xEI(;_)wF3bTOX I4crs|2jFsc=>Px# literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/stepper/step-complete.png b/website/react-magma-docs/src/images/stepper/step-complete.png new file mode 100644 index 0000000000000000000000000000000000000000..c9285710b7a2e23413928c20eec09632a546c8ea GIT binary patch literal 4331 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 NPuGKcA3LA8_z%}rI)(rM literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/stepper/step-incomplete.png b/website/react-magma-docs/src/images/stepper/step-incomplete.png new file mode 100644 index 0000000000000000000000000000000000000000..039ef04f65122d23f109af3adbd5a4e18e1ac225 GIT binary patch literal 4413 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 literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/stepper/stepper-intro.png b/website/react-magma-docs/src/images/stepper/stepper-intro.png new file mode 100644 index 0000000000000000000000000000000000000000..24c8b184b258afbf6fb08bded9edc62ef3a67e50 GIT binary patch literal 5522 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 bk4BK83|)IZaWV+}<6xj;q+RpSIre`5E|Q`0 literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/stepper/summary-view.png b/website/react-magma-docs/src/images/stepper/summary-view.png new file mode 100644 index 0000000000000000000000000000000000000000..5c477a3f1e28463dfbbb7d15a3dd5d15b3360617 GIT binary patch literal 4813 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 C{v%xg literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/stepper/text-wrap.png b/website/react-magma-docs/src/images/stepper/text-wrap.png new file mode 100644 index 0000000000000000000000000000000000000000..573de4bef78bb099c14fdbb02bbc56c127eb0bf4 GIT binary patch literal 10470 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 E4}DUHcmMzZ literal 0 HcmV?d00001 diff --git a/website/react-magma-docs/src/images/treeview/intro-image.png b/website/react-magma-docs/src/images/treeview/intro-image.png index 99ea1e252449623334f10ff4f297ee2f6c334ee2..25925689893f0411673ac4553d13e2ac6ef41938 100644 GIT binary patch literal 6221 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 literal 6217 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 +## 3.8.0 + +### Minor Changes + +- fa9662d1c: feat(Tabs): Two new components, `TabsScrollSpyContainer` and `TabScrollSpyPanel` allow for a unique `Tab` layout with a scroll-spy navigation UI. Please note that this component is in beta. Use at your own risk. +- fa9662d1c: feat(TreeView): New TreeView & TreeItem components + +### Patch Changes + +- fa9662d1c: chore: Update nvm to `v16.20.2` +- fa9662d1c: fix(Search): Reset the value for clearable search when the X is clicked +- fa9662d1c: fix(DatePicker): Date no longer disappears if user enters a valid date, then changes it to an invalid date. +- fa9662d1c: fix(Badge): Fixes the Badge height for the label version. Both label and counter variants are now 24px in height. +- fa9662d1c: fix(NativeSelect): Fixes the issue with pagination control, rows per page, on Table and Datagrid +- fa9662d1c: fix(Datagrid): Fixed the state of pagination select not updating the new selected value. +- fa9662d1c: feat(modal): Added new `isModalClosingControlledManually` property that allows handling closing the modal on the consumer side +- fa9662d1c: fix(NativeSelect): Fix issue with data-testid +- fa9662d1c: fix(TimePicker): Returns empty when backspace is pressed +- fa9662d1c: feat(TimePicker): Added support for clearing Timepicker +- fa9662d1c: build: Update references to \_styled ## 3.7.0 diff --git a/website/react-magma-docs/src/pages/api/combobox.mdx b/website/react-magma-docs/src/pages/api/combobox.mdx index 6dd2bcb5d..c3175882f 100644 --- a/website/react-magma-docs/src/pages/api/combobox.mdx +++ b/website/react-magma-docs/src/pages/api/combobox.mdx @@ -1401,10 +1401,7 @@ corresponds to a `stateChangeTypes` property. The list of all the possible types ). However, in the production environment the types equate to numbers
- (eg: - ComboboxStateChangeTypes.InputKeyDownArrowDown = 0 - - ). + (eg: ComboboxStateChangeTypes.InputKeyDownArrowDown = 0). ### Combobox diff --git a/website/react-magma-docs/src/pages/api/date-pickers.mdx b/website/react-magma-docs/src/pages/api/date-pickers.mdx index 2e1edec3a..133f72429 100644 --- a/website/react-magma-docs/src/pages/api/date-pickers.mdx +++ b/website/react-magma-docs/src/pages/api/date-pickers.mdx @@ -95,6 +95,48 @@ export function Example() { } ``` +## Clearing the Date + +Dates can be cleared with the `isClearable` prop, or programmatically through the `onDateChange` function by passing null. + +```tsx +import React from 'react'; +import { DatePicker, Button } from 'react-magma-dom'; + +export function Example() { + const [chosenDate, setChosenDate] = React.useState( + undefined + ); + + function handleDateChange(newChosenDate: Date) { + setChosenDate(newChosenDate); + } + + return ( +
+

+ Chosen Date: + {chosenDate && ( + + {`${ + chosenDate.getMonth() + 1 + }/${chosenDate.getDate()}/${chosenDate.getFullYear()}`} + + )} +

+ +
+ +
+ ); +} +``` + ## Placeholder Text By default, the placeholder text of the input is 'mm/dd/yyyy'. You can override this by using the `placeholder` prop. diff --git a/website/react-magma-docs/src/pages/api/drawer.mdx b/website/react-magma-docs/src/pages/api/drawer.mdx index 545d248f5..f65aa9364 100644 --- a/website/react-magma-docs/src/pages/api/drawer.mdx +++ b/website/react-magma-docs/src/pages/api/drawer.mdx @@ -17,7 +17,7 @@ Drawer accepts a position (top, right, bottom, or left) ```typescript import React from 'react'; -import { Button, Drawer, VisuallyHidden } from 'react-magma-dom'; +import { Button, Drawer, DrawerPosition, VisuallyHidden } from 'react-magma-dom'; export function Example() { const [showDrawer, setShowDrawer] = React.useState(false); @@ -25,10 +25,11 @@ export function Example() { return ( <> setShowDrawer(false)} isOpen={showDrawer} - position="bottom" + onClose={() => setShowDrawer(false)} + position={DrawerPosition.bottom} >

This is a Drawer, doing Drawer things.

@@ -49,10 +50,12 @@ export function Example() { ```typescript import React from 'react'; import { + Button, Drawer, - NavTabs, + DrawerPosition, NavTab, - Button, + NavTabs, + TabsOrientation, VisuallyHidden, } from 'react-magma-dom'; export function Example() { @@ -61,8 +64,10 @@ export function Example() { return ( <> setShowDrawer(false)} + ariaLabel="drawer" + closeAriaLabel="Close drawer" isOpen={showDrawer} + onClose={() => setShowDrawer(false)} position={DrawerPosition.right} > @@ -88,6 +93,7 @@ import React from 'react'; import { Button, Drawer, + DrawerPosition, VisuallyHidden, Card, CardBody, @@ -100,11 +106,12 @@ export function Example() { setShowDrawer(false)} - isOpen={showDrawer} - position="right" isInverse + isOpen={showDrawer} + onClose={() => setShowDrawer(false)} + position={DrawerPosition.right} >

This is a Drawer, doing Drawer things.

@@ -144,19 +151,18 @@ export function Example() { setShowDrawer(false)} isOpen={showDrawer} + onClose={() => setShowDrawer(false)} position={DrawerPosition.bottom} >

override default i18n value:

-

- -

+ + + + + ); +} +``` + +## Step label + +When using `layout` with `StepperLayout.summaryView`, the option to change the step label may be done with the `stepLabel` which takes a string and replaces the default "Step" label. + +```typescript +import React from 'react'; +import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom'; + +export function Example() { + const [currentStep, setCurrentStep] = React.useState(0); + + const handleOnNext = () => { + if (currentStep !== 3) { + setCurrentStep(currentStep + 1); + } + }; + const handleOnPrevious = () => { + if (currentStep !== 0) { + setCurrentStep(currentStep - 1); + } + }; + const handleFinish = () => { + if (currentStep >= 3) { + setCurrentStep(0); + } + }; + + return ( + <> + + + + + + + + {currentStep === 0 &&
Step Content One
} + {currentStep === 1 &&
Step Content Two
} + {currentStep === 2 &&
Step Content Three
} + + + + + + + + + + ); +} +``` + +## Completed Step Description + +When using layout `StepperLayout.summaryView`, after all of the steps are complete, the `completedStepDescription` prop takes a string and changes the title. + +```typescript +import React from 'react'; +import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom'; + +export function Example() { + const [currentStep, setCurrentStep] = React.useState(4); + + const handleOnNext = () => { + if (currentStep !== 4) { + setCurrentStep(currentStep + 1); + } + }; + const handleOnPrevious = () => { + if (currentStep !== 0) { + setCurrentStep(currentStep - 1); + } + }; + const handleFinish = () => { + if (currentStep === 4) { + setCurrentStep(0); + } + }; + + return ( + <> + + + + + + + + + {currentStep === 0 &&
Step Content One
} + {currentStep === 1 &&
Step Content Two
} + {currentStep === 2 &&
Step Content Three
} + {currentStep === 3 &&
Step Content Four
} + {currentStep === 4 &&
Steps Completed
} + + + + + + + + + + ); +} +``` + +## Aria Label + +For proper accessibility usage, the `ariaLabel` prop takes a string to idenitify the `Stepper` to screenreaders appropriately. + +```typescript +import React from 'react'; +import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom'; + +export function Example() { + const [currentStep, setCurrentStep] = React.useState(4); + + const handleOnNext = () => { + if (currentStep !== 4) { + setCurrentStep(currentStep + 1); + } + }; + const handleOnPrevious = () => { + if (currentStep !== 0) { + setCurrentStep(currentStep - 1); + } + }; + const handleFinish = () => { + if (currentStep === 4) { + setCurrentStep(0); + } + }; + + return ( + <> + + + + + + + + + {currentStep === 0 &&
Step Content One
} + {currentStep === 1 &&
Step Content Two
} + {currentStep === 2 &&
Step Content Three
} + {currentStep === 3 &&
Step Content Four
} + {currentStep === 4 &&
Steps Completed
} + + + + + + + + + + ); +} +``` + +## Layout + +For alternative layouts, the `layout` prop hides either labels or shows just the summary view. By default, step labels will display if `layout` isn't used. + +#### Layout - Hide Labels + +```typescript +import React from 'react'; +import { + StepperLayout, + Container, + Stepper, + Step, + Button, + ButtonGroup, +} from 'react-magma-dom'; + +export function Example() { + const [currentStep, setCurrentStep] = React.useState(0); + + const handleOnNext = () => { + if (currentStep !== 4) { + setCurrentStep(currentStep + 1); + } + }; + const handleOnPrevious = () => { + if (currentStep !== 0) { + setCurrentStep(currentStep - 1); + } + }; + const handleFinish = () => { + if (currentStep === 4) { + setCurrentStep(0); + } + }; + + return ( + <> + + + + + + + + + {currentStep === 0 &&
Step Content One
} + {currentStep === 1 &&
Step Content Two
} + {currentStep === 2 &&
Step Content Three
} + {currentStep === 3 &&
Step Content Four
} + {currentStep === 4 &&
Steps Completed
} + + + + + + + + + + ); +} +``` + +#### Layout - Show Labels + +```typescript +import React from 'react'; +import { + StepperLayout, + Container, + Stepper, + Step, + Button, + ButtonGroup, +} from 'react-magma-dom'; + +export function Example() { + const [currentStep, setCurrentStep] = React.useState(0); + + const handleOnNext = () => { + if (currentStep !== 4) { + setCurrentStep(currentStep + 1); + } + }; + const handleOnPrevious = () => { + if (currentStep !== 0) { + setCurrentStep(currentStep - 1); + } + }; + const handleFinish = () => { + if (currentStep === 4) { + setCurrentStep(0); + } + }; + + return ( + <> + + + + + + + + + {currentStep === 0 &&
Step Content One
} + {currentStep === 1 &&
Step Content Two
} + {currentStep === 2 &&
Step Content Three
} + {currentStep === 3 &&
Step Content Four
} + {currentStep === 4 &&
Steps Completed
} + + + + + + + + + + ); +} +``` + +#### Layout - Summary View + +```typescript +import React from 'react'; +import { + StepperLayout, + Container, + Stepper, + Step, + Button, + ButtonGroup, +} from 'react-magma-dom'; + +export function Example() { + const [currentStep, setCurrentStep] = React.useState(0); + + const handleOnNext = () => { + if (currentStep !== 4) { + setCurrentStep(currentStep + 1); + } + }; + const handleOnPrevious = () => { + if (currentStep !== 0) { + setCurrentStep(currentStep - 1); + } + }; + const handleFinish = () => { + if (currentStep === 4) { + setCurrentStep(0); + } + }; + + return ( + <> + + + + + + + + + {currentStep === 0 &&
Step Content One
} + {currentStep === 1 &&
Step Content Two
} + {currentStep === 2 &&
Step Content Three
} + {currentStep === 3 &&
Step Content Four
} + {currentStep === 4 &&
Steps Completed
} + + + + + + + + + + ); +} +``` + +## Breakpoint Layout + +For responsive layouts, the `breakpoint` prop used along with `breakpointLayout` hides certain elements of the `Stepper` at a specified screen width. `breakpoint` takes a number for the screen width max and `breakpointLayout` hides either labels or shows just the summary view. By default, step labels will display if no responsive props are used. + +#### Breakpoint - Show Labels + +```typescript +import React from 'react'; +import { + StepperLayout, + Container, + Stepper, + Step, + Button, + ButtonGroup, +} from 'react-magma-dom'; + +export function Example() { + const [currentStep, setCurrentStep] = React.useState(0); + + const handleOnNext = () => { + if (currentStep !== 4) { + setCurrentStep(currentStep + 1); + } + }; + const handleOnPrevious = () => { + if (currentStep !== 0) { + setCurrentStep(currentStep - 1); + } + }; + const handleFinish = () => { + if (currentStep === 4) { + setCurrentStep(0); + } + }; + + return ( + <> + + + + + + + + + {currentStep === 0 &&
Step Content One
} + {currentStep === 1 &&
Step Content Two
} + {currentStep === 2 &&
Step Content Three
} + {currentStep === 3 &&
Step Content Four
} + {currentStep === 4 &&
Steps Completed
} + + + + + + + + + + ); +} +``` + +#### Breakpoint - Hide Labels + +```typescript +import React from 'react'; +import { + StepperLayout, + Container, + Stepper, + Step, + Button, + ButtonGroup, +} from 'react-magma-dom'; + +export function Example() { + const [currentStep, setCurrentStep] = React.useState(0); + + const handleOnNext = () => { + if (currentStep !== 4) { + setCurrentStep(currentStep + 1); + } + }; + const handleOnPrevious = () => { + if (currentStep !== 0) { + setCurrentStep(currentStep - 1); + } + }; + const handleFinish = () => { + if (currentStep === 4) { + setCurrentStep(0); + } + }; + + return ( + <> + + + + + + + + + {currentStep === 0 &&
Step Content One
} + {currentStep === 1 &&
Step Content Two
} + {currentStep === 2 &&
Step Content Three
} + {currentStep === 3 &&
Step Content Four
} + {currentStep === 4 &&
Steps Completed
} + + + + + + + + + + ); +} +``` + +#### Breakpoint - Summary View + +```typescript +import React from 'react'; +import { + StepperLayout, + Container, + Stepper, + Step, + Button, + ButtonGroup, +} from 'react-magma-dom'; + +export function Example() { + const [currentStep, setCurrentStep] = React.useState(0); + + const handleOnNext = () => { + if (currentStep !== 4) { + setCurrentStep(currentStep + 1); + } + }; + const handleOnPrevious = () => { + if (currentStep !== 0) { + setCurrentStep(currentStep - 1); + } + }; + const handleFinish = () => { + if (currentStep === 4) { + setCurrentStep(0); + } + }; + + return ( + <> + + + + + + + + + {currentStep === 0 &&
Step Content One
} + {currentStep === 1 &&
Step Content Two
} + {currentStep === 2 &&
Step Content Three
} + {currentStep === 3 &&
Step Content Four
} + {currentStep === 4 &&
Steps Completed
} + + + + + + + + + + ); +} +``` + +## Error State + +When a `Step` is in the error state, use `hasError` on the `Step` to change the styling. + +```typescript +import React from 'react'; +import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom'; + +export function Example() { + const [currentStep, setCurrentStep] = React.useState(0); + + return ( + <> + + + + + + + + +
Step Content Three
{' '} + + + + + + + + + + ); +} +``` + +## Inverse + +```typescript +import React from 'react'; +import { Container, Stepper, Step, Button, ButtonGroup } from 'react-magma-dom'; + +export function Example() { + const [currentStep, setCurrentStep] = React.useState(0); + + const handleOnNext = () => { + if (currentStep !== 4) { + setCurrentStep(currentStep + 1); + } + }; + const handleOnPrevious = () => { + if (currentStep !== 0) { + setCurrentStep(currentStep - 1); + } + }; + const handleFinish = () => { + if (currentStep === 4) { + setCurrentStep(0); + } + }; + + return ( + + + + + + + + + + {currentStep === 0 &&
Step Content One
} + {currentStep === 1 &&
Step Content Two
} + {currentStep === 2 &&
Step Content Three
} + {currentStep === 3 &&
Step Content Four
} + {currentStep === 4 &&
Steps Completed
} + + + + + + + + + + ); +} +``` + +## Step Props + +**Any other props supplied will be provided to the wrapping `div` element.** + + + +## Stepper Props + +**Any other props supplied will be provided to the wrapping `div` element.** + + + + diff --git a/website/react-magma-docs/src/pages/api/toast.mdx b/website/react-magma-docs/src/pages/api/toast.mdx index 4797b0dc3..f8f0e74d5 100644 --- a/website/react-magma-docs/src/pages/api/toast.mdx +++ b/website/react-magma-docs/src/pages/api/toast.mdx @@ -13,9 +13,13 @@ import { LeadParagraph } from '../../components/LeadParagraph'; Toast components use the Alert component{' '} internally for its content and styles. Any props that can be passed to an - Alert can be passed to a Toast component. Note that Toast messages can only be 1 or 2 lines long. + Alert can be passed to a Toast component. + + Toast messages can only be 1 or 2 lines long and have a max-width of 600px. If your message is longer than that, please shorten it or use a different component. + + ## Basic Usage **Toasts are used to display non-critical information to users.** For critical messages, designers should consider a different way of presenting the information, such as using the Alert component within the context of the UI. diff --git a/website/react-magma-docs/src/pages/design/stepper.mdx b/website/react-magma-docs/src/pages/design/stepper.mdx new file mode 100644 index 000000000..3e5c15b6f --- /dev/null +++ b/website/react-magma-docs/src/pages/design/stepper.mdx @@ -0,0 +1,299 @@ +--- +pageTitle: Stepper Design Guidelines +title: Stepper +order: 1 +--- + +import './design-guidelines-styles.css'; +import { LeadParagraph } from '../../components/LeadParagraph'; + + + + + A stepper keeps users updated on their progression through a series of steps. + + +## Overview + +Steppers aid in guiding a user's expectations while navigating through a multistep process. They indicate the current step, the total number of steps, and the overall progress towards task completion. + +
+ +
+ +### When to use + +- When the user is working through a linear process that can be organized into three or more steps. +- When the user could benefit from understanding their progress on long forms such as eCommerce checkouts, or course creation. +- When user inputs need to be validated before moving on to the next step. + +### When not to use + +- When a process or form has fewer than three steps. +- When the process can be completed in any sequence. +- When the quantity of steps can vary depending on conditional logic. + +--- + +## Formatting + +### Anatomy + +
+
+
+
+ +
+
+
+
+
+
+ + +1. **Status indicator:** Communicates if a step is completed, current, not started, disabled or has an error. + +1. **Primary label:** Communicates what the user will accomplish in each step. Numbering each step also makes the progression more obvious. + +1. **Secondary label (optional):** Provides space for additional important details or helper text. + +### Label Layouts + +#### Standard Labels + +The default placement of the labels is under each status indicator on the line. This layout benefits from short labels, especially as the number of steps increases. + +
+ +
+ +#### No Labels + +If the nature of the labels would simply be too much text to reasonably fit, then it is acceptable to hide the labels on the stepper component. However, this means having clear titles within the content of the step itself is extremely important. It can be helpful to change to this layout on small screens. + +
+ +
+ +#### Summary View + +The step summary layout shows the primary and secondary labels, but only for the step you are currently on. It also tells you what number step you are on, and how many steps there are in total. This layout can be a nice middle-point between showing all labels and not showing labels at all, and you can use it on large or small screens. + +
+ +
+ +### Placement + +The stepper component can be placed on a full page, in a modal, or in a side panel. + +
+ +
+ +
+ +
+ +
+ +
+ +--- + +## Content + +### Main Elements + +#### Label + +The label should succinctly convey the user's objectives for each step in one or two words. One option is to clearly indicate the action of the step by using the {verb} + {noun} content formula. For example, “Choose date” or “Configure settings.” A label may use one word if it is universally understood, such as “Cart,” “Shipping,” or “Payment.” Avoid vague terms like “Processing.” You may also number each step to make the progression more obvious. + +
+
+
+
+ +
+
+
+
+
+
+ +#### Secondary Label + +Secondary labels are optional and should be used if some additional description or helper text is beneficial. + +
+
+
+
+ +
+
+
+
+
+
+ +### Overflow Content + +#### Label and Secondary Label + +When there isn’t enough space, the labels will wrap to as many lines as necessary. The space available for a label is impacted by the number of steps in the process and the size of the area the stepper is in. If you don’t want the label to wrap, consider rewording the label or use the “summary view” layout. + +
+
+
+
+ +
+
+
+
+
+
+ +--- + +## Behaviors + +### States + +Each step within the stepper has four states: completed, active, incomplete, and error. + +#### Completed + +A step is complete when a user has filled out the required information within a step and progressed to the following step. When possible, use validation to confirm that a step has been completed before the user continues. All steps that have been completed are indicated by an outlined circle with a checkmark and a blue active line. + +
+
+
+
+ +
+
+
+
+
+
+ +#### Active + +A step is current when a user is interacting with the information within that step. The current step the user is on is indicated by a half-filled circle and a blue active line. + +
+
+
+
+ +
+
+
+
+
+
+ +#### Incomplete + +A step is not started when a user has not yet interacted with that step. Steps the user has not encountered yet, or future steps, are indicated by an outlined circle and a gray active line. + +
+
+
+
+ +
+
+
+
+
+
+ +#### Error + +A step may be in error when a user has entered invalid or incomplete information. There could also be a server-side error. Provide clear information about the error and guidance on how to resolve the issue. + +
+
+
+
+ +
+
+
+
+
+
+ +### Interactions + +Currently, the stepper is not interactive, providing only a visual update of the users’ progress. This type of functionality may be added in the future. As a result, the navigation from step to step must be handled within the content of the step and it is up to the consumer to decide what is best for their application. + +A common example includes buttons labeled as “Next” and “Back”, and often ending with a button labeled “Finish.” But the labels themselves need to make sense for the process being completed, so there isn’t any mandated language to use. You can also choose to not include a “Back” button if you don’t want the user to go back to previous steps. Whatever you do, we suggest conducting usability tests to ensure you have created the best experience possible. + +
+ +
+ +### Validation + +When possible, use validation to confirm that a step has been completed before the user continues. If any entry is invalid, the stepper should show an error state. Additionally, the invalid entry should be marked with an error state and include an inline error message that helps the user understand the problem and how to fix it. + +If the user cannot proceed due to a server-side issue, then an inline alert should appear. + +
+ +
+ +### Responsive Behavior + +The variable nature of the stepper makes it difficult to mandate just one set of changes or behaviors for small screens. For this reason we allow the consumer to not only pick the break point, but also three choices for what happens to the stepper as the screen gets smaller, or the user zooms in enough to trigger it. + +#### Standard Labels + +If you don’t have very many steps and the labels are short, it is very possible for this format to work even on small screens. + +
+
+ +
+
+ +#### Hide Labels + +Hiding the labels on small screens is acceptable, but only if you are using very clear titles to make up for their absence. + +
+
+ +
+
+ +#### Step Summary + +This may be the most common format for small screens or zooming in. You only display the specific information necessary at that moment, but you aren’t losing the context of what number step you are on, and how many are left. + +
+
+ +
+
+ +--- + +## Accessibility + +- W3C Web Accessibility Tutorial for Multi-Page Forms provides examples of how to create accessible progress indicators. + +**WCAG requirements:** + +- Info and Relationships (WCAG Success Criteria 1.3.1) +- Meaningful Sequence (WCAG Success Criteria 1.3.2) +- Headings and Labels (WCAG Success Criteria 2.4.6) +- Name, Role, Value (WCAG Success Criteria 4.1.2) + + +