+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+
+
+The `NavigatorContainer` component is a container for `NavigatorScreen` components to be placed in. It should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorContainer`](/packages/components/src/navigator/navigator-container/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components (or the `useNavigator` hook).
+
+## Usage
+
+Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
+
+## Props
+
+The component accepts the following props:
+
+### `className`: `string`
+
+Class name to add to the container element.
+
+- Required: No
diff --git a/packages/components/src/navigator/navigator-container/component.tsx b/packages/components/src/navigator/navigator-container/component.tsx
new file mode 100644
index 0000000000000..06e72de6f7680
--- /dev/null
+++ b/packages/components/src/navigator/navigator-container/component.tsx
@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+import { css } from '@emotion/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+ contextConnect,
+ useContextSystem,
+ WordPressComponentProps,
+} from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
+import { View } from '../../view';
+import type { NavigatorContainerProps } from '../types';
+
+function UnconnectedNavigatorContainer(
+ props: WordPressComponentProps< NavigatorContainerProps, 'div' >,
+ forwardedRef: ForwardedRef< any >
+) {
+ const { children, className, ...otherProps } = useContextSystem(
+ props,
+ 'NavigatorContainer'
+ );
+
+ const cx = useCx();
+ const classes = useMemo(
+ // Prevents horizontal overflow while animating screen transitions.
+ () => cx( css( { overflowX: 'hidden' } ), className ),
+ [ className, cx ]
+ );
+
+ return (
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
- { blocks.map( ( block ) => (
-
-
+
+
- ) ) }
-
+
+
+
- { blocks.map( ( block ) => (
-
- ) ) }
+ { blocks.map( ( block ) => (
+
+
+
+ ) ) }
+
+
+
+ { blocks.map( ( block ) => (
+
+ ) ) }
+
);
}
diff --git a/packages/interface/src/components/preferences-modal-tabs/index.js b/packages/interface/src/components/preferences-modal-tabs/index.js
index bc8f7358b834d..3772e09b65f1c 100644
--- a/packages/interface/src/components/preferences-modal-tabs/index.js
+++ b/packages/interface/src/components/preferences-modal-tabs/index.js
@@ -4,6 +4,7 @@
import { useViewportMatch } from '@wordpress/compose';
import {
__experimentalNavigatorProvider as NavigatorProvider,
+ __experimentalNavigatorContainer as NavigatorContainer,
__experimentalNavigatorScreen as NavigatorScreen,
__experimentalNavigatorButton as NavigatorButton,
__experimentalNavigatorBackButton as NavigatorBackButton,
@@ -76,78 +77,77 @@ export default function PreferencesModalTabs( { sections } ) {
);
} else {
modalContent = (
-
-
-
-
-
- { tabs.map( ( tab ) => {
- return (
-
+
+
+
+
+
+ { tabs.map( ( tab ) => {
+ return (
+
+
+
+
+ { tab.title }
+
+
+
+
+
+
+
+ );
+ } ) }
+
+
+
+
+ { sections.length &&
+ sections.map( ( section ) => {
+ return (
+
+
+
-
-
-
- { tab.title }
-
-
-
-
-
-
-
- );
- } ) }
-
-
-
-
- { sections.length &&
- sections.map( ( section ) => {
- return (
-
-
-
-
-
- { section.tabLabel }
-
-
- { section.content }
-
-
- );
- } ) }
+
+
+ { section.tabLabel }
+
+
+ { section.content }
+
+
+ );
+ } ) }
+
);
}