@natsuneko-laboratory/react-native-desktop-navigation 0.1.0-alpha.12

package/src/core/NavigationItem.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import {
+  Pressable,
+  Text,
+  View,
+  StyleSheet,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import type { NavigationRoute } from '../routers';
+import type { FocusTarget } from './focus';
+import type {
+  NavigationItemState,
+  NavigationItemStyle,
+  SidebarScreenOptions,
+} from './types';
+import { useNavigationTheme } from './context';
+
+function resolveStyle<T extends ViewStyle | TextStyle>(
+  style: NavigationItemStyle<T> | undefined,
+  state: NavigationItemState,
+) {
+  return typeof style === 'function' ? style(state) : style;
+}
+export interface NavigationItemProps {
+  route: NavigationRoute;
+  options: SidebarScreenOptions;
+  selected: boolean;
+  focused: boolean;
+  collapsed: boolean;
+  sidebar: boolean;
+  onFocus: () => void;
+  onBlur: () => void;
+  onPress: () => void;
+  itemRef: (target: FocusTarget | null) => void;
+}
+/** The interactive shell remains owned by navigation when its content is customized. */
+export function NavigationItem({
+  route,
+  options,
+  selected,
+  focused,
+  collapsed,
+  sidebar,
+  onFocus,
+  onBlur,
+  onPress,
+  itemRef,
+}: NavigationItemProps) {
+  const { colors } = useNavigationTheme();
+  const [pressed, setPressed] = React.useState(false);
+  const [hovered, setHovered] = React.useState(false);
+  const state: NavigationItemState = {
+    selected,
+    focused,
+    collapsed,
+    hovered,
+    pressed: pressed && !options.disabled,
+    disabled: !!options.disabled,
+  };
+  const label = options.label ?? options.title ?? route.name;
+  const content = (
+    <>
+      {options.icon != null && (
+        <View style={resolveStyle(options.iconContainerStyle, state)}>
+          {typeof options.icon === 'function'
+            ? options.icon({ focused: selected, disabled: state.disabled })
+            : options.icon}
+        </View>
+      )}
+      {(!collapsed || !options.icon) && (
+        <Text
+          numberOfLines={1}
+          style={[
+            { color: colors.text, flexShrink: 1 },
+            resolveStyle(options.labelStyle, state),
+          ]}
+        >
+          {collapsed ? label.slice(0, 1) : label}
+        </Text>
+      )}
+      {!collapsed &&
+        options.badge != null &&
+        (typeof options.badge === 'string' ||
+        typeof options.badge === 'number' ? (
+          <Text
+            style={[
+              { color: colors.mutedText },
+              resolveStyle(options.badgeStyle, state),
+            ]}
+          >
+            {options.badge}
+          </Text>
+        ) : (
+          options.badge
+        ))}
+    </>
+  );
+  return (
+    <Pressable
+      ref={(target) => itemRef(target as unknown as FocusTarget | null)}
+      accessible
+      focusable={!options.disabled}
+      disabled={options.disabled}
+      accessibilityRole={sidebar ? 'menuitem' : 'tab'}
+      accessibilityLabel={label}
+      accessibilityState={{ selected, disabled: state.disabled }}
+      onFocus={onFocus}
+      onBlur={() => {
+        setPressed(false);
+        onBlur();
+      }}
+      onPress={onPress}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={[
+        navigationItemStyle,
+        {
+          opacity: state.disabled ? 0.45 : 1,
+          backgroundColor: selected ? colors.selectedBackground : 'transparent',
+          borderColor: focused ? colors.accent : 'transparent',
+        },
+        resolveStyle(options.itemStyle, state),
+      ]}
+    >
+      {options.renderItemContent
+        ? options.renderItemContent({
+            ...state,
+            route,
+            label,
+            children: content,
+          })
+        : content}
+    </Pressable>
+  );
+}
+export const navigationItemStyle = StyleSheet.create({
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    padding: 10,
+    margin: 2,
+    borderRadius: 4,
+    borderWidth: 1,
+  },
+}).item;

package/src/core/Scene.tsx

@@ -0,0 +1,194 @@
+import React from 'react';
+import {
+  Animated,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import type { NavigationRoute } from '../routers';
+import { DesktopView } from '../platform';
+import {
+  PlatformContext,
+  ScopeContext,
+  ScreenContext,
+  useStore,
+  useNavigationTheme,
+} from './context';
+import { createNavigation } from './navigation';
+import { FocusContext, type FocusRegistry, type FocusTarget } from './focus';
+import type { CommonScreenOptions, StackAnimation } from './types';
+export interface SceneProps {
+  nodeId: string;
+  route: NavigationRoute;
+  component: React.ComponentType<any>;
+  visible: boolean;
+  /** Native content slots must be laid out before restoring keyboard focus. */
+  focusReady?: boolean;
+  options: CommonScreenOptions;
+  animation?: StackAnimation;
+  overlay?: 'modal' | 'dialog';
+  overlayStyle?: StyleProp<ViewStyle>;
+  dialogStyle?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+}
+export function Scene({
+  nodeId,
+  route,
+  component: Component,
+  visible,
+  focusReady = true,
+  options,
+  animation = 'none',
+  overlay,
+  overlayStyle,
+  dialogStyle,
+  children,
+}: SceneProps) {
+  const store = useStore();
+  const { colors } = useNavigationTheme();
+  const platform = React.useContext(PlatformContext);
+  const snapshot = React.useCallback(
+    () => store.isRouteFocused(nodeId, route.key),
+    [store, nodeId, route.key],
+  );
+  const focused = React.useSyncExternalStore(
+    store.subscribe,
+    snapshot,
+    snapshot,
+  );
+  const navigation = React.useMemo(
+    () => createNavigation(store, nodeId, route.key),
+    [store, nodeId, route.key],
+  );
+  const targets = React.useRef(new Map<string, FocusTarget>());
+  const last = React.useRef<string | undefined>(undefined);
+  const registry = React.useMemo<FocusRegistry>(
+    () => ({
+      register(id, target) {
+        targets.current.set(id, target);
+        return () => {
+          targets.current.delete(id);
+        };
+      },
+      record(id) {
+        last.current = id;
+        store.setFocusedNode(nodeId);
+      },
+    }),
+    [store, nodeId],
+  );
+  const mounted = visible || options.inactiveBehavior !== 'unmount';
+  React.useEffect(() => {
+    if (!focused || !visible || !focusReady || options.focusBehavior === 'none')
+      return;
+    const previous =
+      options.focusBehavior !== 'first' && last.current
+        ? targets.current.get(last.current)
+        : undefined;
+    (previous ?? targets.current.values().next().value)?.focus();
+  }, [focused, visible, focusReady, options.focusBehavior, mounted]);
+  const [progress] = React.useState(() => new Animated.Value(1));
+  React.useEffect(() => {
+    if (!visible || animation === 'none') {
+      progress.setValue(1);
+      return;
+    }
+    progress.setValue(0);
+    const transition = Animated.timing(progress, {
+      toValue: 1,
+      duration: platform.defaultTransitions.push.duration,
+      // react-native-macos's Fabric/bridgeless host does not reliably
+      // connect native-driven Animated values, leaving views stuck at
+      // their initial (invisible) frame. Drive this on the JS thread
+      // instead so the entrance transition actually completes.
+      useNativeDriver: false,
+    });
+    transition.start();
+    return () => transition.stop();
+  }, [visible, animation, progress, platform]);
+  if (!mounted) return null;
+  const offset = platform.defaultTransitions.push.offset;
+  const animatedStyle =
+    animation === 'none'
+      ? undefined
+      : {
+          opacity: progress,
+          transform:
+            animation === 'fade'
+              ? []
+              : [
+                  {
+                    [animation === 'slide-vertical'
+                      ? 'translateY'
+                      : 'translateX']: progress.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [offset, 0],
+                    }),
+                  },
+                ],
+        };
+  return (
+    <ScopeContext.Provider value={{ nodeId, routeKey: route.key }}>
+      <ScreenContext.Provider value={{ navigation, route, focused }}>
+        <FocusContext.Provider value={registry}>
+          <DesktopView
+            testID={`scene-${route.name}`}
+            onFocus={() => store.focusRoute(nodeId, route.key)}
+            pointerEvents={visible ? 'auto' : 'none'}
+            accessibilityElementsHidden={!visible}
+            importantForAccessibility={visible ? 'auto' : 'no-hide-descendants'}
+            accessibilityViewIsModal={!!overlay && visible}
+            style={[
+              styles.scene,
+              options.sceneStyle,
+              overlay && styles.overlay,
+              overlay === 'dialog' && styles.dialogBackdrop,
+              overlay && overlayStyle,
+              !visible && styles.hidden,
+            ]}
+          >
+            <Animated.View
+              style={[
+                styles.content,
+                overlay === 'dialog' && [
+                  styles.dialog,
+                  { backgroundColor: colors.surface },
+                ],
+                options.contentStyle,
+                overlay === 'dialog' && dialogStyle,
+                animatedStyle as never,
+              ]}
+            >
+              {children}
+              <Component navigation={navigation} route={route} />
+            </Animated.View>
+          </DesktopView>
+        </FocusContext.Provider>
+      </ScreenContext.Provider>
+    </ScopeContext.Provider>
+  );
+}
+const styles = StyleSheet.create({
+  scene: { flex: 1 },
+  content: { flex: 1 },
+  hidden: { display: 'none' },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.25)',
+    zIndex: 1,
+  },
+  dialogBackdrop: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 32,
+  },
+  dialog: {
+    flex: 0,
+    width: '80%',
+    maxWidth: 640,
+    maxHeight: '90%',
+    minHeight: 160,
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+});

package/src/core/SelectionNavigator.tsx

@@ -0,0 +1,371 @@
+import React from 'react';
+import {
+  Pressable,
+  ScrollView,
+  Text,
+  View,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import { type SelectionNavigationState } from '../routers';
+import {
+  useNavigator,
+  resolveOptions,
+  NavigatorStateContext,
+  type Definition,
+} from './builder';
+import { NavigationItem, navigationItemStyle } from './NavigationItem';
+import { Scene } from './Scene';
+import { createNavigation } from './navigation';
+import {
+  PlatformContext,
+  ScopeContext,
+  SplitColumnContext,
+  useNavigationTheme,
+} from './context';
+import type { SidebarScreenOptions, SidebarFooterProps } from './types';
+import {
+  consumeKey,
+  DesktopView,
+  eventHandled,
+  matchesShortcut,
+} from '../platform';
+import type { FocusTarget } from './focus';
+export interface SelectionNavigatorProps {
+  id?: string;
+  initialRouteName?: string;
+  screenOptions?: SidebarScreenOptions;
+  style?: StyleProp<ViewStyle>;
+  barStyle?: StyleProp<ViewStyle>;
+  barContentStyle?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+  sectionStyle?: StyleProp<ViewStyle>;
+  sectionTitleStyle?: StyleProp<TextStyle>;
+  /** Hide the default button independently of programmatic collapse actions. */
+  collapseButtonShown?: boolean;
+  sidebarFooterStyle?: StyleProp<ViewStyle>;
+  /** Replace the entire footer. Return null to remove it without reserving space. */
+  renderSidebarFooter?: (props: SidebarFooterProps) => React.ReactNode;
+  collapseButtonStyle?: StyleProp<ViewStyle>;
+  collapseLabelStyle?: StyleProp<TextStyle>;
+  renderCollapseButtonContent?: (props: {
+    collapsed: boolean;
+    children: React.ReactNode;
+  }) => React.ReactNode;
+  position?: 'left' | 'right';
+  /** Use 'fill' to follow the width of a containing Split.Column. */
+  width?: number | 'fill';
+  minWidth?: number;
+  maxWidth?: number;
+  collapsible?: boolean;
+  collapsedWidth?: number;
+  defaultCollapsed?: boolean;
+}
+export function SelectionNavigator({
+  type,
+  definitions,
+  ...props
+}: SelectionNavigatorProps & {
+  type: 'sidebar' | 'tabs';
+  definitions: Definition<SidebarScreenOptions>[];
+}) {
+  const platform = React.useContext(PlatformContext);
+  const { colors } = useNavigationTheme();
+  const configs = definitions.map((d) => ({
+    ...d,
+    ...props.screenOptions,
+    ...(typeof d.options === 'object' ? d.options : {}),
+  }));
+  const { id, state, store, navigation } =
+    useNavigator<SelectionNavigationState>(
+      type,
+      {
+        routes: configs,
+        initialRouteName: props.initialRouteName,
+        defaultCollapsed: props.defaultCollapsed,
+      },
+      props.id,
+    );
+  const items = state.routes.map((route) => {
+    const definition = definitions.find((d) => d.name === route.name);
+    if (!definition)
+      throw new Error(
+        `Missing Screen: ${route.name}. Remount to change the screen list.`,
+      );
+    return {
+      route,
+      definition,
+      options: resolveOptions(
+        definition,
+        route,
+        createNavigation(store, id, route.key),
+        props.screenOptions,
+      ),
+    };
+  });
+  React.useLayoutEffect(() => {
+    store.updateOptions(id, {
+      key: id,
+      routes: items.map((i) => ({ name: i.route.name, ...i.options })),
+    });
+    const current = items.find((i) => i.route.key === state.activeRouteKey);
+    if (current?.options.hidden || current?.options.disabled) {
+      const next = items.find((i) => !i.options.hidden && !i.options.disabled);
+      if (next) navigation.select(next.route.name);
+    }
+  });
+  const visibleItems = items.filter((i) => !i.options.hidden);
+  const enabled = visibleItems.filter((i) => !i.options.disabled);
+  const [focusedKey, setFocusedKey] = React.useState('');
+  const refs = React.useRef(new Map<string, FocusTarget>());
+  const sidebar = type === 'sidebar';
+  const collapsed = sidebar && state.collapsed;
+  const splitColumn = React.useContext(SplitColumnContext);
+  const scope = React.useContext(ScopeContext);
+  const syncColumn =
+    sidebar && splitColumn && scope.nodeId === splitColumn.nodeId
+      ? splitColumn.onSidebarChange
+      : undefined;
+  const columnId = splitColumn?.columnId;
+  const collapsedWidth = props.collapsedWidth ?? 56;
+  React.useLayoutEffect(() => {
+    if (syncColumn && columnId)
+      syncColumn(columnId, collapsed ? collapsedWidth : null);
+  }, [syncColumn, columnId, collapsed, collapsedWidth]);
+  React.useLayoutEffect(
+    () => () => {
+      if (syncColumn && columnId) syncColumn(columnId, null);
+    },
+    [syncColumn, columnId],
+  );
+  const focusItem = (index: number) => {
+    const item = enabled[(index + enabled.length) % enabled.length];
+    if (!item) return;
+    setFocusedKey(item.route.key);
+    refs.current.get(item.route.key)?.focus();
+  };
+  const bindings = sidebar
+    ? ['ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter'].map((key) => ({ key }))
+    : [
+        ...['ArrowLeft', 'ArrowRight', 'Home', 'End', 'Enter'].map((key) => ({
+          key,
+        })),
+        ...platform.keyboardShortcuts.nextTab,
+        ...platform.keyboardShortcuts.previousTab,
+      ];
+  const collapseContent = (
+    <Text style={[{ color: colors.text }, props.collapseLabelStyle]}>
+      {collapsed ? '»' : '«'}
+    </Text>
+  );
+  const collapseButton =
+    sidebar &&
+    props.collapsible !== false &&
+    props.collapseButtonShown !== false ? (
+      <Pressable
+        accessible
+        focusable
+        accessibilityRole="button"
+        accessibilityLabel={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        onPress={() => navigation.toggleSidebar()}
+        style={[navigationItemStyle, props.collapseButtonStyle]}
+      >
+        {props.renderCollapseButtonContent
+          ? props.renderCollapseButtonContent({
+              collapsed,
+              children: collapseContent,
+            })
+          : collapseContent}
+      </Pressable>
+    ) : null;
+  const footer =
+    sidebar && props.renderSidebarFooter
+      ? props.renderSidebarFooter({
+          collapsed,
+          collapseSidebar: navigation.collapseSidebar,
+          expandSidebar: navigation.expandSidebar,
+          toggleSidebar: navigation.toggleSidebar,
+          children: collapseButton,
+        })
+      : collapseButton;
+  const rail = (
+    <DesktopView
+      accessibilityRole={sidebar ? 'menu' : 'tablist'}
+      keyDownEvents={bindings}
+      focusable
+      onKeyDown={(event) => {
+        if (
+          eventHandled(event) ||
+          platform.isTextInputEvent(event) ||
+          !bindings.some((key) => matchesShortcut(event, key))
+        )
+          return;
+        store.setFocusedNode(id);
+        const index = enabled.findIndex(
+          (i) => i.route.key === (focusedKey || state.activeRouteKey),
+        );
+        const key = event.nativeEvent.key;
+        if (
+          !sidebar &&
+          platform.keyboardShortcuts.nextTab.some((k) =>
+            matchesShortcut(event, k),
+          )
+        )
+          navigation.nextTab();
+        else if (
+          !sidebar &&
+          platform.keyboardShortcuts.previousTab.some((k) =>
+            matchesShortcut(event, k),
+          )
+        )
+          navigation.previousTab();
+        else if (key === 'ArrowUp' || key === 'ArrowLeft') focusItem(index - 1);
+        else if (key === 'ArrowDown' || key === 'ArrowRight')
+          focusItem(index + 1);
+        else if (key === 'Home') focusItem(0);
+        else if (key === 'End') focusItem(enabled.length - 1);
+        else if (key === 'Enter') {
+          const item = enabled.find(
+            (i) => i.route.key === (focusedKey || state.activeRouteKey),
+          );
+          if (item) navigation.select(item.route.name);
+        }
+        consumeKey(event);
+      }}
+      style={[
+        { backgroundColor: colors.surface, borderColor: colors.border },
+        sidebar
+          ? {
+              width: collapsed
+                ? (props.collapsedWidth ?? 56)
+                : props.width === 'fill'
+                  ? '100%'
+                  : Math.min(
+                      props.maxWidth ?? Infinity,
+                      Math.max(
+                        props.minWidth ?? 120,
+                        props.width ?? platform.sidebar.defaultWidth,
+                      ),
+                    ),
+              maxWidth: '100%',
+              ...(props.position === 'right'
+                ? { borderLeftWidth: StyleSheet.hairlineWidth }
+                : { borderRightWidth: StyleSheet.hairlineWidth }),
+            }
+          : { borderBottomWidth: StyleSheet.hairlineWidth },
+        props.barStyle,
+      ]}
+    >
+      <ScrollView
+        horizontal={!sidebar}
+        contentContainerStyle={[
+          !sidebar && styles.tabItems,
+          props.barContentStyle,
+        ]}
+      >
+        {visibleItems.map((item, index) => {
+          const { route, options, definition } = item;
+          const selected = route.key === state.activeRouteKey;
+          const section = definition.section;
+
+          return (
+            <React.Fragment key={route.key}>
+              {sidebar &&
+                !collapsed &&
+                section?.title &&
+                visibleItems[index - 1]?.definition.section?.key !==
+                  section.key && (
+                  <View style={[props.sectionStyle, section.style]}>
+                    {section.renderTitle ? (
+                      section.renderTitle({ title: section.title })
+                    ) : (
+                      <Text
+                        accessibilityRole="header"
+                        style={[
+                          styles.section,
+                          { color: colors.mutedText },
+                          props.sectionTitleStyle,
+                          section.titleStyle,
+                        ]}
+                      >
+                        {section.title}
+                      </Text>
+                    )}
+                  </View>
+                )}
+              <NavigationItem
+                route={route}
+                options={options}
+                selected={selected}
+                focused={focusedKey === route.key}
+                collapsed={collapsed}
+                sidebar={sidebar}
+                itemRef={(value) => {
+                  if (value) refs.current.set(route.key, value);
+                  else refs.current.delete(route.key);
+                }}
+                onFocus={() => {
+                  setFocusedKey(route.key);
+                  store.setFocusedNode(id);
+                }}
+                onBlur={() =>
+                  setFocusedKey((current) =>
+                    current === route.key ? '' : current,
+                  )
+                }
+                onPress={() => {
+                  store.setFocusedNode(id);
+                  navigation.select(route.name);
+                }}
+              />
+            </React.Fragment>
+          );
+        })}
+      </ScrollView>
+      {sidebar && footer != null && footer !== false && (
+        <View testID="sidebar-footer" style={props.sidebarFooterStyle}>
+          {footer}
+        </View>
+      )}
+    </DesktopView>
+  );
+  return (
+    <NavigatorStateContext.Provider value={state}>
+      <View
+        style={[
+          styles.container,
+          sidebar && {
+            flexDirection: props.position === 'right' ? 'row-reverse' : 'row',
+          },
+          props.style,
+        ]}
+      >
+        {rail}
+        <View style={[styles.content, props.contentStyle]}>
+          {items.map(({ route, definition, options }) => (
+            <Scene
+              key={route.key}
+              nodeId={id}
+              route={route}
+              component={definition.component}
+              visible={
+                route.key === state.activeRouteKey &&
+                !options.hidden &&
+                !options.disabled
+              }
+              options={options}
+            />
+          ))}
+        </View>
+      </View>
+    </NavigatorStateContext.Provider>
+  );
+}
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  content: { flex: 1, minWidth: 0 },
+  tabItems: { flexDirection: 'row' },
+  section: { padding: 10, fontSize: 12, fontWeight: '600' },
+});