@wordpress/components 31.0.1-next.6deb34194.0 → 31.0.1-next.76cff8c98.0

package/build-module/navigator/index.mjs

@@ -0,0 +1,106 @@
+// packages/components/src/navigator/index.tsx
+import { Navigator as TopLevelNavigator } from "./navigator/component.mjs";
+import { NavigatorScreen } from "./navigator-screen/component.mjs";
+import { NavigatorButton } from "./navigator-button/component.mjs";
+import { NavigatorBackButton } from "./navigator-back-button/component.mjs";
+import { useNavigator } from "./use-navigator.mjs";
+var Navigator = Object.assign(TopLevelNavigator, {
+  /**
+   * The `Navigator.Screen` component represents a single view/screen/panel and
+   * should be used in combination with the `Navigator`, the `Navigator.Button`
+   * and the `Navigator.BackButton` components.
+   *
+   * @example
+   * ```jsx
+   * import { Navigator } from '@wordpress/components';
+   *
+   * const MyNavigation = () => (
+   *   <Navigator initialPath="/">
+   *     <Navigator.Screen path="/">
+   *       <p>This is the home screen.</p>
+   *        <Navigator.Button path="/child">
+   *          Navigate to child screen.
+   *       </Navigator.Button>
+   *     </Navigator.Screen>
+   *
+   *     <Navigator.Screen path="/child">
+   *       <p>This is the child screen.</p>
+   *       <Navigator.BackButton>
+   *         Go back
+   *       </Navigator.BackButton>
+   *     </Navigator.Screen>
+   *   </Navigator>
+   * );
+   * ```
+   */
+  Screen: Object.assign(NavigatorScreen, {
+    displayName: "Navigator.Screen"
+  }),
+  /**
+   * The `Navigator.Button` component can be used to navigate to a screen and
+   * should be used in combination with the `Navigator`, the `Navigator.Screen`
+   * and the `Navigator.BackButton` components.
+   *
+   * @example
+   * ```jsx
+   * import { Navigator } from '@wordpress/components';
+   *
+   * const MyNavigation = () => (
+   *   <Navigator initialPath="/">
+   *     <Navigator.Screen path="/">
+   *       <p>This is the home screen.</p>
+   *        <Navigator.Button path="/child">
+   *          Navigate to child screen.
+   *       </Navigator.Button>
+   *     </Navigator.Screen>
+   *
+   *     <Navigator.Screen path="/child">
+   *       <p>This is the child screen.</p>
+   *       <Navigator.BackButton>
+   *         Go back
+   *       </Navigator.BackButton>
+   *     </Navigator.Screen>
+   *   </Navigator>
+   * );
+   * ```
+   */
+  Button: Object.assign(NavigatorButton, {
+    displayName: "Navigator.Button"
+  }),
+  /**
+   * The `Navigator.BackButton` component can be used to navigate to a screen and
+   * should be used in combination with the `Navigator`, the `Navigator.Screen`
+   * and the `Navigator.Button` components.
+   *
+   * @example
+   * ```jsx
+   * import { Navigator } from '@wordpress/components';
+   *
+   * const MyNavigation = () => (
+   *   <Navigator initialPath="/">
+   *     <Navigator.Screen path="/">
+   *       <p>This is the home screen.</p>
+   *        <Navigator.Button path="/child">
+   *          Navigate to child screen.
+   *       </Navigator.Button>
+   *     </Navigator.Screen>
+   *
+   *     <Navigator.Screen path="/child">
+   *       <p>This is the child screen.</p>
+   *       <Navigator.BackButton>
+   *         Go back
+   *       </Navigator.BackButton>
+   *     </Navigator.Screen>
+   *   </Navigator>
+   * );
+   * ```
+   */
+  BackButton: Object.assign(NavigatorBackButton, {
+    displayName: "Navigator.BackButton"
+  })
+});
+export {
+  Navigator,
+  useNavigator
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/navigator/legacy.mjs

@@ -0,0 +1,31 @@
+// packages/components/src/navigator/legacy.ts
+import { Navigator as InternalNavigator } from "./navigator/component.mjs";
+import { NavigatorScreen as InternalNavigatorScreen } from "./navigator-screen/component.mjs";
+import { NavigatorButton as InternalNavigatorButton } from "./navigator-button/component.mjs";
+import { NavigatorBackButton as InternalNavigatorBackButton } from "./navigator-back-button/component.mjs";
+import { NavigatorToParentButton as InternalNavigatorToParentButton } from "./navigator-to-parent-button/component.mjs";
+import { useNavigator } from "./use-navigator.mjs";
+var NavigatorProvider = Object.assign(InternalNavigator, {
+  displayName: "NavigatorProvider"
+});
+var NavigatorScreen = Object.assign(InternalNavigatorScreen, {
+  displayName: "NavigatorScreen"
+});
+var NavigatorButton = Object.assign(InternalNavigatorButton, {
+  displayName: "NavigatorButton"
+});
+var NavigatorBackButton = Object.assign(InternalNavigatorBackButton, {
+  displayName: "NavigatorBackButton"
+});
+var NavigatorToParentButton = Object.assign(InternalNavigatorToParentButton, {
+  displayName: "NavigatorToParentButton"
+});
+export {
+  NavigatorBackButton,
+  NavigatorButton,
+  NavigatorProvider,
+  NavigatorScreen,
+  NavigatorToParentButton,
+  useNavigator
+};
+//# sourceMappingURL=legacy.mjs.map

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

@@ -0,0 +1,230 @@
+// packages/components/src/navigator/navigator/component.tsx
+import deprecated from "@wordpress/deprecated";
+import { useMemo, useReducer } from "@wordpress/element";
+import { isShallowEqual } from "@wordpress/is-shallow-equal";
+import warning from "@wordpress/warning";
+import { contextConnect, useContextSystem } from "../../context/index.mjs";
+import { useCx } from "../../utils/hooks/use-cx.mjs";
+import { patternMatch, findParent } from "../utils/router.mjs";
+import { View } from "../../view/index.mjs";
+import { NavigatorContext } from "../context.mjs";
+import * as styles from "../styles.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+function addScreen({
+  screens
+}, screen) {
+  if (screens.some((s) => s.path === screen.path)) {
+    globalThis.SCRIPT_DEBUG === true ? warning(`Navigator: a screen with path ${screen.path} already exists.
+The screen with id ${screen.id} will not be added.`) : void 0;
+    return screens;
+  }
+  return [...screens, screen];
+}
+function removeScreen({
+  screens
+}, screen) {
+  return screens.filter((s) => s.id !== screen.id);
+}
+function goTo(state, path, options = {}) {
+  var _focusSelectorsCopy2;
+  const {
+    focusSelectors
+  } = state;
+  const currentLocation = {
+    ...state.currentLocation
+  };
+  const {
+    // Default assignments
+    isBack = false,
+    skipFocus = false,
+    // Extract to avoid forwarding
+    replace,
+    focusTargetSelector,
+    // Rest
+    ...restOptions
+  } = options;
+  if (currentLocation.path === path) {
+    return {
+      currentLocation,
+      focusSelectors
+    };
+  }
+  let focusSelectorsCopy;
+  function getFocusSelectorsCopy() {
+    var _focusSelectorsCopy;
+    focusSelectorsCopy = (_focusSelectorsCopy = focusSelectorsCopy) !== null && _focusSelectorsCopy !== void 0 ? _focusSelectorsCopy : new Map(state.focusSelectors);
+    return focusSelectorsCopy;
+  }
+  if (focusTargetSelector && currentLocation.path) {
+    getFocusSelectorsCopy().set(currentLocation.path, focusTargetSelector);
+  }
+  let currentFocusSelector;
+  if (focusSelectors.get(path)) {
+    if (isBack) {
+      currentFocusSelector = focusSelectors.get(path);
+    }
+    getFocusSelectorsCopy().delete(path);
+  }
+  return {
+    currentLocation: {
+      ...restOptions,
+      isInitial: false,
+      path,
+      isBack,
+      hasRestoredFocus: false,
+      focusTargetSelector: currentFocusSelector,
+      skipFocus
+    },
+    focusSelectors: (_focusSelectorsCopy2 = focusSelectorsCopy) !== null && _focusSelectorsCopy2 !== void 0 ? _focusSelectorsCopy2 : focusSelectors
+  };
+}
+function goToParent(state, options = {}) {
+  const {
+    screens,
+    focusSelectors
+  } = state;
+  const currentLocation = {
+    ...state.currentLocation
+  };
+  const currentPath = currentLocation.path;
+  if (currentPath === void 0) {
+    return {
+      currentLocation,
+      focusSelectors
+    };
+  }
+  const parentPath = findParent(currentPath, screens);
+  if (parentPath === void 0) {
+    return {
+      currentLocation,
+      focusSelectors
+    };
+  }
+  return goTo(state, parentPath, {
+    ...options,
+    isBack: true
+  });
+}
+function routerReducer(state, action) {
+  let {
+    screens,
+    currentLocation,
+    matchedPath,
+    focusSelectors,
+    ...restState
+  } = state;
+  switch (action.type) {
+    case "add":
+      screens = addScreen(state, action.screen);
+      break;
+    case "remove":
+      screens = removeScreen(state, action.screen);
+      break;
+    case "goto":
+      ({
+        currentLocation,
+        focusSelectors
+      } = goTo(state, action.path, action.options));
+      break;
+    case "gotoparent":
+      ({
+        currentLocation,
+        focusSelectors
+      } = goToParent(state, action.options));
+      break;
+  }
+  if (screens === state.screens && currentLocation === state.currentLocation) {
+    return state;
+  }
+  const currentPath = currentLocation.path;
+  matchedPath = currentPath !== void 0 ? patternMatch(currentPath, screens) : void 0;
+  if (matchedPath && state.matchedPath && matchedPath.id === state.matchedPath.id && isShallowEqual(matchedPath.params, state.matchedPath.params)) {
+    matchedPath = state.matchedPath;
+  }
+  return {
+    ...restState,
+    screens,
+    currentLocation,
+    matchedPath,
+    focusSelectors
+  };
+}
+function UnconnectedNavigator(props, forwardedRef) {
+  const {
+    initialPath: initialPathProp,
+    children,
+    className,
+    ...otherProps
+  } = useContextSystem(props, "Navigator");
+  const [routerState, dispatch] = useReducer(routerReducer, initialPathProp, (path) => ({
+    screens: [],
+    currentLocation: {
+      path,
+      isInitial: true
+    },
+    matchedPath: void 0,
+    focusSelectors: /* @__PURE__ */ new Map(),
+    initialPath: initialPathProp
+  }));
+  const methods = useMemo(() => ({
+    // Note: calling goBack calls `goToParent` internally, as it was established
+    // that `goBack` should behave like `goToParent`, and `goToParent` should
+    // be marked as deprecated.
+    goBack: (options) => dispatch({
+      type: "gotoparent",
+      options
+    }),
+    goTo: (path, options) => dispatch({
+      type: "goto",
+      path,
+      options
+    }),
+    goToParent: (options) => {
+      deprecated(`wp.components.useNavigator().goToParent`, {
+        since: "6.7",
+        alternative: "wp.components.useNavigator().goBack"
+      });
+      dispatch({
+        type: "gotoparent",
+        options
+      });
+    },
+    addScreen: (screen) => dispatch({
+      type: "add",
+      screen
+    }),
+    removeScreen: (screen) => dispatch({
+      type: "remove",
+      screen
+    })
+  }), []);
+  const {
+    currentLocation,
+    matchedPath
+  } = routerState;
+  const navigatorContextValue = useMemo(() => {
+    var _matchedPath$params;
+    return {
+      location: currentLocation,
+      params: (_matchedPath$params = matchedPath?.params) !== null && _matchedPath$params !== void 0 ? _matchedPath$params : {},
+      match: matchedPath?.id,
+      ...methods
+    };
+  }, [currentLocation, matchedPath, methods]);
+  const cx = useCx();
+  const classes = useMemo(() => cx(styles.navigatorWrapper, className), [className, cx]);
+  return /* @__PURE__ */ _jsx(View, {
+    ref: forwardedRef,
+    className: classes,
+    ...otherProps,
+    children: /* @__PURE__ */ _jsx(NavigatorContext.Provider, {
+      value: navigatorContextValue,
+      children
+    })
+  });
+}
+var Navigator = contextConnect(UnconnectedNavigator, "Navigator");
+export {
+  Navigator
+};
+//# sourceMappingURL=component.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/navigator/navigator/component.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { useMemo, useReducer } from '@wordpress/element';\nimport { isShallowEqual } from '@wordpress/is-shallow-equal';\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 { patternMatch, findParent } from '../utils/router';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport * as styles from '../styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction addScreen({\n  screens\n}, screen) {\n  if (screens.some(s => s.path === screen.path)) {\n    globalThis.SCRIPT_DEBUG === true ? warning(`Navigator: a screen with path ${screen.path} already exists.\nThe screen with id ${screen.id} will not be added.`) : void 0;\n    return screens;\n  }\n  return [...screens, screen];\n}\nfunction removeScreen({\n  screens\n}, screen) {\n  return screens.filter(s => s.id !== screen.id);\n}\nfunction goTo(state, path, options = {}) {\n  var _focusSelectorsCopy2;\n  const {\n    focusSelectors\n  } = state;\n  const currentLocation = {\n    ...state.currentLocation\n  };\n  const {\n    // Default assignments\n    isBack = false,\n    skipFocus = false,\n    // Extract to avoid forwarding\n    replace,\n    focusTargetSelector,\n    // Rest\n    ...restOptions\n  } = options;\n  if (currentLocation.path === path) {\n    return {\n      currentLocation,\n      focusSelectors\n    };\n  }\n  let focusSelectorsCopy;\n  function getFocusSelectorsCopy() {\n    var _focusSelectorsCopy;\n    focusSelectorsCopy = (_focusSelectorsCopy = focusSelectorsCopy) !== null && _focusSelectorsCopy !== void 0 ? _focusSelectorsCopy : new Map(state.focusSelectors);\n    return focusSelectorsCopy;\n  }\n\n  // Set a focus selector that will be used when navigating\n  // back to the current location.\n  if (focusTargetSelector && currentLocation.path) {\n    getFocusSelectorsCopy().set(currentLocation.path, focusTargetSelector);\n  }\n\n  // Get the focus selector for the new location.\n  let currentFocusSelector;\n  if (focusSelectors.get(path)) {\n    if (isBack) {\n      // Use the found focus selector only when navigating back.\n      currentFocusSelector = focusSelectors.get(path);\n    }\n    // Make a copy of the focusSelectors map to remove the focus selector\n    // only if necessary (ie. a focus selector was found).\n    getFocusSelectorsCopy().delete(path);\n  }\n  return {\n    currentLocation: {\n      ...restOptions,\n      isInitial: false,\n      path,\n      isBack,\n      hasRestoredFocus: false,\n      focusTargetSelector: currentFocusSelector,\n      skipFocus\n    },\n    focusSelectors: (_focusSelectorsCopy2 = focusSelectorsCopy) !== null && _focusSelectorsCopy2 !== void 0 ? _focusSelectorsCopy2 : focusSelectors\n  };\n}\nfunction goToParent(state, options = {}) {\n  const {\n    screens,\n    focusSelectors\n  } = state;\n  const currentLocation = {\n    ...state.currentLocation\n  };\n  const currentPath = currentLocation.path;\n  if (currentPath === undefined) {\n    return {\n      currentLocation,\n      focusSelectors\n    };\n  }\n  const parentPath = findParent(currentPath, screens);\n  if (parentPath === undefined) {\n    return {\n      currentLocation,\n      focusSelectors\n    };\n  }\n  return goTo(state, parentPath, {\n    ...options,\n    isBack: true\n  });\n}\nfunction routerReducer(state, action) {\n  let {\n    screens,\n    currentLocation,\n    matchedPath,\n    focusSelectors,\n    ...restState\n  } = state;\n  switch (action.type) {\n    case 'add':\n      screens = addScreen(state, action.screen);\n      break;\n    case 'remove':\n      screens = removeScreen(state, action.screen);\n      break;\n    case 'goto':\n      ({\n        currentLocation,\n        focusSelectors\n      } = goTo(state, action.path, action.options));\n      break;\n    case 'gotoparent':\n      ({\n        currentLocation,\n        focusSelectors\n      } = goToParent(state, action.options));\n      break;\n  }\n\n  // Return early in case there is no change\n  if (screens === state.screens && currentLocation === state.currentLocation) {\n    return state;\n  }\n\n  // Compute the matchedPath\n  const currentPath = currentLocation.path;\n  matchedPath = currentPath !== undefined ? patternMatch(currentPath, screens) : undefined;\n\n  // If the new match is the same as the previous match,\n  // return the previous one to keep immutability.\n  if (matchedPath && state.matchedPath && matchedPath.id === state.matchedPath.id && isShallowEqual(matchedPath.params, state.matchedPath.params)) {\n    matchedPath = state.matchedPath;\n  }\n  return {\n    ...restState,\n    screens,\n    currentLocation,\n    matchedPath,\n    focusSelectors\n  };\n}\nfunction UnconnectedNavigator(props, forwardedRef) {\n  const {\n    initialPath: initialPathProp,\n    children,\n    className,\n    ...otherProps\n  } = useContextSystem(props, 'Navigator');\n  const [routerState, dispatch] = useReducer(routerReducer, initialPathProp, path => ({\n    screens: [],\n    currentLocation: {\n      path,\n      isInitial: true\n    },\n    matchedPath: undefined,\n    focusSelectors: new Map(),\n    initialPath: initialPathProp\n  }));\n\n  // The methods are constant forever, create stable references to them.\n  const methods = useMemo(() => ({\n    // Note: calling goBack calls `goToParent` internally, as it was established\n    // that `goBack` should behave like `goToParent`, and `goToParent` should\n    // be marked as deprecated.\n    goBack: options => dispatch({\n      type: 'gotoparent',\n      options\n    }),\n    goTo: (path, options) => dispatch({\n      type: 'goto',\n      path,\n      options\n    }),\n    goToParent: options => {\n      deprecated(`wp.components.useNavigator().goToParent`, {\n        since: '6.7',\n        alternative: 'wp.components.useNavigator().goBack'\n      });\n      dispatch({\n        type: 'gotoparent',\n        options\n      });\n    },\n    addScreen: screen => dispatch({\n      type: 'add',\n      screen\n    }),\n    removeScreen: screen => dispatch({\n      type: 'remove',\n      screen\n    })\n  }), []);\n  const {\n    currentLocation,\n    matchedPath\n  } = routerState;\n  const navigatorContextValue = useMemo(() => {\n    var _matchedPath$params;\n    return {\n      location: currentLocation,\n      params: (_matchedPath$params = matchedPath?.params) !== null && _matchedPath$params !== void 0 ? _matchedPath$params : {},\n      match: matchedPath?.id,\n      ...methods\n    };\n  }, [currentLocation, matchedPath, methods]);\n  const cx = useCx();\n  const classes = useMemo(() => cx(styles.navigatorWrapper, className), [className, cx]);\n  return /*#__PURE__*/_jsx(View, {\n    ref: forwardedRef,\n    className: classes,\n    ...otherProps,\n    children: /*#__PURE__*/_jsx(NavigatorContext.Provider, {\n      value: navigatorContextValue,\n      children: children\n    })\n  });\n}\nexport const Navigator = contextConnect(UnconnectedNavigator, 'Navigator');"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,17 @@
+// packages/components/src/navigator/navigator-back-button/component.tsx
+import { contextConnect } from "../../context/index.mjs";
+import { View } from "../../view/index.mjs";
+import { useNavigatorBackButton } from "./hook.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+function UnconnectedNavigatorBackButton(props, forwardedRef) {
+  const navigatorBackButtonProps = useNavigatorBackButton(props);
+  return /* @__PURE__ */ _jsx(View, {
+    ref: forwardedRef,
+    ...navigatorBackButtonProps
+  });
+}
+var NavigatorBackButton = contextConnect(UnconnectedNavigatorBackButton, "Navigator.BackButton");
+export {
+  NavigatorBackButton
+};
+//# sourceMappingURL=component.mjs.map

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

@@ -0,0 +1,29 @@
+// packages/components/src/navigator/navigator-back-button/hook.ts
+import { useCallback } from "@wordpress/element";
+import { useContextSystem } from "../../context/index.mjs";
+import Button from "../../button/index.mjs";
+import { useNavigator } from "../use-navigator.mjs";
+function useNavigatorBackButton(props) {
+  const {
+    onClick,
+    as = Button,
+    ...otherProps
+  } = useContextSystem(props, "Navigator.BackButton");
+  const {
+    goBack
+  } = useNavigator();
+  const handleClick = useCallback((e) => {
+    e.preventDefault();
+    goBack();
+    onClick?.(e);
+  }, [goBack, onClick]);
+  return {
+    as,
+    onClick: handleClick,
+    ...otherProps
+  };
+}
+export {
+  useNavigatorBackButton
+};
+//# sourceMappingURL=hook.mjs.map

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

@@ -0,0 +1,17 @@
+// packages/components/src/navigator/navigator-button/component.tsx
+import { contextConnect } from "../../context/index.mjs";
+import { View } from "../../view/index.mjs";
+import { useNavigatorButton } from "./hook.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+function UnconnectedNavigatorButton(props, forwardedRef) {
+  const navigatorButtonProps = useNavigatorButton(props);
+  return /* @__PURE__ */ _jsx(View, {
+    ref: forwardedRef,
+    ...navigatorButtonProps
+  });
+}
+var NavigatorButton = contextConnect(UnconnectedNavigatorButton, "Navigator.Button");
+export {
+  NavigatorButton
+};
+//# sourceMappingURL=component.mjs.map

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

@@ -0,0 +1,37 @@
+// packages/components/src/navigator/navigator-button/hook.ts
+import { useCallback } from "@wordpress/element";
+import { escapeAttribute } from "@wordpress/escape-html";
+import { useContextSystem } from "../../context/index.mjs";
+import Button from "../../button/index.mjs";
+import { useNavigator } from "../use-navigator.mjs";
+var cssSelectorForAttribute = (attrName, attrValue) => `[${attrName}="${attrValue}"]`;
+function useNavigatorButton(props) {
+  const {
+    path,
+    onClick,
+    as = Button,
+    attributeName = "id",
+    ...otherProps
+  } = useContextSystem(props, "Navigator.Button");
+  const escapedPath = escapeAttribute(path);
+  const {
+    goTo
+  } = useNavigator();
+  const handleClick = useCallback((e) => {
+    e.preventDefault();
+    goTo(escapedPath, {
+      focusTargetSelector: cssSelectorForAttribute(attributeName, escapedPath)
+    });
+    onClick?.(e);
+  }, [goTo, onClick, attributeName, escapedPath]);
+  return {
+    as,
+    onClick: handleClick,
+    ...otherProps,
+    [attributeName]: escapedPath
+  };
+}
+export {
+  useNavigatorButton
+};
+//# sourceMappingURL=hook.mjs.map

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

@@ -0,0 +1,98 @@
+// packages/components/src/navigator/navigator-screen/component.tsx
+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/index.mjs";
+import { useCx } from "../../utils/hooks/use-cx.mjs";
+import { View } from "../../view/index.mjs";
+import { NavigatorContext } from "../context.mjs";
+import * as styles from "../styles.mjs";
+import { useScreenAnimatePresence } from "./use-screen-animate-presence.mjs";
+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;
+  }
+  const screenId = useId();
+  const {
+    children,
+    className,
+    path,
+    onAnimationEnd: onAnimationEndProp,
+    ...otherProps
+  } = useContextSystem(props, "Navigator.Screen");
+  const {
+    location,
+    match,
+    addScreen,
+    removeScreen
+  } = useContext(NavigatorContext);
+  const {
+    isInitial,
+    isBack,
+    focusTargetSelector,
+    skipFocus
+  } = location;
+  const isMatch = match === screenId;
+  const wrapperRef = useRef(null);
+  const skipAnimationAndFocusRestoration = !!isInitial && !isBack;
+  useEffect(() => {
+    const screen = {
+      id: screenId,
+      path: escapeAttribute(path)
+    };
+    addScreen(screen);
+    return () => removeScreen(screen);
+  }, [screenId, path, addScreen, removeScreen]);
+  const {
+    animationStyles,
+    shouldRenderScreen,
+    screenProps
+  } = useScreenAnimatePresence({
+    isMatch,
+    isBack,
+    onAnimationEnd: onAnimationEndProp,
+    skipAnimation: skipAnimationAndFocusRestoration
+  });
+  const cx = useCx();
+  const classes = useMemo(() => cx(styles.navigatorScreen, animationStyles, className), [className, cx, animationStyles]);
+  const locationRef = useRef(location);
+  useEffect(() => {
+    locationRef.current = location;
+  }, [location]);
+  useEffect(() => {
+    const wrapperEl = wrapperRef.current;
+    if (skipAnimationAndFocusRestoration || !isMatch || !wrapperEl || locationRef.current.hasRestoredFocus || skipFocus) {
+      return;
+    }
+    const activeElement = wrapperEl.ownerDocument.activeElement;
+    if (wrapperEl.contains(activeElement)) {
+      return;
+    }
+    let elementToFocus = null;
+    if (isBack && focusTargetSelector) {
+      elementToFocus = wrapperEl.querySelector(focusTargetSelector);
+    }
+    if (!elementToFocus) {
+      const [firstTabbable] = 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 = useMergeRefs([forwardedRef, wrapperRef]);
+  return shouldRenderScreen ? /* @__PURE__ */ _jsx(View, {
+    ref: mergedWrapperRef,
+    className: classes,
+    ...screenProps,
+    ...otherProps,
+    children
+  }) : null;
+}
+var NavigatorScreen = contextConnect(UnconnectedNavigatorScreen, "Navigator.Screen");
+export {
+  NavigatorScreen
+};
+//# sourceMappingURL=component.mjs.map

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

@@ -0,0 +1,80 @@
+// packages/components/src/navigator/navigator-screen/use-screen-animate-presence.ts
+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.mjs";
+var ANIMATION_TIMEOUT_MARGIN = 1.2;
+var isEnterAnimation = (animationDirection, animationStatus, animationName) => animationStatus === "ANIMATING_IN" && animationName === styles.ANIMATION_END_NAMES[animationDirection].in;
+var isExitAnimation = (animationDirection, animationStatus, animationName) => animationStatus === "ANIMATING_OUT" && animationName === styles.ANIMATION_END_NAMES[animationDirection].out;
+function useScreenAnimatePresence({
+  isMatch,
+  skipAnimation,
+  isBack,
+  onAnimationEnd
+}) {
+  const isRTL = isRTLFn();
+  const prefersReducedMotion = useReducedMotion();
+  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");
+    } else if (becameUnselected) {
+      setAnimationStatus(skipAnimation || prefersReducedMotion ? "OUT" : "ANIMATING_OUT");
+    }
+  }, [becameSelected, becameUnselected, skipAnimation, prefersReducedMotion]);
+  const animationDirection = isRTL && isBack || !isRTL && !isBack ? "end" : "start";
+  const isAnimatingIn = animationStatus === "ANIMATING_IN";
+  const isAnimatingOut = animationStatus === "ANIMATING_OUT";
+  let animationType;
+  if (isAnimatingIn) {
+    animationType = "in";
+  } else if (isAnimatingOut) {
+    animationType = "out";
+  }
+  const onScreenAnimationEnd = useCallback((e) => {
+    onAnimationEnd?.(e);
+    if (isExitAnimation(animationDirection, animationStatus, e.animationName)) {
+      setAnimationStatus("OUT");
+    } else if (isEnterAnimation(animationDirection, animationStatus, e.animationName)) {
+      setAnimationStatus("IN");
+    }
+  }, [onAnimationEnd, animationStatus, animationDirection]);
+  useEffect(() => {
+    let animationTimeout;
+    if (isAnimatingOut) {
+      animationTimeout = window.setTimeout(() => {
+        setAnimationStatus("OUT");
+        animationTimeout = void 0;
+      }, styles.TOTAL_ANIMATION_DURATION.OUT * ANIMATION_TIMEOUT_MARGIN);
+    } else if (isAnimatingIn) {
+      animationTimeout = window.setTimeout(() => {
+        setAnimationStatus("IN");
+        animationTimeout = void 0;
+      }, styles.TOTAL_ANIMATION_DURATION.IN * ANIMATION_TIMEOUT_MARGIN);
+    }
+    return () => {
+      if (animationTimeout) {
+        window.clearTimeout(animationTimeout);
+        animationTimeout = void 0;
+      }
+    };
+  }, [isAnimatingOut, isAnimatingIn]);
+  return {
+    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",
+    screenProps: {
+      onAnimationEnd: onScreenAnimationEnd,
+      "data-animation-direction": animationDirection,
+      "data-animation-type": animationType,
+      "data-skip-animation": skipAnimation || void 0
+    }
+  };
+}
+export {
+  useScreenAnimatePresence
+};
+//# sourceMappingURL=use-screen-animate-presence.mjs.map