@gtkx/navigation 0.0.1

package/src/drawer/create-drawer-navigator.tsx

@@ -0,0 +1,123 @@
+import type {
+    DrawerActionHelpers,
+    DrawerNavigationState,
+    DrawerRouterOptions,
+    NavigatorTypeBagBase,
+    ParamListBase,
+    StaticConfig,
+    StaticScreenFactory,
+    TypedNavigator,
+} from "@react-navigation/core";
+import type { ReactNode } from "react";
+import { createNavigatorFactory, createScreenFactory, useNavigationBuilder } from "@react-navigation/core";
+import { useEffect, useState } from "react";
+import type { DrawerRouterFactory } from "./drawer-router.js";
+import type {
+    DrawerNavigationEventMap,
+    DrawerNavigationOptions,
+    DrawerNavigationProp,
+    DrawerNavigatorProps,
+} from "./types.js";
+import { createDrawerRouter } from "./drawer-router.js";
+import { DrawerView } from "./drawer-view.js";
+
+/** Type bag describing the drawer navigator to React Navigation's typed APIs. */
+type DrawerTypeBag<
+    ParamList extends ParamListBase = ParamListBase,
+    NavigatorID extends string | undefined = string | undefined,
+> = {
+    /** Route names and their params. */
+    ParamList: ParamList;
+    /** Optional navigator id. */
+    NavigatorID: NavigatorID;
+    /** Shape of the navigator state. */
+    State: DrawerNavigationState<ParamList>;
+    /** Per-screen options. */
+    ScreenOptions: DrawerNavigationOptions;
+    /** Events the navigator emits. */
+    EventMap: DrawerNavigationEventMap;
+    /** Navigation object per route. */
+    NavigationList: {
+        [RouteName in keyof ParamList]: DrawerNavigationProp<ParamList, RouteName, NavigatorID>;
+    };
+    /** The navigator component. */
+    Navigator: typeof DrawerNavigator;
+};
+
+/** Declares a typed screen of a drawer navigator for the static configuration API. */
+const createDrawerScreen: StaticScreenFactory<DrawerTypeBag> = createScreenFactory<DrawerTypeBag>();
+
+const useDrawerRouter = (isCollapsed: boolean): DrawerRouterFactory => {
+    const [flag] = useState(() => new CollapsedFlag(isCollapsed));
+    const [createRouter] = useState(() => createDrawerRouter(() => flag.isCollapsed));
+
+    useEffect(() => {
+        flag.update(isCollapsed);
+    }, [flag, isCollapsed]);
+
+    return createRouter;
+};
+
+/** Renders the screens of a {@link createDrawerNavigator} beside a sidebar in an `AdwOverlaySplitView`. */
+function DrawerNavigator({
+    drawerContent,
+    collapsed,
+    sidebarPosition,
+    pinSidebar,
+    minSidebarWidth,
+    maxSidebarWidth,
+    sidebarWidthFraction,
+    defaultStatus,
+    ...options
+}: DrawerNavigatorProps): ReactNode {
+    const createRouter = useDrawerRouter(collapsed === true);
+
+    const { state, descriptors, navigation, NavigationContent } = useNavigationBuilder<
+        DrawerNavigationState<ParamListBase>,
+        DrawerRouterOptions,
+        DrawerActionHelpers<ParamListBase>,
+        DrawerNavigationOptions,
+        DrawerNavigationEventMap
+    >(createRouter, { ...options, defaultStatus: defaultStatus ?? (collapsed === true ? "closed" : "open") });
+
+    return (
+        <NavigationContent>
+            <DrawerView
+                state={state}
+                navigation={navigation}
+                descriptors={descriptors}
+                drawerContent={drawerContent}
+                collapsed={collapsed}
+                sidebarPosition={sidebarPosition}
+                pinSidebar={pinSidebar}
+                minSidebarWidth={minSidebarWidth}
+                maxSidebarWidth={maxSidebarWidth}
+                sidebarWidthFraction={sidebarWidthFraction}
+            />
+        </NavigationContent>
+    );
+}
+
+/** Creates a drawer navigator rendered with `AdwOverlaySplitView`: a sidebar listing the screens beside the content. */
+function createDrawerNavigator<
+    const ParamList extends ParamListBase,
+    const NavigatorID extends string | undefined = string | undefined,
+    const TypeBag extends NavigatorTypeBagBase = DrawerTypeBag<ParamList, NavigatorID>,
+    const Config extends StaticConfig<TypeBag> | undefined = undefined,
+>(config?: Config): TypedNavigator<TypeBag, Config> {
+    return createNavigatorFactory(DrawerNavigator)(config) as TypedNavigator<TypeBag, Config>;
+}
+
+class CollapsedFlag {
+    isCollapsed: boolean;
+
+    constructor(isCollapsed: boolean) {
+        this.isCollapsed = isCollapsed;
+    }
+
+    update(isCollapsed: boolean): void {
+        this.isCollapsed = isCollapsed;
+    }
+}
+
+export { createDrawerNavigator, createDrawerScreen, DrawerNavigator, type DrawerTypeBag };

package/src/drawer/drawer-collapsed-context.ts

@@ -0,0 +1,5 @@
+import { type Context, createContext } from "react";
+
+const DrawerCollapsedContext: Context<boolean> = createContext(false);
+
+export { DrawerCollapsedContext };

package/src/drawer/drawer-item-list.tsx

@@ -0,0 +1,74 @@
+import type { NavigationState } from "@react-navigation/core";
+import type { ReactNode } from "react";
+import * as Gtk from "@gtkx/gi/gtk";
+import { GtkBox, GtkImage, GtkLabel, GtkListBox } from "@gtkx/jsx/gtk";
+import { CommonActions, DrawerActions } from "@react-navigation/core";
+import { useCallback, useContext } from "react";
+import type { DrawerContentProps, DrawerDescriptor, DrawerNavigationHelpers } from "./types.js";
+import { requireDescriptor } from "../shared/routes.js";
+import { DrawerCollapsedContext } from "./drawer-collapsed-context.js";
+
+type RowActivated = (row: Gtk.ListBoxRow) => void;
+
+const didNavigateToRow = (navigation: DrawerNavigationHelpers, state: NavigationState, rowIndex: number): boolean => {
+    const route = state.routes[rowIndex];
+
+    if (route === undefined) {
+        return false;
+    }
+
+    const event = navigation.emit({ type: "drawerItemPress", target: route.key, canPreventDefault: true });
+
+    if (event.defaultPrevented) {
+        return false;
+    }
+
+    navigation.dispatch({ ...CommonActions.navigate(route.name, route.params), target: state.key });
+
+    return true;
+};
+
+const useDrawerItemPress = (navigation: DrawerNavigationHelpers, isCollapsed: boolean): RowActivated =>
+    useCallback((row: Gtk.ListBoxRow) => {
+        const state = navigation.getState();
+
+        if (!didNavigateToRow(navigation, state, row.getIndex())) {
+            return;
+        }
+
+        if (isCollapsed) {
+            navigation.dispatch({ ...DrawerActions.closeDrawer(), target: state.key });
+        }
+    }, [navigation, isCollapsed]);
+
+const DrawerItem = ({ descriptor }: { descriptor: DrawerDescriptor }): ReactNode => {
+    const { route, options } = descriptor;
+
+    return (
+        <GtkBox spacing={12}>
+            {options.drawerIcon === undefined ? null : <GtkImage iconName={options.drawerIcon} />}
+            <GtkLabel label={options.drawerLabel ?? options.title ?? route.name} xalign={0} />
+        </GtkBox>
+    );
+};
+
+/** Lists the drawer routes as rows of a `GtkListBox`; activating a row navigates to its route. */
+const DrawerItemList = ({ state, navigation, descriptors }: DrawerContentProps): ReactNode => {
+    const isCollapsed = useContext(DrawerCollapsedContext);
+    const onRowActivated = useDrawerItemPress(navigation, isCollapsed);
+
+    return (
+        <GtkListBox
+            cssClasses={["navigation-sidebar"]}
+            selectedIndex={state.index}
+            selectionMode={Gtk.SelectionMode.SINGLE}
+            onRowActivated={onRowActivated}
+        >
+            {state.routes.map((route) => (
+                <DrawerItem key={route.key} descriptor={requireDescriptor(descriptors, route.key)} />
+            ))}
+        </GtkListBox>
+    );
+};
+
+export { DrawerItemList };

package/src/drawer/drawer-router.ts

@@ -0,0 +1,90 @@
+import type { DrawerNavigationState, NavigationAction, ParamListBase, PartialState } from "@react-navigation/core";
+import { DrawerRouter } from "@react-navigation/routers";
+import { getDrawerStatus } from "./drawer-status.js";
+
+type DrawerState = DrawerNavigationState<ParamListBase>;
+type DrawerRouterFactory = typeof DrawerRouter;
+type DrawerRouterInstance = ReturnType<DrawerRouterFactory>;
+type StateResult = DrawerState | PartialState<DrawerState> | null;
+type Retry = (state: DrawerState) => StateResult;
+
+type ResolvedAction = {
+    state: DrawerState;
+    action: NavigationAction;
+    after: StateResult;
+    isCollapsed: boolean;
+    retry: Retry;
+};
+
+const NAVIGATING_ACTIONS = new Set(["JUMP_TO", "NAVIGATE", "NAVIGATE_DEPRECATED"]);
+
+const isSameRoutes = (left: DrawerState, right: DrawerState): boolean =>
+    left.index === right.index &&
+    left.routes.length === right.routes.length &&
+    left.routes.every((route, index) => right.routes[index]?.key === route.key);
+
+const reopenSidebar = (state: DrawerState): DrawerState => {
+    if (state.default === "open") {
+        return { ...state, history: state.history.filter((entry) => entry.type !== "drawer") };
+    }
+
+    return { ...state, history: [...state.history, { type: "drawer", status: "open" }] };
+};
+
+const wasSidebarHidden = (before: DrawerState, after: DrawerState): boolean =>
+    getDrawerStatus(before) === "open" && getDrawerStatus(after) === "closed";
+
+const wasSidebarShown = (before: DrawerState, after: DrawerState): boolean =>
+    getDrawerStatus(before) === "closed" && getDrawerStatus(after) === "open";
+
+const keepSidebarShown = (before: DrawerState, after: DrawerState, isCollapsed: boolean): DrawerState =>
+    !isCollapsed && wasSidebarHidden(before, after) ? reopenSidebar(after) : after;
+
+const keepSidebarShownInResult = (before: DrawerState, after: StateResult, isCollapsed: boolean): StateResult =>
+    after?.stale === false ? keepSidebarShown(before, after, isCollapsed) : after;
+
+const shouldPassBackThrough = (state: DrawerState, after: StateResult, isCollapsed: boolean): boolean =>
+    !isCollapsed && after?.stale === false && isSameRoutes(state, after) && wasSidebarShown(state, after);
+
+const withoutDrawerEntry = (state: DrawerState): DrawerState => ({
+    ...state,
+    history: state.history.filter((entry) => entry.type !== "drawer"),
+});
+
+const closedAgain = (state: DrawerState): DrawerState => ({
+    ...state,
+    history: [...state.history, { type: "drawer", status: "closed" }],
+});
+
+const backPastDrawer = (state: DrawerState, retry: Retry): StateResult => {
+    const after = retry(withoutDrawerEntry(state));
+
+    return after?.stale === false ? closedAgain(after) : after;
+};
+
+const resolveAction = ({ state, action, after, isCollapsed, retry }: ResolvedAction): StateResult => {
+    if (action.type === "GO_BACK") {
+        return shouldPassBackThrough(state, after, isCollapsed) ? backPastDrawer(state, retry) : after;
+    }
+
+    return NAVIGATING_ACTIONS.has(action.type) ? keepSidebarShownInResult(state, after, isCollapsed) : after;
+};
+
+const withShownSidebar = (router: DrawerRouterInstance, isCollapsed: () => boolean): DrawerRouterInstance => ({
+    ...router,
+    getStateForAction: (state, action, config) =>
+        resolveAction({
+            state,
+            action,
+            after: router.getStateForAction(state, action, config),
+            isCollapsed: isCollapsed(),
+            retry: (retried) => router.getStateForAction(retried, action, config),
+        }),
+    getStateForRouteFocus: (state, key) =>
+        keepSidebarShown(state, router.getStateForRouteFocus(state, key), isCollapsed()),
+});
+
+const createDrawerRouter = (isCollapsed: () => boolean): DrawerRouterFactory => (options) =>
+    withShownSidebar(DrawerRouter(options), isCollapsed);
+
+export { createDrawerRouter, type DrawerRouterFactory };

package/src/drawer/drawer-status.ts

@@ -0,0 +1,19 @@
+import type { DrawerStatus, NavigationState } from "@react-navigation/core";
+
+type DrawerHistoryEntry = { type: "drawer"; status: DrawerStatus };
+
+const isDrawerEntry = (entry: unknown): entry is DrawerHistoryEntry =>
+    typeof entry === "object" && entry !== null && "type" in entry && entry.type === "drawer";
+
+const getDrawerStatus = (state: NavigationState): DrawerStatus => {
+    const history: readonly unknown[] = state.history ?? [];
+    const entry = history.findLast(isDrawerEntry);
+
+    if (entry !== undefined) {
+        return entry.status;
+    }
+
+    return "default" in state && state.default === "open" ? "open" : "closed";
+};
+
+export { getDrawerStatus };

package/src/drawer/drawer-view.tsx

@@ -0,0 +1,171 @@
+import type { DrawerNavigationState, ParamListBase } from "@react-navigation/core";
+import type { ReactNode } from "react";
+import * as Gtk from "@gtkx/gi/gtk";
+import {
+    AdwHeaderBar,
+    AdwOverlaySplitView,
+    AdwToolbarView,
+    AdwViewStack,
+    AdwWindowTitle,
+} from "@gtkx/jsx/adw";
+import { GtkButton, GtkScrolledWindow } from "@gtkx/jsx/gtk";
+import { DrawerActions } from "@react-navigation/core";
+import { useCallback, useEffect, useRef } from "react";
+import type {
+    DrawerContentProps,
+    DrawerDescriptor,
+    DrawerDescriptorMap,
+    DrawerNavigationConfig,
+    DrawerNavigationHelpers,
+} from "./types.js";
+import { HeaderBar } from "../shared/header-bar.js";
+import { getFocusedRoute, requireDescriptor } from "../shared/routes.js";
+import { ScenePage } from "../shared/scene-page.js";
+import { useLoadedRoutes } from "../shared/use-loaded-routes.js";
+import { usePopToTopOnBlur } from "../shared/use-pop-to-top-on-blur.js";
+import { DrawerCollapsedContext } from "./drawer-collapsed-context.js";
+import { DrawerItemList } from "./drawer-item-list.js";
+import { getDrawerStatus } from "./drawer-status.js";
+
+type DrawerViewProps = DrawerNavigationConfig & {
+    state: DrawerNavigationState<ParamListBase>;
+    navigation: DrawerNavigationHelpers;
+    descriptors: DrawerDescriptorMap;
+};
+
+type DrawerHeaderProps = {
+    descriptor: DrawerDescriptor;
+    navigation: DrawerNavigationHelpers;
+};
+
+type DrawerPageProps = {
+    descriptor: DrawerDescriptor;
+    isLoaded: boolean;
+};
+
+const PACK_TYPES = { start: Gtk.PackType.START, end: Gtk.PackType.END } as const;
+
+const useSidebarSync = (navigation: DrawerNavigationHelpers): ((isShown: boolean | null) => void) =>
+    useCallback((isShown: boolean | null) => {
+        const current = navigation.getState();
+        const isOpen = getDrawerStatus(current) === "open";
+
+        if (isShown === null || isShown === isOpen) {
+            return;
+        }
+
+        const action = isShown ? DrawerActions.openDrawer() : DrawerActions.closeDrawer();
+        navigation.dispatch({ ...action, target: current.key });
+    }, [navigation]);
+
+const useCloseOnNavigate = (
+    state: DrawerNavigationState<ParamListBase>,
+    navigation: DrawerNavigationHelpers,
+    isCollapsed: boolean,
+): void => {
+    const focusedKey = getFocusedRoute(state).key;
+    const previousKeyRef = useRef(focusedKey);
+
+    useEffect(() => {
+        const hasChanged = previousKeyRef.current !== focusedKey;
+        previousKeyRef.current = focusedKey;
+
+        if (hasChanged && isCollapsed && getDrawerStatus(navigation.getState()) === "open") {
+            navigation.dispatch({ ...DrawerActions.closeDrawer(), target: navigation.getState().key });
+        }
+    }, [focusedKey, isCollapsed, navigation]);
+};
+
+const DrawerContent = (props: DrawerContentProps): ReactNode => (
+    <AdwToolbarView topBar={<AdwHeaderBar />}>
+        <GtkScrolledWindow hscrollbarPolicy={Gtk.PolicyType.NEVER}>
+            <DrawerItemList {...props} />
+        </GtkScrolledWindow>
+    </AdwToolbarView>
+);
+
+const DrawerToggle = ({ navigation }: { navigation: DrawerNavigationHelpers }): ReactNode => (
+    <GtkButton
+        iconName="sidebar-show-symbolic"
+        tooltipText="Toggle Sidebar"
+        accessibleLabel="Toggle Sidebar"
+        onClicked={() => {
+            navigation.dispatch(DrawerActions.toggleDrawer());
+        }}
+    />
+);
+
+const DrawerHeader = ({ descriptor, navigation }: DrawerHeaderProps): ReactNode => {
+    const { route, options } = descriptor;
+
+    if (options.headerShown === false) {
+        return null;
+    }
+
+    if (options.header !== undefined) {
+        return <>{options.header({ route, navigation: descriptor.navigation, options })}</>;
+    }
+
+    return (
+        <HeaderBar
+            options={options}
+            start={<DrawerToggle navigation={navigation} />}
+            titleWidget={<AdwWindowTitle title={options.title ?? route.name} />}
+        />
+    );
+};
+
+const DrawerPage = ({ descriptor, isLoaded }: DrawerPageProps): ReactNode => {
+    const { route, options } = descriptor;
+
+    return (
+        <ScenePage
+            name={route.key}
+            title={options.title ?? route.name}
+            isLoaded={isLoaded || options.lazy === false}
+            render={() => descriptor.render()}
+        />
+    );
+};
+
+const DrawerView = ({ state, navigation, descriptors, drawerContent, ...config }: DrawerViewProps): ReactNode => {
+    const { collapsed = false, sidebarPosition = "start", pinSidebar, minSidebarWidth, maxSidebarWidth } = config;
+    const focused = getFocusedRoute(state);
+    const descriptor = requireDescriptor(descriptors, focused.key);
+    const loaded = useLoadedRoutes(focused.key, state.preloadedRouteKeys);
+    const onShowSidebarChanged = useSidebarSync(navigation);
+    const contentProps = { state, navigation, descriptors };
+    const sidebar = drawerContent === undefined ? <DrawerContent {...contentProps} /> : drawerContent(contentProps);
+    usePopToTopOnBlur(state, descriptors, navigation);
+    useCloseOnNavigate(state, navigation, collapsed);
+
+    return (
+        <DrawerCollapsedContext value={collapsed}>
+            <AdwOverlaySplitView
+                collapsed={collapsed}
+                showSidebar={getDrawerStatus(state) === "open"}
+                sidebarPosition={PACK_TYPES[sidebarPosition]}
+                pinSidebar={pinSidebar}
+                minSidebarWidth={minSidebarWidth}
+                maxSidebarWidth={maxSidebarWidth}
+                sidebarWidthFraction={config.sidebarWidthFraction}
+                onNotifyShowSidebar={onShowSidebarChanged}
+                sidebar={<>{sidebar}</>}
+            >
+                <AdwToolbarView topBar={<DrawerHeader descriptor={descriptor} navigation={navigation} />}>
+                    <AdwViewStack visibleChildName={focused.key}>
+                        {state.routes.map((route) => (
+                            <DrawerPage
+                                key={route.key}
+                                descriptor={requireDescriptor(descriptors, route.key)}
+                                isLoaded={loaded.has(route.key)}
+                            />
+                        ))}
+                    </AdwViewStack>
+                </AdwToolbarView>
+            </AdwOverlaySplitView>
+        </DrawerCollapsedContext>
+    );
+};
+
+export { DrawerView };

package/src/drawer/types.ts

@@ -0,0 +1,142 @@
+import type {
+    DefaultNavigatorOptions,
+    Descriptor,
+    DrawerActionHelpers,
+    DrawerNavigationState,
+    DrawerRouterOptions,
+    NavigationHelpers,
+    NavigationProp,
+    ParamListBase,
+    RouteProp,
+} from "@react-navigation/core";
+import type { ReactNode } from "react";
+import type { HeaderOptions } from "../shared/types.js";
+
+/** Events the drawer navigator emits on top of React Navigation's core events. */
+type DrawerNavigationEventMap = {
+    /** The user activated an item in the sidebar. */
+    drawerItemPress: {
+        /** No payload. */
+        data: undefined;
+        /** Calling `preventDefault` keeps the current screen. */
+        canPreventDefault: true;
+    };
+};
+
+/** Per-screen options of the drawer navigator. */
+type DrawerNavigationOptions = HeaderOptions & {
+    /** Renders a custom top bar instead of the default `AdwHeaderBar`. */
+    header?: (props: DrawerHeaderProps) => ReactNode;
+    /** Label shown in the sidebar; defaults to `title`, then to the route name. */
+    drawerLabel?: string;
+    /** Icon name shown next to the sidebar label. */
+    drawerIcon?: string;
+    /** Whether the screen mounts on first focus instead of at startup; defaults to `true`. */
+    lazy?: boolean;
+    /** Whether a nested stack pops to its first screen when this screen loses focus; defaults to `false`. */
+    popToTopOnBlur?: boolean;
+};
+
+/** Navigation object of a drawer screen. */
+type DrawerNavigationProp<
+    ParamList extends ParamListBase,
+    RouteName extends keyof ParamList = keyof ParamList,
+    NavigatorID extends string | undefined = undefined,
+> = NavigationProp<
+    ParamList,
+    RouteName,
+    NavigatorID,
+    DrawerNavigationState<ParamList>,
+    DrawerNavigationOptions,
+    DrawerNavigationEventMap
+> & DrawerActionHelpers<ParamList>;
+
+/** Props a drawer screen component receives. */
+type DrawerScreenProps<
+    ParamList extends ParamListBase,
+    RouteName extends keyof ParamList = keyof ParamList,
+    NavigatorID extends string | undefined = undefined,
+> = {
+    /** Navigation object of the screen. */
+    navigation: DrawerNavigationProp<ParamList, RouteName, NavigatorID>;
+    /** The route the screen renders. */
+    route: RouteProp<ParamList, RouteName>;
+};
+
+/** Arguments of a custom drawer `header` renderer. */
+type DrawerHeaderProps = {
+    /** The focused route. */
+    route: RouteProp<ParamListBase>;
+    /** Navigation object of the focused route. */
+    navigation: DrawerNavigationProp<ParamListBase>;
+    /** Resolved options of the focused route. */
+    options: DrawerNavigationOptions;
+};
+
+/** Navigation helpers of the drawer navigator itself. */
+type DrawerNavigationHelpers = NavigationHelpers<ParamListBase, DrawerNavigationEventMap> &
+    DrawerActionHelpers<ParamListBase>;
+
+/** Descriptor of one drawer route. */
+type DrawerDescriptor = Descriptor<
+    DrawerNavigationOptions,
+    DrawerNavigationProp<ParamListBase>,
+    RouteProp<ParamListBase>
+>;
+
+/** Descriptors of the drawer routes, keyed by route key. */
+type DrawerDescriptorMap = Record<string, DrawerDescriptor>;
+
+/** Arguments of a custom `drawerContent` renderer and props of {@link DrawerItemList}. */
+type DrawerContentProps = {
+    /** State of the drawer navigator. */
+    state: DrawerNavigationState<ParamListBase>;
+    /** Navigation helpers of the drawer navigator. */
+    navigation: DrawerNavigationHelpers;
+    /** Descriptors of the drawer routes. */
+    descriptors: DrawerDescriptorMap;
+};
+
+/** Props of the drawer navigator beyond the options every navigator shares. */
+type DrawerNavigationConfig = {
+    /** Renders the sidebar; defaults to a header bar above a {@link DrawerItemList}. */
+    drawerContent?: (props: DrawerContentProps) => ReactNode;
+    /** Whether the sidebar overlays the content instead of sitting beside it; defaults to `false`. */
+    collapsed?: boolean;
+    /** Which side the sidebar sits on; defaults to `"start"`. */
+    sidebarPosition?: "start" | "end";
+    /** Whether collapsing and uncollapsing leave the sidebar's visibility alone; defaults to `false`. */
+    pinSidebar?: boolean;
+    /** Minimum sidebar width, in the unit libadwaita uses for the split view. */
+    minSidebarWidth?: number;
+    /** Maximum sidebar width, in the unit libadwaita uses for the split view. */
+    maxSidebarWidth?: number;
+    /** Preferred sidebar width as a fraction of the total width. */
+    sidebarWidthFraction?: number;
+};
+
+/** Props of the drawer `Navigator` component. */
+type DrawerNavigatorProps = DefaultNavigatorOptions<
+    ParamListBase,
+    string | undefined,
+    DrawerNavigationState<ParamListBase>,
+    DrawerNavigationOptions,
+    DrawerNavigationEventMap,
+    DrawerNavigationProp<ParamListBase>
+> &
+DrawerRouterOptions &
+DrawerNavigationConfig;
+
+export type {
+    DrawerContentProps,
+    DrawerDescriptor,
+    DrawerDescriptorMap,
+    DrawerHeaderProps,
+    DrawerNavigationConfig,
+    DrawerNavigationEventMap,
+    DrawerNavigationHelpers,
+    DrawerNavigationOptions,
+    DrawerNavigationProp,
+    DrawerNavigatorProps,
+    DrawerScreenProps,
+};