@wordpress/components 30.5.1-next.f56bd8138.0 → 30.6.1-next.b8c8708f3.0

package/build/navigator/navigator-button/hook.js

@@ -1,37 +1,55 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var hook_exports = {};
+__export(hook_exports, {
+  useNavigatorButton: () => useNavigatorButton
 });
-exports.useNavigatorButton = useNavigatorButton;
-var _element = require("@wordpress/element");
-var _escapeHtml = require("@wordpress/escape-html");
-var _context = require("../../context");
-var _button = _interopRequireDefault(require("../../button"));
-var _useNavigator = require("../use-navigator");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(hook_exports);
+var import_element = require("@wordpress/element");
+var import_escape_html = require("@wordpress/escape-html");
+var import_context = require("../../context");
+var import_button = __toESM(require("../../button"));
+var import_use_navigator = require("../use-navigator");
 const cssSelectorForAttribute = (attrName, attrValue) => `[${attrName}="${attrValue}"]`;
 function useNavigatorButton(props) {
   const {
     path,
     onClick,
-    as = _button.default,
-    attributeName = 'id',
+    as = import_button.default,
+    attributeName = "id",
     ...otherProps
-  } = (0, _context.useContextSystem)(props, 'Navigator.Button');
-  const escapedPath = (0, _escapeHtml.escapeAttribute)(path);
+  } = (0, import_context.useContextSystem)(props, "Navigator.Button");
+  const escapedPath = (0, import_escape_html.escapeAttribute)(path);
   const {
     goTo
-  } = (0, _useNavigator.useNavigator)();
-  const handleClick = (0, _element.useCallback)(e => {
+  } = (0, import_use_navigator.useNavigator)();
+  const handleClick = (0, import_element.useCallback)((e) => {
     e.preventDefault();
     goTo(escapedPath, {
       focusTargetSelector: cssSelectorForAttribute(attributeName, escapedPath)
@@ -45,4 +63,8 @@ function useNavigatorButton(props) {
     [attributeName]: escapedPath
   };
 }
-//# sourceMappingURL=hook.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useNavigatorButton
+});
+//# sourceMappingURL=hook.js.map

package/build/navigator/navigator-button/hook.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_element","require","_escapeHtml","_context","_button","_interopRequireDefault","_useNavigator","cssSelectorForAttribute","attrName","attrValue","useNavigatorButton","props","path","onClick","as","Button","attributeName","otherProps","useContextSystem","escapedPath","escapeAttribute","goTo","useNavigator","handleClick","useCallback","e","preventDefault","focusTargetSelector"],"sources":["@wordpress/components/src/navigator/navigator-button/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\nimport { escapeAttribute } from '@wordpress/escape-html';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport Button from '../../button';\nimport { useNavigator } from '../use-navigator';\nimport type { NavigatorButtonProps } from '../types';\n\nconst cssSelectorForAttribute = ( attrName: string, attrValue: string ) =>\n\t`[${ attrName }=\"${ attrValue }\"]`;\n\nexport function useNavigatorButton(\n\tprops: WordPressComponentProps< NavigatorButtonProps, 'button' >\n) {\n\tconst {\n\t\tpath,\n\t\tonClick,\n\t\tas = Button,\n\t\tattributeName = 'id',\n\t\t...otherProps\n\t} = useContextSystem( props, 'Navigator.Button' );\n\n\tconst escapedPath = escapeAttribute( path );\n\n\tconst { goTo } = useNavigator();\n\tconst handleClick: React.MouseEventHandler< HTMLButtonElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tgoTo( escapedPath, {\n\t\t\t\t\tfocusTargetSelector: cssSelectorForAttribute(\n\t\t\t\t\t\tattributeName,\n\t\t\t\t\t\tescapedPath\n\t\t\t\t\t),\n\t\t\t\t} );\n\t\t\t\tonClick?.( e );\n\t\t\t},\n\t\t\t[ goTo, onClick, attributeName, escapedPath ]\n\t\t);\n\n\treturn {\n\t\tas,\n\t\tonClick: handleClick,\n\t\t...otherProps,\n\t\t[ attributeName ]: escapedPath,\n\t};\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAMA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AAZA;AACA;AACA;;AAIA;AACA;AACA;;AAOA,MAAMM,uBAAuB,GAAGA,CAAEC,QAAgB,EAAEC,SAAiB,KACpE,IAAKD,QAAQ,KAAOC,SAAS,IAAK;AAE5B,SAASC,kBAAkBA,CACjCC,KAAgE,EAC/D;EACD,MAAM;IACLC,IAAI;IACJC,OAAO;IACPC,EAAE,GAAGC,eAAM;IACXC,aAAa,GAAG,IAAI;IACpB,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEP,KAAK,EAAE,kBAAmB,CAAC;EAEjD,MAAMQ,WAAW,GAAG,IAAAC,2BAAe,EAAER,IAAK,CAAC;EAE3C,MAAM;IAAES;EAAK,CAAC,GAAG,IAAAC,0BAAY,EAAC,CAAC;EAC/B,MAAMC,WAAyD,GAC9D,IAAAC,oBAAW,EACRC,CAAC,IAAM;IACRA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClBL,IAAI,CAAEF,WAAW,EAAE;MAClBQ,mBAAmB,EAAEpB,uBAAuB,CAC3CS,aAAa,EACbG,WACD;IACD,CAAE,CAAC;IACHN,OAAO,GAAIY,CAAE,CAAC;EACf,CAAC,EACD,CAAEJ,IAAI,EAAER,OAAO,EAAEG,aAAa,EAAEG,WAAW,CAC5C,CAAC;EAEF,OAAO;IACNL,EAAE;IACFD,OAAO,EAAEU,WAAW;IACpB,GAAGN,UAAU;IACb,CAAED,aAAa,GAAIG;EACpB,CAAC;AACF","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/navigator/navigator-button/hook.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\nimport { escapeAttribute } from '@wordpress/escape-html';\n\n/**\n * Internal dependencies\n */\n\nimport { useContextSystem } from '../../context';\nimport Button from '../../button';\nimport { useNavigator } from '../use-navigator';\nconst cssSelectorForAttribute = (attrName, attrValue) => `[${attrName}=\"${attrValue}\"]`;\nexport function useNavigatorButton(props) {\n  const {\n    path,\n    onClick,\n    as = Button,\n    attributeName = 'id',\n    ...otherProps\n  } = useContextSystem(props, 'Navigator.Button');\n  const escapedPath = escapeAttribute(path);\n  const {\n    goTo\n  } = useNavigator();\n  const handleClick = useCallback(e => {\n    e.preventDefault();\n    goTo(escapedPath, {\n      focusTargetSelector: cssSelectorForAttribute(attributeName, escapedPath)\n    });\n    onClick?.(e);\n  }, [goTo, onClick, attributeName, escapedPath]);\n  return {\n    as,\n    onClick: handleClick,\n    ...otherProps,\n    [attributeName]: escapedPath\n  };\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA4B;AAC5B,yBAAgC;AAMhC,qBAAiC;AACjC,oBAAmB;AACnB,2BAA6B;AAC7B,MAAM,0BAA0B,CAAC,UAAU,cAAc,IAAI,QAAQ,KAAK,SAAS;AAC5E,SAAS,mBAAmB,OAAO;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK,cAAAA;AAAA,IACL,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,kBAAkB;AAC9C,QAAM,kBAAc,oCAAgB,IAAI;AACxC,QAAM;AAAA,IACJ;AAAA,EACF,QAAI,mCAAa;AACjB,QAAM,kBAAc,4BAAY,OAAK;AACnC,MAAE,eAAe;AACjB,SAAK,aAAa;AAAA,MAChB,qBAAqB,wBAAwB,eAAe,WAAW;AAAA,IACzE,CAAC;AACD,cAAU,CAAC;AAAA,EACb,GAAG,CAAC,MAAM,SAAS,eAAe,WAAW,CAAC;AAC9C,SAAO;AAAA,IACL;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,IACH,CAAC,aAAa,GAAG;AAAA,EACnB;AACF;",
+  "names": ["Button"]
+}

package/build/navigator/navigator-screen/component.js

@@ -1,54 +1,66 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var component_exports = {};
+__export(component_exports, {
+  NavigatorScreen: () => NavigatorScreen
 });
-exports.NavigatorScreen = void 0;
-var _dom = require("@wordpress/dom");
-var _element = require("@wordpress/element");
-var _compose = require("@wordpress/compose");
-var _escapeHtml = require("@wordpress/escape-html");
-var _warning = _interopRequireDefault(require("@wordpress/warning"));
-var _context = require("../../context");
-var _useCx = require("../../utils/hooks/use-cx");
-var _view = require("../../view");
-var _context2 = require("../context");
-var styles = _interopRequireWildcard(require("../styles"));
-var _useScreenAnimatePresence = require("./use-screen-animate-presence");
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(component_exports);
+var import_dom = require("@wordpress/dom");
+var import_element = require("@wordpress/element");
+var import_compose = require("@wordpress/compose");
+var import_escape_html = require("@wordpress/escape-html");
+var import_warning = __toESM(require("@wordpress/warning"));
+var import_context = require("../../context");
+var import_use_cx = require("../../utils/hooks/use-cx");
+var import_view = require("../../view");
+var import_context2 = require("../context");
+var styles = __toESM(require("../styles"));
+var import_use_screen_animate_presence = require("./use-screen-animate-presence");
+var import_jsx_runtime = require("react/jsx-runtime");
 function UnconnectedNavigatorScreen(props, forwardedRef) {
   if (!/^\//.test(props.path)) {
-    globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.') : void 0;
+    globalThis.SCRIPT_DEBUG === true ? (0, import_warning.default)("wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.") : void 0;
   }
-  const screenId = (0, _element.useId)();
+  const screenId = (0, import_element.useId)();
   const {
     children,
     className,
     path,
     onAnimationEnd: onAnimationEndProp,
     ...otherProps
-  } = (0, _context.useContextSystem)(props, 'Navigator.Screen');
+  } = (0, import_context.useContextSystem)(props, "Navigator.Screen");
   const {
     location,
     match,
     addScreen,
     removeScreen
-  } = (0, _element.useContext)(_context2.NavigatorContext);
+  } = (0, import_element.useContext)(import_context2.NavigatorContext);
   const {
     isInitial,
     isBack,
@@ -56,81 +68,64 @@ function UnconnectedNavigatorScreen(props, forwardedRef) {
     skipFocus
   } = location;
   const isMatch = match === screenId;
-  const wrapperRef = (0, _element.useRef)(null);
+  const wrapperRef = (0, import_element.useRef)(null);
   const skipAnimationAndFocusRestoration = !!isInitial && !isBack;
-
-  // Register / unregister screen with the navigator context.
-  (0, _element.useEffect)(() => {
+  (0, import_element.useEffect)(() => {
     const screen = {
       id: screenId,
-      path: (0, _escapeHtml.escapeAttribute)(path)
+      path: (0, import_escape_html.escapeAttribute)(path)
     };
     addScreen(screen);
     return () => removeScreen(screen);
   }, [screenId, path, addScreen, removeScreen]);
-
-  // Animation.
   const {
     animationStyles,
     shouldRenderScreen,
     screenProps
-  } = (0, _useScreenAnimatePresence.useScreenAnimatePresence)({
+  } = (0, import_use_screen_animate_presence.useScreenAnimatePresence)({
     isMatch,
     isBack,
     onAnimationEnd: onAnimationEndProp,
     skipAnimation: skipAnimationAndFocusRestoration
   });
-  const cx = (0, _useCx.useCx)();
-  const classes = (0, _element.useMemo)(() => cx(styles.navigatorScreen, animationStyles, className), [className, cx, animationStyles]);
-
-  // Focus restoration
-  const locationRef = (0, _element.useRef)(location);
-  (0, _element.useEffect)(() => {
+  const cx = (0, import_use_cx.useCx)();
+  const classes = (0, import_element.useMemo)(() => cx(styles.navigatorScreen, animationStyles, className), [className, cx, animationStyles]);
+  const locationRef = (0, import_element.useRef)(location);
+  (0, import_element.useEffect)(() => {
     locationRef.current = location;
   }, [location]);
-  (0, _element.useEffect)(() => {
+  (0, import_element.useEffect)(() => {
     const wrapperEl = wrapperRef.current;
-    // Only attempt to restore focus:
-    // - if the current location is not the initial one (to avoid moving focus on page load)
-    // - when the screen becomes visible
-    // - if the wrapper ref has been assigned
-    // - if focus hasn't already been restored for the current location
-    // - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
     if (skipAnimationAndFocusRestoration || !isMatch || !wrapperEl || locationRef.current.hasRestoredFocus || skipFocus) {
       return;
     }
     const activeElement = wrapperEl.ownerDocument.activeElement;
-
-    // If an element is already focused within the wrapper do not focus the
-    // element. This prevents inputs or buttons from losing focus unnecessarily.
     if (wrapperEl.contains(activeElement)) {
       return;
     }
     let elementToFocus = null;
-
-    // When navigating back, if a selector is provided, use it to look for the
-    // target element (assumed to be a node inside the current NavigatorScreen)
     if (isBack && focusTargetSelector) {
       elementToFocus = wrapperEl.querySelector(focusTargetSelector);
     }
-
-    // If the previous query didn't run or find any element to focus, fallback
-    // to the first tabbable element in the screen (or the screen itself).
     if (!elementToFocus) {
-      const [firstTabbable] = _dom.focus.tabbable.find(wrapperEl);
+      const [firstTabbable] = import_dom.focus.tabbable.find(wrapperEl);
       elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperEl;
     }
     locationRef.current.hasRestoredFocus = true;
     elementToFocus.focus();
   }, [skipAnimationAndFocusRestoration, isMatch, isBack, focusTargetSelector, skipFocus]);
-  const mergedWrapperRef = (0, _compose.useMergeRefs)([forwardedRef, wrapperRef]);
-  return shouldRenderScreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
+  const mergedWrapperRef = (0, import_compose.useMergeRefs)([forwardedRef, wrapperRef]);
+  return shouldRenderScreen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_view.View, {
     ref: mergedWrapperRef,
     className: classes,
     ...screenProps,
     ...otherProps,
-    children: children
+    children
   }) : null;
 }
-const NavigatorScreen = exports.NavigatorScreen = (0, _context.contextConnect)(UnconnectedNavigatorScreen, 'Navigator.Screen');
-//# sourceMappingURL=component.js.map
+const NavigatorScreen = (0, import_context.contextConnect)(UnconnectedNavigatorScreen, "Navigator.Screen");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NavigatorScreen
+});
+//# sourceMappingURL=component.js.map

package/build/navigator/navigator-screen/component.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_dom","require","_element","_compose","_escapeHtml","_warning","_interopRequireDefault","_context","_useCx","_view","_context2","styles","_interopRequireWildcard","_useScreenAnimatePresence","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","UnconnectedNavigatorScreen","props","forwardedRef","test","path","globalThis","SCRIPT_DEBUG","warning","screenId","useId","children","className","onAnimationEnd","onAnimationEndProp","otherProps","useContextSystem","location","match","addScreen","removeScreen","useContext","NavigatorContext","isInitial","isBack","focusTargetSelector","skipFocus","isMatch","wrapperRef","useRef","skipAnimationAndFocusRestoration","useEffect","screen","id","escapeAttribute","animationStyles","shouldRenderScreen","screenProps","useScreenAnimatePresence","skipAnimation","cx","useCx","classes","useMemo","navigatorScreen","locationRef","current","wrapperEl","hasRestoredFocus","activeElement","ownerDocument","contains","elementToFocus","querySelector","firstTabbable","focus","tabbable","find","mergedWrapperRef","useMergeRefs","jsx","View","ref","NavigatorScreen","exports","contextConnect"],"sources":["@wordpress/components/src/navigator/navigator-screen/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseId,\n} from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { escapeAttribute } from '@wordpress/escape-html';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport * as styles from '../styles';\nimport type { NavigatorScreenProps } from '../types';\nimport { useScreenAnimatePresence } from './use-screen-animate-presence';\n\nfunction UnconnectedNavigatorScreen(\n\tprops: WordPressComponentProps< NavigatorScreenProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tif ( ! /^\\//.test( props.path ) ) {\n\t\twarning(\n\t\t\t'wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'\n\t\t);\n\t}\n\n\tconst screenId = useId();\n\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tpath,\n\t\tonAnimationEnd: onAnimationEndProp,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Navigator.Screen' );\n\n\tconst { location, match, addScreen, removeScreen } =\n\t\tuseContext( NavigatorContext );\n\tconst { isInitial, isBack, focusTargetSelector, skipFocus } = location;\n\n\tconst isMatch = match === screenId;\n\tconst wrapperRef = useRef< HTMLDivElement >( null );\n\tconst skipAnimationAndFocusRestoration = !! isInitial && ! isBack;\n\n\t// Register / unregister screen with the navigator context.\n\tuseEffect( () => {\n\t\tconst screen = {\n\t\t\tid: screenId,\n\t\t\tpath: escapeAttribute( path ),\n\t\t};\n\t\taddScreen( screen );\n\t\treturn () => removeScreen( screen );\n\t}, [ screenId, path, addScreen, removeScreen ] );\n\n\t// Animation.\n\tconst { animationStyles, shouldRenderScreen, screenProps } =\n\t\tuseScreenAnimatePresence( {\n\t\t\tisMatch,\n\t\t\tisBack,\n\t\t\tonAnimationEnd: onAnimationEndProp,\n\t\t\tskipAnimation: skipAnimationAndFocusRestoration,\n\t\t} );\n\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t() => cx( styles.navigatorScreen, animationStyles, className ),\n\t\t[ className, cx, animationStyles ]\n\t);\n\n\t// Focus restoration\n\tconst locationRef = useRef( location );\n\tuseEffect( () => {\n\t\tlocationRef.current = location;\n\t}, [ location ] );\n\tuseEffect( () => {\n\t\tconst wrapperEl = wrapperRef.current;\n\t\t// Only attempt to restore focus:\n\t\t// - if the current location is not the initial one (to avoid moving focus on page load)\n\t\t// - when the screen becomes visible\n\t\t// - if the wrapper ref has been assigned\n\t\t// - if focus hasn't already been restored for the current location\n\t\t// - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.\n\t\tif (\n\t\t\tskipAnimationAndFocusRestoration ||\n\t\t\t! isMatch ||\n\t\t\t! wrapperEl ||\n\t\t\tlocationRef.current.hasRestoredFocus ||\n\t\t\tskipFocus\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst activeElement = wrapperEl.ownerDocument.activeElement;\n\n\t\t// If an element is already focused within the wrapper do not focus the\n\t\t// element. This prevents inputs or buttons from losing focus unnecessarily.\n\t\tif ( wrapperEl.contains( activeElement ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet elementToFocus: HTMLElement | null = null;\n\n\t\t// When navigating back, if a selector is provided, use it to look for the\n\t\t// target element (assumed to be a node inside the current NavigatorScreen)\n\t\tif ( isBack && focusTargetSelector ) {\n\t\t\telementToFocus = wrapperEl.querySelector( focusTargetSelector );\n\t\t}\n\n\t\t// If the previous query didn't run or find any element to focus, fallback\n\t\t// to the first tabbable element in the screen (or the screen itself).\n\t\tif ( ! elementToFocus ) {\n\t\t\tconst [ firstTabbable ] = focus.tabbable.find( wrapperEl );\n\t\t\telementToFocus = firstTabbable ?? wrapperEl;\n\t\t}\n\n\t\tlocationRef.current.hasRestoredFocus = true;\n\t\telementToFocus.focus();\n\t}, [\n\t\tskipAnimationAndFocusRestoration,\n\t\tisMatch,\n\t\tisBack,\n\t\tfocusTargetSelector,\n\t\tskipFocus,\n\t] );\n\n\tconst mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );\n\n\treturn shouldRenderScreen ? (\n\t\t<View\n\t\t\tref={ mergedWrapperRef }\n\t\t\tclassName={ classes }\n\t\t\t{ ...screenProps }\n\t\t\t{ ...otherProps }\n\t\t>\n\t\t\t{ children }\n\t\t</View>\n\t) : null;\n}\n\nexport const NavigatorScreen = contextConnect(\n\tUnconnectedNavigatorScreen,\n\t'Navigator.Screen'\n);\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/navigator/navigator-screen/component.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\nimport { useContext, useEffect, useMemo, useRef, useId } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { escapeAttribute } from '@wordpress/escape-html';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport * as styles from '../styles';\nimport { useScreenAnimatePresence } from './use-screen-animate-presence';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedNavigatorScreen(props, forwardedRef) {\n  if (!/^\\//.test(props.path)) {\n    globalThis.SCRIPT_DEBUG === true ? warning('wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.') : void 0;\n  }\n  const screenId = useId();\n  const {\n    children,\n    className,\n    path,\n    onAnimationEnd: onAnimationEndProp,\n    ...otherProps\n  } = useContextSystem(props, 'Navigator.Screen');\n  const {\n    location,\n    match,\n    addScreen,\n    removeScreen\n  } = useContext(NavigatorContext);\n  const {\n    isInitial,\n    isBack,\n    focusTargetSelector,\n    skipFocus\n  } = location;\n  const isMatch = match === screenId;\n  const wrapperRef = useRef(null);\n  const skipAnimationAndFocusRestoration = !!isInitial && !isBack;\n\n  // Register / unregister screen with the navigator context.\n  useEffect(() => {\n    const screen = {\n      id: screenId,\n      path: escapeAttribute(path)\n    };\n    addScreen(screen);\n    return () => removeScreen(screen);\n  }, [screenId, path, addScreen, removeScreen]);\n\n  // Animation.\n  const {\n    animationStyles,\n    shouldRenderScreen,\n    screenProps\n  } = useScreenAnimatePresence({\n    isMatch,\n    isBack,\n    onAnimationEnd: onAnimationEndProp,\n    skipAnimation: skipAnimationAndFocusRestoration\n  });\n  const cx = useCx();\n  const classes = useMemo(() => cx(styles.navigatorScreen, animationStyles, className), [className, cx, animationStyles]);\n\n  // Focus restoration\n  const locationRef = useRef(location);\n  useEffect(() => {\n    locationRef.current = location;\n  }, [location]);\n  useEffect(() => {\n    const wrapperEl = wrapperRef.current;\n    // Only attempt to restore focus:\n    // - if the current location is not the initial one (to avoid moving focus on page load)\n    // - when the screen becomes visible\n    // - if the wrapper ref has been assigned\n    // - if focus hasn't already been restored for the current location\n    // - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.\n    if (skipAnimationAndFocusRestoration || !isMatch || !wrapperEl || locationRef.current.hasRestoredFocus || skipFocus) {\n      return;\n    }\n    const activeElement = wrapperEl.ownerDocument.activeElement;\n\n    // If an element is already focused within the wrapper do not focus the\n    // element. This prevents inputs or buttons from losing focus unnecessarily.\n    if (wrapperEl.contains(activeElement)) {\n      return;\n    }\n    let elementToFocus = null;\n\n    // When navigating back, if a selector is provided, use it to look for the\n    // target element (assumed to be a node inside the current NavigatorScreen)\n    if (isBack && focusTargetSelector) {\n      elementToFocus = wrapperEl.querySelector(focusTargetSelector);\n    }\n\n    // If the previous query didn't run or find any element to focus, fallback\n    // to the first tabbable element in the screen (or the screen itself).\n    if (!elementToFocus) {\n      const [firstTabbable] = focus.tabbable.find(wrapperEl);\n      elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperEl;\n    }\n    locationRef.current.hasRestoredFocus = true;\n    elementToFocus.focus();\n  }, [skipAnimationAndFocusRestoration, isMatch, isBack, focusTargetSelector, skipFocus]);\n  const mergedWrapperRef = useMergeRefs([forwardedRef, wrapperRef]);\n  return shouldRenderScreen ? /*#__PURE__*/_jsx(View, {\n    ref: mergedWrapperRef,\n    className: classes,\n    ...screenProps,\n    ...otherProps,\n    children: children\n  }) : null;\n}\nexport const NavigatorScreen = contextConnect(UnconnectedNavigatorScreen, 'Navigator.Screen');"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,iBAAsB;AACtB,qBAA8D;AAC9D,qBAA6B;AAC7B,yBAAgC;AAChC,qBAAoB;AAMpB,qBAAiD;AACjD,oBAAsB;AACtB,kBAAqB;AACrB,IAAAA,kBAAiC;AACjC,aAAwB;AACxB,yCAAyC;AACzC,yBAA4B;AAC5B,SAAS,2BAA2B,OAAO,cAAc;AACvD,MAAI,CAAC,MAAM,KAAK,MAAM,IAAI,GAAG;AAC3B,eAAW,iBAAiB,WAAO,eAAAC,SAAQ,yIAAyI,IAAI;AAAA,EAC1L;AACA,QAAM,eAAW,sBAAM;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,kBAAkB;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,2BAAW,gCAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,UAAU,UAAU;AAC1B,QAAM,iBAAa,uBAAO,IAAI;AAC9B,QAAM,mCAAmC,CAAC,CAAC,aAAa,CAAC;AAGzD,gCAAU,MAAM;AACd,UAAM,SAAS;AAAA,MACb,IAAI;AAAA,MACJ,UAAM,oCAAgB,IAAI;AAAA,IAC5B;AACA,cAAU,MAAM;AAChB,WAAO,MAAM,aAAa,MAAM;AAAA,EAClC,GAAG,CAAC,UAAU,MAAM,WAAW,YAAY,CAAC;AAG5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,6DAAyB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,eAAe;AAAA,EACjB,CAAC;AACD,QAAM,SAAK,qBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM,GAAG,OAAO,iBAAiB,iBAAiB,SAAS,GAAG,CAAC,WAAW,IAAI,eAAe,CAAC;AAGtH,QAAM,kBAAc,uBAAO,QAAQ;AACnC,gCAAU,MAAM;AACd,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,QAAQ,CAAC;AACb,gCAAU,MAAM;AACd,UAAM,YAAY,WAAW;AAO7B,QAAI,oCAAoC,CAAC,WAAW,CAAC,aAAa,YAAY,QAAQ,oBAAoB,WAAW;AACnH;AAAA,IACF;AACA,UAAM,gBAAgB,UAAU,cAAc;AAI9C,QAAI,UAAU,SAAS,aAAa,GAAG;AACrC;AAAA,IACF;AACA,QAAI,iBAAiB;AAIrB,QAAI,UAAU,qBAAqB;AACjC,uBAAiB,UAAU,cAAc,mBAAmB;AAAA,IAC9D;AAIA,QAAI,CAAC,gBAAgB;AACnB,YAAM,CAAC,aAAa,IAAI,iBAAM,SAAS,KAAK,SAAS;AACrD,uBAAiB,kBAAkB,QAAQ,kBAAkB,SAAS,gBAAgB;AAAA,IACxF;AACA,gBAAY,QAAQ,mBAAmB;AACvC,mBAAe,MAAM;AAAA,EACvB,GAAG,CAAC,kCAAkC,SAAS,QAAQ,qBAAqB,SAAS,CAAC;AACtF,QAAM,uBAAmB,6BAAa,CAAC,cAAc,UAAU,CAAC;AAChE,SAAO,qBAAkC,uCAAAC,KAAK,kBAAM;AAAA,IAClD,KAAK;AAAA,IACL,WAAW;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,IACH;AAAA,EACF,CAAC,IAAI;AACP;AACO,MAAM,sBAAkB,+BAAe,4BAA4B,kBAAkB;",
+  "names": ["import_context", "warning", "_jsx"]
+}

package/build/navigator/navigator-screen/use-screen-animate-presence.js

@@ -1,100 +1,95 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_screen_animate_presence_exports = {};
+__export(use_screen_animate_presence_exports, {
+  useScreenAnimatePresence: () => useScreenAnimatePresence
 });
-exports.useScreenAnimatePresence = useScreenAnimatePresence;
-var _element = require("@wordpress/element");
-var _compose = require("@wordpress/compose");
-var _i18n = require("@wordpress/i18n");
-var styles = _interopRequireWildcard(require("../styles"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-// Possible values:
-// - 'INITIAL': the initial state
-// - 'ANIMATING_IN': start enter animation
-// - 'IN': enter animation has ended
-// - 'ANIMATING_OUT': start exit animation
-// - 'OUT': the exit animation has ended
-
-// Allow an extra 20% of the total animation duration to account for potential
-// event loop delays.
+module.exports = __toCommonJS(use_screen_animate_presence_exports);
+var import_element = require("@wordpress/element");
+var import_compose = require("@wordpress/compose");
+var import_i18n = require("@wordpress/i18n");
+var styles = __toESM(require("../styles"));
 const ANIMATION_TIMEOUT_MARGIN = 1.2;
-const isEnterAnimation = (animationDirection, animationStatus, animationName) => animationStatus === 'ANIMATING_IN' && animationName === styles.ANIMATION_END_NAMES[animationDirection].in;
-const isExitAnimation = (animationDirection, animationStatus, animationName) => animationStatus === 'ANIMATING_OUT' && animationName === styles.ANIMATION_END_NAMES[animationDirection].out;
+const isEnterAnimation = (animationDirection, animationStatus, animationName) => animationStatus === "ANIMATING_IN" && animationName === styles.ANIMATION_END_NAMES[animationDirection].in;
+const isExitAnimation = (animationDirection, animationStatus, animationName) => animationStatus === "ANIMATING_OUT" && animationName === styles.ANIMATION_END_NAMES[animationDirection].out;
 function useScreenAnimatePresence({
   isMatch,
   skipAnimation,
   isBack,
   onAnimationEnd
 }) {
-  const isRTL = (0, _i18n.isRTL)();
-  const prefersReducedMotion = (0, _compose.useReducedMotion)();
-  const [animationStatus, setAnimationStatus] = (0, _element.useState)('INITIAL');
-
-  // Start enter and exit animations when the screen is selected or deselected.
-  // The animation status is set to `IN` or `OUT` immediately if the animation
-  // should be skipped.
-  const becameSelected = animationStatus !== 'ANIMATING_IN' && animationStatus !== 'IN' && isMatch;
-  const becameUnselected = animationStatus !== 'ANIMATING_OUT' && animationStatus !== 'OUT' && !isMatch;
-  (0, _element.useLayoutEffect)(() => {
+  const isRTL = (0, import_i18n.isRTL)();
+  const prefersReducedMotion = (0, import_compose.useReducedMotion)();
+  const [animationStatus, setAnimationStatus] = (0, import_element.useState)("INITIAL");
+  const becameSelected = animationStatus !== "ANIMATING_IN" && animationStatus !== "IN" && isMatch;
+  const becameUnselected = animationStatus !== "ANIMATING_OUT" && animationStatus !== "OUT" && !isMatch;
+  (0, import_element.useLayoutEffect)(() => {
     if (becameSelected) {
-      setAnimationStatus(skipAnimation || prefersReducedMotion ? 'IN' : 'ANIMATING_IN');
+      setAnimationStatus(skipAnimation || prefersReducedMotion ? "IN" : "ANIMATING_IN");
     } else if (becameUnselected) {
-      setAnimationStatus(skipAnimation || prefersReducedMotion ? 'OUT' : 'ANIMATING_OUT');
+      setAnimationStatus(skipAnimation || prefersReducedMotion ? "OUT" : "ANIMATING_OUT");
     }
   }, [becameSelected, becameUnselected, skipAnimation, prefersReducedMotion]);
-
-  // Animation attributes (derived state).
-  const animationDirection = isRTL && isBack || !isRTL && !isBack ? 'end' : 'start';
-  const isAnimatingIn = animationStatus === 'ANIMATING_IN';
-  const isAnimatingOut = animationStatus === 'ANIMATING_OUT';
+  const animationDirection = isRTL && isBack || !isRTL && !isBack ? "end" : "start";
+  const isAnimatingIn = animationStatus === "ANIMATING_IN";
+  const isAnimatingOut = animationStatus === "ANIMATING_OUT";
   let animationType;
   if (isAnimatingIn) {
-    animationType = 'in';
+    animationType = "in";
   } else if (isAnimatingOut) {
-    animationType = 'out';
+    animationType = "out";
   }
-  const onScreenAnimationEnd = (0, _element.useCallback)(e => {
+  const onScreenAnimationEnd = (0, import_element.useCallback)((e) => {
     onAnimationEnd?.(e);
     if (isExitAnimation(animationDirection, animationStatus, e.animationName)) {
-      // When the exit animation ends on an unselected screen, set the
-      // status to 'OUT' to remove the screen contents from the DOM.
-      setAnimationStatus('OUT');
+      setAnimationStatus("OUT");
     } else if (isEnterAnimation(animationDirection, animationStatus, e.animationName)) {
-      // When the enter animation ends on a selected screen, set the
-      // status to 'IN' to ensure the screen is rendered in the DOM.
-      setAnimationStatus('IN');
+      setAnimationStatus("IN");
     }
   }, [onAnimationEnd, animationStatus, animationDirection]);
-
-  // Fallback timeout to ensure that the logic is applied even if the
-  // `animationend` event is not triggered.
-  (0, _element.useEffect)(() => {
+  (0, import_element.useEffect)(() => {
     let animationTimeout;
     if (isAnimatingOut) {
       animationTimeout = window.setTimeout(() => {
-        setAnimationStatus('OUT');
-        animationTimeout = undefined;
+        setAnimationStatus("OUT");
+        animationTimeout = void 0;
       }, styles.TOTAL_ANIMATION_DURATION.OUT * ANIMATION_TIMEOUT_MARGIN);
     } else if (isAnimatingIn) {
       animationTimeout = window.setTimeout(() => {
-        setAnimationStatus('IN');
-        animationTimeout = undefined;
+        setAnimationStatus("IN");
+        animationTimeout = void 0;
       }, styles.TOTAL_ANIMATION_DURATION.IN * ANIMATION_TIMEOUT_MARGIN);
     }
     return () => {
       if (animationTimeout) {
         window.clearTimeout(animationTimeout);
-        animationTimeout = undefined;
+        animationTimeout = void 0;
       }
     };
   }, [isAnimatingOut, isAnimatingIn]);
@@ -102,13 +97,17 @@ function useScreenAnimatePresence({
     animationStyles: styles.navigatorScreenAnimation,
     // Render the screen's contents in the DOM not only when the screen is
     // selected, but also while it is animating out.
-    shouldRenderScreen: isMatch || animationStatus === 'IN' || animationStatus === 'ANIMATING_OUT',
+    shouldRenderScreen: isMatch || animationStatus === "IN" || animationStatus === "ANIMATING_OUT",
     screenProps: {
       onAnimationEnd: onScreenAnimationEnd,
-      'data-animation-direction': animationDirection,
-      'data-animation-type': animationType,
-      'data-skip-animation': skipAnimation || undefined
+      "data-animation-direction": animationDirection,
+      "data-animation-type": animationType,
+      "data-skip-animation": skipAnimation || void 0
     }
   };
 }
-//# sourceMappingURL=use-screen-animate-presence.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useScreenAnimatePresence
+});
+//# sourceMappingURL=use-screen-animate-presence.js.map

package/build/navigator/navigator-screen/use-screen-animate-presence.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_element","require","_compose","_i18n","styles","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ANIMATION_TIMEOUT_MARGIN","isEnterAnimation","animationDirection","animationStatus","animationName","ANIMATION_END_NAMES","in","isExitAnimation","out","useScreenAnimatePresence","isMatch","skipAnimation","isBack","onAnimationEnd","isRTL","isRTLFn","prefersReducedMotion","useReducedMotion","setAnimationStatus","useState","becameSelected","becameUnselected","useLayoutEffect","isAnimatingIn","isAnimatingOut","animationType","onScreenAnimationEnd","useCallback","useEffect","animationTimeout","window","setTimeout","undefined","TOTAL_ANIMATION_DURATION","OUT","IN","clearTimeout","animationStyles","navigatorScreenAnimation","shouldRenderScreen","screenProps"],"sources":["@wordpress/components/src/navigator/navigator-screen/use-screen-animate-presence.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseCallback,\n} from '@wordpress/element';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { isRTL as isRTLFn } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\n\n// Possible values:\n// - 'INITIAL': the initial state\n// - 'ANIMATING_IN': start enter animation\n// - 'IN': enter animation has ended\n// - 'ANIMATING_OUT': start exit animation\n// - 'OUT': the exit animation has ended\ntype AnimationStatus =\n\t| 'INITIAL'\n\t| 'ANIMATING_IN'\n\t| 'IN'\n\t| 'ANIMATING_OUT'\n\t| 'OUT';\n\n// Allow an extra 20% of the total animation duration to account for potential\n// event loop delays.\nconst ANIMATION_TIMEOUT_MARGIN = 1.2;\n\nconst isEnterAnimation = (\n\tanimationDirection: 'end' | 'start',\n\tanimationStatus: AnimationStatus,\n\tanimationName: string\n) =>\n\tanimationStatus === 'ANIMATING_IN' &&\n\tanimationName === styles.ANIMATION_END_NAMES[ animationDirection ].in;\n\nconst isExitAnimation = (\n\tanimationDirection: 'end' | 'start',\n\tanimationStatus: AnimationStatus,\n\tanimationName: string\n) =>\n\tanimationStatus === 'ANIMATING_OUT' &&\n\tanimationName === styles.ANIMATION_END_NAMES[ animationDirection ].out;\n\nexport function useScreenAnimatePresence( {\n\tisMatch,\n\tskipAnimation,\n\tisBack,\n\tonAnimationEnd,\n}: {\n\tisMatch: boolean;\n\tskipAnimation: boolean;\n\tisBack?: boolean;\n\tonAnimationEnd?: React.AnimationEventHandler< Element >;\n} ) {\n\tconst isRTL = isRTLFn();\n\tconst prefersReducedMotion = useReducedMotion();\n\n\tconst [ animationStatus, setAnimationStatus ] =\n\t\tuseState< AnimationStatus >( 'INITIAL' );\n\n\t// Start enter and exit animations when the screen is selected or deselected.\n\t// The animation status is set to `IN` or `OUT` immediately if the animation\n\t// should be skipped.\n\tconst becameSelected =\n\t\tanimationStatus !== 'ANIMATING_IN' &&\n\t\tanimationStatus !== 'IN' &&\n\t\tisMatch;\n\tconst becameUnselected =\n\t\tanimationStatus !== 'ANIMATING_OUT' &&\n\t\tanimationStatus !== 'OUT' &&\n\t\t! isMatch;\n\tuseLayoutEffect( () => {\n\t\tif ( becameSelected ) {\n\t\t\tsetAnimationStatus(\n\t\t\t\tskipAnimation || prefersReducedMotion ? 'IN' : 'ANIMATING_IN'\n\t\t\t);\n\t\t} else if ( becameUnselected ) {\n\t\t\tsetAnimationStatus(\n\t\t\t\tskipAnimation || prefersReducedMotion ? 'OUT' : 'ANIMATING_OUT'\n\t\t\t);\n\t\t}\n\t}, [\n\t\tbecameSelected,\n\t\tbecameUnselected,\n\t\tskipAnimation,\n\t\tprefersReducedMotion,\n\t] );\n\n\t// Animation attributes (derived state).\n\tconst animationDirection =\n\t\t( isRTL && isBack ) || ( ! isRTL && ! isBack ) ? 'end' : 'start';\n\tconst isAnimatingIn = animationStatus === 'ANIMATING_IN';\n\tconst isAnimatingOut = animationStatus === 'ANIMATING_OUT';\n\tlet animationType: 'in' | 'out' | undefined;\n\tif ( isAnimatingIn ) {\n\t\tanimationType = 'in';\n\t} else if ( isAnimatingOut ) {\n\t\tanimationType = 'out';\n\t}\n\n\tconst onScreenAnimationEnd = useCallback(\n\t\t( e: React.AnimationEvent< HTMLElement > ) => {\n\t\t\tonAnimationEnd?.( e );\n\n\t\t\tif (\n\t\t\t\tisExitAnimation(\n\t\t\t\t\tanimationDirection,\n\t\t\t\t\tanimationStatus,\n\t\t\t\t\te.animationName\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\t// When the exit animation ends on an unselected screen, set the\n\t\t\t\t// status to 'OUT' to remove the screen contents from the DOM.\n\t\t\t\tsetAnimationStatus( 'OUT' );\n\t\t\t} else if (\n\t\t\t\tisEnterAnimation(\n\t\t\t\t\tanimationDirection,\n\t\t\t\t\tanimationStatus,\n\t\t\t\t\te.animationName\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\t// When the enter animation ends on a selected screen, set the\n\t\t\t\t// status to 'IN' to ensure the screen is rendered in the DOM.\n\t\t\t\tsetAnimationStatus( 'IN' );\n\t\t\t}\n\t\t},\n\t\t[ onAnimationEnd, animationStatus, animationDirection ]\n\t);\n\n\t// Fallback timeout to ensure that the logic is applied even if the\n\t// `animationend` event is not triggered.\n\tuseEffect( () => {\n\t\tlet animationTimeout: number | undefined;\n\n\t\tif ( isAnimatingOut ) {\n\t\t\tanimationTimeout = window.setTimeout( () => {\n\t\t\t\tsetAnimationStatus( 'OUT' );\n\t\t\t\tanimationTimeout = undefined;\n\t\t\t}, styles.TOTAL_ANIMATION_DURATION.OUT * ANIMATION_TIMEOUT_MARGIN );\n\t\t} else if ( isAnimatingIn ) {\n\t\t\tanimationTimeout = window.setTimeout( () => {\n\t\t\t\tsetAnimationStatus( 'IN' );\n\t\t\t\tanimationTimeout = undefined;\n\t\t\t}, styles.TOTAL_ANIMATION_DURATION.IN * ANIMATION_TIMEOUT_MARGIN );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( animationTimeout ) {\n\t\t\t\twindow.clearTimeout( animationTimeout );\n\t\t\t\tanimationTimeout = undefined;\n\t\t\t}\n\t\t};\n\t}, [ isAnimatingOut, isAnimatingIn ] );\n\n\treturn {\n\t\tanimationStyles: styles.navigatorScreenAnimation,\n\t\t// Render the screen's contents in the DOM not only when the screen is\n\t\t// selected, but also while it is animating out.\n\t\tshouldRenderScreen:\n\t\t\tisMatch ||\n\t\t\tanimationStatus === 'IN' ||\n\t\t\tanimationStatus === 'ANIMATING_OUT',\n\t\tscreenProps: {\n\t\t\tonAnimationEnd: onScreenAnimationEnd,\n\t\t\t'data-animation-direction': animationDirection,\n\t\t\t'data-animation-type': animationType,\n\t\t\t'data-skip-animation': skipAnimation || undefined,\n\t\t},\n\t} as const;\n}\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/navigator/navigator-screen/use-screen-animate-presence.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useLayoutEffect, useCallback } from '@wordpress/element';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { isRTL as isRTLFn } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\n\n// Possible values:\n// - 'INITIAL': the initial state\n// - 'ANIMATING_IN': start enter animation\n// - 'IN': enter animation has ended\n// - 'ANIMATING_OUT': start exit animation\n// - 'OUT': the exit animation has ended\n\n// Allow an extra 20% of the total animation duration to account for potential\n// event loop delays.\nconst ANIMATION_TIMEOUT_MARGIN = 1.2;\nconst isEnterAnimation = (animationDirection, animationStatus, animationName) => animationStatus === 'ANIMATING_IN' && animationName === styles.ANIMATION_END_NAMES[animationDirection].in;\nconst isExitAnimation = (animationDirection, animationStatus, animationName) => animationStatus === 'ANIMATING_OUT' && animationName === styles.ANIMATION_END_NAMES[animationDirection].out;\nexport function useScreenAnimatePresence({\n  isMatch,\n  skipAnimation,\n  isBack,\n  onAnimationEnd\n}) {\n  const isRTL = isRTLFn();\n  const prefersReducedMotion = useReducedMotion();\n  const [animationStatus, setAnimationStatus] = useState('INITIAL');\n\n  // Start enter and exit animations when the screen is selected or deselected.\n  // The animation status is set to `IN` or `OUT` immediately if the animation\n  // should be skipped.\n  const becameSelected = animationStatus !== 'ANIMATING_IN' && animationStatus !== 'IN' && isMatch;\n  const becameUnselected = animationStatus !== 'ANIMATING_OUT' && animationStatus !== 'OUT' && !isMatch;\n  useLayoutEffect(() => {\n    if (becameSelected) {\n      setAnimationStatus(skipAnimation || prefersReducedMotion ? 'IN' : 'ANIMATING_IN');\n    } else if (becameUnselected) {\n      setAnimationStatus(skipAnimation || prefersReducedMotion ? 'OUT' : 'ANIMATING_OUT');\n    }\n  }, [becameSelected, becameUnselected, skipAnimation, prefersReducedMotion]);\n\n  // Animation attributes (derived state).\n  const animationDirection = isRTL && isBack || !isRTL && !isBack ? 'end' : 'start';\n  const isAnimatingIn = animationStatus === 'ANIMATING_IN';\n  const isAnimatingOut = animationStatus === 'ANIMATING_OUT';\n  let animationType;\n  if (isAnimatingIn) {\n    animationType = 'in';\n  } else if (isAnimatingOut) {\n    animationType = 'out';\n  }\n  const onScreenAnimationEnd = useCallback(e => {\n    onAnimationEnd?.(e);\n    if (isExitAnimation(animationDirection, animationStatus, e.animationName)) {\n      // When the exit animation ends on an unselected screen, set the\n      // status to 'OUT' to remove the screen contents from the DOM.\n      setAnimationStatus('OUT');\n    } else if (isEnterAnimation(animationDirection, animationStatus, e.animationName)) {\n      // When the enter animation ends on a selected screen, set the\n      // status to 'IN' to ensure the screen is rendered in the DOM.\n      setAnimationStatus('IN');\n    }\n  }, [onAnimationEnd, animationStatus, animationDirection]);\n\n  // Fallback timeout to ensure that the logic is applied even if the\n  // `animationend` event is not triggered.\n  useEffect(() => {\n    let animationTimeout;\n    if (isAnimatingOut) {\n      animationTimeout = window.setTimeout(() => {\n        setAnimationStatus('OUT');\n        animationTimeout = undefined;\n      }, styles.TOTAL_ANIMATION_DURATION.OUT * ANIMATION_TIMEOUT_MARGIN);\n    } else if (isAnimatingIn) {\n      animationTimeout = window.setTimeout(() => {\n        setAnimationStatus('IN');\n        animationTimeout = undefined;\n      }, styles.TOTAL_ANIMATION_DURATION.IN * ANIMATION_TIMEOUT_MARGIN);\n    }\n    return () => {\n      if (animationTimeout) {\n        window.clearTimeout(animationTimeout);\n        animationTimeout = undefined;\n      }\n    };\n  }, [isAnimatingOut, isAnimatingIn]);\n  return {\n    animationStyles: styles.navigatorScreenAnimation,\n    // Render the screen's contents in the DOM not only when the screen is\n    // selected, but also while it is animating out.\n    shouldRenderScreen: isMatch || animationStatus === 'IN' || animationStatus === 'ANIMATING_OUT',\n    screenProps: {\n      onAnimationEnd: onScreenAnimationEnd,\n      'data-animation-direction': animationDirection,\n      'data-animation-type': animationType,\n      'data-skip-animation': skipAnimation || undefined\n    }\n  };\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAkE;AAClE,qBAAiC;AACjC,kBAAiC;AAKjC,aAAwB;AAWxB,MAAM,2BAA2B;AACjC,MAAM,mBAAmB,CAAC,oBAAoB,iBAAiB,kBAAkB,oBAAoB,kBAAkB,kBAAkB,OAAO,oBAAoB,kBAAkB,EAAE;AACxL,MAAM,kBAAkB,CAAC,oBAAoB,iBAAiB,kBAAkB,oBAAoB,mBAAmB,kBAAkB,OAAO,oBAAoB,kBAAkB,EAAE;AACjL,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,YAAQ,YAAAA,OAAQ;AACtB,QAAM,2BAAuB,iCAAiB;AAC9C,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,yBAAS,SAAS;AAKhE,QAAM,iBAAiB,oBAAoB,kBAAkB,oBAAoB,QAAQ;AACzF,QAAM,mBAAmB,oBAAoB,mBAAmB,oBAAoB,SAAS,CAAC;AAC9F,sCAAgB,MAAM;AACpB,QAAI,gBAAgB;AAClB,yBAAmB,iBAAiB,uBAAuB,OAAO,cAAc;AAAA,IAClF,WAAW,kBAAkB;AAC3B,yBAAmB,iBAAiB,uBAAuB,QAAQ,eAAe;AAAA,IACpF;AAAA,EACF,GAAG,CAAC,gBAAgB,kBAAkB,eAAe,oBAAoB,CAAC;AAG1E,QAAM,qBAAqB,SAAS,UAAU,CAAC,SAAS,CAAC,SAAS,QAAQ;AAC1E,QAAM,gBAAgB,oBAAoB;AAC1C,QAAM,iBAAiB,oBAAoB;AAC3C,MAAI;AACJ,MAAI,eAAe;AACjB,oBAAgB;AAAA,EAClB,WAAW,gBAAgB;AACzB,oBAAgB;AAAA,EAClB;AACA,QAAM,2BAAuB,4BAAY,OAAK;AAC5C,qBAAiB,CAAC;AAClB,QAAI,gBAAgB,oBAAoB,iBAAiB,EAAE,aAAa,GAAG;AAGzE,yBAAmB,KAAK;AAAA,IAC1B,WAAW,iBAAiB,oBAAoB,iBAAiB,EAAE,aAAa,GAAG;AAGjF,yBAAmB,IAAI;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,gBAAgB,iBAAiB,kBAAkB,CAAC;AAIxD,gCAAU,MAAM;AACd,QAAI;AACJ,QAAI,gBAAgB;AAClB,yBAAmB,OAAO,WAAW,MAAM;AACzC,2BAAmB,KAAK;AACxB,2BAAmB;AAAA,MACrB,GAAG,OAAO,yBAAyB,MAAM,wBAAwB;AAAA,IACnE,WAAW,eAAe;AACxB,yBAAmB,OAAO,WAAW,MAAM;AACzC,2BAAmB,IAAI;AACvB,2BAAmB;AAAA,MACrB,GAAG,OAAO,yBAAyB,KAAK,wBAAwB;AAAA,IAClE;AACA,WAAO,MAAM;AACX,UAAI,kBAAkB;AACpB,eAAO,aAAa,gBAAgB;AACpC,2BAAmB;AAAA,MACrB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,gBAAgB,aAAa,CAAC;AAClC,SAAO;AAAA,IACL,iBAAiB,OAAO;AAAA;AAAA;AAAA,IAGxB,oBAAoB,WAAW,oBAAoB,QAAQ,oBAAoB;AAAA,IAC/E,aAAa;AAAA,MACX,gBAAgB;AAAA,MAChB,4BAA4B;AAAA,MAC5B,uBAAuB;AAAA,MACvB,uBAAuB,iBAAiB;AAAA,IAC1C;AAAA,EACF;AACF;",
+  "names": ["isRTLFn"]
+}