@wordpress/components 24.0.0 → 25.1.0

package/build/gradient-picker/index.js

@@ -41,37 +41,33 @@ const isMultipleOriginArray = arr => {
   return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));
 };
 
-function SingleOrigin(_ref) {
-  let {
-    className,
-    clearGradient,
-    gradients,
-    onChange,
-    value,
-    actions
-  } = _ref;
+function SingleOrigin({
+  className,
+  clearGradient,
+  gradients,
+  onChange,
+  value,
+  actions
+}) {
   const gradientOptions = (0, _element.useMemo)(() => {
-    return gradients.map((_ref2, index) => {
-      let {
-        gradient,
-        name
-      } = _ref2;
-      return (0, _element.createElement)(_circularOptionPicker.default.Option, {
-        key: gradient,
-        value: gradient,
-        isSelected: value === gradient,
-        tooltipText: name || // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
-        (0, _i18n.sprintf)((0, _i18n.__)('Gradient code: %s'), gradient),
-        style: {
-          color: 'rgba( 0,0,0,0 )',
-          background: gradient
-        },
-        onClick: value === gradient ? clearGradient : () => onChange(gradient, index),
-        "aria-label": name ? // translators: %s: The name of the gradient e.g: "Angular red to blue".
-        (0, _i18n.sprintf)((0, _i18n.__)('Gradient: %s'), name) : // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
-        (0, _i18n.sprintf)((0, _i18n.__)('Gradient code: %s'), gradient)
-      });
-    });
+    return gradients.map(({
+      gradient,
+      name
+    }, index) => (0, _element.createElement)(_circularOptionPicker.default.Option, {
+      key: gradient,
+      value: gradient,
+      isSelected: value === gradient,
+      tooltipText: name || // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
+      (0, _i18n.sprintf)((0, _i18n.__)('Gradient code: %s'), gradient),
+      style: {
+        color: 'rgba( 0,0,0,0 )',
+        background: gradient
+      },
+      onClick: value === gradient ? clearGradient : () => onChange(gradient, index),
+      "aria-label": name ? // translators: %s: The name of the gradient e.g: "Angular red to blue".
+      (0, _i18n.sprintf)((0, _i18n.__)('Gradient: %s'), name) : // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
+      (0, _i18n.sprintf)((0, _i18n.__)('Gradient code: %s'), gradient)
+    }));
   }, [gradients, value, onChange, clearGradient]);
   return (0, _element.createElement)(_circularOptionPicker.default, {
     className: className,
@@ -80,24 +76,22 @@ function SingleOrigin(_ref) {
   });
 }
 
-function MultipleOrigin(_ref3) {
-  let {
-    className,
-    clearGradient,
-    gradients,
-    onChange,
-    value,
-    actions,
-    headingLevel
-  } = _ref3;
+function MultipleOrigin({
+  className,
+  clearGradient,
+  gradients,
+  onChange,
+  value,
+  actions,
+  headingLevel
+}) {
   return (0, _element.createElement)(_vStack.VStack, {
     spacing: 3,
     className: className
-  }, gradients.map((_ref4, index) => {
-    let {
-      name,
-      gradients: gradientSet
-    } = _ref4;
+  }, gradients.map(({
+    name,
+    gradients: gradientSet
+  }, index) => {
     return (0, _element.createElement)(_vStack.VStack, {
       spacing: 2,
       key: index
@@ -166,19 +160,18 @@ function Component(props) {
  */
 
 
-function GradientPicker(_ref5) {
-  let {
-    /** Start opting into the new margin-free styles that will become the default in a future version. */
-    __nextHasNoMargin = false,
-    className,
-    gradients = [],
-    onChange,
-    value,
-    clearable = true,
-    disableCustomGradients = false,
-    __experimentalIsRenderedInSidebar,
-    headingLevel = 2
-  } = _ref5;
+function GradientPicker({
+  /** Start opting into the new margin-free styles that will become the default in a future version. */
+  __nextHasNoMargin = false,
+  className,
+  gradients = [],
+  onChange,
+  value,
+  clearable = true,
+  disableCustomGradients = false,
+  __experimentalIsRenderedInSidebar,
+  headingLevel = 2
+}) {
   const clearGradient = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
 
   if (!__nextHasNoMargin) {

package/build/gradient-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/gradient-picker/index.tsx"],"names":["isMultipleOriginObject","obj","Array","isArray","gradients","isMultipleOriginArray","arr","length","every","gradientObj","SingleOrigin","className","clearGradient","onChange","value","actions","gradientOptions","map","index","gradient","name","color","background","MultipleOrigin","headingLevel","gradientSet","Component","props","GradientPicker","__nextHasNoMargin","clearable","disableCustomGradients","__experimentalIsRenderedInSidebar","undefined","since","version","hint","deprecatedMarginSpacerProps","marginTop","marginBottom"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport { Spacer } from '../spacer';\nimport type {\n\tGradientPickerComponentProps,\n\tPickerProps,\n\tOriginObject,\n\tGradientObject,\n} from './types';\n\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = (\n\tobj: Record< string, any >\n): obj is OriginObject =>\n\tArray.isArray( obj.gradients ) && ! ( 'gradient' in obj );\n\nconst isMultipleOriginArray = ( arr: any[] ): arr is OriginObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )\n\t);\n};\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n}: PickerProps< GradientObject > ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn gradients.map( ( { gradient, name }, index ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ gradient }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient, index )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\theadingLevel,\n}: PickerProps< OriginObject > ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ ( gradient ) =>\n\t\t\t\t\t\t\t\tonChange( gradient, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t{ ...( gradients.length === index + 1\n\t\t\t\t\t\t\t\t? { actions }\n\t\t\t\t\t\t\t\t: {} ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nfunction Component( props: PickerProps< any > ) {\n\tif ( isMultipleOriginArray( props.gradients ) ) {\n\t\treturn <MultipleOrigin { ...props } />;\n\t}\n\treturn <SingleOrigin { ...props } />;\n}\n\n/**\n *  GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n *import { GradientPicker } from '@wordpress/components';\n *import { useState } from '@wordpress/element';\n *\n *const myGradientPicker = () => {\n *\tconst [ gradient, setGradient ] = useState( null );\n *\n *\treturn (\n *\t\t<GradientPicker\n *\t\t\t__nextHasNoMargin\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *\t\t\tgradients={ [\n *\t\t\t\t{\n *\t\t\t\t\tname: 'JShine',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *\t\t\t\t\tslug: 'jshine',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Moonlit Asteroid',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *\t\t\t\t\tslug: 'moonlit-asteroid',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Rastafarie',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *\t\t\t\t\tslug: 'rastafari',\n *\t\t\t\t},\n *\t\t\t] }\n *\t\t/>\n *\t);\n *};\n *```\n *\n */\nexport function GradientPicker( {\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMargin = false,\n\tclassName,\n\tgradients = [],\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalIsRenderedInSidebar,\n\theadingLevel = 2,\n}: GradientPickerComponentProps ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\n\tif ( ! __nextHasNoMargin ) {\n\t\tdeprecated( 'Outer margin styles for wp.components.GradientPicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t} );\n\t}\n\n\tconst deprecatedMarginSpacerProps = ! __nextHasNoMargin\n\t\t? {\n\t\t\t\tmarginTop: ! gradients.length ? 3 : undefined,\n\t\t\t\tmarginBottom: ! clearable ? 6 : 0,\n\t\t  }\n\t\t: {};\n\n\treturn (\n\t\t// Outmost Spacer wrapper can be removed when deprecation period is over\n\t\t<Spacer marginBottom={ 0 } { ...deprecatedMarginSpacerProps }>\n\t\t\t<VStack spacing={ gradients.length ? 4 : 0 }>\n\t\t\t\t{ ! disableCustomGradients && (\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ( gradients.length || clearable ) && (\n\t\t\t\t\t<Component\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\tclearable &&\n\t\t\t\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</Spacer>\n\t);\n}\n\nexport default GradientPicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/gradient-picker/index.tsx"],"names":["isMultipleOriginObject","obj","Array","isArray","gradients","isMultipleOriginArray","arr","length","every","gradientObj","SingleOrigin","className","clearGradient","onChange","value","actions","gradientOptions","map","gradient","name","index","color","background","MultipleOrigin","headingLevel","gradientSet","Component","props","GradientPicker","__nextHasNoMargin","clearable","disableCustomGradients","__experimentalIsRenderedInSidebar","undefined","since","version","hint","deprecatedMarginSpacerProps","marginTop","marginBottom"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport { Spacer } from '../spacer';\nimport type {\n\tGradientPickerComponentProps,\n\tPickerProps,\n\tOriginObject,\n\tGradientObject,\n} from './types';\n\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = (\n\tobj: Record< string, any >\n): obj is OriginObject =>\n\tArray.isArray( obj.gradients ) && ! ( 'gradient' in obj );\n\nconst isMultipleOriginArray = ( arr: any[] ): arr is OriginObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )\n\t);\n};\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n}: PickerProps< GradientObject > ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn gradients.map( ( { gradient, name }, index ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ gradient }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname ||\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient, index )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t  sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\tactions,\n\theadingLevel,\n}: PickerProps< OriginObject > ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ ( gradient ) =>\n\t\t\t\t\t\t\t\tonChange( gradient, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t{ ...( gradients.length === index + 1\n\t\t\t\t\t\t\t\t? { actions }\n\t\t\t\t\t\t\t\t: {} ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nfunction Component( props: PickerProps< any > ) {\n\tif ( isMultipleOriginArray( props.gradients ) ) {\n\t\treturn <MultipleOrigin { ...props } />;\n\t}\n\treturn <SingleOrigin { ...props } />;\n}\n\n/**\n *  GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n *import { GradientPicker } from '@wordpress/components';\n *import { useState } from '@wordpress/element';\n *\n *const myGradientPicker = () => {\n *\tconst [ gradient, setGradient ] = useState( null );\n *\n *\treturn (\n *\t\t<GradientPicker\n *\t\t\t__nextHasNoMargin\n *\t\t\tvalue={ gradient }\n *\t\t\tonChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *\t\t\tgradients={ [\n *\t\t\t\t{\n *\t\t\t\t\tname: 'JShine',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *\t\t\t\t\tslug: 'jshine',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Moonlit Asteroid',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *\t\t\t\t\tslug: 'moonlit-asteroid',\n *\t\t\t\t},\n *\t\t\t\t{\n *\t\t\t\t\tname: 'Rastafarie',\n *\t\t\t\t\tgradient:\n *\t\t\t\t\t\t'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *\t\t\t\t\tslug: 'rastafari',\n *\t\t\t\t},\n *\t\t\t] }\n *\t\t/>\n *\t);\n *};\n *```\n *\n */\nexport function GradientPicker( {\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMargin = false,\n\tclassName,\n\tgradients = [],\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalIsRenderedInSidebar,\n\theadingLevel = 2,\n}: GradientPickerComponentProps ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\n\tif ( ! __nextHasNoMargin ) {\n\t\tdeprecated( 'Outer margin styles for wp.components.GradientPicker', {\n\t\t\tsince: '6.1',\n\t\t\tversion: '6.4',\n\t\t\thint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t} );\n\t}\n\n\tconst deprecatedMarginSpacerProps = ! __nextHasNoMargin\n\t\t? {\n\t\t\t\tmarginTop: ! gradients.length ? 3 : undefined,\n\t\t\t\tmarginBottom: ! clearable ? 6 : 0,\n\t\t  }\n\t\t: {};\n\n\treturn (\n\t\t// Outmost Spacer wrapper can be removed when deprecation period is over\n\t\t<Spacer marginBottom={ 0 } { ...deprecatedMarginSpacerProps }>\n\t\t\t<VStack spacing={ gradients.length ? 4 : 0 }>\n\t\t\t\t{ ! disableCustomGradients && (\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ ( gradients.length || clearable ) && (\n\t\t\t\t\t<Component\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\tclearable &&\n\t\t\t\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</Spacer>\n\t);\n}\n\nexport default GradientPicker;\n"]}

package/build/guide/icons.js

@@ -12,22 +12,19 @@ var _primitives = require("@wordpress/primitives");
 /**
  * WordPress dependencies
  */
-const PageControlIcon = _ref => {
-  let {
-    isSelected
-  } = _ref;
-  return (0, _element.createElement)(_primitives.SVG, {
-    width: "8",
-    height: "8",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, (0, _element.createElement)(_primitives.Circle, {
-    cx: "4",
-    cy: "4",
-    r: "4",
-    fill: isSelected ? '#419ECD' : '#E1E3E6'
-  }));
-};
+const PageControlIcon = ({
+  isSelected
+}) => (0, _element.createElement)(_primitives.SVG, {
+  width: "8",
+  height: "8",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, (0, _element.createElement)(_primitives.Circle, {
+  cx: "4",
+  cy: "4",
+  r: "4",
+  fill: isSelected ? '#419ECD' : '#E1E3E6'
+}));
 
 exports.PageControlIcon = PageControlIcon;
 //# sourceMappingURL=icons.js.map

package/build/guide/icons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/guide/icons.tsx"],"names":["PageControlIcon","isSelected"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,eAAe,GAAG;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SAC9B,4BAAC,eAAD;AAAK,IAAA,KAAK,EAAC,GAAX;AAAe,IAAA,MAAM,EAAC,GAAtB;AAA0B,IAAA,IAAI,EAAC,MAA/B;AAAsC,IAAA,KAAK,EAAC;AAA5C,KACC,4BAAC,kBAAD;AACC,IAAA,EAAE,EAAC,GADJ;AAEC,IAAA,EAAE,EAAC,GAFJ;AAGC,IAAA,CAAC,EAAC,GAHH;AAIC,IAAA,IAAI,EAAGA,UAAU,GAAG,SAAH,GAAe;AAJjC,IADD,CAD8B;AAAA,CAAxB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SVG, Circle } from '@wordpress/primitives';\n\nexport const PageControlIcon = ( { isSelected }: { isSelected: boolean } ) => (\n\t<SVG width=\"8\" height=\"8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<Circle\n\t\t\tcx=\"4\"\n\t\t\tcy=\"4\"\n\t\t\tr=\"4\"\n\t\t\tfill={ isSelected ? '#419ECD' : '#E1E3E6' }\n\t\t/>\n\t</SVG>\n);\n"]}
+{"version":3,"sources":["@wordpress/components/src/guide/icons.tsx"],"names":["PageControlIcon","isSelected"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,eAAe,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAC9B,4BAAC,eAAD;AAAK,EAAA,KAAK,EAAC,GAAX;AAAe,EAAA,MAAM,EAAC,GAAtB;AAA0B,EAAA,IAAI,EAAC,MAA/B;AAAsC,EAAA,KAAK,EAAC;AAA5C,GACC,4BAAC,kBAAD;AACC,EAAA,EAAE,EAAC,GADJ;AAEC,EAAA,EAAE,EAAC,GAFJ;AAGC,EAAA,CAAC,EAAC,GAHH;AAIC,EAAA,IAAI,EAAGA,UAAU,GAAG,SAAH,GAAe;AAJjC,EADD,CADM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SVG, Circle } from '@wordpress/primitives';\n\nexport const PageControlIcon = ( { isSelected }: { isSelected: boolean } ) => (\n\t<SVG width=\"8\" height=\"8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<Circle\n\t\t\tcx=\"4\"\n\t\t\tcy=\"4\"\n\t\t\tr=\"4\"\n\t\t\tfill={ isSelected ? '#419ECD' : '#E1E3E6' }\n\t\t/>\n\t</SVG>\n);\n"]}

package/build/guide/index.js

@@ -67,15 +67,14 @@ var _pageControl = _interopRequireDefault(require("./page-control"));
  * }
  * ```
  */
-function Guide(_ref) {
-  let {
-    children,
-    className,
-    contentLabel,
-    finishButtonText = (0, _i18n.__)('Finish'),
-    onFinish,
-    pages = []
-  } = _ref;
+function Guide({
+  children,
+  className,
+  contentLabel,
+  finishButtonText = (0, _i18n.__)('Finish'),
+  onFinish,
+  pages = []
+}) {
   const guideContainer = (0, _element.useRef)(null);
   const [currentPage, setCurrentPage] = (0, _element.useState)(0);
   (0, _element.useEffect)(() => {
@@ -90,9 +89,7 @@ function Guide(_ref) {
     // Each time we change the current page, start from the first element of the page.
     // This also solves any focus loss that can happen.
     if (guideContainer.current) {
-      var _;
-
-      (_ = _dom.focus.tabbable.find(guideContainer.current)[0]) === null || _ === void 0 ? void 0 : _.focus();
+      _dom.focus.tabbable.find(guideContainer.current)[0]?.focus();
     }
   }, [currentPage]);
 

package/build/guide/index.js.map

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

package/build/guide/page-control.js

@@ -22,12 +22,11 @@ var _icons = require("./icons");
 /**
  * Internal dependencies
  */
-function PageControl(_ref) {
-  let {
-    currentPage,
-    numberOfPages,
-    setCurrentPage
-  } = _ref;
+function PageControl({
+  currentPage,
+  numberOfPages,
+  setCurrentPage
+}) {
   return (0, _element.createElement)("ul", {
     className: "components-guide__page-control",
     "aria-label": (0, _i18n.__)('Guide controls')

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,OAIO;AAAA,MAJe;AACpCC,IAAAA,WADoC;AAEpCC,IAAAA,aAFoC;AAGpCC,IAAAA;AAHoC,GAIf;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,EACH,4BAAC,sBAAD;AACC,MAAA,UAAU,EAAGA,IAAI,KAAKR;AADvB,MAHF;AAOC,kBAAa;AACZ;AACA,kBAAI,mBAAJ,CAFY,EAGZQ,IAAI,GAAG,CAHK,EAIZP,aAJY,CAPd;AAaC,IAAA,OAAO,EAAG,MAAMC,cAAc,CAAEM,IAAF;AAb/B,IALD,CADC,CAJH,CADD;AA8BA","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={\n\t\t\t\t\t\t\t<PageControlIcon\n\t\t\t\t\t\t\t\tisSelected={ page === currentPage }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\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,"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,EACH,4BAAC,sBAAD;AACC,MAAA,UAAU,EAAGA,IAAI,KAAKR;AADvB,MAHF;AAOC,kBAAa;AACZ;AACA,kBAAI,mBAAJ,CAFY,EAGZQ,IAAI,GAAG,CAHK,EAIZP,aAJY,CAPd;AAaC,IAAA,OAAO,EAAG,MAAMC,cAAc,CAAEM,IAAF;AAb/B,IALD,CADC,CAJH,CADD;AA8BA","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={\n\t\t\t\t\t\t\t<PageControlIcon\n\t\t\t\t\t\t\t\tisSelected={ page === currentPage }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\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"]}

package/build/h-stack/utils.js

@@ -105,9 +105,7 @@ const V_ALIGNMENTS = {
   }
 };
 
-function getAlignmentProps(alignment) {
-  let direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'row';
-
+function getAlignmentProps(alignment, direction = 'row') {
   if (!(0, _values.isValueDefined)(alignment)) {
     return {};
   }

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":"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","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,"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":"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","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"]}

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

@@ -35,15 +35,14 @@ const defaultShortcuts = {
   }]
 };
 
-function useNavigateRegions() {
-  let shortcuts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultShortcuts;
+function useNavigateRegions(shortcuts = defaultShortcuts) {
   const ref = (0, _element.useRef)(null);
   const [isFocusingRegions, setIsFocusingRegions] = (0, _element.useState)(false);
 
   function focusRegion(offset) {
-    var _ref$current$querySel, _ref$current, _ref$current2, _ref$current2$ownerDo, _ref$current2$ownerDo2;
+    var _ref$current$querySel;
 
-    const regions = Array.from((_ref$current$querySel = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelectorAll('[role="region"][tabindex="-1"]')) !== null && _ref$current$querySel !== void 0 ? _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;
@@ -51,7 +50,7 @@ function useNavigateRegions() {
 
     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$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : (_ref$current2$ownerDo = _ref$current2.ownerDocument) === null || _ref$current2$ownerDo === void 0 ? void 0 : (_ref$current2$ownerDo2 = _ref$current2$ownerDo.activeElement) === null || _ref$current2$ownerDo2 === void 0 ? void 0 : _ref$current2$ownerDo2.closest('[role="region"][tabindex="-1"]');
+    const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role="region"][tabindex="-1"]');
     const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1;
 
     if (selectedIndex !== -1) {
@@ -80,19 +79,17 @@ function useNavigateRegions() {
     className: isFocusingRegions ? 'is-focusing-regions' : '',
 
     onKeyDown(event) {
-      if (shortcuts.previous.some(_ref => {
-        let {
-          modifier,
-          character
-        } = _ref;
+      if (shortcuts.previous.some(({
+        modifier,
+        character
+      }) => {
         return _keycodes.isKeyboardEvent[modifier](event, character);
       })) {
         focusRegion(-1);
-      } else if (shortcuts.next.some(_ref2 => {
-        let {
-          modifier,
-          character
-        } = _ref2;
+      } else if (shortcuts.next.some(({
+        modifier,
+        character
+      }) => {
         return _keycodes.isKeyboardEvent[modifier](event, character);
       })) {
         focusRegion(1);
@@ -129,13 +126,10 @@ function useNavigateRegions() {
  */
 
 
-var _default = (0, _compose.createHigherOrderComponent)(Component => _ref3 => {
-  let {
-    shortcuts,
-    ...props
-  } = _ref3;
-  return (0, _element.createElement)("div", useNavigateRegions(shortcuts), (0, _element.createElement)(Component, props));
-}, 'navigateRegions');
+var _default = (0, _compose.createHigherOrderComponent)(Component => ({
+  shortcuts,
+  ...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,"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"]}

package/build/higher-order/with-focus-outside/index.js

@@ -20,7 +20,7 @@ var _compose = require("@wordpress/compose");
  */
 var _default = (0, _compose.createHigherOrderComponent)(WrappedComponent => props => {
   const [handleFocusOutside, setHandleFocusOutside] = (0, _element.useState)();
-  const bindFocusOutsideHandler = (0, _element.useCallback)(node => setHandleFocusOutside(() => node !== null && node !== void 0 && node.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []);
+  const bindFocusOutsideHandler = (0, _element.useCallback)(node => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []);
   return (0, _element.createElement)("div", (0, _compose.__experimentalUseFocusOutside)(handleFocusOutside), (0, _element.createElement)(WrappedComponent, (0, _extends2.default)({
     ref: bindFocusOutsideHandler
   }, props)));

package/build/higher-order/with-focus-outside/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/higher-order/with-focus-outside/index.js"],"names":["WrappedComponent","props","handleFocusOutside","setHandleFocusOutside","bindFocusOutsideHandler","node","bind","undefined"],"mappings":";;;;;;;;;AAKA;;;;AACA;;AANA;;AAEA;AACA;AACA;eAOe,yCACZA,gBAAF,IAA0BC,KAAF,IAAa;AACpC,QAAM,CAAEC,kBAAF,EAAsBC,qBAAtB,IAAgD,wBAAtD;AACA,QAAMC,uBAAuB,GAAG,0BAC7BC,IAAF,IACCF,qBAAqB,CAAE,MACtBE,IAAI,SAAJ,IAAAA,IAAI,WAAJ,IAAAA,IAAI,CAAEH,kBAAN,GACGG,IAAI,CAACH,kBAAL,CAAwBI,IAAxB,CAA8BD,IAA9B,CADH,GAEGE,SAHiB,CAFS,EAO/B,EAP+B,CAAhC;AAUA,SACC,mCAAU,4CAAiBL,kBAAjB,CAAV,EACC,4BAAC,gBAAD;AACC,IAAA,GAAG,EAAGE;AADP,KAEMH,KAFN,EADD,CADD;AAQA,CArBa,EAsBd,kBAtBc,C","sourcesContent":["//@ts-nocheck\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState } from '@wordpress/element';\nimport {\n\tcreateHigherOrderComponent,\n\t__experimentalUseFocusOutside as useFocusOutside,\n} from '@wordpress/compose';\n\nexport default createHigherOrderComponent(\n\t( WrappedComponent ) => ( props ) => {\n\t\tconst [ handleFocusOutside, setHandleFocusOutside ] = useState();\n\t\tconst bindFocusOutsideHandler = useCallback(\n\t\t\t( node ) =>\n\t\t\t\tsetHandleFocusOutside( () =>\n\t\t\t\t\tnode?.handleFocusOutside\n\t\t\t\t\t\t? node.handleFocusOutside.bind( node )\n\t\t\t\t\t\t: undefined\n\t\t\t\t),\n\t\t\t[]\n\t\t);\n\n\t\treturn (\n\t\t\t<div { ...useFocusOutside( handleFocusOutside ) }>\n\t\t\t\t<WrappedComponent\n\t\t\t\t\tref={ bindFocusOutsideHandler }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n\t'withFocusOutside'\n);\n"]}
+{"version":3,"sources":["@wordpress/components/src/higher-order/with-focus-outside/index.js"],"names":["WrappedComponent","props","handleFocusOutside","setHandleFocusOutside","bindFocusOutsideHandler","node","bind","undefined"],"mappings":";;;;;;;;;AAKA;;;;AACA;;AANA;;AAEA;AACA;AACA;eAOe,yCACZA,gBAAF,IAA0BC,KAAF,IAAa;AACpC,QAAM,CAAEC,kBAAF,EAAsBC,qBAAtB,IAAgD,wBAAtD;AACA,QAAMC,uBAAuB,GAAG,0BAC7BC,IAAF,IACCF,qBAAqB,CAAE,MACtBE,IAAI,EAAEH,kBAAN,GACGG,IAAI,CAACH,kBAAL,CAAwBI,IAAxB,CAA8BD,IAA9B,CADH,GAEGE,SAHiB,CAFS,EAO/B,EAP+B,CAAhC;AAUA,SACC,mCAAU,4CAAiBL,kBAAjB,CAAV,EACC,4BAAC,gBAAD;AACC,IAAA,GAAG,EAAGE;AADP,KAEMH,KAFN,EADD,CADD;AAQA,CArBa,EAsBd,kBAtBc,C","sourcesContent":["//@ts-nocheck\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState } from '@wordpress/element';\nimport {\n\tcreateHigherOrderComponent,\n\t__experimentalUseFocusOutside as useFocusOutside,\n} from '@wordpress/compose';\n\nexport default createHigherOrderComponent(\n\t( WrappedComponent ) => ( props ) => {\n\t\tconst [ handleFocusOutside, setHandleFocusOutside ] = useState();\n\t\tconst bindFocusOutsideHandler = useCallback(\n\t\t\t( node ) =>\n\t\t\t\tsetHandleFocusOutside( () =>\n\t\t\t\t\tnode?.handleFocusOutside\n\t\t\t\t\t\t? node.handleFocusOutside.bind( node )\n\t\t\t\t\t\t: undefined\n\t\t\t\t),\n\t\t\t[]\n\t\t);\n\n\t\treturn (\n\t\t\t<div { ...useFocusOutside( handleFocusOutside ) }>\n\t\t\t\t<WrappedComponent\n\t\t\t\t\tref={ bindFocusOutsideHandler }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n\t'withFocusOutside'\n);\n"]}

package/build/higher-order/with-focus-outside/index.native.js

@@ -24,7 +24,7 @@ var _compose = require("@wordpress/compose");
  */
 var _default = (0, _compose.createHigherOrderComponent)(WrappedComponent => props => {
   const [handleFocusOutside, setHandleFocusOutside] = (0, _element.useState)();
-  const bindFocusOutsideHandler = (0, _element.useCallback)(node => setHandleFocusOutside(() => node !== null && node !== void 0 && node.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []);
+  const bindFocusOutsideHandler = (0, _element.useCallback)(node => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []);
   return (0, _element.createElement)(_reactNative.View, (0, _compose.__experimentalUseFocusOutside)(handleFocusOutside), (0, _element.createElement)(WrappedComponent, (0, _extends2.default)({
     ref: bindFocusOutsideHandler
   }, props)));

package/build/higher-order/with-focus-outside/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/higher-order/with-focus-outside/index.native.js"],"names":["WrappedComponent","props","handleFocusOutside","setHandleFocusOutside","bindFocusOutsideHandler","node","bind","undefined"],"mappings":";;;;;;;;;AAOA;;;;AAJA;;AAKA;;AARA;AACA;AACA;;AAEA;AACA;AACA;eAOe,yCACZA,gBAAF,IAA0BC,KAAF,IAAa;AACpC,QAAM,CAAEC,kBAAF,EAAsBC,qBAAtB,IAAgD,wBAAtD;AACA,QAAMC,uBAAuB,GAAG,0BAC7BC,IAAF,IACCF,qBAAqB,CAAE,MACtBE,IAAI,SAAJ,IAAAA,IAAI,WAAJ,IAAAA,IAAI,CAAEH,kBAAN,GACGG,IAAI,CAACH,kBAAL,CAAwBI,IAAxB,CAA8BD,IAA9B,CADH,GAEGE,SAHiB,CAFS,EAO/B,EAP+B,CAAhC;AAUA,SACC,4BAAC,iBAAD,EAAW,4CAAiBL,kBAAjB,CAAX,EACC,4BAAC,gBAAD;AACC,IAAA,GAAG,EAAGE;AADP,KAEMH,KAFN,EADD,CADD;AAQA,CArBa,EAsBd,kBAtBc,C","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState } from '@wordpress/element';\nimport {\n\tcreateHigherOrderComponent,\n\t__experimentalUseFocusOutside as useFocusOutside,\n} from '@wordpress/compose';\n\nexport default createHigherOrderComponent(\n\t( WrappedComponent ) => ( props ) => {\n\t\tconst [ handleFocusOutside, setHandleFocusOutside ] = useState();\n\t\tconst bindFocusOutsideHandler = useCallback(\n\t\t\t( node ) =>\n\t\t\t\tsetHandleFocusOutside( () =>\n\t\t\t\t\tnode?.handleFocusOutside\n\t\t\t\t\t\t? node.handleFocusOutside.bind( node )\n\t\t\t\t\t\t: undefined\n\t\t\t\t),\n\t\t\t[]\n\t\t);\n\n\t\treturn (\n\t\t\t<View { ...useFocusOutside( handleFocusOutside ) }>\n\t\t\t\t<WrappedComponent\n\t\t\t\t\tref={ bindFocusOutsideHandler }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t);\n\t},\n\t'withFocusOutside'\n);\n"]}
+{"version":3,"sources":["@wordpress/components/src/higher-order/with-focus-outside/index.native.js"],"names":["WrappedComponent","props","handleFocusOutside","setHandleFocusOutside","bindFocusOutsideHandler","node","bind","undefined"],"mappings":";;;;;;;;;AAOA;;;;AAJA;;AAKA;;AARA;AACA;AACA;;AAEA;AACA;AACA;eAOe,yCACZA,gBAAF,IAA0BC,KAAF,IAAa;AACpC,QAAM,CAAEC,kBAAF,EAAsBC,qBAAtB,IAAgD,wBAAtD;AACA,QAAMC,uBAAuB,GAAG,0BAC7BC,IAAF,IACCF,qBAAqB,CAAE,MACtBE,IAAI,EAAEH,kBAAN,GACGG,IAAI,CAACH,kBAAL,CAAwBI,IAAxB,CAA8BD,IAA9B,CADH,GAEGE,SAHiB,CAFS,EAO/B,EAP+B,CAAhC;AAUA,SACC,4BAAC,iBAAD,EAAW,4CAAiBL,kBAAjB,CAAX,EACC,4BAAC,gBAAD;AACC,IAAA,GAAG,EAAGE;AADP,KAEMH,KAFN,EADD,CADD;AAQA,CArBa,EAsBd,kBAtBc,C","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState } from '@wordpress/element';\nimport {\n\tcreateHigherOrderComponent,\n\t__experimentalUseFocusOutside as useFocusOutside,\n} from '@wordpress/compose';\n\nexport default createHigherOrderComponent(\n\t( WrappedComponent ) => ( props ) => {\n\t\tconst [ handleFocusOutside, setHandleFocusOutside ] = useState();\n\t\tconst bindFocusOutsideHandler = useCallback(\n\t\t\t( node ) =>\n\t\t\t\tsetHandleFocusOutside( () =>\n\t\t\t\t\tnode?.handleFocusOutside\n\t\t\t\t\t\t? node.handleFocusOutside.bind( node )\n\t\t\t\t\t\t: undefined\n\t\t\t\t),\n\t\t\t[]\n\t\t);\n\n\t\treturn (\n\t\t\t<View { ...useFocusOutside( handleFocusOutside ) }>\n\t\t\t\t<WrappedComponent\n\t\t\t\t\tref={ bindFocusOutsideHandler }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t);\n\t},\n\t'withFocusOutside'\n);\n"]}

package/build/higher-order/with-focus-return/index.js

@@ -44,20 +44,17 @@ function isComponentLike(object) {
  */
 var _default = (0, _compose.createHigherOrderComponent)( // @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types
 options => {
-  const HoC = function () {
-    let {
-      onFocusReturn
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return WrappedComponent => {
-      const WithFocusReturn = props => {
-        const ref = (0, _compose.useFocusReturn)(onFocusReturn);
-        return (0, _element.createElement)("div", {
-          ref: ref
-        }, (0, _element.createElement)(WrappedComponent, props));
-      };
-
-      return WithFocusReturn;
+  const HoC = ({
+    onFocusReturn
+  } = {}) => WrappedComponent => {
+    const WithFocusReturn = props => {
+      const ref = (0, _compose.useFocusReturn)(onFocusReturn);
+      return (0, _element.createElement)("div", {
+        ref: ref
+      }, (0, _element.createElement)(WrappedComponent, props));
     };
+
+    return WithFocusReturn;
   };
 
   if (isComponentLike(options)) {
@@ -70,10 +67,9 @@ options => {
 
 exports.default = _default;
 
-const Provider = _ref => {
-  let {
-    children
-  } = _ref;
+const Provider = ({
+  children
+}) => {
   (0, _deprecated.default)('wp.components.FocusReturnProvider component', {
     since: '5.7',
     hint: 'This provider is not used anymore. You can just remove it from your codebase'