@gtkx/navigation 2.0.0-beta.11 → 2.0.0-beta.12

package/src/drawer/types.ts

@@ -29,6 +29,8 @@ type DrawerNavigationOptions = HeaderOptions & {
     header?: (props: DrawerHeaderProps) => ReactNode;
     /** Label shown in the sidebar; defaults to `title`, then to the route name. */
     drawerLabel?: string;
+    /** Whether underscores in the sidebar label indicate mnemonics; defaults to `false`. */
+    useUnderline?: boolean;
     /** Icon name shown next to the sidebar label. */
     drawerIcon?: string;
     /** Whether the screen mounts on first focus instead of at startup; defaults to `true`. */
@@ -49,7 +51,8 @@ type DrawerNavigationProp<
     DrawerNavigationState<ParamList>,
     DrawerNavigationOptions,
     DrawerNavigationEventMap
-> & DrawerActionHelpers<ParamList>;
+> &
+    DrawerActionHelpers<ParamList>;
 
 /** Props a drawer screen component receives. */
 type DrawerScreenProps<
@@ -124,8 +127,8 @@ type DrawerNavigatorProps = DefaultNavigatorOptions<
     DrawerNavigationEventMap,
     DrawerNavigationProp<ParamListBase>
 > &
-DrawerRouterOptions &
-DrawerNavigationConfig;
+    DrawerRouterOptions &
+    DrawerNavigationConfig;
 
 export type {
     DrawerContentProps,

package/src/index.ts

@@ -61,11 +61,7 @@ export type {
     StackScreenProps,
     StackTransitionData,
 } from "./stack/types.js";
-export {
-    createStaticNavigation,
-    type StaticNavigationProps,
-    type StaticNavigationTree,
-} from "./static-navigation.js";
+export { createStaticNavigation, type StaticNavigationProps, type StaticNavigationTree } from "./static-navigation.js";
 export { createTabNavigator, createTabScreen, TabNavigator, type TabTypeBag } from "./tabs/create-tab-navigator.js";
 export type {
     TabDescriptor,

package/src/shared/header-bar.tsx

@@ -21,12 +21,12 @@ const HeaderBar = ({ options, titleWidget, start, showBackButton }: HeaderBarPro
     <AdwHeaderBar
         showBackButton={showBackButton ?? true}
         titleWidget={resolveTitleWidget(options, titleWidget)}
-        start={(
+        start={
             <>
                 {start}
                 {options.headerStart}
             </>
-        )}
+        }
         end={options.headerEnd}
     />
 );

package/src/shared/scene-page.tsx

@@ -8,11 +8,13 @@ type ScenePageProps = {
     iconName?: string;
     badgeNumber?: number;
     needsAttention?: boolean;
+    useUnderline?: boolean;
+    isFocused: boolean;
     isLoaded: boolean;
     render: () => ReactElement;
 };
 
-const ScenePage = ({ name, title, isLoaded, render, ...page }: ScenePageProps): ReactNode => {
+const ScenePage = ({ name, title, isFocused, isLoaded, render, ...page }: ScenePageProps): ReactNode => {
     const [hasLoaded, setHasLoaded] = useState(isLoaded);
 
     if (isLoaded && !hasLoaded) {
@@ -26,7 +28,8 @@ const ScenePage = ({ name, title, isLoaded, render, ...page }: ScenePageProps):
             iconName={page.iconName}
             badgeNumber={page.badgeNumber}
             needsAttention={page.needsAttention}
-            useUnderline={false}
+            accessibleHidden={!isFocused}
+            useUnderline={page.useUnderline ?? false}
         >
             <AdwBin>{hasLoaded ? render() : null}</AdwBin>
         </AdwViewStackPage>

package/src/split-view/split-view.tsx

@@ -57,17 +57,20 @@ const useContentSync = (
     viewRef: ViewRef,
     navigation: SplitViewNavigationHelpers,
 ): ((isShown: boolean | null) => void) =>
-    useCallback((isShown: boolean | null) => {
-        if (isShown === null || isShown === hasContent(navigation.getState())) {
-            return;
-        }
-
-        if (!isShown) {
-            popContent(navigation);
-        }
-
-        settleShowContent(viewRef, isShown, hasContent(navigation.getState()));
-    }, [viewRef, navigation]);
+    useCallback(
+        (isShown: boolean | null) => {
+            if (isShown === null || isShown === hasContent(navigation.getState())) {
+                return;
+            }
+
+            if (!isShown) {
+                popContent(navigation);
+            }
+
+            settleShowContent(viewRef, isShown, hasContent(navigation.getState()));
+        },
+        [viewRef, navigation],
+    );
 
 const EscapeGuard = (): ReactNode => (
     <GtkEventControllerKey
@@ -83,9 +86,12 @@ const SidebarPage = ({ descriptor }: { descriptor: SplitViewDescriptor }): React
         return <AdwNavigationPage title={options.title ?? route.name}>{descriptor.render()}</AdwNavigationPage>;
     }
 
-    const topBar = options.header === undefined
-        ? <HeaderBar options={options} showBackButton={false} />
-        : <>{options.header({ route, navigation, options, back: undefined })}</>;
+    const topBar =
+        options.header === undefined ? (
+            <HeaderBar options={options} showBackButton={false} />
+        ) : (
+            <>{options.header({ route, navigation, options, back: undefined })}</>
+        );
 
     return (
         <AdwNavigationPage title={options.title ?? route.name}>
@@ -117,18 +123,18 @@ const SplitView = (props: SplitViewProps): ReactNode => {
                 title={contentTitle(state, descriptors)}
                 controllers={collapsed && props.popOnEscape === false ? <EscapeGuard /> : null}
             >
-                {hasContent(state)
-                    ? (
-                            <StackView
-                                offset={1}
-                                popOnEscape={props.popOnEscape}
-                                state={state}
-                                navigation={navigation}
-                                descriptors={descriptors}
-                                describe={describe}
-                            />
-                        )
-                    : <>{contentPlaceholder}</>}
+                {hasContent(state) ? (
+                    <StackView
+                        offset={1}
+                        popOnEscape={props.popOnEscape}
+                        state={state}
+                        navigation={navigation}
+                        descriptors={descriptors}
+                        describe={describe}
+                    />
+                ) : (
+                    <>{contentPlaceholder}</>
+                )}
             </AdwNavigationPage>
         </AdwNavigationSplitView>
     );

package/src/split-view/types.ts

@@ -29,7 +29,8 @@ type SplitViewNavigationProp<
     StackNavigationState<ParamList>,
     SplitViewNavigationOptions,
     SplitViewNavigationEventMap
-> & StackActionHelpers<ParamList>;
+> &
+    StackActionHelpers<ParamList>;
 
 /** Props a split view screen component receives. */
 type SplitViewScreenProps<
@@ -84,8 +85,8 @@ type SplitViewNavigatorProps = DefaultNavigatorOptions<
     SplitViewNavigationEventMap,
     SplitViewNavigationProp<ParamListBase>
 > &
-StackRouterOptions &
-SplitViewNavigationConfig;
+    StackRouterOptions &
+    SplitViewNavigationConfig;
 
 export type {
     SplitViewDescriptor,

package/src/stack/stack-pages.ts

@@ -100,27 +100,29 @@ const useStackPages = (
 ): StackPages => {
     const [tracking, setTracking] = useState<PageTracking>(() => initialTracking(state, descriptors, offset));
 
-    if (!hasSameMembers(tracking.order, neededKeys(state, tracking.closing, offset)) ||
+    if (
+        !hasSameMembers(tracking.order, neededKeys(state, tracking.closing, offset)) ||
         tracking.focusedKey !== getFocusedKey(state, offset) ||
-        tracking.descriptors !== descriptors) {
+        tracking.descriptors !== descriptors
+    ) {
         setTracking(advance(tracking, state, descriptors, offset));
     }
 
     const release = useCallback((key: string) => {
-        setTracking((current) => (current.closing[key] === undefined
-            ? current
-            : {
-                    ...current,
-                    order: current.order.filter((entry) => entry !== key),
-                    closing: withoutKeys(current.closing, [key]),
-                }));
+        setTracking((current) =>
+            current.closing[key] === undefined
+                ? current
+                : {
+                      ...current,
+                      order: current.order.filter((entry) => entry !== key),
+                      closing: withoutKeys(current.closing, [key]),
+                  },
+        );
     }, []);
 
     const sources = { state, descriptors, closing: tracking.closing };
 
-    const pages = tracking.order
-        .map((key) => resolvePage(key, sources, describe))
-        .filter((page) => page !== undefined);
+    const pages = tracking.order.map((key) => resolvePage(key, sources, describe)).filter((page) => page !== undefined);
 
     return { pages, release };
 };

package/src/stack/stack-view.tsx

@@ -2,6 +2,7 @@ import type * as Adw from "@gtkx/gi/adw";
 import type { ParamListBase, StackNavigationState } from "@react-navigation/core";
 import type { ReactNode, RefObject } from "react";
 import { AdwNavigationPage, AdwNavigationView, AdwToolbarView } from "@gtkx/jsx/adw";
+import { useLatestRef } from "@gtkx/react/internal";
 import { useCallback, useEffect, useRef } from "react";
 import type { Describe } from "./stack-pages.js";
 import type { OptionsByKey } from "./sync-navigation-stack.js";
@@ -47,16 +48,6 @@ const previousDescriptor = (
     return previousKey === undefined ? undefined : descriptors[previousKey];
 };
 
-const useLatest = <T,>(value: T): RefObject<T> => {
-    const ref = useRef(value);
-
-    useEffect(() => {
-        ref.current = value;
-    }, [value]);
-
-    return ref;
-};
-
 const useStackSync = (
     viewRef: ViewRef,
     state: StackNavigationState<ParamListBase>,
@@ -84,7 +75,7 @@ const usePoppedHandler = (
     options: RefObject<OptionsByKey>,
     offset: number,
 ): (() => void) => {
-    const navigationRef = useLatest(navigation);
+    const navigationRef = useLatestRef(navigation);
     const isScheduledRef = useRef(false);
 
     return useCallback(() => {
@@ -114,9 +105,12 @@ const StackPageContent = ({ descriptor, previous }: Omit<StackPageProps, "naviga
 
     const back = previous === undefined ? undefined : { title: previous.options.title ?? previous.route.name };
 
-    const topBar = options.header === undefined
-        ? <HeaderBar options={options} showBackButton={options.headerBackVisible ?? true} />
-        : <>{options.header({ route, navigation, options, back })}</>;
+    const topBar =
+        options.header === undefined ? (
+            <HeaderBar options={options} showBackButton={options.headerBackVisible ?? true} />
+        ) : (
+            <>{options.header({ route, navigation, options, back })}</>
+        );
 
     return <AdwToolbarView topBar={topBar}>{descriptor.render()}</AdwToolbarView>;
 };
@@ -166,7 +160,7 @@ const StackView = (props: StackViewProps): ReactNode => {
     const { state, navigation, descriptors, describe, popOnEscape, offset = 0 } = props;
     const viewRef = useRef<Adw.NavigationView | null>(null);
     const { pages, release } = useStackPages(state, descriptors, describe, offset);
-    const options = useLatest<OptionsByKey>(Object.fromEntries(pages.map((page) => [page.route.key, page.options])));
+    const options = useLatestRef<OptionsByKey>(Object.fromEntries(pages.map((page) => [page.route.key, page.options])));
     const onPopped = usePoppedHandler(viewRef, navigation, options, offset);
     useStackSync(viewRef, state, options, offset);
 

package/src/stack/types.ts

@@ -68,7 +68,8 @@ type StackNavigationProp<
     StackNavigationState<ParamList>,
     StackNavigationOptions,
     StackNavigationEventMap
-> & StackActionHelpers<ParamList>;
+> &
+    StackActionHelpers<ParamList>;
 
 /** Props a stack screen component receives. */
 type StackScreenProps<
@@ -112,8 +113,8 @@ type StackNavigatorProps = DefaultNavigatorOptions<
     StackNavigationEventMap,
     StackNavigationProp<ParamListBase>
 > &
-StackRouterOptions &
-StackNavigationConfig;
+    StackRouterOptions &
+    StackNavigationConfig;
 
 export type {
     StackDescriptor,

package/src/tabs/tab-view.tsx

@@ -23,25 +23,29 @@ type TabHeaderProps = {
 
 type TabPageProps = {
     descriptor: TabDescriptor;
+    isFocused: boolean;
     isLoaded: boolean;
 };
 
 const useTabSelection = (navigation: TabNavigationHelpers): ((name: string | null) => void) =>
-    useCallback((name: string | null) => {
-        const current = navigation.getState();
-        const focusedKey = getFocusedRoute(current).key;
-        const route = current.routes.find((candidate) => candidate.key === name);
-
-        if (route === undefined || route.key === focusedKey) {
-            return;
-        }
-
-        const event = navigation.emit({ type: "tabPress", target: route.key, canPreventDefault: true });
-
-        if (!event.defaultPrevented) {
-            navigation.dispatch({ ...CommonActions.navigate(route.name, route.params), target: current.key });
-        }
-    }, [navigation]);
+    useCallback(
+        (name: string | null) => {
+            const current = navigation.getState();
+            const focusedKey = getFocusedRoute(current).key;
+            const route = current.routes.find((candidate) => candidate.key === name);
+
+            if (route === undefined || route.key === focusedKey) {
+                return;
+            }
+
+            const event = navigation.emit({ type: "tabPress", target: route.key, canPreventDefault: true });
+
+            if (!event.defaultPrevented) {
+                navigation.dispatch({ ...CommonActions.navigate(route.name, route.params), target: current.key });
+            }
+        },
+        [navigation],
+    );
 
 const defaultTabHeader = ({ descriptor, viewSwitcher }: TabHeaderProps): ReactElement => (
     <HeaderBar
@@ -67,16 +71,18 @@ const TabHeader = (props: TabHeaderProps): ReactNode => {
     );
 };
 
-const TabPage = ({ descriptor, isLoaded }: TabPageProps): ReactNode => {
+const TabPage = ({ descriptor, isFocused, isLoaded }: TabPageProps): ReactNode => {
     const { route, options } = descriptor;
 
     return (
         <ScenePage
             name={route.key}
             title={options.tabBarLabel ?? options.title ?? route.name}
+            useUnderline={options.useUnderline}
             iconName={options.tabBarIcon}
             badgeNumber={options.tabBarBadge}
             needsAttention={options.needsAttention}
+            isFocused={isFocused}
             isLoaded={isLoaded || options.lazy === false}
             render={() => descriptor.render()}
         />
@@ -89,18 +95,17 @@ const TabView = ({ state, navigation, descriptors, tabBarPosition = "top" }: Tab
     const descriptor = requireDescriptor(descriptors, focused.key);
     const onVisibleChildChanged = useTabSelection(navigation);
 
-    const viewSwitcher = stack === null
-        ? undefined
-        : <AdwViewSwitcher stack={stack} policy={Adw.ViewSwitcherPolicy.WIDE} />;
+    const viewSwitcher =
+        stack === null ? undefined : <AdwViewSwitcher stack={stack} policy={Adw.ViewSwitcherPolicy.WIDE} />;
 
     const hasSwitcherBar = tabBarPosition === "bottom" && stack !== null;
     usePopToTopOnBlur(state, descriptors, navigation);
 
     return (
         <AdwToolbarView
-            topBar={(
+            topBar={
                 <TabHeader descriptor={descriptor} viewSwitcher={tabBarPosition === "top" ? viewSwitcher : undefined} />
-            )}
+            }
             bottomBar={hasSwitcherBar ? <AdwViewSwitcherBar stack={stack} reveal /> : undefined}
         >
             <AdwViewStack
@@ -113,6 +118,7 @@ const TabView = ({ state, navigation, descriptors, tabBarPosition = "top" }: Tab
                     <TabPage
                         key={route.key}
                         descriptor={requireDescriptor(descriptors, route.key)}
+                        isFocused={route.key === focused.key}
                         isLoaded={route.key === focused.key || state.preloadedRouteKeys.includes(route.key)}
                     />
                 ))}

package/src/tabs/types.ts

@@ -29,6 +29,8 @@ type TabNavigationOptions = HeaderOptions & {
     header?: (props: TabHeaderProps) => ReactNode;
     /** Label shown in the view switcher; defaults to `title`, then to the route name. */
     tabBarLabel?: string;
+    /** Whether underscores in the tab label indicate mnemonics; defaults to `false`. */
+    useUnderline?: boolean;
     /** Icon name shown in the view switcher. */
     tabBarIcon?: string;
     /** Badge number shown in the view switcher; `0` hides the badge. */
@@ -61,7 +63,8 @@ type TabNavigationProp<
     TabNavigationState<ParamList>,
     TabNavigationOptions,
     TabNavigationEventMap
-> & TabActionHelpers<ParamList>;
+> &
+    TabActionHelpers<ParamList>;
 
 /** Props a tab screen component receives. */
 type TabScreenProps<
@@ -103,8 +106,8 @@ type TabNavigatorProps = DefaultNavigatorOptions<
     TabNavigationEventMap,
     TabNavigationProp<ParamListBase>
 > &
-TabRouterOptions &
-TabNavigationConfig;
+    TabRouterOptions &
+    TabNavigationConfig;
 
 export type {
     TabDescriptor,

package/src/theme.ts

@@ -11,7 +11,6 @@ type AdwaitaTheme = {
 };
 
 declare module "@react-navigation/core" {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
     interface Theme extends AdwaitaTheme {}
 }