Upgrade Reakit to version 1.0.0-rc.0 (#21300)

* Upgrade Reakit to version 1.0.0-rc.0 * Add comment on ToolbarContainer * Re-install reakit
WordPress · Mar 31, 2020 · 981a45d · 981a45d
1 parent 0ef1774
commit 981a45d
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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"
 >
   <div
@@ -8196,6 +8199,7 @@ exports[`Storyshots Components/Toolbar Default 1`] = `
       onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
+      onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
@@ -8233,6 +8237,7 @@ exports[`Storyshots Components/Toolbar Default 1`] = `
         onClick={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
+        onKeyUp={[Function]}
         onMouseDown={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -8264,6 +8269,7 @@ exports[`Storyshots Components/Toolbar Default 1`] = `
       onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
+      onKeyUp={[Function]}
       onMouseDown={[Function]}
       tabIndex={-1}
       type="button"
@@ -8279,6 +8285,7 @@ exports[`Storyshots Components/Toolbar Default 1`] = `
       onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
+      onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
@@ -8307,6 +8314,7 @@ exports[`Storyshots Components/Toolbar Default 1`] = `
       onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
+      onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
@@ -8335,6 +8343,7 @@ exports[`Storyshots Components/Toolbar Default 1`] = `
       onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
+      onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
@@ -8368,6 +8377,7 @@ exports[`Storyshots Components/Toolbar Default 1`] = `
         onClick={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
+        onKeyUp={[Function]}
         onMouseDown={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
@@ -8389,6 +8399,7 @@ exports[`Storyshots Components/Toolbar Default 1`] = `
       onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
+      onKeyUp={[Function]}
       onMouseDown={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
@@ -8419,6 +8430,9 @@ exports[`Storyshots Components/Toolbar Without Group 1`] = `
   aria-orientation="horizontal"
   className="components-accessible-toolbar"
   id="options-toolbar-without-group"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
   role="toolbar"
 >
   <button
@@ -8430,6 +8444,7 @@ exports[`Storyshots Components/Toolbar Without Group 1`] = `
     onClick={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
+    onKeyUp={[Function]}
     onMouseDown={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
@@ -8458,6 +8473,7 @@ exports[`Storyshots Components/Toolbar Without Group 1`] = `
     onClick={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
+    onKeyUp={[Function]}
     onMouseDown={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
@@ -8486,6 +8502,7 @@ exports[`Storyshots Components/Toolbar Without Group 1`] = `
     onClick={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
+    onKeyUp={[Function]}
     onMouseDown={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}