From c009f075810c64d6410b373b5a8a267f7d10ad9a Mon Sep 17 00:00:00 2001 From: Patryk Andrzejewski Date: Thu, 27 Oct 2022 17:26:09 +0200 Subject: [PATCH] DataGrid full-screen mode (#2453) * full screen mode * add product title, review * update snapshots * Update messages --- locale/defaultMessages.json | 12 + package-lock.json | 842 +++++++++++++++++- package.json | 3 +- src/components/ColumnPicker/ColumnPicker.tsx | 1 + .../ColumnPicker/ColumnPickerContent.tsx | 8 + src/components/Datagrid/Datagrid.tsx | 270 +++--- .../Datagrid/FullScreenContainer.tsx | 79 ++ src/components/Datagrid/Header.tsx | 104 +++ src/components/Datagrid/styles.ts | 26 +- src/components/Datagrid/useDelayedState.ts | 21 + src/components/Datagrid/useFullScreenMode.ts | 28 + src/components/Datagrid/usePortalClasses.ts | 13 + src/hooks/usePreventHistoryBack.ts | 20 +- src/icons/FullScreenIcon.tsx | 14 + src/index.html | 3 +- .../ProductUpdatePage/ProductUpdatePage.tsx | 1 + .../ProductVariants/ProductVariants.tsx | 5 + .../components/ProductVariants/messages.ts | 5 + src/storybook/Stories.test.ts | 5 +- .../__snapshots__/Stories.test.ts.snap | 520 +++++++++-- testUtils/setup.ts | 1 + 21 files changed, 1771 insertions(+), 210 deletions(-) create mode 100644 src/components/Datagrid/FullScreenContainer.tsx create mode 100644 src/components/Datagrid/Header.tsx create mode 100644 src/components/Datagrid/useDelayedState.ts create mode 100644 src/components/Datagrid/useFullScreenMode.ts create mode 100644 src/components/Datagrid/usePortalClasses.ts create mode 100644 src/icons/FullScreenIcon.tsx create mode 100644 testUtils/setup.ts diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 094d4557185..90ebe758567 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -764,6 +764,10 @@ "context": "voucher discount", "string": "Specific products" }, + "483Xnh": { + "context": "open full-screen", + "string": "Open" + }, "4B32Ba": { "context": "delete page", "string": "Are you sure you want to delete {title}?" @@ -1007,6 +1011,10 @@ "context": "number of countries", "string": "{number} Countries" }, + "64aQXZ": { + "context": "product variants, full-screen title", + "string": "Variants for: {name}" + }, "64aYF0": { "context": "informations about product organization, header", "string": "Product Organization" @@ -3668,6 +3676,10 @@ "context": "limit voucher", "string": "Limit number of times this discount can be used in total" }, + "QjPJ78": { + "context": "close full-screen", + "string": "Close" + }, "QkFeOa": { "context": "order refund amount button", "string": "Refund" diff --git a/package-lock.json b/package-lock.json index 54187708370..bf9776f9f6f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6289,7 +6289,13 @@ "dev": true, "requires": { "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5" + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^4.2.0", + "aria-query": "^5.0.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.4.4", + "pretty-format": "^27.0.2" }, "dependencies": { "@types/react": { @@ -6302,10 +6308,60 @@ "csstype": "^3.0.2" } }, + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "csstype": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "pretty-format": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", + "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", + "dev": true, + "requires": { + "ansi-regex": "^5.0.1", + "ansi-styles": "^5.0.0", + "react-is": "^17.0.1" + }, + "dependencies": { + "ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "dev": true + } + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } } } }, @@ -6353,6 +6409,12 @@ "graphql": "14 - 16" } }, + "@types/aria-query": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz", + "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==", + "dev": true + }, "@types/asap": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@types/asap/-/asap-2.0.0.tgz", @@ -8319,6 +8381,46 @@ } } }, + "aria-query": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.1.tgz", + "integrity": "sha512-4cPQjOYM2mqq7mZG8CSxkUvL2Yv/x29VhGq5LKehTsxRnoVQps1YGt9NyjcNQsznEsD4rr8a6zGxqeNTqJWjpA==", + "dev": true, + "requires": { + "deep-equal": "^2.0.5" + }, + "dependencies": { + "deep-equal": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.0.5.tgz", + "integrity": "sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==", + "dev": true, + "requires": { + "call-bind": "^1.0.0", + "es-get-iterator": "^1.1.1", + "get-intrinsic": "^1.0.1", + "is-arguments": "^1.0.4", + "is-date-object": "^1.0.2", + "is-regex": "^1.1.1", + "isarray": "^2.0.5", + "object-is": "^1.1.4", + "object-keys": "^1.1.1", + "object.assign": "^4.1.2", + "regexp.prototype.flags": "^1.3.0", + "side-channel": "^1.0.3", + "which-boxed-primitive": "^1.0.1", + "which-collection": "^1.0.1", + "which-typed-array": "^1.1.2" + } + }, + "isarray": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz", + "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==", + "dev": true + } + } + }, "arr-diff": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", @@ -8623,6 +8725,12 @@ "postcss-value-parser": "^4.1.0" } }, + "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==", + "dev": true + }, "aws-sign2": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz", @@ -10174,7 +10282,7 @@ "buffer-crc32": { "version": "0.2.13", "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", - "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=", + "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==", "dev": true }, "buffer-equal-constant-time": { @@ -13168,6 +13276,12 @@ "esutils": "^2.0.2" } }, + "dom-accessibility-api": { + "version": "0.5.14", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz", + "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==", + "dev": true + }, "dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -14996,7 +15110,7 @@ "pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", "dev": true } } @@ -15477,7 +15591,7 @@ "fd-slicer": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz", - "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=", + "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==", "dev": true, "requires": { "pend": "~1.2.0" @@ -16360,7 +16474,7 @@ "functional-red-black-tree": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", - "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==", + "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, "functions-have-names": { @@ -16476,6 +16590,45 @@ "pump": "^3.0.0" } }, + "get-symbol-description": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz", + "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "get-intrinsic": "^1.1.1" + }, + "dependencies": { + "call-bind": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", + "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.2" + } + }, + "get-intrinsic": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz", + "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.3" + } + }, + "has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "dev": true + } + } + }, "get-value": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz", @@ -16950,12 +17103,49 @@ "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", "dev": true }, + "has-property-descriptors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz", + "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==", + "dev": true, + "requires": { + "get-intrinsic": "^1.1.1" + }, + "dependencies": { + "get-intrinsic": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz", + "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.3" + } + }, + "has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "dev": true + } + } + }, "has-symbols": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz", "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==", "dev": true }, + "has-tostringtag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz", + "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==", + "dev": true, + "requires": { + "has-symbols": "^1.0.2" + } + }, "has-unicode": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", @@ -18568,6 +18758,44 @@ "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==", "dev": true }, + "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==", + "dev": true, + "requires": { + "call-bind": "^1.0.2" + }, + "dependencies": { + "call-bind": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", + "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.2" + } + }, + "get-intrinsic": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz", + "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.3" + } + }, + "has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "dev": true + } + } + }, "is-ssh": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/is-ssh/-/is-ssh-1.3.2.tgz", @@ -18604,6 +18832,228 @@ "has-symbols": "^1.0.1" } }, + "is-typed-array": { + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.9.tgz", + "integrity": "sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==", + "dev": true, + "requires": { + "available-typed-arrays": "^1.0.5", + "call-bind": "^1.0.2", + "es-abstract": "^1.20.0", + "for-each": "^0.3.3", + "has-tostringtag": "^1.0.0" + }, + "dependencies": { + "call-bind": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", + "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.2" + } + }, + "es-abstract": { + "version": "1.20.4", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.4.tgz", + "integrity": "sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "function.prototype.name": "^1.1.5", + "get-intrinsic": "^1.1.3", + "get-symbol-description": "^1.0.0", + "has": "^1.0.3", + "has-property-descriptors": "^1.0.0", + "has-symbols": "^1.0.3", + "internal-slot": "^1.0.3", + "is-callable": "^1.2.7", + "is-negative-zero": "^2.0.2", + "is-regex": "^1.1.4", + "is-shared-array-buffer": "^1.0.2", + "is-string": "^1.0.7", + "is-weakref": "^1.0.2", + "object-inspect": "^1.12.2", + "object-keys": "^1.1.1", + "object.assign": "^4.1.4", + "regexp.prototype.flags": "^1.4.3", + "safe-regex-test": "^1.0.0", + "string.prototype.trimend": "^1.0.5", + "string.prototype.trimstart": "^1.0.5", + "unbox-primitive": "^1.0.2" + } + }, + "function.prototype.name": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz", + "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.1.3", + "es-abstract": "^1.19.0", + "functions-have-names": "^1.2.2" + } + }, + "get-intrinsic": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz", + "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.3" + } + }, + "has-bigints": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", + "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==", + "dev": true + }, + "has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "dev": true + }, + "is-callable": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz", + "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==", + "dev": true + }, + "is-negative-zero": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz", + "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==", + "dev": true + }, + "is-regex": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", + "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "has-tostringtag": "^1.0.0" + } + }, + "is-string": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz", + "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==", + "dev": true, + "requires": { + "has-tostringtag": "^1.0.0" + } + }, + "object-inspect": { + "version": "1.12.2", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz", + "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==", + "dev": true + }, + "object.assign": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz", + "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.1.4", + "has-symbols": "^1.0.3", + "object-keys": "^1.1.1" + }, + "dependencies": { + "define-properties": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz", + "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==", + "dev": true, + "requires": { + "has-property-descriptors": "^1.0.0", + "object-keys": "^1.1.1" + } + } + } + }, + "regexp.prototype.flags": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz", + "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.1.3", + "functions-have-names": "^1.2.2" + } + }, + "string.prototype.trimend": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz", + "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.1.4", + "es-abstract": "^1.19.5" + }, + "dependencies": { + "define-properties": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz", + "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==", + "dev": true, + "requires": { + "has-property-descriptors": "^1.0.0", + "object-keys": "^1.1.1" + } + } + } + }, + "string.prototype.trimstart": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz", + "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.1.4", + "es-abstract": "^1.19.5" + }, + "dependencies": { + "define-properties": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz", + "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==", + "dev": true, + "requires": { + "has-property-descriptors": "^1.0.0", + "object-keys": "^1.1.1" + } + } + } + }, + "unbox-primitive": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", + "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "has-bigints": "^1.0.2", + "has-symbols": "^1.0.3", + "which-boxed-primitive": "^1.0.2" + } + } + } + }, "is-typedarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", @@ -18652,6 +19102,89 @@ "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=", "dev": true }, + "is-weakmap": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz", + "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==", + "dev": true + }, + "is-weakref": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz", + "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==", + "dev": true, + "requires": { + "call-bind": "^1.0.2" + }, + "dependencies": { + "call-bind": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", + "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.2" + } + }, + "get-intrinsic": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz", + "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.3" + } + }, + "has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "dev": true + } + } + }, + "is-weakset": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz", + "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "get-intrinsic": "^1.1.1" + }, + "dependencies": { + "call-bind": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", + "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.2" + } + }, + "get-intrinsic": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz", + "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.3" + } + }, + "has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "dev": true + } + } + }, "is-whitespace-character": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz", @@ -20304,7 +20837,7 @@ "json-stable-stringify-without-jsonify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", - "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", + "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=", "dev": true }, "json-stringify-safe": { @@ -21632,7 +22165,7 @@ "lodash.truncate": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz", - "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==", + "integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=", "dev": true }, "log-symbols": { @@ -21826,6 +22359,12 @@ "highlight.js": "~9.13.0" } }, + "lz-string": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", + "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==", + "dev": true + }, "macos-release": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.4.1.tgz", @@ -23673,7 +24212,7 @@ "ospath": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz", - "integrity": "sha1-EnZjl3Sj+O8lcvf+QoDg6kVQwHs=", + "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==", "dev": true }, "p-cancelable": { @@ -24226,7 +24765,7 @@ "pend": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", - "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=", + "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==", "dev": true }, "performance-now": { @@ -27722,6 +28261,56 @@ "ret": "~0.1.10" } }, + "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==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "get-intrinsic": "^1.1.3", + "is-regex": "^1.1.4" + }, + "dependencies": { + "call-bind": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", + "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.2" + } + }, + "get-intrinsic": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz", + "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.3" + } + }, + "has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "dev": true + }, + "is-regex": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", + "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "has-tostringtag": "^1.0.0" + } + } + } + }, "safer-buffer": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", @@ -32248,6 +32837,18 @@ } } }, + "which-collection": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz", + "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==", + "dev": true, + "requires": { + "is-map": "^2.0.1", + "is-set": "^2.0.1", + "is-weakmap": "^2.0.1", + "is-weakset": "^2.0.1" + } + }, "which-module": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", @@ -32259,6 +32860,229 @@ "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=", "dev": true }, + "which-typed-array": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.8.tgz", + "integrity": "sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==", + "dev": true, + "requires": { + "available-typed-arrays": "^1.0.5", + "call-bind": "^1.0.2", + "es-abstract": "^1.20.0", + "for-each": "^0.3.3", + "has-tostringtag": "^1.0.0", + "is-typed-array": "^1.1.9" + }, + "dependencies": { + "call-bind": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", + "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.2" + } + }, + "es-abstract": { + "version": "1.20.4", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.4.tgz", + "integrity": "sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "function.prototype.name": "^1.1.5", + "get-intrinsic": "^1.1.3", + "get-symbol-description": "^1.0.0", + "has": "^1.0.3", + "has-property-descriptors": "^1.0.0", + "has-symbols": "^1.0.3", + "internal-slot": "^1.0.3", + "is-callable": "^1.2.7", + "is-negative-zero": "^2.0.2", + "is-regex": "^1.1.4", + "is-shared-array-buffer": "^1.0.2", + "is-string": "^1.0.7", + "is-weakref": "^1.0.2", + "object-inspect": "^1.12.2", + "object-keys": "^1.1.1", + "object.assign": "^4.1.4", + "regexp.prototype.flags": "^1.4.3", + "safe-regex-test": "^1.0.0", + "string.prototype.trimend": "^1.0.5", + "string.prototype.trimstart": "^1.0.5", + "unbox-primitive": "^1.0.2" + } + }, + "function.prototype.name": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz", + "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.1.3", + "es-abstract": "^1.19.0", + "functions-have-names": "^1.2.2" + } + }, + "get-intrinsic": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz", + "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.3" + } + }, + "has-bigints": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", + "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==", + "dev": true + }, + "has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "dev": true + }, + "is-callable": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz", + "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==", + "dev": true + }, + "is-negative-zero": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz", + "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==", + "dev": true + }, + "is-regex": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", + "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "has-tostringtag": "^1.0.0" + } + }, + "is-string": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz", + "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==", + "dev": true, + "requires": { + "has-tostringtag": "^1.0.0" + } + }, + "object-inspect": { + "version": "1.12.2", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz", + "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==", + "dev": true + }, + "object.assign": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz", + "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.1.4", + "has-symbols": "^1.0.3", + "object-keys": "^1.1.1" + }, + "dependencies": { + "define-properties": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz", + "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==", + "dev": true, + "requires": { + "has-property-descriptors": "^1.0.0", + "object-keys": "^1.1.1" + } + } + } + }, + "regexp.prototype.flags": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz", + "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.1.3", + "functions-have-names": "^1.2.2" + } + }, + "string.prototype.trimend": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz", + "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.1.4", + "es-abstract": "^1.19.5" + }, + "dependencies": { + "define-properties": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz", + "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==", + "dev": true, + "requires": { + "has-property-descriptors": "^1.0.0", + "object-keys": "^1.1.1" + } + } + } + }, + "string.prototype.trimstart": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz", + "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.1.4", + "es-abstract": "^1.19.5" + }, + "dependencies": { + "define-properties": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz", + "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==", + "dev": true, + "requires": { + "has-property-descriptors": "^1.0.0", + "object-keys": "^1.1.1" + } + } + } + }, + "unbox-primitive": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", + "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==", + "dev": true, + "requires": { + "call-bind": "^1.0.2", + "has-bigints": "^1.0.2", + "has-symbols": "^1.0.3", + "which-boxed-primitive": "^1.0.2" + } + } + } + }, "wide-align": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", diff --git a/package.json b/package.json index 90b278a3863..8f42824818c 100644 --- a/package.json +++ b/package.json @@ -219,7 +219,8 @@ "resetMocks": false, "setupFiles": [ "jest-canvas-mock", - "jest-localstorage-mock" + "jest-localstorage-mock", + "/testUtils/setup.ts" ], "transform": { "^.+\\.(jsx?|tsx?)$": "babel-jest", diff --git a/src/components/ColumnPicker/ColumnPicker.tsx b/src/components/ColumnPicker/ColumnPicker.tsx index e654e11754f..bfc90929609 100644 --- a/src/components/ColumnPicker/ColumnPicker.tsx +++ b/src/components/ColumnPicker/ColumnPicker.tsx @@ -35,6 +35,7 @@ const useStyles = makeStyles( theme => ({ popper: { marginTop: theme.spacing(1), + zIndex: 1, }, }), { diff --git a/src/components/ColumnPicker/ColumnPickerContent.tsx b/src/components/ColumnPicker/ColumnPickerContent.tsx index e3ff9294897..80fead52197 100644 --- a/src/components/ColumnPicker/ColumnPickerContent.tsx +++ b/src/components/ColumnPicker/ColumnPickerContent.tsx @@ -49,6 +49,13 @@ const useStyles = makeStyles( textTransform: "uppercase", marginBottom: theme.spacing(1), }, + choicesContainer: { + maxHeight: 500, + overflow: "hidden scroll", + "& span": { + wordBreak: "break-all", + }, + }, }), { name: "ColumnPickerContent" }, ); @@ -87,6 +94,7 @@ const ColumnPickerContent: React.FC = props => { {intl.formatMessage(messages.columnSubheader)} ; @@ -52,6 +51,7 @@ export interface DatagridProps { menuItems: (index: number) => CardMenuItem[]; rows: number; title: string; + fullScreenTitle?: string; selectionActions: ( selection: number[], actions: MenuItemsActions, @@ -69,12 +69,18 @@ export const Datagrid: React.FC = ({ rows, selectionActions, title, + fullScreenTitle, onChange, }): React.ReactElement => { const classes = useStyles(); + const fullScreenClasses = useFullScreenStyles(classes); const datagridTheme = useDatagridTheme(); const editor = React.useRef(); + const { isOpen, isAnimationOpenFinished, toggle } = useFullScreenMode(); + + usePortalClasses({ className: classes.portal }); + const { availableColumnsChoices, columns, @@ -194,136 +200,150 @@ export const Datagrid: React.FC = ({ const rowsTotal = rows - removed.length + added.length; const hasColumnGroups = columns.some(col => col.group); + const headerTitle = isAnimationOpenFinished + ? fullScreenTitle ?? title + : title; return ( - - - - - } - /> - - {rowsTotal > 0 ? ( - <> - {selection?.rows.length > 0 && ( -
- {selectionActionsComponent} -
+ + +
+ + {isOpen ? ( + + ) : ( + )} -
- + + + {addButtonLabel} + +
+ + {rowsTotal > 0 ? ( + <> + {selection?.rows.length > 0 && ( +
+ {selectionActionsComponent} +
+ )} +
+ -
- undefined} - onQueryChange={picker.setQuery} - query={picker.query} - /> -
- {hasColumnGroups && ( + >
- )} - {Array(rowsTotal) - .fill(0) - .map((_, index) => ( +
+ undefined} + onQueryChange={picker.setQuery} + query={picker.query} + /> +
+ {hasColumnGroups && (
- = rowsTotal - added.length} - Icon={MoreHorizontalIcon} - IconButtonProps={{ - className: classes.columnPickerBtn, - hoverOutline: false, - state: "default", - }} - menuItems={menuItems(index)} - /> -
- ))} -
- } - rowMarkerWidth={48} - /> - {/* FIXME: https://github.com/glideapps/glide-data-grid/issues/505 */} - {hasColumnGroups &&
} -
- - ) : ( - {emptyText} - )} - -
- + /> + )} + {Array(rowsTotal) + .fill(0) + .map((_, index) => ( +
+ = rowsTotal - added.length} + Icon={MoreHorizontalIcon} + IconButtonProps={{ + className: classes.columnPickerBtn, + hoverOutline: false, + state: "default", + }} + menuItems={menuItems(index)} + /> +
+ ))} +
+ } + rowMarkerWidth={48} + /> + {/* FIXME: https://github.com/glideapps/glide-data-grid/issues/505 */} + {hasColumnGroups && ( +
+ )} +
+ + ) : ( + {emptyText} + )} + + + ); }; + Datagrid.displayName = "Datagrid"; export default Datagrid; diff --git a/src/components/Datagrid/FullScreenContainer.tsx b/src/components/Datagrid/FullScreenContainer.tsx new file mode 100644 index 00000000000..7204f27e5ae --- /dev/null +++ b/src/components/Datagrid/FullScreenContainer.tsx @@ -0,0 +1,79 @@ +import { useTheme } from "@saleor/macaw-ui"; +import React, { CSSProperties, FC, PropsWithChildren } from "react"; +import ReactDOM from "react-dom"; + +import { useDelayedState } from "./useDelayedState"; + +const modalRoot = + document.getElementById("modal-root") || document.createElement("div"); + +const useEase = (duration: number) => { + const { transitions } = useTheme(); + const { easeIn, easeOut } = transitions.easing; + const options = { duration, delay: 0 }; + const transitionIn = transitions.create("all", { + ...options, + easing: easeIn, + }); + const transitionOut = transitions.create("all", { + ...options, + easing: easeOut, + }); + + return { transitionIn, transitionOut }; +}; + +const useAnimationStyles = (isOpen: boolean, duration: number) => { + const { transitionIn, transitionOut } = useEase(duration); + + const initialStyles: CSSProperties = { + opacity: 0, + position: "fixed", + inset: 0, + zIndex: -1, + }; + + const openStyles = { + transition: transitionIn, + opacity: 1, + zIndex: 1, + }; + + const closedStyles = { + transition: transitionOut, + opacity: 0, + }; + + return { + ...initialStyles, + ...(isOpen ? openStyles : closedStyles), + }; +}; + +interface FullScreenContainerProps { + open?: boolean; + className?: string; +} + +const Portal = ({ className, children, open }) => { + const { delayedState: delayedOpen, duration } = useDelayedState(open); + const styles = useAnimationStyles(open, duration); + + return ReactDOM.createPortal( +
+ {delayedOpen && children} +
, + modalRoot, + ); +}; + +export const FullScreenContainer: FC> = ({ children, open, className }) => ( + <> + + {children} + + {children} + +); diff --git a/src/components/Datagrid/Header.tsx b/src/components/Datagrid/Header.tsx new file mode 100644 index 00000000000..3221229669c --- /dev/null +++ b/src/components/Datagrid/Header.tsx @@ -0,0 +1,104 @@ +import FullScreenIcon from "@saleor/icons/FullScreenIcon"; +import { Button, makeStyles, PlusSmallIcon } from "@saleor/macaw-ui"; +import classNames from "classnames"; +import React, { FC, PropsWithChildren } from "react"; + +import CardTitle from "../CardTitle"; + +const useStyles = makeStyles( + theme => ({ + btnContainer: { + display: "flex", + flexDirection: "row-reverse", + gap: theme.spacing(1), + }, + headerBtn: { + marginBottom: theme.spacing(2), + }, + + fullScreenIcon: { + fontSize: 14, + }, + fullScreenIconClose: { + transform: "rotate(180deg)", + }, + }), + { name: "Datagrid" }, +); + +interface ButtonFullScreenProps { + isOpen: boolean; + onToggle: React.MouseEventHandler; +} + +const ButtonFullScreen: FC> = ({ + isOpen, + onToggle, + children, +}) => { + const classes = useStyles(); + + return ( + + ); +}; + +interface ButtonAddRowProps { + onAddRow: React.MouseEventHandler; +} + +const ButtonAddRow: FC> = ({ + onAddRow, + children, +}) => { + const classes = useStyles(); + + return ( + + ); +}; + +interface HeaderProps { + title: string; +} + +interface GridHeader extends FC> { + ButtonFullScreen: typeof ButtonFullScreen; + ButtonAddRow: typeof ButtonAddRow; +} + +const Header: GridHeader = ({ title, children }) => { + const classes = useStyles(); + + return ( + {children}
} + /> + ); +}; + +Header.ButtonFullScreen = ButtonFullScreen; +Header.ButtonAddRow = ButtonAddRow; + +export { Header }; diff --git a/src/components/Datagrid/styles.ts b/src/components/Datagrid/styles.ts index 09df78b7c5b..bc8eae42cde 100644 --- a/src/components/Datagrid/styles.ts +++ b/src/components/Datagrid/styles.ts @@ -28,13 +28,6 @@ const useStyles = makeStyles( justifyContent: "flex-end", padding: theme.spacing(1), }, - btnContainer: { - display: "flex", - flexDirection: "row-reverse", - }, - addBtn: { - marginBottom: theme.spacing(2), - }, columnPicker: { display: "flex", alignItems: "center", @@ -86,6 +79,7 @@ const useStyles = makeStyles( position: "fixed", top: 0, left: 0, + zIndex: 2, }, datagrid: { "& .dvn-scroller": { @@ -142,6 +136,7 @@ const useStyles = makeStyles( }, editorContainer: { position: "relative", + height: "100%", }, rowActionBarShadow: { height: "100%", @@ -159,12 +154,29 @@ const useStyles = makeStyles( rowActionSelected, cardContentRoot: { padding: "0 0 2.4rem 0", + flex: 1, }, }; }, { name: "Datagrid" }, ); +export const useFullScreenStyles = makeStyles>( + () => ({ + fullScreenContainer: props => ({ + [`& .${props.root}`]: { + height: "100%", + display: "flex", + flexDirection: "column", + }, + [`& .${props.datagrid}`]: { + height: "100%", + }, + }), + }), + { name: "Datagrid-fullscreen" }, +); + const calculateFontToPx = (remValue: string | number, base: number) => { if (typeof remValue === "string") { return `${parseFloat(remValue) * base}px`; diff --git a/src/components/Datagrid/useDelayedState.ts b/src/components/Datagrid/useDelayedState.ts new file mode 100644 index 00000000000..59320f6f532 --- /dev/null +++ b/src/components/Datagrid/useDelayedState.ts @@ -0,0 +1,21 @@ +import { useTheme } from "@saleor/macaw-ui"; +import { useEffect, useState } from "react"; + +export const useDelayedState = (state: boolean) => { + const { + transitions: { duration }, + } = useTheme(); + const [delayedState, setDelayedState] = useState(state); + + useEffect(() => { + const delay = state ? 0 : duration.standard; + const timeout = setTimeout(() => { + setDelayedState(state); + }, delay); + return () => { + clearTimeout(timeout); + }; + }, [state]); + + return { delayedState, duration: duration.standard }; +}; diff --git a/src/components/Datagrid/useFullScreenMode.ts b/src/components/Datagrid/useFullScreenMode.ts new file mode 100644 index 00000000000..27ed6528a2b --- /dev/null +++ b/src/components/Datagrid/useFullScreenMode.ts @@ -0,0 +1,28 @@ +import { usePreventHistoryBack } from "@saleor/hooks/usePreventHistoryBack"; +import { useEffect, useState } from "react"; + +import { useDelayedState } from "./useDelayedState"; + +export const useFullScreenMode = () => { + const { enable, disable } = usePreventHistoryBack(document.body, { + defaultEnabled: false, + }); + const [open, setOpen] = useState(false); + const { delayedState: delayedOpen } = useDelayedState(!open); + const togglePreventHistory = open ? disable : enable; + + const toggle = () => { + setOpen(p => !p); + togglePreventHistory(); + }; + + useEffect(() => { + document.body.style.overflow = open ? "hidden" : ""; + }, [open]); + + return { + isOpen: open, + isAnimationOpenFinished: !delayedOpen, + toggle, + }; +}; diff --git a/src/components/Datagrid/usePortalClasses.ts b/src/components/Datagrid/usePortalClasses.ts new file mode 100644 index 00000000000..5211840a343 --- /dev/null +++ b/src/components/Datagrid/usePortalClasses.ts @@ -0,0 +1,13 @@ +import { useEffect } from "react"; + +/** + * Glide automatically refers to the div with an id "portal" + * This hook allows to add additional classes for it + */ +const portalRoot = document.getElementById("portal"); + +export const usePortalClasses = ({ className }: { className: string }) => { + useEffect(() => { + portalRoot.classList.add(className); + }, []); +}; diff --git a/src/hooks/usePreventHistoryBack.ts b/src/hooks/usePreventHistoryBack.ts index fa562fa9271..24d3b5b2b7d 100644 --- a/src/hooks/usePreventHistoryBack.ts +++ b/src/hooks/usePreventHistoryBack.ts @@ -8,10 +8,18 @@ import React, { useRef } from "react"; * https://caniuse.com/css-overscroll-behavior */ -export const usePreventHistoryBack = (scroller: HTMLDivElement) => { +export const usePreventHistoryBack = ( + scroller: HTMLElement, + options?: { defaultEnabled?: boolean }, +) => { + const enabled = useRef(options?.defaultEnabled ?? true); const offsetY = useRef(0); const wheelHandler = evt => { + if (!enabled.current) { + return; + } + const notVertival = Math.abs(evt.deltaX) - Math.abs(evt.deltaY) >= 0; if (evt.target.scrollLeft <= 0 && evt.deltaX <= 0 && notVertival) { @@ -32,4 +40,14 @@ export const usePreventHistoryBack = (scroller: HTMLDivElement) => { scroller.removeEventListener("wheel", wheelHandler); }; }, [scroller]); + + const enable = () => { + enabled.current = true; + }; + + const disable = () => { + enabled.current = false; + }; + + return { enable, disable }; }; diff --git a/src/icons/FullScreenIcon.tsx b/src/icons/FullScreenIcon.tsx new file mode 100644 index 00000000000..2e9addd67ca --- /dev/null +++ b/src/icons/FullScreenIcon.tsx @@ -0,0 +1,14 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +const FullScreenIcon = createSvgIcon( + <> + + + + + , + "FullScreenIcon", +); + +export default FullScreenIcon; diff --git a/src/index.html b/src/index.html index 50e8316bf5d..7dcdf4cdd6e 100644 --- a/src/index.html +++ b/src/index.html @@ -12,6 +12,7 @@
-
+
+ diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx index 73062b9e204..b2ec653b165 100644 --- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx +++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx @@ -363,6 +363,7 @@ export const ProductUpdatePage: React.FC = ({ )} = ({ variants, warehouses, variantAttributes, + productName, onAttributeValuesSearch, onChange, onRowClick, @@ -128,6 +130,9 @@ export const ProductVariants: React.FC = ({ )} title={intl.formatMessage(messages.title)} + fullScreenTitle={intl.formatMessage(messages.fullScreenTitle, { + name: productName, + })} onChange={onChange} /> ); diff --git a/src/products/components/ProductVariants/messages.ts b/src/products/components/ProductVariants/messages.ts index 04099afc9a2..0db4c32081d 100644 --- a/src/products/components/ProductVariants/messages.ts +++ b/src/products/components/ProductVariants/messages.ts @@ -41,6 +41,11 @@ const messages = defineMessages({ id: "1WbTJ5", description: "product variants, title", }, + fullScreenTitle: { + defaultMessage: "Variants for: {name}", + id: "64aQXZ", + description: "product variants, full-screen title", + }, }); export default messages; diff --git a/src/storybook/Stories.test.ts b/src/storybook/Stories.test.ts index 611e46e2cc9..25d2081a709 100644 --- a/src/storybook/Stories.test.ts +++ b/src/storybook/Stories.test.ts @@ -5,11 +5,14 @@ import Adapter from "@wojtekmaj/enzyme-adapter-react-17"; import { configure, render } from "enzyme"; import toJSON from "enzyme-to-json"; import { mockRandomForEach } from "jest-mock-random"; -import React from "react"; +import React, { ReactPortal } from "react"; +import ReactDOM from "react-dom"; // Fixes useLayoutEffect warnings React.useLayoutEffect = React.useEffect; +ReactDOM.createPortal = node => node as ReactPortal; + configure({ adapter: new Adapter() }); jest.mock("@material-ui/styles/createGenerateClassName"); diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index b4be26f7a57..d7689104b3f 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -5472,6 +5472,10 @@ exports[`Storyshots Generics / Datagrid default 1`] = `
+
@@ -5494,7 +5498,37 @@ exports[`Storyshots Generics / Datagrid default 1`] = ` class="Datagrid-btnContainer-id" > +
-
@@ -5641,6 +5671,10 @@ exports[`Storyshots Generics / Datagrid with errors 1`] = `
+
@@ -5663,7 +5697,37 @@ exports[`Storyshots Generics / Datagrid with errors 1`] = ` class="Datagrid-btnContainer-id" > +
-
@@ -184446,6 +184506,10 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
+
@@ -184468,7 +184532,37 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = ` class="Datagrid-btnContainer-id" > +
-
+
@@ -186888,7 +186982,37 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = ` class="Datagrid-btnContainer-id" > +
-
+
@@ -189303,7 +189427,37 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = ` class="Datagrid-btnContainer-id" > +
-
+
@@ -191454,7 +191608,37 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] = class="Datagrid-btnContainer-id" > +
-
+
@@ -193869,7 +194053,37 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`] class="Datagrid-btnContainer-id" > +
-
+
@@ -196284,7 +196498,37 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no class="Datagrid-btnContainer-id" > +
-
+
@@ -198699,7 +198943,37 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = ` class="Datagrid-btnContainer-id" > +
-
+
@@ -201114,7 +201388,37 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1` class="Datagrid-btnContainer-id" > +
-
+
@@ -203037,7 +203341,37 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = ` class="Datagrid-btnContainer-id" > +
-
+
@@ -204160,7 +204494,37 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1 class="Datagrid-btnContainer-id" > +
-
+
@@ -206575,7 +206939,37 @@ exports[`Storyshots Views / Products / Product edit when product has no variants class="Datagrid-btnContainer-id" > +
-
document.createElement("div");