@ankhorage/surface 4.4.1 → 5.0.0

package/src/components/menu/Menu.tsx

@@ -1,228 +0,0 @@
-import React from 'react';
-import { type LayoutRectangle, Pressable, View } from 'react-native';
-
-import { Box, Stack } from '../../features/layout/public';
-import { Surface } from '../../features/surface/public';
-import { Text } from '../../features/typography/public';
-import { FocusScope } from '../../internal/focus/FocusScope';
-import { useFocusManager } from '../../internal/focus/useFocusManager';
-import { Portal } from '../../internal/overlay/Portal';
-import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
-import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { Inline } from '../../layout';
-import { ButtonBase } from '../../primitives/button-base';
-import { useTheme } from '../../theme/ThemeContext';
-import { resolveNextMenuIndex } from './navigation';
-import type { MenuAction, MenuProps } from './types';
-
-const boxNonePointerEvents = resolvePointerEvents('box-none');
-
-interface MeasurableNode {
-  measureInWindow?: (
-    callback: (x: number, y: number, width: number, height: number) => void,
-  ) => void;
-}
-
-function measureNode(node: unknown, callback: (layout: LayoutRectangle) => void) {
-  const measurableNode = node as MeasurableNode | null;
-  measurableNode?.measureInWindow?.((x, y, width, height) => {
-    callback({ height, width, x, y });
-  });
-}
-
-function renderActionContent(action: MenuAction, active: boolean) {
-  const titleColor =
-    action.intent === 'danger' ? 'danger' : active || action.selected ? 'neutral' : undefined;
-
-  return (
-    <Inline align="center" gap="s" justify="space-between" wrap="nowrap">
-      {action.leading ? <Box>{action.leading}</Box> : null}
-      <Box flex={1}>
-        <Stack gap="xxs">
-          <Text
-            color={titleColor}
-            variant="bodySmall"
-            weight={action.selected ? 'semiBold' : 'medium'}
-          >
-            {action.title}
-          </Text>
-          {action.description ? (
-            <Text emphasis="muted" variant="caption">
-              {action.description}
-            </Text>
-          ) : null}
-        </Stack>
-      </Box>
-      {action.trailing ? <Box>{action.trailing}</Box> : null}
-    </Inline>
-  );
-}
-
-export function Menu({
-  trigger,
-  actions,
-  dismiss,
-  closeOnSelect = true,
-  interactionPolicy = 'enabled',
-  testID,
-}: MenuProps) {
-  const { theme } = useTheme();
-  const { bindKeydown } = useFocusManager();
-  const animation = resolveOverlayAnimation('menu');
-  const anchorRef = React.useRef<View | null>(null);
-  const [open, setOpen] = React.useState(false);
-  const [layout, setLayout] = React.useState<LayoutRectangle | null>(null);
-  const [activeIndex, setActiveIndex] = React.useState(0);
-  const passive = interactionPolicy === 'passive';
-
-  const closeMenu = React.useCallback(() => {
-    setOpen(false);
-    if (dismiss) {
-      dismiss();
-    }
-  }, [dismiss]);
-
-  const activateAction = React.useCallback(
-    (action: MenuAction) => {
-      if (action.disabled) {
-        return;
-      }
-
-      if (action.activate) {
-        action.activate();
-      }
-
-      if (closeOnSelect) {
-        closeMenu();
-      }
-    },
-    [closeMenu, closeOnSelect],
-  );
-
-  const openMenu = React.useCallback(() => {
-    measureNode(anchorRef.current, setLayout);
-    const firstEnabledIndex = actions.findIndex((action) => !action.disabled);
-    setActiveIndex(firstEnabledIndex === -1 ? 0 : firstEnabledIndex);
-    setOpen(true);
-  }, [actions]);
-
-  React.useEffect(() => {
-    if (!open) {
-      return undefined;
-    }
-
-    return bindKeydown((event) => {
-      if (passive) {
-        return;
-      }
-
-      const { key } = event;
-      if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Home' || key === 'End') {
-        event.preventDefault();
-        setActiveIndex((current) => resolveNextMenuIndex(actions, current, key));
-      }
-
-      if (event.key === 'Enter') {
-        event.preventDefault();
-        const activeAction = actions[activeIndex];
-        if (activeAction) {
-          activateAction(activeAction);
-        }
-      }
-
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        closeMenu();
-      }
-    });
-  }, [activateAction, actions, activeIndex, bindKeydown, closeMenu, open, passive]);
-
-  return (
-    <View collapsable={false} ref={anchorRef}>
-      <ButtonBase
-        onPress={passive ? undefined : open ? closeMenu : openMenu}
-        testID={testID ? `${testID}-trigger` : undefined}
-      >
-        {trigger}
-      </ButtonBase>
-      <Portal layer="menu" visible={open && Boolean(layout)}>
-        <View
-          {...boxNonePointerEvents.props}
-          style={[
-            boxNonePointerEvents.style,
-            {
-              bottom: 0,
-              left: 0,
-              position: 'absolute',
-              right: 0,
-              top: 0,
-            },
-          ]}
-        >
-          <Pressable
-            onPress={passive ? undefined : closeMenu}
-            style={{
-              bottom: 0,
-              left: 0,
-              position: 'absolute',
-              right: 0,
-              top: 0,
-            }}
-          />
-          <FocusScope active={open} onEscape={passive ? undefined : closeMenu}>
-            <View
-              style={{
-                left: layout?.x ?? 0,
-                position: 'absolute',
-                top: (layout?.y ?? 0) + (layout?.height ?? 0) + animation.offset,
-              }}
-            >
-              <Surface
-                accessibilityRole="menu"
-                p="xs"
-                style={{
-                  minWidth: Math.max(layout?.width ?? 0, 220),
-                  shadowOpacity: 0.12,
-                  shadowRadius: 12,
-                  shadowOffset: { width: 0, height: 6 },
-                }}
-                testID={testID}
-                variant="raised"
-              >
-                {actions.map((action, index) => {
-                  const active = index === activeIndex;
-                  const selected = action.selected ?? active;
-
-                  return (
-                    <Pressable
-                      accessibilityRole="menuitem"
-                      accessibilityState={{ disabled: action.disabled, selected }}
-                      disabled={action.disabled}
-                      key={action.id}
-                      onPress={passive ? undefined : () => activateAction(action)}
-                    >
-                      <Box
-                        px="m"
-                        py="s"
-                        radius="s"
-                        style={{
-                          backgroundColor: selected
-                            ? theme.semantics.action.neutral.softBg
-                            : 'transparent',
-                          opacity: action.disabled ? 0.56 : 1,
-                        }}
-                        testID={testID ? `${testID}-item-${action.id}` : undefined}
-                      >
-                        {renderActionContent(action, active)}
-                      </Box>
-                    </Pressable>
-                  );
-                })}
-              </Surface>
-            </View>
-          </FocusScope>
-        </View>
-      </Portal>
-    </View>
-  );
-}

package/src/components/menu/index.ts

@@ -1,2 +0,0 @@
-export { Menu } from './Menu';
-export type { MenuAction, MenuActionIntent, MenuAction as MenuItem, MenuProps } from './types';

package/src/components/menu/navigation.ts

@@ -1,34 +0,0 @@
-export function resolveNextMenuIndex(
-  items: readonly { disabled?: boolean }[],
-  currentIndex: number,
-  key: 'ArrowDown' | 'ArrowUp' | 'Home' | 'End',
-): number {
-  const enabledIndexes = items.reduce<number[]>((indexes, item, index) => {
-    if (!item.disabled) {
-      indexes.push(index);
-    }
-    return indexes;
-  }, []);
-
-  if (enabledIndexes.length === 0) {
-    return -1;
-  }
-
-  if (key === 'Home') {
-    return enabledIndexes[0] ?? -1;
-  }
-
-  if (key === 'End') {
-    return enabledIndexes[enabledIndexes.length - 1] ?? -1;
-  }
-
-  const activeEnabledIndex = enabledIndexes.indexOf(currentIndex);
-  const nextEnabledIndex =
-    activeEnabledIndex === -1
-      ? 0
-      : key === 'ArrowUp'
-        ? (activeEnabledIndex - 1 + enabledIndexes.length) % enabledIndexes.length
-        : (activeEnabledIndex + 1) % enabledIndexes.length;
-
-  return enabledIndexes[nextEnabledIndex] ?? -1;
-}

package/src/components/menu/types.ts

@@ -1,26 +0,0 @@
-import type React from 'react';
-
-import type { InteractionPolicy } from '../../interactionPolicy';
-
-export type MenuActionIntent = 'default' | 'danger';
-
-export interface MenuAction {
-  id: string;
-  title: React.ReactNode;
-  description?: React.ReactNode;
-  leading?: React.ReactNode;
-  trailing?: React.ReactNode;
-  intent?: MenuActionIntent;
-  disabled?: boolean;
-  selected?: boolean;
-  activate?: () => void;
-}
-
-export interface MenuProps {
-  trigger?: React.ReactNode;
-  actions: readonly MenuAction[];
-  dismiss?: () => void;
-  closeOnSelect?: boolean;
-  interactionPolicy?: InteractionPolicy;
-  testID?: string;
-}

package/src/components/tooltip/Tooltip.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import { type LayoutRectangle, Platform, Pressable, View } from 'react-native';
-
-import { Surface } from '../../features/surface/public';
-import { Text } from '../../features/typography/public';
-import { Portal } from '../../internal/overlay/Portal';
-import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
-import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { useTheme } from '../../theme/ThemeContext';
-import type { TooltipProps } from './types';
-
-const noPointerEvents = resolvePointerEvents('none');
-
-interface MeasurableNode {
-  measureInWindow?: (
-    callback: (x: number, y: number, width: number, height: number) => void,
-  ) => void;
-}
-
-function measureNode(node: unknown, callback: (layout: LayoutRectangle) => void) {
-  const measurableNode = node as MeasurableNode | null;
-  measurableNode?.measureInWindow?.((x, y, width, height) => {
-    callback({ height, width, x, y });
-  });
-}
-
-export function Tooltip({
-  children,
-  content,
-  delay = 150,
-  interactionPolicy = 'enabled',
-  placement = 'top',
-  testID,
-}: TooltipProps) {
-  const { theme } = useTheme();
-  const animation = resolveOverlayAnimation('tooltip');
-  const anchorRef = React.useRef<View | null>(null);
-  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [visible, setVisible] = React.useState(false);
-  const [layout, setLayout] = React.useState<LayoutRectangle | null>(null);
-  const passive = interactionPolicy === 'passive';
-
-  const show = React.useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-
-    timeoutRef.current = setTimeout(() => {
-      measureNode(anchorRef.current, setLayout);
-      setVisible(true);
-    }, delay);
-  }, [delay]);
-
-  const hide = React.useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-    setVisible(false);
-  }, []);
-
-  React.useEffect(
-    () => () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    },
-    [],
-  );
-
-  const tooltipLeft = layout ? layout.x : 0;
-  const tooltipTop =
-    layout && placement === 'top'
-      ? layout.y - animation.offset
-      : layout
-        ? layout.y + layout.height + animation.offset
-        : 0;
-
-  return (
-    <View collapsable={false} ref={anchorRef} testID={testID ? `${testID}-anchor` : undefined}>
-      <Pressable
-        onBlur={passive ? undefined : hide}
-        onFocus={passive ? undefined : show}
-        onHoverIn={Platform.OS === 'web' && !passive ? show : undefined}
-        onHoverOut={Platform.OS === 'web' && !passive ? hide : undefined}
-      >
-        {children}
-      </Pressable>
-      <Portal layer="tooltip" visible={visible && Boolean(layout)}>
-        <View
-          {...noPointerEvents.props}
-          style={[
-            noPointerEvents.style,
-            {
-              left: tooltipLeft,
-              position: 'absolute',
-              top: tooltipTop,
-            },
-          ]}
-        >
-          <Surface
-            p="s"
-            style={{
-              backgroundColor: theme.semantics.surface.inverse,
-            }}
-            testID={testID}
-            variant="raised"
-          >
-            <Text emphasis="inverse" variant="caption">
-              {content}
-            </Text>
-          </Surface>
-        </View>
-      </Portal>
-    </View>
-  );
-}

package/src/components/tooltip/index.ts

@@ -1,2 +0,0 @@
-export { Tooltip } from './Tooltip';
-export type { TooltipProps } from './types';