@ankhorage/surface 5.0.0 → 5.0.1

package/dist/components/tabs/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/tabs/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/components/tabs/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/tabs/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { InteractionPolicy } from '../../interactionPolicy';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: ((value: string) => void) | undefined;\n  testID?: string;\n}\n\nexport interface TabListProps {\n  children?: React.ReactNode;\n  testID?: string;\n}\n\nexport interface TabProps {\n  value: string;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  interactionPolicy?: InteractionPolicy;\n  testID?: string;\n}\n\nexport interface TabPanelProps {\n  value: string;\n  children?: React.ReactNode;\n  testID?: string;\n}\n"]}

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;
-}