From e12f293158ff6d65364d81e567ee67278f98ef4f Mon Sep 17 00:00:00 2001 From: Martin Stievenart Date: Fri, 25 Aug 2023 14:45:53 +0200 Subject: [PATCH] fix(file): handling disabled attribute and input accessibility --- package-lock.json | 180 +++++++----------- package.json | 4 +- packages/Form/Input/file/README.md | 26 ++- packages/Form/Input/file/package.json | 2 +- packages/Form/Input/file/src/File.tsx | 23 ++- .../Form/Input/file/src/FileInput.stories.tsx | 24 ++- .../Input/file/src/__tests__/File.spec.tsx | 6 +- .../file/src/__tests__/FileInput.spec.tsx | 6 +- .../__snapshots__/File.spec.tsx.snap | 18 +- .../__snapshots__/FileInput.spec.tsx.snap | 18 +- packages/Form/Input/file/src/file.scss | 32 +++- packages/button/src/button.scss | 3 +- 12 files changed, 187 insertions(+), 155 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4d974fdae..53cd3d41e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -65,7 +65,7 @@ "markdown-loader": "6.0.0", "npmlog": "4.1.2", "package-lock-sanitizer": "1.0.1", - "postcss": "8.1.4", + "postcss": "8.4.28", "prettier": "2.4.1", "react": "17.0.2", "react-dom": "17.0.2", @@ -11491,30 +11491,6 @@ "source-map": "^0.6.1" } }, - "node_modules/@vue/compiler-sfc/node_modules/postcss": { - "version": "8.4.14", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss" - } - ], - "license": "MIT", - "peer": true, - "dependencies": { - "nanoid": "^3.3.4", - "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" - }, - "engines": { - "node": "^10 || ^12 || >=14" - } - }, "node_modules/@webassemblyjs/ast": { "version": "1.9.0", "dev": true, @@ -18171,13 +18147,14 @@ } }, "node_modules/file-selector": { - "version": "0.2.4", - "license": "MIT", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", + "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", "dependencies": { - "tslib": "^2.0.3" + "tslib": "^2.4.0" }, "engines": { - "node": ">= 10" + "node": ">= 12" } }, "node_modules/file-system-cache": { @@ -21606,6 +21583,7 @@ }, "node_modules/isarray": { "version": "1.0.0", + "dev": true, "license": "MIT" }, "node_modules/isexe": { @@ -25038,24 +25016,6 @@ "node": ">=10" } }, - "node_modules/line-column": { - "version": "1.0.2", - "license": "MIT", - "dependencies": { - "isarray": "^1.0.0", - "isobject": "^2.0.0" - } - }, - "node_modules/line-column/node_modules/isobject": { - "version": "2.1.0", - "license": "MIT", - "dependencies": { - "isarray": "1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/lines-and-columns": { "version": "1.2.4", "license": "MIT" @@ -26431,8 +26391,15 @@ } }, "node_modules/nanoid": { - "version": "3.3.4", - "license": "MIT", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -27812,20 +27779,30 @@ } }, "node_modules/postcss": { - "version": "8.1.4", - "license": "MIT", + "version": "8.4.28", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz", + "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "dependencies": { - "colorette": "^1.2.1", - "line-column": "^1.0.2", - "nanoid": "^3.1.15", - "source-map": "^0.6.1" + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" }, "engines": { "node": "^10 || ^12 || >=14" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" } }, "node_modules/postcss-flexbugs-fixes": { @@ -28611,18 +28588,19 @@ } }, "node_modules/react-dropzone": { - "version": "11.5.3", - "license": "MIT", + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz", + "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==", "dependencies": { - "attr-accept": "^2.2.1", - "file-selector": "^0.2.2", - "prop-types": "^15.7.2" + "attr-accept": "^2.2.2", + "file-selector": "^0.6.0", + "prop-types": "^15.8.1" }, "engines": { - "node": ">= 10" + "node": ">= 10.13" }, "peerDependencies": { - "react": ">= 16.8" + "react": ">= 16.8 || 18.0.0" } }, "node_modules/react-element-to-jsx-string": { @@ -30932,7 +30910,6 @@ }, "node_modules/source-map-js": { "version": "1.0.2", - "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -35353,7 +35330,7 @@ "@axa-fr/react-toolkit-core": "2.0.1-alpha.0", "@axa-fr/react-toolkit-form-core": "2.0.1-alpha.0", "@axa-fr/react-toolkit-popover": "2.0.1-alpha.0", - "react-dropzone": "11.5.3" + "react-dropzone": "14.2.3" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -35526,6 +35503,7 @@ } }, "packages/helpinfo": { + "name": "@axa-fr/react-toolkit-helpinfo", "version": "2.0.1-alpha.0", "license": "MIT", "dependencies": { @@ -35910,7 +35888,7 @@ "@axa-fr/react-toolkit-core": "2.0.1-alpha.0", "@axa-fr/react-toolkit-form-core": "2.0.1-alpha.0", "@axa-fr/react-toolkit-popover": "2.0.1-alpha.0", - "react-dropzone": "11.5.3" + "react-dropzone": "14.2.3" } }, "@axa-fr/react-toolkit-form-input-number": { @@ -43760,18 +43738,6 @@ "@babel/parser": "^7.18.4", "postcss": "^8.4.14", "source-map": "^0.6.1" - }, - "dependencies": { - "postcss": { - "version": "8.4.14", - "dev": true, - "peer": true, - "requires": { - "nanoid": "^3.3.4", - "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" - } - } } }, "@webassemblyjs/ast": { @@ -48285,9 +48251,11 @@ } }, "file-selector": { - "version": "0.2.4", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", + "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", "requires": { - "tslib": "^2.0.3" + "tslib": "^2.4.0" } }, "file-system-cache": { @@ -50502,7 +50470,8 @@ } }, "isarray": { - "version": "1.0.0" + "version": "1.0.0", + "dev": true }, "isexe": { "version": "2.0.0", @@ -52804,21 +52773,6 @@ "version": "2.0.4", "dev": true }, - "line-column": { - "version": "1.0.2", - "requires": { - "isarray": "^1.0.0", - "isobject": "^2.0.0" - }, - "dependencies": { - "isobject": { - "version": "2.1.0", - "requires": { - "isarray": "1.0.0" - } - } - } - }, "lines-and-columns": { "version": "1.2.4" }, @@ -53771,7 +53725,9 @@ } }, "nanoid": { - "version": "3.3.4" + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==" }, "nanomatch": { "version": "1.2.13", @@ -54717,12 +54673,13 @@ "dev": true }, "postcss": { - "version": "8.1.4", + "version": "8.4.28", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz", + "integrity": "sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==", "requires": { - "colorette": "^1.2.1", - "line-column": "^1.0.2", - "nanoid": "^3.1.15", - "source-map": "^0.6.1" + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" } }, "postcss-flexbugs-fixes": { @@ -55229,11 +55186,13 @@ } }, "react-dropzone": { - "version": "11.5.3", + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz", + "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==", "requires": { - "attr-accept": "^2.2.1", - "file-selector": "^0.2.2", - "prop-types": "^15.7.2" + "attr-accept": "^2.2.2", + "file-selector": "^0.6.0", + "prop-types": "^15.8.1" } }, "react-element-to-jsx-string": { @@ -56807,8 +56766,7 @@ "version": "0.6.1" }, "source-map-js": { - "version": "1.0.2", - "dev": true + "version": "1.0.2" }, "source-map-resolve": { "version": "0.6.0", diff --git a/package.json b/package.json index 347232a95..21f03015d 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "build": "lerna run build && npm run style", "postversion": "rimraf package-lock.json && npm i --force --ignore-scripts && git add package-lock.json && git commit --amend --no-edit", "style": "node ./scripts/style.js", - "storybook": "start-storybook -p 9009 -s storybook-public", + "storybook": "set NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 9009 -s storybook-public", "storybook:build": "build-storybook -s storybook-public -c .storybook -o storybook-static && node ./scripts/inject-version.js", "test": "jest", "cover": "jest --no-cache --config ./jest.config.ts --coverage", @@ -79,7 +79,7 @@ "markdown-loader": "6.0.0", "npmlog": "4.1.2", "package-lock-sanitizer": "1.0.1", - "postcss": "8.1.4", + "postcss": "8.4.28", "prettier": "2.4.1", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/packages/Form/Input/file/README.md b/packages/Form/Input/file/README.md index 4b6835fff..4b616ae9d 100644 --- a/packages/Form/Input/file/README.md +++ b/packages/Form/Input/file/README.md @@ -8,6 +8,8 @@ ## File +The `accept` property has been changed with the new version of the package (following the modification on react-dropzone). The property doesn't take a string anymore but an object with a common MIME type as keys and an array of file extensions as values (as described [here](https://react-dropzone.js.org/#section-accepting-specific-file-types)). Common MIME types are described [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types). + ### Installation ```shell script @@ -34,7 +36,11 @@ const FileInput = () => ( { console.log(e); }} @@ -105,7 +111,11 @@ const FileWithValues = () => ( { console.log('your function'); }} @@ -211,7 +221,11 @@ const FileWithErrors = () => ( ( id="uniqueid" label="Picture" name="placeImage" - accept="image/jpeg, image/png, application/*" + accept={{ + 'image/jpeg': ['.jpg', 'jpeg'], + 'image/png': ['.png'], + 'application/json': ['.json'], + }} onChange={(e) => { console.log(e); }} diff --git a/packages/Form/Input/file/package.json b/packages/Form/Input/file/package.json index 788925389..78b887ab4 100644 --- a/packages/Form/Input/file/package.json +++ b/packages/Form/Input/file/package.json @@ -17,7 +17,7 @@ "@axa-fr/react-toolkit-core": "2.0.1-alpha.0", "@axa-fr/react-toolkit-form-core": "2.0.1-alpha.0", "@axa-fr/react-toolkit-popover": "2.0.1-alpha.0", - "react-dropzone": "11.5.3" + "react-dropzone": "14.2.3" }, "license": "MIT", "publishConfig": { diff --git a/packages/Form/Input/file/src/File.tsx b/packages/Form/Input/file/src/File.tsx index 778cef791..e1060378f 100644 --- a/packages/Form/Input/file/src/File.tsx +++ b/packages/Form/Input/file/src/File.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { + Accept, DropzoneInputProps, DropzoneOptions, FileRejection, @@ -8,13 +9,15 @@ import { import { createId, getComponentClassName } from '@axa-fr/react-toolkit-core'; import Button from '@axa-fr/react-toolkit-button'; import { withInput } from '@axa-fr/react-toolkit-form-core'; +import classNames from 'classnames'; type Dropzone = DropzoneInputProps & DropzoneOptions; -type Props = Omit & { +type Props = Omit & { classModifier?: string; label?: string; icon?: string; onChange: DropzoneOptions['onDrop']; + accept: Accept; }; const File = ({ @@ -34,7 +37,7 @@ const File = ({ icon = 'open', ...otherProps }: Props) => { - const { getRootProps, getInputProps, open } = useDropzone({ + const { getInputProps, open } = useDropzone({ onDrop: onChange, minSize, maxSize, @@ -51,10 +54,18 @@ const File = ({ return (
-
- -
{placeholder}
-
+