From ce45de308f1aaaf760a8e3f18ee39f20610f896b Mon Sep 17 00:00:00 2001 From: Will Glas <35304767+willglas@users.noreply.github.com> Date: Tue, 28 Jun 2022 11:21:19 -0400 Subject: [PATCH 1/4] Add AutocompleteContext to Autocomplete component exports (#2153) --- .changeset/dry-stingrays-drum.md | 5 +++ docs/content/Autocomplete.mdx | 58 +++++++++++++++++++++++++++++++ src/Autocomplete/Autocomplete.tsx | 1 + 3 files changed, 64 insertions(+) create mode 100644 .changeset/dry-stingrays-drum.md diff --git a/.changeset/dry-stingrays-drum.md b/.changeset/dry-stingrays-drum.md new file mode 100644 index 00000000000..8af8e4f2584 --- /dev/null +++ b/.changeset/dry-stingrays-drum.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Add AutocompleteContext to Autocomplete component exports diff --git a/docs/content/Autocomplete.mdx b/docs/content/Autocomplete.mdx index db51f35e0ca..405d4b15d4f 100644 --- a/docs/content/Autocomplete.mdx +++ b/docs/content/Autocomplete.mdx @@ -579,6 +579,64 @@ const MultiSelectAddNewItem = () => { render() ``` +#### Rendered with `Autocomplete.Context` + +The `Autocomplete.Context` can be used to control the menu open/closed state and customize certain `Autocomplete` behaviors + +```javascript live noinline +export function AutocompleteWithContext() { + return ( + + + + ) +} + +export function AutocompleteWithContextInternal() { + const autocompleteContext = useContext(Autocomplete.Context) + if (autocompleteContext === null) { + throw new Error('AutocompleteContext returned null values') + } + + const {setShowMenu, showMenu} = autocompleteContext + const inputRef = useRef < HTMLInputElement > null + const [filterText, setFilterText] = useState('') + + useEffect(() => { + if (!showMenu) { + // keep the menu open + setShowMenu(true) + } + }, [showMenu, setShowMenu]) + + const change = event => setFilterText?.(event.target.value) + + return ( + false}} + > + + + + + + ) +} +``` + ## Props ### Autocomplete.Input diff --git a/src/Autocomplete/Autocomplete.tsx b/src/Autocomplete/Autocomplete.tsx index d06b1f44bac..602a93c758a 100644 --- a/src/Autocomplete/Autocomplete.tsx +++ b/src/Autocomplete/Autocomplete.tsx @@ -97,6 +97,7 @@ export type {AutocompleteInputProps} from './AutocompleteInput' export type {AutocompleteMenuProps} from './AutocompleteMenu' export type {AutocompleteOverlayProps} from './AutocompleteOverlay' export default Object.assign(Autocomplete, { + Context: AutocompleteContext, Input: AutocompleteInput, Menu: AutocompleteMenu, Overlay: AutocompleteOverlay From 96ad635b3063af03e31fcac06cfe8bdea248d0d3 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 28 Jun 2022 11:09:38 -0500 Subject: [PATCH 2/4] Autocomplete: allow "falsely" input values (#2154) * fix: allow autocomplete input value to be falsely * chore: added changeset * fixes linting error Co-authored-by: Erik Hughes --- .changeset/cold-bottles-attend.md | 5 +++++ src/Autocomplete/AutocompleteInput.tsx | 4 +--- src/__tests__/Autocomplete.test.tsx | 8 ++++++++ 3 files changed, 14 insertions(+), 3 deletions(-) create mode 100644 .changeset/cold-bottles-attend.md diff --git a/.changeset/cold-bottles-attend.md b/.changeset/cold-bottles-attend.md new file mode 100644 index 00000000000..4447ed55e49 --- /dev/null +++ b/.changeset/cold-bottles-attend.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Allow "falsely/empty" Autocomplete.Input values diff --git a/src/Autocomplete/AutocompleteInput.tsx b/src/Autocomplete/AutocompleteInput.tsx index db31ba51ee2..20a5f0b7404 100644 --- a/src/Autocomplete/AutocompleteInput.tsx +++ b/src/Autocomplete/AutocompleteInput.tsx @@ -146,9 +146,7 @@ const AutocompleteInput = React.forwardRef( }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated]) useEffect(() => { - if (value) { - setInputValue(value.toString()) - } + setInputValue(typeof value !== 'undefined' ? value.toString() : '') }, [value, setInputValue]) return ( diff --git a/src/__tests__/Autocomplete.test.tsx b/src/__tests__/Autocomplete.test.tsx index 02007bb16c6..487c936d591 100644 --- a/src/__tests__/Autocomplete.test.tsx +++ b/src/__tests__/Autocomplete.test.tsx @@ -321,6 +321,14 @@ describe('Autocomplete', () => { inputNode && userEvent.type(inputNode, '{esc}') expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true') }) + + it('allows the value to be 0', () => { + const {getByDisplayValue} = HTMLRender( + + ) + + expect(getByDisplayValue('0')).toBeDefined() + }) }) describe('Autocomplete.Menu', () => { From 003cbcf0e5530d580636e4ce09e539317a95dc73 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 28 Jun 2022 11:57:42 -0500 Subject: [PATCH 3/4] fix: checkbox to useIsomorphicLayoutEffect (#2155) Co-authored-by: Erik Hughes --- .changeset/chilled-cats-smash.md | 5 ++ docs/package-lock.json | 105 ++++++++++++++++++++----------- src/Checkbox.tsx | 3 +- src/stories/Checkbox.stories.tsx | 3 +- 4 files changed, 79 insertions(+), 37 deletions(-) create mode 100644 .changeset/chilled-cats-smash.md diff --git a/.changeset/chilled-cats-smash.md b/.changeset/chilled-cats-smash.md new file mode 100644 index 00000000000..d1724cfb20d --- /dev/null +++ b/.changeset/chilled-cats-smash.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Update Checkbox component to useIsomorphicLayoutEffect instead of useLayoutEffect to support SSR diff --git a/docs/package-lock.json b/docs/package-lock.json index 222db9c2f47..1dfd0931612 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -28720,7 +28720,8 @@ "ws": { "version": "7.4.5", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz", - "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==" + "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==", + "requires": {} } } }, @@ -29078,7 +29079,8 @@ "@mdx-js/react": { "version": "1.6.22", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz", - "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==" + "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==", + "requires": {} }, "@mdx-js/util": { "version": "1.6.22", @@ -29293,7 +29295,8 @@ "@primer/octicons-react": { "version": "16.3.1", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.3.1.tgz", - "integrity": "sha512-uzTs8/CvLiW1/47cgMRkIK9bKWpnw+UonCbgczXErwSSLqMDHfiiTpobW1trvRuoiMgLwsPo0l7kBBdKBnmq3g==" + "integrity": "sha512-uzTs8/CvLiW1/47cgMRkIK9bKWpnw+UonCbgczXErwSSLqMDHfiiTpobW1trvRuoiMgLwsPo0l7kBBdKBnmq3g==", + "requires": {} }, "@primer/primitives": { "version": "4.1.0", @@ -29328,7 +29331,8 @@ "@primer/octicons-react": { "version": "16.1.1", "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz", - "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==" + "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==", + "requires": {} }, "@primer/primitives": { "version": "7.6.0", @@ -29340,7 +29344,8 @@ "@radix-ui/react-polymorphic": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz", - "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==" + "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==", + "requires": {} }, "@react-aria/ssr": { "version": "3.1.0", @@ -30474,7 +30479,8 @@ "acorn-jsx": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", - "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==" + "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==", + "requires": {} }, "acorn-walk": { "version": "6.2.0", @@ -30509,12 +30515,14 @@ "ajv-errors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", - "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==" + "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", + "requires": {} }, "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "requires": {} }, "alphanum-sort": { "version": "1.0.2", @@ -31041,7 +31049,8 @@ "babel-plugin-remove-graphql-queries": { "version": "2.16.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.16.1.tgz", - "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==" + "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==", + "requires": {} }, "babel-plugin-styled-components": { "version": "2.0.2", @@ -33112,7 +33121,8 @@ "cssnano-utils": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz", - "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==" + "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==", + "requires": {} }, "csso": { "version": "4.2.0", @@ -33743,7 +33753,8 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "requires": {} } } }, @@ -33767,7 +33778,8 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "requires": {} } } }, @@ -34489,7 +34501,8 @@ "eslint-plugin-react-hooks": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz", - "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==" + "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==", + "requires": {} }, "eslint-scope": { "version": "5.1.1", @@ -36270,7 +36283,8 @@ "babel-plugin-remove-graphql-queries": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-3.7.1.tgz", - "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==" + "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==", + "requires": {} }, "braces": { "version": "3.0.2", @@ -38011,7 +38025,8 @@ "ws": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz", - "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==" + "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==", + "requires": {} } } }, @@ -38471,12 +38486,14 @@ "graphql-type-json": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz", - "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==" + "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==", + "requires": {} }, "graphql-ws": { "version": "4.9.0", "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-4.9.0.tgz", - "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==" + "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==", + "requires": {} }, "gray-matter": { "version": "4.0.3", @@ -39000,7 +39017,8 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "requires": {} }, "ieee754": { "version": "1.2.1", @@ -39746,7 +39764,8 @@ "isomorphic-ws": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz", - "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==" + "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==", + "requires": {} }, "isstream": { "version": "0.1.2", @@ -40171,7 +40190,8 @@ "jest-pnp-resolver": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz", - "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==" + "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==", + "requires": {} }, "jest-regex-util": { "version": "24.9.0", @@ -41238,7 +41258,8 @@ "meros": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz", - "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==" + "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==", + "requires": {} }, "methods": { "version": "1.1.2", @@ -42551,27 +42572,32 @@ "postcss-discard-comments": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz", - "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==" + "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==", + "requires": {} }, "postcss-discard-duplicates": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz", - "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==" + "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==", + "requires": {} }, "postcss-discard-empty": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz", - "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==" + "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==", + "requires": {} }, "postcss-discard-overridden": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz", - "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==" + "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==", + "requires": {} }, "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", + "requires": {} }, "postcss-loader": { "version": "5.3.0", @@ -42697,7 +42723,8 @@ "postcss-modules-extract-imports": { "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==" + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "requires": {} }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -42735,7 +42762,8 @@ "postcss-normalize-charset": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz", - "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==" + "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==", + "requires": {} }, "postcss-normalize-display-values": { "version": "5.0.1", @@ -43106,7 +43134,8 @@ "prism-react-renderer": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz", - "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==" + "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==", + "requires": {} }, "prismjs": { "version": "1.28.0", @@ -43491,7 +43520,8 @@ "react-docgen-typescript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.0.0.tgz", - "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==" + "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==", + "requires": {} }, "react-dom": { "version": "17.0.1", @@ -43572,7 +43602,8 @@ "react-frame-component": { "version": "5.2.3", "resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-5.2.3.tgz", - "integrity": "sha512-r+h0o3r/uqOLNT724z4CRVkxQouKJvoi3OPfjqWACD30Y87rtEmeJrNZf1WYPGknn1Y8200HAjx7hY/dPUGgmA==" + "integrity": "sha512-r+h0o3r/uqOLNT724z4CRVkxQouKJvoi3OPfjqWACD30Y87rtEmeJrNZf1WYPGknn1Y8200HAjx7hY/dPUGgmA==", + "requires": {} }, "react-helmet": { "version": "6.1.0", @@ -43669,12 +43700,14 @@ "react-side-effect": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz", - "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==" + "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==", + "requires": {} }, "react-simple-code-editor": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz", - "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==" + "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==", + "requires": {} }, "react-style-singleton": { "version": "2.1.1", @@ -45828,7 +45861,8 @@ "stylis-rule-sheet": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", + "requires": {} }, "subscriptions-transport-ws": { "version": "0.9.19", @@ -47053,7 +47087,8 @@ "use-callback-ref": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz", - "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==" + "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==", + "requires": {} }, "use-sidecar": { "version": "1.0.5", diff --git a/src/Checkbox.tsx b/src/Checkbox.tsx index 058aa1b2e63..9eb881c4958 100644 --- a/src/Checkbox.tsx +++ b/src/Checkbox.tsx @@ -1,7 +1,8 @@ import styled from 'styled-components' import {useProvidedRefOrCreate} from './hooks' -import React, {ChangeEventHandler, InputHTMLAttributes, ReactElement, useContext, useLayoutEffect} from 'react' +import React, {ChangeEventHandler, InputHTMLAttributes, ReactElement, useContext} from 'react' import sx, {SxProp} from './sx' +import useLayoutEffect from './utils/useIsomorphicLayoutEffect' import {FormValidationStatus} from './utils/types/FormValidationStatus' import {CheckboxGroupContext} from './CheckboxGroup' import getGlobalFocusStyles from './_getGlobalFocusStyles' diff --git a/src/stories/Checkbox.stories.tsx b/src/stories/Checkbox.stories.tsx index 4f9b911ba4a..dca7c024cf1 100644 --- a/src/stories/Checkbox.stories.tsx +++ b/src/stories/Checkbox.stories.tsx @@ -1,8 +1,9 @@ -import React, {useLayoutEffect, useRef, useState} from 'react' +import React, {useRef, useState} from 'react' import {Meta} from '@storybook/react' import styled from 'styled-components' import {BaseStyles, Box, Checkbox, CheckboxProps, Text, ThemeProvider} from '..' +import useLayoutEffect from '../utils/useIsomorphicLayoutEffect' import {action} from '@storybook/addon-actions' import {get} from '../constants' From d09ea606c9a4f6e2cd5983df6b29bd08969f0688 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Tue, 28 Jun 2022 23:19:58 +0530 Subject: [PATCH 4/4] Change false to undefined (#2122) --- docs/content/NavList.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/NavList.mdx b/docs/content/NavList.mdx index 61f2cd0bf8f..b016fa8108d 100644 --- a/docs/content/NavList.mdx +++ b/docs/content/NavList.mdx @@ -184,7 +184,7 @@ function NavItem({to, children}) { const resolved = useResolvedPath(to) const isCurrent = useMatch({path: resolved.pathname, end: true}) return ( - + {children} )