@wordpress/components 32.0.1-next.v.0 → 32.1.0

package/build-module/form-file-upload/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/form-file-upload/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\n/**\n * FormFileUpload allows users to select files from their local device.\n *\n * ```jsx\n * import { FormFileUpload } from '@wordpress/components';\n *\n * const MyFormFileUpload = () => (\n *   <FormFileUpload\n *     __next40pxDefaultSize\n *     accept=\"image/*\"\n *     onChange={ ( event ) => console.log( event.currentTarget.files ) }\n *   >\n *     Upload\n *   </FormFileUpload>\n * );\n * ```\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport function FormFileUpload({\n  accept,\n  children,\n  multiple = false,\n  onChange,\n  onClick,\n  render,\n  ...props\n}) {\n  const ref = useRef(null);\n  const openFileDialog = () => {\n    ref.current?.click();\n  };\n  if (!render) {\n    maybeWarnDeprecated36pxSize({\n      componentName: 'FormFileUpload',\n      __next40pxDefaultSize: props.__next40pxDefaultSize,\n      // @ts-expect-error - We don't \"officially\" support all Button props but this likely happens.\n      size: props.size\n    });\n  }\n  const ui = render ? render({\n    openFileDialog\n  }) : /*#__PURE__*/_jsx(Button, {\n    onClick: openFileDialog,\n    ...props,\n    children: children\n  });\n\n  // iOS browsers may not reliably handle 'audio/*' in the accept attribute.\n  // Adding explicit audio MIME types improves compatibility across all devices.\n  const compatAccept = accept?.includes('audio/*') ? `${accept}, audio/mp3, audio/x-m4a, audio/x-m4b, audio/x-m4p, audio/x-wav, audio/webm` : accept;\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-form-file-upload\",\n    children: [ui, /*#__PURE__*/_jsx(\"input\", {\n      type: \"file\",\n      ref: ref,\n      multiple: multiple,\n      style: {\n        display: 'none'\n      },\n      accept: compatAccept,\n      onChange: onChange,\n      onClick: onClick,\n      \"data-testid\": \"form-file-upload-input\"\n    })]\n  });\n}\nexport default FormFileUpload;"],
-  "mappings": ";AAGA,SAAS,cAAc;AAKvB,OAAO,YAAY;AACnB,SAAS,mCAAmC;AAmB5C,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,iBAAiB,MAAM;AAC3B,QAAI,SAAS,MAAM;AAAA,EACrB;AACA,MAAI,CAAC,QAAQ;AACX,gCAA4B;AAAA,MAC1B,eAAe;AAAA,MACf,uBAAuB,MAAM;AAAA;AAAA,MAE7B,MAAM,MAAM;AAAA,IACd,CAAC;AAAA,EACH;AACA,QAAM,KAAK,SAAS,OAAO;AAAA,IACzB;AAAA,EACF,CAAC,IAAiB,qBAAK,QAAQ;AAAA,IAC7B,SAAS;AAAA,IACT,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AAID,QAAM,eAAe,QAAQ,SAAS,SAAS,IAAI,GAAG,MAAM,gFAAgF;AAC5I,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAC,IAAiB,qBAAK,SAAS;AAAA,MACxC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IACjB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,2BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\n/**\n * FormFileUpload allows users to select files from their local device.\n *\n * ```jsx\n * import { FormFileUpload } from '@wordpress/components';\n *\n * const MyFormFileUpload = () => (\n *   <FormFileUpload\n *     __next40pxDefaultSize\n *     accept=\"image/*\"\n *     onChange={ ( event ) => console.log( event.currentTarget.files ) }\n *   >\n *     Upload\n *   </FormFileUpload>\n * );\n * ```\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport function FormFileUpload({\n  accept,\n  children,\n  multiple = false,\n  onChange,\n  onClick,\n  render,\n  ...props\n}) {\n  const ref = useRef(null);\n  const openFileDialog = () => {\n    ref.current?.click();\n  };\n  if (!render) {\n    maybeWarnDeprecated36pxSize({\n      componentName: 'FormFileUpload',\n      __next40pxDefaultSize: props.__next40pxDefaultSize,\n      // @ts-expect-error - We don't \"officially\" support all Button props but this likely happens.\n      size: props.size\n    });\n  }\n  const ui = render ? render({\n    openFileDialog\n  }) :\n  /*#__PURE__*/\n  // Disable reason: the parent component already takes care of the `__next40pxDefaultSize` prop.\n  // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n  _jsx(Button, {\n    onClick: openFileDialog,\n    ...props,\n    children: children\n  });\n\n  // iOS browsers may not reliably handle 'audio/*' in the accept attribute.\n  // Adding explicit audio MIME types improves compatibility across all devices.\n  const compatAccept = accept?.includes('audio/*') ? `${accept}, audio/mp3, audio/x-m4a, audio/x-m4b, audio/x-m4p, audio/x-wav, audio/webm` : accept;\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-form-file-upload\",\n    children: [ui, /*#__PURE__*/_jsx(\"input\", {\n      type: \"file\",\n      ref: ref,\n      multiple: multiple,\n      style: {\n        display: 'none'\n      },\n      accept: compatAccept,\n      onChange: onChange,\n      onClick: onClick,\n      \"data-testid\": \"form-file-upload-input\"\n    })]\n  });\n}\nexport default FormFileUpload;"],
+  "mappings": ";AAGA,SAAS,cAAc;AAKvB,OAAO,YAAY;AACnB,SAAS,mCAAmC;AAmB5C,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,iBAAiB,MAAM;AAC3B,QAAI,SAAS,MAAM;AAAA,EACrB;AACA,MAAI,CAAC,QAAQ;AACX,gCAA4B;AAAA,MAC1B,eAAe;AAAA,MACf,uBAAuB,MAAM;AAAA;AAAA,MAE7B,MAAM,MAAM;AAAA,IACd,CAAC;AAAA,EACH;AACA,QAAM,KAAK,SAAS,OAAO;AAAA,IACzB;AAAA,EACF,CAAC;AAAA;AAAA;AAAA,IAID,qBAAK,QAAQ;AAAA,MACX,SAAS;AAAA,MACT,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA;AAID,QAAM,eAAe,QAAQ,SAAS,SAAS,IAAI,GAAG,MAAM,gFAAgF;AAC5I,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAC,IAAiB,qBAAK,SAAS;AAAA,MACxC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IACjB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,2BAAQ;",
   "names": []
 }

package/build-module/form-toggle/index.mjs

@@ -41,6 +41,7 @@ function UnforwardedFormToggle(props, ref) {
   });
 }
 var FormToggle = forwardRef(UnforwardedFormToggle);
+FormToggle.displayName = "FormToggle";
 var form_toggle_default = FormToggle;
 export {
   FormToggle,

package/build-module/form-toggle/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/form-toggle/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const noop = () => {};\nfunction UnforwardedFormToggle(props, ref) {\n  const {\n    className,\n    checked,\n    id,\n    disabled,\n    onChange = noop,\n    onClick,\n    ...additionalProps\n  } = props;\n  const wrapperClasses = clsx('components-form-toggle', className, {\n    'is-checked': checked,\n    'is-disabled': disabled\n  });\n  return /*#__PURE__*/_jsxs(\"span\", {\n    className: wrapperClasses,\n    children: [/*#__PURE__*/_jsx(\"input\", {\n      className: \"components-form-toggle__input\",\n      id: id,\n      type: \"checkbox\",\n      checked: checked,\n      onChange: onChange,\n      disabled: disabled,\n      onClick: event => {\n        // Compat code for Safari to ensure that the toggle is focused when clicked.\n        event.currentTarget.focus();\n        onClick?.(event);\n      },\n      ...additionalProps,\n      ref: ref\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-form-toggle__track\"\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-form-toggle__thumb\"\n    })]\n  });\n}\n\n/**\n * FormToggle switches a single setting on or off.\n *\n * ```jsx\n * import { FormToggle } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyFormToggle = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *\n *   return (\n *     <FormToggle\n *       checked={ isChecked }\n *       onChange={ () => setChecked( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const FormToggle = forwardRef(UnforwardedFormToggle);\nexport default FormToggle;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,kBAAkB;AAK3B,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAM,OAAO,MAAM;AAAC;AAC3B,SAAS,sBAAsB,OAAO,KAAK;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,iBAAiB,KAAK,0BAA0B,WAAW;AAAA,IAC/D,cAAc;AAAA,IACd,eAAe;AAAA,EACjB,CAAC;AACD,SAAoB,sBAAM,QAAQ;AAAA,IAChC,WAAW;AAAA,IACX,UAAU,CAAc,qBAAK,SAAS;AAAA,MACpC,WAAW;AAAA,MACX;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAS;AAEhB,cAAM,cAAc,MAAM;AAC1B,kBAAU,KAAK;AAAA,MACjB;AAAA,MACA,GAAG;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,IACb,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,IACb,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAqBO,IAAM,aAAa,WAAW,qBAAqB;AAC1D,IAAO,sBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const noop = () => {};\nfunction UnforwardedFormToggle(props, ref) {\n  const {\n    className,\n    checked,\n    id,\n    disabled,\n    onChange = noop,\n    onClick,\n    ...additionalProps\n  } = props;\n  const wrapperClasses = clsx('components-form-toggle', className, {\n    'is-checked': checked,\n    'is-disabled': disabled\n  });\n  return /*#__PURE__*/_jsxs(\"span\", {\n    className: wrapperClasses,\n    children: [/*#__PURE__*/_jsx(\"input\", {\n      className: \"components-form-toggle__input\",\n      id: id,\n      type: \"checkbox\",\n      checked: checked,\n      onChange: onChange,\n      disabled: disabled,\n      onClick: event => {\n        // Compat code for Safari to ensure that the toggle is focused when clicked.\n        event.currentTarget.focus();\n        onClick?.(event);\n      },\n      ...additionalProps,\n      ref: ref\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-form-toggle__track\"\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-form-toggle__thumb\"\n    })]\n  });\n}\n\n/**\n * FormToggle switches a single setting on or off.\n *\n * ```jsx\n * import { FormToggle } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyFormToggle = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *\n *   return (\n *     <FormToggle\n *       checked={ isChecked }\n *       onChange={ () => setChecked( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const FormToggle = forwardRef(UnforwardedFormToggle);\nFormToggle.displayName = 'FormToggle';\nexport default FormToggle;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,kBAAkB;AAK3B,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAM,OAAO,MAAM;AAAC;AAC3B,SAAS,sBAAsB,OAAO,KAAK;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,iBAAiB,KAAK,0BAA0B,WAAW;AAAA,IAC/D,cAAc;AAAA,IACd,eAAe;AAAA,EACjB,CAAC;AACD,SAAoB,sBAAM,QAAQ;AAAA,IAChC,WAAW;AAAA,IACX,UAAU,CAAc,qBAAK,SAAS;AAAA,MACpC,WAAW;AAAA,MACX;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAS;AAEhB,cAAM,cAAc,MAAM;AAC1B,kBAAU,KAAK;AAAA,MACjB;AAAA,MACA,GAAG;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,IACb,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,IACb,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAqBO,IAAM,aAAa,WAAW,qBAAqB;AAC1D,WAAW,cAAc;AACzB,IAAO,sBAAQ;",
   "names": []
 }

package/build-module/form-token-field/token-input.mjs

@@ -58,6 +58,7 @@ function UnForwardedTokenInput(props, ref) {
   });
 }
 var TokenInput = forwardRef(UnForwardedTokenInput);
+TokenInput.displayName = "TokenInput";
 var token_input_default = TokenInput;
 export {
   TokenInput,

package/build-module/form-token-field/token-input.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/form-token-field/token-input.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport function UnForwardedTokenInput(props, ref) {\n  const {\n    value,\n    isExpanded,\n    instanceId,\n    selectedSuggestionIndex,\n    className,\n    onChange,\n    onFocus,\n    onBlur,\n    ...restProps\n  } = props;\n  const [hasFocus, setHasFocus] = useState(false);\n  const size = value ? value.length + 1 : 0;\n  const onChangeHandler = event => {\n    if (onChange) {\n      onChange({\n        value: event.target.value\n      });\n    }\n  };\n  const onFocusHandler = e => {\n    setHasFocus(true);\n    onFocus?.(e);\n  };\n  const onBlurHandler = e => {\n    setHasFocus(false);\n    onBlur?.(e);\n  };\n  return /*#__PURE__*/_jsx(\"input\", {\n    ref: ref,\n    id: `components-form-token-input-${instanceId}`,\n    type: \"text\",\n    ...restProps,\n    value: value || '',\n    onChange: onChangeHandler,\n    onFocus: onFocusHandler,\n    onBlur: onBlurHandler,\n    size: size,\n    className: clsx(className, 'components-form-token-field__input'),\n    autoComplete: \"off\",\n    role: \"combobox\",\n    \"aria-expanded\": isExpanded,\n    \"aria-autocomplete\": \"list\",\n    \"aria-owns\": isExpanded ? `components-form-token-suggestions-${instanceId}` : undefined,\n    \"aria-activedescendant\":\n    // Only add the `aria-activedescendant` attribute when:\n    // - the user is actively interacting with the input (`hasFocus`)\n    // - there is a selected suggestion (`selectedSuggestionIndex !== -1`)\n    // - the list of suggestions are rendered in the DOM (`isExpanded`)\n    hasFocus && selectedSuggestionIndex !== -1 && isExpanded ? `components-form-token-suggestions-${instanceId}-${selectedSuggestionIndex}` : undefined,\n    \"aria-describedby\": `components-form-token-suggestions-howto-${instanceId}`\n  });\n}\nexport const TokenInput = forwardRef(UnForwardedTokenInput);\nexport default TokenInput;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,YAAY,gBAAgB;AAKrC,SAAS,OAAO,YAAY;AACrB,SAAS,sBAAsB,OAAO,KAAK;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,OAAO,QAAQ,MAAM,SAAS,IAAI;AACxC,QAAM,kBAAkB,WAAS;AAC/B,QAAI,UAAU;AACZ,eAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,MACtB,CAAC;AAAA,IACH;AAAA,EACF;AACA,QAAM,iBAAiB,OAAK;AAC1B,gBAAY,IAAI;AAChB,cAAU,CAAC;AAAA,EACb;AACA,QAAM,gBAAgB,OAAK;AACzB,gBAAY,KAAK;AACjB,aAAS,CAAC;AAAA,EACZ;AACA,SAAoB,qBAAK,SAAS;AAAA,IAChC;AAAA,IACA,IAAI,+BAA+B,UAAU;AAAA,IAC7C,MAAM;AAAA,IACN,GAAG;AAAA,IACH,OAAO,SAAS;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,IACA,WAAW,KAAK,WAAW,oCAAoC;AAAA,IAC/D,cAAc;AAAA,IACd,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,qBAAqB;AAAA,IACrB,aAAa,aAAa,qCAAqC,UAAU,KAAK;AAAA,IAC9E;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,YAAY,4BAA4B,MAAM,aAAa,qCAAqC,UAAU,IAAI,uBAAuB,KAAK;AAAA;AAAA,IAC1I,oBAAoB,2CAA2C,UAAU;AAAA,EAC3E,CAAC;AACH;AACO,IAAM,aAAa,WAAW,qBAAqB;AAC1D,IAAO,sBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport function UnForwardedTokenInput(props, ref) {\n  const {\n    value,\n    isExpanded,\n    instanceId,\n    selectedSuggestionIndex,\n    className,\n    onChange,\n    onFocus,\n    onBlur,\n    ...restProps\n  } = props;\n  const [hasFocus, setHasFocus] = useState(false);\n  const size = value ? value.length + 1 : 0;\n  const onChangeHandler = event => {\n    if (onChange) {\n      onChange({\n        value: event.target.value\n      });\n    }\n  };\n  const onFocusHandler = e => {\n    setHasFocus(true);\n    onFocus?.(e);\n  };\n  const onBlurHandler = e => {\n    setHasFocus(false);\n    onBlur?.(e);\n  };\n  return /*#__PURE__*/_jsx(\"input\", {\n    ref: ref,\n    id: `components-form-token-input-${instanceId}`,\n    type: \"text\",\n    ...restProps,\n    value: value || '',\n    onChange: onChangeHandler,\n    onFocus: onFocusHandler,\n    onBlur: onBlurHandler,\n    size: size,\n    className: clsx(className, 'components-form-token-field__input'),\n    autoComplete: \"off\",\n    role: \"combobox\",\n    \"aria-expanded\": isExpanded,\n    \"aria-autocomplete\": \"list\",\n    \"aria-owns\": isExpanded ? `components-form-token-suggestions-${instanceId}` : undefined,\n    \"aria-activedescendant\":\n    // Only add the `aria-activedescendant` attribute when:\n    // - the user is actively interacting with the input (`hasFocus`)\n    // - there is a selected suggestion (`selectedSuggestionIndex !== -1`)\n    // - the list of suggestions are rendered in the DOM (`isExpanded`)\n    hasFocus && selectedSuggestionIndex !== -1 && isExpanded ? `components-form-token-suggestions-${instanceId}-${selectedSuggestionIndex}` : undefined,\n    \"aria-describedby\": `components-form-token-suggestions-howto-${instanceId}`\n  });\n}\nexport const TokenInput = forwardRef(UnForwardedTokenInput);\nTokenInput.displayName = 'TokenInput';\nexport default TokenInput;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,YAAY,gBAAgB;AAKrC,SAAS,OAAO,YAAY;AACrB,SAAS,sBAAsB,OAAO,KAAK;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,OAAO,QAAQ,MAAM,SAAS,IAAI;AACxC,QAAM,kBAAkB,WAAS;AAC/B,QAAI,UAAU;AACZ,eAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,MACtB,CAAC;AAAA,IACH;AAAA,EACF;AACA,QAAM,iBAAiB,OAAK;AAC1B,gBAAY,IAAI;AAChB,cAAU,CAAC;AAAA,EACb;AACA,QAAM,gBAAgB,OAAK;AACzB,gBAAY,KAAK;AACjB,aAAS,CAAC;AAAA,EACZ;AACA,SAAoB,qBAAK,SAAS;AAAA,IAChC;AAAA,IACA,IAAI,+BAA+B,UAAU;AAAA,IAC7C,MAAM;AAAA,IACN,GAAG;AAAA,IACH,OAAO,SAAS;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,IACA,WAAW,KAAK,WAAW,oCAAoC;AAAA,IAC/D,cAAc;AAAA,IACd,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,qBAAqB;AAAA,IACrB,aAAa,aAAa,qCAAqC,UAAU,KAAK;AAAA,IAC9E;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,YAAY,4BAA4B,MAAM,aAAa,qCAAqC,UAAU,IAAI,uBAAuB,KAAK;AAAA;AAAA,IAC1I,oBAAoB,2CAA2C,UAAU;AAAA,EAC3E,CAAC;AACH;AACO,IAAM,aAAa,WAAW,qBAAqB;AAC1D,WAAW,cAAc;AACzB,IAAO,sBAAQ;",
   "names": []
 }

package/build-module/form-token-field/token.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/form-token-field/token.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nexport default function Token({\n  value,\n  status,\n  title,\n  displayTransform,\n  isBorderless = false,\n  disabled = false,\n  onClickRemove = noop,\n  onMouseEnter,\n  onMouseLeave,\n  messages,\n  termPosition,\n  termsCount\n}) {\n  const instanceId = useInstanceId(Token);\n  const tokenClasses = clsx('components-form-token-field__token', {\n    'is-error': 'error' === status,\n    'is-success': 'success' === status,\n    'is-validating': 'validating' === status,\n    'is-borderless': isBorderless,\n    'is-disabled': disabled\n  });\n  const onClick = () => onClickRemove({\n    value\n  });\n  const transformedValue = displayTransform(value);\n  const termPositionAndCount = sprintf(/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */\n  __('%1$s (%2$d of %3$d)'), transformedValue, termPosition, termsCount);\n  return /*#__PURE__*/_jsxs(\"span\", {\n    className: tokenClasses,\n    onMouseEnter: onMouseEnter,\n    onMouseLeave: onMouseLeave,\n    title: title,\n    children: [/*#__PURE__*/_jsxs(\"span\", {\n      className: \"components-form-token-field__token-text\",\n      id: `components-form-token-field__token-text-${instanceId}`,\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        as: \"span\",\n        children: termPositionAndCount\n      }), /*#__PURE__*/_jsx(\"span\", {\n        \"aria-hidden\": \"true\",\n        children: transformedValue\n      })]\n    }), /*#__PURE__*/_jsx(Button, {\n      className: \"components-form-token-field__remove-token\",\n      size: \"small\",\n      icon: closeSmall,\n      onClick: !disabled ? onClick : undefined\n      // Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.\n      // eslint-disable-next-line no-restricted-syntax\n      ,\n      disabled: disabled,\n      label: messages.remove,\n      \"aria-describedby\": `components-form-token-field__token-text-${instanceId}`\n    })]\n  });\n}"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,qBAAqB;AAC9B,SAAS,IAAI,eAAe;AAC5B,SAAS,kBAAkB;AAK3B,OAAO,YAAY;AACnB,SAAS,sBAAsB;AAC/B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,OAAO,MAAM;AAAC;AACL,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,eAAe,KAAK,sCAAsC;AAAA,IAC9D,YAAY,YAAY;AAAA,IACxB,cAAc,cAAc;AAAA,IAC5B,iBAAiB,iBAAiB;AAAA,IAClC,iBAAiB;AAAA,IACjB,eAAe;AAAA,EACjB,CAAC;AACD,QAAM,UAAU,MAAM,cAAc;AAAA,IAClC;AAAA,EACF,CAAC;AACD,QAAM,mBAAmB,iBAAiB,KAAK;AAC/C,QAAM,uBAAuB;AAAA;AAAA,IAC7B,GAAG,qBAAqB;AAAA,IAAG;AAAA,IAAkB;AAAA,IAAc;AAAA,EAAU;AACrE,SAAoB,sBAAM,QAAQ;AAAA,IAChC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAc,sBAAM,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,IAAI,2CAA2C,UAAU;AAAA,MACzD,UAAU,CAAc,qBAAK,gBAAgB;AAAA,QAC3C,IAAI;AAAA,QACJ,UAAU;AAAA,MACZ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,QAC5B,eAAe;AAAA,QACf,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS,CAAC,WAAW,UAAU;AAAA,MAI/B;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,oBAAoB,2CAA2C,UAAU;AAAA,IAC3E,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nexport default function Token({\n  value,\n  status,\n  title,\n  displayTransform,\n  isBorderless = false,\n  disabled = false,\n  onClickRemove = noop,\n  onMouseEnter,\n  onMouseLeave,\n  messages,\n  termPosition,\n  termsCount\n}) {\n  const instanceId = useInstanceId(Token);\n  const tokenClasses = clsx('components-form-token-field__token', {\n    'is-error': 'error' === status,\n    'is-success': 'success' === status,\n    'is-validating': 'validating' === status,\n    'is-borderless': isBorderless,\n    'is-disabled': disabled\n  });\n  const onClick = () => onClickRemove({\n    value\n  });\n  const transformedValue = displayTransform(value);\n  const termPositionAndCount = sprintf(/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */\n  __('%1$s (%2$d of %3$d)'), transformedValue, termPosition, termsCount);\n  return /*#__PURE__*/_jsxs(\"span\", {\n    className: tokenClasses,\n    onMouseEnter: onMouseEnter,\n    onMouseLeave: onMouseLeave,\n    title: title,\n    children: [/*#__PURE__*/_jsxs(\"span\", {\n      className: \"components-form-token-field__token-text\",\n      id: `components-form-token-field__token-text-${instanceId}`,\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        as: \"span\",\n        children: termPositionAndCount\n      }), /*#__PURE__*/_jsx(\"span\", {\n        \"aria-hidden\": \"true\",\n        children: transformedValue\n      })]\n    }), /*#__PURE__*/_jsx(Button, {\n      className: \"components-form-token-field__remove-token\",\n      size: \"small\",\n      icon: closeSmall,\n      onClick: !disabled ? onClick : undefined,\n      disabled: disabled,\n      label: messages.remove,\n      \"aria-describedby\": `components-form-token-field__token-text-${instanceId}`\n    })]\n  });\n}"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,qBAAqB;AAC9B,SAAS,IAAI,eAAe;AAC5B,SAAS,kBAAkB;AAK3B,OAAO,YAAY;AACnB,SAAS,sBAAsB;AAC/B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,OAAO,MAAM;AAAC;AACL,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,eAAe,KAAK,sCAAsC;AAAA,IAC9D,YAAY,YAAY;AAAA,IACxB,cAAc,cAAc;AAAA,IAC5B,iBAAiB,iBAAiB;AAAA,IAClC,iBAAiB;AAAA,IACjB,eAAe;AAAA,EACjB,CAAC;AACD,QAAM,UAAU,MAAM,cAAc;AAAA,IAClC;AAAA,EACF,CAAC;AACD,QAAM,mBAAmB,iBAAiB,KAAK;AAC/C,QAAM,uBAAuB;AAAA;AAAA,IAC7B,GAAG,qBAAqB;AAAA,IAAG;AAAA,IAAkB;AAAA,IAAc;AAAA,EAAU;AACrE,SAAoB,sBAAM,QAAQ;AAAA,IAChC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAc,sBAAM,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,IAAI,2CAA2C,UAAU;AAAA,MACzD,UAAU,CAAc,qBAAK,gBAAgB;AAAA,QAC3C,IAAI;AAAA,QACJ,UAAU;AAAA,MACZ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,QAC5B,eAAe;AAAA,QACf,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS,CAAC,WAAW,UAAU;AAAA,MAC/B;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,oBAAoB,2CAA2C,UAAU;AAAA,IAC3E,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
   "names": []
 }

package/build-module/guide/index.mjs

@@ -34,10 +34,9 @@ function Guide({
     }
   }, [children]);
   if (Children.count(children)) {
-    var _Children$map;
-    pages = (_Children$map = Children.map(children, (child) => ({
+    pages = Children.map(children, (child) => ({
       content: child
-    }))) !== null && _Children$map !== void 0 ? _Children$map : [];
+    })) ?? [];
   }
   const canGoBack = currentPage > 0;
   const canGoForward = currentPage < pages.length - 1;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/guide/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\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  children,\n  className,\n  contentLabel,\n  finishButtonText = __('Finish'),\n  nextButtonText = __('Next'),\n  previousButtonText = __('Previous'),\n  onFinish,\n  pages = []\n}) {\n  const ref = useRef(null);\n  const [currentPage, setCurrentPage] = useState(0);\n  useEffect(() => {\n    // Place focus at the top of the guide on mount and when the page changes.\n    const frame = ref.current?.querySelector('.components-guide');\n    if (frame instanceof HTMLElement) {\n      frame.focus();\n    }\n  }, [currentPage]);\n  useEffect(() => {\n    if (Children.count(children)) {\n      deprecated('Passing children to <Guide>', {\n        since: '5.5',\n        alternative: 'the `pages` prop'\n      });\n    }\n  }, [children]);\n  if (Children.count(children)) {\n    var _Children$map;\n    pages = (_Children$map = Children.map(children, child => ({\n      content: child\n    }))) !== null && _Children$map !== void 0 ? _Children$map : [];\n  }\n  const canGoBack = currentPage > 0;\n  const canGoForward = currentPage < pages.length - 1;\n  const goBack = () => {\n    if (canGoBack) {\n      setCurrentPage(currentPage - 1);\n    }\n  };\n  const goForward = () => {\n    if (canGoForward) {\n      setCurrentPage(currentPage + 1);\n    }\n  };\n  if (pages.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(Modal, {\n    className: clsx('components-guide', className),\n    contentLabel: contentLabel,\n    isDismissible: pages.length > 1,\n    onRequestClose: onFinish,\n    onKeyDown: event => {\n      if (event.code === 'ArrowLeft') {\n        goBack();\n        // Do not scroll the modal's contents.\n        event.preventDefault();\n      } else if (event.code === 'ArrowRight') {\n        goForward();\n        // Do not scroll the modal's contents.\n        event.preventDefault();\n      }\n    },\n    ref: ref,\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      className: \"components-guide__container\",\n      children: [/*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-guide__page\",\n        children: [pages[currentPage].image, pages.length > 1 && /*#__PURE__*/_jsx(PageControl, {\n          currentPage: currentPage,\n          numberOfPages: pages.length,\n          setCurrentPage: setCurrentPage\n        }), pages[currentPage].content]\n      }), /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-guide__footer\",\n        children: [canGoBack && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__back-button\",\n          variant: \"tertiary\",\n          onClick: goBack,\n          __next40pxDefaultSize: true,\n          children: previousButtonText\n        }), canGoForward && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__forward-button\",\n          variant: \"primary\",\n          onClick: goForward,\n          __next40pxDefaultSize: true,\n          children: nextButtonText\n        }), !canGoForward && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__finish-button\",\n          variant: \"primary\",\n          onClick: onFinish,\n          __next40pxDefaultSize: true,\n          children: finishButtonText\n        })]\n      })]\n    })\n  });\n}\nexport default Guide;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\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  children,\n  className,\n  contentLabel,\n  finishButtonText = __('Finish'),\n  nextButtonText = __('Next'),\n  previousButtonText = __('Previous'),\n  onFinish,\n  pages = []\n}) {\n  const ref = useRef(null);\n  const [currentPage, setCurrentPage] = useState(0);\n  useEffect(() => {\n    // Place focus at the top of the guide on mount and when the page changes.\n    const frame = ref.current?.querySelector('.components-guide');\n    if (frame instanceof HTMLElement) {\n      frame.focus();\n    }\n  }, [currentPage]);\n  useEffect(() => {\n    if (Children.count(children)) {\n      deprecated('Passing children to <Guide>', {\n        since: '5.5',\n        alternative: 'the `pages` prop'\n      });\n    }\n  }, [children]);\n  if (Children.count(children)) {\n    pages = Children.map(children, child => ({\n      content: child\n    })) ?? [];\n  }\n  const canGoBack = currentPage > 0;\n  const canGoForward = currentPage < pages.length - 1;\n  const goBack = () => {\n    if (canGoBack) {\n      setCurrentPage(currentPage - 1);\n    }\n  };\n  const goForward = () => {\n    if (canGoForward) {\n      setCurrentPage(currentPage + 1);\n    }\n  };\n  if (pages.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(Modal, {\n    className: clsx('components-guide', className),\n    contentLabel: contentLabel,\n    isDismissible: pages.length > 1,\n    onRequestClose: onFinish,\n    onKeyDown: event => {\n      if (event.code === 'ArrowLeft') {\n        goBack();\n        // Do not scroll the modal's contents.\n        event.preventDefault();\n      } else if (event.code === 'ArrowRight') {\n        goForward();\n        // Do not scroll the modal's contents.\n        event.preventDefault();\n      }\n    },\n    ref: ref,\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      className: \"components-guide__container\",\n      children: [/*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-guide__page\",\n        children: [pages[currentPage].image, pages.length > 1 && /*#__PURE__*/_jsx(PageControl, {\n          currentPage: currentPage,\n          numberOfPages: pages.length,\n          setCurrentPage: setCurrentPage\n        }), pages[currentPage].content]\n      }), /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-guide__footer\",\n        children: [canGoBack && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__back-button\",\n          variant: \"tertiary\",\n          onClick: goBack,\n          __next40pxDefaultSize: true,\n          children: previousButtonText\n        }), canGoForward && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__forward-button\",\n          variant: \"primary\",\n          onClick: goForward,\n          __next40pxDefaultSize: true,\n          children: nextButtonText\n        }), !canGoForward && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__finish-button\",\n          variant: \"primary\",\n          onClick: onFinish,\n          __next40pxDefaultSize: true,\n          children: finishButtonText\n        })]\n      })]\n    })\n  });\n}\nexport default Guide;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/higher-order/navigate-regions/index.mjs

@@ -26,8 +26,7 @@ function useNavigateRegions(shortcuts = defaultShortcuts) {
   const ref = useRef(null);
   const [isFocusingRegions, setIsFocusingRegions] = 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 : []);
+    const regions = Array.from(ref.current?.querySelectorAll('[role="region"][tabindex="-1"]') ?? []);
     if (!regions.length) {
       return;
     }
@@ -74,15 +73,17 @@ function useNavigateRegions(shortcuts = defaultShortcuts) {
     }
   };
 }
-var navigate_regions_default = createHigherOrderComponent((Component) => ({
+var navigate_regions_default = createHigherOrderComponent((Component) => function NavigateRegions({
   shortcuts,
   ...props
-}) => /* @__PURE__ */ _jsx("div", {
-  ...useNavigateRegions(shortcuts),
-  children: /* @__PURE__ */ _jsx(Component, {
-    ...props
-  })
-}), "navigateRegions");
+}) {
+  return /* @__PURE__ */ _jsx("div", {
+    ...useNavigateRegions(shortcuts),
+    children: /* @__PURE__ */ _jsx(Component, {
+      ...props
+    })
+  });
+}, "navigateRegions");
 export {
   navigate_regions_default as default,
   useNavigateRegions

package/build-module/higher-order/navigate-regions/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/higher-order/navigate-regions/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport { createHigherOrderComponent, useRefEffect, useMergeRefs } from '@wordpress/compose';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst defaultShortcuts = {\n  previous: [{\n    modifier: 'ctrlShift',\n    character: '`'\n  }, {\n    modifier: 'ctrlShift',\n    character: '~'\n  }, {\n    modifier: 'access',\n    character: 'p'\n  }],\n  next: [{\n    modifier: 'ctrl',\n    character: '`'\n  }, {\n    modifier: 'access',\n    character: 'n'\n  }]\n};\nexport function useNavigateRegions(shortcuts = defaultShortcuts) {\n  const ref = useRef(null);\n  const [isFocusingRegions, setIsFocusingRegions] = useState(false);\n  function focusRegion(offset) {\n    var _ref$current$querySel;\n    const regions = Array.from((_ref$current$querySel = ref.current?.querySelectorAll('[role=\"region\"][tabindex=\"-1\"]')) !== null && _ref$current$querySel !== void 0 ? _ref$current$querySel : []);\n    if (!regions.length) {\n      return;\n    }\n    let nextRegion = regions[0];\n    // 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    const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role=\"region\"][tabindex=\"-1\"]');\n    const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1;\n    if (selectedIndex !== -1) {\n      let nextIndex = selectedIndex + offset;\n      nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;\n      nextIndex = nextIndex === regions.length ? 0 : nextIndex;\n      nextRegion = regions[nextIndex];\n    }\n    nextRegion.focus();\n    setIsFocusingRegions(true);\n  }\n  const clickRef = useRefEffect(element => {\n    function onClick() {\n      setIsFocusingRegions(false);\n    }\n    element.addEventListener('click', onClick);\n    return () => {\n      element.removeEventListener('click', onClick);\n    };\n  }, [setIsFocusingRegions]);\n  return {\n    ref: useMergeRefs([ref, clickRef]),\n    className: isFocusingRegions ? 'is-focusing-regions' : '',\n    onKeyDown(event) {\n      if (shortcuts.previous.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(-1);\n      } else if (shortcuts.next.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(1);\n      }\n    }\n  };\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(Component => ({\n  shortcuts,\n  ...props\n}) => /*#__PURE__*/_jsx(\"div\", {\n  ...useNavigateRegions(shortcuts),\n  children: /*#__PURE__*/_jsx(Component, {\n    ...props\n  })\n}), 'navigateRegions');"],
-  "mappings": ";AAGA,SAAS,UAAU,cAAc;AACjC,SAAS,4BAA4B,cAAc,oBAAoB;AACvE,SAAS,uBAAuB;AAChC,SAAS,OAAO,YAAY;AAC5B,IAAM,mBAAmB;AAAA,EACvB,UAAU,CAAC;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AAAA,EACD,MAAM,CAAC;AAAA,IACL,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AACH;AACO,SAAS,mBAAmB,YAAY,kBAAkB;AAC/D,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,WAAS,YAAY,QAAQ;AAC3B,QAAI;AACJ,UAAM,UAAU,MAAM,MAAM,wBAAwB,IAAI,SAAS,iBAAiB,gCAAgC,OAAO,QAAQ,0BAA0B,SAAS,wBAAwB,CAAC,CAAC;AAC9L,QAAI,CAAC,QAAQ,QAAQ;AACnB;AAAA,IACF;AACA,QAAI,aAAa,QAAQ,CAAC;AAE1B,UAAM,iBAAiB,IAAI,SAAS,eAAe,eAAe,QAAQ,gCAAgC;AAC1G,UAAM,gBAAgB,iBAAiB,QAAQ,QAAQ,cAAc,IAAI;AACzE,QAAI,kBAAkB,IAAI;AACxB,UAAI,YAAY,gBAAgB;AAChC,kBAAY,cAAc,KAAK,QAAQ,SAAS,IAAI;AACpD,kBAAY,cAAc,QAAQ,SAAS,IAAI;AAC/C,mBAAa,QAAQ,SAAS;AAAA,IAChC;AACA,eAAW,MAAM;AACjB,yBAAqB,IAAI;AAAA,EAC3B;AACA,QAAM,WAAW,aAAa,aAAW;AACvC,aAAS,UAAU;AACjB,2BAAqB,KAAK;AAAA,IAC5B;AACA,YAAQ,iBAAiB,SAAS,OAAO;AACzC,WAAO,MAAM;AACX,cAAQ,oBAAoB,SAAS,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,oBAAoB,CAAC;AACzB,SAAO;AAAA,IACL,KAAK,aAAa,CAAC,KAAK,QAAQ,CAAC;AAAA,IACjC,WAAW,oBAAoB,wBAAwB;AAAA,IACvD,UAAU,OAAO;AACf,UAAI,UAAU,SAAS,KAAK,CAAC;AAAA,QAC3B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gBAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,EAAE;AAAA,MAChB,WAAW,UAAU,KAAK,KAAK,CAAC;AAAA,QAC9B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gBAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,CAAC;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AA4BA,IAAO,2BAAQ,2BAA2B,eAAa,CAAC;AAAA,EACtD;AAAA,EACA,GAAG;AACL,MAAmB,qBAAK,OAAO;AAAA,EAC7B,GAAG,mBAAmB,SAAS;AAAA,EAC/B,UAAuB,qBAAK,WAAW;AAAA,IACrC,GAAG;AAAA,EACL,CAAC;AACH,CAAC,GAAG,iBAAiB;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport { createHigherOrderComponent, useRefEffect, useMergeRefs } from '@wordpress/compose';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst defaultShortcuts = {\n  previous: [{\n    modifier: 'ctrlShift',\n    character: '`'\n  }, {\n    modifier: 'ctrlShift',\n    character: '~'\n  }, {\n    modifier: 'access',\n    character: 'p'\n  }],\n  next: [{\n    modifier: 'ctrl',\n    character: '`'\n  }, {\n    modifier: 'access',\n    character: 'n'\n  }]\n};\nexport function useNavigateRegions(shortcuts = defaultShortcuts) {\n  const ref = useRef(null);\n  const [isFocusingRegions, setIsFocusingRegions] = useState(false);\n  function focusRegion(offset) {\n    const regions = Array.from(ref.current?.querySelectorAll('[role=\"region\"][tabindex=\"-1\"]') ?? []);\n    if (!regions.length) {\n      return;\n    }\n    let nextRegion = regions[0];\n    // 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    const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role=\"region\"][tabindex=\"-1\"]');\n    const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1;\n    if (selectedIndex !== -1) {\n      let nextIndex = selectedIndex + offset;\n      nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;\n      nextIndex = nextIndex === regions.length ? 0 : nextIndex;\n      nextRegion = regions[nextIndex];\n    }\n    nextRegion.focus();\n    setIsFocusingRegions(true);\n  }\n  const clickRef = useRefEffect(element => {\n    function onClick() {\n      setIsFocusingRegions(false);\n    }\n    element.addEventListener('click', onClick);\n    return () => {\n      element.removeEventListener('click', onClick);\n    };\n  }, [setIsFocusingRegions]);\n  return {\n    ref: useMergeRefs([ref, clickRef]),\n    className: isFocusingRegions ? 'is-focusing-regions' : '',\n    onKeyDown(event) {\n      if (shortcuts.previous.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(-1);\n      } else if (shortcuts.next.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(1);\n      }\n    }\n  };\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(Component => function NavigateRegions({\n  shortcuts,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...useNavigateRegions(shortcuts),\n    children: /*#__PURE__*/_jsx(Component, {\n      ...props\n    })\n  });\n}, 'navigateRegions');"],
+  "mappings": ";AAGA,SAAS,UAAU,cAAc;AACjC,SAAS,4BAA4B,cAAc,oBAAoB;AACvE,SAAS,uBAAuB;AAChC,SAAS,OAAO,YAAY;AAC5B,IAAM,mBAAmB;AAAA,EACvB,UAAU,CAAC;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AAAA,EACD,MAAM,CAAC;AAAA,IACL,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AACH;AACO,SAAS,mBAAmB,YAAY,kBAAkB;AAC/D,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,WAAS,YAAY,QAAQ;AAC3B,UAAM,UAAU,MAAM,KAAK,IAAI,SAAS,iBAAiB,gCAAgC,KAAK,CAAC,CAAC;AAChG,QAAI,CAAC,QAAQ,QAAQ;AACnB;AAAA,IACF;AACA,QAAI,aAAa,QAAQ,CAAC;AAE1B,UAAM,iBAAiB,IAAI,SAAS,eAAe,eAAe,QAAQ,gCAAgC;AAC1G,UAAM,gBAAgB,iBAAiB,QAAQ,QAAQ,cAAc,IAAI;AACzE,QAAI,kBAAkB,IAAI;AACxB,UAAI,YAAY,gBAAgB;AAChC,kBAAY,cAAc,KAAK,QAAQ,SAAS,IAAI;AACpD,kBAAY,cAAc,QAAQ,SAAS,IAAI;AAC/C,mBAAa,QAAQ,SAAS;AAAA,IAChC;AACA,eAAW,MAAM;AACjB,yBAAqB,IAAI;AAAA,EAC3B;AACA,QAAM,WAAW,aAAa,aAAW;AACvC,aAAS,UAAU;AACjB,2BAAqB,KAAK;AAAA,IAC5B;AACA,YAAQ,iBAAiB,SAAS,OAAO;AACzC,WAAO,MAAM;AACX,cAAQ,oBAAoB,SAAS,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,oBAAoB,CAAC;AACzB,SAAO;AAAA,IACL,KAAK,aAAa,CAAC,KAAK,QAAQ,CAAC;AAAA,IACjC,WAAW,oBAAoB,wBAAwB;AAAA,IACvD,UAAU,OAAO;AACf,UAAI,UAAU,SAAS,KAAK,CAAC;AAAA,QAC3B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gBAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,EAAE;AAAA,MAChB,WAAW,UAAU,KAAK,KAAK,CAAC;AAAA,QAC9B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gBAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,CAAC;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AA4BA,IAAO,2BAAQ,2BAA2B,eAAa,SAAS,gBAAgB;AAAA,EAC9E;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG,mBAAmB,SAAS;AAAA,IAC/B,UAAuB,qBAAK,WAAW;AAAA,MACrC,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH,GAAG,iBAAiB;",
   "names": []
 }

package/build-module/higher-order/with-fallback-styles/index.mjs

@@ -4,7 +4,7 @@ import { Component } from "@wordpress/element";
 import { createHigherOrderComponent } from "@wordpress/compose";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var with_fallback_styles_default = (mapNodeToProps) => createHigherOrderComponent((WrappedComponent) => {
-  return class extends Component {
+  return class WithFallbackStyles extends Component {
     constructor(props) {
       super(props);
       this.nodeRef = this.props.node;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/higher-order/with-fallback-styles/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default mapNodeToProps => createHigherOrderComponent(WrappedComponent => {\n  return class extends Component {\n    constructor(props) {\n      super(props);\n      this.nodeRef = this.props.node;\n      this.state = {\n        fallbackStyles: undefined,\n        grabStylesCompleted: false\n      };\n      this.bindRef = this.bindRef.bind(this);\n    }\n    bindRef(node) {\n      if (!node) {\n        return;\n      }\n      this.nodeRef = node;\n    }\n    componentDidMount() {\n      this.grabFallbackStyles();\n    }\n    componentDidUpdate() {\n      this.grabFallbackStyles();\n    }\n    grabFallbackStyles() {\n      const {\n        grabStylesCompleted,\n        fallbackStyles\n      } = this.state;\n      if (this.nodeRef && !grabStylesCompleted) {\n        const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props);\n        if (!fastDeepEqual(newFallbackStyles, fallbackStyles)) {\n          this.setState({\n            fallbackStyles: newFallbackStyles,\n            grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)\n          });\n        }\n      }\n    }\n    render() {\n      const wrappedComponent = /*#__PURE__*/_jsx(WrappedComponent, {\n        ...this.props,\n        ...this.state.fallbackStyles\n      });\n      return this.props.node ? wrappedComponent : /*#__PURE__*/_jsxs(\"div\", {\n        ref: this.bindRef,\n        children: [\" \", wrappedComponent, \" \"]\n      });\n    }\n  };\n}, 'withFallbackStyles');"],
-  "mappings": ";AAGA,OAAO,mBAAmB;AAK1B,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAC3C,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAO,+BAAQ,oBAAkB,2BAA2B,sBAAoB;AAC9E,SAAO,cAAc,UAAU;AAAA,IAC7B,YAAY,OAAO;AACjB,YAAM,KAAK;AACX,WAAK,UAAU,KAAK,MAAM;AAC1B,WAAK,QAAQ;AAAA,QACX,gBAAgB;AAAA,QAChB,qBAAqB;AAAA,MACvB;AACA,WAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AAAA,IACvC;AAAA,IACA,QAAQ,MAAM;AACZ,UAAI,CAAC,MAAM;AACT;AAAA,MACF;AACA,WAAK,UAAU;AAAA,IACjB;AAAA,IACA,oBAAoB;AAClB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,MACF,IAAI,KAAK;AACT,UAAI,KAAK,WAAW,CAAC,qBAAqB;AACxC,cAAM,oBAAoB,eAAe,KAAK,SAAS,KAAK,KAAK;AACjE,YAAI,CAAC,cAAc,mBAAmB,cAAc,GAAG;AACrD,eAAK,SAAS;AAAA,YACZ,gBAAgB;AAAA,YAChB,qBAAqB,OAAO,OAAO,iBAAiB,EAAE,MAAM,OAAO;AAAA,UACrE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AACP,YAAM,mBAAgC,qBAAK,kBAAkB;AAAA,QAC3D,GAAG,KAAK;AAAA,QACR,GAAG,KAAK,MAAM;AAAA,MAChB,CAAC;AACD,aAAO,KAAK,MAAM,OAAO,mBAAgC,sBAAM,OAAO;AAAA,QACpE,KAAK,KAAK;AAAA,QACV,UAAU,CAAC,KAAK,kBAAkB,GAAG;AAAA,MACvC,CAAC;AAAA,IACH;AAAA,EACF;AACF,GAAG,oBAAoB;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default mapNodeToProps => createHigherOrderComponent(WrappedComponent => {\n  return class WithFallbackStyles extends Component {\n    constructor(props) {\n      super(props);\n      this.nodeRef = this.props.node;\n      this.state = {\n        fallbackStyles: undefined,\n        grabStylesCompleted: false\n      };\n      this.bindRef = this.bindRef.bind(this);\n    }\n    bindRef(node) {\n      if (!node) {\n        return;\n      }\n      this.nodeRef = node;\n    }\n    componentDidMount() {\n      this.grabFallbackStyles();\n    }\n    componentDidUpdate() {\n      this.grabFallbackStyles();\n    }\n    grabFallbackStyles() {\n      const {\n        grabStylesCompleted,\n        fallbackStyles\n      } = this.state;\n      if (this.nodeRef && !grabStylesCompleted) {\n        const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props);\n        if (!fastDeepEqual(newFallbackStyles, fallbackStyles)) {\n          this.setState({\n            fallbackStyles: newFallbackStyles,\n            grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)\n          });\n        }\n      }\n    }\n    render() {\n      const wrappedComponent = /*#__PURE__*/_jsx(WrappedComponent, {\n        ...this.props,\n        ...this.state.fallbackStyles\n      });\n      return this.props.node ? wrappedComponent : /*#__PURE__*/_jsxs(\"div\", {\n        ref: this.bindRef,\n        children: [\" \", wrappedComponent, \" \"]\n      });\n    }\n  };\n}, 'withFallbackStyles');"],
+  "mappings": ";AAGA,OAAO,mBAAmB;AAK1B,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAC3C,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAO,+BAAQ,oBAAkB,2BAA2B,sBAAoB;AAC9E,SAAO,MAAM,2BAA2B,UAAU;AAAA,IAChD,YAAY,OAAO;AACjB,YAAM,KAAK;AACX,WAAK,UAAU,KAAK,MAAM;AAC1B,WAAK,QAAQ;AAAA,QACX,gBAAgB;AAAA,QAChB,qBAAqB;AAAA,MACvB;AACA,WAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AAAA,IACvC;AAAA,IACA,QAAQ,MAAM;AACZ,UAAI,CAAC,MAAM;AACT;AAAA,MACF;AACA,WAAK,UAAU;AAAA,IACjB;AAAA,IACA,oBAAoB;AAClB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,MACF,IAAI,KAAK;AACT,UAAI,KAAK,WAAW,CAAC,qBAAqB;AACxC,cAAM,oBAAoB,eAAe,KAAK,SAAS,KAAK,KAAK;AACjE,YAAI,CAAC,cAAc,mBAAmB,cAAc,GAAG;AACrD,eAAK,SAAS;AAAA,YACZ,gBAAgB;AAAA,YAChB,qBAAqB,OAAO,OAAO,iBAAiB,EAAE,MAAM,OAAO;AAAA,UACrE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AACP,YAAM,mBAAgC,qBAAK,kBAAkB;AAAA,QAC3D,GAAG,KAAK;AAAA,QACR,GAAG,KAAK,MAAM;AAAA,MAChB,CAAC;AACD,aAAO,KAAK,MAAM,OAAO,mBAAgC,sBAAM,OAAO;AAAA,QACpE,KAAK,KAAK;AAAA,QACV,UAAU,CAAC,KAAK,kBAAkB,GAAG;AAAA,MACvC,CAAC;AAAA,IACH;AAAA,EACF;AACF,GAAG,oBAAoB;",
   "names": []
 }

package/build-module/higher-order/with-focus-outside/index.mjs

@@ -2,7 +2,7 @@
 import { useCallback, useState } from "@wordpress/element";
 import { createHigherOrderComponent, __experimentalUseFocusOutside as useFocusOutside } from "@wordpress/compose";
 import { jsx as _jsx } from "react/jsx-runtime";
-var with_focus_outside_default = createHigherOrderComponent((WrappedComponent) => (props) => {
+var with_focus_outside_default = createHigherOrderComponent((WrappedComponent) => function WithFocusOutside(props) {
   const [handleFocusOutside, setHandleFocusOutside] = useState(void 0);
   const bindFocusOutsideHandler = useCallback((node) => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : void 0), []);
   return /* @__PURE__ */ _jsx("div", {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/higher-order/with-focus-outside/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useState } from '@wordpress/element';\nimport { createHigherOrderComponent, __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createHigherOrderComponent(WrappedComponent => props => {\n  const [handleFocusOutside, setHandleFocusOutside] = useState(undefined);\n  const bindFocusOutsideHandler = useCallback(node => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...useFocusOutside(handleFocusOutside),\n    children: /*#__PURE__*/_jsx(WrappedComponent, {\n      ref: bindFocusOutsideHandler,\n      ...props\n    })\n  });\n}, 'withFocusOutside');"],
-  "mappings": ";AAGA,SAAS,aAAa,gBAAgB;AACtC,SAAS,4BAA4B,iCAAiC,uBAAuB;AAC7F,SAAS,OAAO,YAAY;AAC5B,IAAO,6BAAQ,2BAA2B,sBAAoB,WAAS;AACrE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,MAAS;AACtE,QAAM,0BAA0B,YAAY,UAAQ,sBAAsB,MAAM,MAAM,qBAAqB,KAAK,mBAAmB,KAAK,IAAI,IAAI,MAAS,GAAG,CAAC,CAAC;AAC9J,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG,gBAAgB,kBAAkB;AAAA,IACrC,UAAuB,qBAAK,kBAAkB;AAAA,MAC5C,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH,GAAG,kBAAkB;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useState } from '@wordpress/element';\nimport { createHigherOrderComponent, __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createHigherOrderComponent(WrappedComponent => function WithFocusOutside(props) {\n  const [handleFocusOutside, setHandleFocusOutside] = useState(undefined);\n  const bindFocusOutsideHandler = useCallback(node => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...useFocusOutside(handleFocusOutside),\n    children: /*#__PURE__*/_jsx(WrappedComponent, {\n      ref: bindFocusOutsideHandler,\n      ...props\n    })\n  });\n}, 'withFocusOutside');"],
+  "mappings": ";AAGA,SAAS,aAAa,gBAAgB;AACtC,SAAS,4BAA4B,iCAAiC,uBAAuB;AAC7F,SAAS,OAAO,YAAY;AAC5B,IAAO,6BAAQ,2BAA2B,sBAAoB,SAAS,iBAAiB,OAAO;AAC7F,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,MAAS;AACtE,QAAM,0BAA0B,YAAY,UAAQ,sBAAsB,MAAM,MAAM,qBAAqB,KAAK,mBAAmB,KAAK,IAAI,IAAI,MAAS,GAAG,CAAC,CAAC;AAC9J,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG,gBAAgB,kBAAkB;AAAA,IACrC,UAAuB,qBAAK,kBAAkB;AAAA,MAC5C,KAAK;AAAA,MACL,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH,GAAG,kBAAkB;",
   "names": []
 }

package/build-module/higher-order/with-spoken-messages/index.mjs

@@ -2,11 +2,13 @@
 import { createHigherOrderComponent, useDebounce } from "@wordpress/compose";
 import { speak } from "@wordpress/a11y";
 import { jsx as _jsx } from "react/jsx-runtime";
-var with_spoken_messages_default = createHigherOrderComponent((Component) => (props) => /* @__PURE__ */ _jsx(Component, {
-  ...props,
-  speak,
-  debouncedSpeak: useDebounce(speak, 500)
-}), "withSpokenMessages");
+var with_spoken_messages_default = createHigherOrderComponent((Component) => function WithSpokenMessages(props) {
+  return /* @__PURE__ */ _jsx(Component, {
+    ...props,
+    speak,
+    debouncedSpeak: useDebounce(speak, 500)
+  });
+}, "withSpokenMessages");
 export {
   with_spoken_messages_default as default
 };

package/build-module/higher-order/with-spoken-messages/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/higher-order/with-spoken-messages/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/** @typedef {import('react').ComponentType} ComponentType */\n\n/**\n * A Higher Order Component used to provide speak and debounced speak functions.\n *\n * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak\n *\n * @param {ComponentType} Component The component to be wrapped.\n *\n * @return {ComponentType} The wrapped component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createHigherOrderComponent(Component => props => /*#__PURE__*/_jsx(Component, {\n  ...props,\n  speak: speak,\n  debouncedSpeak: useDebounce(speak, 500)\n}), 'withSpokenMessages');"],
-  "mappings": ";AAGA,SAAS,4BAA4B,mBAAmB;AACxD,SAAS,aAAa;AAatB,SAAS,OAAO,YAAY;AAC5B,IAAO,+BAAQ,2BAA2B,eAAa,WAAsB,qBAAK,WAAW;AAAA,EAC3F,GAAG;AAAA,EACH;AAAA,EACA,gBAAgB,YAAY,OAAO,GAAG;AACxC,CAAC,GAAG,oBAAoB;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/** @typedef {import('react').ComponentType} ComponentType */\n\n/**\n * A Higher Order Component used to provide speak and debounced speak functions.\n *\n * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak\n *\n * @param {ComponentType} Component The component to be wrapped.\n *\n * @return {ComponentType} The wrapped component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createHigherOrderComponent(Component => function WithSpokenMessages(props) {\n  return /*#__PURE__*/_jsx(Component, {\n    ...props,\n    speak: speak,\n    debouncedSpeak: useDebounce(speak, 500)\n  });\n}, 'withSpokenMessages');"],
+  "mappings": ";AAGA,SAAS,4BAA4B,mBAAmB;AACxD,SAAS,aAAa;AAatB,SAAS,OAAO,YAAY;AAC5B,IAAO,+BAAQ,2BAA2B,eAAa,SAAS,mBAAmB,OAAO;AACxF,SAAoB,qBAAK,WAAW;AAAA,IAClC,GAAG;AAAA,IACH;AAAA,IACA,gBAAgB,YAAY,OAAO,GAAG;AAAA,EACxC,CAAC;AACH,GAAG,oBAAoB;",
   "names": []
 }

package/build-module/input-control/index.mjs

@@ -96,6 +96,7 @@ function UnforwardedInputControl(props, ref) {
   });
 }
 var InputControl = forwardRef(UnforwardedInputControl);
+InputControl.displayName = "InputControl";
 var input_control_default = InputControl;
 export {
   InputControl,

package/build-module/input-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/input-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InputBase from './input-base';\nimport InputField from './input-field';\nimport { space } from '../utils/space';\nimport { useDraft } from './utils';\nimport BaseControl from '../base-control';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(InputControl);\n  const id = `inspector-input-control-${instanceId}`;\n  return idProp || id;\n}\nexport function UnforwardedInputControl(props, ref) {\n  const {\n    __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize,\n    __unstableStateReducer: stateReducer = state => state,\n    __unstableInputWidth,\n    className,\n    disabled = false,\n    help,\n    hideLabelFromVision = false,\n    id: idProp,\n    isPressEnterToChange = false,\n    label,\n    labelPosition = 'top',\n    onChange = noop,\n    onValidate = noop,\n    onKeyDown = noop,\n    prefix,\n    size = 'default',\n    style,\n    suffix,\n    value,\n    ...restProps\n  } = useDeprecated36pxDefaultSizeProp(props);\n  const id = useUniqueId(idProp);\n  const classes = clsx('components-input-control', className);\n  const draftHookProps = useDraft({\n    value,\n    onBlur: restProps.onBlur,\n    onChange\n  });\n  const helpProp = !!help ? {\n    'aria-describedby': `${id}__help`\n  } : {};\n  maybeWarnDeprecated36pxSize({\n    componentName: 'InputControl',\n    __next40pxDefaultSize,\n    size,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    className: classes,\n    help: help,\n    id: id,\n    children: /*#__PURE__*/_jsx(InputBase, {\n      __next40pxDefaultSize: __next40pxDefaultSize,\n      __unstableInputWidth: __unstableInputWidth,\n      disabled: disabled,\n      gap: 3,\n      hideLabelFromVision: hideLabelFromVision,\n      id: id,\n      justify: \"left\",\n      label: label,\n      labelPosition: labelPosition,\n      prefix: prefix,\n      size: size,\n      style: style,\n      suffix: suffix,\n      children: /*#__PURE__*/_jsx(InputField, {\n        ...restProps,\n        ...helpProp,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        className: \"components-input-control__input\",\n        disabled: disabled,\n        id: id,\n        isPressEnterToChange: isPressEnterToChange,\n        onKeyDown: onKeyDown,\n        onValidate: onValidate,\n        paddingInlineStart: prefix ? space(1) : undefined,\n        paddingInlineEnd: suffix ? space(1) : undefined,\n        ref: ref,\n        size: size,\n        stateReducer: stateReducer,\n        ...draftHookProps\n      })\n    })\n  });\n}\n\n/**\n * InputControl components let users enter and edit text. This is an experimental component\n * intended to (in time) merge with or replace `TextControl`.\n *\n * ```jsx\n * import { __experimentalInputControl as InputControl } from '@wordpress/components';\n * import { useState } from 'react';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '' );\n *\n *   return (\n *  \t<InputControl\n * \t\t\t__next40pxDefaultSize\n *  \t\tvalue={ value }\n *  \t\tonChange={ ( nextValue ) => setValue( nextValue ?? '' ) }\n *  \t/>\n *   );\n * };\n * ```\n */\nexport const InputControl = forwardRef(UnforwardedInputControl);\nexport default InputControl;"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAK3B,OAAO,eAAe;AACtB,OAAO,gBAAgB;AACvB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,OAAO,iBAAiB;AACxB,SAAS,wCAAwC;AACjD,SAAS,mCAAmC;AAC5C,SAAS,OAAO,YAAY;AAC5B,IAAM,OAAO,MAAM;AAAC;AACpB,SAAS,YAAY,QAAQ;AAC3B,QAAM,aAAa,cAAc,YAAY;AAC7C,QAAM,KAAK,2BAA2B,UAAU;AAChD,SAAO,UAAU;AACnB;AACO,SAAS,wBAAwB,OAAO,KAAK;AAClD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,wBAAwB,eAAe,WAAS;AAAA,IAChD;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,sBAAsB;AAAA,IACtB,IAAI;AAAA,IACJ,uBAAuB;AAAA,IACvB;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iCAAiC,KAAK;AAC1C,QAAM,KAAK,YAAY,MAAM;AAC7B,QAAM,UAAU,KAAK,4BAA4B,SAAS;AAC1D,QAAM,iBAAiB,SAAS;AAAA,IAC9B;AAAA,IACA,QAAQ,UAAU;AAAA,IAClB;AAAA,EACF,CAAC;AACD,QAAM,WAAW,CAAC,CAAC,OAAO;AAAA,IACxB,oBAAoB,GAAG,EAAE;AAAA,EAC3B,IAAI,CAAC;AACL,8BAA4B;AAAA,IAC1B,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAoB,qBAAK,aAAa;AAAA,IACpC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,UAAuB,qBAAK,WAAW;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAuB,qBAAK,YAAY;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,QACH;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAoB,SAAS,MAAM,CAAC,IAAI;AAAA,QACxC,kBAAkB,SAAS,MAAM,CAAC,IAAI;AAAA,QACtC;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAuBO,IAAM,eAAe,WAAW,uBAAuB;AAC9D,IAAO,wBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InputBase from './input-base';\nimport InputField from './input-field';\nimport { space } from '../utils/space';\nimport { useDraft } from './utils';\nimport BaseControl from '../base-control';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(InputControl);\n  const id = `inspector-input-control-${instanceId}`;\n  return idProp || id;\n}\nexport function UnforwardedInputControl(props, ref) {\n  const {\n    __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize,\n    __unstableStateReducer: stateReducer = state => state,\n    __unstableInputWidth,\n    className,\n    disabled = false,\n    help,\n    hideLabelFromVision = false,\n    id: idProp,\n    isPressEnterToChange = false,\n    label,\n    labelPosition = 'top',\n    onChange = noop,\n    onValidate = noop,\n    onKeyDown = noop,\n    prefix,\n    size = 'default',\n    style,\n    suffix,\n    value,\n    ...restProps\n  } = useDeprecated36pxDefaultSizeProp(props);\n  const id = useUniqueId(idProp);\n  const classes = clsx('components-input-control', className);\n  const draftHookProps = useDraft({\n    value,\n    onBlur: restProps.onBlur,\n    onChange\n  });\n  const helpProp = !!help ? {\n    'aria-describedby': `${id}__help`\n  } : {};\n  maybeWarnDeprecated36pxSize({\n    componentName: 'InputControl',\n    __next40pxDefaultSize,\n    size,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  return /*#__PURE__*/_jsx(BaseControl, {\n    className: classes,\n    help: help,\n    id: id,\n    children: /*#__PURE__*/_jsx(InputBase, {\n      __next40pxDefaultSize: __next40pxDefaultSize,\n      __unstableInputWidth: __unstableInputWidth,\n      disabled: disabled,\n      gap: 3,\n      hideLabelFromVision: hideLabelFromVision,\n      id: id,\n      justify: \"left\",\n      label: label,\n      labelPosition: labelPosition,\n      prefix: prefix,\n      size: size,\n      style: style,\n      suffix: suffix,\n      children: /*#__PURE__*/_jsx(InputField, {\n        ...restProps,\n        ...helpProp,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        className: \"components-input-control__input\",\n        disabled: disabled,\n        id: id,\n        isPressEnterToChange: isPressEnterToChange,\n        onKeyDown: onKeyDown,\n        onValidate: onValidate,\n        paddingInlineStart: prefix ? space(1) : undefined,\n        paddingInlineEnd: suffix ? space(1) : undefined,\n        ref: ref,\n        size: size,\n        stateReducer: stateReducer,\n        ...draftHookProps\n      })\n    })\n  });\n}\n\n/**\n * InputControl components let users enter and edit text. This is an experimental component\n * intended to (in time) merge with or replace `TextControl`.\n *\n * ```jsx\n * import { __experimentalInputControl as InputControl } from '@wordpress/components';\n * import { useState } from 'react';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '' );\n *\n *   return (\n *  \t<InputControl\n * \t\t\t__next40pxDefaultSize\n *  \t\tvalue={ value }\n *  \t\tonChange={ ( nextValue ) => setValue( nextValue ?? '' ) }\n *  \t/>\n *   );\n * };\n * ```\n */\nexport const InputControl = forwardRef(UnforwardedInputControl);\nInputControl.displayName = 'InputControl';\nexport default InputControl;"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAK3B,OAAO,eAAe;AACtB,OAAO,gBAAgB;AACvB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,OAAO,iBAAiB;AACxB,SAAS,wCAAwC;AACjD,SAAS,mCAAmC;AAC5C,SAAS,OAAO,YAAY;AAC5B,IAAM,OAAO,MAAM;AAAC;AACpB,SAAS,YAAY,QAAQ;AAC3B,QAAM,aAAa,cAAc,YAAY;AAC7C,QAAM,KAAK,2BAA2B,UAAU;AAChD,SAAO,UAAU;AACnB;AACO,SAAS,wBAAwB,OAAO,KAAK;AAClD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,wBAAwB,eAAe,WAAS;AAAA,IAChD;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,sBAAsB;AAAA,IACtB,IAAI;AAAA,IACJ,uBAAuB;AAAA,IACvB;AAAA,IACA,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,aAAa;AAAA,IACb,YAAY;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iCAAiC,KAAK;AAC1C,QAAM,KAAK,YAAY,MAAM;AAC7B,QAAM,UAAU,KAAK,4BAA4B,SAAS;AAC1D,QAAM,iBAAiB,SAAS;AAAA,IAC9B;AAAA,IACA,QAAQ,UAAU;AAAA,IAClB;AAAA,EACF,CAAC;AACD,QAAM,WAAW,CAAC,CAAC,OAAO;AAAA,IACxB,oBAAoB,GAAG,EAAE;AAAA,EAC3B,IAAI,CAAC;AACL,8BAA4B;AAAA,IAC1B,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAoB,qBAAK,aAAa;AAAA,IACpC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,UAAuB,qBAAK,WAAW;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAuB,qBAAK,YAAY;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,QACH;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAoB,SAAS,MAAM,CAAC,IAAI;AAAA,QACxC,kBAAkB,SAAS,MAAM,CAAC,IAAI;AAAA,QACtC;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAuBO,IAAM,eAAe,WAAW,uBAAuB;AAC9D,aAAa,cAAc;AAC3B,IAAO,wBAAQ;",
   "names": []
 }

package/build-module/input-control/input-field.mjs

@@ -149,7 +149,7 @@ function InputField({
     onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),
     ref,
     inputSize: size,
-    value: value !== null && value !== void 0 ? value : "",
+    value: value ?? "",
     type
   });
 }

package/build-module/input-control/input-field.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/input-control/input-field.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { useDrag } from '@use-gesture/react';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\n\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction InputField({\n  disabled = false,\n  dragDirection = 'n',\n  dragThreshold = 10,\n  id,\n  isDragEnabled = false,\n  isPressEnterToChange = false,\n  onBlur = noop,\n  onChange = noop,\n  onDrag = noop,\n  onDragEnd = noop,\n  onDragStart = noop,\n  onKeyDown = noop,\n  onValidate = noop,\n  size = 'default',\n  stateReducer = state => state,\n  value: valueProp,\n  type,\n  ...props\n}, ref) {\n  const {\n    // State.\n    state,\n    // Actions.\n    change,\n    commit,\n    drag,\n    dragEnd,\n    dragStart,\n    invalidate,\n    pressDown,\n    pressEnter,\n    pressUp,\n    reset\n  } = useInputControlStateReducer(stateReducer, {\n    isDragEnabled,\n    value: valueProp,\n    isPressEnterToChange\n  }, onChange);\n  const {\n    value,\n    isDragging,\n    isDirty\n  } = state;\n  const wasDirtyOnBlur = useRef(false);\n  const dragCursor = useDragCursor(isDragging, dragDirection);\n  const handleOnBlur = event => {\n    onBlur(event);\n\n    /**\n     * If isPressEnterToChange is set, this commits the value to\n     * the onChange callback.\n     */\n    if (isDirty || !event.target.validity.valid) {\n      wasDirtyOnBlur.current = true;\n      handleOnCommit(event);\n    }\n  };\n  const handleOnChange = event => {\n    const nextValue = event.target.value;\n    change(nextValue, event);\n  };\n  const handleOnCommit = event => {\n    const nextValue = event.currentTarget.value;\n    try {\n      onValidate(nextValue);\n      commit(nextValue, event);\n    } catch (err) {\n      invalidate(err, event);\n    }\n  };\n  const handleOnKeyDown = event => {\n    const {\n      key\n    } = event;\n    onKeyDown(event);\n    switch (key) {\n      case 'ArrowUp':\n        pressUp(event);\n        break;\n      case 'ArrowDown':\n        pressDown(event);\n        break;\n      case 'Enter':\n        pressEnter(event);\n        if (isPressEnterToChange) {\n          event.preventDefault();\n          handleOnCommit(event);\n        }\n        break;\n      case 'Escape':\n        if (isPressEnterToChange && isDirty) {\n          event.preventDefault();\n          reset(valueProp, event);\n        }\n        break;\n    }\n  };\n  const dragGestureProps = useDrag(dragProps => {\n    const {\n      distance,\n      dragging,\n      event,\n      target\n    } = dragProps;\n\n    // The `target` prop always references the `input` element while, by\n    // default, the `dragProps.event.target` property would reference the real\n    // event target (i.e. any DOM element that the pointer is hovering while\n    // dragging). Ensuring that the `target` is always the `input` element\n    // allows consumers of `InputControl` (or any higher-level control) to\n    // check the input's validity by accessing `event.target.validity.valid`.\n    dragProps.event = {\n      ...dragProps.event,\n      target\n    };\n    if (!distance) {\n      return;\n    }\n    event.stopPropagation();\n\n    /**\n     * Quick return if no longer dragging.\n     * This prevents unnecessary value calculations.\n     */\n    if (!dragging) {\n      onDragEnd(dragProps);\n      dragEnd(dragProps);\n      return;\n    }\n    onDrag(dragProps);\n    drag(dragProps);\n    if (!isDragging) {\n      onDragStart(dragProps);\n      dragStart(dragProps);\n    }\n  }, {\n    axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',\n    threshold: dragThreshold,\n    enabled: isDragEnabled,\n    pointer: {\n      capture: false\n    }\n  });\n  const dragProps = isDragEnabled ? dragGestureProps() : {};\n  return /*#__PURE__*/_jsx(Input, {\n    ...props,\n    ...dragProps,\n    className: \"components-input-control__input\",\n    disabled: disabled,\n    dragCursor: dragCursor,\n    isDragging: isDragging,\n    id: id,\n    onBlur: handleOnBlur,\n    onChange: handleOnChange,\n    onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),\n    ref: ref,\n    inputSize: size\n    // Fallback to `''` to avoid \"uncontrolled to controlled\" warning.\n    // See https://github.com/WordPress/gutenberg/pull/47250 for details.\n    ,\n    value: value !== null && value !== void 0 ? value : '',\n    type: type\n  });\n}\nconst ForwardedComponent = forwardRef(InputField);\nexport default ForwardedComponent;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { useDrag } from '@use-gesture/react';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\n\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction InputField({\n  disabled = false,\n  dragDirection = 'n',\n  dragThreshold = 10,\n  id,\n  isDragEnabled = false,\n  isPressEnterToChange = false,\n  onBlur = noop,\n  onChange = noop,\n  onDrag = noop,\n  onDragEnd = noop,\n  onDragStart = noop,\n  onKeyDown = noop,\n  onValidate = noop,\n  size = 'default',\n  stateReducer = state => state,\n  value: valueProp,\n  type,\n  ...props\n}, ref) {\n  const {\n    // State.\n    state,\n    // Actions.\n    change,\n    commit,\n    drag,\n    dragEnd,\n    dragStart,\n    invalidate,\n    pressDown,\n    pressEnter,\n    pressUp,\n    reset\n  } = useInputControlStateReducer(stateReducer, {\n    isDragEnabled,\n    value: valueProp,\n    isPressEnterToChange\n  }, onChange);\n  const {\n    value,\n    isDragging,\n    isDirty\n  } = state;\n  const wasDirtyOnBlur = useRef(false);\n  const dragCursor = useDragCursor(isDragging, dragDirection);\n  const handleOnBlur = event => {\n    onBlur(event);\n\n    /**\n     * If isPressEnterToChange is set, this commits the value to\n     * the onChange callback.\n     */\n    if (isDirty || !event.target.validity.valid) {\n      wasDirtyOnBlur.current = true;\n      handleOnCommit(event);\n    }\n  };\n  const handleOnChange = event => {\n    const nextValue = event.target.value;\n    change(nextValue, event);\n  };\n  const handleOnCommit = event => {\n    const nextValue = event.currentTarget.value;\n    try {\n      onValidate(nextValue);\n      commit(nextValue, event);\n    } catch (err) {\n      invalidate(err, event);\n    }\n  };\n  const handleOnKeyDown = event => {\n    const {\n      key\n    } = event;\n    onKeyDown(event);\n    switch (key) {\n      case 'ArrowUp':\n        pressUp(event);\n        break;\n      case 'ArrowDown':\n        pressDown(event);\n        break;\n      case 'Enter':\n        pressEnter(event);\n        if (isPressEnterToChange) {\n          event.preventDefault();\n          handleOnCommit(event);\n        }\n        break;\n      case 'Escape':\n        if (isPressEnterToChange && isDirty) {\n          event.preventDefault();\n          reset(valueProp, event);\n        }\n        break;\n    }\n  };\n  const dragGestureProps = useDrag(dragProps => {\n    const {\n      distance,\n      dragging,\n      event,\n      target\n    } = dragProps;\n\n    // The `target` prop always references the `input` element while, by\n    // default, the `dragProps.event.target` property would reference the real\n    // event target (i.e. any DOM element that the pointer is hovering while\n    // dragging). Ensuring that the `target` is always the `input` element\n    // allows consumers of `InputControl` (or any higher-level control) to\n    // check the input's validity by accessing `event.target.validity.valid`.\n    dragProps.event = {\n      ...dragProps.event,\n      target\n    };\n    if (!distance) {\n      return;\n    }\n    event.stopPropagation();\n\n    /**\n     * Quick return if no longer dragging.\n     * This prevents unnecessary value calculations.\n     */\n    if (!dragging) {\n      onDragEnd(dragProps);\n      dragEnd(dragProps);\n      return;\n    }\n    onDrag(dragProps);\n    drag(dragProps);\n    if (!isDragging) {\n      onDragStart(dragProps);\n      dragStart(dragProps);\n    }\n  }, {\n    axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',\n    threshold: dragThreshold,\n    enabled: isDragEnabled,\n    pointer: {\n      capture: false\n    }\n  });\n  const dragProps = isDragEnabled ? dragGestureProps() : {};\n  return /*#__PURE__*/_jsx(Input, {\n    ...props,\n    ...dragProps,\n    className: \"components-input-control__input\",\n    disabled: disabled,\n    dragCursor: dragCursor,\n    isDragging: isDragging,\n    id: id,\n    onBlur: handleOnBlur,\n    onChange: handleOnChange,\n    onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),\n    ref: ref,\n    inputSize: size\n    // Fallback to `''` to avoid \"uncontrolled to controlled\" warning.\n    // See https://github.com/WordPress/gutenberg/pull/47250 for details.\n    ,\n    value: value ?? '',\n    type: type\n  });\n}\nconst ForwardedComponent = forwardRef(InputField);\nexport default ForwardedComponent;"],
+  "mappings": "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",
   "names": ["dragProps"]
 }

package/build-module/input-control/reducer/reducer.mjs

@@ -129,19 +129,17 @@ function useInputControlStateReducer(stateReducer = initialStateReducer, initial
   });
   useLayoutEffect(() => {
     if (currentStateRef.current._event !== void 0 && state.value !== refPropsRef.current.value && !state.isDirty) {
-      var _state$value;
-      refPropsRef.current.onChangeHandler((_state$value = state.value) !== null && _state$value !== void 0 ? _state$value : "", {
+      refPropsRef.current.onChangeHandler(state.value ?? "", {
         event: currentStateRef.current._event
       });
     }
   }, [state.value, state.isDirty]);
   useLayoutEffect(() => {
     if (initialState.value !== currentStateRef.current.value && !currentStateRef.current.isDirty) {
-      var _initialState$value;
       dispatch({
         type: actions.CONTROL,
         payload: {
-          value: (_initialState$value = initialState.value) !== null && _initialState$value !== void 0 ? _initialState$value : ""
+          value: initialState.value ?? ""
         }
       });
     }

package/build-module/input-control/reducer/reducer.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/input-control/reducer/reducer.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useReducer, useLayoutEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { initialInputControlState, initialStateReducer } from './state';\nimport * as actions from './actions';\n/**\n * Prepares initialState for the reducer.\n *\n * @param initialState The initial state.\n * @return Prepared initialState for the reducer\n */\nfunction mergeInitialState(initialState = initialInputControlState) {\n  const {\n    value\n  } = initialState;\n  return {\n    ...initialInputControlState,\n    ...initialState,\n    initialValue: value\n  };\n}\n\n/**\n * Creates the base reducer which may be coupled to a specializing reducer.\n * As its final step, for all actions other than CONTROL, the base reducer\n * passes the state and action on through the specializing reducer. The\n * exception for CONTROL actions is because they represent controlled updates\n * from props and no case has yet presented for their specialization.\n *\n * @param composedStateReducers A reducer to specialize state changes.\n * @return The reducer.\n */\nfunction inputControlStateReducer(composedStateReducers) {\n  return (state, action) => {\n    const nextState = {\n      ...state\n    };\n    switch (action.type) {\n      /*\n       * Controlled updates\n       */\n      case actions.CONTROL:\n        nextState.value = action.payload.value;\n        nextState.isDirty = false;\n        nextState._event = undefined;\n        // Returns immediately to avoid invoking additional reducers.\n        return nextState;\n\n      /**\n       * Keyboard events\n       */\n      case actions.PRESS_UP:\n        nextState.isDirty = false;\n        break;\n      case actions.PRESS_DOWN:\n        nextState.isDirty = false;\n        break;\n\n      /**\n       * Drag events\n       */\n      case actions.DRAG_START:\n        nextState.isDragging = true;\n        break;\n      case actions.DRAG_END:\n        nextState.isDragging = false;\n        break;\n\n      /**\n       * Input events\n       */\n      case actions.CHANGE:\n        nextState.error = null;\n        nextState.value = action.payload.value;\n        if (state.isPressEnterToChange) {\n          nextState.isDirty = true;\n        }\n        break;\n      case actions.COMMIT:\n        nextState.value = action.payload.value;\n        nextState.isDirty = false;\n        break;\n      case actions.RESET:\n        nextState.error = null;\n        nextState.isDirty = false;\n        nextState.value = action.payload.value || state.initialValue;\n        break;\n\n      /**\n       * Validation\n       */\n      case actions.INVALIDATE:\n        nextState.error = action.payload.error;\n        break;\n    }\n    nextState._event = action.payload.event;\n\n    /**\n     * Send the nextState + action to the composedReducers via\n     * this \"bridge\" mechanism. This allows external stateReducers\n     * to hook into actions, and modify state if needed.\n     */\n    return composedStateReducers(nextState, action);\n  };\n}\n\n/**\n * A custom hook that connects and external stateReducer with an internal\n * reducer. This hook manages the internal state of InputControl.\n * However, by connecting an external stateReducer function, other\n * components can react to actions as well as modify state before it is\n * applied.\n *\n * This technique uses the \"stateReducer\" design pattern:\n * https://kentcdodds.com/blog/the-state-reducer-pattern/\n *\n * @param stateReducer    An external state reducer.\n * @param initialState    The initial state for the reducer.\n * @param onChangeHandler A handler for the onChange event.\n * @return State, dispatch, and a collection of actions.\n */\nexport function useInputControlStateReducer(stateReducer = initialStateReducer, initialState = initialInputControlState, onChangeHandler) {\n  const [state, dispatch] = useReducer(inputControlStateReducer(stateReducer), mergeInitialState(initialState));\n  const createChangeEvent = type => (nextValue, event) => {\n    dispatch({\n      type,\n      payload: {\n        value: nextValue,\n        event\n      }\n    });\n  };\n  const createKeyEvent = type => event => {\n    dispatch({\n      type,\n      payload: {\n        event\n      }\n    });\n  };\n  const createDragEvent = type => payload => {\n    dispatch({\n      type,\n      payload\n    });\n  };\n\n  /**\n   * Actions for the reducer\n   */\n  const change = createChangeEvent(actions.CHANGE);\n  const invalidate = (error, event) => dispatch({\n    type: actions.INVALIDATE,\n    payload: {\n      error,\n      event\n    }\n  });\n  const reset = createChangeEvent(actions.RESET);\n  const commit = createChangeEvent(actions.COMMIT);\n  const dragStart = createDragEvent(actions.DRAG_START);\n  const drag = createDragEvent(actions.DRAG);\n  const dragEnd = createDragEvent(actions.DRAG_END);\n  const pressUp = createKeyEvent(actions.PRESS_UP);\n  const pressDown = createKeyEvent(actions.PRESS_DOWN);\n  const pressEnter = createKeyEvent(actions.PRESS_ENTER);\n  const currentStateRef = useRef(state);\n  const refPropsRef = useRef({\n    value: initialState.value,\n    onChangeHandler\n  });\n\n  // Freshens refs to props and state so that subsequent effects have access\n  // to their latest values without their changes causing effect runs.\n  useLayoutEffect(() => {\n    currentStateRef.current = state;\n    refPropsRef.current = {\n      value: initialState.value,\n      onChangeHandler\n    };\n  });\n\n  // Propagates the latest state through onChange.\n  useLayoutEffect(() => {\n    if (currentStateRef.current._event !== undefined && state.value !== refPropsRef.current.value && !state.isDirty) {\n      var _state$value;\n      refPropsRef.current.onChangeHandler((_state$value = state.value) !== null && _state$value !== void 0 ? _state$value : '', {\n        event: currentStateRef.current._event\n      });\n    }\n  }, [state.value, state.isDirty]);\n\n  // Updates the state from props.\n  useLayoutEffect(() => {\n    if (initialState.value !== currentStateRef.current.value && !currentStateRef.current.isDirty) {\n      var _initialState$value;\n      dispatch({\n        type: actions.CONTROL,\n        payload: {\n          value: (_initialState$value = initialState.value) !== null && _initialState$value !== void 0 ? _initialState$value : ''\n        }\n      });\n    }\n  }, [initialState.value]);\n  return {\n    change,\n    commit,\n    dispatch,\n    drag,\n    dragEnd,\n    dragStart,\n    invalidate,\n    pressDown,\n    pressEnter,\n    pressUp,\n    reset,\n    state\n  };\n}"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useReducer, useLayoutEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { initialInputControlState, initialStateReducer } from './state';\nimport * as actions from './actions';\n/**\n * Prepares initialState for the reducer.\n *\n * @param initialState The initial state.\n * @return Prepared initialState for the reducer\n */\nfunction mergeInitialState(initialState = initialInputControlState) {\n  const {\n    value\n  } = initialState;\n  return {\n    ...initialInputControlState,\n    ...initialState,\n    initialValue: value\n  };\n}\n\n/**\n * Creates the base reducer which may be coupled to a specializing reducer.\n * As its final step, for all actions other than CONTROL, the base reducer\n * passes the state and action on through the specializing reducer. The\n * exception for CONTROL actions is because they represent controlled updates\n * from props and no case has yet presented for their specialization.\n *\n * @param composedStateReducers A reducer to specialize state changes.\n * @return The reducer.\n */\nfunction inputControlStateReducer(composedStateReducers) {\n  return (state, action) => {\n    const nextState = {\n      ...state\n    };\n    switch (action.type) {\n      /*\n       * Controlled updates\n       */\n      case actions.CONTROL:\n        nextState.value = action.payload.value;\n        nextState.isDirty = false;\n        nextState._event = undefined;\n        // Returns immediately to avoid invoking additional reducers.\n        return nextState;\n\n      /**\n       * Keyboard events\n       */\n      case actions.PRESS_UP:\n        nextState.isDirty = false;\n        break;\n      case actions.PRESS_DOWN:\n        nextState.isDirty = false;\n        break;\n\n      /**\n       * Drag events\n       */\n      case actions.DRAG_START:\n        nextState.isDragging = true;\n        break;\n      case actions.DRAG_END:\n        nextState.isDragging = false;\n        break;\n\n      /**\n       * Input events\n       */\n      case actions.CHANGE:\n        nextState.error = null;\n        nextState.value = action.payload.value;\n        if (state.isPressEnterToChange) {\n          nextState.isDirty = true;\n        }\n        break;\n      case actions.COMMIT:\n        nextState.value = action.payload.value;\n        nextState.isDirty = false;\n        break;\n      case actions.RESET:\n        nextState.error = null;\n        nextState.isDirty = false;\n        nextState.value = action.payload.value || state.initialValue;\n        break;\n\n      /**\n       * Validation\n       */\n      case actions.INVALIDATE:\n        nextState.error = action.payload.error;\n        break;\n    }\n    nextState._event = action.payload.event;\n\n    /**\n     * Send the nextState + action to the composedReducers via\n     * this \"bridge\" mechanism. This allows external stateReducers\n     * to hook into actions, and modify state if needed.\n     */\n    return composedStateReducers(nextState, action);\n  };\n}\n\n/**\n * A custom hook that connects and external stateReducer with an internal\n * reducer. This hook manages the internal state of InputControl.\n * However, by connecting an external stateReducer function, other\n * components can react to actions as well as modify state before it is\n * applied.\n *\n * This technique uses the \"stateReducer\" design pattern:\n * https://kentcdodds.com/blog/the-state-reducer-pattern/\n *\n * @param stateReducer    An external state reducer.\n * @param initialState    The initial state for the reducer.\n * @param onChangeHandler A handler for the onChange event.\n * @return State, dispatch, and a collection of actions.\n */\nexport function useInputControlStateReducer(stateReducer = initialStateReducer, initialState = initialInputControlState, onChangeHandler) {\n  const [state, dispatch] = useReducer(inputControlStateReducer(stateReducer), mergeInitialState(initialState));\n  const createChangeEvent = type => (nextValue, event) => {\n    dispatch({\n      type,\n      payload: {\n        value: nextValue,\n        event\n      }\n    });\n  };\n  const createKeyEvent = type => event => {\n    dispatch({\n      type,\n      payload: {\n        event\n      }\n    });\n  };\n  const createDragEvent = type => payload => {\n    dispatch({\n      type,\n      payload\n    });\n  };\n\n  /**\n   * Actions for the reducer\n   */\n  const change = createChangeEvent(actions.CHANGE);\n  const invalidate = (error, event) => dispatch({\n    type: actions.INVALIDATE,\n    payload: {\n      error,\n      event\n    }\n  });\n  const reset = createChangeEvent(actions.RESET);\n  const commit = createChangeEvent(actions.COMMIT);\n  const dragStart = createDragEvent(actions.DRAG_START);\n  const drag = createDragEvent(actions.DRAG);\n  const dragEnd = createDragEvent(actions.DRAG_END);\n  const pressUp = createKeyEvent(actions.PRESS_UP);\n  const pressDown = createKeyEvent(actions.PRESS_DOWN);\n  const pressEnter = createKeyEvent(actions.PRESS_ENTER);\n  const currentStateRef = useRef(state);\n  const refPropsRef = useRef({\n    value: initialState.value,\n    onChangeHandler\n  });\n\n  // Freshens refs to props and state so that subsequent effects have access\n  // to their latest values without their changes causing effect runs.\n  useLayoutEffect(() => {\n    currentStateRef.current = state;\n    refPropsRef.current = {\n      value: initialState.value,\n      onChangeHandler\n    };\n  });\n\n  // Propagates the latest state through onChange.\n  useLayoutEffect(() => {\n    if (currentStateRef.current._event !== undefined && state.value !== refPropsRef.current.value && !state.isDirty) {\n      refPropsRef.current.onChangeHandler(state.value ?? '', {\n        event: currentStateRef.current._event\n      });\n    }\n  }, [state.value, state.isDirty]);\n\n  // Updates the state from props.\n  useLayoutEffect(() => {\n    if (initialState.value !== currentStateRef.current.value && !currentStateRef.current.isDirty) {\n      dispatch({\n        type: actions.CONTROL,\n        payload: {\n          value: initialState.value ?? ''\n        }\n      });\n    }\n  }, [initialState.value]);\n  return {\n    change,\n    commit,\n    dispatch,\n    drag,\n    dragEnd,\n    dragStart,\n    invalidate,\n    pressDown,\n    pressEnter,\n    pressUp,\n    reset,\n    state\n  };\n}"],
+  "mappings": "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",
   "names": []
 }