@ankhorage/surface 0.1.4 → 0.1.6

package/src/components/drawer/Drawer.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { FocusScope } from '../../internal/focus/FocusScope';
+import { Portal } from '../../internal/overlay/Portal';
+import { resolveOverlayAnimation } from '../../internal/resolvers';
+import { Box, Surface } from '../../layout';
+import { useTheme } from '../../theme/ThemeContext';
+import type { DrawerProps } from './types';
+
+export function Drawer({
+  visible,
+  onDismiss,
+  position = 'right',
+  children,
+  closeOnBackdrop = true,
+  testID,
+}: DrawerProps) {
+  const { theme } = useTheme();
+  const animation = resolveOverlayAnimation('drawer');
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Portal layer="drawer" visible={visible}>
+      <View
+        pointerEvents="box-none"
+        style={{
+          bottom: 0,
+          left: 0,
+          position: 'absolute',
+          right: 0,
+          top: 0,
+        }}
+      >
+        <Pressable
+          onPress={closeOnBackdrop ? onDismiss : undefined}
+          style={{
+            backgroundColor: theme.semantics.neutral.text,
+            bottom: 0,
+            left: 0,
+            opacity: animation.backdropOpacity,
+            position: 'absolute',
+            right: 0,
+            top: 0,
+          }}
+          testID={testID ? `${testID}-backdrop` : undefined}
+        />
+        <FocusScope
+          active={visible}
+          onEscape={onDismiss}
+          testID={testID ? `${testID}-focus` : undefined}
+        >
+          <Box
+            pointerEvents="box-none"
+            style={{
+              flex: 1,
+              justifyContent: 'flex-start',
+            }}
+          >
+            <View
+              accessible
+              accessibilityViewIsModal
+              style={{
+                alignSelf: position === 'left' ? 'flex-start' : 'flex-end',
+                height: '100%',
+                maxWidth: 420,
+                width: '88%',
+              }}
+            >
+              <Surface
+                p="l"
+                style={{
+                  height: '100%',
+                  shadowOpacity: 0.14,
+                  shadowRadius: 14,
+                  shadowOffset: { width: position === 'left' ? 4 : -4, height: 0 },
+                }}
+                testID={testID}
+                variant="raised"
+              >
+                {children}
+              </Surface>
+            </View>
+          </Box>
+        </FocusScope>
+      </View>
+    </Portal>
+  );
+}

package/src/components/drawer/index.ts

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

package/src/components/drawer/types.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+
+export interface DrawerProps {
+  visible: boolean;
+  onDismiss?: (() => void) | undefined;
+  position?: 'left' | 'right';
+  children?: React.ReactNode;
+  closeOnBackdrop?: boolean;
+  testID?: string;
+}

package/src/components/field/Field.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { resolveFieldPresentation, resolveFieldState } from '../../internal/resolvers';
+import { Box, Stack } from '../../layout';
+import { HelperText } from '../helper-text';
+import { Label } from '../label';
+import type { FieldProps } from './types';
+
+export function Field({
+  children,
+  label,
+  helperText,
+  errorText,
+  required = false,
+  disabled = false,
+  invalid = false,
+  readOnly = false,
+  testID,
+}: FieldProps) {
+  const hasErrorText = Boolean(errorText);
+  const fieldState = resolveFieldState({
+    disabled,
+    invalid: invalid || hasErrorText,
+    readOnly,
+  });
+  const presentation = resolveFieldPresentation(fieldState);
+
+  return (
+    <Stack gap="xs" testID={testID}>
+      {label ? (
+        <Label required={required} tone={presentation.labelTone}>
+          {label}
+        </Label>
+      ) : null}
+      <Box>{children}</Box>
+      {hasErrorText ? (
+        <HelperText tone={presentation.helperTone}>{errorText}</HelperText>
+      ) : helperText ? (
+        <HelperText tone={presentation.helperTone}>{helperText}</HelperText>
+      ) : null}
+    </Stack>
+  );
+}

package/src/components/field/index.ts

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

package/src/components/field/types.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+
+export interface FieldProps {
+  children?: React.ReactNode;
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  errorText?: React.ReactNode;
+  required?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  readOnly?: boolean;
+  testID?: string;
+}

package/src/components/helper-text/HelperText.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Text } from '../../primitives/text';
+import type { HelperTextProps } from './types';
+
+export function HelperText({ children, tone = 'muted', testID }: HelperTextProps) {
+  return (
+    <Text testID={testID} tone={tone} variant="caption">
+      {children}
+    </Text>
+  );
+}

package/src/components/helper-text/index.ts

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

package/src/components/helper-text/types.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+
+import type { TextTone } from '../../internal/resolvers/resolveTextColor';
+
+export interface HelperTextProps {
+  children?: React.ReactNode;
+  tone?: Extract<TextTone, 'default' | 'muted' | 'danger'>;
+  testID?: string;
+}

package/src/components/icon-button/IconButton.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { resolveButtonColors, resolveControlSize, resolveIconSize } from '../../internal/resolvers';
+import { Box } from '../../layout';
+import { ButtonBase } from '../../primitives/button-base';
+import { Icon } from '../../primitives/icon';
+import { useTheme } from '../../theme/ThemeContext';
+import type { IconButtonProps } from './types';
+
+export function IconButton({
+  icon,
+  accessibilityLabel,
+  variant = 'ghost',
+  tone = 'primary',
+  size = 'm',
+  disabled = false,
+  onPress,
+  testID,
+  ...props
+}: IconButtonProps) {
+  const { theme } = useTheme();
+  const controlSize = resolveControlSize(theme, size);
+
+  return (
+    <ButtonBase
+      {...props}
+      accessibilityLabel={accessibilityLabel}
+      disabled={disabled}
+      onPress={onPress}
+      testID={testID}
+    >
+      {(state) => {
+        const colors = resolveButtonColors(theme, { state, tone, variant });
+
+        return (
+          <Box
+            radius={controlSize.borderRadius}
+            style={{
+              minHeight: controlSize.minHeight,
+              minWidth: controlSize.minHeight,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: colors.backgroundColor,
+              borderColor: colors.borderColor,
+              borderWidth: variant === 'solid' ? 0 : 1,
+              opacity: colors.opacity,
+            }}
+          >
+            <Icon
+              color={colors.contentColor}
+              name={icon.name}
+              provider={icon.provider}
+              size={resolveIconSize(theme, size)}
+            />
+          </Box>
+        );
+      }}
+    </ButtonBase>
+  );
+}

package/src/components/icon-button/index.ts

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

package/src/components/icon-button/types.ts

@@ -0,0 +1,19 @@
+import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
+import type { ButtonVariant } from '../../internal/resolvers/resolveInteractiveColors';
+import type { ComponentTone } from '../../internal/resolvers/resolveTone';
+import type { ButtonBaseProps } from '../../primitives/button-base';
+import type { IconProps } from '../../primitives/icon';
+
+export interface IconButtonProps extends Omit<
+  ButtonBaseProps,
+  'children' | 'style' | 'accessibilityLabel'
+> {
+  icon: {
+    name: IconProps['name'];
+    provider?: IconProps['provider'];
+  };
+  accessibilityLabel: string;
+  variant?: ButtonVariant;
+  tone?: ComponentTone;
+  size?: ControlSize;
+}

package/src/components/label/Label.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Text } from '../../primitives/text';
+import type { LabelProps } from './types';
+
+export function Label({ children, required = false, tone = 'default', testID }: LabelProps) {
+  return (
+    <Text testID={testID} tone={tone} variant="label" weight="medium">
+      {children}
+      {required ? (
+        <Text tone="danger" variant="label" weight="medium">
+          {' *'}
+        </Text>
+      ) : null}
+    </Text>
+  );
+}

package/src/components/label/index.ts

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

package/src/components/label/types.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+
+import type { TextTone } from '../../internal/resolvers/resolveTextColor';
+
+export interface LabelProps {
+  children?: React.ReactNode;
+  required?: boolean;
+  tone?: Extract<TextTone, 'default' | 'muted' | 'danger'>;
+  testID?: string;
+}

package/src/components/list-item/ListItem.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Box } from '../../layout';
+import { ButtonBase } from '../../primitives/button-base';
+import { Text } from '../../primitives/text';
+import { useTheme } from '../../theme/ThemeContext';
+import type { ListItemProps } from './types';
+
+function ListItemContent({
+  title,
+  description,
+  leading,
+  trailing,
+  testID,
+}: Omit<ListItemProps, 'disabled' | 'onPress'>) {
+  const { theme } = useTheme();
+
+  return (
+    <Box
+      px="m"
+      py="m"
+      testID={testID}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}
+    >
+      {leading ? <View style={{ marginRight: theme.spacing.m }}>{leading}</View> : null}
+      <Box flex={1}>
+        {title ? (
+          <Text numberOfLines={1} variant="body" weight="medium">
+            {title}
+          </Text>
+        ) : null}
+        {description ? (
+          <Text numberOfLines={2} tone="muted" variant="bodySmall">
+            {description}
+          </Text>
+        ) : null}
+      </Box>
+      {trailing ? <View style={{ marginLeft: theme.spacing.m }}>{trailing}</View> : null}
+    </Box>
+  );
+}
+
+export function ListItem({ onPress, disabled = false, testID, ...content }: ListItemProps) {
+  const { theme } = useTheme();
+
+  if (!onPress) {
+    return <ListItemContent {...content} testID={testID} />;
+  }
+
+  return (
+    <ButtonBase accessibilityRole="button" disabled={disabled} onPress={onPress} testID={testID}>
+      {(state) => (
+        <Box
+          style={{
+            backgroundColor: state.pressed
+              ? theme.semantics.neutral.surfaceActive
+              : state.hovered
+                ? theme.semantics.neutral.surfaceHover
+                : 'transparent',
+            opacity: state.disabled ? 0.72 : 1,
+          }}
+        >
+          <ListItemContent {...content} />
+        </Box>
+      )}
+    </ButtonBase>
+  );
+}

package/src/components/list-item/index.ts

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

package/src/components/list-item/types.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+
+export interface ListItemProps {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  onPress?: (() => void) | undefined;
+  disabled?: boolean;
+  testID?: string;
+}

package/src/components/menu/Menu.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { type LayoutRectangle, Pressable, View } from 'react-native';
+
+import { FocusScope } from '../../internal/focus/FocusScope';
+import { useFocusManager } from '../../internal/focus/useFocusManager';
+import { Portal } from '../../internal/overlay/Portal';
+import { resolveOverlayAnimation } from '../../internal/resolvers';
+import { Box, Surface } from '../../layout';
+import { ButtonBase } from '../../primitives/button-base';
+import { Text } from '../../primitives/text';
+import { useTheme } from '../../theme/ThemeContext';
+import { resolveNextMenuIndex } from './navigation';
+import type { MenuProps } from './types';
+
+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 Menu({ trigger, items, onDismiss, closeOnSelect = true, 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 closeMenu = React.useCallback(() => {
+    setOpen(false);
+    onDismiss?.();
+  }, [onDismiss]);
+
+  const openMenu = React.useCallback(() => {
+    measureNode(anchorRef.current, setLayout);
+    const firstEnabledIndex = items.findIndex((item) => !item.disabled);
+    setActiveIndex(firstEnabledIndex === -1 ? 0 : firstEnabledIndex);
+    setOpen(true);
+  }, [items]);
+
+  React.useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+
+    return bindKeydown((event) => {
+      const { key } = event;
+      if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Home' || key === 'End') {
+        event.preventDefault();
+        setActiveIndex((current) => resolveNextMenuIndex(items, current, key));
+      }
+
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        const activeItem = items[activeIndex];
+        if (activeItem && !activeItem.disabled) {
+          activeItem.onPress?.();
+          if (closeOnSelect) {
+            closeMenu();
+          }
+        }
+      }
+
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        closeMenu();
+      }
+    });
+  }, [activeIndex, bindKeydown, closeMenu, closeOnSelect, items, open]);
+
+  return (
+    <View collapsable={false} ref={anchorRef}>
+      <ButtonBase
+        onPress={open ? closeMenu : openMenu}
+        testID={testID ? `${testID}-trigger` : undefined}
+      >
+        {trigger}
+      </ButtonBase>
+      <Portal layer="menu" visible={open && Boolean(layout)}>
+        <View
+          pointerEvents="box-none"
+          style={{
+            bottom: 0,
+            left: 0,
+            position: 'absolute',
+            right: 0,
+            top: 0,
+          }}
+        >
+          <Pressable
+            onPress={closeMenu}
+            style={{
+              bottom: 0,
+              left: 0,
+              position: 'absolute',
+              right: 0,
+              top: 0,
+            }}
+          />
+          <FocusScope active={open} onEscape={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, 180),
+                  shadowOpacity: 0.12,
+                  shadowRadius: 12,
+                  shadowOffset: { width: 0, height: 6 },
+                }}
+                testID={testID}
+                variant="raised"
+              >
+                {items.map((item, index) => {
+                  const selected = index === activeIndex;
+
+                  return (
+                    <Pressable
+                      accessibilityRole="menuitem"
+                      accessibilityState={{ disabled: item.disabled, selected }}
+                      disabled={item.disabled}
+                      key={item.id}
+                      onPress={() => {
+                        if (item.disabled) {
+                          return;
+                        }
+
+                        item.onPress?.();
+                        if (closeOnSelect) {
+                          closeMenu();
+                        }
+                      }}
+                    >
+                      <Box
+                        px="m"
+                        py="s"
+                        style={{
+                          backgroundColor: selected
+                            ? theme.semantics.action.neutral.softBg
+                            : 'transparent',
+                          opacity: item.disabled ? 0.56 : 1,
+                        }}
+                        testID={testID ? `${testID}-item-${item.id}` : undefined}
+                      >
+                        <Text
+                          color={
+                            selected
+                              ? theme.semantics.action.neutral.base
+                              : theme.semantics.content.default
+                          }
+                          variant="bodySmall"
+                        >
+                          {item.label}
+                        </Text>
+                      </Box>
+                    </Pressable>
+                  );
+                })}
+              </Surface>
+            </View>
+          </FocusScope>
+        </View>
+      </Portal>
+    </View>
+  );
+}

package/src/components/menu/index.ts

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

package/src/components/menu/navigation.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveNextMenuIndex } from './navigation';
+
+describe('resolveNextMenuIndex', () => {
+  const items = [{}, { disabled: true }, {}, {}];
+
+  it('cycles down and up through the menu items', () => {
+    expect(resolveNextMenuIndex(items, 0, 'ArrowDown')).toBe(2);
+    expect(resolveNextMenuIndex(items, 0, 'ArrowUp')).toBe(3);
+  });
+
+  it('supports home and end navigation', () => {
+    expect(resolveNextMenuIndex(items, 2, 'Home')).toBe(0);
+    expect(resolveNextMenuIndex(items, 0, 'End')).toBe(3);
+  });
+
+  it('returns -1 when all items are disabled', () => {
+    expect(resolveNextMenuIndex([{ disabled: true }], 0, 'ArrowDown')).toBe(-1);
+  });
+});

package/src/components/menu/navigation.ts

@@ -0,0 +1,34 @@
+export function resolveNextMenuIndex(
+  items: { 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

@@ -0,0 +1,16 @@
+import type React from 'react';
+
+export interface MenuItem {
+  id: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+  onPress?: (() => void) | undefined;
+}
+
+export interface MenuProps {
+  trigger?: React.ReactNode;
+  items: MenuItem[];
+  onDismiss?: (() => void) | undefined;
+  closeOnSelect?: boolean;
+  testID?: string;
+}