@ankhorage/surface 4.4.1 → 5.0.1

package/src/components/modal/Modal.tsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-
-import { Surface } from '../../features/surface/public';
-import { FocusScope } from '../../internal/focus/FocusScope';
-import { Portal } from '../../internal/overlay/Portal';
-import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
-import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { Center } from '../../layout';
-import { useTheme } from '../../theme/ThemeContext';
-import type { ModalProps } from './types';
-
-const boxNonePointerEvents = resolvePointerEvents('box-none');
-
-export function Modal({
-  visible,
-  onDismiss,
-  children,
-  closeOnBackdrop = true,
-  interactionPolicy = 'enabled',
-  testID,
-}: ModalProps) {
-  const { theme } = useTheme();
-  const animation = resolveOverlayAnimation('modal');
-  const passive = interactionPolicy === 'passive';
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <Portal layer="modal" visible={visible}>
-      <View
-        {...boxNonePointerEvents.props}
-        style={[
-          boxNonePointerEvents.style,
-          {
-            bottom: 0,
-            left: 0,
-            position: 'absolute',
-            right: 0,
-            top: 0,
-          },
-        ]}
-      >
-        <Pressable
-          onPress={passive ? undefined : 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={passive ? undefined : onDismiss}
-          testID={testID ? `${testID}-focus` : undefined}
-        >
-          <Center
-            p="l"
-            style={{
-              flex: 1,
-            }}
-          >
-            <View
-              accessible
-              accessibilityViewIsModal
-              style={{
-                maxWidth: 560,
-                width: '100%',
-              }}
-            >
-              <Surface
-                p="l"
-                style={{
-                  shadowOpacity: 0.14,
-                  shadowRadius: 18,
-                  shadowOffset: { width: 0, height: 8 },
-                }}
-                testID={testID}
-                variant="raised"
-              >
-                {children}
-              </Surface>
-            </View>
-          </Center>
-        </FocusScope>
-      </View>
-    </Portal>
-  );
-}

package/src/components/modal/index.ts

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

package/src/components/tabs/Tab.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { Pressable } from 'react-native';
-
-import { Box } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { useTheme } from '../../theme/ThemeContext';
-import { useTabsContext } from './context';
-import type { TabProps } from './types';
-
-export function Tab({
-  value,
-  children,
-  disabled = false,
-  interactionPolicy = 'enabled',
-  testID,
-}: TabProps) {
-  const { theme } = useTheme();
-  const {
-    activeValue,
-    getPanelId,
-    getTabId,
-    registerTab,
-    setActiveValue,
-    setFocusedValue,
-    unregisterTab,
-  } = useTabsContext();
-  const pressableRef = React.useRef<React.ElementRef<typeof Pressable> | null>(null);
-  const selected = activeValue === value;
-  const tabId = getTabId(value);
-  const panelId = getPanelId(value);
-  const passive = interactionPolicy === 'passive';
-
-  React.useEffect(() => {
-    registerTab({
-      disabled,
-      focus: () => {
-        const focusable = pressableRef.current as unknown as {
-          focus?: (() => void) | undefined;
-        } | null;
-        focusable?.focus?.();
-      },
-      value,
-    });
-
-    return () => {
-      unregisterTab(value);
-    };
-  }, [disabled, registerTab, unregisterTab, value]);
-
-  return (
-    <Pressable
-      accessibilityLabel={undefined}
-      accessibilityRole="tab"
-      accessibilityState={{ disabled, selected }}
-      nativeID={tabId}
-      aria-controls={panelId}
-      disabled={disabled}
-      onFocus={() => setFocusedValue(value)}
-      onBlur={() => setFocusedValue(undefined)}
-      onPress={
-        passive
-          ? undefined
-          : () => {
-              if (!disabled) {
-                setActiveValue(value);
-              }
-            }
-      }
-      ref={pressableRef}
-      testID={testID}
-    >
-      <Box
-        px="m"
-        py="s"
-        style={{
-          borderBottomColor: selected
-            ? theme.semantics.action.primary.base
-            : theme.semantics.border.default,
-          borderBottomWidth: 2,
-          opacity: disabled ? 0.64 : 1,
-        }}
-      >
-        <Text color={selected ? 'primary' : undefined} variant="label" weight="medium">
-          {children}
-        </Text>
-      </Box>
-    </Pressable>
-  );
-}

package/src/components/tabs/TabList.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-
-import { Box } from '../../features/layout/public';
-import { useFocusManager } from '../../internal/focus/useFocusManager';
-import { useTabsContext } from './context';
-import { resolveNextTabValue } from './navigation';
-import type { TabListProps } from './types';
-
-export function TabList({ children, testID }: TabListProps) {
-  const { bindKeydown } = useFocusManager();
-  const { focusedValue, setActiveValue, tabs } = useTabsContext();
-
-  React.useEffect(() => {
-    if (!focusedValue) {
-      return undefined;
-    }
-
-    return bindKeydown((event) => {
-      const nextValue =
-        event.key === 'ArrowLeft' ||
-        event.key === 'ArrowRight' ||
-        event.key === 'ArrowUp' ||
-        event.key === 'ArrowDown' ||
-        event.key === 'Home' ||
-        event.key === 'End'
-          ? resolveNextTabValue(tabs, focusedValue, event.key)
-          : undefined;
-
-      if (!nextValue) {
-        return;
-      }
-
-      event.preventDefault();
-      const nextTab = tabs.find((tab) => tab.value === nextValue);
-      nextTab?.focus();
-      setActiveValue(nextValue);
-    });
-  }, [bindKeydown, focusedValue, setActiveValue, tabs]);
-
-  return (
-    <Box
-      accessibilityRole="tablist"
-      style={{
-        flexDirection: 'row',
-      }}
-      testID={testID}
-    >
-      {children}
-    </Box>
-  );
-}

package/src/components/tabs/Tabs.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-
-import { Box } from '../../features/layout/public';
-import { useControllableState } from '../../internal/useControllableState';
-import { getTabId as resolveTabId, getTabPanelId as resolveTabPanelId } from './a11y';
-import { type TabRegistration, TabsContext } from './context';
-import type { TabsProps } from './types';
-
-export function Tabs({ children, value, defaultValue, onValueChange, testID }: TabsProps) {
-  const [activeValue, setActiveValue] = useControllableState<string | undefined>({
-    value,
-    defaultValue,
-    onChange: (nextValue) => {
-      if (nextValue !== undefined) {
-        onValueChange?.(nextValue);
-      }
-    },
-  });
-  const [focusedValue, setFocusedValue] = React.useState<string | undefined>(undefined);
-  const [tabs, setTabs] = React.useState<TabRegistration[]>([]);
-
-  const registerTab = React.useCallback((tab: TabRegistration) => {
-    setTabs((current) => {
-      return current.some((entry) => entry.value === tab.value)
-        ? current.map((entry) => (entry.value === tab.value ? tab : entry))
-        : [...current, tab];
-    });
-  }, []);
-
-  const unregisterTab = React.useCallback((valueToRemove: string) => {
-    setTabs((current) => current.filter((entry) => entry.value !== valueToRemove));
-  }, []);
-
-  React.useEffect(() => {
-    if (activeValue !== undefined) {
-      return;
-    }
-
-    const firstEnabledTab = tabs.find((entry) => !entry.disabled);
-    if (firstEnabledTab) {
-      setActiveValue(firstEnabledTab.value);
-    }
-  }, [activeValue, setActiveValue, tabs]);
-
-  const contextValue = React.useMemo(
-    () => ({
-      activeValue,
-      focusedValue,
-      getPanelId: (tabValue: string) => resolveTabPanelId(testID, tabValue),
-      getTabId: (tabValue: string) => resolveTabId(testID, tabValue),
-      registerTab,
-      setActiveValue: (nextValue: string) => {
-        setActiveValue(nextValue);
-      },
-      setFocusedValue,
-      tabs,
-      unregisterTab,
-    }),
-    [activeValue, focusedValue, registerTab, setActiveValue, tabs, testID, unregisterTab],
-  );
-
-  return (
-    <TabsContext value={contextValue}>
-      <Box testID={testID}>{children}</Box>
-    </TabsContext>
-  );
-}

package/src/components/tabs/a11y.test.ts

@@ -1,15 +0,0 @@
-import { describe, expect, it } from 'bun:test';
-
-import { getTabId, getTabPanelId } from './a11y';
-
-describe('tabs accessibility ids', () => {
-  it('creates stable ids from tab values', () => {
-    expect(getTabId(undefined, 'Account Settings')).toBe('tabs-tab-Account-Settings');
-    expect(getTabPanelId(undefined, 'Account Settings')).toBe('tabs-panel-Account-Settings');
-  });
-
-  it('namespaces ids by tabs testID when provided', () => {
-    expect(getTabId('settings', 'billing')).toBe('settings-tabs-tab-billing');
-    expect(getTabPanelId('settings', 'billing')).toBe('settings-tabs-panel-billing');
-  });
-});

package/src/components/tabs/a11y.ts

@@ -1,15 +0,0 @@
-function sanitizeTabValue(value: string): string {
-  return value.trim().replace(/[^a-zA-Z0-9_-]+/g, '-');
-}
-
-function createTabsIdBase(testID: string | undefined): string {
-  return testID ? `${testID}-tabs` : 'tabs';
-}
-
-export function getTabId(testID: string | undefined, value: string): string {
-  return `${createTabsIdBase(testID)}-tab-${sanitizeTabValue(value)}`;
-}
-
-export function getTabPanelId(testID: string | undefined, value: string): string {
-  return `${createTabsIdBase(testID)}-panel-${sanitizeTabValue(value)}`;
-}

package/src/components/tabs/context.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-export interface TabRegistration {
-  disabled: boolean;
-  focus: () => void;
-  value: string;
-}
-
-export interface TabsContextValue {
-  activeValue: string | undefined;
-  focusedValue: string | undefined;
-  getPanelId: (value: string) => string;
-  getTabId: (value: string) => string;
-  registerTab: (tab: TabRegistration) => void;
-  setActiveValue: (value: string) => void;
-  setFocusedValue: (value: string | undefined) => void;
-  tabs: TabRegistration[];
-  unregisterTab: (value: string) => void;
-}
-
-export const TabsContext = React.createContext<TabsContextValue | null>(null);
-
-export function useTabsContext(): TabsContextValue {
-  const value = React.use(TabsContext);
-
-  if (!value) {
-    throw new Error('Tabs components must be used within <Tabs>.');
-  }
-
-  return value;
-}

package/src/components/tabs/index.ts

@@ -1,5 +0,0 @@
-export { Tab } from './Tab';
-export { TabList } from './TabList';
-export { TabPanel } from './TabPanel';
-export { Tabs } from './Tabs';
-export type { TabListProps, TabPanelProps, TabProps, TabsProps } from './types';

package/src/components/tabs/navigation.ts

@@ -1,32 +0,0 @@
-import type { TabRegistration } from './context';
-
-export function resolveNextTabValue(
-  tabs: TabRegistration[],
-  currentValue: string | undefined,
-  key: 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Home' | 'End',
-): string | undefined {
-  const enabledTabs = tabs.filter((tab) => !tab.disabled);
-  if (enabledTabs.length === 0) {
-    return undefined;
-  }
-
-  if (key === 'Home') {
-    return enabledTabs[0]?.value;
-  }
-
-  if (key === 'End') {
-    return enabledTabs[enabledTabs.length - 1]?.value;
-  }
-
-  const currentIndex = enabledTabs.findIndex((tab) => tab.value === currentValue);
-  if (currentIndex === -1) {
-    return enabledTabs[0]?.value;
-  }
-
-  const nextIndex =
-    key === 'ArrowLeft' || key === 'ArrowUp'
-      ? (currentIndex - 1 + enabledTabs.length) % enabledTabs.length
-      : (currentIndex + 1) % enabledTabs.length;
-
-  return enabledTabs[nextIndex]?.value;
-}

package/src/components/tabs/types.ts

@@ -1,30 +0,0 @@
-import type React from 'react';
-
-import type { InteractionPolicy } from '../../interactionPolicy';
-
-export interface TabsProps {
-  children?: React.ReactNode;
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: ((value: string) => void) | undefined;
-  testID?: string;
-}
-
-export interface TabListProps {
-  children?: React.ReactNode;
-  testID?: string;
-}
-
-export interface TabProps {
-  value: string;
-  children?: React.ReactNode;
-  disabled?: boolean;
-  interactionPolicy?: InteractionPolicy;
-  testID?: string;
-}
-
-export interface TabPanelProps {
-  value: string;
-  children?: React.ReactNode;
-  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';