@wordpress/components 27.6.0 → 28.0.1

package/build/guide/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
@@ -13,6 +12,7 @@ var _i18n = require("@wordpress/i18n");
 var _modal = _interopRequireDefault(require("../modal"));
 var _button = _interopRequireDefault(require("../button"));
 var _pageControl = _interopRequireDefault(require("./page-control"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -103,7 +103,7 @@ function Guide({
   if (pages.length === 0) {
     return null;
   }
-  return (0, _react.createElement)(_modal.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.default, {
     className: (0, _clsx.default)('components-guide', className),
     contentLabel: contentLabel,
     isDismissible: pages.length > 1,
@@ -119,30 +119,37 @@ function Guide({
         event.preventDefault();
       }
     },
-    ref: ref
-  }, (0, _react.createElement)("div", {
-    className: "components-guide__container"
-  }, (0, _react.createElement)("div", {
-    className: "components-guide__page"
-  }, pages[currentPage].image, pages.length > 1 && (0, _react.createElement)(_pageControl.default, {
-    currentPage: currentPage,
-    numberOfPages: pages.length,
-    setCurrentPage: setCurrentPage
-  }), pages[currentPage].content), (0, _react.createElement)("div", {
-    className: "components-guide__footer"
-  }, canGoBack && (0, _react.createElement)(_button.default, {
-    className: "components-guide__back-button",
-    variant: "tertiary",
-    onClick: goBack
-  }, (0, _i18n.__)('Previous')), canGoForward && (0, _react.createElement)(_button.default, {
-    className: "components-guide__forward-button",
-    variant: "primary",
-    onClick: goForward
-  }, (0, _i18n.__)('Next')), !canGoForward && (0, _react.createElement)(_button.default, {
-    className: "components-guide__finish-button",
-    variant: "primary",
-    onClick: onFinish
-  }, finishButtonText))));
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "components-guide__container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "components-guide__page",
+        children: [pages[currentPage].image, pages.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_pageControl.default, {
+          currentPage: currentPage,
+          numberOfPages: pages.length,
+          setCurrentPage: setCurrentPage
+        }), pages[currentPage].content]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "components-guide__footer",
+        children: [canGoBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+          className: "components-guide__back-button",
+          variant: "tertiary",
+          onClick: goBack,
+          children: (0, _i18n.__)('Previous')
+        }), canGoForward && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+          className: "components-guide__forward-button",
+          variant: "primary",
+          onClick: goForward,
+          children: (0, _i18n.__)('Next')
+        }), !canGoForward && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+          className: "components-guide__finish-button",
+          variant: "primary",
+          onClick: onFinish,
+          children: finishButtonText
+        })]
+      })]
+    })
+  });
 }
 var _default = exports.default = Guide;
 //# sourceMappingURL=index.js.map

package/build/guide/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_deprecated","_i18n","_modal","_button","_pageControl","Guide","children","className","contentLabel","finishButtonText","__","onFinish","pages","ref","useRef","currentPage","setCurrentPage","useState","useEffect","frame","current","querySelector","HTMLElement","focus","Children","count","deprecated","since","alternative","_Children$map","map","child","content","canGoBack","canGoForward","length","goBack","goForward","_react","createElement","default","clsx","isDismissible","onRequestClose","onKeyDown","event","code","preventDefault","image","numberOfPages","variant","onClick","_default","exports"],"sources":["@wordpress/components/src/guide/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport type { GuideProps } from './types';\n\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText = __( 'Finish' ),\n\tonFinish,\n\tpages = [],\n}: GuideProps ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\t// Place focus at the top of the guide on mount and when the page changes.\n\t\tconst frame = ref.current?.querySelector( '.components-guide' );\n\t\tif ( frame instanceof HTMLElement ) {\n\t\t\tframe.focus();\n\t\t}\n\t}, [ currentPage ] );\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 =\n\t\t\tChildren.map( children, ( child ) => ( {\n\t\t\t\tcontent: child,\n\t\t\t} ) ) ?? [];\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={ clsx( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tisDismissible={ pages.length > 1 }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ ref }\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\tvariant=\"tertiary\"\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\tvariant=\"primary\"\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\tvariant=\"primary\"\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 }\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\nexport default Guide;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_deprecated","_i18n","_modal","_button","_pageControl","_jsxRuntime","Guide","children","className","contentLabel","finishButtonText","__","onFinish","pages","ref","useRef","currentPage","setCurrentPage","useState","useEffect","frame","current","querySelector","HTMLElement","focus","Children","count","deprecated","since","alternative","_Children$map","map","child","content","canGoBack","canGoForward","length","goBack","goForward","jsx","default","clsx","isDismissible","onRequestClose","onKeyDown","event","code","preventDefault","jsxs","image","numberOfPages","variant","onClick","_default","exports"],"sources":["@wordpress/components/src/guide/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport type { GuideProps } from './types';\n\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide( {\n\tchildren,\n\tclassName,\n\tcontentLabel,\n\tfinishButtonText = __( 'Finish' ),\n\tonFinish,\n\tpages = [],\n}: GuideProps ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\tconst [ currentPage, setCurrentPage ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\t// Place focus at the top of the guide on mount and when the page changes.\n\t\tconst frame = ref.current?.querySelector( '.components-guide' );\n\t\tif ( frame instanceof HTMLElement ) {\n\t\t\tframe.focus();\n\t\t}\n\t}, [ currentPage ] );\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 =\n\t\t\tChildren.map( children, ( child ) => ( {\n\t\t\t\tcontent: child,\n\t\t\t} ) ) ?? [];\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={ clsx( 'components-guide', className ) }\n\t\t\tcontentLabel={ contentLabel }\n\t\t\tisDismissible={ pages.length > 1 }\n\t\t\tonRequestClose={ onFinish }\n\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\tgoBack();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\tgoForward();\n\t\t\t\t\t// Do not scroll the modal's contents.\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tref={ ref }\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\tvariant=\"tertiary\"\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\tvariant=\"primary\"\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\tvariant=\"primary\"\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 }\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\nexport default Guide;\n"],"mappings":"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","ignoreList":[]}

package/build/guide/page-control.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = PageControl;
-var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _button = _interopRequireDefault(require("../button"));
 var _icons = require("./icons");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -22,22 +22,21 @@ function PageControl({
   numberOfPages,
   setCurrentPage
 }) {
-  return (0, _react.createElement)("ul", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
     className: "components-guide__page-control",
-    "aria-label": (0, _i18n.__)('Guide controls')
-  }, Array.from({
-    length: numberOfPages
-  }).map((_, page) => (0, _react.createElement)("li", {
-    key: page
-    // Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current
-    ,
-    "aria-current": page === currentPage ? 'step' : undefined
-  }, (0, _react.createElement)(_button.default, {
-    key: page,
-    icon: (0, _react.createElement)(_icons.PageControlIcon, null),
-    "aria-label": (0, _i18n.sprintf)( /* translators: 1: current page number 2: total number of pages */
-    (0, _i18n.__)('Page %1$d of %2$d'), page + 1, numberOfPages),
-    onClick: () => setCurrentPage(page)
-  }))));
+    "aria-label": (0, _i18n.__)('Guide controls'),
+    children: Array.from({
+      length: numberOfPages
+    }).map((_, page) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      // Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current
+      "aria-current": page === currentPage ? 'step' : undefined,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PageControlIcon, {}),
+        "aria-label": (0, _i18n.sprintf)( /* translators: 1: current page number 2: total number of pages */
+        (0, _i18n.__)('Page %1$d of %2$d'), page + 1, numberOfPages),
+        onClick: () => setCurrentPage(page)
+      }, page)
+    }, page))
+  });
 }
 //# sourceMappingURL=page-control.js.map

package/build/guide/page-control.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_button","_interopRequireDefault","_icons","PageControl","currentPage","numberOfPages","setCurrentPage","_react","createElement","className","__","Array","from","length","map","_","page","key","undefined","default","icon","PageControlIcon","sprintf","onClick"],"sources":["@wordpress/components/src/guide/page-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { PageControlIcon } from './icons';\nimport type { PageControlProps } from './types';\n\nexport default function PageControl( {\n\tcurrentPage,\n\tnumberOfPages,\n\tsetCurrentPage,\n}: PageControlProps ) {\n\treturn (\n\t\t<ul\n\t\t\tclassName=\"components-guide__page-control\"\n\t\t\taria-label={ __( 'Guide controls' ) }\n\t\t>\n\t\t\t{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={ page }\n\t\t\t\t\t// Set aria-current=\"step\" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current\n\t\t\t\t\taria-current={ page === currentPage ? 'step' : undefined }\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ page }\n\t\t\t\t\t\ticon={ <PageControlIcon /> }\n\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t/* translators: 1: current page number 2: total number of pages */\n\t\t\t\t\t\t\t__( 'Page %1$d of %2$d' ),\n\t\t\t\t\t\t\tpage + 1,\n\t\t\t\t\t\t\tnumberOfPages\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => setCurrentPage( page ) }\n\t\t\t\t\t/>\n\t\t\t\t</li>\n\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAKe,SAASI,WAAWA,CAAE;EACpCC,WAAW;EACXC,aAAa;EACbC;AACiB,CAAC,EAAG;EACrB,OACC,IAAAC,MAAA,CAAAC,aAAA;IACCC,SAAS,EAAC,gCAAgC;IAC1C,cAAa,IAAAC,QAAE,EAAE,gBAAiB;EAAG,GAEnCC,KAAK,CAACC,IAAI,CAAE;IAAEC,MAAM,EAAER;EAAc,CAAE,CAAC,CAACS,GAAG,CAAE,CAAEC,CAAC,EAAEC,IAAI,KACvD,IAAAT,MAAA,CAAAC,aAAA;IACCS,GAAG,EAAGD;IACN;IAAA;IACA,gBAAeA,IAAI,KAAKZ,WAAW,GAAG,MAAM,GAAGc;EAAW,GAE1D,IAAAX,MAAA,CAAAC,aAAA,EAACR,OAAA,CAAAmB,OAAM;IACNF,GAAG,EAAGD,IAAM;IACZI,IAAI,EAAG,IAAAb,MAAA,CAAAC,aAAA,EAACN,MAAA,CAAAmB,eAAe,MAAE,CAAG;IAC5B,cAAa,IAAAC,aAAO,GACnB;IACA,IAAAZ,QAAE,EAAE,mBAAoB,CAAC,EACzBM,IAAI,GAAG,CAAC,EACRX,aACD,CAAG;IACHkB,OAAO,EAAGA,CAAA,KAAMjB,cAAc,CAAEU,IAAK;EAAG,CACxC,CACE,CACH,CACC,CAAC;AAEP","ignoreList":[]}
+{"version":3,"names":["_i18n","require","_button","_interopRequireDefault","_icons","_jsxRuntime","PageControl","currentPage","numberOfPages","setCurrentPage","jsx","className","__","children","Array","from","length","map","_","page","undefined","default","icon","PageControlIcon","sprintf","onClick"],"sources":["@wordpress/components/src/guide/page-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { PageControlIcon } from './icons';\nimport type { PageControlProps } from './types';\n\nexport default function PageControl( {\n\tcurrentPage,\n\tnumberOfPages,\n\tsetCurrentPage,\n}: PageControlProps ) {\n\treturn (\n\t\t<ul\n\t\t\tclassName=\"components-guide__page-control\"\n\t\t\taria-label={ __( 'Guide controls' ) }\n\t\t>\n\t\t\t{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={ page }\n\t\t\t\t\t// Set aria-current=\"step\" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current\n\t\t\t\t\taria-current={ page === currentPage ? 'step' : undefined }\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ page }\n\t\t\t\t\t\ticon={ <PageControlIcon /> }\n\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t/* translators: 1: current page number 2: total number of pages */\n\t\t\t\t\t\t\t__( 'Page %1$d of %2$d' ),\n\t\t\t\t\t\t\tpage + 1,\n\t\t\t\t\t\t\tnumberOfPages\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => setCurrentPage( page ) }\n\t\t\t\t\t/>\n\t\t\t\t</li>\n\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAA0C,IAAAI,WAAA,GAAAJ,OAAA;AAT1C;AACA;AACA;;AAGA;AACA;AACA;;AAKe,SAASK,WAAWA,CAAE;EACpCC,WAAW;EACXC,aAAa;EACbC;AACiB,CAAC,EAAG;EACrB,oBACC,IAAAJ,WAAA,CAAAK,GAAA;IACCC,SAAS,EAAC,gCAAgC;IAC1C,cAAa,IAAAC,QAAE,EAAE,gBAAiB,CAAG;IAAAC,QAAA,EAEnCC,KAAK,CAACC,IAAI,CAAE;MAAEC,MAAM,EAAER;IAAc,CAAE,CAAC,CAACS,GAAG,CAAE,CAAEC,CAAC,EAAEC,IAAI,kBACvD,IAAAd,WAAA,CAAAK,GAAA;MAEC;MACA,gBAAeS,IAAI,KAAKZ,WAAW,GAAG,MAAM,GAAGa,SAAW;MAAAP,QAAA,eAE1D,IAAAR,WAAA,CAAAK,GAAA,EAACR,OAAA,CAAAmB,OAAM;QAENC,IAAI,eAAG,IAAAjB,WAAA,CAAAK,GAAA,EAACN,MAAA,CAAAmB,eAAe,IAAE,CAAG;QAC5B,cAAa,IAAAC,aAAO,GACnB;QACA,IAAAZ,QAAE,EAAE,mBAAoB,CAAC,EACzBO,IAAI,GAAG,CAAC,EACRX,aACD,CAAG;QACHiB,OAAO,EAAGA,CAAA,KAAMhB,cAAc,CAAEU,IAAK;MAAG,GARlCA,IASN;IAAC,GAdIA,IAeH,CACH;EAAC,CACA,CAAC;AAEP","ignoreList":[]}

package/build/guide/page.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = GuidePage;
-var _react = require("react");
 var _element = require("@wordpress/element");
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -23,7 +23,7 @@ function GuidePage(props) {
       alternative: 'the `pages` prop in <Guide>'
     });
   }, []);
-  return (0, _react.createElement)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...props
   });
 }

package/build/guide/page.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_deprecated","_interopRequireDefault","GuidePage","props","useEffect","deprecated","since","alternative","_react","createElement"],"sources":["@wordpress/components/src/guide/page.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\n\nexport default function GuidePage(\n\tprops: WordPressComponentProps< {}, 'div', false >\n) {\n\tuseEffect( () => {\n\t\tdeprecated( '<GuidePage>', {\n\t\t\tsince: '5.5',\n\t\t\talternative: 'the `pages` prop in <Guide>',\n\t\t} );\n\t}, [] );\n\n\treturn <div { ...props } />;\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAJA;AACA;AACA;;AAIA;AACA;AACA;;AAGe,SAASG,SAASA,CAChCC,KAAkD,EACjD;EACD,IAAAC,kBAAS,EAAE,MAAM;IAChB,IAAAC,mBAAU,EAAE,aAAa,EAAE;MAC1BC,KAAK,EAAE,KAAK;MACZC,WAAW,EAAE;IACd,CAAE,CAAC;EACJ,CAAC,EAAE,EAAG,CAAC;EAEP,OAAO,IAAAC,MAAA,CAAAC,aAAA;IAAA,GAAUN;EAAK,CAAI,CAAC;AAC5B","ignoreList":[]}
+{"version":3,"names":["_element","require","_deprecated","_interopRequireDefault","_jsxRuntime","GuidePage","props","useEffect","deprecated","since","alternative","jsx"],"sources":["@wordpress/components/src/guide/page.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\n\nexport default function GuidePage(\n\tprops: WordPressComponentProps< {}, 'div', false >\n) {\n\tuseEffect( () => {\n\t\tdeprecated( '<GuidePage>', {\n\t\t\tsince: '5.5',\n\t\t\talternative: 'the `pages` prop in <Guide>',\n\t\t} );\n\t}, [] );\n\n\treturn <div { ...props } />;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA+C,IAAAG,WAAA,GAAAH,OAAA;AAJ/C;AACA;AACA;;AAIA;AACA;AACA;;AAGe,SAASI,SAASA,CAChCC,KAAkD,EACjD;EACD,IAAAC,kBAAS,EAAE,MAAM;IAChB,IAAAC,mBAAU,EAAE,aAAa,EAAE;MAC1BC,KAAK,EAAE,KAAK;MACZC,WAAW,EAAE;IACd,CAAE,CAAC;EACJ,CAAC,EAAE,EAAG,CAAC;EAEP,oBAAO,IAAAN,WAAA,CAAAO,GAAA;IAAA,GAAUL;EAAK,CAAI,CAAC;AAC5B","ignoreList":[]}

package/build/h-stack/component.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.HStack = void 0;
-var _react = require("react");
 var _context = require("../context");
 var _view = require("../view");
 var _hook = require("./hook");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Internal dependencies
  */
 
 function UnconnectedHStack(props, forwardedRef) {
   const hStackProps = (0, _hook.useHStack)(props);
-  return (0, _react.createElement)(_view.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
     ...hStackProps,
     ref: forwardedRef
   });

package/build/h-stack/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_context","require","_view","_hook","UnconnectedHStack","props","forwardedRef","hStackProps","useHStack","_react","createElement","View","ref","HStack","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/h-stack/component.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useHStack } from './hook';\nimport type { Props } from './types';\n\nfunction UnconnectedHStack(\n\tprops: WordPressComponentProps< Props, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) {\n\tconst hStackProps = useHStack( props );\n\n\treturn <View { ...hStackProps } ref={ forwardedRef } />;\n}\n\n/**\n * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.\n *\n * `HStack` can render anything inside.\n *\n * ```jsx\n * import {\n * \t__experimentalHStack as HStack,\n * \t__experimentalText as Text,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<HStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</HStack>\n * \t);\n * }\n * ```\n */\nexport const HStack = contextConnect( UnconnectedHStack, 'HStack' );\n\nexport default HStack;\n"],"mappings":";;;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AANA;AACA;AACA;;AAOA,SAASG,iBAAiBA,CACzBC,KAA8C,EAC9CC,YAAuC,EACtC;EACD,MAAMC,WAAW,GAAG,IAAAC,eAAS,EAAEH,KAAM,CAAC;EAEtC,OAAO,IAAAI,MAAA,CAAAC,aAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMJ,WAAW;IAAGK,GAAG,EAAGN;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,uBAAc,EAAEX,iBAAiB,EAAE,QAAS,CAAC;AAAC,IAAAY,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAErDJ,MAAM","ignoreList":[]}
+{"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedHStack","props","forwardedRef","hStackProps","useHStack","jsx","View","ref","HStack","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/h-stack/component.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useHStack } from './hook';\nimport type { Props } from './types';\n\nfunction UnconnectedHStack(\n\tprops: WordPressComponentProps< Props, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) {\n\tconst hStackProps = useHStack( props );\n\n\treturn <View { ...hStackProps } ref={ forwardedRef } />;\n}\n\n/**\n * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.\n *\n * `HStack` can render anything inside.\n *\n * ```jsx\n * import {\n * \t__experimentalHStack as HStack,\n * \t__experimentalText as Text,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<HStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</HStack>\n * \t);\n * }\n * ```\n */\nexport const HStack = contextConnect( UnconnectedHStack, 'HStack' );\n\nexport default HStack;\n"],"mappings":";;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAAmC,IAAAG,WAAA,GAAAH,OAAA;AANnC;AACA;AACA;;AAOA,SAASI,iBAAiBA,CACzBC,KAA8C,EAC9CC,YAAuC,EACtC;EACD,MAAMC,WAAW,GAAG,IAAAC,eAAS,EAAEH,KAAM,CAAC;EAEtC,oBAAO,IAAAF,WAAA,CAAAM,GAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMH,WAAW;IAAGI,GAAG,EAAGL;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,uBAAc,EAAEV,iBAAiB,EAAE,QAAS,CAAC;AAAC,IAAAW,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAErDJ,MAAM","ignoreList":[]}

package/build/h-stack/hook.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useHStack = useHStack;
-var _react = require("react");
 var _context = require("../context");
 var _flex = require("../flex");
 var _utils = require("./utils");
 var _getValidChildren = require("../utils/get-valid-children");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -32,11 +32,10 @@ function useHStack(props) {
     if (_isSpacer) {
       const childElement = child;
       const _key = childElement.key || `hstack-${index}`;
-      return (0, _react.createElement)(_flex.FlexItem, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_flex.FlexItem, {
         isBlock: true,
-        key: _key,
         ...childElement.props
-      });
+      }, _key);
     }
     return child;
   });

package/build/h-stack/hook.js.map

@@ -1 +1 @@
-{"version":3,"names":["_context","require","_flex","_utils","_getValidChildren","useHStack","props","alignment","children","direction","spacing","otherProps","useContextSystem","align","getAlignmentProps","validChildren","getValidChildren","clonedChildren","map","child","index","_isSpacer","hasConnectNamespace","childElement","_key","key","_react","createElement","FlexItem","isBlock","propsForFlex","justify","gap","isColumn","flexProps","useFlex"],"sources":["@wordpress/components/src/h-stack/hook.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { hasConnectNamespace, useContextSystem } from '../context';\nimport { FlexItem, useFlex } from '../flex';\nimport { getAlignmentProps } from './utils';\nimport { getValidChildren } from '../utils/get-valid-children';\nimport type { Props } from './types';\n\nexport function useHStack( props: WordPressComponentProps< Props, 'div' > ) {\n\tconst {\n\t\talignment = 'edge',\n\t\tchildren,\n\t\tdirection,\n\t\tspacing = 2,\n\t\t...otherProps\n\t} = useContextSystem( props, 'HStack' );\n\n\tconst align = getAlignmentProps( alignment, direction );\n\n\tconst validChildren = getValidChildren( children );\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst _isSpacer = hasConnectNamespace( child, [ 'Spacer' ] );\n\n\t\tif ( _isSpacer ) {\n\t\t\tconst childElement = child as ReactElement;\n\t\t\tconst _key = childElement.key || `hstack-${ index }`;\n\n\t\t\treturn <FlexItem isBlock key={ _key } { ...childElement.props } />;\n\t\t}\n\n\t\treturn child;\n\t} );\n\n\tconst propsForFlex = {\n\t\tchildren: clonedChildren,\n\t\tdirection,\n\t\tjustify: 'center',\n\t\t...align,\n\t\t...otherProps,\n\t\tgap: spacing,\n\t};\n\n\t// Omit `isColumn` because it's not used in HStack.\n\tconst { isColumn, ...flexProps } = useFlex( propsForFlex );\n\n\treturn flexProps;\n}\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAZA;AACA;AACA;;AAGA;AACA;AACA;;AAQO,SAASI,SAASA,CAAEC,KAA8C,EAAG;EAC3E,MAAM;IACLC,SAAS,GAAG,MAAM;IAClBC,QAAQ;IACRC,SAAS;IACTC,OAAO,GAAG,CAAC;IACX,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEN,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMO,KAAK,GAAG,IAAAC,wBAAiB,EAAEP,SAAS,EAAEE,SAAU,CAAC;EAEvD,MAAMM,aAAa,GAAG,IAAAC,kCAAgB,EAAER,QAAS,CAAC;EAClD,MAAMS,cAAc,GAAGF,aAAa,CAACG,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IAC7D,MAAMC,SAAS,GAAG,IAAAC,4BAAmB,EAAEH,KAAK,EAAE,CAAE,QAAQ,CAAG,CAAC;IAE5D,IAAKE,SAAS,EAAG;MAChB,MAAME,YAAY,GAAGJ,KAAqB;MAC1C,MAAMK,IAAI,GAAGD,YAAY,CAACE,GAAG,IAAK,UAAUL,KAAO,EAAC;MAEpD,OAAO,IAAAM,MAAA,CAAAC,aAAA,EAACzB,KAAA,CAAA0B,QAAQ;QAACC,OAAO;QAACJ,GAAG,EAAGD,IAAM;QAAA,GAAMD,YAAY,CAACjB;MAAK,CAAI,CAAC;IACnE;IAEA,OAAOa,KAAK;EACb,CAAE,CAAC;EAEH,MAAMW,YAAY,GAAG;IACpBtB,QAAQ,EAAES,cAAc;IACxBR,SAAS;IACTsB,OAAO,EAAE,QAAQ;IACjB,GAAGlB,KAAK;IACR,GAAGF,UAAU;IACbqB,GAAG,EAAEtB;EACN,CAAC;;EAED;EACA,MAAM;IAAEuB,QAAQ;IAAE,GAAGC;EAAU,CAAC,GAAG,IAAAC,aAAO,EAAEL,YAAa,CAAC;EAE1D,OAAOI,SAAS;AACjB","ignoreList":[]}
+{"version":3,"names":["_context","require","_flex","_utils","_getValidChildren","_jsxRuntime","useHStack","props","alignment","children","direction","spacing","otherProps","useContextSystem","align","getAlignmentProps","validChildren","getValidChildren","clonedChildren","map","child","index","_isSpacer","hasConnectNamespace","childElement","_key","key","jsx","FlexItem","isBlock","propsForFlex","justify","gap","isColumn","flexProps","useFlex"],"sources":["@wordpress/components/src/h-stack/hook.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { hasConnectNamespace, useContextSystem } from '../context';\nimport { FlexItem, useFlex } from '../flex';\nimport { getAlignmentProps } from './utils';\nimport { getValidChildren } from '../utils/get-valid-children';\nimport type { Props } from './types';\n\nexport function useHStack( props: WordPressComponentProps< Props, 'div' > ) {\n\tconst {\n\t\talignment = 'edge',\n\t\tchildren,\n\t\tdirection,\n\t\tspacing = 2,\n\t\t...otherProps\n\t} = useContextSystem( props, 'HStack' );\n\n\tconst align = getAlignmentProps( alignment, direction );\n\n\tconst validChildren = getValidChildren( children );\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst _isSpacer = hasConnectNamespace( child, [ 'Spacer' ] );\n\n\t\tif ( _isSpacer ) {\n\t\t\tconst childElement = child as ReactElement;\n\t\t\tconst _key = childElement.key || `hstack-${ index }`;\n\n\t\t\treturn <FlexItem isBlock key={ _key } { ...childElement.props } />;\n\t\t}\n\n\t\treturn child;\n\t} );\n\n\tconst propsForFlex = {\n\t\tchildren: clonedChildren,\n\t\tdirection,\n\t\tjustify: 'center',\n\t\t...align,\n\t\t...otherProps,\n\t\tgap: spacing,\n\t};\n\n\t// Omit `isColumn` because it's not used in HStack.\n\tconst { isColumn, ...flexProps } = useFlex( propsForFlex );\n\n\treturn flexProps;\n}\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAA+D,IAAAI,WAAA,GAAAJ,OAAA;AAZ/D;AACA;AACA;;AAGA;AACA;AACA;;AAQO,SAASK,SAASA,CAAEC,KAA8C,EAAG;EAC3E,MAAM;IACLC,SAAS,GAAG,MAAM;IAClBC,QAAQ;IACRC,SAAS;IACTC,OAAO,GAAG,CAAC;IACX,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEN,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMO,KAAK,GAAG,IAAAC,wBAAiB,EAAEP,SAAS,EAAEE,SAAU,CAAC;EAEvD,MAAMM,aAAa,GAAG,IAAAC,kCAAgB,EAAER,QAAS,CAAC;EAClD,MAAMS,cAAc,GAAGF,aAAa,CAACG,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IAC7D,MAAMC,SAAS,GAAG,IAAAC,4BAAmB,EAAEH,KAAK,EAAE,CAAE,QAAQ,CAAG,CAAC;IAE5D,IAAKE,SAAS,EAAG;MAChB,MAAME,YAAY,GAAGJ,KAAqB;MAC1C,MAAMK,IAAI,GAAGD,YAAY,CAACE,GAAG,IAAK,UAAUL,KAAO,EAAC;MAEpD,oBAAO,IAAAhB,WAAA,CAAAsB,GAAA,EAACzB,KAAA,CAAA0B,QAAQ;QAACC,OAAO;QAAA,GAAmBL,YAAY,CAACjB;MAAK,GAA9BkB,IAAkC,CAAC;IACnE;IAEA,OAAOL,KAAK;EACb,CAAE,CAAC;EAEH,MAAMU,YAAY,GAAG;IACpBrB,QAAQ,EAAES,cAAc;IACxBR,SAAS;IACTqB,OAAO,EAAE,QAAQ;IACjB,GAAGjB,KAAK;IACR,GAAGF,UAAU;IACboB,GAAG,EAAErB;EACN,CAAC;;EAED;EACA,MAAM;IAAEsB,QAAQ;IAAE,GAAGC;EAAU,CAAC,GAAG,IAAAC,aAAO,EAAEL,YAAa,CAAC;EAE1D,OAAOI,SAAS;AACjB","ignoreList":[]}

package/build/heading/component.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Heading = void 0;
-var _react = require("react");
 var _context = require("../context");
 var _view = require("../view");
 var _hook = require("./hook");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -18,7 +18,7 @@ var _hook = require("./hook");
 
 function UnconnectedHeading(props, forwardedRef) {
   const headerProps = (0, _hook.useHeading)(props);
-  return (0, _react.createElement)(_view.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
     ...headerProps,
     ref: forwardedRef
   });

package/build/heading/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_context","require","_view","_hook","UnconnectedHeading","props","forwardedRef","headerProps","useHeading","_react","createElement","View","ref","Heading","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/heading/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useHeading } from './hook';\nimport type { HeadingProps } from './types';\n\nfunction UnconnectedHeading(\n\tprops: WordPressComponentProps< HeadingProps, 'h1' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst headerProps = useHeading( props );\n\n\treturn <View { ...headerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Heading` renders headings and titles using the library's typography system.\n *\n * ```jsx\n * import { __experimentalHeading as Heading } from \"@wordpress/components\";\n *\n * function Example() {\n *   return <Heading>Code is Poetry</Heading>;\n * }\n * ```\n */\nexport const Heading = contextConnect( UnconnectedHeading, 'Heading' );\n\nexport default Heading;\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASG,kBAAkBA,CAC1BC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAMC,WAAW,GAAG,IAAAC,gBAAU,EAAEH,KAAM,CAAC;EAEvC,OAAO,IAAAI,MAAA,CAAAC,aAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMJ,WAAW;IAAGK,GAAG,EAAGN;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,uBAAc,EAAEX,kBAAkB,EAAE,SAAU,CAAC;AAAC,IAAAY,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAExDJ,OAAO","ignoreList":[]}
+{"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedHeading","props","forwardedRef","headerProps","useHeading","jsx","View","ref","Heading","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/heading/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useHeading } from './hook';\nimport type { HeadingProps } from './types';\n\nfunction UnconnectedHeading(\n\tprops: WordPressComponentProps< HeadingProps, 'h1' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst headerProps = useHeading( props );\n\n\treturn <View { ...headerProps } ref={ forwardedRef } />;\n}\n\n/**\n * `Heading` renders headings and titles using the library's typography system.\n *\n * ```jsx\n * import { __experimentalHeading as Heading } from \"@wordpress/components\";\n *\n * function Example() {\n *   return <Heading>Code is Poetry</Heading>;\n * }\n * ```\n */\nexport const Heading = contextConnect( UnconnectedHeading, 'Heading' );\n\nexport default Heading;\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAAoC,IAAAG,WAAA,GAAAH,OAAA;AAXpC;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,kBAAkBA,CAC1BC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAMC,WAAW,GAAG,IAAAC,gBAAU,EAAEH,KAAM,CAAC;EAEvC,oBAAO,IAAAF,WAAA,CAAAM,GAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMH,WAAW;IAAGI,GAAG,EAAGL;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,uBAAc,EAAEV,kBAAkB,EAAE,SAAU,CAAC;AAAC,IAAAW,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAExDJ,OAAO","ignoreList":[]}

package/build/higher-order/navigate-regions/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.useNavigateRegions = useNavigateRegions;
-var _react = require("react");
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _keycodes = require("@wordpress/keycodes");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -115,9 +115,10 @@ function useNavigateRegions(shortcuts = defaultShortcuts) {
 var _default = exports.default = (0, _compose.createHigherOrderComponent)(Component => ({
   shortcuts,
   ...props
-}) => (0, _react.createElement)("div", {
-  ...useNavigateRegions(shortcuts)
-}, (0, _react.createElement)(Component, {
-  ...props
-})), 'navigateRegions');
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  ...useNavigateRegions(shortcuts),
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+    ...props
+  })
+}), 'navigateRegions');
 //# sourceMappingURL=index.js.map

package/build/higher-order/navigate-regions/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_keycodes","defaultShortcuts","previous","modifier","character","next","useNavigateRegions","shortcuts","ref","useRef","isFocusingRegions","setIsFocusingRegions","useState","focusRegion","offset","_ref$current$querySel","regions","Array","from","current","querySelectorAll","length","nextRegion","wrappingRegion","ownerDocument","activeElement","closest","selectedIndex","indexOf","nextIndex","focus","clickRef","useRefEffect","element","onClick","addEventListener","removeEventListener","useMergeRefs","className","onKeyDown","event","some","isKeyboardEvent","_default","exports","default","createHigherOrderComponent","Component","props","_react","createElement"],"sources":["@wordpress/components/src/higher-order/navigate-regions/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport {\n\tcreateHigherOrderComponent,\n\tuseRefEffect,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\nimport type { WPKeycodeModifier } from '@wordpress/keycodes';\n\nconst defaultShortcuts = {\n\tprevious: [\n\t\t{\n\t\t\tmodifier: 'ctrlShift',\n\t\t\tcharacter: '`',\n\t\t},\n\t\t{\n\t\t\tmodifier: 'ctrlShift',\n\t\t\tcharacter: '~',\n\t\t},\n\t\t{\n\t\t\tmodifier: 'access',\n\t\t\tcharacter: 'p',\n\t\t},\n\t] as const,\n\tnext: [\n\t\t{\n\t\t\tmodifier: 'ctrl',\n\t\t\tcharacter: '`',\n\t\t},\n\t\t{\n\t\t\tmodifier: 'access',\n\t\t\tcharacter: 'n',\n\t\t},\n\t] as const,\n};\n\ntype Shortcuts = {\n\tprevious: readonly { modifier: WPKeycodeModifier; character: string }[];\n\tnext: readonly { modifier: WPKeycodeModifier; character: string }[];\n};\n\nexport function useNavigateRegions( shortcuts: Shortcuts = defaultShortcuts ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\tconst [ isFocusingRegions, setIsFocusingRegions ] = useState( false );\n\n\tfunction focusRegion( offset: number ) {\n\t\tconst regions = Array.from(\n\t\t\tref.current?.querySelectorAll< HTMLElement >(\n\t\t\t\t'[role=\"region\"][tabindex=\"-1\"]'\n\t\t\t) ?? []\n\t\t);\n\t\tif ( ! regions.length ) {\n\t\t\treturn;\n\t\t}\n\t\tlet nextRegion = regions[ 0 ];\n\t\t// Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.\n\t\tconst wrappingRegion =\n\t\t\tref.current?.ownerDocument?.activeElement?.closest< HTMLElement >(\n\t\t\t\t'[role=\"region\"][tabindex=\"-1\"]'\n\t\t\t);\n\t\tconst selectedIndex = wrappingRegion\n\t\t\t? regions.indexOf( wrappingRegion )\n\t\t\t: -1;\n\t\tif ( selectedIndex !== -1 ) {\n\t\t\tlet nextIndex = selectedIndex + offset;\n\t\t\tnextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;\n\t\t\tnextIndex = nextIndex === regions.length ? 0 : nextIndex;\n\t\t\tnextRegion = regions[ nextIndex ];\n\t\t}\n\n\t\tnextRegion.focus();\n\t\tsetIsFocusingRegions( true );\n\t}\n\n\tconst clickRef = useRefEffect(\n\t\t( element ) => {\n\t\t\tfunction onClick() {\n\t\t\t\tsetIsFocusingRegions( false );\n\t\t\t}\n\n\t\t\telement.addEventListener( 'click', onClick );\n\n\t\t\treturn () => {\n\t\t\t\telement.removeEventListener( 'click', onClick );\n\t\t\t};\n\t\t},\n\t\t[ setIsFocusingRegions ]\n\t);\n\n\treturn {\n\t\tref: useMergeRefs( [ ref, clickRef ] ),\n\t\tclassName: isFocusingRegions ? 'is-focusing-regions' : '',\n\t\tonKeyDown( event: React.KeyboardEvent< HTMLDivElement > ) {\n\t\t\tif (\n\t\t\t\tshortcuts.previous.some( ( { modifier, character } ) => {\n\t\t\t\t\treturn isKeyboardEvent[ modifier ]( event, character );\n\t\t\t\t} )\n\t\t\t) {\n\t\t\t\tfocusRegion( -1 );\n\t\t\t} else if (\n\t\t\t\tshortcuts.next.some( ( { modifier, character } ) => {\n\t\t\t\t\treturn isKeyboardEvent[ modifier ]( event, character );\n\t\t\t\t} )\n\t\t\t) {\n\t\t\t\tfocusRegion( 1 );\n\t\t\t}\n\t\t},\n\t};\n}\n\n/**\n * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)\n * adding keyboard navigation to switch between the different DOM elements marked as \"regions\" (role=\"region\").\n * These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility,\n * these elements must be properly labelled to briefly describe the purpose of the content in the region.\n * For more details, see \"Landmark Roles\" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/)\n * and \"Landmark Regions\" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/).\n *\n * ```jsx\n * import { navigateRegions } from '@wordpress/components';\n *\n * const MyComponentWithNavigateRegions = navigateRegions( () => (\n * \t<div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Header\">\n * \t\t\tHeader\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Content\">\n * \t\t\tContent\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Sidebar\">\n * \t\t\tSidebar\n * \t\t</div>\n * \t</div>\n * ) );\n * ```\n */\nexport default createHigherOrderComponent(\n\t( Component ) =>\n\t\t( { shortcuts, ...props } ) => (\n\t\t\t<div { ...useNavigateRegions( shortcuts ) }>\n\t\t\t\t<Component { ...props } />\n\t\t\t</div>\n\t\t),\n\t'navigateRegions'\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_element","require","_compose","_keycodes","_jsxRuntime","defaultShortcuts","previous","modifier","character","next","useNavigateRegions","shortcuts","ref","useRef","isFocusingRegions","setIsFocusingRegions","useState","focusRegion","offset","_ref$current$querySel","regions","Array","from","current","querySelectorAll","length","nextRegion","wrappingRegion","ownerDocument","activeElement","closest","selectedIndex","indexOf","nextIndex","focus","clickRef","useRefEffect","element","onClick","addEventListener","removeEventListener","useMergeRefs","className","onKeyDown","event","some","isKeyboardEvent","_default","exports","default","createHigherOrderComponent","Component","props","jsx","children"],"sources":["@wordpress/components/src/higher-order/navigate-regions/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport {\n\tcreateHigherOrderComponent,\n\tuseRefEffect,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\nimport type { WPKeycodeModifier } from '@wordpress/keycodes';\n\nconst defaultShortcuts = {\n\tprevious: [\n\t\t{\n\t\t\tmodifier: 'ctrlShift',\n\t\t\tcharacter: '`',\n\t\t},\n\t\t{\n\t\t\tmodifier: 'ctrlShift',\n\t\t\tcharacter: '~',\n\t\t},\n\t\t{\n\t\t\tmodifier: 'access',\n\t\t\tcharacter: 'p',\n\t\t},\n\t] as const,\n\tnext: [\n\t\t{\n\t\t\tmodifier: 'ctrl',\n\t\t\tcharacter: '`',\n\t\t},\n\t\t{\n\t\t\tmodifier: 'access',\n\t\t\tcharacter: 'n',\n\t\t},\n\t] as const,\n};\n\ntype Shortcuts = {\n\tprevious: readonly { modifier: WPKeycodeModifier; character: string }[];\n\tnext: readonly { modifier: WPKeycodeModifier; character: string }[];\n};\n\nexport function useNavigateRegions( shortcuts: Shortcuts = defaultShortcuts ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\tconst [ isFocusingRegions, setIsFocusingRegions ] = useState( false );\n\n\tfunction focusRegion( offset: number ) {\n\t\tconst regions = Array.from(\n\t\t\tref.current?.querySelectorAll< HTMLElement >(\n\t\t\t\t'[role=\"region\"][tabindex=\"-1\"]'\n\t\t\t) ?? []\n\t\t);\n\t\tif ( ! regions.length ) {\n\t\t\treturn;\n\t\t}\n\t\tlet nextRegion = regions[ 0 ];\n\t\t// Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.\n\t\tconst wrappingRegion =\n\t\t\tref.current?.ownerDocument?.activeElement?.closest< HTMLElement >(\n\t\t\t\t'[role=\"region\"][tabindex=\"-1\"]'\n\t\t\t);\n\t\tconst selectedIndex = wrappingRegion\n\t\t\t? regions.indexOf( wrappingRegion )\n\t\t\t: -1;\n\t\tif ( selectedIndex !== -1 ) {\n\t\t\tlet nextIndex = selectedIndex + offset;\n\t\t\tnextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;\n\t\t\tnextIndex = nextIndex === regions.length ? 0 : nextIndex;\n\t\t\tnextRegion = regions[ nextIndex ];\n\t\t}\n\n\t\tnextRegion.focus();\n\t\tsetIsFocusingRegions( true );\n\t}\n\n\tconst clickRef = useRefEffect(\n\t\t( element ) => {\n\t\t\tfunction onClick() {\n\t\t\t\tsetIsFocusingRegions( false );\n\t\t\t}\n\n\t\t\telement.addEventListener( 'click', onClick );\n\n\t\t\treturn () => {\n\t\t\t\telement.removeEventListener( 'click', onClick );\n\t\t\t};\n\t\t},\n\t\t[ setIsFocusingRegions ]\n\t);\n\n\treturn {\n\t\tref: useMergeRefs( [ ref, clickRef ] ),\n\t\tclassName: isFocusingRegions ? 'is-focusing-regions' : '',\n\t\tonKeyDown( event: React.KeyboardEvent< HTMLDivElement > ) {\n\t\t\tif (\n\t\t\t\tshortcuts.previous.some( ( { modifier, character } ) => {\n\t\t\t\t\treturn isKeyboardEvent[ modifier ]( event, character );\n\t\t\t\t} )\n\t\t\t) {\n\t\t\t\tfocusRegion( -1 );\n\t\t\t} else if (\n\t\t\t\tshortcuts.next.some( ( { modifier, character } ) => {\n\t\t\t\t\treturn isKeyboardEvent[ modifier ]( event, character );\n\t\t\t\t} )\n\t\t\t) {\n\t\t\t\tfocusRegion( 1 );\n\t\t\t}\n\t\t},\n\t};\n}\n\n/**\n * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)\n * adding keyboard navigation to switch between the different DOM elements marked as \"regions\" (role=\"region\").\n * These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility,\n * these elements must be properly labelled to briefly describe the purpose of the content in the region.\n * For more details, see \"Landmark Roles\" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/)\n * and \"Landmark Regions\" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/).\n *\n * ```jsx\n * import { navigateRegions } from '@wordpress/components';\n *\n * const MyComponentWithNavigateRegions = navigateRegions( () => (\n * \t<div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Header\">\n * \t\t\tHeader\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Content\">\n * \t\t\tContent\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Sidebar\">\n * \t\t\tSidebar\n * \t\t</div>\n * \t</div>\n * ) );\n * ```\n */\nexport default createHigherOrderComponent(\n\t( Component ) =>\n\t\t( { shortcuts, ...props } ) => (\n\t\t\t<div { ...useNavigateRegions( shortcuts ) }>\n\t\t\t\t<Component { ...props } />\n\t\t\t</div>\n\t\t),\n\t'navigateRegions'\n);\n"],"mappings":"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","ignoreList":[]}

package/build/higher-order/with-constrained-tabbing/index.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _compose = require("@wordpress/compose");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -17,15 +17,15 @@ var _compose = require("@wordpress/compose");
  * modal dialogs or similar UI. Use of this component is recommended only in cases where a way to
  * navigate away from the wrapped component is implemented by other means, usually by pressing
  * the Escape key or using a specific UI control, e.g. a "Close" button.
- */
-const withConstrainedTabbing = (0, _compose.createHigherOrderComponent)(WrappedComponent => function ComponentWithConstrainedTabbing(props) {
+ */const withConstrainedTabbing = (0, _compose.createHigherOrderComponent)(WrappedComponent => function ComponentWithConstrainedTabbing(props) {
   const ref = (0, _compose.useConstrainedTabbing)();
-  return (0, _react.createElement)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    tabIndex: -1
-  }, (0, _react.createElement)(WrappedComponent, {
-    ...props
-  }));
+    tabIndex: -1,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+      ...props
+    })
+  });
 }, 'withConstrainedTabbing');
 var _default = exports.default = withConstrainedTabbing;
 //# sourceMappingURL=index.js.map

package/build/higher-order/with-constrained-tabbing/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","withConstrainedTabbing","createHigherOrderComponent","WrappedComponent","ComponentWithConstrainedTabbing","props","ref","useConstrainedTabbing","_react","createElement","tabIndex","_default","exports","default"],"sources":["@wordpress/components/src/higher-order/with-constrained-tabbing/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tcreateHigherOrderComponent,\n\tuseConstrainedTabbing,\n} from '@wordpress/compose';\n\n/**\n * `withConstrainedTabbing` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)\n * adding the ability to constrain keyboard navigation with the Tab key within a component.\n * For accessibility reasons, some UI components need to constrain Tab navigation, for example\n * modal dialogs or similar UI. Use of this component is recommended only in cases where a way to\n * navigate away from the wrapped component is implemented by other means, usually by pressing\n * the Escape key or using a specific UI control, e.g. a \"Close\" button.\n */\nconst withConstrainedTabbing = createHigherOrderComponent(\n\t( WrappedComponent ) =>\n\t\tfunction ComponentWithConstrainedTabbing( props ) {\n\t\t\tconst ref = useConstrainedTabbing();\n\t\t\treturn (\n\t\t\t\t<div ref={ ref } tabIndex={ -1 }>\n\t\t\t\t\t<WrappedComponent { ...props } />\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t'withConstrainedTabbing'\n);\n\nexport default withConstrainedTabbing;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,sBAAsB,GAAG,IAAAC,mCAA0B,EACtDC,gBAAgB,IACjB,SAASC,+BAA+BA,CAAEC,KAAK,EAAG;EACjD,MAAMC,GAAG,GAAG,IAAAC,8BAAqB,EAAC,CAAC;EACnC,OACC,IAAAC,MAAA,CAAAC,aAAA;IAAKH,GAAG,EAAGA,GAAK;IAACI,QAAQ,EAAG,CAAC;EAAG,GAC/B,IAAAF,MAAA,CAAAC,aAAA,EAACN,gBAAgB;IAAA,GAAME;EAAK,CAAI,CAC5B,CAAC;AAER,CAAC,EACF,wBACD,CAAC;AAAC,IAAAM,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaZ,sBAAsB","ignoreList":[]}
+{"version":3,"names":["_compose","require","_jsxRuntime","withConstrainedTabbing","createHigherOrderComponent","WrappedComponent","ComponentWithConstrainedTabbing","props","ref","useConstrainedTabbing","jsx","tabIndex","children","_default","exports","default"],"sources":["@wordpress/components/src/higher-order/with-constrained-tabbing/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tcreateHigherOrderComponent,\n\tuseConstrainedTabbing,\n} from '@wordpress/compose';\n\n/**\n * `withConstrainedTabbing` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)\n * adding the ability to constrain keyboard navigation with the Tab key within a component.\n * For accessibility reasons, some UI components need to constrain Tab navigation, for example\n * modal dialogs or similar UI. Use of this component is recommended only in cases where a way to\n * navigate away from the wrapped component is implemented by other means, usually by pressing\n * the Escape key or using a specific UI control, e.g. a \"Close\" button.\n */\nconst withConstrainedTabbing = createHigherOrderComponent(\n\t( WrappedComponent ) =>\n\t\tfunction ComponentWithConstrainedTabbing( props ) {\n\t\t\tconst ref = useConstrainedTabbing();\n\t\t\treturn (\n\t\t\t\t<div ref={ ref } tabIndex={ -1 }>\n\t\t\t\t\t<WrappedComponent { ...props } />\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t'withConstrainedTabbing'\n);\n\nexport default withConstrainedTabbing;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAG4B,IAAAC,WAAA,GAAAD,OAAA;AAN5B;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,MAAME,sBAAsB,GAAG,IAAAC,mCAA0B,EACtDC,gBAAgB,IACjB,SAASC,+BAA+BA,CAAEC,KAAK,EAAG;EACjD,MAAMC,GAAG,GAAG,IAAAC,8BAAqB,EAAC,CAAC;EACnC,oBACC,IAAAP,WAAA,CAAAQ,GAAA;IAAKF,GAAG,EAAGA,GAAK;IAACG,QAAQ,EAAG,CAAC,CAAG;IAAAC,QAAA,eAC/B,IAAAV,WAAA,CAAAQ,GAAA,EAACL,gBAAgB;MAAA,GAAME;IAAK,CAAI;EAAC,CAC7B,CAAC;AAER,CAAC,EACF,wBACD,CAAC;AAAC,IAAAM,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaZ,sBAAsB","ignoreList":[]}

package/build/higher-order/with-fallback-styles/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _es = _interopRequireDefault(require("fast-deep-equal/es6"));
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -54,13 +54,14 @@ var _default = mapNodeToProps => (0, _compose.createHigherOrderComponent)(Wrappe
       }
     }
     render() {
-      const wrappedComponent = (0, _react.createElement)(WrappedComponent, {
+      const wrappedComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
         ...this.props,
         ...this.state.fallbackStyles
       });
-      return this.props.node ? wrappedComponent : (0, _react.createElement)("div", {
-        ref: this.bindRef
-      }, " ", wrappedComponent, " ");
+      return this.props.node ? wrappedComponent : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: this.bindRef,
+        children: [" ", wrappedComponent, " "]
+      });
     }
   };
 }, 'withFallbackStyles');

package/build/higher-order/with-fallback-styles/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_es","_interopRequireDefault","require","_element","_compose","_default","mapNodeToProps","createHigherOrderComponent","WrappedComponent","Component","constructor","props","nodeRef","node","state","fallbackStyles","undefined","grabStylesCompleted","bindRef","bind","componentDidMount","grabFallbackStyles","componentDidUpdate","newFallbackStyles","fastDeepEqual","setState","Object","values","every","Boolean","render","wrappedComponent","_react","createElement","ref","exports","default"],"sources":["@wordpress/components/src/higher-order/with-fallback-styles/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\ntype Props = {\n\tnode?: HTMLElement;\n\t[ key: string ]: any;\n};\n\ntype State = {\n\tfallbackStyles?: { [ key: string ]: any };\n\tgrabStylesCompleted: boolean;\n};\n\nexport default (\n\tmapNodeToProps: (\n\t\tnode: HTMLElement,\n\t\tprops: Props\n\t) => { [ key: string ]: any }\n) =>\n\tcreateHigherOrderComponent( ( WrappedComponent ) => {\n\t\treturn class extends Component< Props, State > {\n\t\t\tnodeRef?: HTMLElement;\n\n\t\t\tconstructor( props: Props ) {\n\t\t\t\tsuper( props );\n\t\t\t\tthis.nodeRef = this.props.node;\n\t\t\t\tthis.state = {\n\t\t\t\t\tfallbackStyles: undefined,\n\t\t\t\t\tgrabStylesCompleted: false,\n\t\t\t\t};\n\n\t\t\t\tthis.bindRef = this.bindRef.bind( this );\n\t\t\t}\n\n\t\t\tbindRef( node: HTMLDivElement ) {\n\t\t\t\tif ( ! node ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tthis.nodeRef = node;\n\t\t\t}\n\n\t\t\tcomponentDidMount() {\n\t\t\t\tthis.grabFallbackStyles();\n\t\t\t}\n\n\t\t\tcomponentDidUpdate() {\n\t\t\t\tthis.grabFallbackStyles();\n\t\t\t}\n\n\t\t\tgrabFallbackStyles() {\n\t\t\t\tconst { grabStylesCompleted, fallbackStyles } = this.state;\n\t\t\t\tif ( this.nodeRef && ! grabStylesCompleted ) {\n\t\t\t\t\tconst newFallbackStyles = mapNodeToProps(\n\t\t\t\t\t\tthis.nodeRef,\n\t\t\t\t\t\tthis.props\n\t\t\t\t\t);\n\n\t\t\t\t\tif (\n\t\t\t\t\t\t! fastDeepEqual( newFallbackStyles, fallbackStyles )\n\t\t\t\t\t) {\n\t\t\t\t\t\tthis.setState( {\n\t\t\t\t\t\t\tfallbackStyles: newFallbackStyles,\n\t\t\t\t\t\t\tgrabStylesCompleted:\n\t\t\t\t\t\t\t\tObject.values( newFallbackStyles ).every(\n\t\t\t\t\t\t\t\t\tBoolean\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\tconst wrappedComponent = (\n\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t{ ...this.props }\n\t\t\t\t\t\t{ ...this.state.fallbackStyles }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t\treturn this.props.node ? (\n\t\t\t\t\twrappedComponent\n\t\t\t\t) : (\n\t\t\t\t\t<div ref={ this.bindRef }> { wrappedComponent } </div>\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t}, 'withFallbackStyles' );\n"],"mappings":";;;;;;;;AAGA,IAAAA,GAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AATA;AACA;AACA;AAGA;AACA;AACA;AAFA,IAAAG,QAAA,GAiBCC,cAG6B,IAE7B,IAAAC,mCAA0B,EAAIC,gBAAgB,IAAM;EACnD,OAAO,cAAcC,kBAAS,CAAiB;IAG9CC,WAAWA,CAAEC,KAAY,EAAG;MAC3B,KAAK,CAAEA,KAAM,CAAC;MACd,IAAI,CAACC,OAAO,GAAG,IAAI,CAACD,KAAK,CAACE,IAAI;MAC9B,IAAI,CAACC,KAAK,GAAG;QACZC,cAAc,EAAEC,SAAS;QACzBC,mBAAmB,EAAE;MACtB,CAAC;MAED,IAAI,CAACC,OAAO,GAAG,IAAI,CAACA,OAAO,CAACC,IAAI,CAAE,IAAK,CAAC;IACzC;IAEAD,OAAOA,CAAEL,IAAoB,EAAG;MAC/B,IAAK,CAAEA,IAAI,EAAG;QACb;MACD;MACA,IAAI,CAACD,OAAO,GAAGC,IAAI;IACpB;IAEAO,iBAAiBA,CAAA,EAAG;MACnB,IAAI,CAACC,kBAAkB,CAAC,CAAC;IAC1B;IAEAC,kBAAkBA,CAAA,EAAG;MACpB,IAAI,CAACD,kBAAkB,CAAC,CAAC;IAC1B;IAEAA,kBAAkBA,CAAA,EAAG;MACpB,MAAM;QAAEJ,mBAAmB;QAAEF;MAAe,CAAC,GAAG,IAAI,CAACD,KAAK;MAC1D,IAAK,IAAI,CAACF,OAAO,IAAI,CAAEK,mBAAmB,EAAG;QAC5C,MAAMM,iBAAiB,GAAGjB,cAAc,CACvC,IAAI,CAACM,OAAO,EACZ,IAAI,CAACD,KACN,CAAC;QAED,IACC,CAAE,IAAAa,WAAa,EAAED,iBAAiB,EAAER,cAAe,CAAC,EACnD;UACD,IAAI,CAACU,QAAQ,CAAE;YACdV,cAAc,EAAEQ,iBAAiB;YACjCN,mBAAmB,EAClBS,MAAM,CAACC,MAAM,CAAEJ,iBAAkB,CAAC,CAACK,KAAK,CACvCC,OACD;UACF,CAAE,CAAC;QACJ;MACD;IACD;IAEAC,MAAMA,CAAA,EAAG;MACR,MAAMC,gBAAgB,GACrB,IAAAC,MAAA,CAAAC,aAAA,EAACzB,gBAAgB;QAAA,GACX,IAAI,CAACG,KAAK;QAAA,GACV,IAAI,CAACG,KAAK,CAACC;MAAc,CAC9B,CACD;MACD,OAAO,IAAI,CAACJ,KAAK,CAACE,IAAI,GACrBkB,gBAAgB,GAEhB,IAAAC,MAAA,CAAAC,aAAA;QAAKC,GAAG,EAAG,IAAI,CAAChB;MAAS,GAAC,GAAC,EAAEa,gBAAgB,EAAE,GAAM,CACrD;IACF;EACD,CAAC;AACF,CAAC,EAAE,oBAAqB,CAAC;AAAAI,OAAA,CAAAC,OAAA,GAAA/B,QAAA","ignoreList":[]}
+{"version":3,"names":["_es","_interopRequireDefault","require","_element","_compose","_jsxRuntime","_default","mapNodeToProps","createHigherOrderComponent","WrappedComponent","Component","constructor","props","nodeRef","node","state","fallbackStyles","undefined","grabStylesCompleted","bindRef","bind","componentDidMount","grabFallbackStyles","componentDidUpdate","newFallbackStyles","fastDeepEqual","setState","Object","values","every","Boolean","render","wrappedComponent","jsx","jsxs","ref","children","exports","default"],"sources":["@wordpress/components/src/higher-order/with-fallback-styles/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\ntype Props = {\n\tnode?: HTMLElement;\n\t[ key: string ]: any;\n};\n\ntype State = {\n\tfallbackStyles?: { [ key: string ]: any };\n\tgrabStylesCompleted: boolean;\n};\n\nexport default (\n\tmapNodeToProps: (\n\t\tnode: HTMLElement,\n\t\tprops: Props\n\t) => { [ key: string ]: any }\n) =>\n\tcreateHigherOrderComponent( ( WrappedComponent ) => {\n\t\treturn class extends Component< Props, State > {\n\t\t\tnodeRef?: HTMLElement;\n\n\t\t\tconstructor( props: Props ) {\n\t\t\t\tsuper( props );\n\t\t\t\tthis.nodeRef = this.props.node;\n\t\t\t\tthis.state = {\n\t\t\t\t\tfallbackStyles: undefined,\n\t\t\t\t\tgrabStylesCompleted: false,\n\t\t\t\t};\n\n\t\t\t\tthis.bindRef = this.bindRef.bind( this );\n\t\t\t}\n\n\t\t\tbindRef( node: HTMLDivElement ) {\n\t\t\t\tif ( ! node ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tthis.nodeRef = node;\n\t\t\t}\n\n\t\t\tcomponentDidMount() {\n\t\t\t\tthis.grabFallbackStyles();\n\t\t\t}\n\n\t\t\tcomponentDidUpdate() {\n\t\t\t\tthis.grabFallbackStyles();\n\t\t\t}\n\n\t\t\tgrabFallbackStyles() {\n\t\t\t\tconst { grabStylesCompleted, fallbackStyles } = this.state;\n\t\t\t\tif ( this.nodeRef && ! grabStylesCompleted ) {\n\t\t\t\t\tconst newFallbackStyles = mapNodeToProps(\n\t\t\t\t\t\tthis.nodeRef,\n\t\t\t\t\t\tthis.props\n\t\t\t\t\t);\n\n\t\t\t\t\tif (\n\t\t\t\t\t\t! fastDeepEqual( newFallbackStyles, fallbackStyles )\n\t\t\t\t\t) {\n\t\t\t\t\t\tthis.setState( {\n\t\t\t\t\t\t\tfallbackStyles: newFallbackStyles,\n\t\t\t\t\t\t\tgrabStylesCompleted:\n\t\t\t\t\t\t\t\tObject.values( newFallbackStyles ).every(\n\t\t\t\t\t\t\t\t\tBoolean\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\tconst wrappedComponent = (\n\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t{ ...this.props }\n\t\t\t\t\t\t{ ...this.state.fallbackStyles }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t\treturn this.props.node ? (\n\t\t\t\t\twrappedComponent\n\t\t\t\t) : (\n\t\t\t\t\t<div ref={ this.bindRef }> { wrappedComponent } </div>\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t}, 'withFallbackStyles' );\n"],"mappings":";;;;;;;AAGA,IAAAA,GAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAAgE,IAAAG,WAAA,GAAAH,OAAA;AAThE;AACA;AACA;AAGA;AACA;AACA;AAFA,IAAAI,QAAA,GAiBCC,cAG6B,IAE7B,IAAAC,mCAA0B,EAAIC,gBAAgB,IAAM;EACnD,OAAO,cAAcC,kBAAS,CAAiB;IAG9CC,WAAWA,CAAEC,KAAY,EAAG;MAC3B,KAAK,CAAEA,KAAM,CAAC;MACd,IAAI,CAACC,OAAO,GAAG,IAAI,CAACD,KAAK,CAACE,IAAI;MAC9B,IAAI,CAACC,KAAK,GAAG;QACZC,cAAc,EAAEC,SAAS;QACzBC,mBAAmB,EAAE;MACtB,CAAC;MAED,IAAI,CAACC,OAAO,GAAG,IAAI,CAACA,OAAO,CAACC,IAAI,CAAE,IAAK,CAAC;IACzC;IAEAD,OAAOA,CAAEL,IAAoB,EAAG;MAC/B,IAAK,CAAEA,IAAI,EAAG;QACb;MACD;MACA,IAAI,CAACD,OAAO,GAAGC,IAAI;IACpB;IAEAO,iBAAiBA,CAAA,EAAG;MACnB,IAAI,CAACC,kBAAkB,CAAC,CAAC;IAC1B;IAEAC,kBAAkBA,CAAA,EAAG;MACpB,IAAI,CAACD,kBAAkB,CAAC,CAAC;IAC1B;IAEAA,kBAAkBA,CAAA,EAAG;MACpB,MAAM;QAAEJ,mBAAmB;QAAEF;MAAe,CAAC,GAAG,IAAI,CAACD,KAAK;MAC1D,IAAK,IAAI,CAACF,OAAO,IAAI,CAAEK,mBAAmB,EAAG;QAC5C,MAAMM,iBAAiB,GAAGjB,cAAc,CACvC,IAAI,CAACM,OAAO,EACZ,IAAI,CAACD,KACN,CAAC;QAED,IACC,CAAE,IAAAa,WAAa,EAAED,iBAAiB,EAAER,cAAe,CAAC,EACnD;UACD,IAAI,CAACU,QAAQ,CAAE;YACdV,cAAc,EAAEQ,iBAAiB;YACjCN,mBAAmB,EAClBS,MAAM,CAACC,MAAM,CAAEJ,iBAAkB,CAAC,CAACK,KAAK,CACvCC,OACD;UACF,CAAE,CAAC;QACJ;MACD;IACD;IAEAC,MAAMA,CAAA,EAAG;MACR,MAAMC,gBAAgB,gBACrB,IAAA3B,WAAA,CAAA4B,GAAA,EAACxB,gBAAgB;QAAA,GACX,IAAI,CAACG,KAAK;QAAA,GACV,IAAI,CAACG,KAAK,CAACC;MAAc,CAC9B,CACD;MACD,OAAO,IAAI,CAACJ,KAAK,CAACE,IAAI,GACrBkB,gBAAgB,gBAEhB,IAAA3B,WAAA,CAAA6B,IAAA;QAAKC,GAAG,EAAG,IAAI,CAAChB,OAAS;QAAAiB,QAAA,GAAC,GAAC,EAAEJ,gBAAgB,EAAE,GAAC;MAAA,CAAK,CACrD;IACF;EACD,CAAC;AACF,CAAC,EAAE,oBAAqB,CAAC;AAAAK,OAAA,CAAAC,OAAA,GAAAhC,QAAA","ignoreList":[]}

package/build/higher-order/with-filters/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = withFilters;
-var _react = require("react");
 var _element = require("@wordpress/element");
 var _hooks = require("@wordpress/hooks");
 var _compose = require("@wordpress/compose");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -96,7 +96,7 @@ function withFilters(hookName) {
         }
       }
       render() {
-        return (0, _react.createElement)(FilteredComponent, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(FilteredComponent, {
           ...this.props
         });
       }

package/build/higher-order/with-filters/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_hooks","_compose","ANIMATION_FRAME_PERIOD","withFilters","hookName","createHigherOrderComponent","OriginalComponent","namespace","FilteredComponent","ensureFilteredComponent","undefined","applyFilters","FilteredComponentRenderer","Component","constructor","props","componentDidMount","instances","push","length","addAction","onHooksUpdated","componentWillUnmount","filter","instance","removeAction","render","_react","createElement","throttledForceUpdate","debounce","forEach","forceUpdate","updatedHookName"],"sources":["@wordpress/components/src/higher-order/with-filters/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { addAction, applyFilters, removeAction } from '@wordpress/hooks';\nimport { createHigherOrderComponent, debounce } from '@wordpress/compose';\n\nconst ANIMATION_FRAME_PERIOD = 16;\n\n/**\n * Creates a higher-order component which adds filtering capability to the\n * wrapped component. Filters get applied when the original component is about\n * to be mounted. When a filter is added or removed that matches the hook name,\n * the wrapped component re-renders.\n *\n * @param hookName Hook name exposed to be used by filters.\n *\n * @return Higher-order component factory.\n *\n * ```jsx\n * import { withFilters } from '@wordpress/components';\n * import { addFilter } from '@wordpress/hooks';\n *\n * const MyComponent = ( { title } ) => <h1>{ title }</h1>;\n *\n * const ComponentToAppend = () => <div>Appended component</div>;\n *\n * function withComponentAppended( FilteredComponent ) {\n * \treturn ( props ) => (\n * \t\t<>\n * \t\t\t<FilteredComponent { ...props } />\n * \t\t\t<ComponentToAppend />\n * \t\t</>\n * \t);\n * }\n *\n * addFilter(\n * \t'MyHookName',\n * \t'my-plugin/with-component-appended',\n * \twithComponentAppended\n * );\n *\n * const MyComponentWithFilters = withFilters( 'MyHookName' )( MyComponent );\n * ```\n */\nexport default function withFilters( hookName: string ) {\n\treturn createHigherOrderComponent( ( OriginalComponent ) => {\n\t\tconst namespace = 'core/with-filters/' + hookName;\n\n\t\t/**\n\t\t * The component definition with current filters applied. Each instance\n\t\t * reuse this shared reference as an optimization to avoid excessive\n\t\t * calls to `applyFilters` when many instances exist.\n\t\t */\n\t\tlet FilteredComponent: React.ComponentType;\n\n\t\t/**\n\t\t * Initializes the FilteredComponent variable once, if not already\n\t\t * assigned. Subsequent calls are effectively a noop.\n\t\t */\n\t\tfunction ensureFilteredComponent() {\n\t\t\tif ( FilteredComponent === undefined ) {\n\t\t\t\tFilteredComponent = applyFilters(\n\t\t\t\t\thookName,\n\t\t\t\t\tOriginalComponent\n\t\t\t\t) as React.ComponentType;\n\t\t\t}\n\t\t}\n\n\t\tclass FilteredComponentRenderer extends Component {\n\t\t\tstatic instances: FilteredComponentRenderer[];\n\n\t\t\tconstructor( props: { [ key: string ]: any } ) {\n\t\t\t\tsuper( props );\n\n\t\t\t\tensureFilteredComponent();\n\t\t\t}\n\n\t\t\tcomponentDidMount() {\n\t\t\t\tFilteredComponentRenderer.instances.push( this );\n\n\t\t\t\t// If there were previously no mounted instances for components\n\t\t\t\t// filtered on this hook, add the hook handler.\n\t\t\t\tif ( FilteredComponentRenderer.instances.length === 1 ) {\n\t\t\t\t\taddAction( 'hookRemoved', namespace, onHooksUpdated );\n\t\t\t\t\taddAction( 'hookAdded', namespace, onHooksUpdated );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tcomponentWillUnmount() {\n\t\t\t\tFilteredComponentRenderer.instances =\n\t\t\t\t\tFilteredComponentRenderer.instances.filter(\n\t\t\t\t\t\t( instance ) => instance !== this\n\t\t\t\t\t);\n\n\t\t\t\t// If this was the last of the mounted components filtered on\n\t\t\t\t// this hook, remove the hook handler.\n\t\t\t\tif ( FilteredComponentRenderer.instances.length === 0 ) {\n\t\t\t\t\tremoveAction( 'hookRemoved', namespace );\n\t\t\t\t\tremoveAction( 'hookAdded', namespace );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\treturn <FilteredComponent { ...this.props } />;\n\t\t\t}\n\t\t}\n\n\t\tFilteredComponentRenderer.instances = [];\n\n\t\t/**\n\t\t * Updates the FilteredComponent definition, forcing a render for each\n\t\t * mounted instance. This occurs a maximum of once per animation frame.\n\t\t */\n\t\tconst throttledForceUpdate = debounce( () => {\n\t\t\t// Recreate the filtered component, only after delay so that it's\n\t\t\t// computed once, even if many filters added.\n\t\t\tFilteredComponent = applyFilters(\n\t\t\t\thookName,\n\t\t\t\tOriginalComponent\n\t\t\t) as React.ComponentType;\n\n\t\t\t// Force each instance to render.\n\t\t\tFilteredComponentRenderer.instances.forEach( ( instance ) => {\n\t\t\t\tinstance.forceUpdate();\n\t\t\t} );\n\t\t}, ANIMATION_FRAME_PERIOD );\n\n\t\t/**\n\t\t * When a filter is added or removed for the matching hook name, each\n\t\t * mounted instance should re-render with the new filters having been\n\t\t * applied to the original component.\n\t\t *\n\t\t * @param updatedHookName Name of the hook that was updated.\n\t\t */\n\t\tfunction onHooksUpdated( updatedHookName: string ) {\n\t\t\tif ( updatedHookName === hookName ) {\n\t\t\t\tthrottledForceUpdate();\n\t\t\t}\n\t\t}\n\n\t\treturn FilteredComponentRenderer;\n\t}, 'withFilters' );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AALA;AACA;AACA;;AAKA,MAAMG,sBAAsB,GAAG,EAAE;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASC,WAAWA,CAAEC,QAAgB,EAAG;EACvD,OAAO,IAAAC,mCAA0B,EAAIC,iBAAiB,IAAM;IAC3D,MAAMC,SAAS,GAAG,oBAAoB,GAAGH,QAAQ;;IAEjD;AACF;AACA;AACA;AACA;IACE,IAAII,iBAAsC;;IAE1C;AACF;AACA;AACA;IACE,SAASC,uBAAuBA,CAAA,EAAG;MAClC,IAAKD,iBAAiB,KAAKE,SAAS,EAAG;QACtCF,iBAAiB,GAAG,IAAAG,mBAAY,EAC/BP,QAAQ,EACRE,iBACD,CAAwB;MACzB;IACD;IAEA,MAAMM,yBAAyB,SAASC,kBAAS,CAAC;MAGjDC,WAAWA,CAAEC,KAA+B,EAAG;QAC9C,KAAK,CAAEA,KAAM,CAAC;QAEdN,uBAAuB,CAAC,CAAC;MAC1B;MAEAO,iBAAiBA,CAAA,EAAG;QACnBJ,yBAAyB,CAACK,SAAS,CAACC,IAAI,CAAE,IAAK,CAAC;;QAEhD;QACA;QACA,IAAKN,yBAAyB,CAACK,SAAS,CAACE,MAAM,KAAK,CAAC,EAAG;UACvD,IAAAC,gBAAS,EAAE,aAAa,EAAEb,SAAS,EAAEc,cAAe,CAAC;UACrD,IAAAD,gBAAS,EAAE,WAAW,EAAEb,SAAS,EAAEc,cAAe,CAAC;QACpD;MACD;MAEAC,oBAAoBA,CAAA,EAAG;QACtBV,yBAAyB,CAACK,SAAS,GAClCL,yBAAyB,CAACK,SAAS,CAACM,MAAM,CACvCC,QAAQ,IAAMA,QAAQ,KAAK,IAC9B,CAAC;;QAEF;QACA;QACA,IAAKZ,yBAAyB,CAACK,SAAS,CAACE,MAAM,KAAK,CAAC,EAAG;UACvD,IAAAM,mBAAY,EAAE,aAAa,EAAElB,SAAU,CAAC;UACxC,IAAAkB,mBAAY,EAAE,WAAW,EAAElB,SAAU,CAAC;QACvC;MACD;MAEAmB,MAAMA,CAAA,EAAG;QACR,OAAO,IAAAC,MAAA,CAAAC,aAAA,EAACpB,iBAAiB;UAAA,GAAM,IAAI,CAACO;QAAK,CAAI,CAAC;MAC/C;IACD;IAEAH,yBAAyB,CAACK,SAAS,GAAG,EAAE;;IAExC;AACF;AACA;AACA;IACE,MAAMY,oBAAoB,GAAG,IAAAC,iBAAQ,EAAE,MAAM;MAC5C;MACA;MACAtB,iBAAiB,GAAG,IAAAG,mBAAY,EAC/BP,QAAQ,EACRE,iBACD,CAAwB;;MAExB;MACAM,yBAAyB,CAACK,SAAS,CAACc,OAAO,CAAIP,QAAQ,IAAM;QAC5DA,QAAQ,CAACQ,WAAW,CAAC,CAAC;MACvB,CAAE,CAAC;IACJ,CAAC,EAAE9B,sBAAuB,CAAC;;IAE3B;AACF;AACA;AACA;AACA;AACA;AACA;IACE,SAASmB,cAAcA,CAAEY,eAAuB,EAAG;MAClD,IAAKA,eAAe,KAAK7B,QAAQ,EAAG;QACnCyB,oBAAoB,CAAC,CAAC;MACvB;IACD;IAEA,OAAOjB,yBAAyB;EACjC,CAAC,EAAE,aAAc,CAAC;AACnB","ignoreList":[]}
+{"version":3,"names":["_element","require","_hooks","_compose","_jsxRuntime","ANIMATION_FRAME_PERIOD","withFilters","hookName","createHigherOrderComponent","OriginalComponent","namespace","FilteredComponent","ensureFilteredComponent","undefined","applyFilters","FilteredComponentRenderer","Component","constructor","props","componentDidMount","instances","push","length","addAction","onHooksUpdated","componentWillUnmount","filter","instance","removeAction","render","jsx","throttledForceUpdate","debounce","forEach","forceUpdate","updatedHookName"],"sources":["@wordpress/components/src/higher-order/with-filters/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { addAction, applyFilters, removeAction } from '@wordpress/hooks';\nimport { createHigherOrderComponent, debounce } from '@wordpress/compose';\n\nconst ANIMATION_FRAME_PERIOD = 16;\n\n/**\n * Creates a higher-order component which adds filtering capability to the\n * wrapped component. Filters get applied when the original component is about\n * to be mounted. When a filter is added or removed that matches the hook name,\n * the wrapped component re-renders.\n *\n * @param hookName Hook name exposed to be used by filters.\n *\n * @return Higher-order component factory.\n *\n * ```jsx\n * import { withFilters } from '@wordpress/components';\n * import { addFilter } from '@wordpress/hooks';\n *\n * const MyComponent = ( { title } ) => <h1>{ title }</h1>;\n *\n * const ComponentToAppend = () => <div>Appended component</div>;\n *\n * function withComponentAppended( FilteredComponent ) {\n * \treturn ( props ) => (\n * \t\t<>\n * \t\t\t<FilteredComponent { ...props } />\n * \t\t\t<ComponentToAppend />\n * \t\t</>\n * \t);\n * }\n *\n * addFilter(\n * \t'MyHookName',\n * \t'my-plugin/with-component-appended',\n * \twithComponentAppended\n * );\n *\n * const MyComponentWithFilters = withFilters( 'MyHookName' )( MyComponent );\n * ```\n */\nexport default function withFilters( hookName: string ) {\n\treturn createHigherOrderComponent( ( OriginalComponent ) => {\n\t\tconst namespace = 'core/with-filters/' + hookName;\n\n\t\t/**\n\t\t * The component definition with current filters applied. Each instance\n\t\t * reuse this shared reference as an optimization to avoid excessive\n\t\t * calls to `applyFilters` when many instances exist.\n\t\t */\n\t\tlet FilteredComponent: React.ComponentType;\n\n\t\t/**\n\t\t * Initializes the FilteredComponent variable once, if not already\n\t\t * assigned. Subsequent calls are effectively a noop.\n\t\t */\n\t\tfunction ensureFilteredComponent() {\n\t\t\tif ( FilteredComponent === undefined ) {\n\t\t\t\tFilteredComponent = applyFilters(\n\t\t\t\t\thookName,\n\t\t\t\t\tOriginalComponent\n\t\t\t\t) as React.ComponentType;\n\t\t\t}\n\t\t}\n\n\t\tclass FilteredComponentRenderer extends Component {\n\t\t\tstatic instances: FilteredComponentRenderer[];\n\n\t\t\tconstructor( props: { [ key: string ]: any } ) {\n\t\t\t\tsuper( props );\n\n\t\t\t\tensureFilteredComponent();\n\t\t\t}\n\n\t\t\tcomponentDidMount() {\n\t\t\t\tFilteredComponentRenderer.instances.push( this );\n\n\t\t\t\t// If there were previously no mounted instances for components\n\t\t\t\t// filtered on this hook, add the hook handler.\n\t\t\t\tif ( FilteredComponentRenderer.instances.length === 1 ) {\n\t\t\t\t\taddAction( 'hookRemoved', namespace, onHooksUpdated );\n\t\t\t\t\taddAction( 'hookAdded', namespace, onHooksUpdated );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tcomponentWillUnmount() {\n\t\t\t\tFilteredComponentRenderer.instances =\n\t\t\t\t\tFilteredComponentRenderer.instances.filter(\n\t\t\t\t\t\t( instance ) => instance !== this\n\t\t\t\t\t);\n\n\t\t\t\t// If this was the last of the mounted components filtered on\n\t\t\t\t// this hook, remove the hook handler.\n\t\t\t\tif ( FilteredComponentRenderer.instances.length === 0 ) {\n\t\t\t\t\tremoveAction( 'hookRemoved', namespace );\n\t\t\t\t\tremoveAction( 'hookAdded', namespace );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\treturn <FilteredComponent { ...this.props } />;\n\t\t\t}\n\t\t}\n\n\t\tFilteredComponentRenderer.instances = [];\n\n\t\t/**\n\t\t * Updates the FilteredComponent definition, forcing a render for each\n\t\t * mounted instance. This occurs a maximum of once per animation frame.\n\t\t */\n\t\tconst throttledForceUpdate = debounce( () => {\n\t\t\t// Recreate the filtered component, only after delay so that it's\n\t\t\t// computed once, even if many filters added.\n\t\t\tFilteredComponent = applyFilters(\n\t\t\t\thookName,\n\t\t\t\tOriginalComponent\n\t\t\t) as React.ComponentType;\n\n\t\t\t// Force each instance to render.\n\t\t\tFilteredComponentRenderer.instances.forEach( ( instance ) => {\n\t\t\t\tinstance.forceUpdate();\n\t\t\t} );\n\t\t}, ANIMATION_FRAME_PERIOD );\n\n\t\t/**\n\t\t * When a filter is added or removed for the matching hook name, each\n\t\t * mounted instance should re-render with the new filters having been\n\t\t * applied to the original component.\n\t\t *\n\t\t * @param updatedHookName Name of the hook that was updated.\n\t\t */\n\t\tfunction onHooksUpdated( updatedHookName: string ) {\n\t\t\tif ( updatedHookName === hookName ) {\n\t\t\t\tthrottledForceUpdate();\n\t\t\t}\n\t\t}\n\n\t\treturn FilteredComponentRenderer;\n\t}, 'withFilters' );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAA0E,IAAAG,WAAA,GAAAH,OAAA;AAL1E;AACA;AACA;;AAKA,MAAMI,sBAAsB,GAAG,EAAE;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASC,WAAWA,CAAEC,QAAgB,EAAG;EACvD,OAAO,IAAAC,mCAA0B,EAAIC,iBAAiB,IAAM;IAC3D,MAAMC,SAAS,GAAG,oBAAoB,GAAGH,QAAQ;;IAEjD;AACF;AACA;AACA;AACA;IACE,IAAII,iBAAsC;;IAE1C;AACF;AACA;AACA;IACE,SAASC,uBAAuBA,CAAA,EAAG;MAClC,IAAKD,iBAAiB,KAAKE,SAAS,EAAG;QACtCF,iBAAiB,GAAG,IAAAG,mBAAY,EAC/BP,QAAQ,EACRE,iBACD,CAAwB;MACzB;IACD;IAEA,MAAMM,yBAAyB,SAASC,kBAAS,CAAC;MAGjDC,WAAWA,CAAEC,KAA+B,EAAG;QAC9C,KAAK,CAAEA,KAAM,CAAC;QAEdN,uBAAuB,CAAC,CAAC;MAC1B;MAEAO,iBAAiBA,CAAA,EAAG;QACnBJ,yBAAyB,CAACK,SAAS,CAACC,IAAI,CAAE,IAAK,CAAC;;QAEhD;QACA;QACA,IAAKN,yBAAyB,CAACK,SAAS,CAACE,MAAM,KAAK,CAAC,EAAG;UACvD,IAAAC,gBAAS,EAAE,aAAa,EAAEb,SAAS,EAAEc,cAAe,CAAC;UACrD,IAAAD,gBAAS,EAAE,WAAW,EAAEb,SAAS,EAAEc,cAAe,CAAC;QACpD;MACD;MAEAC,oBAAoBA,CAAA,EAAG;QACtBV,yBAAyB,CAACK,SAAS,GAClCL,yBAAyB,CAACK,SAAS,CAACM,MAAM,CACvCC,QAAQ,IAAMA,QAAQ,KAAK,IAC9B,CAAC;;QAEF;QACA;QACA,IAAKZ,yBAAyB,CAACK,SAAS,CAACE,MAAM,KAAK,CAAC,EAAG;UACvD,IAAAM,mBAAY,EAAE,aAAa,EAAElB,SAAU,CAAC;UACxC,IAAAkB,mBAAY,EAAE,WAAW,EAAElB,SAAU,CAAC;QACvC;MACD;MAEAmB,MAAMA,CAAA,EAAG;QACR,oBAAO,IAAAzB,WAAA,CAAA0B,GAAA,EAACnB,iBAAiB;UAAA,GAAM,IAAI,CAACO;QAAK,CAAI,CAAC;MAC/C;IACD;IAEAH,yBAAyB,CAACK,SAAS,GAAG,EAAE;;IAExC;AACF;AACA;AACA;IACE,MAAMW,oBAAoB,GAAG,IAAAC,iBAAQ,EAAE,MAAM;MAC5C;MACA;MACArB,iBAAiB,GAAG,IAAAG,mBAAY,EAC/BP,QAAQ,EACRE,iBACD,CAAwB;;MAExB;MACAM,yBAAyB,CAACK,SAAS,CAACa,OAAO,CAAIN,QAAQ,IAAM;QAC5DA,QAAQ,CAACO,WAAW,CAAC,CAAC;MACvB,CAAE,CAAC;IACJ,CAAC,EAAE7B,sBAAuB,CAAC;;IAE3B;AACF;AACA;AACA;AACA;AACA;AACA;IACE,SAASmB,cAAcA,CAAEW,eAAuB,EAAG;MAClD,IAAKA,eAAe,KAAK5B,QAAQ,EAAG;QACnCwB,oBAAoB,CAAC,CAAC;MACvB;IACD;IAEA,OAAOhB,yBAAyB;EACjC,CAAC,EAAE,aAAc,CAAC;AACnB","ignoreList":[]}