@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 6.58 kB
Source Map (JSON)
{
"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 ?? 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,GAAU,wBAAiB,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,iBAAiB;AAAA,IACpC;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,IAAM,sBAAkB,+BAAe,4BAA4B,kBAAkB;",
"names": ["import_context", "warning", "_jsx"]
}