diff --git a/package-lock.json b/package-lock.json index 7ac44e1cef6dc8..944466c6a8383b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6571,6 +6571,11 @@ } } }, + "@popperjs/core": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.1.1.tgz", + "integrity": "sha512-sLqWxCzC5/QHLhziXSCAksBxHfOnQlhPRVgPK0egEw+ktWvG75T2k+aYWVjVh9+WKeT3tlG3ZNbZQvZLmfuOIw==" + }, "@reach/router": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.2.1.tgz", @@ -10658,7 +10663,7 @@ "re-resizable": "^6.0.0", "react-dates": "^17.1.1", "react-spring": "^8.0.20", - "reakit": "^1.0.0-beta.12", + "reakit": "^1.0.0-rc.0", "rememo": "^3.0.0", "tinycolor2": "^1.4.1", "uuid": "^3.3.2" @@ -14339,9 +14344,9 @@ } }, "body-scroll-lock": { - "version": "2.6.4", - "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-2.6.4.tgz", - "integrity": "sha512-NP08WsovlmxEoZP9pdlqrE+AhNaivlTrz9a0FF37BQsnOrpN48eNqivKkE7SYpM9N+YIPjsdVzfLAUQDBm6OQw==" + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-2.7.1.tgz", + "integrity": "sha512-hS53SQ8RhM0e4DsQ3PKz6Gr2O7Kpdh59TWU98GHjaQznL7y4dFycEPk7pFQAikqBaUSCArkc5E3pe7CWIt2fZA==" }, "boolbase": { "version": "1.0.0", @@ -35162,32 +35167,37 @@ } }, "reakit": { - "version": "1.0.0-beta.12", - "resolved": "https://registry.npmjs.org/reakit/-/reakit-1.0.0-beta.12.tgz", - "integrity": "sha512-jf/0RWmJypG9wFbbCSj9mFxb474TCFnAweKnrh3yLJiMjKDEAFXic0cNyhqxSuOUUyZeT67bUFbu25DXBNfRmQ==", + "version": "1.0.0-rc.0", + "resolved": "https://registry.npmjs.org/reakit/-/reakit-1.0.0-rc.0.tgz", + "integrity": "sha512-jG9RfLE9DX3XP6xiUmindu8dJmd4rLs+ohQ2xppF9LVYQ/7Qa9B4kz8mNYbe42u8muE3nMM78T2RfXz+c/ZMsQ==", "requires": { + "@popperjs/core": "^2.1.0", "body-scroll-lock": "^2.6.4", - "popper.js": "^1.16.0", - "reakit-system": "^0.7.0", - "reakit-utils": "^0.7.1" - }, - "dependencies": { - "popper.js": { - "version": "1.16.0", - "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.0.tgz", - "integrity": "sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw==" - } + "reakit-system": "^0.10.0", + "reakit-utils": "^0.10.0", + "reakit-warning": "^0.1.0" } }, "reakit-system": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/reakit-system/-/reakit-system-0.7.0.tgz", - "integrity": "sha512-6MaQsoyIhU0b0RGfIfGSSGujCx0XVBtfJkRcn+TviiWwMXGS9liTCDBE1vn7fLnUYiR6kqll50Nmw//oIn97cg==" + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/reakit-system/-/reakit-system-0.10.0.tgz", + "integrity": "sha512-73ZI50NB2A6WAF3OsPJEEz73fax5cFiMoGMx3KxPT/AcS39rPqlBW6QkawtZC1HUebQXlsLxwZWicoFt8UubmQ==", + "requires": { + "reakit-utils": "^0.10.0" + } }, "reakit-utils": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/reakit-utils/-/reakit-utils-0.7.1.tgz", - "integrity": "sha512-xQJctof9V+wkC7OxSL7P14d5Se6l/apCfhY8liIfVihtakzXOkvKea4Ka/TbEfpoTKN7MRO4xNMxjfzuGFexHQ==" + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/reakit-utils/-/reakit-utils-0.10.0.tgz", + "integrity": "sha512-s1+nqLYrHo54U38iETdY86+VD+CZBTqF9rxMmphuft1Iz1i+L+OqOVJMq5sviBkTiEz8zRMhrNLcjBERFiPnkA==" + }, + "reakit-warning": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/reakit-warning/-/reakit-warning-0.1.0.tgz", + "integrity": "sha512-nfujYGWoZ1lh6eAFTVQc2aNjrAEf30PHffJw8Q8tiJJY4Knoy7eLA4jQGHTl3gOjhA9+Yd8KSmiLoOPlr6A0kA==", + "requires": { + "reakit-utils": "^0.10.0" + } }, "realpath-native": { "version": "1.1.0", diff --git a/packages/components/package.json b/packages/components/package.json index a0bb3df0616003..60ad93996bf171 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -53,7 +53,7 @@ "re-resizable": "^6.0.0", "react-dates": "^17.1.1", "react-spring": "^8.0.20", - "reakit": "^1.0.0-beta.12", + "reakit": "^1.0.0-rc.0", "rememo": "^3.0.0", "tinycolor2": "^1.4.1", "uuid": "^3.3.2" diff --git a/packages/components/src/toolbar/toolbar-container.js b/packages/components/src/toolbar/toolbar-container.js index d40843ddab3f3f..2ea7cfc7fee8c9 100644 --- a/packages/components/src/toolbar/toolbar-container.js +++ b/packages/components/src/toolbar/toolbar-container.js @@ -15,7 +15,9 @@ import ToolbarContext from '../toolbar-context'; function ToolbarContainer( { accessibilityLabel, ...props }, ref ) { // https://reakit.io/docs/basic-concepts/#state-hooks - const toolbarState = useToolbarState( { loop: true } ); + // Passing baseId for server side rendering (which includes snapshots) + // If an id prop is passed to Toolbar, toolbar items will use it as a base for their ids + const toolbarState = useToolbarState( { loop: true, baseId: props.id } ); return ( // This will provide state for `ToolbarButton`'s diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 6c6f1e246e5915..12b52f0dc662e9 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -8183,6 +8183,9 @@ exports[`Storyshots Components/Toolbar Default 1`] = ` aria-orientation="horizontal" className="components-accessible-toolbar" id="options-toolbar" + onFocus={[Function]} + onKeyDown={[Function]} + onKeyUp={[Function]} role="toolbar" >