@ankhorage/surface 3.4.6 → 4.0.0

package/src/components/action-sheet/ActionSheet.tsx

@@ -1,130 +0,0 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-
-import { FocusScope } from '../../internal/focus/FocusScope';
-import { Portal } from '../../internal/overlay/Portal';
-import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
-import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { Box, Stack, Surface } from '../../layout';
-import { Text } from '../../primitives/text';
-import { useTheme } from '../../theme/ThemeContext';
-import { ActionSheetItem } from './ActionSheetItem';
-import type { ActionSheetProps } from './types';
-
-const boxNonePointerEvents = resolvePointerEvents('box-none');
-
-export function ActionSheet({
-  visible,
-  onDismiss,
-  title,
-  description,
-  children,
-  cancelLabel = 'Cancel',
-  closeOnBackdrop = true,
-  interactionPolicy = 'enabled',
-  testID,
-}: ActionSheetProps) {
-  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}
-        >
-          <Box
-            pointerEvents="box-none"
-            style={{
-              flex: 1,
-              justifyContent: 'flex-end',
-            }}
-          >
-            <View
-              accessible
-              accessibilityViewIsModal
-              style={{
-                alignSelf: 'center',
-                maxWidth: 560,
-                padding: 16,
-                width: '100%',
-              }}
-            >
-              <Surface
-                p="m"
-                style={{
-                  borderRadius: 24,
-                  shadowOpacity: 0.16,
-                  shadowRadius: 18,
-                  shadowOffset: { width: 0, height: -8 },
-                }}
-                testID={testID}
-                variant="raised"
-              >
-                <Stack gap="s">
-                  {title || description ? (
-                    <Box px="m" py="s">
-                      <Stack gap="xxs">
-                        {title ? (
-                          <Text align="center" variant="label" weight="semiBold">
-                            {title}
-                          </Text>
-                        ) : null}
-                        {description ? (
-                          <Text align="center" emphasis="muted" variant="bodySmall">
-                            {description}
-                          </Text>
-                        ) : null}
-                      </Stack>
-                    </Box>
-                  ) : null}
-                  <Stack gap="xxs">{children}</Stack>
-                  {onDismiss ? (
-                    <ActionSheetItem
-                      label={cancelLabel}
-                      interactionPolicy={interactionPolicy}
-                      onPress={onDismiss}
-                      testID={testID ? `${testID}-cancel` : undefined}
-                    />
-                  ) : null}
-                </Stack>
-              </Surface>
-            </View>
-          </Box>
-        </FocusScope>
-      </View>
-    </Portal>
-  );
-}

package/src/components/action-sheet/ActionSheetItem.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-
-import { Box, Inline, Stack } from '../../layout';
-import { ButtonBase } from '../../primitives/button-base';
-import { Text } from '../../primitives/text';
-import type { ActionSheetItemProps } from './types';
-
-export function ActionSheetItem({
-  label,
-  description,
-  leading,
-  trailing,
-  color,
-  disabled = false,
-  selected = false,
-  interactionPolicy = 'enabled',
-  onPress,
-  testID,
-}: ActionSheetItemProps) {
-  return (
-    <ButtonBase
-      accessibilityRole="button"
-      accessibilityState={{ disabled, selected }}
-      disabled={disabled}
-      interactionPolicy={interactionPolicy}
-      onPress={onPress}
-      radius="m"
-      testID={testID}
-    >
-      {(state) => (
-        <Box
-          px="m"
-          py="m"
-          radius="m"
-          style={{
-            opacity: state.disabled ? 0.56 : 1,
-          }}
-        >
-          <Inline align="center" gap="m" justify="space-between" wrap="nowrap">
-            {leading ? <Box>{leading}</Box> : null}
-            <Box flex={1}>
-              <Stack gap="xxs">
-                <Text color={color} variant="body" weight={selected ? 'semiBold' : 'medium'}>
-                  {label}
-                </Text>
-                {description ? (
-                  <Text emphasis="muted" variant="bodySmall">
-                    {description}
-                  </Text>
-                ) : null}
-              </Stack>
-            </Box>
-            {trailing ? <Box>{trailing}</Box> : null}
-          </Inline>
-        </Box>
-      )}
-    </ButtonBase>
-  );
-}

package/src/components/action-sheet/index.ts

@@ -1,3 +0,0 @@
-export { ActionSheet } from './ActionSheet';
-export { ActionSheetItem } from './ActionSheetItem';
-export type { ActionSheetItemProps, ActionSheetProps } from './types';

package/src/components/action-sheet/types.ts

@@ -1,29 +0,0 @@
-import type React from 'react';
-
-import type { InteractionPolicy } from '../../interactionPolicy';
-import type { SurfaceColor } from '../../surfaceColor';
-
-export interface ActionSheetProps {
-  visible: boolean;
-  onDismiss?: (() => void) | undefined;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  children?: React.ReactNode;
-  cancelLabel?: React.ReactNode;
-  closeOnBackdrop?: boolean;
-  interactionPolicy?: InteractionPolicy;
-  testID?: string;
-}
-
-export interface ActionSheetItemProps {
-  label: React.ReactNode;
-  description?: React.ReactNode;
-  leading?: React.ReactNode;
-  trailing?: React.ReactNode;
-  color?: SurfaceColor;
-  disabled?: boolean;
-  selected?: boolean;
-  interactionPolicy?: InteractionPolicy;
-  onPress?: (() => void) | undefined;
-  testID?: string;
-}

package/src/components/drawer/Drawer.tsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-
-import { FocusScope } from '../../internal/focus/FocusScope';
-import { Portal } from '../../internal/overlay/Portal';
-import { resolvePointerEvents } from '../../internal/resolvePointerEvents';
-import { resolveOverlayAnimation } from '../../internal/resolvers';
-import { Box, Surface } from '../../layout';
-import { useTheme } from '../../theme/ThemeContext';
-import type { DrawerProps } from './types';
-
-const boxNonePointerEvents = resolvePointerEvents('box-none');
-
-export function Drawer({
-  visible,
-  onDismiss,
-  position = 'right',
-  children,
-  closeOnBackdrop = true,
-  interactionPolicy = 'enabled',
-  testID,
-}: DrawerProps) {
-  const { theme } = useTheme();
-  const animation = resolveOverlayAnimation('drawer');
-  const passive = interactionPolicy === 'passive';
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <Portal layer="drawer" 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}
-        >
-          <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

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

package/src/components/drawer/types.ts

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

package/src/components/navigation/DrawerNavigation.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-
-import { Stack } from '../../layout';
-import { DrawerNavigationItem } from './DrawerNavigationItem';
-import type { DrawerNavigationProps } from './types';
-
-export function DrawerNavigation({
-  items,
-  header,
-  footer,
-  compact = false,
-  testID,
-  interactionPolicy,
-}: DrawerNavigationProps) {
-  return (
-    <Stack gap={compact ? 's' : 'm'} testID={testID}>
-      {header}
-      <Stack gap={compact ? 'xs' : 's'}>
-        {items.map((item) => (
-          <DrawerNavigationItem
-            compact={compact}
-            interactionPolicy={interactionPolicy}
-            item={item}
-            key={item.id}
-            testID={testID}
-          />
-        ))}
-      </Stack>
-      {footer}
-    </Stack>
-  );
-}

package/src/components/navigation/DrawerNavigationItem.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import { NavigationItem } from './NavigationItem';
-import type { DrawerNavigationItemProps } from './types';
-
-export function DrawerNavigationItem({
-  item,
-  compact = false,
-  testID,
-  interactionPolicy,
-}: DrawerNavigationItemProps) {
-  return (
-    <NavigationItem
-      compact={compact}
-      interactionPolicy={interactionPolicy}
-      item={{
-        ...item,
-        accessibilityRole: item.accessibilityRole ?? 'button',
-      }}
-      testID={testID}
-    />
-  );
-}

package/src/components/navigation/NavigationItem.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import { Box } from '../../layout';
-import { ButtonBase } from '../../primitives/button-base';
-import { Icon } from '../../primitives/icon';
-import { Text } from '../../primitives/text';
-import { useTheme } from '../../theme/ThemeContext';
-import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
-import type { NavigationItemProps } from './types';
-
-export function NavigationItem({
-  item,
-  compact = false,
-  testID,
-  interactionPolicy,
-}: NavigationItemProps) {
-  const { theme } = useTheme();
-  const active = Boolean(item.active);
-  const disabled = Boolean(item.disabled);
-  const resolvedTestID = item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined);
-  const resolvedAccessibilityState = resolveNavigationAccessibilityState(
-    active,
-    disabled,
-    item.accessibilityState,
-  );
-
-  return (
-    <ButtonBase
-      accessibilityLabel={item.accessibilityLabel}
-      accessibilityRole={item.accessibilityRole ?? 'button'}
-      accessibilityState={resolvedAccessibilityState}
-      disabled={disabled}
-      interactionPolicy={interactionPolicy}
-      onPress={item.onPress}
-      testID={resolvedTestID}
-    >
-      {(state) => {
-        const presentation = resolveNavigationItemPresentation(theme, {
-          active,
-          disabled,
-          state,
-        });
-
-        return (
-          <Box
-            px="m"
-            py={compact ? 's' : 'm'}
-            radius="m"
-            style={{
-              backgroundColor: presentation.backgroundColor,
-              flexDirection: 'row',
-              alignItems: 'center',
-              opacity: presentation.opacity,
-            }}
-          >
-            {item.icon ? (
-              <View style={{ marginRight: theme.spacing.s }}>
-                <Icon {...item.icon} color={presentation.contentColor} size={compact ? 's' : 'm'} />
-              </View>
-            ) : null}
-            <Box flex={1}>
-              <Text
-                color={active && !disabled ? 'primary' : undefined}
-                emphasis={disabled ? 'muted' : 'default'}
-                numberOfLines={1}
-                variant={compact ? 'bodySmall' : 'body'}
-                weight="medium"
-              >
-                {item.label}
-              </Text>
-            </Box>
-            {item.badge ? <View style={{ marginLeft: theme.spacing.s }}>{item.badge}</View> : null}
-          </Box>
-        );
-      }}
-    </ButtonBase>
-  );
-}

package/src/components/navigation/NavigationList.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { Stack } from '../../layout';
-import { NavigationItem } from './NavigationItem';
-import type { NavigationListProps } from './types';
-
-export function NavigationList({
-  items,
-  orientation = 'vertical',
-  compact = false,
-  testID,
-  interactionPolicy,
-}: NavigationListProps) {
-  return (
-    <Stack
-      direction={orientation === 'horizontal' ? 'row' : 'column'}
-      gap={compact ? 'xs' : 's'}
-      testID={testID}
-    >
-      {items.map((item) => (
-        <NavigationItem
-          compact={compact}
-          interactionPolicy={interactionPolicy}
-          item={item}
-          key={item.id}
-          testID={testID}
-        />
-      ))}
-    </Stack>
-  );
-}

package/src/components/navigation/TabBar.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { Box } from '../../layout';
-import { useTheme } from '../../theme/ThemeContext';
-import { TabBarItem } from './TabBarItem';
-import type { TabBarProps } from './types';
-
-export function TabBar({ items, compact = false, testID, interactionPolicy }: TabBarProps) {
-  const { theme } = useTheme();
-
-  return (
-    <Box
-      style={{
-        flexDirection: 'row',
-        borderTopColor: theme.semantics.border.default,
-        borderTopWidth: 1,
-      }}
-      testID={testID}
-    >
-      {items.map((item) => (
-        <TabBarItem
-          compact={compact}
-          interactionPolicy={interactionPolicy}
-          item={item}
-          key={item.id}
-          testID={testID}
-        />
-      ))}
-    </Box>
-  );
-}

package/src/components/navigation/TabBarItem.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import { Box } from '../../layout';
-import { ButtonBase } from '../../primitives/button-base';
-import { Icon } from '../../primitives/icon';
-import { Text } from '../../primitives/text';
-import { useTheme } from '../../theme/ThemeContext';
-import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
-import type { TabBarItemProps } from './types';
-
-export function TabBarItem({ item, compact = false, testID, interactionPolicy }: TabBarItemProps) {
-  const { theme } = useTheme();
-  const active = Boolean(item.active);
-  const disabled = Boolean(item.disabled);
-  const resolvedTestID = item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined);
-  const resolvedAccessibilityState = resolveNavigationAccessibilityState(
-    active,
-    disabled,
-    item.accessibilityState,
-  );
-
-  return (
-    <ButtonBase
-      accessibilityLabel={item.accessibilityLabel}
-      accessibilityRole={item.accessibilityRole ?? 'tab'}
-      accessibilityState={resolvedAccessibilityState}
-      disabled={disabled}
-      interactionPolicy={interactionPolicy}
-      onPress={item.onPress}
-      style={{ flex: 1 }}
-      testID={resolvedTestID}
-    >
-      {(state) => {
-        const presentation = resolveNavigationItemPresentation(theme, {
-          active,
-          disabled,
-          state,
-        });
-        const contentColor = disabled
-          ? theme.semantics.content.muted
-          : active
-            ? theme.semantics.action.primary.base
-            : theme.semantics.content.muted;
-
-        return (
-          <Box
-            px="m"
-            py={compact ? 's' : 'm'}
-            style={{
-              flex: 1,
-              alignItems: 'center',
-              justifyContent: 'center',
-              backgroundColor: presentation.backgroundColor,
-              opacity: presentation.opacity,
-            }}
-          >
-            {item.icon ? (
-              <View style={{ marginBottom: item.label ? theme.spacing.xs : 0 }}>
-                <Icon {...item.icon} color={contentColor} size={compact ? 's' : 'm'} />
-              </View>
-            ) : null}
-            {item.label ? (
-              <Text
-                color={active && !disabled ? 'primary' : undefined}
-                emphasis={active && !disabled ? 'default' : 'muted'}
-                numberOfLines={1}
-                variant={compact ? 'bodySmall' : 'label'}
-                weight="medium"
-              >
-                {item.label}
-              </Text>
-            ) : null}
-          </Box>
-        );
-      }}
-    </ButtonBase>
-  );
-}