diff --git a/jest.config.js b/jest.config.js index 08a6193a4..1b2762837 100644 --- a/jest.config.js +++ b/jest.config.js @@ -11,7 +11,7 @@ module.exports = { "/src/__mocks__/fileMock.js", "\\.(css|less)$": "identity-obj-proxy", }, - moduleDirectories: ["node_modules", "."], + moduleDirectories: ["node_modules", ""], setupFilesAfterEnv: ["jest-canvas-mock", "@testing-library/jest-dom"], reporters: ["default", ["jest-junit", { outputName: "junit.xml" }]], }; diff --git a/package-lock.json b/package-lock.json index f6a97b9d5..14497b2c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,8 @@ "version": "2.3.0-canary.6", "license": "ISC", "dependencies": { + "@floating-ui/dom": "^1.5.4", + "@floating-ui/react": "^0.26.6", "immer": "^10.0.2", "react-slider": "^2.0.6", "react-zoom-pan-pinch": "^3.3.0" @@ -22,10 +24,10 @@ "@dnd-kit/sortable": "^7.0.2", "@lifesg/react-icons": "^1.4.0", "@react-theming/storybook-addon": "^1.1.10", - "@rollup/plugin-commonjs": "^21.0.2", - "@rollup/plugin-image": "^2.1.1", - "@rollup/plugin-json": "^4.1.0", - "@rollup/plugin-node-resolve": "^13.1.3", + "@rollup/plugin-commonjs": "^25.0.7", + "@rollup/plugin-image": "^3.0.3", + "@rollup/plugin-json": "^6.1.0", + "@rollup/plugin-node-resolve": "^15.2.3", "@storybook/addon-a11y": "^7.4.6", "@storybook/addon-actions": "^7.4.6", "@storybook/addon-essentials": "^7.4.6", @@ -78,14 +80,14 @@ "react-intersection-observer": "^9.5.2", "react-resize-detector": "^7.0.0", "react-responsive": "^9.0.0-beta.10", - "react-spring": "^9.7.3", + "react-spring": "~9.7.3", "remark-gfm": "^3.0.1", - "rollup": "^2.70.1", + "rollup": "^3.29.4", "rollup-plugin-generate-package-json": "^3.2.0", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-terser": "^7.0.2", - "rollup-plugin-typescript2": "^0.31.2", + "rollup-plugin-typescript2": "^0.36.0", "storybook": "^7.4.6", "style-loader": "^2.0.0", "styled-components": "^5.3.5", @@ -2671,31 +2673,42 @@ "dev": true }, "node_modules/@floating-ui/core": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz", - "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==", - "dev": true, + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz", + "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==", "dependencies": { - "@floating-ui/utils": "^0.1.3" + "@floating-ui/utils": "^0.2.0" } }, "node_modules/@floating-ui/dom": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", - "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", - "dev": true, + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz", + "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==", + "dependencies": { + "@floating-ui/core": "^1.5.3", + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.26.6", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.6.tgz", + "integrity": "sha512-FFDAuSlRwb8CY4/VvYio/wwk/0339B257yRpKwNOjcHWNYL/fgjl1KUvT3K6ZZ4WDbBWYc7Km4ITMuPZrS8omg==", "dependencies": { - "@floating-ui/core": "^1.4.2", - "@floating-ui/utils": "^0.1.3" + "@floating-ui/react-dom": "^2.0.6", + "@floating-ui/utils": "^0.2.1", + "tabbable": "^6.0.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" } }, "node_modules/@floating-ui/react-dom": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz", - "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==", - "dev": true, + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.6.tgz", + "integrity": "sha512-IB8aCRFxr8nFkdYZgH+Otd9EVQPJoynxeFRGTB8voPoZMRWo8XjYuCRgpI1btvuKY69XMiLnW+ym7zoBHM90Rw==", "dependencies": { - "@floating-ui/dom": "^1.5.1" + "@floating-ui/dom": "^1.5.4" }, "peerDependencies": { "react": ">=16.8.0", @@ -2703,10 +2716,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", - "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==", - "dev": true + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, "node_modules/@focus-reactive/react-yaml": { "version": "1.1.2", @@ -5390,97 +5402,158 @@ } }, "node_modules/@rollup/plugin-commonjs": { - "version": "21.1.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-21.1.0.tgz", - "integrity": "sha512-6ZtHx3VHIp2ReNNDxHjuUml6ur+WcQ28N1yHgCQwsbNkQg2suhxGMDQGJOn/KuDxKtd1xuZP5xSTwBA4GQ8hbA==", + "version": "25.0.7", + "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.7.tgz", + "integrity": "sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==", "dev": true, "dependencies": { - "@rollup/pluginutils": "^3.1.0", + "@rollup/pluginutils": "^5.0.1", "commondir": "^1.0.1", - "estree-walker": "^2.0.1", - "glob": "^7.1.6", - "is-reference": "^1.2.1", - "magic-string": "^0.25.7", - "resolve": "^1.17.0" + "estree-walker": "^2.0.2", + "glob": "^8.0.3", + "is-reference": "1.2.1", + "magic-string": "^0.30.3" }, "engines": { - "node": ">= 8.0.0" + "node": ">=14.0.0" }, "peerDependencies": { - "rollup": "^2.38.3" + "rollup": "^2.68.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/plugin-commonjs/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/@rollup/plugin-commonjs/node_modules/glob": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", + "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^5.0.1", + "once": "^1.3.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/@rollup/plugin-commonjs/node_modules/minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=10" } }, "node_modules/@rollup/plugin-image": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@rollup/plugin-image/-/plugin-image-2.1.1.tgz", - "integrity": "sha512-AgP4U85zuQJdUopLUCM+hTf45RepgXeTb8EJsleExVy99dIoYpt3ZlDYJdKmAc2KLkNntCDg6BPJvgJU3uGF+g==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@rollup/plugin-image/-/plugin-image-3.0.3.tgz", + "integrity": "sha512-qXWQwsXpvD4trSb8PeFPFajp8JLpRtqqOeNYRUKnEQNHm7e5UP7fuSRcbjQAJ7wDZBbnJvSdY5ujNBQd9B1iFg==", "dev": true, "dependencies": { - "@rollup/pluginutils": "^3.1.0", - "mini-svg-data-uri": "^1.2.3" + "@rollup/pluginutils": "^5.0.1", + "mini-svg-data-uri": "^1.4.4" }, "engines": { - "node": ">= 8.0.0" + "node": ">=14.0.0" }, "peerDependencies": { - "rollup": "^1.20.0 || ^2.0.0" + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } } }, "node_modules/@rollup/plugin-json": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz", - "integrity": "sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz", + "integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==", "dev": true, "dependencies": { - "@rollup/pluginutils": "^3.0.8" + "@rollup/pluginutils": "^5.1.0" + }, + "engines": { + "node": ">=14.0.0" }, "peerDependencies": { - "rollup": "^1.20.0 || ^2.0.0" + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } } }, "node_modules/@rollup/plugin-node-resolve": { - "version": "13.3.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.3.0.tgz", - "integrity": "sha512-Lus8rbUo1eEcnS4yTFKLZrVumLPY+YayBdWXgFSHYhTT2iJbMhoaaBL3xl5NCdeRytErGr8tZ0L71BMRmnlwSw==", + "version": "15.2.3", + "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz", + "integrity": "sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==", "dev": true, "dependencies": { - "@rollup/pluginutils": "^3.1.0", - "@types/resolve": "1.17.1", + "@rollup/pluginutils": "^5.0.1", + "@types/resolve": "1.20.2", "deepmerge": "^4.2.2", - "is-builtin-module": "^3.1.0", + "is-builtin-module": "^3.2.1", "is-module": "^1.0.0", - "resolve": "^1.19.0" + "resolve": "^1.22.1" }, "engines": { - "node": ">= 10.0.0" + "node": ">=14.0.0" }, "peerDependencies": { - "rollup": "^2.42.0" + "rollup": "^2.78.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } } }, "node_modules/@rollup/pluginutils": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", - "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", + "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==", "dev": true, "dependencies": { - "@types/estree": "0.0.39", - "estree-walker": "^1.0.1", - "picomatch": "^2.2.2" + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" }, "engines": { - "node": ">= 8.0.0" + "node": ">=14.0.0" }, "peerDependencies": { - "rollup": "^1.20.0||^2.0.0" + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } } }, - "node_modules/@rollup/pluginutils/node_modules/estree-walker": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz", - "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==", - "dev": true - }, "node_modules/@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", @@ -9870,9 +9943,9 @@ } }, "node_modules/@types/estree": { - "version": "0.0.39", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", - "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "dev": true }, "node_modules/@types/estree-jsx": { @@ -10150,13 +10223,10 @@ } }, "node_modules/@types/resolve": { - "version": "1.17.1", - "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", - "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==", - "dev": true, - "dependencies": { - "@types/node": "*" - } + "version": "1.20.2", + "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", + "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==", + "dev": true }, "node_modules/@types/scheduler": { "version": "0.16.3", @@ -10706,17 +10776,6 @@ "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", "dev": true }, - "node_modules/@yarn-tool/resolve-package": { - "version": "1.0.47", - "resolved": "https://registry.npmjs.org/@yarn-tool/resolve-package/-/resolve-package-1.0.47.tgz", - "integrity": "sha512-Zaw58gQxjQceJqhqybJi1oUDaORT8i2GTgwICPs8v/X/Pkx35FXQba69ldHVg5pQZ6YLKpROXgyHvBaCJOFXiA==", - "dev": true, - "dependencies": { - "pkg-dir": "< 6 >= 5", - "tslib": "^2", - "upath2": "^3.1.13" - } - }, "node_modules/@yarnpkg/esbuild-plugin-pnp": { "version": "3.0.0-rc.15", "resolved": "https://registry.npmjs.org/@yarnpkg/esbuild-plugin-pnp/-/esbuild-plugin-pnp-3.0.0-rc.15.tgz", @@ -21256,12 +21315,15 @@ } }, "node_modules/magic-string": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", - "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==", + "version": "0.30.5", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", + "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==", "dev": true, "dependencies": { - "sourcemap-codec": "^1.4.8" + "@jridgewell/sourcemap-codec": "^1.4.15" + }, + "engines": { + "node": ">=12" } }, "node_modules/make-dir": { @@ -23022,12 +23084,6 @@ "vfile-message": "^3.0.0" } }, - "node_modules/micromark-util-events-to-acorn/node_modules/@types/estree": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz", - "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==", - "dev": true - }, "node_modules/micromark-util-events-to-acorn/node_modules/vfile-location": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-4.1.0.tgz", @@ -24072,15 +24128,6 @@ "node": ">=0.10.0" } }, - "node_modules/path-is-network-drive": { - "version": "1.0.20", - "resolved": "https://registry.npmjs.org/path-is-network-drive/-/path-is-network-drive-1.0.20.tgz", - "integrity": "sha512-p5wCWlRB4+ggzxWshqHH9aF3kAuVu295NaENXmVhThbZPJQBeJdxZTP6CIoUR+kWHDUW56S9YcaO1gXnc/BOxw==", - "dev": true, - "dependencies": { - "tslib": "^2" - } - }, "node_modules/path-key": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", @@ -24121,15 +24168,6 @@ "node": "14 || >=16.14" } }, - "node_modules/path-strip-sep": { - "version": "1.0.17", - "resolved": "https://registry.npmjs.org/path-strip-sep/-/path-strip-sep-1.0.17.tgz", - "integrity": "sha512-+2zIC2fNgdilgV7pTrktY6oOxxZUo9x5zJYfTzxsGze5kSGDDwhA5/0WlBn+sUyv/WuuyYn3OfM+Ue5nhdQUgA==", - "dev": true, - "dependencies": { - "tslib": "^2" - } - }, "node_modules/path-to-regexp": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", @@ -25448,7 +25486,6 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -25552,7 +25589,6 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -26344,15 +26380,16 @@ } }, "node_modules/rollup": { - "version": "2.79.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", - "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", + "version": "3.29.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", + "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", "dev": true, "bin": { "rollup": "dist/bin/rollup" }, "engines": { - "node": ">=10.0.0" + "node": ">=14.18.0", + "npm": ">=8.0.0" }, "optionalDependencies": { "fsevents": "~2.3.2" @@ -26526,17 +26563,16 @@ } }, "node_modules/rollup-plugin-typescript2": { - "version": "0.31.2", - "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.31.2.tgz", - "integrity": "sha512-hRwEYR1C8xDGVVMFJQdEVnNAeWRvpaY97g5mp3IeLnzhNXzSVq78Ye/BJ9PAaUfN4DXa/uDnqerifMOaMFY54Q==", + "version": "0.36.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.36.0.tgz", + "integrity": "sha512-NB2CSQDxSe9+Oe2ahZbf+B4bh7pHwjV5L+RSYpCu7Q5ROuN94F9b6ioWwKfz3ueL3KTtmX4o2MUH2cgHDIEUsw==", "dev": true, "dependencies": { "@rollup/pluginutils": "^4.1.2", - "@yarn-tool/resolve-package": "^1.0.40", "find-cache-dir": "^3.3.2", "fs-extra": "^10.0.0", - "resolve": "^1.20.0", - "tslib": "^2.3.1" + "semver": "^7.5.4", + "tslib": "^2.6.2" }, "peerDependencies": { "rollup": ">=1.26.3", @@ -26570,6 +26606,39 @@ "node": ">=12" } }, + "node_modules/rollup-plugin-typescript2/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/rollup-plugin-typescript2/node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/rollup-plugin-typescript2/node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "node_modules/rollup-pluginutils": { "version": "2.8.2", "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", @@ -26691,7 +26760,6 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -27028,13 +27096,6 @@ "source-map": "^0.6.0" } }, - "node_modules/sourcemap-codec": { - "version": "1.4.8", - "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", - "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", - "deprecated": "Please use @jridgewell/sourcemap-codec instead", - "dev": true - }, "node_modules/space-separated-tokens": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz", @@ -27634,6 +27695,11 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", @@ -28091,9 +28157,9 @@ } }, "node_modules/tslib": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", - "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==", + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", "dev": true }, "node_modules/tsutils": { @@ -28439,18 +28505,6 @@ "node": ">=8" } }, - "node_modules/upath2": { - "version": "3.1.19", - "resolved": "https://registry.npmjs.org/upath2/-/upath2-3.1.19.tgz", - "integrity": "sha512-d23dQLi8nDWSRTIQwXtaYqMrHuca0As53fNiTLLFDmsGBbepsZepISaB2H1x45bDFN/n3Qw9bydvyZEacTrEWQ==", - "dev": true, - "dependencies": { - "@types/node": "*", - "path-is-network-drive": "^1.0.20", - "path-strip-sep": "^1.0.17", - "tslib": "^2" - } - }, "node_modules/update-browserslist-db": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", @@ -28968,12 +29022,6 @@ "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==", "dev": true }, - "node_modules/webpack/node_modules/@types/estree": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz", - "integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==", - "dev": true - }, "node_modules/webpack/node_modules/acorn": { "version": "8.10.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", @@ -29768,7 +29816,8 @@ "version": "7.21.0-placeholder-for-preset-env.2", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", - "dev": true + "dev": true, + "requires": {} }, "@babel/plugin-syntax-async-generators": { "version": "7.8.4", @@ -31183,7 +31232,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", - "dev": true + "dev": true, + "requires": {} }, "@esbuild/darwin-arm64": { "version": "0.18.20", @@ -31248,38 +31298,44 @@ "dev": true }, "@floating-ui/core": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz", - "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==", - "dev": true, + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz", + "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==", "requires": { - "@floating-ui/utils": "^0.1.3" + "@floating-ui/utils": "^0.2.0" } }, "@floating-ui/dom": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", - "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", - "dev": true, + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz", + "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==", "requires": { - "@floating-ui/core": "^1.4.2", - "@floating-ui/utils": "^0.1.3" + "@floating-ui/core": "^1.5.3", + "@floating-ui/utils": "^0.2.0" + } + }, + "@floating-ui/react": { + "version": "0.26.6", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.6.tgz", + "integrity": "sha512-FFDAuSlRwb8CY4/VvYio/wwk/0339B257yRpKwNOjcHWNYL/fgjl1KUvT3K6ZZ4WDbBWYc7Km4ITMuPZrS8omg==", + "requires": { + "@floating-ui/react-dom": "^2.0.6", + "@floating-ui/utils": "^0.2.1", + "tabbable": "^6.0.1" } }, "@floating-ui/react-dom": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz", - "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==", - "dev": true, + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.6.tgz", + "integrity": "sha512-IB8aCRFxr8nFkdYZgH+Otd9EVQPJoynxeFRGTB8voPoZMRWo8XjYuCRgpI1btvuKY69XMiLnW+ym7zoBHM90Rw==", "requires": { - "@floating-ui/dom": "^1.5.1" + "@floating-ui/dom": "^1.5.4" } }, "@floating-ui/utils": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", - "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==", - "dev": true + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, "@focus-reactive/react-yaml": { "version": "1.1.2", @@ -31327,7 +31383,8 @@ "version": "0.2.4", "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", - "dev": true + "dev": true, + "requires": {} }, "@isaacs/cliui": { "version": "8.0.2", @@ -32542,7 +32599,8 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/@lifesg/react-icons/-/react-icons-1.4.0.tgz", "integrity": "sha512-+qFLA+8LeDfC1OBNgdB+8JiSJ5ZtQDUaOCcaXPv0kzeDxHfuibAW9ijkzPgo22WPtQgwW3YY10TTxqtxXC2+Sw==", - "dev": true + "dev": true, + "requires": {} }, "@mdx-js/react": { "version": "2.3.0", @@ -32999,7 +33057,8 @@ "version": "0.1.3", "resolved": "https://registry.npmjs.org/@reach/component-component/-/component-component-0.1.3.tgz", "integrity": "sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg==", - "dev": true + "dev": true, + "requires": {} }, "@reach/observe-rect": { "version": "1.2.0", @@ -33161,73 +33220,98 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/@react-theming/theme-swatch/-/theme-swatch-1.0.0.tgz", "integrity": "sha512-tOzDTUbFB5uQLMVHJ4fXWYZ4i7JIKjyrS7SlHDoscRZqM69lmT+s9fSZoD1/InTdX0M7Jh8thXF0SzeoxnD1/Q==", - "dev": true + "dev": true, + "requires": {} }, "@rollup/plugin-commonjs": { - "version": "21.1.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-21.1.0.tgz", - "integrity": "sha512-6ZtHx3VHIp2ReNNDxHjuUml6ur+WcQ28N1yHgCQwsbNkQg2suhxGMDQGJOn/KuDxKtd1xuZP5xSTwBA4GQ8hbA==", + "version": "25.0.7", + "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.7.tgz", + "integrity": "sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==", "dev": true, "requires": { - "@rollup/pluginutils": "^3.1.0", + "@rollup/pluginutils": "^5.0.1", "commondir": "^1.0.1", - "estree-walker": "^2.0.1", - "glob": "^7.1.6", - "is-reference": "^1.2.1", - "magic-string": "^0.25.7", - "resolve": "^1.17.0" + "estree-walker": "^2.0.2", + "glob": "^8.0.3", + "is-reference": "1.2.1", + "magic-string": "^0.30.3" + }, + "dependencies": { + "brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "requires": { + "balanced-match": "^1.0.0" + } + }, + "glob": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", + "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", + "dev": true, + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^5.0.1", + "once": "^1.3.0" + } + }, + "minimatch": { + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", + "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", + "dev": true, + "requires": { + "brace-expansion": "^2.0.1" + } + } } }, "@rollup/plugin-image": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@rollup/plugin-image/-/plugin-image-2.1.1.tgz", - "integrity": "sha512-AgP4U85zuQJdUopLUCM+hTf45RepgXeTb8EJsleExVy99dIoYpt3ZlDYJdKmAc2KLkNntCDg6BPJvgJU3uGF+g==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@rollup/plugin-image/-/plugin-image-3.0.3.tgz", + "integrity": "sha512-qXWQwsXpvD4trSb8PeFPFajp8JLpRtqqOeNYRUKnEQNHm7e5UP7fuSRcbjQAJ7wDZBbnJvSdY5ujNBQd9B1iFg==", "dev": true, "requires": { - "@rollup/pluginutils": "^3.1.0", - "mini-svg-data-uri": "^1.2.3" + "@rollup/pluginutils": "^5.0.1", + "mini-svg-data-uri": "^1.4.4" } }, "@rollup/plugin-json": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz", - "integrity": "sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz", + "integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==", "dev": true, "requires": { - "@rollup/pluginutils": "^3.0.8" + "@rollup/pluginutils": "^5.1.0" } }, "@rollup/plugin-node-resolve": { - "version": "13.3.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.3.0.tgz", - "integrity": "sha512-Lus8rbUo1eEcnS4yTFKLZrVumLPY+YayBdWXgFSHYhTT2iJbMhoaaBL3xl5NCdeRytErGr8tZ0L71BMRmnlwSw==", + "version": "15.2.3", + "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz", + "integrity": "sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==", "dev": true, "requires": { - "@rollup/pluginutils": "^3.1.0", - "@types/resolve": "1.17.1", + "@rollup/pluginutils": "^5.0.1", + "@types/resolve": "1.20.2", "deepmerge": "^4.2.2", - "is-builtin-module": "^3.1.0", + "is-builtin-module": "^3.2.1", "is-module": "^1.0.0", - "resolve": "^1.19.0" + "resolve": "^1.22.1" } }, "@rollup/pluginutils": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", - "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", + "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==", "dev": true, "requires": { - "@types/estree": "0.0.39", - "estree-walker": "^1.0.1", - "picomatch": "^2.2.2" - }, - "dependencies": { - "estree-walker": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz", - "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==", - "dev": true - } + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" } }, "@sinclair/typebox": { @@ -34562,7 +34646,8 @@ "version": "3.3.3", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz", "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==", - "dev": true + "dev": true, + "requires": {} }, "telejson": { "version": "7.2.0", @@ -35695,7 +35780,8 @@ "version": "7.4.6", "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.4.6.tgz", "integrity": "sha512-DSq8l9FDocUF1ooVI+TF83pddj1LynE/Hv0/y8XZhc3IgJ/HkuOQuUmfz29ezgfAi9gFYUR8raTIBi3/xdoRmw==", - "dev": true + "dev": true, + "requires": {} }, "@storybook/react-webpack5": { "version": "7.4.6", @@ -36233,7 +36319,8 @@ "version": "14.5.1", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.1.tgz", "integrity": "sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==", - "dev": true + "dev": true, + "requires": {} }, "@tootallnate/once": { "version": "1.1.2", @@ -36391,9 +36478,9 @@ } }, "@types/estree": { - "version": "0.0.39", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", - "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "dev": true }, "@types/estree-jsx": { @@ -36670,13 +36757,10 @@ } }, "@types/resolve": { - "version": "1.17.1", - "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", - "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==", - "dev": true, - "requires": { - "@types/node": "*" - } + "version": "1.20.2", + "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", + "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==", + "dev": true }, "@types/scheduler": { "version": "0.16.3", @@ -37112,17 +37196,6 @@ "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==", "dev": true }, - "@yarn-tool/resolve-package": { - "version": "1.0.47", - "resolved": "https://registry.npmjs.org/@yarn-tool/resolve-package/-/resolve-package-1.0.47.tgz", - "integrity": "sha512-Zaw58gQxjQceJqhqybJi1oUDaORT8i2GTgwICPs8v/X/Pkx35FXQba69ldHVg5pQZ6YLKpROXgyHvBaCJOFXiA==", - "dev": true, - "requires": { - "pkg-dir": "< 6 >= 5", - "tslib": "^2", - "upath2": "^3.1.13" - } - }, "@yarnpkg/esbuild-plugin-pnp": { "version": "3.0.0-rc.15", "resolved": "https://registry.npmjs.org/@yarnpkg/esbuild-plugin-pnp/-/esbuild-plugin-pnp-3.0.0-rc.15.tgz", @@ -37210,7 +37283,8 @@ "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true + "dev": true, + "requires": {} }, "acorn-walk": { "version": "7.2.0", @@ -37288,7 +37362,8 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true + "dev": true, + "requires": {} }, "ansi-escapes": { "version": "4.3.2", @@ -37518,7 +37593,8 @@ "version": "7.0.0-bridge.0", "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz", "integrity": "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==", - "dev": true + "dev": true, + "requires": {} }, "babel-jest": { "version": "27.5.1", @@ -38838,7 +38914,8 @@ "version": "6.4.0", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz", "integrity": "sha512-jDfsatwWMWN0MODAFuHszfjphEXfNw9JUAhmY4pLu3TyTU+ohUpsbVtbU+1MZn4a47D9kqh03i4eyOm+74+zew==", - "dev": true + "dev": true, + "requires": {} }, "css-loader": { "version": "5.2.7", @@ -39017,7 +39094,8 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz", "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==", - "dev": true + "dev": true, + "requires": {} }, "csso": { "version": "4.2.0", @@ -39901,7 +39979,8 @@ "version": "8.8.0", "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz", "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==", - "dev": true + "dev": true, + "requires": {} }, "eslint-mdx": { "version": "2.0.5", @@ -41610,7 +41689,8 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "dev": true + "dev": true, + "requires": {} }, "identity-obj-proxy": { "version": "3.0.0", @@ -43445,7 +43525,8 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz", "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==", - "dev": true + "dev": true, + "requires": {} }, "jest-regex-util": { "version": "29.6.3", @@ -44621,7 +44702,8 @@ "version": "7.5.9", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz", "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", - "dev": true + "dev": true, + "requires": {} } } }, @@ -45069,12 +45151,12 @@ "dev": true }, "magic-string": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", - "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==", + "version": "0.30.5", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", + "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==", "dev": true, "requires": { - "sourcemap-codec": "^1.4.8" + "@jridgewell/sourcemap-codec": "^1.4.15" } }, "make-dir": { @@ -45120,7 +45202,8 @@ "version": "7.3.2", "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.3.2.tgz", "integrity": "sha512-B+28F5ucp83aQm+OxNrPkS8z0tMKaeHiy0lHJs3LqCyDQFtWuenaIrkaVTgAm1pf1AU85LXltva86hlaT17i8Q==", - "dev": true + "dev": true, + "requires": {} }, "matchmediaquery": { "version": "0.3.1", @@ -46327,12 +46410,6 @@ "vfile-message": "^3.0.0" }, "dependencies": { - "@types/estree": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz", - "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==", - "dev": true - }, "vfile-location": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-4.1.0.tgz", @@ -47075,15 +47152,6 @@ "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", "dev": true }, - "path-is-network-drive": { - "version": "1.0.20", - "resolved": "https://registry.npmjs.org/path-is-network-drive/-/path-is-network-drive-1.0.20.tgz", - "integrity": "sha512-p5wCWlRB4+ggzxWshqHH9aF3kAuVu295NaENXmVhThbZPJQBeJdxZTP6CIoUR+kWHDUW56S9YcaO1gXnc/BOxw==", - "dev": true, - "requires": { - "tslib": "^2" - } - }, "path-key": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", @@ -47114,15 +47182,6 @@ } } }, - "path-strip-sep": { - "version": "1.0.17", - "resolved": "https://registry.npmjs.org/path-strip-sep/-/path-strip-sep-1.0.17.tgz", - "integrity": "sha512-+2zIC2fNgdilgV7pTrktY6oOxxZUo9x5zJYfTzxsGze5kSGDDwhA5/0WlBn+sUyv/WuuyYn3OfM+Ue5nhdQUgA==", - "dev": true, - "requires": { - "tslib": "^2" - } - }, "path-to-regexp": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", @@ -47252,25 +47311,29 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz", "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==", - "dev": true + "dev": true, + "requires": {} }, "postcss-discard-duplicates": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz", "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==", - "dev": true + "dev": true, + "requires": {} }, "postcss-discard-empty": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz", "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==", - "dev": true + "dev": true, + "requires": {} }, "postcss-discard-overridden": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz", "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==", - "dev": true + "dev": true, + "requires": {} }, "postcss-import": { "version": "12.0.1", @@ -47423,7 +47486,8 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "dev": true + "dev": true, + "requires": {} }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -47458,7 +47522,8 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz", "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==", - "dev": true + "dev": true, + "requires": {} }, "postcss-normalize-display-values": { "version": "5.1.0", @@ -48037,7 +48102,6 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -48074,7 +48138,8 @@ "version": "5.6.1", "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz", "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==", - "dev": true + "dev": true, + "requires": {} }, "react-docgen": { "version": "5.4.3", @@ -48115,13 +48180,13 @@ "version": "2.2.2", "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz", "integrity": "sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==", - "dev": true + "dev": true, + "requires": {} }, "react-dom": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -48168,13 +48233,15 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-6.0.2.tgz", "integrity": "sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ==", - "dev": true + "dev": true, + "requires": {} }, "react-intersection-observer": { "version": "9.5.2", "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.5.2.tgz", "integrity": "sha512-EmoV66/yvksJcGa1rdW0nDNc4I1RifDWkT50gXSFnPLYQ4xUptuDD4V7k+Rj1OgVAlww628KLGcxPXFlOkkU/Q==", - "dev": true + "dev": true, + "requires": {} }, "react-is": { "version": "16.13.1", @@ -48288,7 +48355,8 @@ "react-zoom-pan-pinch": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.3.0.tgz", - "integrity": "sha512-vy1h8aenDzXye+HRqANZaSA8IPHoqOiuDPFBkswoyPUH8uMfsmbeH6gFI4r4BhEJa0xIlcA+FbvhidRWKGUrOg==" + "integrity": "sha512-vy1h8aenDzXye+HRqANZaSA8IPHoqOiuDPFBkswoyPUH8uMfsmbeH6gFI4r4BhEJa0xIlcA+FbvhidRWKGUrOg==", + "requires": {} }, "reactcss": { "version": "1.2.3", @@ -48710,9 +48778,9 @@ } }, "rollup": { - "version": "2.79.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", - "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", + "version": "3.29.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", + "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", "dev": true, "requires": { "fsevents": "~2.3.2" @@ -48732,7 +48800,8 @@ "version": "2.2.4", "resolved": "https://registry.npmjs.org/rollup-plugin-peer-deps-external/-/rollup-plugin-peer-deps-external-2.2.4.tgz", "integrity": "sha512-AWdukIM1+k5JDdAqV/Cxd+nejvno2FVLVeZ74NKggm3Q5s9cbbcOgUPGdbxPi4BXu7xGaZ8HG12F+thImYu/0g==", - "dev": true + "dev": true, + "requires": {} }, "rollup-plugin-postcss": { "version": "4.0.2", @@ -48838,17 +48907,16 @@ } }, "rollup-plugin-typescript2": { - "version": "0.31.2", - "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.31.2.tgz", - "integrity": "sha512-hRwEYR1C8xDGVVMFJQdEVnNAeWRvpaY97g5mp3IeLnzhNXzSVq78Ye/BJ9PAaUfN4DXa/uDnqerifMOaMFY54Q==", + "version": "0.36.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.36.0.tgz", + "integrity": "sha512-NB2CSQDxSe9+Oe2ahZbf+B4bh7pHwjV5L+RSYpCu7Q5ROuN94F9b6ioWwKfz3ueL3KTtmX4o2MUH2cgHDIEUsw==", "dev": true, "requires": { "@rollup/pluginutils": "^4.1.2", - "@yarn-tool/resolve-package": "^1.0.40", "find-cache-dir": "^3.3.2", "fs-extra": "^10.0.0", - "resolve": "^1.20.0", - "tslib": "^2.3.1" + "semver": "^7.5.4", + "tslib": "^2.6.2" }, "dependencies": { "@rollup/pluginutils": { @@ -48871,6 +48939,30 @@ "jsonfile": "^6.0.1", "universalify": "^2.0.0" } + }, + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "requires": { + "yallist": "^4.0.0" + } + }, + "semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true } } }, @@ -48960,7 +49052,6 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -49242,12 +49333,6 @@ "source-map": "^0.6.0" } }, - "sourcemap-codec": { - "version": "1.4.8", - "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", - "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", - "dev": true - }, "space-separated-tokens": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz", @@ -49681,7 +49766,8 @@ "version": "0.2.3", "resolved": "https://registry.npmjs.org/swc-loader/-/swc-loader-0.2.3.tgz", "integrity": "sha512-D1p6XXURfSPleZZA/Lipb3A8pZ17fP4NObZvFCDjK/OKljroqDpPmsBdTraWhVBqUNpcWBQY1imWdoPScRlQ7A==", - "dev": true + "dev": true, + "requires": {} }, "symbol-tree": { "version": "3.2.4", @@ -49705,6 +49791,11 @@ "tslib": "^2.5.0" } }, + "tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" + }, "tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", @@ -50077,9 +50168,9 @@ "dev": true }, "tslib": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", - "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==", + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", "dev": true }, "tsutils": { @@ -50322,18 +50413,6 @@ "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==", "dev": true }, - "upath2": { - "version": "3.1.19", - "resolved": "https://registry.npmjs.org/upath2/-/upath2-3.1.19.tgz", - "integrity": "sha512-d23dQLi8nDWSRTIQwXtaYqMrHuca0As53fNiTLLFDmsGBbepsZepISaB2H1x45bDFN/n3Qw9bydvyZEacTrEWQ==", - "dev": true, - "requires": { - "@types/node": "*", - "path-is-network-drive": "^1.0.20", - "path-strip-sep": "^1.0.17", - "tslib": "^2" - } - }, "update-browserslist-db": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", @@ -50643,12 +50722,6 @@ "webpack-sources": "^3.2.3" }, "dependencies": { - "@types/estree": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz", - "integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==", - "dev": true - }, "acorn": { "version": "8.10.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", @@ -50659,7 +50732,8 @@ "version": "1.9.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", - "dev": true + "dev": true, + "requires": {} }, "schema-utils": { "version": "3.3.0", @@ -50949,7 +51023,8 @@ "version": "8.14.2", "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz", "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==", - "dev": true + "dev": true, + "requires": {} }, "xml": { "version": "1.0.1", diff --git a/package.json b/package.json index 5cfced71d..ea4fd9d3d 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "scripts": { "build": "npm run rollup && npm run post:build", "build-check": "npm run rollup rollup.check.config.js", - "rollup": "rm -rf dist && rollup -c", + "rollup": "rm -rf dist && rollup --bundleConfigAsCjs -c", "pack-package": "cd dist && npm pack", "post:build": "node ./scripts/post-build.js", "publish-lib": "npm publish ./dist", @@ -33,6 +33,8 @@ }, "homepage": "https://github.com/LifeSG/react-design-system#readme", "dependencies": { + "@floating-ui/dom": "^1.5.4", + "@floating-ui/react": "^0.26.6", "immer": "^10.0.2", "react-slider": "^2.0.6", "react-zoom-pan-pinch": "^3.3.0" @@ -46,10 +48,10 @@ "@dnd-kit/sortable": "^7.0.2", "@lifesg/react-icons": "^1.4.0", "@react-theming/storybook-addon": "^1.1.10", - "@rollup/plugin-commonjs": "^21.0.2", - "@rollup/plugin-image": "^2.1.1", - "@rollup/plugin-json": "^4.1.0", - "@rollup/plugin-node-resolve": "^13.1.3", + "@rollup/plugin-commonjs": "^25.0.7", + "@rollup/plugin-image": "^3.0.3", + "@rollup/plugin-json": "^6.1.0", + "@rollup/plugin-node-resolve": "^15.2.3", "@storybook/addon-a11y": "^7.4.6", "@storybook/addon-actions": "^7.4.6", "@storybook/addon-essentials": "^7.4.6", @@ -104,12 +106,12 @@ "react-responsive": "^9.0.0-beta.10", "react-spring": "~9.7.3", "remark-gfm": "^3.0.1", - "rollup": "^2.70.1", + "rollup": "^3.29.4", "rollup-plugin-generate-package-json": "^3.2.0", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-terser": "^7.0.2", - "rollup-plugin-typescript2": "^0.31.2", + "rollup-plugin-typescript2": "^0.36.0", "storybook": "^7.4.6", "style-loader": "^2.0.0", "styled-components": "^5.3.5", diff --git a/rollup.config.js b/rollup.config.js index c2538fad6..a97d3a004 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -76,12 +76,14 @@ export default [ format: "esm", sourcemap: true, exports: "named", + interop: "compat", }, { file: pkg.main, format: "cjs", sourcemap: true, exports: "named", + interop: "compat", }, ], plugins, diff --git a/src/filter/filter-context.tsx b/src/filter/filter-context.tsx index 0440a0afb..ce95778e0 100644 --- a/src/filter/filter-context.tsx +++ b/src/filter/filter-context.tsx @@ -1,10 +1,12 @@ -import React from "react"; +import React, { MutableRefObject } from "react"; import { Mode } from "./types"; interface IFilterContext { mode: Mode; + rootNode: MutableRefObject | null; } export const FilterContext = React.createContext({ mode: "default", + rootNode: null, }); diff --git a/src/filter/filter-item.tsx b/src/filter/filter-item.tsx index 353dbf17c..aa94867ab 100644 --- a/src/filter/filter-item.tsx +++ b/src/filter/filter-item.tsx @@ -2,6 +2,7 @@ import isNil from "lodash/isNil"; import { useContext, useEffect, useState } from "react"; import { useResizeDetector } from "react-resize-detector"; import { useSpring } from "react-spring"; +import { PopoverAddon } from "../form/form-label-addon"; import { FilterContext } from "./filter-context"; import { ChevronIcon, @@ -27,13 +28,14 @@ export const FilterItem = ({ showDivider = true, showMobileDivider = true, title, + addon, children, ...otherProps }: FilterItemProps) => { // ============================================================================= // CONST, STATE, REF // ============================================================================= - const { mode } = useContext(FilterContext); + const { mode, rootNode } = useContext(FilterContext); const isMobile = mode === "mobile"; const [expanded, setExpanded] = useState(getInitialExpandState()); const [contentMinimised, setContentMinimised] = useState(minimisable); @@ -90,6 +92,21 @@ export const FilterItem = ({ // ============================================================================= // RENDER // ============================================================================= + + const renderAddon = () => { + switch (addon.type) { + case "popover": + return ( + + ); + default: + return null; + } + }; + return ( {title && ( - {title} + {title} {addon && renderAddon()} )} {collapsible && ( diff --git a/src/filter/filter.styles.tsx b/src/filter/filter.styles.tsx index b145f5683..0d3e8b102 100644 --- a/src/filter/filter.styles.tsx +++ b/src/filter/filter.styles.tsx @@ -10,19 +10,6 @@ import { Text } from "../text/text"; // CONTAINER STYLES // ============================================================================= -export const DesktopView = styled.div` - ${MediaQuery.MaxWidth.tablet} { - display: none; - } -`; - -export const MobileView = styled.div` - display: none; - ${MediaQuery.MaxWidth.tablet} { - display: block; - } -`; - export const DesktopContainer = styled.div` background-color: ${Color.Neutral[8]}; border: 1px solid ${Color.Neutral[5]}; @@ -39,6 +26,11 @@ export const MobileContainer = styled.div` flex-direction: column; `; +export const MobileOverlayContainer = styled.div` + height: 100%; + width: 100%; +`; + export const FilterBody = styled.div` flex: 1; width: 100%; diff --git a/src/filter/filter.tsx b/src/filter/filter.tsx index 33c5186de..3b296b94c 100644 --- a/src/filter/filter.tsx +++ b/src/filter/filter.tsx @@ -1,5 +1,5 @@ import { CrossIcon } from "@lifesg/react-icons/cross"; -import { useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { useMediaQuery } from "react-responsive"; import { Overlay } from "../overlay/overlay"; import { MediaWidths } from "../spec/media-spec"; @@ -9,7 +9,6 @@ import { FilterItem } from "./filter-item"; import { FilterItemPage } from "./filter-item-page"; import { DesktopContainer, - DesktopView, FilterBody, FilterButton, FilterClearButton, @@ -19,7 +18,7 @@ import { FilterHeaderButton, FilterTitle, MobileContainer, - MobileView, + MobileOverlayContainer, StyledFilterIcon, } from "./filter.styles"; import { FilterProps, Mode } from "./types"; @@ -38,21 +37,20 @@ const FilterBase = ({ // CONST, STATE, REF // ============================================================================= const [visible, setVisible] = useState(false); + const mobileNodeRef = useRef(null); + const desktopNodeRef = useRef(null); + const isMobile = useMediaQuery({ + maxWidth: MediaWidths.tablet, + }); // ============================================================================= // EFFECTS // ============================================================================= - useMediaQuery( - { - maxWidth: MediaWidths.tablet, - }, - undefined, - (isMobile) => { - if (!isMobile) { - handleDismissFilter(); - } + useEffect(() => { + if (!isMobile) { + handleDismissFilter(); } - ); + }, [isMobile]); // ========================================================================= // EVENT HANDLERS @@ -126,18 +124,23 @@ const FilterBase = ({ {toggleFilterButtonLabel} - - {renderHeader("mobile")} - {renderChildren("mobile")} - - - Done - - - + + + {renderHeader("mobile")} + {renderChildren("mobile")} + + + Done + + + + ); @@ -145,7 +148,7 @@ const FilterBase = ({ const renderDesktop = () => { return ( - + {renderHeader("default")} {renderChildren("default")} @@ -154,16 +157,19 @@ const FilterBase = ({ return (
- - + {isMobile ? ( + {renderMobile()} - - - + ) : ( + {renderDesktop()} - + )}
); }; diff --git a/src/filter/types.ts b/src/filter/types.ts index 75a5f402d..c133d935a 100644 --- a/src/filter/types.ts +++ b/src/filter/types.ts @@ -1,3 +1,5 @@ +import { FormLabelAddonProps } from "../form/types"; + export type Mode = "default" | "mobile"; export interface FilterProps { @@ -25,6 +27,7 @@ export interface FilterItemProps { /** Specifies if divider is visible in mobile mode */ showMobileDivider?: boolean | undefined; title?: string | undefined; + addon?: FormLabelAddonProps | undefined; className?: string | undefined; id?: string | undefined; "data-testid"?: string | undefined; @@ -54,7 +57,7 @@ export interface FilterItemCheckboxProps selectedOptions?: T[] | undefined; onSelect?: ((options: T[]) => void) | undefined; /** Function to derive display value from an item. If not set, checks `item.label`. */ - labelExtractor?: ((item: T) => string) | undefined; + labelExtractor?: ((item: T) => React.ReactNode) | undefined; /** Function to derive value from an item. If not set, checks `item.value`. */ valueExtractor?: ((item: T) => string) | undefined; } diff --git a/src/form/form-label-addon.tsx b/src/form/form-label-addon.tsx index ede78d352..5e2806144 100644 --- a/src/form/form-label-addon.tsx +++ b/src/form/form-label-addon.tsx @@ -1,42 +1,8 @@ import { ICircleFillIcon } from "@lifesg/react-icons/i-circle-fill"; -import { useEffect, useRef, useState } from "react"; -import { useMediaQuery } from "react-responsive"; -import { ButtonProps } from "../button"; -import { Popover } from "../popover"; -import { MediaWidths } from "../spec/media-spec"; +import { RefObject } from "react"; +import { PopoverTrigger } from "../popover-v2/popover-trigger"; import { AddonWrapper, TriggerArea } from "./form-label-addon.style"; -import { FormLabelAddonProps, FormLabelAddonType } from "./types"; - -// ============================================================================= -// TRIGGER COMPONENT -// ============================================================================= - -interface Props extends ButtonProps { - addonType?: FormLabelAddonType | undefined /* For informational purposes */; - icon?: JSX.Element | undefined; - "data-testid"?: string | undefined; -} - -export const AddonTrigger = ({ - addonType = "popover", - icon, - "data-testid": testId, - ...buttonProps -}: Props): JSX.Element => { - const renderIcon = () => { - if (icon) { - return icon; - } else { - return ; - } - }; - - return ( - - {renderIcon()} - - ); -}; +import { FormLabelAddonProps } from "./types"; // ============================================================================= // POPOVER ADDON COMPONENT @@ -45,83 +11,40 @@ export const AddonTrigger = ({ // ============================================================================= interface PopoverAddonProps { addon: FormLabelAddonProps; + rootNode?: RefObject; } -export const PopoverAddon = ({ addon }: PopoverAddonProps): JSX.Element => { - // ------------------------------------------------------------------------- - // CONST, STATE, REFS - // ------------------------------------------------------------------------- - const [visible, _setVisible] = useState(false); - const nodeRef = useRef(); - const visibleRefValue = useRef(false); - const isMobile = useMediaQuery({ - maxWidth: MediaWidths.mobileL, - }); - - // ------------------------------------------------------------------------- - // REF FUNCTIONS - // ------------------------------------------------------------------------- - const setVisible = (value: boolean) => { - visibleRefValue.current = value; - _setVisible(value); - }; - - // ------------------------------------------------------------------------- - // EFFECTS - // ------------------------------------------------------------------------- - useEffect(() => { - // NOTE: Do not add mouse down event if it's mobile - if (isMobile) { - return; - } - document.addEventListener("mousedown", handleMouseDownEvent); - - return () => { - document.removeEventListener("mousedown", handleMouseDownEvent); - }; - }, []); - - // ------------------------------------------------------------------------- - // EVENT HANDLERS - // ------------------------------------------------------------------------- - const handleMobilePopoverClose = () => { - if (visible) { - setVisible(false); - } - }; - - const handleMouseDownEvent = (event: MouseEvent) => { - if (nodeRef && !(nodeRef.current as any).contains(event.target)) { - // outside click - if (visibleRefValue.current) { - setVisible(false); - } +export const PopoverAddon = ({ + addon, + rootNode, +}: PopoverAddonProps): JSX.Element => { + // ========================================================================= + // CONST, STATE, REF + // ========================================================================= + const { content, type, icon, id, "data-testid": testId } = addon; + + // ========================================================================= + // RENDER FUNCTION + // ========================================================================= + const renderIcon = () => { + if (icon) { + return icon; + } else { + return ; } }; - // ------------------------------------------------------------------------- - // RENDER FUNCTIONS - // ------------------------------------------------------------------------- return ( - - - {addon.content} - - setVisible(!visible)} - aria-label="popover-button" - type="button" - /> - + + + {renderIcon()} + + ); }; diff --git a/src/form/form-label.style.tsx b/src/form/form-label.style.tsx index ceb498bf5..44406cd54 100644 --- a/src/form/form-label.style.tsx +++ b/src/form/form-label.style.tsx @@ -11,14 +11,6 @@ export const Label = styled.label` margin-bottom: 0.5rem; display: inline-block; - #popover-hoc-wrapper { - display: inline; - } - - #popover-hoc-button { - vertical-align: bottom; - } - a, span, p { diff --git a/src/form/form-label.tsx b/src/form/form-label.tsx index a579530f8..7930cd87c 100644 --- a/src/form/form-label.tsx +++ b/src/form/form-label.tsx @@ -16,7 +16,7 @@ export const FormLabel = ({ const renderAddon = () => { switch (addon.type) { case "popover": - return addon && ; + return ; default: return null; } diff --git a/src/index.ts b/src/index.ts index cb7719a5a..c8c790c53 100644 --- a/src/index.ts +++ b/src/index.ts @@ -51,6 +51,7 @@ export * from "./pagination"; export * from "./phone-number-input"; export * from "./pill"; export * from "./popover"; +export * from "./popover-v2"; export * from "./predictive-text-input"; export * from "./progress-indicator"; export * from "./radio-button"; diff --git a/src/popover-v2/index.ts b/src/popover-v2/index.ts new file mode 100644 index 000000000..45f01d955 --- /dev/null +++ b/src/popover-v2/index.ts @@ -0,0 +1,3 @@ +export * from "./popover-trigger"; +export * from "./popover"; +export * from "./types"; diff --git a/src/popover-v2/popover-trigger.styles.tsx b/src/popover-v2/popover-trigger.styles.tsx new file mode 100644 index 000000000..d576153f8 --- /dev/null +++ b/src/popover-v2/popover-trigger.styles.tsx @@ -0,0 +1,11 @@ +import styled from "styled-components"; + +// ============================================================================= +// STYLING +// ============================================================================= +export const TriggerContainer = styled.div` + display: inline; + width: fit-content; + cursor: pointer; + position: relative; +`; diff --git a/src/popover-v2/popover-trigger.tsx b/src/popover-v2/popover-trigger.tsx new file mode 100644 index 000000000..a290b77cd --- /dev/null +++ b/src/popover-v2/popover-trigger.tsx @@ -0,0 +1,124 @@ +import { + FloatingPortal, + autoUpdate, + flip, + offset, + shift, + useFloating, +} from "@floating-ui/react"; +import { useEffect, useRef, useState } from "react"; +import { useMediaQuery } from "react-responsive"; +import { MediaWidths } from "../media"; +import { PopoverV2 } from "./popover"; +import { TriggerContainer } from "./popover-trigger.styles"; +import { PopoverV2TriggerProps } from "./types"; + +export const PopoverTrigger = ({ + children, + popoverContent, + trigger = "click", + rootNode, + onPopoverAppear, + onPopoverDismiss, + ...otherProps +}: PopoverV2TriggerProps) => { + // ========================================================================= + // CONST, STATE, REF + // ========================================================================= + const [visible, setVisible] = useState(false); + const nodeRef = useRef(); + const isMobile = useMediaQuery({ + maxWidth: MediaWidths.mobileL, + }); + const { refs, floatingStyles } = useFloating({ + open: visible, + placement: "top", + whileElementsMounted: autoUpdate, + middleware: [offset(16), flip(), shift()], + }); + + // ========================================================================= + // EFFECTS + // ========================================================================= + useEffect(() => { + // NOTE: Do not add mouse down event if it's mobile + if (isMobile || !visible) { + return; + } + document.addEventListener("mousedown", handleMouseDownEvent); + + return () => { + document.removeEventListener("mousedown", handleMouseDownEvent); + }; + }, [visible]); + + // ========================================================================= + // EVENT HANDLERS + // ========================================================================= + const handleMouseDownEvent = (event: MouseEvent) => { + if (nodeRef && !(nodeRef.current as any).contains(event.target)) { + // outside click + setVisible(false); + + if (onPopoverDismiss) onPopoverDismiss(); + } + }; + + const handleClick = (event: React.MouseEvent) => { + event.preventDefault(); + if (trigger === "click" || isMobile) { + setVisible(!visible); + + if (!visible && onPopoverAppear) onPopoverAppear(); + if (visible && onPopoverDismiss) onPopoverDismiss(); + } + }; + + const handleOnMouseEnter = () => { + if (trigger === "hover" && !isMobile) { + setVisible(true); + } + }; + + const handleOnMouseLeave = () => { + if (trigger === "hover" && visible && !isMobile) { + setVisible(false); + } + }; + + const handlePopoverMobileClose = () => { + setVisible(false); + }; + + // ========================================================================= + // RENDER + // ========================================================================= + return ( + <> + {visible && ( + +
+ + {popoverContent} + +
+ + )} + { + nodeRef.current = node; + refs.setReference(node); + }} + onClick={handleClick} + onMouseEnter={handleOnMouseEnter} + onMouseLeave={handleOnMouseLeave} + {...otherProps} + > + {children} + + + ); +}; diff --git a/src/popover-v2/popover.styles.tsx b/src/popover-v2/popover.styles.tsx new file mode 100644 index 000000000..555376617 --- /dev/null +++ b/src/popover-v2/popover.styles.tsx @@ -0,0 +1,50 @@ +import styled from "styled-components"; +import { Card } from "../card"; +import { Color } from "../color"; +import { MediaQuery } from "../media"; +import { ModalBox } from "../modal/modal-box"; +import { TextStyleHelper } from "../text"; + +// ============================================================================= +// STYLING +// ============================================================================= +export const PopoverContainer = styled.div` + max-width: 30rem; + padding: 0 1rem; + pointer-events: auto; +`; + +export const PopoverCard = styled(Card)` + ${TextStyleHelper.getTextStyle("BodySmall", "regular")} + + ${MediaQuery.MaxWidth.mobileL} { + display: none; + } + + a { + color: ${Color.Primary}; + text-decoration: none; + + :hover, + :active, + :focus { + color: ${Color.Secondary}; + + svg { + color: ${Color.Secondary}; + } + } + } +`; + +export const MobileModalBox = styled(ModalBox)` + padding: 3.5rem 1.25rem 2.5rem; +`; + +export const ContentWrapper = styled.div` + overflow-y: scroll; + + ::-webkit-scrollbar { + display: none; /* Chrome/Safari/Webkit */ + } +`; diff --git a/src/popover-v2/popover.tsx b/src/popover-v2/popover.tsx new file mode 100644 index 000000000..9bd68d6d4 --- /dev/null +++ b/src/popover-v2/popover.tsx @@ -0,0 +1,62 @@ +import { useMediaQuery } from "react-responsive"; +import { Modal } from "../modal/modal"; +import { MediaWidths } from "../spec/media-spec"; +import { Text } from "../text/text"; +import { + ContentWrapper, + MobileModalBox, + PopoverCard, + PopoverContainer, +} from "./popover.styles"; +import { PopoverV2Props } from "./types"; + +export const PopoverV2 = ({ + children, + visible, + onMobileClose, + ...otherProps +}: PopoverV2Props): JSX.Element => { + // ============================================================================= + // CONST, STATE, REF + // ============================================================================= + const testId = otherProps["data-testid"] || "popover"; + const isMobile = useMediaQuery({ + maxWidth: MediaWidths.mobileL, + }); + + // ============================================================================= + // EVENT HANDLERS + // ============================================================================= + const handleMobileClose = () => { + if (onMobileClose) { + onMobileClose(); + } + }; + + // ============================================================================= + // RENDER FUNCTIONS + // ============================================================================= + const renderContent = () => + typeof children === "string" ? ( + {children} + ) : ( + children + ); + + return ( + <> + {visible && ( + + {renderContent()} + + )} + {isMobile && ( + + + {renderContent()} + + + )} + + ); +}; diff --git a/src/popover-v2/types.ts b/src/popover-v2/types.ts new file mode 100644 index 000000000..026c7e891 --- /dev/null +++ b/src/popover-v2/types.ts @@ -0,0 +1,30 @@ +import { RefObject } from "react"; + +export interface PopoverV2Props { + children: string | JSX.Element; + visible?: boolean | undefined; + id?: string | undefined; + className?: string | undefined; + "data-testid"?: string | undefined; + onMobileClose?: (() => void) | undefined; +} + +export type PopoverV2TriggerType = "click" | "hover"; + +export interface PopoverV2TriggerProps { + children: React.ReactNode; + popoverContent: string | JSX.Element; + trigger?: PopoverV2TriggerType | undefined; + id?: string | undefined; + className?: string | undefined; + "data-testid"?: string | undefined; + /** + * The root element that contains the popover element. Defaults to the document body. + * + * If the parent that contains the trigger element has a higher z-index than the popover, + * the popover may not be visible. Specify the parent element here instead + */ + rootNode?: RefObject | undefined; + onPopoverAppear?: (() => void) | undefined; + onPopoverDismiss?: (() => void) | undefined; +} diff --git a/src/popover/popover-hoc.tsx b/src/popover/popover-hoc.tsx index 46780241d..d8263e8f4 100644 --- a/src/popover/popover-hoc.tsx +++ b/src/popover/popover-hoc.tsx @@ -5,6 +5,7 @@ import { Popover } from "./popover"; import { HOCTrigger, HOCWrapper } from "./popover.styles"; import { PopoverHOCOptionsProps, PopoverHOCProps } from "./types"; +/** @deprecated Use `PopoverTrigger` for improved positioning behaviour. This component will be removed in DS v3. */ export const withPopover = (Component: React.ComponentType, options: PopoverHOCOptionsProps) => // eslint-disable-next-line react/display-name diff --git a/src/popover/popover.tsx b/src/popover/popover.tsx index 7cd3ce6f5..3567392b7 100644 --- a/src/popover/popover.tsx +++ b/src/popover/popover.tsx @@ -13,6 +13,9 @@ import { } from "./popover.styles"; import { PopoverProps } from "./types"; +/** + * @deprecated Use `PopoverV2` for improved positioning behaviour. This component will be removed in DS v3. + */ export const Popover = ({ children, visible, diff --git a/stories/filter/filter.stories.tsx b/stories/filter/filter.stories.tsx index 3a5742de5..d7f290094 100644 --- a/stories/filter/filter.stories.tsx +++ b/stories/filter/filter.stories.tsx @@ -158,6 +158,27 @@ export const Minimised: StoryObj = { }, }; +export const FilterItemTooltip: StoryObj = { + render: () => { + return ( + + + + This has a tooltip in the filter item title + + + + ); + }, +}; + export const AccessingMode: StoryObj = { render: () => { return ( diff --git a/stories/popover-v2/popover.mdx b/stories/popover-v2/popover.mdx new file mode 100644 index 000000000..75555b6df --- /dev/null +++ b/stories/popover-v2/popover.mdx @@ -0,0 +1,31 @@ +import { Canvas, Meta } from "@storybook/blocks"; +import { Heading4, Secondary, Title } from "../storybook-common"; +import * as PopoverStories from "./popover.stories"; +import { PropsTable } from "./props-table"; + + + +PopoverV2 + +Overview + +A component which appears when hovering or clicking on a target element and displays information about a certain element in the page. + +> **It is recommended to use this if you have more content to display within the popover bubble. If the content is short, consider using the [Tooltip](/docs/modules-tooltip--docs) instead.** + +```tsx +import { PopoverTrigger } from "@lifesg/react-design-system/popover-v2"; +``` + + + + + +Appearance information + +- The `Popover` component automatically positions itself based on the amount of space available. It will always attempt to display itself on top of the trigger component by default +- The `Popover` appears as a modal in mobile viewports + + + + diff --git a/stories/popover-v2/popover.stories.tsx b/stories/popover-v2/popover.stories.tsx new file mode 100644 index 000000000..3d939bcd8 --- /dev/null +++ b/stories/popover-v2/popover.stories.tsx @@ -0,0 +1,68 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { Button, PopoverTrigger, PopoverV2 } from "../../src"; + +type Component = typeof PopoverV2; + +const meta: Meta = { + title: "Modules/PopoverV2", + component: PopoverV2, +}; + +export default meta; + +export const Default: StoryObj = { + render: () => { + return ( + + Click me + + ); + }, +}; + +export const HoverInteraction: StoryObj = { + render: () => { + return ( + + Hover me + + ); + }, +}; + +export const Appearance: StoryObj = { + render: () => { + return ( +
+ + Left + + + Remains in view as much as possible. Scroll up and + down to view the repositioning +
+ } + > + Center + + + Right + + + ); + }, + parameters: { + layout: "fullscreen", + }, +}; diff --git a/stories/popover-v2/props-table.tsx b/stories/popover-v2/props-table.tsx new file mode 100644 index 000000000..c71035072 --- /dev/null +++ b/stories/popover-v2/props-table.tsx @@ -0,0 +1,169 @@ +import React from "react"; +import { + ApiTable, + DefaultCol, + DescriptionCol, + NameCol, + Section, + Table, +} from "../storybook-common/api-table"; +import { TabAttribute, Tabs } from "../storybook-common/tabs"; +import { ApiTableSectionProps } from "../storybook-common/api-table/types"; + +const POPOVER_TRIGGER_DATA: ApiTableSectionProps[] = [ + { + attributes: [ + { + name: "className", + description: "Class selector for the component", + propTypes: ["string"], + }, + { + name: "id", + description: "The unique identifier for the component", + propTypes: ["string"], + }, + { + name: "data-testid", + description: "The test identifier for the component", + propTypes: ["string"], + }, + { + name: "children", + description: ( + <> + The item to interact with to trigger the{" "} + Popover + + ), + propTypes: ["React.ReactNode"], + mandatory: true, + }, + { + name: "popoverContent", + description: ( + <> + The content of the Popover + + ), + propTypes: ["string", "JSX.Element"], + mandatory: true, + }, + { + name: "trigger", + description: ( + <> + The trigger for the appearance of the{" "} + Popover + + ), + propTypes: [`"click"`, `"hover"`], + defaultValue: `"click"`, + }, + { + name: "rootNode", + description: ( + <> + The root element that hosts the popover element. Try + specifying this if you encounter z-index conflicts. +
+
+ For example, if the parent of the trigger element has a + higher z-index than the popover, the popover may not be + visible. Specify the parent here instead so that they + share the same stacking context. + + ), + propTypes: ["RefObject"], + defaultValue: ( + <> + documentbody + + ), + }, + { + name: "onPopoverAppear", + description: ( + <> + The callback when the Popover appears + + ), + propTypes: ["() => void"], + }, + { + name: "onPopoverDismiss", + description: ( + <> + The callback when the Popover dismisses + + ), + propTypes: ["() => void"], + }, + ], + }, +]; + +const POPOVER_DATA: ApiTableSectionProps[] = [ + { + attributes: [ + { + name: "className", + description: "Class selector for the component", + propTypes: ["string"], + }, + { + name: "id", + description: "The unique identifier for the component", + propTypes: ["string"], + }, + { + name: "data-testid", + description: "The test identifier for the component", + propTypes: ["string"], + }, + { + name: "children", + description: ( + <> + The content of the Popover + + ), + propTypes: ["string", "JSX.Element"], + mandatory: true, + }, + { + name: "visible", + description: ( + <> + The visibility state of the Popover + + ), + propTypes: ["string", "JSX.Element"], + }, + { + name: "onMobileClose", + description: ( + <> + The callback when the user dismisses the{" "} + Popover + (modal form) in mobile viewports + + ), + propTypes: ["() => void"], + }, + ], + }, +]; + +const PROPS_TABLE_DATA: TabAttribute[] = [ + { + title: "PopoverTrigger", + component: , + }, + { + title: "Popover", + component: , + }, +]; + +export const PropsTable = () => ; diff --git a/stories/popover/popover.mdx b/stories/popover/popover.mdx index 4c659d10a..7f9fa1264 100644 --- a/stories/popover/popover.mdx +++ b/stories/popover/popover.mdx @@ -1,4 +1,5 @@ import { Canvas, Meta } from "@storybook/blocks"; +import { Alert } from "src/alert"; import { Heading3, Heading4, Secondary, Title } from "../storybook-common"; import * as PopoverStories from "./popover.stories"; import { PropsTable } from "./props-table"; @@ -7,6 +8,12 @@ import { PropsTable } from "./props-table"; Popover + + This component is deprecated and will be removed in DS v3. It is recommend + to switch to [PopoverV2](/docs/modules-popoverv2--docs) which offers + improved positioning and easier usage. + + Overview A component which appears when hovering or clicking on a target element and displays information about a certain element in the page. diff --git a/tests/filter/filter.spec.tsx b/tests/filter/filter.spec.tsx index ad1be817e..065372968 100644 --- a/tests/filter/filter.spec.tsx +++ b/tests/filter/filter.spec.tsx @@ -1,7 +1,10 @@ import { act, fireEvent, render, screen, within } from "@testing-library/react"; +import { useMediaQuery } from "react-responsive"; import { Filter } from "../../src"; import { FilterContext } from "../../src/filter/filter-context"; +jest.mock("react-responsive"); + describe("Filter", () => { beforeEach(() => { jest.resetAllMocks(); @@ -11,6 +14,8 @@ describe("Filter", () => { unobserve: jest.fn(), disconnect: jest.fn(), })); + + (useMediaQuery as jest.Mock).mockReturnValue(false); }); it("should render the relevant components correctly on desktop", () => { @@ -27,6 +32,8 @@ describe("Filter", () => { }); it("should render the relevant components correctly on mobile", () => { + (useMediaQuery as jest.Mock).mockReturnValue(true); + render( {ITEM_CONTENT} @@ -123,7 +130,9 @@ describe("Filter", () => { it("should be always expanded on mobile even when expanded prop is false", () => { const mockOnChange = jest.fn(); render( - +