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/.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/.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/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}
)
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/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
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/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/__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', () => {
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'