@wordpress/components 25.5.0 → 25.6.1

package/build/guide/page-control.js

@@ -1,20 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = PageControl;
-
 var _element = require("@wordpress/element");
-
 var _i18n = require("@wordpress/i18n");
-
 var _button = _interopRequireDefault(require("../button"));
-
 var _icons = require("./icons");
-
 /**
  * WordPress dependencies
  */
@@ -22,6 +16,7 @@ var _icons = require("./icons");
 /**
  * Internal dependencies
  */
+
 function PageControl({
   currentPage,
   numberOfPages,
@@ -33,14 +28,14 @@ function PageControl({
   }, Array.from({
     length: numberOfPages
   }).map((_, page) => (0, _element.createElement)("li", {
-    key: page // Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current
+    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, _element.createElement)(_button.default, {
     key: page,
     icon: (0, _element.createElement)(_icons.PageControlIcon, null),
-    "aria-label": (0, _i18n.sprintf)(
-    /* translators: 1: current page number 2: total number of pages */
+    "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)
   }))));

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/guide/page-control.tsx"],"names":["PageControl","currentPage","numberOfPages","setCurrentPage","Array","from","length","map","_","page","undefined"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAKe,SAASA,WAAT,CAAsB;AACpCC,EAAAA,WADoC;AAEpCC,EAAAA,aAFoC;AAGpCC,EAAAA;AAHoC,CAAtB,EAIO;AACrB,SACC;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,kBAAa,cAAI,gBAAJ;AAFd,KAIGC,KAAK,CAACC,IAAN,CAAY;AAAEC,IAAAA,MAAM,EAAEJ;AAAV,GAAZ,EAAwCK,GAAxC,CAA6C,CAAEC,CAAF,EAAKC,IAAL,KAC9C;AACC,IAAA,GAAG,EAAGA,IADP,CAEC;AAFD;AAGC,oBAAeA,IAAI,KAAKR,WAAT,GAAuB,MAAvB,GAAgCS;AAHhD,KAKC,4BAAC,eAAD;AACC,IAAA,GAAG,EAAGD,IADP;AAEC,IAAA,IAAI,EAAG,4BAAC,sBAAD,OAFR;AAGC,kBAAa;AACZ;AACA,kBAAI,mBAAJ,CAFY,EAGZA,IAAI,GAAG,CAHK,EAIZP,aAJY,CAHd;AASC,IAAA,OAAO,EAAG,MAAMC,cAAc,CAAEM,IAAF;AAT/B,IALD,CADC,CAJH,CADD;AA0BA","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"]}
+{"version":3,"names":["_i18n","require","_button","_interopRequireDefault","_icons","PageControl","currentPage","numberOfPages","setCurrentPage","_element","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,QAAA,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,QAAA,CAAAC,aAAA;IACCS,GAAG,EAAGD;IACN;IAAA;IACA,gBAAeA,IAAI,KAAKZ,WAAW,GAAG,MAAM,GAAGc;EAAW,GAE1D,IAAAX,QAAA,CAAAC,aAAA,EAACR,OAAA,CAAAmB,OAAM;IACNF,GAAG,EAAGD,IAAM;IACZI,IAAI,EAAG,IAAAb,QAAA,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"}

package/build/guide/page.js

@@ -1,19 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = GuidePage;
-
 var _element = require("@wordpress/element");
-
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
-
 /**
  * WordPress dependencies
  */
+
 function GuidePage(props) {
   (0, _element.useEffect)(() => {
     (0, _deprecated.default)('<GuidePage>', {
@@ -21,7 +18,8 @@ function GuidePage(props) {
       alternative: 'the `pages` prop in <Guide>'
     });
   }, []);
-  return (0, _element.createElement)("div", { ...props
+  return (0, _element.createElement)("div", {
+    ...props
   });
 }
 //# sourceMappingURL=page.js.map

package/build/guide/page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/guide/page.tsx"],"names":["GuidePage","props","since","alternative"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AASe,SAASA,SAAT,CACdC,KADc,EAEb;AACD,0BAAW,MAAM;AAChB,6BAAY,aAAZ,EAA2B;AAC1BC,MAAAA,KAAK,EAAE,KADmB;AAE1BC,MAAAA,WAAW,EAAE;AAFa,KAA3B;AAIA,GALD,EAKG,EALH;AAOA,SAAO,wCAAUF;AAAV,IAAP;AACA","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 '../ui/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"]}
+{"version":3,"names":["_element","require","_deprecated","_interopRequireDefault","GuidePage","props","useEffect","deprecated","since","alternative","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 '../ui/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;;AASe,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,IAAAT,QAAA,CAAAU,aAAA;IAAA,GAAUL;EAAK,CAAI,CAAC;AAC5B"}

package/build/guide/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/guide/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { ModalProps } from '../modal/types';\n\nexport type Page = {\n\t/**\n\t * Content of the page.\n\t */\n\tcontent: ReactNode;\n\t/**\n\t * Image displayed above the page content.\n\t */\n\timage?: ReactNode;\n};\n\nexport type GuideProps = {\n\t/**\n\t * Deprecated. Use `pages` prop instead.\n\t *\n\t * @deprecated since 5.5\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * A custom class to add to the modal.\n\t */\n\tclassName?: string;\n\t/**\n\t * Used as the modal's accessibility label.\n\t */\n\tcontentLabel: ModalProps[ 'contentLabel' ];\n\t/**\n\t * Use this to customize the label of the _Finish_ button shown at the end of the guide.\n\t *\n\t * @default 'Finish'\n\t */\n\tfinishButtonText?: string;\n\t/**\n\t * A function which is called when the guide is finished.\n\t */\n\tonFinish: ModalProps[ 'onRequestClose' ];\n\t/**\n\t * A list of objects describing each page in the guide. Each object **must** contain a `'content'` property and may optionally contain a `'image'` property.\n\t *\n\t * @default []\n\t */\n\tpages?: Page[];\n};\n\nexport type PageControlProps = {\n\t/**\n\t * Current page index.\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Total number of pages.\n\t */\n\tnumberOfPages: number;\n\t/**\n\t * Called when user clicks on a `PageControlIcon` button.\n\t */\n\tsetCurrentPage: ( page: number ) => void;\n};\n"],"mappings":""}

package/build/h-stack/component.js

@@ -4,24 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.HStack = void 0;
-
 var _element = require("@wordpress/element");
-
 var _context = require("../ui/context");
-
 var _view = require("../view");
-
 var _hook = require("./hook");
-
 /**
  * Internal dependencies
  */
+
 function UnconnectedHStack(props, forwardedRef) {
   const hStackProps = (0, _hook.useHStack)(props);
-  return (0, _element.createElement)(_view.View, { ...hStackProps,
+  return (0, _element.createElement)(_view.View, {
+    ...hStackProps,
     ref: forwardedRef
   });
 }
+
 /**
  * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.
  *
@@ -44,8 +42,6 @@ function UnconnectedHStack(props, forwardedRef) {
  * }
  * ```
  */
-
-
 const HStack = (0, _context.contextConnect)(UnconnectedHStack, 'HStack');
 exports.HStack = HStack;
 var _default = HStack;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/h-stack/component.tsx"],"names":["UnconnectedHStack","props","forwardedRef","hStackProps","HStack"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;AAMA,SAASA,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,WAAW,GAAG,qBAAWF,KAAX,CAApB;AAEA,SAAO,4BAAC,UAAD,OAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,IAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,MAAM,GAAG,6BAAgBJ,iBAAhB,EAAmC,QAAnC,CAAf;;eAEQI,M","sourcesContent":["/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../ui/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"]}
+{"version":3,"names":["_context","require","_view","_hook","UnconnectedHStack","props","forwardedRef","hStackProps","useHStack","_element","createElement","View","ref","HStack","contextConnect","exports","_default","default"],"sources":["@wordpress/components/src/h-stack/component.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { contextConnect } from '../ui/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,QAAA,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,GAAG,IAAAC,uBAAc,EAAEV,iBAAiB,EAAE,QAAS,CAAC;AAACW,OAAA,CAAAF,MAAA,GAAAA,MAAA;AAAA,IAAAG,QAAA,GAErDH,MAAM;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

package/build/h-stack/hook.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useHStack = useHStack;
-
 var _element = require("@wordpress/element");
-
 var _context = require("../ui/context");
-
 var _flex = require("../flex");
-
 var _utils = require("./utils");
-
 var _getValidChildren = require("../ui/utils/get-valid-children");
-
 /**
  * External dependencies
  */
@@ -22,6 +16,7 @@ var _getValidChildren = require("../ui/utils/get-valid-children");
 /**
  * Internal dependencies
  */
+
 function useHStack(props) {
   const {
     alignment = 'edge',
@@ -34,19 +29,15 @@ function useHStack(props) {
   const validChildren = (0, _getValidChildren.getValidChildren)(children);
   const clonedChildren = validChildren.map((child, index) => {
     const _isSpacer = (0, _context.hasConnectNamespace)(child, ['Spacer']);
-
     if (_isSpacer) {
       const childElement = child;
-
       const _key = childElement.key || `hstack-${index}`;
-
       return (0, _element.createElement)(_flex.FlexItem, {
         isBlock: true,
         key: _key,
         ...childElement.props
       });
     }
-
     return child;
   });
   const propsForFlex = {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/h-stack/hook.tsx"],"names":["useHStack","props","alignment","children","direction","spacing","otherProps","align","validChildren","clonedChildren","map","child","index","_isSpacer","childElement","_key","key","propsForFlex","justify","gap","flexProps"],"mappings":";;;;;;;;;AAQA;;AAKA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;AAWO,SAASA,SAAT,CAAoBC,KAApB,EAAqE;AAC3E,QAAM;AACLC,IAAAA,SAAS,GAAG,MADP;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,OAAO,GAAG,CAJL;AAKL,OAAGC;AALE,MAMF,+BAAkBL,KAAlB,EAAyB,QAAzB,CANJ;AAQA,QAAMM,KAAK,GAAG,8BAAmBL,SAAnB,EAA8BE,SAA9B,CAAd;AAEA,QAAMI,aAAa,GAAG,wCAAkBL,QAAlB,CAAtB;AACA,QAAMM,cAAc,GAAGD,aAAa,CAACE,GAAd,CAAmB,CAAEC,KAAF,EAASC,KAAT,KAAoB;AAC7D,UAAMC,SAAS,GAAG,kCAAqBF,KAArB,EAA4B,CAAE,QAAF,CAA5B,CAAlB;;AAEA,QAAKE,SAAL,EAAiB;AAChB,YAAMC,YAAY,GAAGH,KAArB;;AACA,YAAMI,IAAI,GAAGD,YAAY,CAACE,GAAb,IAAqB,UAAUJ,KAAO,EAAnD;;AAEA,aAAO,4BAAC,cAAD;AAAU,QAAA,OAAO,MAAjB;AAAkB,QAAA,GAAG,EAAGG,IAAxB;AAAA,WAAoCD,YAAY,CAACb;AAAjD,QAAP;AACA;;AAED,WAAOU,KAAP;AACA,GAXsB,CAAvB;AAaA,QAAMM,YAAY,GAAG;AACpBd,IAAAA,QAAQ,EAAEM,cADU;AAEpBL,IAAAA,SAFoB;AAGpBc,IAAAA,OAAO,EAAE,QAHW;AAIpB,OAAGX,KAJiB;AAKpB,OAAGD,UALiB;AAMpBa,IAAAA,GAAG,EAAEd;AANe,GAArB;AASA,QAAMe,SAAS,GAAG,mBAASH,YAAT,CAAlB;AAEA,SAAOG,SAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * Internal dependencies\n */\nimport {\n\thasConnectNamespace,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { FlexItem, useFlex } from '../flex';\nimport { getAlignmentProps } from './utils';\nimport { getValidChildren } from '../ui/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\tconst flexProps = useFlex( propsForFlex );\n\n\treturn flexProps;\n}\n"]}
+{"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","_element","createElement","FlexItem","isBlock","propsForFlex","justify","gap","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 '../ui/context';\nimport { hasConnectNamespace, useContextSystem } from '../ui/context';\nimport { FlexItem, useFlex } from '../flex';\nimport { getAlignmentProps } from './utils';\nimport { getValidChildren } from '../ui/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\tconst 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,QAAA,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,MAAMuB,SAAS,GAAG,IAAAC,aAAO,EAAEJ,YAAa,CAAC;EAEzC,OAAOG,SAAS;AACjB"}

package/build/h-stack/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,8 +16,6 @@ Object.defineProperty(exports, "useHStack", {
     return _hook.useHStack;
   }
 });
-
 var _component = _interopRequireDefault(require("./component"));
-
 var _hook = require("./hook");
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/h-stack/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as HStack } from './component';\nexport { useHStack } from './hook';\n"]}
+{"version":3,"names":["_component","_interopRequireDefault","require","_hook"],"sources":["@wordpress/components/src/h-stack/index.ts"],"sourcesContent":["export { default as HStack } from './component';\nexport { useHStack } from './hook';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA"}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/h-stack/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { FlexProps } from '../flex/types';\n\nexport type HStackAlignment =\n\t| 'bottom'\n\t| 'bottomLeft'\n\t| 'bottomRight'\n\t| 'center'\n\t| 'edge'\n\t| 'left'\n\t| 'right'\n\t| 'stretch'\n\t| 'top'\n\t| 'topLeft'\n\t| 'topRight';\n\nexport type AlignmentProps = {\n\tjustify?: CSSProperties[ 'justifyContent' ];\n\talign?: CSSProperties[ 'alignItems' ];\n};\n\nexport type Alignments = Record< HStackAlignment, AlignmentProps >;\n\nexport type Props = Omit< FlexProps, 'align' | 'gap' > & {\n\t/**\n\t * Determines how the child elements are aligned.\n\t *\n\t * * `top`: Aligns content to the top.\n\t * * `topLeft`: Aligns content to the top/left.\n\t * * `topRight`: Aligns content to the top/right.\n\t * * `left`: Aligns content to the left.\n\t * * `center`: Aligns content to the center.\n\t * * `right`: Aligns content to the right.\n\t * * `bottom`: Aligns content to the bottom.\n\t * * `bottomLeft`: Aligns content to the bottom/left.\n\t * * `bottomRight`: Aligns content to the bottom/right.\n\t * * `edge`: Justifies content to be evenly spread out up to the main axis edges of the container.\n\t * * `stretch`: Stretches content to the cross axis edges of the container.\n\t *\n\t * @default 'edge'\n\t */\n\talignment?: HStackAlignment | CSSProperties[ 'alignItems' ];\n\t/**\n\t * The amount of space between each child element. Spacing in between each child can be adjusted by using `spacing`.\n\t * The value of `spacing` works as a multiplier to the library's grid system (base of `4px`).\n\t *\n\t * @default 2\n\t */\n\tspacing?: CSSProperties[ 'width' ];\n};\n"],"mappings":""}

package/build/h-stack/utils.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getAlignmentProps = getAlignmentProps;
-
 var _values = require("../utils/values");
-
 /**
  * External dependencies
  */
@@ -14,6 +12,7 @@ var _values = require("../utils/values");
 /**
  * Internal dependencies
  */
+
 const H_ALIGNMENTS = {
   bottom: {
     align: 'flex-end',
@@ -104,12 +103,10 @@ const V_ALIGNMENTS = {
     align: 'flex-end'
   }
 };
-
 function getAlignmentProps(alignment, direction = 'row') {
   if (!(0, _values.isValueDefined)(alignment)) {
     return {};
   }
-
   const isVertical = direction === 'column';
   const props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;
   const alignmentProps = alignment in props ? props[alignment] : {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/h-stack/utils.ts"],"names":["H_ALIGNMENTS","bottom","align","justify","bottomLeft","bottomRight","center","edge","left","right","stretch","top","topLeft","topRight","V_ALIGNMENTS","getAlignmentProps","alignment","direction","isVertical","props","alignmentProps"],"mappings":";;;;;;;AASA;;AATA;AACA;AACA;;AAEA;AACA;AACA;AAKA,MAAMA,YAAwB,GAAG;AAChCC,EAAAA,MAAM,EAAE;AAAEC,IAAAA,KAAK,EAAE,UAAT;AAAqBC,IAAAA,OAAO,EAAE;AAA9B,GADwB;AAEhCC,EAAAA,UAAU,EAAE;AAAEF,IAAAA,KAAK,EAAE,UAAT;AAAqBC,IAAAA,OAAO,EAAE;AAA9B,GAFoB;AAGhCE,EAAAA,WAAW,EAAE;AAAEH,IAAAA,KAAK,EAAE,UAAT;AAAqBC,IAAAA,OAAO,EAAE;AAA9B,GAHmB;AAIhCG,EAAAA,MAAM,EAAE;AAAEJ,IAAAA,KAAK,EAAE,QAAT;AAAmBC,IAAAA,OAAO,EAAE;AAA5B,GAJwB;AAKhCI,EAAAA,IAAI,EAAE;AAAEL,IAAAA,KAAK,EAAE,QAAT;AAAmBC,IAAAA,OAAO,EAAE;AAA5B,GAL0B;AAMhCK,EAAAA,IAAI,EAAE;AAAEN,IAAAA,KAAK,EAAE,QAAT;AAAmBC,IAAAA,OAAO,EAAE;AAA5B,GAN0B;AAOhCM,EAAAA,KAAK,EAAE;AAAEP,IAAAA,KAAK,EAAE,QAAT;AAAmBC,IAAAA,OAAO,EAAE;AAA5B,GAPyB;AAQhCO,EAAAA,OAAO,EAAE;AAAER,IAAAA,KAAK,EAAE;AAAT,GARuB;AAShCS,EAAAA,GAAG,EAAE;AAAET,IAAAA,KAAK,EAAE,YAAT;AAAuBC,IAAAA,OAAO,EAAE;AAAhC,GAT2B;AAUhCS,EAAAA,OAAO,EAAE;AAAEV,IAAAA,KAAK,EAAE,YAAT;AAAuBC,IAAAA,OAAO,EAAE;AAAhC,GAVuB;AAWhCU,EAAAA,QAAQ,EAAE;AAAEX,IAAAA,KAAK,EAAE,YAAT;AAAuBC,IAAAA,OAAO,EAAE;AAAhC;AAXsB,CAAjC;AAcA,MAAMW,YAAwB,GAAG;AAChCb,EAAAA,MAAM,EAAE;AAAEE,IAAAA,OAAO,EAAE,UAAX;AAAuBD,IAAAA,KAAK,EAAE;AAA9B,GADwB;AAEhCE,EAAAA,UAAU,EAAE;AAAED,IAAAA,OAAO,EAAE,UAAX;AAAuBD,IAAAA,KAAK,EAAE;AAA9B,GAFoB;AAGhCG,EAAAA,WAAW,EAAE;AAAEF,IAAAA,OAAO,EAAE,UAAX;AAAuBD,IAAAA,KAAK,EAAE;AAA9B,GAHmB;AAIhCI,EAAAA,MAAM,EAAE;AAAEH,IAAAA,OAAO,EAAE,QAAX;AAAqBD,IAAAA,KAAK,EAAE;AAA5B,GAJwB;AAKhCK,EAAAA,IAAI,EAAE;AAAEJ,IAAAA,OAAO,EAAE,eAAX;AAA4BD,IAAAA,KAAK,EAAE;AAAnC,GAL0B;AAMhCM,EAAAA,IAAI,EAAE;AAAEL,IAAAA,OAAO,EAAE,QAAX;AAAqBD,IAAAA,KAAK,EAAE;AAA5B,GAN0B;AAOhCO,EAAAA,KAAK,EAAE;AAAEN,IAAAA,OAAO,EAAE,QAAX;AAAqBD,IAAAA,KAAK,EAAE;AAA5B,GAPyB;AAQhCQ,EAAAA,OAAO,EAAE;AAAER,IAAAA,KAAK,EAAE;AAAT,GARuB;AAShCS,EAAAA,GAAG,EAAE;AAAER,IAAAA,OAAO,EAAE,YAAX;AAAyBD,IAAAA,KAAK,EAAE;AAAhC,GAT2B;AAUhCU,EAAAA,OAAO,EAAE;AAAET,IAAAA,OAAO,EAAE,YAAX;AAAyBD,IAAAA,KAAK,EAAE;AAAhC,GAVuB;AAWhCW,EAAAA,QAAQ,EAAE;AAAEV,IAAAA,OAAO,EAAE,YAAX;AAAyBD,IAAAA,KAAK,EAAE;AAAhC;AAXsB,CAAjC;;AAcO,SAASa,iBAAT,CACNC,SADM,EAENC,SAAwB,GAAG,KAFrB,EAGW;AACjB,MAAK,CAAE,4BAAgBD,SAAhB,CAAP,EAAqC;AACpC,WAAO,EAAP;AACA;;AACD,QAAME,UAAU,GAAGD,SAAS,KAAK,QAAjC;AACA,QAAME,KAAK,GAAGD,UAAU,GAAGJ,YAAH,GAAkBd,YAA1C;AAEA,QAAMoB,cAAc,GACnBJ,SAAS,IAAIG,KAAb,GACGA,KAAK,CAAEH,SAAF,CADR,GAEG;AAAEd,IAAAA,KAAK,EAAEc;AAAT,GAHJ;AAKA,SAAOI,cAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n/**\n * Internal dependencies\n */\nimport type { FlexDirection } from '../flex/types';\nimport type { HStackAlignment, AlignmentProps, Alignments } from './types';\nimport { isValueDefined } from '../utils/values';\n\nconst H_ALIGNMENTS: Alignments = {\n\tbottom: { align: 'flex-end', justify: 'center' },\n\tbottomLeft: { align: 'flex-end', justify: 'flex-start' },\n\tbottomRight: { align: 'flex-end', justify: 'flex-end' },\n\tcenter: { align: 'center', justify: 'center' },\n\tedge: { align: 'center', justify: 'space-between' },\n\tleft: { align: 'center', justify: 'flex-start' },\n\tright: { align: 'center', justify: 'flex-end' },\n\tstretch: { align: 'stretch' },\n\ttop: { align: 'flex-start', justify: 'center' },\n\ttopLeft: { align: 'flex-start', justify: 'flex-start' },\n\ttopRight: { align: 'flex-start', justify: 'flex-end' },\n};\n\nconst V_ALIGNMENTS: Alignments = {\n\tbottom: { justify: 'flex-end', align: 'center' },\n\tbottomLeft: { justify: 'flex-end', align: 'flex-start' },\n\tbottomRight: { justify: 'flex-end', align: 'flex-end' },\n\tcenter: { justify: 'center', align: 'center' },\n\tedge: { justify: 'space-between', align: 'center' },\n\tleft: { justify: 'center', align: 'flex-start' },\n\tright: { justify: 'center', align: 'flex-end' },\n\tstretch: { align: 'stretch' },\n\ttop: { justify: 'flex-start', align: 'center' },\n\ttopLeft: { justify: 'flex-start', align: 'flex-start' },\n\ttopRight: { justify: 'flex-start', align: 'flex-end' },\n};\n\nexport function getAlignmentProps(\n\talignment: HStackAlignment | CSSProperties[ 'alignItems' ],\n\tdirection: FlexDirection = 'row'\n): AlignmentProps {\n\tif ( ! isValueDefined( alignment ) ) {\n\t\treturn {};\n\t}\n\tconst isVertical = direction === 'column';\n\tconst props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;\n\n\tconst alignmentProps =\n\t\talignment in props\n\t\t\t? props[ alignment as keyof typeof props ]\n\t\t\t: { align: alignment };\n\n\treturn alignmentProps;\n}\n"]}
+{"version":3,"names":["_values","require","H_ALIGNMENTS","bottom","align","justify","bottomLeft","bottomRight","center","edge","left","right","stretch","top","topLeft","topRight","V_ALIGNMENTS","getAlignmentProps","alignment","direction","isValueDefined","isVertical","props","alignmentProps"],"sources":["@wordpress/components/src/h-stack/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n/**\n * Internal dependencies\n */\nimport type { FlexDirection } from '../flex/types';\nimport type { HStackAlignment, AlignmentProps, Alignments } from './types';\nimport { isValueDefined } from '../utils/values';\n\nconst H_ALIGNMENTS: Alignments = {\n\tbottom: { align: 'flex-end', justify: 'center' },\n\tbottomLeft: { align: 'flex-end', justify: 'flex-start' },\n\tbottomRight: { align: 'flex-end', justify: 'flex-end' },\n\tcenter: { align: 'center', justify: 'center' },\n\tedge: { align: 'center', justify: 'space-between' },\n\tleft: { align: 'center', justify: 'flex-start' },\n\tright: { align: 'center', justify: 'flex-end' },\n\tstretch: { align: 'stretch' },\n\ttop: { align: 'flex-start', justify: 'center' },\n\ttopLeft: { align: 'flex-start', justify: 'flex-start' },\n\ttopRight: { align: 'flex-start', justify: 'flex-end' },\n};\n\nconst V_ALIGNMENTS: Alignments = {\n\tbottom: { justify: 'flex-end', align: 'center' },\n\tbottomLeft: { justify: 'flex-end', align: 'flex-start' },\n\tbottomRight: { justify: 'flex-end', align: 'flex-end' },\n\tcenter: { justify: 'center', align: 'center' },\n\tedge: { justify: 'space-between', align: 'center' },\n\tleft: { justify: 'center', align: 'flex-start' },\n\tright: { justify: 'center', align: 'flex-end' },\n\tstretch: { align: 'stretch' },\n\ttop: { justify: 'flex-start', align: 'center' },\n\ttopLeft: { justify: 'flex-start', align: 'flex-start' },\n\ttopRight: { justify: 'flex-start', align: 'flex-end' },\n};\n\nexport function getAlignmentProps(\n\talignment: HStackAlignment | CSSProperties[ 'alignItems' ],\n\tdirection: FlexDirection = 'row'\n): AlignmentProps {\n\tif ( ! isValueDefined( alignment ) ) {\n\t\treturn {};\n\t}\n\tconst isVertical = direction === 'column';\n\tconst props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;\n\n\tconst alignmentProps =\n\t\talignment in props\n\t\t\t? props[ alignment as keyof typeof props ]\n\t\t\t: { align: alignment };\n\n\treturn alignmentProps;\n}\n"],"mappings":";;;;;;AASA,IAAAA,OAAA,GAAAC,OAAA;AATA;AACA;AACA;;AAEA;AACA;AACA;;AAKA,MAAMC,YAAwB,GAAG;EAChCC,MAAM,EAAE;IAAEC,KAAK,EAAE,UAAU;IAAEC,OAAO,EAAE;EAAS,CAAC;EAChDC,UAAU,EAAE;IAAEF,KAAK,EAAE,UAAU;IAAEC,OAAO,EAAE;EAAa,CAAC;EACxDE,WAAW,EAAE;IAAEH,KAAK,EAAE,UAAU;IAAEC,OAAO,EAAE;EAAW,CAAC;EACvDG,MAAM,EAAE;IAAEJ,KAAK,EAAE,QAAQ;IAAEC,OAAO,EAAE;EAAS,CAAC;EAC9CI,IAAI,EAAE;IAAEL,KAAK,EAAE,QAAQ;IAAEC,OAAO,EAAE;EAAgB,CAAC;EACnDK,IAAI,EAAE;IAAEN,KAAK,EAAE,QAAQ;IAAEC,OAAO,EAAE;EAAa,CAAC;EAChDM,KAAK,EAAE;IAAEP,KAAK,EAAE,QAAQ;IAAEC,OAAO,EAAE;EAAW,CAAC;EAC/CO,OAAO,EAAE;IAAER,KAAK,EAAE;EAAU,CAAC;EAC7BS,GAAG,EAAE;IAAET,KAAK,EAAE,YAAY;IAAEC,OAAO,EAAE;EAAS,CAAC;EAC/CS,OAAO,EAAE;IAAEV,KAAK,EAAE,YAAY;IAAEC,OAAO,EAAE;EAAa,CAAC;EACvDU,QAAQ,EAAE;IAAEX,KAAK,EAAE,YAAY;IAAEC,OAAO,EAAE;EAAW;AACtD,CAAC;AAED,MAAMW,YAAwB,GAAG;EAChCb,MAAM,EAAE;IAAEE,OAAO,EAAE,UAAU;IAAED,KAAK,EAAE;EAAS,CAAC;EAChDE,UAAU,EAAE;IAAED,OAAO,EAAE,UAAU;IAAED,KAAK,EAAE;EAAa,CAAC;EACxDG,WAAW,EAAE;IAAEF,OAAO,EAAE,UAAU;IAAED,KAAK,EAAE;EAAW,CAAC;EACvDI,MAAM,EAAE;IAAEH,OAAO,EAAE,QAAQ;IAAED,KAAK,EAAE;EAAS,CAAC;EAC9CK,IAAI,EAAE;IAAEJ,OAAO,EAAE,eAAe;IAAED,KAAK,EAAE;EAAS,CAAC;EACnDM,IAAI,EAAE;IAAEL,OAAO,EAAE,QAAQ;IAAED,KAAK,EAAE;EAAa,CAAC;EAChDO,KAAK,EAAE;IAAEN,OAAO,EAAE,QAAQ;IAAED,KAAK,EAAE;EAAW,CAAC;EAC/CQ,OAAO,EAAE;IAAER,KAAK,EAAE;EAAU,CAAC;EAC7BS,GAAG,EAAE;IAAER,OAAO,EAAE,YAAY;IAAED,KAAK,EAAE;EAAS,CAAC;EAC/CU,OAAO,EAAE;IAAET,OAAO,EAAE,YAAY;IAAED,KAAK,EAAE;EAAa,CAAC;EACvDW,QAAQ,EAAE;IAAEV,OAAO,EAAE,YAAY;IAAED,KAAK,EAAE;EAAW;AACtD,CAAC;AAEM,SAASa,iBAAiBA,CAChCC,SAA0D,EAC1DC,SAAwB,GAAG,KAAK,EACf;EACjB,IAAK,CAAE,IAAAC,sBAAc,EAAEF,SAAU,CAAC,EAAG;IACpC,OAAO,CAAC,CAAC;EACV;EACA,MAAMG,UAAU,GAAGF,SAAS,KAAK,QAAQ;EACzC,MAAMG,KAAK,GAAGD,UAAU,GAAGL,YAAY,GAAGd,YAAY;EAEtD,MAAMqB,cAAc,GACnBL,SAAS,IAAII,KAAK,GACfA,KAAK,CAAEJ,SAAS,CAAwB,GACxC;IAAEd,KAAK,EAAEc;EAAU,CAAC;EAExB,OAAOK,cAAc;AACtB"}

package/build/heading/component.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Heading = void 0;
-
 var _element = require("@wordpress/element");
-
 var _context = require("../ui/context");
-
 var _view = require("../view");
-
 var _hook = require("./hook");
-
 /**
  * External dependencies
  */
@@ -20,12 +15,15 @@ var _hook = require("./hook");
 /**
  * Internal dependencies
  */
+
 function UnconnectedHeading(props, forwardedRef) {
   const headerProps = (0, _hook.useHeading)(props);
-  return (0, _element.createElement)(_view.View, { ...headerProps,
+  return (0, _element.createElement)(_view.View, {
+    ...headerProps,
     ref: forwardedRef
   });
 }
+
 /**
  * `Heading` renders headings and titles using the library's typography system.
  *
@@ -37,8 +35,6 @@ function UnconnectedHeading(props, forwardedRef) {
  * }
  * ```
  */
-
-
 const Heading = (0, _context.contextConnect)(UnconnectedHeading, 'Heading');
 exports.Heading = Heading;
 var _default = Heading;

package/build/heading/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/heading/component.tsx"],"names":["UnconnectedHeading","props","forwardedRef","headerProps","Heading"],"mappings":";;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,kBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,WAAW,GAAG,sBAAYF,KAAZ,CAApB;AAEA,SAAO,4BAAC,UAAD,OAAWE,WAAX;AAAyB,IAAA,GAAG,EAAGD;AAA/B,IAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,OAAO,GAAG,6BAAgBJ,kBAAhB,EAAoC,SAApC,CAAhB;;eAEQI,O","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../ui/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"]}
+{"version":3,"names":["_context","require","_view","_hook","UnconnectedHeading","props","forwardedRef","headerProps","useHeading","_element","createElement","View","ref","Heading","contextConnect","exports","_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 '../ui/context';\nimport { contextConnect } from '../ui/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,QAAA,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,GAAG,IAAAC,uBAAc,EAAEV,kBAAkB,EAAE,SAAU,CAAC;AAACW,OAAA,CAAAF,OAAA,GAAAA,OAAA;AAAA,IAAAG,QAAA,GAExDH,OAAO;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

package/build/heading/hook.js

@@ -4,18 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useHeading = useHeading;
-
 var _context = require("../ui/context");
-
 var _text = require("../text");
-
 var _fontSize = require("../ui/utils/font-size");
-
 var _utils = require("../utils");
-
 /**
  * Internal dependencies
  */
+
 function useHeading(props) {
   const {
     as: asProp,
@@ -24,13 +20,11 @@ function useHeading(props) {
   } = (0, _context.useContextSystem)(props, 'Heading');
   const as = asProp || `h${level}`;
   const a11yProps = {};
-
   if (typeof as === 'string' && as[0] !== 'h') {
     // If not a semantic `h` element, add a11y props:
     a11yProps.role = 'heading';
     a11yProps['aria-level'] = typeof level === 'string' ? parseInt(level) : level;
   }
-
   const textProps = (0, _text.useText)({
     color: _utils.COLORS.gray[900],
     size: (0, _fontSize.getHeadingFontSize)(level),
@@ -38,7 +32,8 @@ function useHeading(props) {
     weight: _utils.CONFIG.fontWeightHeading,
     ...otherProps
   });
-  return { ...textProps,
+  return {
+    ...textProps,
     ...a11yProps,
     as
   };

package/build/heading/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/heading/hook.ts"],"names":["useHeading","props","as","asProp","level","otherProps","a11yProps","role","parseInt","textProps","color","COLORS","gray","size","isBlock","weight","CONFIG","fontWeightHeading"],"mappings":";;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;AAOO,SAASA,UAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,EAAE,EAAEC,MADC;AAELC,IAAAA,KAAK,GAAG,CAFH;AAGL,OAAGC;AAHE,MAIF,+BAAkBJ,KAAlB,EAAyB,SAAzB,CAJJ;AAMA,QAAMC,EAAE,GAAKC,MAAM,IAAK,IAAIC,KAAO,EAAnC;AAEA,QAAME,SAGL,GAAG,EAHJ;;AAIA,MAAK,OAAOJ,EAAP,KAAc,QAAd,IAA0BA,EAAE,CAAE,CAAF,CAAF,KAAY,GAA3C,EAAiD;AAChD;AACAI,IAAAA,SAAS,CAACC,IAAV,GAAiB,SAAjB;AACAD,IAAAA,SAAS,CAAE,YAAF,CAAT,GACC,OAAOF,KAAP,KAAiB,QAAjB,GAA4BI,QAAQ,CAAEJ,KAAF,CAApC,GAAgDA,KADjD;AAEA;;AAED,QAAMK,SAAS,GAAG,mBAAS;AAC1BC,IAAAA,KAAK,EAAEC,cAAOC,IAAP,CAAa,GAAb,CADmB;AAE1BC,IAAAA,IAAI,EAAE,kCAAoBT,KAApB,CAFoB;AAG1BU,IAAAA,OAAO,EAAE,IAHiB;AAI1BC,IAAAA,MAAM,EAAEC,cAAOC,iBAJW;AAK1B,OAAGZ;AALuB,GAAT,CAAlB;AAQA,SAAO,EAAE,GAAGI,SAAL;AAAgB,OAAGH,SAAnB;AAA8BJ,IAAAA;AAA9B,GAAP;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { useContextSystem, WordPressComponentProps } from '../ui/context';\nimport { useText } from '../text';\nimport { getHeadingFontSize } from '../ui/utils/font-size';\nimport { CONFIG, COLORS } from '../utils';\nimport type { HeadingProps } from './types';\n\nexport function useHeading(\n\tprops: WordPressComponentProps< HeadingProps, 'h1' >\n) {\n\tconst {\n\t\tas: asProp,\n\t\tlevel = 2,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Heading' );\n\n\tconst as = ( asProp || `h${ level }` ) as keyof JSX.IntrinsicElements;\n\n\tconst a11yProps: {\n\t\trole?: string;\n\t\t'aria-level'?: number;\n\t} = {};\n\tif ( typeof as === 'string' && as[ 0 ] !== 'h' ) {\n\t\t// If not a semantic `h` element, add a11y props:\n\t\ta11yProps.role = 'heading';\n\t\ta11yProps[ 'aria-level' ] =\n\t\t\ttypeof level === 'string' ? parseInt( level ) : level;\n\t}\n\n\tconst textProps = useText( {\n\t\tcolor: COLORS.gray[ 900 ],\n\t\tsize: getHeadingFontSize( level ),\n\t\tisBlock: true,\n\t\tweight: CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],\n\t\t...otherProps,\n\t} );\n\n\treturn { ...textProps, ...a11yProps, as };\n}\n"]}
+{"version":3,"names":["_context","require","_text","_fontSize","_utils","useHeading","props","as","asProp","level","otherProps","useContextSystem","a11yProps","role","parseInt","textProps","useText","color","COLORS","gray","size","getHeadingFontSize","isBlock","weight","CONFIG","fontWeightHeading"],"sources":["@wordpress/components/src/heading/hook.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { useContextSystem } from '../ui/context';\nimport { useText } from '../text';\nimport { getHeadingFontSize } from '../ui/utils/font-size';\nimport { CONFIG, COLORS } from '../utils';\nimport type { HeadingProps } from './types';\n\nexport function useHeading(\n\tprops: WordPressComponentProps< HeadingProps, 'h1' >\n) {\n\tconst {\n\t\tas: asProp,\n\t\tlevel = 2,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Heading' );\n\n\tconst as = ( asProp || `h${ level }` ) as keyof JSX.IntrinsicElements;\n\n\tconst a11yProps: {\n\t\trole?: string;\n\t\t'aria-level'?: number;\n\t} = {};\n\tif ( typeof as === 'string' && as[ 0 ] !== 'h' ) {\n\t\t// If not a semantic `h` element, add a11y props:\n\t\ta11yProps.role = 'heading';\n\t\ta11yProps[ 'aria-level' ] =\n\t\t\ttypeof level === 'string' ? parseInt( level ) : level;\n\t}\n\n\tconst textProps = useText( {\n\t\tcolor: COLORS.gray[ 900 ],\n\t\tsize: getHeadingFontSize( level ),\n\t\tisBlock: true,\n\t\tweight: CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],\n\t\t...otherProps,\n\t} );\n\n\treturn { ...textProps, ...a11yProps, as };\n}\n"],"mappings":";;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAPA;AACA;AACA;;AAQO,SAASI,UAAUA,CACzBC,KAAoD,EACnD;EACD,MAAM;IACLC,EAAE,EAAEC,MAAM;IACVC,KAAK,GAAG,CAAC;IACT,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEL,KAAK,EAAE,SAAU,CAAC;EAExC,MAAMC,EAAE,GAAKC,MAAM,IAAK,IAAIC,KAAO,EAAkC;EAErE,MAAMG,SAGL,GAAG,CAAC,CAAC;EACN,IAAK,OAAOL,EAAE,KAAK,QAAQ,IAAIA,EAAE,CAAE,CAAC,CAAE,KAAK,GAAG,EAAG;IAChD;IACAK,SAAS,CAACC,IAAI,GAAG,SAAS;IAC1BD,SAAS,CAAE,YAAY,CAAE,GACxB,OAAOH,KAAK,KAAK,QAAQ,GAAGK,QAAQ,CAAEL,KAAM,CAAC,GAAGA,KAAK;EACvD;EAEA,MAAMM,SAAS,GAAG,IAAAC,aAAO,EAAE;IAC1BC,KAAK,EAAEC,aAAM,CAACC,IAAI,CAAE,GAAG,CAAE;IACzBC,IAAI,EAAE,IAAAC,4BAAkB,EAAEZ,KAAM,CAAC;IACjCa,OAAO,EAAE,IAAI;IACbC,MAAM,EAAEC,aAAM,CAACC,iBAAkE;IACjF,GAAGf;EACJ,CAAE,CAAC;EAEH,OAAO;IAAE,GAAGK,SAAS;IAAE,GAAGH,SAAS;IAAEL;EAAG,CAAC;AAC1C"}

package/build/heading/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,8 +16,6 @@ Object.defineProperty(exports, "useHeading", {
     return _hook.useHeading;
   }
 });
-
 var _component = _interopRequireDefault(require("./component"));
-
 var _hook = require("./hook");
 //# sourceMappingURL=index.js.map

package/build/heading/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/heading/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as Heading } from './component';\nexport { useHeading } from './hook';\n"]}
+{"version":3,"names":["_component","_interopRequireDefault","require","_hook"],"sources":["@wordpress/components/src/heading/index.ts"],"sourcesContent":["export { default as Heading } from './component';\nexport { useHeading } from './hook';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA"}

package/build/heading/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/heading/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { Props as TextProps } from '../text/types';\n\nexport type HeadingSize =\n\t| 1\n\t| 2\n\t| 3\n\t| 4\n\t| 5\n\t| 6\n\t| '1'\n\t| '2'\n\t| '3'\n\t| '4'\n\t| '5'\n\t| '6';\n\nexport type HeadingProps = Omit< TextProps, 'size' > & {\n\t/**\n\t * Passing any of the heading levels to `level` will both render the correct\n\t * typographic text size as well as the semantic element corresponding to\n\t * the level (`h1` for `1` for example).\n\t *\n\t * @default 2\n\t */\n\tlevel?: HeadingSize;\n};\n"],"mappings":""}

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

@@ -5,16 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.useNavigateRegions = useNavigateRegions;
-
 var _element = require("@wordpress/element");
-
 var _compose = require("@wordpress/compose");
-
 var _keycodes = require("@wordpress/keycodes");
-
 /**
  * WordPress dependencies
  */
+
 const defaultShortcuts = {
   previous: [{
     modifier: 'ctrlShift',
@@ -34,41 +31,32 @@ const defaultShortcuts = {
     character: 'n'
   }]
 };
-
 function useNavigateRegions(shortcuts = defaultShortcuts) {
   const ref = (0, _element.useRef)(null);
   const [isFocusingRegions, setIsFocusingRegions] = (0, _element.useState)(false);
-
   function focusRegion(offset) {
     var _ref$current$querySel;
-
     const regions = Array.from((_ref$current$querySel = ref.current?.querySelectorAll('[role="region"][tabindex="-1"]')) !== null && _ref$current$querySel !== void 0 ? _ref$current$querySel : []);
-
     if (!regions.length) {
       return;
     }
-
-    let nextRegion = regions[0]; // 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.
-
+    let nextRegion = regions[0];
+    // 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.
     const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role="region"][tabindex="-1"]');
     const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1;
-
     if (selectedIndex !== -1) {
       let nextIndex = selectedIndex + offset;
       nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;
       nextIndex = nextIndex === regions.length ? 0 : nextIndex;
       nextRegion = regions[nextIndex];
     }
-
     nextRegion.focus();
     setIsFocusingRegions(true);
   }
-
   const clickRef = (0, _compose.useRefEffect)(element => {
     function onClick() {
       setIsFocusingRegions(false);
     }
-
     element.addEventListener('click', onClick);
     return () => {
       element.removeEventListener('click', onClick);
@@ -77,7 +65,6 @@ function useNavigateRegions(shortcuts = defaultShortcuts) {
   return {
     ref: (0, _compose.useMergeRefs)([ref, clickRef]),
     className: isFocusingRegions ? 'is-focusing-regions' : '',
-
     onKeyDown(event) {
       if (shortcuts.previous.some(({
         modifier,
@@ -95,9 +82,9 @@ function useNavigateRegions(shortcuts = defaultShortcuts) {
         focusRegion(1);
       }
     }
-
   };
 }
+
 /**
  * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)
  * adding keyboard navigation to switch between the different DOM elements marked as "regions" (role="region").
@@ -124,14 +111,13 @@ function useNavigateRegions(shortcuts = defaultShortcuts) {
  * ) );
  * ```
  */
-
-
 var _default = (0, _compose.createHigherOrderComponent)(Component => ({
   shortcuts,
   ...props
-}) => (0, _element.createElement)("div", { ...useNavigateRegions(shortcuts)
-}, (0, _element.createElement)(Component, { ...props
+}) => (0, _element.createElement)("div", {
+  ...useNavigateRegions(shortcuts)
+}, (0, _element.createElement)(Component, {
+  ...props
 })), 'navigateRegions');
-
 exports.default = _default;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/higher-order/navigate-regions/index.tsx"],"names":["defaultShortcuts","previous","modifier","character","next","useNavigateRegions","shortcuts","ref","isFocusingRegions","setIsFocusingRegions","focusRegion","offset","regions","Array","from","current","querySelectorAll","length","nextRegion","wrappingRegion","ownerDocument","activeElement","closest","selectedIndex","indexOf","nextIndex","focus","clickRef","element","onClick","addEventListener","removeEventListener","className","onKeyDown","event","some","isKeyboardEvent","Component","props"],"mappings":"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","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(\n\t\t\t\t<div { ...useNavigateRegions( shortcuts ) }>\n\t\t\t\t\t<Component { ...props } />\n\t\t\t\t</div>\n\t\t\t),\n\t'navigateRegions'\n);\n"]}
+{"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","createHigherOrderComponent","Component","props","createElement","exports","default"],"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(\n\t\t\t\t<div { ...useNavigateRegions( shortcuts ) }>\n\t\t\t\t\t<Component { ...props } />\n\t\t\t\t</div>\n\t\t\t),\n\t'navigateRegions'\n);\n"],"mappings":"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"}

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

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _compose = require("@wordpress/compose");
-
 /**
  * WordPress dependencies
  */
@@ -26,7 +23,8 @@ const withConstrainedTabbing = (0, _compose.createHigherOrderComponent)(WrappedC
   return (0, _element.createElement)("div", {
     ref: ref,
     tabIndex: -1
-  }, (0, _element.createElement)(WrappedComponent, { ...props
+  }, (0, _element.createElement)(WrappedComponent, {
+    ...props
   }));
 }, 'withConstrainedTabbing');
 var _default = withConstrainedTabbing;