@wordpress/components 19.8.0 → 19.8.1

package/build/guide/index.js

@@ -17,14 +17,14 @@ var _i18n = require("@wordpress/i18n");
 
 var _keycodes = require("@wordpress/keycodes");
 
+var _dom = require("@wordpress/dom");
+
 var _modal = _interopRequireDefault(require("../modal"));
 
 var _button = _interopRequireDefault(require("../button"));
 
 var _pageControl = _interopRequireDefault(require("./page-control"));
 
-var _finishButton = _interopRequireDefault(require("./finish-button"));
-
 /**
  * External dependencies
  */
@@ -45,6 +45,7 @@ function Guide(_ref) {
     onFinish,
     pages = []
   } = _ref;
+  const guideContainer = (0, _element.useRef)();
   const [currentPage, setCurrentPage] = (0, _element.useState)(0);
   (0, _element.useEffect)(() => {
     if (_element.Children.count(children)) {
@@ -54,6 +55,13 @@ function Guide(_ref) {
       });
     }
   }, [children]);
+  (0, _element.useEffect)(() => {
+    var _focus$tabbable$find, _focus$tabbable$find$;
+
+    // Each time we change the current page, start from the first element of the page.
+    // This also solves any focus loss that can happen.
+    (_focus$tabbable$find = _dom.focus.tabbable.find(guideContainer.current)) === null || _focus$tabbable$find === void 0 ? void 0 : (_focus$tabbable$find$ = _focus$tabbable$find[0]) === null || _focus$tabbable$find$ === void 0 ? void 0 : _focus$tabbable$find$.focus();
+  }, [currentPage]);
 
   if (_element.Children.count(children)) {
     pages = _element.Children.map(children, child => ({
@@ -90,7 +98,8 @@ function Guide(_ref) {
       } else if (event.keyCode === _keycodes.RIGHT) {
         goForward();
       }
-    }
+    },
+    ref: guideContainer
   }, (0, _element.createElement)("div", {
     className: "components-guide__container"
   }, (0, _element.createElement)("div", {
@@ -99,10 +108,7 @@ function Guide(_ref) {
     currentPage: currentPage,
     numberOfPages: pages.length,
     setCurrentPage: setCurrentPage
-  }), pages[currentPage].content, !canGoForward && (0, _element.createElement)(_finishButton.default, {
-    className: "components-guide__inline-finish-button",
-    onClick: onFinish
-  }, finishButtonText || (0, _i18n.__)('Finish'))), (0, _element.createElement)("div", {
+  }), pages[currentPage].content), (0, _element.createElement)("div", {
     className: "components-guide__footer"
   }, canGoBack && (0, _element.createElement)(_button.default, {
     className: "components-guide__back-button",
@@ -110,7 +116,7 @@ function Guide(_ref) {
   }, (0, _i18n.__)('Previous')), canGoForward && (0, _element.createElement)(_button.default, {
     className: "components-guide__forward-button",
     onClick: goForward
-  }, (0, _i18n.__)('Next')), !canGoForward && (0, _element.createElement)(_finishButton.default, {
+  }, (0, _i18n.__)('Next')), !canGoForward && (0, _element.createElement)(_button.default, {
     className: "components-guide__finish-button",
     onClick: onFinish
   }, finishButtonText || (0, _i18n.__)('Finish')))));

package/build/guide/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/guide/index.js"],"names":["Guide","children","className","contentLabel","finishButtonText","onFinish","pages","currentPage","setCurrentPage","Children","count","since","alternative","map","child","content","canGoBack","canGoForward","length","goBack","goForward","event","keyCode","LEFT","RIGHT","image"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { LEFT, RIGHT } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport FinishButton from './finish-button';\n\nexport default function Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText,\n\tonFinish,\n\tpages = [],\n} ) {\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages = Children.map( children, ( child ) => ( { content: child } ) );\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ classnames( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.keyCode === LEFT ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t} else if ( event.keyCode === RIGHT ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<FinishButton\n\t\t\t\t\t\t\tclassName=\"components-guide__inline-finish-button\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText || __( 'Finish' ) }\n\t\t\t\t\t\t</FinishButton>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<FinishButton\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText || __( 'Finish' ) }\n\t\t\t\t\t\t</FinishButton>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/guide/index.js"],"names":["Guide","children","className","contentLabel","finishButtonText","onFinish","pages","guideContainer","currentPage","setCurrentPage","Children","count","since","alternative","tabbable","find","current","focus","map","child","content","canGoBack","canGoForward","length","goBack","goForward","event","keyCode","LEFT","RIGHT","image"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { LEFT, RIGHT } from '@wordpress/keycodes';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\n\nexport default function Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText,\n\tonFinish,\n\tpages = [],\n} ) {\n\tconst guideContainer = useRef();\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tuseEffect( () => {\n\t\t// Each time we change the current page, start from the first element of the page.\n\t\t// This also solves any focus loss that can happen.\n\t\tfocus.tabbable.find( guideContainer.current )?.[ 0 ]?.focus();\n\t}, [ currentPage ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages = Children.map( children, ( child ) => ( { content: child } ) );\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ classnames( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.keyCode === LEFT ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t} else if ( event.keyCode === RIGHT ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ guideContainer }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText || __( 'Finish' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n"]}

package/build-module/guide/index.js

@@ -8,10 +8,11 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
-import { useState, useEffect, Children } from '@wordpress/element';
+import { useState, useEffect, Children, useRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
+import { focus } from '@wordpress/dom';
 /**
  * Internal dependencies
  */
@@ -19,7 +20,6 @@ import { LEFT, RIGHT } from '@wordpress/keycodes';
 import Modal from '../modal';
 import Button from '../button';
 import PageControl from './page-control';
-import FinishButton from './finish-button';
 export default function Guide(_ref) {
   let {
     children,
@@ -29,6 +29,7 @@ export default function Guide(_ref) {
     onFinish,
     pages = []
   } = _ref;
+  const guideContainer = useRef();
   const [currentPage, setCurrentPage] = useState(0);
   useEffect(() => {
     if (Children.count(children)) {
@@ -38,6 +39,13 @@ export default function Guide(_ref) {
       });
     }
   }, [children]);
+  useEffect(() => {
+    var _focus$tabbable$find, _focus$tabbable$find$;
+
+    // Each time we change the current page, start from the first element of the page.
+    // This also solves any focus loss that can happen.
+    (_focus$tabbable$find = focus.tabbable.find(guideContainer.current)) === null || _focus$tabbable$find === void 0 ? void 0 : (_focus$tabbable$find$ = _focus$tabbable$find[0]) === null || _focus$tabbable$find$ === void 0 ? void 0 : _focus$tabbable$find$.focus();
+  }, [currentPage]);
 
   if (Children.count(children)) {
     pages = Children.map(children, child => ({
@@ -74,7 +82,8 @@ export default function Guide(_ref) {
       } else if (event.keyCode === RIGHT) {
         goForward();
       }
-    }
+    },
+    ref: guideContainer
   }, createElement("div", {
     className: "components-guide__container"
   }, createElement("div", {
@@ -83,10 +92,7 @@ export default function Guide(_ref) {
     currentPage: currentPage,
     numberOfPages: pages.length,
     setCurrentPage: setCurrentPage
-  }), pages[currentPage].content, !canGoForward && createElement(FinishButton, {
-    className: "components-guide__inline-finish-button",
-    onClick: onFinish
-  }, finishButtonText || __('Finish'))), createElement("div", {
+  }), pages[currentPage].content), createElement("div", {
     className: "components-guide__footer"
   }, canGoBack && createElement(Button, {
     className: "components-guide__back-button",
@@ -94,7 +100,7 @@ export default function Guide(_ref) {
   }, __('Previous')), canGoForward && createElement(Button, {
     className: "components-guide__forward-button",
     onClick: goForward
-  }, __('Next')), !canGoForward && createElement(FinishButton, {
+  }, __('Next')), !canGoForward && createElement(Button, {
     className: "components-guide__finish-button",
     onClick: onFinish
   }, finishButtonText || __('Finish')))));

package/build-module/guide/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/guide/index.js"],"names":["classnames","useState","useEffect","Children","deprecated","__","LEFT","RIGHT","Modal","Button","PageControl","FinishButton","Guide","children","className","contentLabel","finishButtonText","onFinish","pages","currentPage","setCurrentPage","count","since","alternative","map","child","content","canGoBack","canGoForward","length","goBack","goForward","event","keyCode","image"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { LEFT, RIGHT } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport FinishButton from './finish-button';\n\nexport default function Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText,\n\tonFinish,\n\tpages = [],\n} ) {\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages = Children.map( children, ( child ) => ( { content: child } ) );\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ classnames( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.keyCode === LEFT ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t} else if ( event.keyCode === RIGHT ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t}\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<FinishButton\n\t\t\t\t\t\t\tclassName=\"components-guide__inline-finish-button\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText || __( 'Finish' ) }\n\t\t\t\t\t\t</FinishButton>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<FinishButton\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText || __( 'Finish' ) }\n\t\t\t\t\t\t</FinishButton>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/guide/index.js"],"names":["classnames","useState","useEffect","Children","useRef","deprecated","__","LEFT","RIGHT","focus","Modal","Button","PageControl","Guide","children","className","contentLabel","finishButtonText","onFinish","pages","guideContainer","currentPage","setCurrentPage","count","since","alternative","tabbable","find","current","map","child","content","canGoBack","canGoForward","length","goBack","goForward","event","keyCode","image"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport { LEFT, RIGHT } from '@wordpress/keycodes';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\n\nexport default function Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText,\n\tonFinish,\n\tpages = [],\n} ) {\n\tconst guideContainer = useRef();\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tif ( Children.count( children ) ) {\n\t\t\tdeprecated( 'Passing children to <Guide>', {\n\t\t\t\tsince: '5.5',\n\t\t\t\talternative: 'the `pages` prop',\n\t\t\t} );\n\t\t}\n\t}, [ children ] );\n\n\tuseEffect( () => {\n\t\t// Each time we change the current page, start from the first element of the page.\n\t\t// This also solves any focus loss that can happen.\n\t\tfocus.tabbable.find( guideContainer.current )?.[ 0 ]?.focus();\n\t}, [ currentPage ] );\n\n\tif ( Children.count( children ) ) {\n\t\tpages = Children.map( children, ( child ) => ( { content: child } ) );\n\t}\n\n\tconst canGoBack = currentPage > 0;\n\tconst canGoForward = currentPage < pages.length - 1;\n\n\tconst goBack = () => {\n\t\tif ( canGoBack ) {\n\t\t\tsetCurrentPage( currentPage - 1 );\n\t\t}\n\t};\n\n\tconst goForward = () => {\n\t\tif ( canGoForward ) {\n\t\t\tsetCurrentPage( currentPage + 1 );\n\t\t}\n\t};\n\n\tif ( pages.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName={ classnames( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.keyCode === LEFT ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t} else if ( event.keyCode === RIGHT ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ guideContainer }\n\t\t>\n\t\t\t<div className=\"components-guide__container\">\n\t\t\t\t<div className=\"components-guide__page\">\n\t\t\t\t\t{ pages[ currentPage ].image }\n\n\t\t\t\t\t{ pages.length > 1 && (\n\t\t\t\t\t\t<PageControl\n\t\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\t\tnumberOfPages={ pages.length }\n\t\t\t\t\t\t\tsetCurrentPage={ setCurrentPage }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ pages[ currentPage ].content }\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"components-guide__footer\">\n\t\t\t\t\t{ canGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__back-button\"\n\t\t\t\t\t\t\tonClick={ goBack }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Previous' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__forward-button\"\n\t\t\t\t\t\t\tonClick={ goForward }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Next' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canGoForward && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-guide__finish-button\"\n\t\t\t\t\t\t\tonClick={ onFinish }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText || __( 'Finish' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n"]}

package/build-style/style-rtl.css

@@ -3036,9 +3036,6 @@ body.is-dragging-components-draggable {
 .components-button.components-guide__finish-button {
   left: 32px;
 }
-.components-button.components-guide__inline-finish-button {
-  display: none;
-}
 
 [role=region] {
   position: relative;

package/build-style/style.css

@@ -3044,9 +3044,6 @@ body.is-dragging-components-draggable {
 .components-button.components-guide__finish-button {
   right: 32px;
 }
-.components-button.components-guide__inline-finish-button {
-  display: none;
-}
 
 [role=region] {
   position: relative;

package/build-types/input-control/stories/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import InputControl from '..';
+declare const meta: ComponentMeta<typeof InputControl>;
+export default meta;
+export declare const Default: ComponentStory<import("react").ForwardRefExoticComponent<Pick<import("../types").InputControlProps, "dangerouslySetInnerHTML" | "onDrag" | "onDragStart" | "onDragEnd" | "onWheel" | "onScroll" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "type" | "width" | "color" | "hidden" | "prefix" | "suffix" | "disabled" | "className" | "id" | "label" | "__unstableInputWidth" | "hideLabelFromVision" | "labelPosition" | "size" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "src" | "step" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dragDirection" | "dragThreshold" | "isDragEnabled" | "isPressEnterToChange" | "onValidate" | "__unstableStateReducer"> & import("react").RefAttributes<HTMLInputElement>>>;
+export declare const WithPrefix: ComponentStory<import("react").ForwardRefExoticComponent<Pick<import("../types").InputControlProps, "dangerouslySetInnerHTML" | "onDrag" | "onDragStart" | "onDragEnd" | "onWheel" | "onScroll" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "type" | "width" | "color" | "hidden" | "prefix" | "suffix" | "disabled" | "className" | "id" | "label" | "__unstableInputWidth" | "hideLabelFromVision" | "labelPosition" | "size" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "src" | "step" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dragDirection" | "dragThreshold" | "isDragEnabled" | "isPressEnterToChange" | "onValidate" | "__unstableStateReducer"> & import("react").RefAttributes<HTMLInputElement>>>;
+export declare const WithSuffix: ComponentStory<import("react").ForwardRefExoticComponent<Pick<import("../types").InputControlProps, "dangerouslySetInnerHTML" | "onDrag" | "onDragStart" | "onDragEnd" | "onWheel" | "onScroll" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "type" | "width" | "color" | "hidden" | "prefix" | "suffix" | "disabled" | "className" | "id" | "label" | "__unstableInputWidth" | "hideLabelFromVision" | "labelPosition" | "size" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "src" | "step" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dragDirection" | "dragThreshold" | "isDragEnabled" | "isPressEnterToChange" | "onValidate" | "__unstableStateReducer"> & import("react").RefAttributes<HTMLInputElement>>>;
+export declare const WithSideLabel: ComponentStory<import("react").ForwardRefExoticComponent<Pick<import("../types").InputControlProps, "dangerouslySetInnerHTML" | "onDrag" | "onDragStart" | "onDragEnd" | "onWheel" | "onScroll" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "type" | "width" | "color" | "hidden" | "prefix" | "suffix" | "disabled" | "className" | "id" | "label" | "__unstableInputWidth" | "hideLabelFromVision" | "labelPosition" | "size" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "src" | "step" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dragDirection" | "dragThreshold" | "isDragEnabled" | "isPressEnterToChange" | "onValidate" | "__unstableStateReducer"> & import("react").RefAttributes<HTMLInputElement>>>;
+export declare const WithEdgeLabel: ComponentStory<import("react").ForwardRefExoticComponent<Pick<import("../types").InputControlProps, "dangerouslySetInnerHTML" | "onDrag" | "onDragStart" | "onDragEnd" | "onWheel" | "onScroll" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "type" | "width" | "color" | "hidden" | "prefix" | "suffix" | "disabled" | "className" | "id" | "label" | "__unstableInputWidth" | "hideLabelFromVision" | "labelPosition" | "size" | "form" | "slot" | "style" | "title" | "pattern" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "src" | "step" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dragDirection" | "dragThreshold" | "isDragEnabled" | "isPressEnterToChange" | "onValidate" | "__unstableStateReducer"> & import("react").RefAttributes<HTMLInputElement>>>;
+//# sourceMappingURL=index.d.ts.map

package/build-types/input-control/stories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/input-control/stories/index.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,YAAY,MAAM,IAAI,CAAC;AAE9B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,YAAY,CAe7C,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,+tKAAsB,CAAC;AAO3C,eAAO,MAAM,UAAU,+tKAAsB,CAAC;AAM9C,eAAO,MAAM,UAAU,+tKAAsB,CAAC;AAM9C,eAAO,MAAM,aAAa,+tKAAsB,CAAC;AAMjD,eAAO,MAAM,aAAa,+tKAAsB,CAAC"}

package/build-types/spinner/styles/spinner-styles.d.ts

@@ -0,0 +1,5 @@
+export const StyledSpinner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+//# sourceMappingURL=spinner-styles.d.ts.map

package/build-types/spinner/styles/spinner-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-styles.d.ts","sourceRoot":"","sources":["../../../src/spinner/styles/spinner-styles.js"],"names":[],"mappings":"AAuBA;;;4GAuBE"}

package/build-types/toggle-group-control/toggle-group-control-option/styles.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const LabelView: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const labelBlock: import("@emotion/utils").SerializedStyles;
+export declare const buttonView: import("@emotion/utils").SerializedStyles;
+export declare const buttonActive: import("@emotion/utils").SerializedStyles;
+export declare const ButtonContentView: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const separatorActive: import("@emotion/utils").SerializedStyles;
+export declare const medium: import("@emotion/utils").SerializedStyles;
+//# sourceMappingURL=styles.d.ts.map

package/build-types/toggle-group-control/toggle-group-control-option/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option/styles.ts"],"names":[],"mappings":";AAWA,eAAO,MAAM,SAAS;;;yGAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,2CAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,2CA+BtB,CAAC;AAEF,eAAO,MAAM,YAAY,2CAGxB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAG7B,CAAC;AAEF,eAAO,MAAM,eAAe,2CAE3B,CAAC;AAEF,eAAO,MAAM,MAAM,2CAElB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.8.0",
+	"version": "19.8.1",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,21 +37,21 @@
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "1.0.0",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.6.0",
-		"@wordpress/compose": "^5.4.0",
-		"@wordpress/date": "^4.6.0",
-		"@wordpress/deprecated": "^3.6.0",
-		"@wordpress/dom": "^3.6.0",
-		"@wordpress/element": "^4.4.0",
-		"@wordpress/escape-html": "^2.6.0",
-		"@wordpress/hooks": "^3.6.0",
-		"@wordpress/i18n": "^4.6.0",
-		"@wordpress/icons": "^8.2.0",
-		"@wordpress/is-shallow-equal": "^4.6.0",
-		"@wordpress/keycodes": "^3.6.0",
-		"@wordpress/primitives": "^3.4.0",
-		"@wordpress/rich-text": "^5.4.0",
-		"@wordpress/warning": "^2.6.0",
+		"@wordpress/a11y": "^3.6.1",
+		"@wordpress/compose": "^5.4.1",
+		"@wordpress/date": "^4.6.1",
+		"@wordpress/deprecated": "^3.6.1",
+		"@wordpress/dom": "^3.6.1",
+		"@wordpress/element": "^4.4.1",
+		"@wordpress/escape-html": "^2.6.1",
+		"@wordpress/hooks": "^3.6.1",
+		"@wordpress/i18n": "^4.6.1",
+		"@wordpress/icons": "^8.2.1",
+		"@wordpress/is-shallow-equal": "^4.6.1",
+		"@wordpress/keycodes": "^3.6.1",
+		"@wordpress/primitives": "^3.4.1",
+		"@wordpress/rich-text": "^5.4.1",
+		"@wordpress/warning": "^2.6.1",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",
@@ -76,5 +76,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "11eb1241e63c9240018323551c6753f8a5fa96f9"
+	"gitHead": "446565ecaa40370173c18926535e975ec5652b71"
 }

package/src/guide/index.js

@@ -6,10 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, Children } from '@wordpress/element';
+import { useState, useEffect, Children, useRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
+import { focus } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -17,7 +18,6 @@ import { LEFT, RIGHT } from '@wordpress/keycodes';
 import Modal from '../modal';
 import Button from '../button';
 import PageControl from './page-control';
-import FinishButton from './finish-button';
 
 export default function Guide( {
 	children,
@@ -27,6 +27,7 @@ export default function Guide( {
 	onFinish,
 	pages = [],
 } ) {
+	const guideContainer = useRef();
 	const [ currentPage, setCurrentPage ] = useState( 0 );
 
 	useEffect( () => {
@@ -38,6 +39,12 @@ export default function Guide( {
 		}
 	}, [ children ] );
 
+	useEffect( () => {
+		// Each time we change the current page, start from the first element of the page.
+		// This also solves any focus loss that can happen.
+		focus.tabbable.find( guideContainer.current )?.[ 0 ]?.focus();
+	}, [ currentPage ] );
+
 	if ( Children.count( children ) ) {
 		pages = Children.map( children, ( child ) => ( { content: child } ) );
 	}
@@ -73,6 +80,7 @@ export default function Guide( {
 					goForward();
 				}
 			} }
+			ref={ guideContainer }
 		>
 			<div className="components-guide__container">
 				<div className="components-guide__page">
@@ -87,15 +95,6 @@ export default function Guide( {
 					) }
 
 					{ pages[ currentPage ].content }
-
-					{ ! canGoForward && (
-						<FinishButton
-							className="components-guide__inline-finish-button"
-							onClick={ onFinish }
-						>
-							{ finishButtonText || __( 'Finish' ) }
-						</FinishButton>
-					) }
 				</div>
 
 				<div className="components-guide__footer">
@@ -116,12 +115,12 @@ export default function Guide( {
 						</Button>
 					) }
 					{ ! canGoForward && (
-						<FinishButton
+						<Button
 							className="components-guide__finish-button"
 							onClick={ onFinish }
 						>
 							{ finishButtonText || __( 'Finish' ) }
-						</FinishButton>
+						</Button>
 					) }
 				</div>
 			</div>

package/src/guide/style.scss

@@ -128,8 +128,4 @@
 	&.components-guide__finish-button {
 		right: $grid-unit-40;
 	}
-
-	&.components-guide__inline-finish-button {
-		display: none;
-	}
 }