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

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;
     }

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 => 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,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,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;",
+  "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/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": []
 }

package/build-module/keyboard-shortcuts/index.mjs

@@ -23,7 +23,7 @@ function KeyboardShortcuts({
   eventName
 }) {
   const target = useRef(null);
-  const element = Object.entries(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {}).map(([shortcut, callback]) => /* @__PURE__ */ _jsx(KeyboardShortcut, {
+  const element = Object.entries(shortcuts ?? {}).map(([shortcut, callback]) => /* @__PURE__ */ _jsx(KeyboardShortcut, {
     shortcut,
     callback,
     bindGlobal,

package/build-module/keyboard-shortcuts/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/keyboard-shortcuts/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef, Children } from '@wordpress/element';\nimport { useKeyboardShortcut } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction KeyboardShortcut({\n  target,\n  callback,\n  shortcut,\n  bindGlobal,\n  eventName\n}) {\n  useKeyboardShortcut(shortcut, callback, {\n    bindGlobal,\n    target,\n    eventName\n  });\n  return null;\n}\n\n/**\n * `KeyboardShortcuts` is a component which handles keyboard sequences during the lifetime of the rendering element.\n *\n * When passed children, it will capture key events which occur on or within the children. If no children are passed, events are captured on the document.\n *\n * It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyboard sequence bindings.\n *\n * ```jsx\n * import { KeyboardShortcuts } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyKeyboardShortcuts = () => {\n * \tconst [ isAllSelected, setIsAllSelected ] = useState( false );\n * \tconst selectAll = () => {\n * \t\tsetIsAllSelected( true );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t<KeyboardShortcuts\n * \t\t\t\tshortcuts={ {\n * \t\t\t\t\t'mod+a': selectAll,\n * \t\t\t\t} }\n * \t\t\t/>\n * \t\t\t[cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' }\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction KeyboardShortcuts({\n  children,\n  shortcuts,\n  bindGlobal,\n  eventName\n}) {\n  const target = useRef(null);\n  const element = Object.entries(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {}).map(([shortcut, callback]) => /*#__PURE__*/_jsx(KeyboardShortcut, {\n    shortcut: shortcut,\n    callback: callback,\n    bindGlobal: bindGlobal,\n    eventName: eventName,\n    target: target\n  }, shortcut));\n\n  // Render as non-visual if there are no children pressed. Keyboard\n  // events will be bound to the document instead.\n  if (!Children.count(children)) {\n    return /*#__PURE__*/_jsx(_Fragment, {\n      children: element\n    });\n  }\n  return /*#__PURE__*/_jsxs(\"div\", {\n    ref: target,\n    children: [element, children]\n  });\n}\nexport default KeyboardShortcuts;"],
-  "mappings": ";AAGA,SAAS,QAAQ,gBAAgB;AACjC,SAAS,2BAA2B;AAKpC,SAAS,OAAO,MAAM,YAAY,WAAW,QAAQ,aAAa;AAClE,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,sBAAoB,UAAU,UAAU;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAgCA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,SAAS,OAAO,IAAI;AAC1B,QAAM,UAAU,OAAO,QAAQ,cAAc,QAAQ,cAAc,SAAS,YAAY,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,UAAU,QAAQ,MAAmB,qBAAK,kBAAkB;AAAA,IAC5J;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAAG,QAAQ,CAAC;AAIZ,MAAI,CAAC,SAAS,MAAM,QAAQ,GAAG;AAC7B,WAAoB,qBAAK,WAAW;AAAA,MAClC,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,SAAoB,sBAAM,OAAO;AAAA,IAC/B,KAAK;AAAA,IACL,UAAU,CAAC,SAAS,QAAQ;AAAA,EAC9B,CAAC;AACH;AACA,IAAO,6BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef, Children } from '@wordpress/element';\nimport { useKeyboardShortcut } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction KeyboardShortcut({\n  target,\n  callback,\n  shortcut,\n  bindGlobal,\n  eventName\n}) {\n  useKeyboardShortcut(shortcut, callback, {\n    bindGlobal,\n    target,\n    eventName\n  });\n  return null;\n}\n\n/**\n * `KeyboardShortcuts` is a component which handles keyboard sequences during the lifetime of the rendering element.\n *\n * When passed children, it will capture key events which occur on or within the children. If no children are passed, events are captured on the document.\n *\n * It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyboard sequence bindings.\n *\n * ```jsx\n * import { KeyboardShortcuts } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyKeyboardShortcuts = () => {\n * \tconst [ isAllSelected, setIsAllSelected ] = useState( false );\n * \tconst selectAll = () => {\n * \t\tsetIsAllSelected( true );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t<KeyboardShortcuts\n * \t\t\t\tshortcuts={ {\n * \t\t\t\t\t'mod+a': selectAll,\n * \t\t\t\t} }\n * \t\t\t/>\n * \t\t\t[cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' }\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction KeyboardShortcuts({\n  children,\n  shortcuts,\n  bindGlobal,\n  eventName\n}) {\n  const target = useRef(null);\n  const element = Object.entries(shortcuts ?? {}).map(([shortcut, callback]) => /*#__PURE__*/_jsx(KeyboardShortcut, {\n    shortcut: shortcut,\n    callback: callback,\n    bindGlobal: bindGlobal,\n    eventName: eventName,\n    target: target\n  }, shortcut));\n\n  // Render as non-visual if there are no children pressed. Keyboard\n  // events will be bound to the document instead.\n  if (!Children.count(children)) {\n    return /*#__PURE__*/_jsx(_Fragment, {\n      children: element\n    });\n  }\n  return /*#__PURE__*/_jsxs(\"div\", {\n    ref: target,\n    children: [element, children]\n  });\n}\nexport default KeyboardShortcuts;"],
+  "mappings": ";AAGA,SAAS,QAAQ,gBAAgB;AACjC,SAAS,2BAA2B;AAKpC,SAAS,OAAO,MAAM,YAAY,WAAW,QAAQ,aAAa;AAClE,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,sBAAoB,UAAU,UAAU;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAgCA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,SAAS,OAAO,IAAI;AAC1B,QAAM,UAAU,OAAO,QAAQ,aAAa,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,UAAU,QAAQ,MAAmB,qBAAK,kBAAkB;AAAA,IAChH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAAG,QAAQ,CAAC;AAIZ,MAAI,CAAC,SAAS,MAAM,QAAQ,GAAG;AAC7B,WAAoB,qBAAK,WAAW;AAAA,MAClC,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,SAAoB,sBAAM,OAAO;AAAA,IAC/B,KAAK;AAAA,IACL,UAAU,CAAC,SAAS,QAAQ;AAAA,EAC9B,CAAC;AACH;AACA,IAAO,6BAAQ;",
   "names": []
 }

package/build-module/menu/index.mjs

@@ -28,7 +28,7 @@ var UnconnectedMenu = (props) => {
   } = useContextSystem(props, "Menu");
   const parentContext = useContext(Context);
   const rtl = isRTLFn();
-  let computedPlacement = placement !== null && placement !== void 0 ? placement : parentContext?.store ? "right-start" : "bottom-start";
+  let computedPlacement = placement ?? (parentContext?.store ? "right-start" : "bottom-start");
   if (rtl) {
     if (/right/.test(computedPlacement)) {
       computedPlacement = computedPlacement.replace("right", "left");

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/menu/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo } from '@wordpress/element';\nimport { isRTL as isRTLFn } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnectWithoutRef } from '../context';\nimport { Context } from './context';\nimport { Item } from './item';\nimport { CheckboxItem } from './checkbox-item';\nimport { RadioItem } from './radio-item';\nimport { Group } from './group';\nimport { GroupLabel } from './group-label';\nimport { Separator } from './separator';\nimport { ItemLabel } from './item-label';\nimport { ItemHelpText } from './item-help-text';\nimport { TriggerButton } from './trigger-button';\nimport { SubmenuTriggerItem } from './submenu-trigger-item';\nimport { Popover } from './popover';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnconnectedMenu = props => {\n  const {\n    children,\n    defaultOpen = false,\n    open,\n    onOpenChange,\n    placement,\n    // From internal components context\n    variant\n  } = useContextSystem(props, 'Menu');\n  const parentContext = useContext(Context);\n  const rtl = isRTLFn();\n\n  // If an explicit value for the `placement` prop is not passed,\n  // apply a default placement of `bottom-start` for the root menu popover,\n  // and of `right-start` for nested menu popovers.\n  let computedPlacement = placement !== null && placement !== void 0 ? placement : parentContext?.store ? 'right-start' : 'bottom-start';\n  // Swap left/right in case of RTL direction\n  if (rtl) {\n    if (/right/.test(computedPlacement)) {\n      computedPlacement = computedPlacement.replace('right', 'left');\n    } else if (/left/.test(computedPlacement)) {\n      computedPlacement = computedPlacement.replace('left', 'right');\n    }\n  }\n  const menuStore = Ariakit.useMenuStore({\n    parent: parentContext?.store,\n    open,\n    defaultOpen,\n    placement: computedPlacement,\n    focusLoop: true,\n    setOpen(willBeOpen) {\n      onOpenChange?.(willBeOpen);\n    },\n    rtl\n  });\n  const contextValue = useMemo(() => ({\n    store: menuStore,\n    variant\n  }), [menuStore, variant]);\n  return /*#__PURE__*/_jsx(Context.Provider, {\n    value: contextValue,\n    children: children\n  });\n};\n\n/**\n * Menu is a collection of React components that combine to render\n * ARIA-compliant [menu](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) and\n * [menu button](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/) patterns.\n *\n * `Menu` itself is a wrapper component and context provider.\n * It is responsible for managing the state of the menu and its items, and for\n * rendering the `Menu.TriggerButton` (or the `Menu.SubmenuTriggerItem`)\n * component, and the `Menu.Popover` component.\n */\nexport const Menu = Object.assign(contextConnectWithoutRef(UnconnectedMenu, 'Menu'), {\n  Context: Object.assign(Context, {\n    displayName: 'Menu.Context'\n  }),\n  /**\n   * Renders a menu item inside the `Menu.Popover` or `Menu.Group` components.\n   *\n   * It can optionally contain one instance of the `Menu.ItemLabel` component\n   * and one instance of the `Menu.ItemHelpText` component.\n   */\n  Item: Object.assign(Item, {\n    displayName: 'Menu.Item'\n  }),\n  /**\n   * Renders a radio menu item inside the `Menu.Popover` or `Menu.Group`\n   * components.\n   *\n   * It can optionally contain one instance of the `Menu.ItemLabel` component\n   * and one instance of the `Menu.ItemHelpText` component.\n   */\n  RadioItem: Object.assign(RadioItem, {\n    displayName: 'Menu.RadioItem'\n  }),\n  /**\n   * Renders a checkbox menu item inside the `Menu.Popover` or `Menu.Group`\n   * components.\n   *\n   * It can optionally contain one instance of the `Menu.ItemLabel` component\n   * and one instance of the `Menu.ItemHelpText` component.\n   */\n  CheckboxItem: Object.assign(CheckboxItem, {\n    displayName: 'Menu.CheckboxItem'\n  }),\n  /**\n   * Renders a group for menu items.\n   *\n   * It should contain one instance of `Menu.GroupLabel` and one or more\n   * instances of `Menu.Item`, `Menu.RadioItem`, or `Menu.CheckboxItem`.\n   */\n  Group: Object.assign(Group, {\n    displayName: 'Menu.Group'\n  }),\n  /**\n   * Renders a label in a menu group.\n   *\n   * This component should be wrapped with `Menu.Group` so the\n   * `aria-labelledby` is correctly set on the group element.\n   */\n  GroupLabel: Object.assign(GroupLabel, {\n    displayName: 'Menu.GroupLabel'\n  }),\n  /**\n   * Renders a divider between menu items or menu groups.\n   */\n  Separator: Object.assign(Separator, {\n    displayName: 'Menu.Separator'\n  }),\n  /**\n   * Renders a menu item's label text. It should be wrapped with `Menu.Item`,\n   * `Menu.RadioItem`, or `Menu.CheckboxItem`.\n   */\n  ItemLabel: Object.assign(ItemLabel, {\n    displayName: 'Menu.ItemLabel'\n  }),\n  /**\n   * Renders a menu item's help text. It should be wrapped with `Menu.Item`,\n   * `Menu.RadioItem`, or `Menu.CheckboxItem`.\n   */\n  ItemHelpText: Object.assign(ItemHelpText, {\n    displayName: 'Menu.ItemHelpText'\n  }),\n  /**\n   * Renders a dropdown menu element that's controlled by a sibling\n   * `Menu.TriggerButton` component. It renders a popover and automatically\n   * focuses on items when the menu is shown.\n   *\n   * The only valid children of `Menu.Popover` are `Menu.Item`,\n   * `Menu.RadioItem`, `Menu.CheckboxItem`, `Menu.Group`, `Menu.Separator`,\n   * and `Menu` (for nested dropdown menus).\n   */\n  Popover: Object.assign(Popover, {\n    displayName: 'Menu.Popover'\n  }),\n  /**\n   * Renders a menu button that toggles the visibility of a sibling\n   * `Menu.Popover` component when clicked or when using arrow keys.\n   */\n  TriggerButton: Object.assign(TriggerButton, {\n    displayName: 'Menu.TriggerButton'\n  }),\n  /**\n   * Renders a menu item that toggles the visibility of a sibling\n   * `Menu.Popover` component when clicked or when using arrow keys.\n   *\n   * This component is used to create a nested dropdown menu.\n   */\n  SubmenuTriggerItem: Object.assign(SubmenuTriggerItem, {\n    displayName: 'Menu.SubmenuTriggerItem'\n  })\n});\nexport default Menu;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo } from '@wordpress/element';\nimport { isRTL as isRTLFn } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnectWithoutRef } from '../context';\nimport { Context } from './context';\nimport { Item } from './item';\nimport { CheckboxItem } from './checkbox-item';\nimport { RadioItem } from './radio-item';\nimport { Group } from './group';\nimport { GroupLabel } from './group-label';\nimport { Separator } from './separator';\nimport { ItemLabel } from './item-label';\nimport { ItemHelpText } from './item-help-text';\nimport { TriggerButton } from './trigger-button';\nimport { SubmenuTriggerItem } from './submenu-trigger-item';\nimport { Popover } from './popover';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnconnectedMenu = props => {\n  const {\n    children,\n    defaultOpen = false,\n    open,\n    onOpenChange,\n    placement,\n    // From internal components context\n    variant\n  } = useContextSystem(props, 'Menu');\n  const parentContext = useContext(Context);\n  const rtl = isRTLFn();\n\n  // If an explicit value for the `placement` prop is not passed,\n  // apply a default placement of `bottom-start` for the root menu popover,\n  // and of `right-start` for nested menu popovers.\n  let computedPlacement = placement ?? (parentContext?.store ? 'right-start' : 'bottom-start');\n  // Swap left/right in case of RTL direction\n  if (rtl) {\n    if (/right/.test(computedPlacement)) {\n      computedPlacement = computedPlacement.replace('right', 'left');\n    } else if (/left/.test(computedPlacement)) {\n      computedPlacement = computedPlacement.replace('left', 'right');\n    }\n  }\n  const menuStore = Ariakit.useMenuStore({\n    parent: parentContext?.store,\n    open,\n    defaultOpen,\n    placement: computedPlacement,\n    focusLoop: true,\n    setOpen(willBeOpen) {\n      onOpenChange?.(willBeOpen);\n    },\n    rtl\n  });\n  const contextValue = useMemo(() => ({\n    store: menuStore,\n    variant\n  }), [menuStore, variant]);\n  return /*#__PURE__*/_jsx(Context.Provider, {\n    value: contextValue,\n    children: children\n  });\n};\n\n/**\n * Menu is a collection of React components that combine to render\n * ARIA-compliant [menu](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) and\n * [menu button](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/) patterns.\n *\n * `Menu` itself is a wrapper component and context provider.\n * It is responsible for managing the state of the menu and its items, and for\n * rendering the `Menu.TriggerButton` (or the `Menu.SubmenuTriggerItem`)\n * component, and the `Menu.Popover` component.\n */\nexport const Menu = Object.assign(contextConnectWithoutRef(UnconnectedMenu, 'Menu'), {\n  Context: Object.assign(Context, {\n    displayName: 'Menu.Context'\n  }),\n  /**\n   * Renders a menu item inside the `Menu.Popover` or `Menu.Group` components.\n   *\n   * It can optionally contain one instance of the `Menu.ItemLabel` component\n   * and one instance of the `Menu.ItemHelpText` component.\n   */\n  Item: Object.assign(Item, {\n    displayName: 'Menu.Item'\n  }),\n  /**\n   * Renders a radio menu item inside the `Menu.Popover` or `Menu.Group`\n   * components.\n   *\n   * It can optionally contain one instance of the `Menu.ItemLabel` component\n   * and one instance of the `Menu.ItemHelpText` component.\n   */\n  RadioItem: Object.assign(RadioItem, {\n    displayName: 'Menu.RadioItem'\n  }),\n  /**\n   * Renders a checkbox menu item inside the `Menu.Popover` or `Menu.Group`\n   * components.\n   *\n   * It can optionally contain one instance of the `Menu.ItemLabel` component\n   * and one instance of the `Menu.ItemHelpText` component.\n   */\n  CheckboxItem: Object.assign(CheckboxItem, {\n    displayName: 'Menu.CheckboxItem'\n  }),\n  /**\n   * Renders a group for menu items.\n   *\n   * It should contain one instance of `Menu.GroupLabel` and one or more\n   * instances of `Menu.Item`, `Menu.RadioItem`, or `Menu.CheckboxItem`.\n   */\n  Group: Object.assign(Group, {\n    displayName: 'Menu.Group'\n  }),\n  /**\n   * Renders a label in a menu group.\n   *\n   * This component should be wrapped with `Menu.Group` so the\n   * `aria-labelledby` is correctly set on the group element.\n   */\n  GroupLabel: Object.assign(GroupLabel, {\n    displayName: 'Menu.GroupLabel'\n  }),\n  /**\n   * Renders a divider between menu items or menu groups.\n   */\n  Separator: Object.assign(Separator, {\n    displayName: 'Menu.Separator'\n  }),\n  /**\n   * Renders a menu item's label text. It should be wrapped with `Menu.Item`,\n   * `Menu.RadioItem`, or `Menu.CheckboxItem`.\n   */\n  ItemLabel: Object.assign(ItemLabel, {\n    displayName: 'Menu.ItemLabel'\n  }),\n  /**\n   * Renders a menu item's help text. It should be wrapped with `Menu.Item`,\n   * `Menu.RadioItem`, or `Menu.CheckboxItem`.\n   */\n  ItemHelpText: Object.assign(ItemHelpText, {\n    displayName: 'Menu.ItemHelpText'\n  }),\n  /**\n   * Renders a dropdown menu element that's controlled by a sibling\n   * `Menu.TriggerButton` component. It renders a popover and automatically\n   * focuses on items when the menu is shown.\n   *\n   * The only valid children of `Menu.Popover` are `Menu.Item`,\n   * `Menu.RadioItem`, `Menu.CheckboxItem`, `Menu.Group`, `Menu.Separator`,\n   * and `Menu` (for nested dropdown menus).\n   */\n  Popover: Object.assign(Popover, {\n    displayName: 'Menu.Popover'\n  }),\n  /**\n   * Renders a menu button that toggles the visibility of a sibling\n   * `Menu.Popover` component when clicked or when using arrow keys.\n   */\n  TriggerButton: Object.assign(TriggerButton, {\n    displayName: 'Menu.TriggerButton'\n  }),\n  /**\n   * Renders a menu item that toggles the visibility of a sibling\n   * `Menu.Popover` component when clicked or when using arrow keys.\n   *\n   * This component is used to create a nested dropdown menu.\n   */\n  SubmenuTriggerItem: Object.assign(SubmenuTriggerItem, {\n    displayName: 'Menu.SubmenuTriggerItem'\n  })\n});\nexport default Menu;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/menu/item.mjs

@@ -16,7 +16,7 @@ var Item2 = forwardRef(function Item3({
   if (!menuContext?.store) {
     throw new Error("Menu.Item can only be rendered inside a Menu component");
   }
-  const computedStore = store !== null && store !== void 0 ? store : menuContext.store;
+  const computedStore = store ?? menuContext.store;
   return /* @__PURE__ */ _jsxs(Styled.Item, {
     ref,
     ...props,

package/build-module/menu/item.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/menu/item.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport * as Styled from './styles';\nimport { Context } from './context';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const Item = forwardRef(function Item({\n  prefix,\n  suffix,\n  children,\n  disabled = false,\n  hideOnClick = true,\n  store,\n  ...props\n}, ref) {\n  const menuContext = useContext(Context);\n  if (!menuContext?.store) {\n    throw new Error('Menu.Item can only be rendered inside a Menu component');\n  }\n\n  // In most cases, the menu store will be retrieved from context (ie. the store\n  // created by the top-level menu component). But in rare cases (ie.\n  // `Menu.SubmenuTriggerItem`), the context store wouldn't be correct. This is\n  // why the component accepts a `store` prop to override the context store.\n  const computedStore = store !== null && store !== void 0 ? store : menuContext.store;\n  return /*#__PURE__*/_jsxs(Styled.Item, {\n    ref: ref,\n    ...props,\n    accessibleWhenDisabled: true,\n    disabled: disabled,\n    hideOnClick: hideOnClick,\n    store: computedStore,\n    children: [/*#__PURE__*/_jsx(Styled.ItemPrefixWrapper, {\n      children: prefix\n    }), /*#__PURE__*/_jsxs(Styled.ItemContentWrapper, {\n      children: [/*#__PURE__*/_jsx(Styled.ItemChildrenWrapper, {\n        children: children\n      }), suffix && /*#__PURE__*/_jsx(Styled.ItemSuffixWrapper, {\n        children: suffix\n      })]\n    })]\n  });\n});"],
-  "mappings": ";AAGA,SAAS,YAAY,kBAAkB;AAMvC,YAAY,YAAY;AACxB,SAAS,eAAe;AACxB,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAMA,QAAO,WAAW,SAASA,MAAK;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,cAAc,WAAW,OAAO;AACtC,MAAI,CAAC,aAAa,OAAO;AACvB,UAAM,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AAMA,QAAM,gBAAgB,UAAU,QAAQ,UAAU,SAAS,QAAQ,YAAY;AAC/E,SAAoB,sBAAa,aAAM;AAAA,IACrC;AAAA,IACA,GAAG;AAAA,IACH,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,CAAc,qBAAY,0BAAmB;AAAA,MACrD,UAAU;AAAA,IACZ,CAAC,GAAgB,sBAAa,2BAAoB;AAAA,MAChD,UAAU,CAAc,qBAAY,4BAAqB;AAAA,QACvD;AAAA,MACF,CAAC,GAAG,UAAuB,qBAAY,0BAAmB;AAAA,QACxD,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH,CAAC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport * as Styled from './styles';\nimport { Context } from './context';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const Item = forwardRef(function Item({\n  prefix,\n  suffix,\n  children,\n  disabled = false,\n  hideOnClick = true,\n  store,\n  ...props\n}, ref) {\n  const menuContext = useContext(Context);\n  if (!menuContext?.store) {\n    throw new Error('Menu.Item can only be rendered inside a Menu component');\n  }\n\n  // In most cases, the menu store will be retrieved from context (ie. the store\n  // created by the top-level menu component). But in rare cases (ie.\n  // `Menu.SubmenuTriggerItem`), the context store wouldn't be correct. This is\n  // why the component accepts a `store` prop to override the context store.\n  const computedStore = store ?? menuContext.store;\n  return /*#__PURE__*/_jsxs(Styled.Item, {\n    ref: ref,\n    ...props,\n    accessibleWhenDisabled: true,\n    disabled: disabled,\n    hideOnClick: hideOnClick,\n    store: computedStore,\n    children: [/*#__PURE__*/_jsx(Styled.ItemPrefixWrapper, {\n      children: prefix\n    }), /*#__PURE__*/_jsxs(Styled.ItemContentWrapper, {\n      children: [/*#__PURE__*/_jsx(Styled.ItemChildrenWrapper, {\n        children: children\n      }), suffix && /*#__PURE__*/_jsx(Styled.ItemSuffixWrapper, {\n        children: suffix\n      })]\n    })]\n  });\n});"],
+  "mappings": ";AAGA,SAAS,YAAY,kBAAkB;AAMvC,YAAY,YAAY;AACxB,SAAS,eAAe;AACxB,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAMA,QAAO,WAAW,SAASA,MAAK;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,cAAc,WAAW,OAAO;AACtC,MAAI,CAAC,aAAa,OAAO;AACvB,UAAM,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AAMA,QAAM,gBAAgB,SAAS,YAAY;AAC3C,SAAoB,sBAAa,aAAM;AAAA,IACrC;AAAA,IACA,GAAG;AAAA,IACH,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,CAAc,qBAAY,0BAAmB;AAAA,MACrD,UAAU;AAAA,IACZ,CAAC,GAAgB,sBAAa,2BAAoB;AAAA,MAChD,UAAU,CAAc,qBAAY,4BAAqB;AAAA,QACvD;AAAA,MACF,CAAC,GAAG,UAAuB,qBAAY,0BAAmB;AAAA,QACxD,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH,CAAC;",
   "names": ["Item"]
 }

package/build-module/menu/popover.mjs

@@ -32,8 +32,8 @@ var Popover = forwardRef(function Popover2({
     ref,
     modal,
     store: menuContext.store,
-    gutter: gutter !== null && gutter !== void 0 ? gutter : menuContext.store.parent ? 0 : 8,
-    shift: shift !== null && shift !== void 0 ? shift : menuContext.store.parent ? -4 : 0,
+    gutter: gutter ?? (menuContext.store.parent ? 0 : 8),
+    shift: shift ?? (menuContext.store.parent ? -4 : 0),
     hideOnHoverOutside: false,
     "data-side": appliedPlacementSide,
     "data-submenu": !!menuContext.store.parent || void 0,

package/build-module/menu/popover.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/menu/popover.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo, forwardRef, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport * as Styled from './styles';\nimport { Context } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const Popover = forwardRef(function Popover({\n  gutter,\n  children,\n  shift,\n  modal = true,\n  ...otherProps\n}, ref) {\n  const menuContext = useContext(Context);\n\n  // Extract the side from the applied placement \u2014 useful for animations.\n  // Using `currentPlacement` instead of `placement` to make sure that we\n  // use the final computed placement (including \"flips\" etc).\n  const appliedPlacementSide = Ariakit.useStoreState(menuContext?.store, 'currentPlacement')?.split('-')[0];\n  const hideOnEscape = useCallback(event => {\n    // Pressing Escape can cause unexpected consequences (ie. exiting\n    // full screen mode on MacOs, close parent modals...).\n    event.preventDefault();\n    // Returning `true` causes the menu to hide.\n    return true;\n  }, []);\n  const computedDirection = Ariakit.useStoreState(menuContext?.store, 'rtl') ? 'rtl' : 'ltr';\n  const wrapperProps = useMemo(() => ({\n    dir: computedDirection,\n    style: {\n      direction: computedDirection\n    }\n  }), [computedDirection]);\n  if (!menuContext?.store) {\n    throw new Error('Menu.Popover can only be rendered inside a Menu component');\n  }\n  return /*#__PURE__*/_jsx(Styled.Menu, {\n    ...otherProps,\n    ref: ref,\n    modal: modal,\n    store: menuContext.store\n    // Root menu has an 8px distance from its trigger,\n    // otherwise 0 (which causes the submenu to slightly overlap)\n    ,\n    gutter: gutter !== null && gutter !== void 0 ? gutter : menuContext.store.parent ? 0 : 8\n    // Align nested menu by the same (but opposite) amount\n    // as the menu container's padding.\n    ,\n    shift: shift !== null && shift !== void 0 ? shift : menuContext.store.parent ? -4 : 0,\n    hideOnHoverOutside: false,\n    \"data-side\": appliedPlacementSide,\n    \"data-submenu\": !!menuContext.store.parent || undefined,\n    wrapperProps: wrapperProps,\n    hideOnEscape: hideOnEscape,\n    unmountOnHide: true,\n    variant: menuContext.variant,\n    children: children\n  });\n});"],
-  "mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,YAAY,SAAS,YAAY,mBAAmB;AAM7D,YAAY,YAAY;AACxB,SAAS,eAAe;AACxB,SAAS,OAAO,YAAY;AACrB,IAAM,UAAU,WAAW,SAASA,SAAQ;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAG,KAAK;AACN,QAAM,cAAc,WAAW,OAAO;AAKtC,QAAM,uBAA+B,sBAAc,aAAa,OAAO,kBAAkB,GAAG,MAAM,GAAG,EAAE,CAAC;AACxG,QAAM,eAAe,YAAY,WAAS;AAGxC,UAAM,eAAe;AAErB,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AACL,QAAM,oBAA4B,sBAAc,aAAa,OAAO,KAAK,IAAI,QAAQ;AACrF,QAAM,eAAe,QAAQ,OAAO;AAAA,IAClC,KAAK;AAAA,IACL,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,EACF,IAAI,CAAC,iBAAiB,CAAC;AACvB,MAAI,CAAC,aAAa,OAAO;AACvB,UAAM,IAAI,MAAM,2DAA2D;AAAA,EAC7E;AACA,SAAoB,qBAAY,aAAM;AAAA,IACpC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA,OAAO,YAAY;AAAA,IAInB,QAAQ,WAAW,QAAQ,WAAW,SAAS,SAAS,YAAY,MAAM,SAAS,IAAI;AAAA,IAIvF,OAAO,UAAU,QAAQ,UAAU,SAAS,QAAQ,YAAY,MAAM,SAAS,KAAK;AAAA,IACpF,oBAAoB;AAAA,IACpB,aAAa;AAAA,IACb,gBAAgB,CAAC,CAAC,YAAY,MAAM,UAAU;AAAA,IAC9C;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,SAAS,YAAY;AAAA,IACrB;AAAA,EACF,CAAC;AACH,CAAC;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo, forwardRef, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport * as Styled from './styles';\nimport { Context } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const Popover = forwardRef(function Popover({\n  gutter,\n  children,\n  shift,\n  modal = true,\n  ...otherProps\n}, ref) {\n  const menuContext = useContext(Context);\n\n  // Extract the side from the applied placement \u2014 useful for animations.\n  // Using `currentPlacement` instead of `placement` to make sure that we\n  // use the final computed placement (including \"flips\" etc).\n  const appliedPlacementSide = Ariakit.useStoreState(menuContext?.store, 'currentPlacement')?.split('-')[0];\n  const hideOnEscape = useCallback(event => {\n    // Pressing Escape can cause unexpected consequences (ie. exiting\n    // full screen mode on MacOs, close parent modals...).\n    event.preventDefault();\n    // Returning `true` causes the menu to hide.\n    return true;\n  }, []);\n  const computedDirection = Ariakit.useStoreState(menuContext?.store, 'rtl') ? 'rtl' : 'ltr';\n  const wrapperProps = useMemo(() => ({\n    dir: computedDirection,\n    style: {\n      direction: computedDirection\n    }\n  }), [computedDirection]);\n  if (!menuContext?.store) {\n    throw new Error('Menu.Popover can only be rendered inside a Menu component');\n  }\n  return /*#__PURE__*/_jsx(Styled.Menu, {\n    ...otherProps,\n    ref: ref,\n    modal: modal,\n    store: menuContext.store\n    // Root menu has an 8px distance from its trigger,\n    // otherwise 0 (which causes the submenu to slightly overlap)\n    ,\n    gutter: gutter ?? (menuContext.store.parent ? 0 : 8)\n    // Align nested menu by the same (but opposite) amount\n    // as the menu container's padding.\n    ,\n    shift: shift ?? (menuContext.store.parent ? -4 : 0),\n    hideOnHoverOutside: false,\n    \"data-side\": appliedPlacementSide,\n    \"data-submenu\": !!menuContext.store.parent || undefined,\n    wrapperProps: wrapperProps,\n    hideOnEscape: hideOnEscape,\n    unmountOnHide: true,\n    variant: menuContext.variant,\n    children: children\n  });\n});"],
+  "mappings": ";AAGA,YAAY,aAAa;AAKzB,SAAS,YAAY,SAAS,YAAY,mBAAmB;AAM7D,YAAY,YAAY;AACxB,SAAS,eAAe;AACxB,SAAS,OAAO,YAAY;AACrB,IAAM,UAAU,WAAW,SAASA,SAAQ;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAG,KAAK;AACN,QAAM,cAAc,WAAW,OAAO;AAKtC,QAAM,uBAA+B,sBAAc,aAAa,OAAO,kBAAkB,GAAG,MAAM,GAAG,EAAE,CAAC;AACxG,QAAM,eAAe,YAAY,WAAS;AAGxC,UAAM,eAAe;AAErB,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AACL,QAAM,oBAA4B,sBAAc,aAAa,OAAO,KAAK,IAAI,QAAQ;AACrF,QAAM,eAAe,QAAQ,OAAO;AAAA,IAClC,KAAK;AAAA,IACL,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,EACF,IAAI,CAAC,iBAAiB,CAAC;AACvB,MAAI,CAAC,aAAa,OAAO;AACvB,UAAM,IAAI,MAAM,2DAA2D;AAAA,EAC7E;AACA,SAAoB,qBAAY,aAAM;AAAA,IACpC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA,OAAO,YAAY;AAAA,IAInB,QAAQ,WAAW,YAAY,MAAM,SAAS,IAAI;AAAA,IAIlD,OAAO,UAAU,YAAY,MAAM,SAAS,KAAK;AAAA,IACjD,oBAAoB;AAAA,IACpB,aAAa;AAAA,IACb,gBAAgB,CAAC,CAAC,YAAY,MAAM,UAAU;AAAA,IAC9C;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,SAAS,YAAY;AAAA,IACrB;AAAA,EACF,CAAC;AACH,CAAC;",
   "names": ["Popover"]
 }

package/build-module/modal/index.mjs

@@ -95,9 +95,8 @@ function UnforwardedModal(props, forwardedRef) {
     };
   }, [dismissers, nestedDismissers]);
   useEffect(() => {
-    var _bodyOpenClasses$get;
     const theClass = bodyOpenClassName;
-    const oneMore = 1 + ((_bodyOpenClasses$get = bodyOpenClasses.get(theClass)) !== null && _bodyOpenClasses$get !== void 0 ? _bodyOpenClasses$get : 0);
+    const oneMore = 1 + (bodyOpenClasses.get(theClass) ?? 0);
     bodyOpenClasses.set(theClass, oneMore);
     document.body.classList.add(bodyOpenClassName);
     return () => {
@@ -134,8 +133,7 @@ function UnforwardedModal(props, forwardedRef) {
     }
   }
   const onContentContainerScroll = useCallback((e) => {
-    var _e$currentTarget$scro;
-    const scrollY = (_e$currentTarget$scro = e?.currentTarget?.scrollTop) !== null && _e$currentTarget$scro !== void 0 ? _e$currentTarget$scro : -1;
+    const scrollY = e?.currentTarget?.scrollTop ?? -1;
     if (!hasScrolledContent && scrollY > 0) {
       setHasScrolledContent(true);
     } else if (hasScrolledContent && scrollY <= 0) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/modal/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { createPortal, useCallback, useEffect, useRef, useState, forwardRef, useLayoutEffect, createContext, useContext } from '@wordpress/element';\nimport { useInstanceId, useFocusReturn, useFocusOnMount, useConstrainedTabbing, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { getScrollContainer } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { Spacer } from '../spacer';\nimport { useModalExitAnimation } from './use-modal-exit-animation';\n\n// Used to track and dismiss the prior modal when another opens unless nested.\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst ModalContext = createContext(new Set());\nModalContext.displayName = 'ModalContext';\n\n// Used to track body class names applied while modals are open.\nconst bodyOpenClasses = new Map();\nfunction UnforwardedModal(props, forwardedRef) {\n  const {\n    bodyOpenClassName = 'modal-open',\n    role = 'dialog',\n    title = null,\n    focusOnMount = true,\n    shouldCloseOnEsc = true,\n    shouldCloseOnClickOutside = true,\n    isDismissible = true,\n    /* Accessibility. */\n    aria = {\n      labelledby: undefined,\n      describedby: undefined\n    },\n    onRequestClose,\n    icon,\n    closeButtonLabel,\n    children,\n    style,\n    overlayClassName: overlayClassnameProp,\n    className,\n    contentLabel,\n    onKeyDown,\n    isFullScreen = false,\n    size,\n    headerActions = null,\n    __experimentalHideHeader = false\n  } = props;\n  const ref = useRef();\n  const instanceId = useInstanceId(Modal);\n  const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby;\n\n  // The focus hook does not support 'firstContentElement' but this is a valid\n  // value for the Modal's focusOnMount prop. The following code ensures the focus\n  // hook will focus the first focusable node within the element to which it is applied.\n  // When `firstContentElement` is passed as the value of the focusOnMount prop,\n  // the focus hook is applied to the Modal's content element.\n  // Otherwise, the focus hook is applied to the Modal's ref. This ensures that the\n  // focus hook will focus the first element in the Modal's **content** when\n  // `firstContentElement` is passed.\n  const focusOnMountRef = useFocusOnMount(focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount);\n  const constrainedTabbingRef = useConstrainedTabbing();\n  const focusReturnRef = useFocusReturn();\n  const contentRef = useRef(null);\n  const childrenContainerRef = useRef(null);\n  const [hasScrolledContent, setHasScrolledContent] = useState(false);\n  const [hasScrollableContent, setHasScrollableContent] = useState(false);\n  let sizeClass;\n  if (isFullScreen || size === 'fill') {\n    sizeClass = 'is-full-screen';\n  } else if (size) {\n    sizeClass = `has-size-${size}`;\n  }\n\n  // Determines whether the Modal content is scrollable and updates the state.\n  const isContentScrollable = useCallback(() => {\n    if (!contentRef.current) {\n      return;\n    }\n    const closestScrollContainer = getScrollContainer(contentRef.current);\n    if (contentRef.current === closestScrollContainer) {\n      setHasScrollableContent(true);\n    } else {\n      setHasScrollableContent(false);\n    }\n  }, [contentRef]);\n\n  // Accessibly isolates/unisolates the modal.\n  useEffect(() => {\n    ariaHelper.modalize(ref.current);\n    return () => ariaHelper.unmodalize();\n  }, []);\n\n  // Keeps a fresh ref for the subsequent effect.\n  const onRequestCloseRef = useRef();\n  useEffect(() => {\n    onRequestCloseRef.current = onRequestClose;\n  }, [onRequestClose]);\n\n  // The list of `onRequestClose` callbacks of open (non-nested) Modals. Only\n  // one should remain open at a time and the list enables closing prior ones.\n  const dismissers = useContext(ModalContext);\n  // Used for the tracking and dismissing any nested modals.\n  const [nestedDismissers] = useState(() => new Set());\n\n  // Updates the stack tracking open modals at this level and calls\n  // onRequestClose for any prior and/or nested modals as applicable.\n  useEffect(() => {\n    // add this modal instance to the dismissers set\n    dismissers.add(onRequestCloseRef);\n    // request that all the other modals close themselves\n    for (const dismisser of dismissers) {\n      if (dismisser !== onRequestCloseRef) {\n        dismisser.current?.();\n      }\n    }\n    return () => {\n      // request that all the nested modals close themselves\n      for (const dismisser of nestedDismissers) {\n        dismisser.current?.();\n      }\n      // remove this modal instance from the dismissers set\n      dismissers.delete(onRequestCloseRef);\n    };\n  }, [dismissers, nestedDismissers]);\n\n  // Adds/removes the value of bodyOpenClassName to body element.\n  useEffect(() => {\n    var _bodyOpenClasses$get;\n    const theClass = bodyOpenClassName;\n    const oneMore = 1 + ((_bodyOpenClasses$get = bodyOpenClasses.get(theClass)) !== null && _bodyOpenClasses$get !== void 0 ? _bodyOpenClasses$get : 0);\n    bodyOpenClasses.set(theClass, oneMore);\n    document.body.classList.add(bodyOpenClassName);\n    return () => {\n      const oneLess = bodyOpenClasses.get(theClass) - 1;\n      if (oneLess === 0) {\n        document.body.classList.remove(theClass);\n        bodyOpenClasses.delete(theClass);\n      } else {\n        bodyOpenClasses.set(theClass, oneLess);\n      }\n    };\n  }, [bodyOpenClassName]);\n  const {\n    closeModal,\n    frameRef,\n    frameStyle,\n    overlayClassname\n  } = useModalExitAnimation();\n\n  // Calls the isContentScrollable callback when the Modal children container resizes.\n  useLayoutEffect(() => {\n    if (!window.ResizeObserver || !childrenContainerRef.current) {\n      return;\n    }\n    const resizeObserver = new ResizeObserver(isContentScrollable);\n    resizeObserver.observe(childrenContainerRef.current);\n    isContentScrollable();\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [isContentScrollable, childrenContainerRef]);\n  function handleEscapeKeyDown(event) {\n    if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) {\n      event.preventDefault();\n      closeModal().then(() => onRequestClose(event));\n    }\n  }\n  const onContentContainerScroll = useCallback(e => {\n    var _e$currentTarget$scro;\n    const scrollY = (_e$currentTarget$scro = e?.currentTarget?.scrollTop) !== null && _e$currentTarget$scro !== void 0 ? _e$currentTarget$scro : -1;\n    if (!hasScrolledContent && scrollY > 0) {\n      setHasScrolledContent(true);\n    } else if (hasScrolledContent && scrollY <= 0) {\n      setHasScrolledContent(false);\n    }\n  }, [hasScrolledContent]);\n  let pressTarget = null;\n  const overlayPressHandlers = {\n    onPointerDown: event => {\n      if (event.target === event.currentTarget) {\n        pressTarget = event.target;\n        // Avoids focus changing so that focus return works as expected.\n        event.preventDefault();\n      }\n    },\n    // Closes the modal with two exceptions. 1. Opening the context menu on\n    // the overlay. 2. Pressing on the overlay then dragging the pointer\n    // over the modal and releasing. Due to the modal being a child of the\n    // overlay, such a gesture is a `click` on the overlay and cannot be\n    // excepted by a `click` handler. Thus the tactic of handling\n    // `pointerup` and comparing its target to that of the `pointerdown`.\n    onPointerUp: ({\n      target,\n      button\n    }) => {\n      const isSameTarget = target === pressTarget;\n      pressTarget = null;\n      if (button === 0 && isSameTarget) {\n        closeModal().then(() => onRequestClose());\n      }\n    }\n  };\n  const modal =\n  /*#__PURE__*/\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  _jsx(\"div\", {\n    ref: useMergeRefs([ref, forwardedRef]),\n    className: clsx('components-modal__screen-overlay', overlayClassname, overlayClassnameProp),\n    onKeyDown: withIgnoreIMEEvents(handleEscapeKeyDown),\n    ...(shouldCloseOnClickOutside ? overlayPressHandlers : {}),\n    children: /*#__PURE__*/_jsx(StyleProvider, {\n      document: document,\n      children: /*#__PURE__*/_jsx(\"div\", {\n        className: clsx('components-modal__frame', sizeClass, className),\n        style: {\n          ...frameStyle,\n          ...style\n        },\n        ref: useMergeRefs([frameRef, constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),\n        role: role,\n        \"aria-label\": contentLabel,\n        \"aria-labelledby\": contentLabel ? undefined : headingId,\n        \"aria-describedby\": aria.describedby,\n        tabIndex: -1,\n        onKeyDown: onKeyDown,\n        children: /*#__PURE__*/_jsxs(\"div\", {\n          className: clsx('components-modal__content', {\n            'hide-header': __experimentalHideHeader,\n            'is-scrollable': hasScrollableContent,\n            'has-scrolled-content': hasScrolledContent\n          }),\n          role: \"document\",\n          onScroll: onContentContainerScroll,\n          ref: contentRef,\n          \"aria-label\": hasScrollableContent ? __('Scrollable section') : undefined,\n          tabIndex: hasScrollableContent ? 0 : undefined,\n          children: [!__experimentalHideHeader && /*#__PURE__*/_jsxs(\"div\", {\n            className: \"components-modal__header\",\n            children: [/*#__PURE__*/_jsxs(\"div\", {\n              className: \"components-modal__header-heading-container\",\n              children: [icon && /*#__PURE__*/_jsx(\"span\", {\n                className: \"components-modal__icon-container\",\n                \"aria-hidden\": true,\n                children: icon\n              }), title && /*#__PURE__*/_jsx(\"h1\", {\n                id: headingId,\n                className: \"components-modal__header-heading\",\n                children: title\n              })]\n            }), headerActions, isDismissible && /*#__PURE__*/_jsxs(_Fragment, {\n              children: [/*#__PURE__*/_jsx(Spacer, {\n                marginBottom: 0,\n                marginLeft: 2\n              }), /*#__PURE__*/_jsx(Button, {\n                size: \"compact\",\n                onClick: event => closeModal().then(() => onRequestClose(event)),\n                icon: close,\n                label: closeButtonLabel || __('Close')\n              })]\n            })]\n          }), /*#__PURE__*/_jsx(\"div\", {\n            ref: useMergeRefs([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null]),\n            className: \"components-modal__children-container\",\n            children: children\n          })]\n        })\n      })\n    })\n  });\n  return createPortal(/*#__PURE__*/_jsx(ModalContext.Provider, {\n    value: nestedDismissers,\n    children: modal\n  }), document.body);\n}\n\n/**\n * Modals give users information and choices related to a task they\u2019re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n *\n * ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyModal = () => {\n *   const [ isOpen, setOpen ] = useState( false );\n *   const openModal = () => setOpen( true );\n *   const closeModal = () => setOpen( false );\n *\n *   return (\n *     <>\n *       <Button variant=\"secondary\" onClick={ openModal }>\n *         Open Modal\n *       </Button>\n *       { isOpen && (\n *         <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n *           <Button variant=\"secondary\" onClick={ closeModal }>\n *             My custom close button\n *           </Button>\n *         </Modal>\n *       ) }\n *     </>\n *   );\n * };\n * ```\n */\nexport const Modal = forwardRef(UnforwardedModal);\nModal.displayName = 'Modal';\nexport default Modal;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { createPortal, useCallback, useEffect, useRef, useState, forwardRef, useLayoutEffect, createContext, useContext } from '@wordpress/element';\nimport { useInstanceId, useFocusReturn, useFocusOnMount, useConstrainedTabbing, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { getScrollContainer } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { Spacer } from '../spacer';\nimport { useModalExitAnimation } from './use-modal-exit-animation';\n\n// Used to track and dismiss the prior modal when another opens unless nested.\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst ModalContext = createContext(new Set());\nModalContext.displayName = 'ModalContext';\n\n// Used to track body class names applied while modals are open.\nconst bodyOpenClasses = new Map();\nfunction UnforwardedModal(props, forwardedRef) {\n  const {\n    bodyOpenClassName = 'modal-open',\n    role = 'dialog',\n    title = null,\n    focusOnMount = true,\n    shouldCloseOnEsc = true,\n    shouldCloseOnClickOutside = true,\n    isDismissible = true,\n    /* Accessibility. */\n    aria = {\n      labelledby: undefined,\n      describedby: undefined\n    },\n    onRequestClose,\n    icon,\n    closeButtonLabel,\n    children,\n    style,\n    overlayClassName: overlayClassnameProp,\n    className,\n    contentLabel,\n    onKeyDown,\n    isFullScreen = false,\n    size,\n    headerActions = null,\n    __experimentalHideHeader = false\n  } = props;\n  const ref = useRef();\n  const instanceId = useInstanceId(Modal);\n  const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby;\n\n  // The focus hook does not support 'firstContentElement' but this is a valid\n  // value for the Modal's focusOnMount prop. The following code ensures the focus\n  // hook will focus the first focusable node within the element to which it is applied.\n  // When `firstContentElement` is passed as the value of the focusOnMount prop,\n  // the focus hook is applied to the Modal's content element.\n  // Otherwise, the focus hook is applied to the Modal's ref. This ensures that the\n  // focus hook will focus the first element in the Modal's **content** when\n  // `firstContentElement` is passed.\n  const focusOnMountRef = useFocusOnMount(focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount);\n  const constrainedTabbingRef = useConstrainedTabbing();\n  const focusReturnRef = useFocusReturn();\n  const contentRef = useRef(null);\n  const childrenContainerRef = useRef(null);\n  const [hasScrolledContent, setHasScrolledContent] = useState(false);\n  const [hasScrollableContent, setHasScrollableContent] = useState(false);\n  let sizeClass;\n  if (isFullScreen || size === 'fill') {\n    sizeClass = 'is-full-screen';\n  } else if (size) {\n    sizeClass = `has-size-${size}`;\n  }\n\n  // Determines whether the Modal content is scrollable and updates the state.\n  const isContentScrollable = useCallback(() => {\n    if (!contentRef.current) {\n      return;\n    }\n    const closestScrollContainer = getScrollContainer(contentRef.current);\n    if (contentRef.current === closestScrollContainer) {\n      setHasScrollableContent(true);\n    } else {\n      setHasScrollableContent(false);\n    }\n  }, [contentRef]);\n\n  // Accessibly isolates/unisolates the modal.\n  useEffect(() => {\n    ariaHelper.modalize(ref.current);\n    return () => ariaHelper.unmodalize();\n  }, []);\n\n  // Keeps a fresh ref for the subsequent effect.\n  const onRequestCloseRef = useRef();\n  useEffect(() => {\n    onRequestCloseRef.current = onRequestClose;\n  }, [onRequestClose]);\n\n  // The list of `onRequestClose` callbacks of open (non-nested) Modals. Only\n  // one should remain open at a time and the list enables closing prior ones.\n  const dismissers = useContext(ModalContext);\n  // Used for the tracking and dismissing any nested modals.\n  const [nestedDismissers] = useState(() => new Set());\n\n  // Updates the stack tracking open modals at this level and calls\n  // onRequestClose for any prior and/or nested modals as applicable.\n  useEffect(() => {\n    // add this modal instance to the dismissers set\n    dismissers.add(onRequestCloseRef);\n    // request that all the other modals close themselves\n    for (const dismisser of dismissers) {\n      if (dismisser !== onRequestCloseRef) {\n        dismisser.current?.();\n      }\n    }\n    return () => {\n      // request that all the nested modals close themselves\n      for (const dismisser of nestedDismissers) {\n        dismisser.current?.();\n      }\n      // remove this modal instance from the dismissers set\n      dismissers.delete(onRequestCloseRef);\n    };\n  }, [dismissers, nestedDismissers]);\n\n  // Adds/removes the value of bodyOpenClassName to body element.\n  useEffect(() => {\n    const theClass = bodyOpenClassName;\n    const oneMore = 1 + (bodyOpenClasses.get(theClass) ?? 0);\n    bodyOpenClasses.set(theClass, oneMore);\n    document.body.classList.add(bodyOpenClassName);\n    return () => {\n      const oneLess = bodyOpenClasses.get(theClass) - 1;\n      if (oneLess === 0) {\n        document.body.classList.remove(theClass);\n        bodyOpenClasses.delete(theClass);\n      } else {\n        bodyOpenClasses.set(theClass, oneLess);\n      }\n    };\n  }, [bodyOpenClassName]);\n  const {\n    closeModal,\n    frameRef,\n    frameStyle,\n    overlayClassname\n  } = useModalExitAnimation();\n\n  // Calls the isContentScrollable callback when the Modal children container resizes.\n  useLayoutEffect(() => {\n    if (!window.ResizeObserver || !childrenContainerRef.current) {\n      return;\n    }\n    const resizeObserver = new ResizeObserver(isContentScrollable);\n    resizeObserver.observe(childrenContainerRef.current);\n    isContentScrollable();\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [isContentScrollable, childrenContainerRef]);\n  function handleEscapeKeyDown(event) {\n    if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) {\n      event.preventDefault();\n      closeModal().then(() => onRequestClose(event));\n    }\n  }\n  const onContentContainerScroll = useCallback(e => {\n    const scrollY = e?.currentTarget?.scrollTop ?? -1;\n    if (!hasScrolledContent && scrollY > 0) {\n      setHasScrolledContent(true);\n    } else if (hasScrolledContent && scrollY <= 0) {\n      setHasScrolledContent(false);\n    }\n  }, [hasScrolledContent]);\n  let pressTarget = null;\n  const overlayPressHandlers = {\n    onPointerDown: event => {\n      if (event.target === event.currentTarget) {\n        pressTarget = event.target;\n        // Avoids focus changing so that focus return works as expected.\n        event.preventDefault();\n      }\n    },\n    // Closes the modal with two exceptions. 1. Opening the context menu on\n    // the overlay. 2. Pressing on the overlay then dragging the pointer\n    // over the modal and releasing. Due to the modal being a child of the\n    // overlay, such a gesture is a `click` on the overlay and cannot be\n    // excepted by a `click` handler. Thus the tactic of handling\n    // `pointerup` and comparing its target to that of the `pointerdown`.\n    onPointerUp: ({\n      target,\n      button\n    }) => {\n      const isSameTarget = target === pressTarget;\n      pressTarget = null;\n      if (button === 0 && isSameTarget) {\n        closeModal().then(() => onRequestClose());\n      }\n    }\n  };\n  const modal =\n  /*#__PURE__*/\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  _jsx(\"div\", {\n    ref: useMergeRefs([ref, forwardedRef]),\n    className: clsx('components-modal__screen-overlay', overlayClassname, overlayClassnameProp),\n    onKeyDown: withIgnoreIMEEvents(handleEscapeKeyDown),\n    ...(shouldCloseOnClickOutside ? overlayPressHandlers : {}),\n    children: /*#__PURE__*/_jsx(StyleProvider, {\n      document: document,\n      children: /*#__PURE__*/_jsx(\"div\", {\n        className: clsx('components-modal__frame', sizeClass, className),\n        style: {\n          ...frameStyle,\n          ...style\n        },\n        ref: useMergeRefs([frameRef, constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),\n        role: role,\n        \"aria-label\": contentLabel,\n        \"aria-labelledby\": contentLabel ? undefined : headingId,\n        \"aria-describedby\": aria.describedby,\n        tabIndex: -1,\n        onKeyDown: onKeyDown,\n        children: /*#__PURE__*/_jsxs(\"div\", {\n          className: clsx('components-modal__content', {\n            'hide-header': __experimentalHideHeader,\n            'is-scrollable': hasScrollableContent,\n            'has-scrolled-content': hasScrolledContent\n          }),\n          role: \"document\",\n          onScroll: onContentContainerScroll,\n          ref: contentRef,\n          \"aria-label\": hasScrollableContent ? __('Scrollable section') : undefined,\n          tabIndex: hasScrollableContent ? 0 : undefined,\n          children: [!__experimentalHideHeader && /*#__PURE__*/_jsxs(\"div\", {\n            className: \"components-modal__header\",\n            children: [/*#__PURE__*/_jsxs(\"div\", {\n              className: \"components-modal__header-heading-container\",\n              children: [icon && /*#__PURE__*/_jsx(\"span\", {\n                className: \"components-modal__icon-container\",\n                \"aria-hidden\": true,\n                children: icon\n              }), title && /*#__PURE__*/_jsx(\"h1\", {\n                id: headingId,\n                className: \"components-modal__header-heading\",\n                children: title\n              })]\n            }), headerActions, isDismissible && /*#__PURE__*/_jsxs(_Fragment, {\n              children: [/*#__PURE__*/_jsx(Spacer, {\n                marginBottom: 0,\n                marginLeft: 2\n              }), /*#__PURE__*/_jsx(Button, {\n                size: \"compact\",\n                onClick: event => closeModal().then(() => onRequestClose(event)),\n                icon: close,\n                label: closeButtonLabel || __('Close')\n              })]\n            })]\n          }), /*#__PURE__*/_jsx(\"div\", {\n            ref: useMergeRefs([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null]),\n            className: \"components-modal__children-container\",\n            children: children\n          })]\n        })\n      })\n    })\n  });\n  return createPortal(/*#__PURE__*/_jsx(ModalContext.Provider, {\n    value: nestedDismissers,\n    children: modal\n  }), document.body);\n}\n\n/**\n * Modals give users information and choices related to a task they\u2019re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n *\n * ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyModal = () => {\n *   const [ isOpen, setOpen ] = useState( false );\n *   const openModal = () => setOpen( true );\n *   const closeModal = () => setOpen( false );\n *\n *   return (\n *     <>\n *       <Button variant=\"secondary\" onClick={ openModal }>\n *         Open Modal\n *       </Button>\n *       { isOpen && (\n *         <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n *           <Button variant=\"secondary\" onClick={ closeModal }>\n *             My custom close button\n *           </Button>\n *         </Modal>\n *       ) }\n *     </>\n *   );\n * };\n * ```\n */\nexport const Modal = forwardRef(UnforwardedModal);\nModal.displayName = 'Modal';\nexport default Modal;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/navigator/navigator/component.mjs

@@ -26,7 +26,6 @@ function removeScreen({
   return screens.filter((s) => s.id !== screen.id);
 }
 function goTo(state, path, options = {}) {
-  var _focusSelectorsCopy2;
   const {
     focusSelectors
   } = state;
@@ -51,8 +50,7 @@ function goTo(state, path, options = {}) {
   }
   let focusSelectorsCopy;
   function getFocusSelectorsCopy() {
-    var _focusSelectorsCopy;
-    focusSelectorsCopy = (_focusSelectorsCopy = focusSelectorsCopy) !== null && _focusSelectorsCopy !== void 0 ? _focusSelectorsCopy : new Map(state.focusSelectors);
+    focusSelectorsCopy = focusSelectorsCopy ?? new Map(state.focusSelectors);
     return focusSelectorsCopy;
   }
   if (focusTargetSelector && currentLocation.path) {
@@ -75,7 +73,7 @@ function goTo(state, path, options = {}) {
       focusTargetSelector: currentFocusSelector,
       skipFocus
     },
-    focusSelectors: (_focusSelectorsCopy2 = focusSelectorsCopy) !== null && _focusSelectorsCopy2 !== void 0 ? _focusSelectorsCopy2 : focusSelectors
+    focusSelectors: focusSelectorsCopy ?? focusSelectors
   };
 }
 function goToParent(state, options = {}) {
@@ -202,15 +200,12 @@ function UnconnectedNavigator(props, forwardedRef) {
     currentLocation,
     matchedPath
   } = routerState;
-  const navigatorContextValue = useMemo(() => {
-    var _matchedPath$params;
-    return {
-      location: currentLocation,
-      params: (_matchedPath$params = matchedPath?.params) !== null && _matchedPath$params !== void 0 ? _matchedPath$params : {},
-      match: matchedPath?.id,
-      ...methods
-    };
-  }, [currentLocation, matchedPath, methods]);
+  const navigatorContextValue = useMemo(() => ({
+    location: currentLocation,
+    params: matchedPath?.params ?? {},
+    match: matchedPath?.id,
+    ...methods
+  }), [currentLocation, matchedPath, methods]);
   const cx = useCx();
   const classes = useMemo(() => cx(styles.navigatorWrapper, className), [className, cx]);
   return /* @__PURE__ */ _jsx(View, {