@wordpress/components 30.5.1-next.f56bd8138.0 → 30.6.0

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

@@ -1,25 +1,17 @@
-/**
- * WordPress dependencies
- */
-import { useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-
-import { useContextSystem } from '../../context';
-import Button from '../../button';
-import { useNavigator } from '../use-navigator';
-export function useNavigatorBackButton(props) {
+import { useCallback } from "@wordpress/element";
+import { useContextSystem } from "../../context";
+import Button from "../../button";
+import { useNavigator } from "../use-navigator";
+function useNavigatorBackButton(props) {
   const {
     onClick,
     as = Button,
     ...otherProps
-  } = useContextSystem(props, 'Navigator.BackButton');
+  } = useContextSystem(props, "Navigator.BackButton");
   const {
     goBack
   } = useNavigator();
-  const handleClick = useCallback(e => {
+  const handleClick = useCallback((e) => {
     e.preventDefault();
     goBack();
     onClick?.(e);
@@ -30,4 +22,7 @@ export function useNavigatorBackButton(props) {
     ...otherProps
   };
 }
-//# sourceMappingURL=hook.js.map
+export {
+  useNavigatorBackButton
+};
+//# sourceMappingURL=hook.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["useCallback","useContextSystem","Button","useNavigator","useNavigatorBackButton","props","onClick","as","otherProps","goBack","handleClick","e","preventDefault"],"sources":["@wordpress/components/src/navigator/navigator-back-button/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\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 { NavigatorBackButtonProps } from '../types';\n\nexport function useNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonProps, 'button' >\n) {\n\tconst {\n\t\tonClick,\n\t\tas = Button,\n\n\t\t...otherProps\n\t} = useContextSystem( props, 'Navigator.BackButton' );\n\n\tconst { goBack } = 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\tgoBack();\n\t\t\t\tonClick?.( e );\n\t\t\t},\n\t\t\t[ goBack, onClick ]\n\t\t);\n\n\treturn {\n\t\tas,\n\t\tonClick: handleClick,\n\t\t...otherProps,\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,oBAAoB;;AAEhD;AACA;AACA;;AAEA,SAASC,gBAAgB,QAAQ,eAAe;AAChD,OAAOC,MAAM,MAAM,cAAc;AACjC,SAASC,YAAY,QAAQ,kBAAkB;AAG/C,OAAO,SAASC,sBAAsBA,CACrCC,KAAoE,EACnE;EACD,MAAM;IACLC,OAAO;IACPC,EAAE,GAAGL,MAAM;IAEX,GAAGM;EACJ,CAAC,GAAGP,gBAAgB,CAAEI,KAAK,EAAE,sBAAuB,CAAC;EAErD,MAAM;IAAEI;EAAO,CAAC,GAAGN,YAAY,CAAC,CAAC;EACjC,MAAMO,WAAyD,GAC9DV,WAAW,CACRW,CAAC,IAAM;IACRA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClBH,MAAM,CAAC,CAAC;IACRH,OAAO,GAAIK,CAAE,CAAC;EACf,CAAC,EACD,CAAEF,MAAM,EAAEH,OAAO,CAClB,CAAC;EAEF,OAAO;IACNC,EAAE;IACFD,OAAO,EAAEI,WAAW;IACpB,GAAGF;EACJ,CAAC;AACF","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/navigator/navigator-back-button/hook.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useContextSystem } from '../../context';\nimport Button from '../../button';\nimport { useNavigator } from '../use-navigator';\nexport function useNavigatorBackButton(props) {\n  const {\n    onClick,\n    as = Button,\n    ...otherProps\n  } = useContextSystem(props, 'Navigator.BackButton');\n  const {\n    goBack\n  } = useNavigator();\n  const handleClick = useCallback(e => {\n    e.preventDefault();\n    goBack();\n    onClick?.(e);\n  }, [goBack, onClick]);\n  return {\n    as,\n    onClick: handleClick,\n    ...otherProps\n  };\n}"],
+  "mappings": "AAGA,SAAS,mBAAmB;AAM5B,SAAS,wBAAwB;AACjC,OAAO,YAAY;AACnB,SAAS,oBAAoB;AACtB,SAAS,uBAAuB,OAAO;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,KAAK;AAAA,IACL,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,sBAAsB;AAClD,QAAM;AAAA,IACJ;AAAA,EACF,IAAI,aAAa;AACjB,QAAM,cAAc,YAAY,OAAK;AACnC,MAAE,eAAe;AACjB,WAAO;AACP,cAAU,CAAC;AAAA,EACb,GAAG,CAAC,QAAQ,OAAO,CAAC;AACpB,SAAO;AAAA,IACL;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EACL;AACF;",
+  "names": []
+}

package/build-module/navigator/navigator-button/component.js

@@ -1,21 +1,16 @@
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-import { contextConnect } from '../../context';
-import { View } from '../../view';
-import { useNavigatorButton } from './hook';
+import { contextConnect } from "../../context";
+import { View } from "../../view";
+import { useNavigatorButton } from "./hook";
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedNavigatorButton(props, forwardedRef) {
   const navigatorButtonProps = useNavigatorButton(props);
-  return /*#__PURE__*/_jsx(View, {
+  return /* @__PURE__ */ _jsx(View, {
     ref: forwardedRef,
     ...navigatorButtonProps
   });
 }
-export const NavigatorButton = contextConnect(UnconnectedNavigatorButton, 'Navigator.Button');
-//# sourceMappingURL=component.js.map
+const NavigatorButton = contextConnect(UnconnectedNavigatorButton, "Navigator.Button");
+export {
+  NavigatorButton
+};
+//# sourceMappingURL=component.js.map

package/build-module/navigator/navigator-button/component.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["contextConnect","View","useNavigatorButton","jsx","_jsx","UnconnectedNavigatorButton","props","forwardedRef","navigatorButtonProps","ref","NavigatorButton"],"sources":["@wordpress/components/src/navigator/navigator-button/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport { useNavigatorButton } from './hook';\nimport type { NavigatorButtonProps } from '../types';\n\nfunction UnconnectedNavigatorButton(\n\tprops: WordPressComponentProps< NavigatorButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorButtonProps = useNavigatorButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorButtonProps } />;\n}\n\nexport const NavigatorButton = contextConnect(\n\tUnconnectedNavigatorButton,\n\t'Navigator.Button'\n);\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,kBAAkB,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG5C,SAASC,0BAA0BA,CAClCC,KAAgE,EAChEC,YAAiC,EAChC;EACD,MAAMC,oBAAoB,GAAGN,kBAAkB,CAAEI,KAAM,CAAC;EAExD,oBAAOF,IAAA,CAACH,IAAI;IAACQ,GAAG,EAAGF,YAAc;IAAA,GAAMC;EAAoB,CAAI,CAAC;AACjE;AAEA,OAAO,MAAME,eAAe,GAAGV,cAAc,CAC5CK,0BAA0B,EAC1B,kBACD,CAAC","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/navigator/navigator-button/component.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport { useNavigatorButton } from './hook';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedNavigatorButton(props, forwardedRef) {\n  const navigatorButtonProps = useNavigatorButton(props);\n  return /*#__PURE__*/_jsx(View, {\n    ref: forwardedRef,\n    ...navigatorButtonProps\n  });\n}\nexport const NavigatorButton = contextConnect(UnconnectedNavigatorButton, 'Navigator.Button');"],
+  "mappings": "AAQA,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,SAAS,OAAO,YAAY;AAC5B,SAAS,2BAA2B,OAAO,cAAc;AACvD,QAAM,uBAAuB,mBAAmB,KAAK;AACrD,SAAoB,qBAAK,MAAM;AAAA,IAC7B,KAAK;AAAA,IACL,GAAG;AAAA,EACL,CAAC;AACH;AACO,MAAM,kBAAkB,eAAe,4BAA4B,kBAAkB;",
+  "names": []
+}

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

@@ -1,30 +1,22 @@
-/**
- * WordPress dependencies
- */
-import { useCallback } from '@wordpress/element';
-import { escapeAttribute } from '@wordpress/escape-html';
-
-/**
- * Internal dependencies
- */
-
-import { useContextSystem } from '../../context';
-import Button from '../../button';
-import { useNavigator } from '../use-navigator';
+import { useCallback } from "@wordpress/element";
+import { escapeAttribute } from "@wordpress/escape-html";
+import { useContextSystem } from "../../context";
+import Button from "../../button";
+import { useNavigator } from "../use-navigator";
 const cssSelectorForAttribute = (attrName, attrValue) => `[${attrName}="${attrValue}"]`;
-export function useNavigatorButton(props) {
+function useNavigatorButton(props) {
   const {
     path,
     onClick,
     as = Button,
-    attributeName = 'id',
+    attributeName = "id",
     ...otherProps
-  } = useContextSystem(props, 'Navigator.Button');
+  } = useContextSystem(props, "Navigator.Button");
   const escapedPath = escapeAttribute(path);
   const {
     goTo
   } = useNavigator();
-  const handleClick = useCallback(e => {
+  const handleClick = useCallback((e) => {
     e.preventDefault();
     goTo(escapedPath, {
       focusTargetSelector: cssSelectorForAttribute(attributeName, escapedPath)
@@ -38,4 +30,7 @@ export function useNavigatorButton(props) {
     [attributeName]: escapedPath
   };
 }
-//# sourceMappingURL=hook.js.map
+export {
+  useNavigatorButton
+};
+//# sourceMappingURL=hook.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["useCallback","escapeAttribute","useContextSystem","Button","useNavigator","cssSelectorForAttribute","attrName","attrValue","useNavigatorButton","props","path","onClick","as","attributeName","otherProps","escapedPath","goTo","handleClick","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":"AAAA;AACA;AACA;AACA,SAASA,WAAW,QAAQ,oBAAoB;AAChD,SAASC,eAAe,QAAQ,wBAAwB;;AAExD;AACA;AACA;;AAEA,SAASC,gBAAgB,QAAQ,eAAe;AAChD,OAAOC,MAAM,MAAM,cAAc;AACjC,SAASC,YAAY,QAAQ,kBAAkB;AAG/C,MAAMC,uBAAuB,GAAGA,CAAEC,QAAgB,EAAEC,SAAiB,KACpE,IAAKD,QAAQ,KAAOC,SAAS,IAAK;AAEnC,OAAO,SAASC,kBAAkBA,CACjCC,KAAgE,EAC/D;EACD,MAAM;IACLC,IAAI;IACJC,OAAO;IACPC,EAAE,GAAGT,MAAM;IACXU,aAAa,GAAG,IAAI;IACpB,GAAGC;EACJ,CAAC,GAAGZ,gBAAgB,CAAEO,KAAK,EAAE,kBAAmB,CAAC;EAEjD,MAAMM,WAAW,GAAGd,eAAe,CAAES,IAAK,CAAC;EAE3C,MAAM;IAAEM;EAAK,CAAC,GAAGZ,YAAY,CAAC,CAAC;EAC/B,MAAMa,WAAyD,GAC9DjB,WAAW,CACRkB,CAAC,IAAM;IACRA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClBH,IAAI,CAAED,WAAW,EAAE;MAClBK,mBAAmB,EAAEf,uBAAuB,CAC3CQ,aAAa,EACbE,WACD;IACD,CAAE,CAAC;IACHJ,OAAO,GAAIO,CAAE,CAAC;EACf,CAAC,EACD,CAAEF,IAAI,EAAEL,OAAO,EAAEE,aAAa,EAAEE,WAAW,CAC5C,CAAC;EAEF,OAAO;IACNH,EAAE;IACFD,OAAO,EAAEM,WAAW;IACpB,GAAGH,UAAU;IACb,CAAED,aAAa,GAAIE;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": "AAGA,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAMhC,SAAS,wBAAwB;AACjC,OAAO,YAAY;AACnB,SAAS,oBAAoB;AAC7B,MAAM,0BAA0B,CAAC,UAAU,cAAc,IAAI,QAAQ,KAAK,SAAS;AAC5E,SAAS,mBAAmB,OAAO;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,kBAAkB;AAC9C,QAAM,cAAc,gBAAgB,IAAI;AACxC,QAAM;AAAA,IACJ;AAAA,EACF,IAAI,aAAa;AACjB,QAAM,cAAc,YAAY,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": []
+}

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

@@ -1,30 +1,18 @@
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-import { focus } from '@wordpress/dom';
-import { useContext, useEffect, useMemo, useRef, useId } from '@wordpress/element';
-import { useMergeRefs } from '@wordpress/compose';
-import { escapeAttribute } from '@wordpress/escape-html';
-import warning from '@wordpress/warning';
-
-/**
- * Internal dependencies
- */
-
-import { contextConnect, useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
-import { View } from '../../view';
-import { NavigatorContext } from '../context';
-import * as styles from '../styles';
-import { useScreenAnimatePresence } from './use-screen-animate-presence';
+import { focus } from "@wordpress/dom";
+import { useContext, useEffect, useMemo, useRef, useId } from "@wordpress/element";
+import { useMergeRefs } from "@wordpress/compose";
+import { escapeAttribute } from "@wordpress/escape-html";
+import warning from "@wordpress/warning";
+import { contextConnect, useContextSystem } from "../../context";
+import { useCx } from "../../utils/hooks/use-cx";
+import { View } from "../../view";
+import { NavigatorContext } from "../context";
+import * as styles from "../styles";
+import { useScreenAnimatePresence } from "./use-screen-animate-presence";
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedNavigatorScreen(props, forwardedRef) {
   if (!/^\//.test(props.path)) {
-    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;
+    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;
   }
   const screenId = useId();
   const {
@@ -33,7 +21,7 @@ function UnconnectedNavigatorScreen(props, forwardedRef) {
     path,
     onAnimationEnd: onAnimationEndProp,
     ...otherProps
-  } = useContextSystem(props, 'Navigator.Screen');
+  } = useContextSystem(props, "Navigator.Screen");
   const {
     location,
     match,
@@ -49,8 +37,6 @@ function UnconnectedNavigatorScreen(props, forwardedRef) {
   const isMatch = match === screenId;
   const wrapperRef = useRef(null);
   const skipAnimationAndFocusRestoration = !!isInitial && !isBack;
-
-  // Register / unregister screen with the navigator context.
   useEffect(() => {
     const screen = {
       id: screenId,
@@ -59,8 +45,6 @@ function UnconnectedNavigatorScreen(props, forwardedRef) {
     addScreen(screen);
     return () => removeScreen(screen);
   }, [screenId, path, addScreen, removeScreen]);
-
-  // Animation.
   const {
     animationStyles,
     shouldRenderScreen,
@@ -73,40 +57,23 @@ function UnconnectedNavigatorScreen(props, forwardedRef) {
   });
   const cx = useCx();
   const classes = useMemo(() => cx(styles.navigatorScreen, animationStyles, className), [className, cx, animationStyles]);
-
-  // Focus restoration
   const locationRef = useRef(location);
   useEffect(() => {
     locationRef.current = location;
   }, [location]);
   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] = focus.tabbable.find(wrapperEl);
       elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperEl;
@@ -115,13 +82,16 @@ function UnconnectedNavigatorScreen(props, forwardedRef) {
     elementToFocus.focus();
   }, [skipAnimationAndFocusRestoration, isMatch, isBack, focusTargetSelector, skipFocus]);
   const mergedWrapperRef = useMergeRefs([forwardedRef, wrapperRef]);
-  return shouldRenderScreen ? /*#__PURE__*/_jsx(View, {
+  return shouldRenderScreen ? /* @__PURE__ */ _jsx(View, {
     ref: mergedWrapperRef,
     className: classes,
     ...screenProps,
     ...otherProps,
-    children: children
+    children
   }) : null;
 }
-export const NavigatorScreen = contextConnect(UnconnectedNavigatorScreen, 'Navigator.Screen');
-//# sourceMappingURL=component.js.map
+const NavigatorScreen = contextConnect(UnconnectedNavigatorScreen, "Navigator.Screen");
+export {
+  NavigatorScreen
+};
+//# sourceMappingURL=component.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["focus","useContext","useEffect","useMemo","useRef","useId","useMergeRefs","escapeAttribute","warning","contextConnect","useContextSystem","useCx","View","NavigatorContext","styles","useScreenAnimatePresence","jsx","_jsx","UnconnectedNavigatorScreen","props","forwardedRef","test","path","globalThis","SCRIPT_DEBUG","screenId","children","className","onAnimationEnd","onAnimationEndProp","otherProps","location","match","addScreen","removeScreen","isInitial","isBack","focusTargetSelector","skipFocus","isMatch","wrapperRef","skipAnimationAndFocusRestoration","screen","id","animationStyles","shouldRenderScreen","screenProps","skipAnimation","cx","classes","navigatorScreen","locationRef","current","wrapperEl","hasRestoredFocus","activeElement","ownerDocument","contains","elementToFocus","querySelector","firstTabbable","tabbable","find","mergedWrapperRef","ref","NavigatorScreen"],"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": "AAOA,SAAS,aAAa;AACtB,SAAS,YAAY,WAAW,SAAS,QAAQ,aAAa;AAC9D,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,OAAO,aAAa;AAMpB,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,wBAAwB;AACjC,YAAY,YAAY;AACxB,SAAS,gCAAgC;AACzC,SAAS,OAAO,YAAY;AAC5B,SAAS,2BAA2B,OAAO,cAAc;AACvD,MAAI,CAAC,MAAM,KAAK,MAAM,IAAI,GAAG;AAC3B,eAAW,iBAAiB,OAAO,QAAQ,yIAAyI,IAAI;AAAA,EAC1L;AACA,QAAM,WAAW,MAAM;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,kBAAkB;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,UAAU,UAAU;AAC1B,QAAM,aAAa,OAAO,IAAI;AAC9B,QAAM,mCAAmC,CAAC,CAAC,aAAa,CAAC;AAGzD,YAAU,MAAM;AACd,UAAM,SAAS;AAAA,MACb,IAAI;AAAA,MACJ,MAAM,gBAAgB,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,IAAI,yBAAyB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,eAAe;AAAA,EACjB,CAAC;AACD,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM,GAAG,OAAO,iBAAiB,iBAAiB,SAAS,GAAG,CAAC,WAAW,IAAI,eAAe,CAAC;AAGtH,QAAM,cAAc,OAAO,QAAQ;AACnC,YAAU,MAAM;AACd,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,QAAQ,CAAC;AACb,YAAU,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,MAAM,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,mBAAmB,aAAa,CAAC,cAAc,UAAU,CAAC;AAChE,SAAO,qBAAkC,qBAAK,MAAM;AAAA,IAClD,KAAK;AAAA,IACL,WAAW;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,IACH;AAAA,EACF,CAAC,IAAI;AACP;AACO,MAAM,kBAAkB,eAAe,4BAA4B,kBAAkB;",
+  "names": []
+}

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

@@ -1,28 +1,11 @@
-/**
- * WordPress dependencies
- */
-import { useState, useEffect, useLayoutEffect, useCallback } from '@wordpress/element';
-import { useReducedMotion } from '@wordpress/compose';
-import { isRTL as isRTLFn } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import * as styles from '../styles';
-
-// 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.
+import { useState, useEffect, useLayoutEffect, useCallback } from "@wordpress/element";
+import { useReducedMotion } from "@wordpress/compose";
+import { isRTL as isRTLFn } from "@wordpress/i18n";
+import * as styles from "../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;
-export function useScreenAnimatePresence({
+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,
@@ -30,63 +13,50 @@ export function useScreenAnimatePresence({
 }) {
   const isRTL = isRTLFn();
   const prefersReducedMotion = useReducedMotion();
-  const [animationStatus, setAnimationStatus] = 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;
+  const [animationStatus, setAnimationStatus] = useState("INITIAL");
+  const becameSelected = animationStatus !== "ANIMATING_IN" && animationStatus !== "IN" && isMatch;
+  const becameUnselected = animationStatus !== "ANIMATING_OUT" && animationStatus !== "OUT" && !isMatch;
   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 = useCallback(e => {
+  const onScreenAnimationEnd = 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.
   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]);
@@ -94,13 +64,16 @@ export 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
+export {
+  useScreenAnimatePresence
+};
+//# sourceMappingURL=use-screen-animate-presence.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["useState","useEffect","useLayoutEffect","useCallback","useReducedMotion","isRTL","isRTLFn","styles","ANIMATION_TIMEOUT_MARGIN","isEnterAnimation","animationDirection","animationStatus","animationName","ANIMATION_END_NAMES","in","isExitAnimation","out","useScreenAnimatePresence","isMatch","skipAnimation","isBack","onAnimationEnd","prefersReducedMotion","setAnimationStatus","becameSelected","becameUnselected","isAnimatingIn","isAnimatingOut","animationType","onScreenAnimationEnd","e","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":"AAAA;AACA;AACA;AACA,SACCA,QAAQ,EACRC,SAAS,EACTC,eAAe,EACfC,WAAW,QACL,oBAAoB;AAC3B,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,KAAK,IAAIC,OAAO,QAAQ,iBAAiB;;AAElD;AACA;AACA;AACA,OAAO,KAAKC,MAAM,MAAM,WAAW;;AAEnC;AACA;AACA;AACA;AACA;AACA;;AAQA;AACA;AACA,MAAMC,wBAAwB,GAAG,GAAG;AAEpC,MAAMC,gBAAgB,GAAGA,CACxBC,kBAAmC,EACnCC,eAAgC,EAChCC,aAAqB,KAErBD,eAAe,KAAK,cAAc,IAClCC,aAAa,KAAKL,MAAM,CAACM,mBAAmB,CAAEH,kBAAkB,CAAE,CAACI,EAAE;AAEtE,MAAMC,eAAe,GAAGA,CACvBL,kBAAmC,EACnCC,eAAgC,EAChCC,aAAqB,KAErBD,eAAe,KAAK,eAAe,IACnCC,aAAa,KAAKL,MAAM,CAACM,mBAAmB,CAAEH,kBAAkB,CAAE,CAACM,GAAG;AAEvE,OAAO,SAASC,wBAAwBA,CAAE;EACzCC,OAAO;EACPC,aAAa;EACbC,MAAM;EACNC;AAMD,CAAC,EAAG;EACH,MAAMhB,KAAK,GAAGC,OAAO,CAAC,CAAC;EACvB,MAAMgB,oBAAoB,GAAGlB,gBAAgB,CAAC,CAAC;EAE/C,MAAM,CAAEO,eAAe,EAAEY,kBAAkB,CAAE,GAC5CvB,QAAQ,CAAqB,SAAU,CAAC;;EAEzC;EACA;EACA;EACA,MAAMwB,cAAc,GACnBb,eAAe,KAAK,cAAc,IAClCA,eAAe,KAAK,IAAI,IACxBO,OAAO;EACR,MAAMO,gBAAgB,GACrBd,eAAe,KAAK,eAAe,IACnCA,eAAe,KAAK,KAAK,IACzB,CAAEO,OAAO;EACVhB,eAAe,CAAE,MAAM;IACtB,IAAKsB,cAAc,EAAG;MACrBD,kBAAkB,CACjBJ,aAAa,IAAIG,oBAAoB,GAAG,IAAI,GAAG,cAChD,CAAC;IACF,CAAC,MAAM,IAAKG,gBAAgB,EAAG;MAC9BF,kBAAkB,CACjBJ,aAAa,IAAIG,oBAAoB,GAAG,KAAK,GAAG,eACjD,CAAC;IACF;EACD,CAAC,EAAE,CACFE,cAAc,EACdC,gBAAgB,EAChBN,aAAa,EACbG,oBAAoB,CACnB,CAAC;;EAEH;EACA,MAAMZ,kBAAkB,GACrBL,KAAK,IAAIe,MAAM,IAAQ,CAAEf,KAAK,IAAI,CAAEe,MAAQ,GAAG,KAAK,GAAG,OAAO;EACjE,MAAMM,aAAa,GAAGf,eAAe,KAAK,cAAc;EACxD,MAAMgB,cAAc,GAAGhB,eAAe,KAAK,eAAe;EAC1D,IAAIiB,aAAuC;EAC3C,IAAKF,aAAa,EAAG;IACpBE,aAAa,GAAG,IAAI;EACrB,CAAC,MAAM,IAAKD,cAAc,EAAG;IAC5BC,aAAa,GAAG,KAAK;EACtB;EAEA,MAAMC,oBAAoB,GAAG1B,WAAW,CACrC2B,CAAsC,IAAM;IAC7CT,cAAc,GAAIS,CAAE,CAAC;IAErB,IACCf,eAAe,CACdL,kBAAkB,EAClBC,eAAe,EACfmB,CAAC,CAAClB,aACH,CAAC,EACA;MACD;MACA;MACAW,kBAAkB,CAAE,KAAM,CAAC;IAC5B,CAAC,MAAM,IACNd,gBAAgB,CACfC,kBAAkB,EAClBC,eAAe,EACfmB,CAAC,CAAClB,aACH,CAAC,EACA;MACD;MACA;MACAW,kBAAkB,CAAE,IAAK,CAAC;IAC3B;EACD,CAAC,EACD,CAAEF,cAAc,EAAEV,eAAe,EAAED,kBAAkB,CACtD,CAAC;;EAED;EACA;EACAT,SAAS,CAAE,MAAM;IAChB,IAAI8B,gBAAoC;IAExC,IAAKJ,cAAc,EAAG;MACrBI,gBAAgB,GAAGC,MAAM,CAACC,UAAU,CAAE,MAAM;QAC3CV,kBAAkB,CAAE,KAAM,CAAC;QAC3BQ,gBAAgB,GAAGG,SAAS;MAC7B,CAAC,EAAE3B,MAAM,CAAC4B,wBAAwB,CAACC,GAAG,GAAG5B,wBAAyB,CAAC;IACpE,CAAC,MAAM,IAAKkB,aAAa,EAAG;MAC3BK,gBAAgB,GAAGC,MAAM,CAACC,UAAU,CAAE,MAAM;QAC3CV,kBAAkB,CAAE,IAAK,CAAC;QAC1BQ,gBAAgB,GAAGG,SAAS;MAC7B,CAAC,EAAE3B,MAAM,CAAC4B,wBAAwB,CAACE,EAAE,GAAG7B,wBAAyB,CAAC;IACnE;IAEA,OAAO,MAAM;MACZ,IAAKuB,gBAAgB,EAAG;QACvBC,MAAM,CAACM,YAAY,CAAEP,gBAAiB,CAAC;QACvCA,gBAAgB,GAAGG,SAAS;MAC7B;IACD,CAAC;EACF,CAAC,EAAE,CAAEP,cAAc,EAAED,aAAa,CAAG,CAAC;EAEtC,OAAO;IACNa,eAAe,EAAEhC,MAAM,CAACiC,wBAAwB;IAChD;IACA;IACAC,kBAAkB,EACjBvB,OAAO,IACPP,eAAe,KAAK,IAAI,IACxBA,eAAe,KAAK,eAAe;IACpC+B,WAAW,EAAE;MACZrB,cAAc,EAAEQ,oBAAoB;MACpC,0BAA0B,EAAEnB,kBAAkB;MAC9C,qBAAqB,EAAEkB,aAAa;MACpC,qBAAqB,EAAET,aAAa,IAAIe;IACzC;EACD,CAAC;AACF","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": "AAGA,SAAS,UAAU,WAAW,iBAAiB,mBAAmB;AAClE,SAAS,wBAAwB;AACjC,SAAS,SAAS,eAAe;AAKjC,YAAY,YAAY;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,QAAQ,QAAQ;AACtB,QAAM,uBAAuB,iBAAiB;AAC9C,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,SAAS;AAKhE,QAAM,iBAAiB,oBAAoB,kBAAkB,oBAAoB,QAAQ;AACzF,QAAM,mBAAmB,oBAAoB,mBAAmB,oBAAoB,SAAS,CAAC;AAC9F,kBAAgB,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,uBAAuB,YAAY,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,YAAU,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": []
+}

package/build-module/navigator/navigator-to-parent-button/component.js

@@ -1,27 +1,19 @@
-/**
- * WordPress dependencies
- */
-import deprecated from '@wordpress/deprecated';
-
-/**
- * Internal dependencies
- */
-import { NavigatorBackButton } from '../navigator-back-button/component';
-import { contextConnect } from '../../context';
+import deprecated from "@wordpress/deprecated";
+import { NavigatorBackButton } from "../navigator-back-button/component";
+import { contextConnect } from "../../context";
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedNavigatorToParentButton(props, forwardedRef) {
-  deprecated('wp.components.NavigatorToParentButton', {
-    since: '6.7',
-    alternative: 'wp.components.Navigator.BackButton'
+  deprecated("wp.components.NavigatorToParentButton", {
+    since: "6.7",
+    alternative: "wp.components.Navigator.BackButton"
   });
-  return /*#__PURE__*/_jsx(NavigatorBackButton, {
+  return /* @__PURE__ */ _jsx(NavigatorBackButton, {
     ref: forwardedRef,
     ...props
   });
 }
-
-/**
- * @deprecated
- */
-export const NavigatorToParentButton = contextConnect(UnconnectedNavigatorToParentButton, 'Navigator.ToParentButton');
-//# sourceMappingURL=component.js.map
+const NavigatorToParentButton = contextConnect(UnconnectedNavigatorToParentButton, "Navigator.ToParentButton");
+export {
+  NavigatorToParentButton
+};
+//# sourceMappingURL=component.js.map

package/build-module/navigator/navigator-to-parent-button/component.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["deprecated","NavigatorBackButton","contextConnect","jsx","_jsx","UnconnectedNavigatorToParentButton","props","forwardedRef","since","alternative","ref","NavigatorToParentButton"],"sources":["@wordpress/components/src/navigator/navigator-to-parent-button/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { NavigatorBackButton } from '../navigator-back-button/component';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport type { NavigatorBackButtonProps } from '../types';\n\nfunction UnconnectedNavigatorToParentButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,\n\tforwardedRef: React.ForwardedRef< any >\n) {\n\tdeprecated( 'wp.components.NavigatorToParentButton', {\n\t\tsince: '6.7',\n\t\talternative: 'wp.components.Navigator.BackButton',\n\t} );\n\n\treturn <NavigatorBackButton ref={ forwardedRef } { ...props } />;\n}\n\n/**\n * @deprecated\n */\nexport const NavigatorToParentButton = contextConnect(\n\tUnconnectedNavigatorToParentButton,\n\t'Navigator.ToParentButton'\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,uBAAuB;;AAE9C;AACA;AACA;AACA,SAASC,mBAAmB,QAAQ,oCAAoC;AAExE,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG/C,SAASC,kCAAkCA,CAC1CC,KAAoE,EACpEC,YAAuC,EACtC;EACDP,UAAU,CAAE,uCAAuC,EAAE;IACpDQ,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;EAEH,oBAAOL,IAAA,CAACH,mBAAmB;IAACS,GAAG,EAAGH,YAAc;IAAA,GAAMD;EAAK,CAAI,CAAC;AACjE;;AAEA;AACA;AACA;AACA,OAAO,MAAMK,uBAAuB,GAAGT,cAAc,CACpDG,kCAAkC,EAClC,0BACD,CAAC","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/navigator/navigator-to-parent-button/component.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { NavigatorBackButton } from '../navigator-back-button/component';\nimport { contextConnect } from '../../context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedNavigatorToParentButton(props, forwardedRef) {\n  deprecated('wp.components.NavigatorToParentButton', {\n    since: '6.7',\n    alternative: 'wp.components.Navigator.BackButton'\n  });\n  return /*#__PURE__*/_jsx(NavigatorBackButton, {\n    ref: forwardedRef,\n    ...props\n  });\n}\n\n/**\n * @deprecated\n */\nexport const NavigatorToParentButton = contextConnect(UnconnectedNavigatorToParentButton, 'Navigator.ToParentButton');"],
+  "mappings": "AAGA,OAAO,gBAAgB;AAKvB,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,OAAO,YAAY;AAC5B,SAAS,mCAAmC,OAAO,cAAc;AAC/D,aAAW,yCAAyC;AAAA,IAClD,OAAO;AAAA,IACP,aAAa;AAAA,EACf,CAAC;AACD,SAAoB,qBAAK,qBAAqB;AAAA,IAC5C,KAAK;AAAA,IACL,GAAG;AAAA,EACL,CAAC;AACH;AAKO,MAAM,0BAA0B,eAAe,oCAAoC,0BAA0B;",
+  "names": []
+}