@ankhorage/zora 14.0.0 → 15.0.0

package/src/features/data-table/adapters/inbound/DataTable.tsx

@@ -2,7 +2,6 @@ import type { InteractionPolicy } from '@ankhorage/surface';
 import React from 'react';
 import { ScrollView, type ViewStyle } from 'react-native';
 
-import { DropdownMenu, type MenuAction } from '../../../../components/menu';
 import { Show } from '../../../../foundation';
 import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type {
@@ -19,6 +18,7 @@ import { IconButton } from '../../../button/public';
 import { Card } from '../../../card/public';
 import { EmptyState } from '../../../empty-state/public';
 import { Box, Stack } from '../../../layout/public';
+import { PopoverMenu, type PopoverMenuAction } from '../../../popover-menu/public';
 import { SkeletonList } from '../../../skeleton/public';
 import { Text, type TextAlign } from '../../../typography/public';
 import { resolveDataTableRowKey } from '../../utils/resolveDataTableRowKey';
@@ -139,10 +139,11 @@ function resolveNextSortDirection(
   return current === 'asc' ? 'desc' : 'asc';
 }
 
+/*** Maps row-scoped DataTable actions into the shared PopoverMenu action contract. */
 function mapRowActions<TRow extends object>(
   row: TRow,
   actions: readonly DataTableRowAction<TRow>[],
-): readonly MenuAction[] {
+): readonly PopoverMenuAction[] {
   return actions.map((action) => ({
     description: action.description,
     disabled: action.disabled,
@@ -154,6 +155,7 @@ function mapRowActions<TRow extends object>(
   }));
 }
 
+/*** Renders the row action trigger and anchored PopoverMenu when actions exist. */
 function renderRowActions<TRow extends object>({
   row,
   rowIndex,
@@ -174,18 +176,20 @@ function renderRowActions<TRow extends object>({
   }
 
   return (
-    <DropdownMenu
+    <PopoverMenu
       actions={mapRowActions(row, actions)}
       interactionPolicy={interactionPolicy}
       testID={testID ? `${testID}-row-actions-${rowIndex}` : undefined}
-      trigger={
+      trigger={({ toggle }) => (
         <IconButton
           icon={{ name: 'ellipsis-horizontal' }}
+          interactionPolicy={interactionPolicy}
           label="Row actions"
+          onPress={toggle}
           size="s"
           variant="ghost"
         />
-      }
+      )}
     />
   );
 }

package/src/features/form/formFieldMeta.ts

@@ -3,7 +3,7 @@ export const formFieldMeta = {
   name: 'FormField',
   category: 'component',
   directManifestNode: true,
-  allowedChildren: ['Checkbox', 'CheckboxGroup', 'RadioGroup', 'TextInput'],
+  allowedChildren: ['Checkbox', 'CheckboxGroup', 'RadioGroup', 'Select', 'TextInput'],
   blueprint: { label: 'Form field', defaultProps: { label: 'Label' } },
   bindings: {
     props: {

package/src/features/form/select/adapters/inbound/Select.native.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { type ListRenderItemInfo, StyleSheet } from 'react-native';
+
+import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
+import type { SelectOption, SelectProps } from '../../../../../types/select';
+import { BottomSheetFlatList, useBottomSheet } from '../../../../bottom-sheet/public';
+import { SelectField } from '../../composition/SelectField';
+import { SelectOptionRow } from '../../composition/SelectOptionRow';
+import { SelectTrigger } from '../../composition/SelectTrigger';
+import { useSelectController } from '../../composition/useSelectController';
+
+const SELECT_SHEET_MAX_HEIGHT = 480;
+
+/*** Renders Select with BottomSheetFlatList presentation on native platforms. */
+export const Select = withZoraThemeScope(SelectInner);
+
+/*** Connects shared Select state and controls to the native BottomSheet host. */
+function SelectInner<TValue extends string = string>({
+  themeId: _themeId,
+  mode: _mode,
+  ...props
+}: SelectProps<TValue>) {
+  const { dismiss, present } = useBottomSheet();
+  const { select, selectedOption, value } = useSelectController(props);
+  const passive = props.interactionPolicy === 'passive';
+  const { disabled, interactionPolicy, options, readOnly, testID } = props;
+  const listData = React.useMemo(() => [...options], [options]);
+
+  const handleSelect = React.useCallback(
+    (nextValue: TValue) => {
+      select(nextValue);
+      dismiss();
+    },
+    [dismiss, select],
+  );
+
+  const renderOption = React.useCallback(
+    ({ item }: ListRenderItemInfo<SelectOption<TValue>>) => (
+      <SelectOptionRow
+        interactionPolicy={interactionPolicy}
+        onSelect={handleSelect}
+        option={item}
+        selected={value === item.value}
+        testID={testID}
+      />
+    ),
+    [handleSelect, interactionPolicy, testID, value],
+  );
+
+  const openSelect = React.useCallback(() => {
+    if (disabled || readOnly || passive) return;
+
+    present({
+      contentMode: 'direct',
+      maxDynamicContentSize: SELECT_SHEET_MAX_HEIGHT,
+      content: (
+        <BottomSheetFlatList
+          contentContainerStyle={styles.listContent}
+          data={listData}
+          keyExtractor={(item) => item.value}
+          renderItem={renderOption}
+        />
+      ),
+    });
+  }, [disabled, listData, passive, present, readOnly, renderOption]);
+
+  return (
+    <SelectField props={props}>
+      <SelectTrigger displayLabel={selectedOption?.label} onPress={openSelect} props={props} />
+    </SelectField>
+  );
+}
+
+const styles = StyleSheet.create({
+  listContent: {
+    padding: 16,
+  },
+});

package/src/features/form/select/adapters/inbound/Select.tsx

@@ -0,0 +1 @@
+export { Select } from './Select.web';

package/src/features/form/select/adapters/inbound/Select.web.tsx

@@ -0,0 +1,63 @@
+import { Popover } from '@ankhorage/surface';
+import React from 'react';
+
+import { withZoraThemeScope } from '../../../../../theme/withZoraThemeScope';
+import type { SelectProps } from '../../../../../types/select';
+import { Stack } from '../../../../layout/public';
+import { Surface } from '../../../../surface/public';
+import { SelectField } from '../../composition/SelectField';
+import { SelectOptionRow } from '../../composition/SelectOptionRow';
+import { SelectTrigger } from '../../composition/SelectTrigger';
+import { useSelectController } from '../../composition/useSelectController';
+
+/*** Renders Select with anchored Popover presentation on web. */
+export const Select = withZoraThemeScope(SelectInner);
+
+/*** Connects shared Select state and controls to the web Popover host. */
+function SelectInner<TValue extends string = string>({
+  themeId: _themeId,
+  mode: _mode,
+  ...props
+}: SelectProps<TValue>) {
+  const [open, setOpen] = React.useState(false);
+  const { select, selectedOption, value } = useSelectController(props);
+  const { interactionPolicy, options, testID } = props;
+
+  const selectAndClose = React.useCallback(
+    (nextValue: TValue) => {
+      select(nextValue);
+      setOpen(false);
+    },
+    [select],
+  );
+
+  return (
+    <SelectField props={props}>
+      <Popover
+        anchor={({ toggle }) => (
+          <SelectTrigger displayLabel={selectedOption?.label} onPress={toggle} props={props} />
+        )}
+        interactionPolicy={props.interactionPolicy}
+        onOpenChange={setOpen}
+        open={open}
+        placement="bottom-start"
+        testID={testID ? `${testID}-popover` : undefined}
+      >
+        <Surface variant="raised">
+          <Stack gap="xs" p="xs">
+            {options.map((option) => (
+              <SelectOptionRow
+                interactionPolicy={interactionPolicy}
+                key={option.value}
+                onSelect={selectAndClose}
+                option={option}
+                selected={value === option.value}
+                testID={testID}
+              />
+            ))}
+          </Stack>
+        </Surface>
+      </Popover>
+    </SelectField>
+  );
+}

package/src/features/form/select/composition/SelectField.tsx

@@ -0,0 +1,27 @@
+import { Field } from '@ankhorage/surface';
+import type React from 'react';
+
+import type { SelectProps } from '../../../../types/select';
+
+/*** Wraps Select presentation in the canonical Surface form-field semantics. */
+export function SelectField<TValue extends string>({ children, props }: SelectFieldProps<TValue>) {
+  return (
+    <Field
+      disabled={props.disabled}
+      errorText={props.errorText}
+      helperText={props.helperText}
+      invalid={props.invalid}
+      label={props.label}
+      readOnly={props.readOnly}
+      required={props.required}
+      testID={props.testID ? `${props.testID}-field` : undefined}
+    >
+      {children}
+    </Field>
+  );
+}
+
+interface SelectFieldProps<TValue extends string> {
+  children: React.ReactNode;
+  props: SelectProps<TValue>;
+}

package/src/features/form/select/composition/SelectOptionRow.tsx

@@ -0,0 +1,36 @@
+import type { SelectOption, SelectProps } from '../../../../types/select';
+import { Button } from '../../../button/public';
+
+const SELECTED_ICON = { name: 'checkmark' } as const;
+
+/*** Renders one Select option with shared web/native selection semantics. */
+export function SelectOptionRow<TValue extends string>({
+  interactionPolicy,
+  onSelect,
+  option,
+  selected,
+  testID,
+}: SelectOptionRowProps<TValue>) {
+  return (
+    <Button
+      color={selected ? 'primary' : 'neutral'}
+      disabled={option.disabled}
+      fullWidth
+      interactionPolicy={interactionPolicy}
+      onPress={() => onSelect(option.value)}
+      testID={testID ? `${testID}-option-${option.value}` : undefined}
+      trailingIcon={selected ? SELECTED_ICON : undefined}
+      variant={selected ? 'soft' : 'ghost'}
+    >
+      {option.label}
+    </Button>
+  );
+}
+
+interface SelectOptionRowProps<TValue extends string> {
+  interactionPolicy: SelectProps<TValue>['interactionPolicy'];
+  onSelect: (value: TValue) => void;
+  option: SelectOption<TValue>;
+  selected: boolean;
+  testID: string | undefined;
+}

package/src/features/form/select/composition/SelectTrigger.tsx

@@ -0,0 +1,32 @@
+import type { SelectProps } from '../../../../types/select';
+import { Button } from '../../../button/public';
+
+const SELECT_CHEVRON_ICON = { name: 'chevron-down' } as const;
+
+/*** Renders the shared Select trigger with the resolved option label or placeholder. */
+export function SelectTrigger<TValue extends string>({
+  displayLabel,
+  onPress,
+  props,
+}: SelectTriggerProps<TValue>) {
+  return (
+    <Button
+      color={props.invalid ? 'danger' : 'neutral'}
+      disabled={props.disabled}
+      fullWidth
+      interactionPolicy={props.interactionPolicy}
+      onPress={props.readOnly ? undefined : onPress}
+      testID={props.testID ? `${props.testID}-trigger` : undefined}
+      trailingIcon={SELECT_CHEVRON_ICON}
+      variant="outline"
+    >
+      {displayLabel ?? props.placeholder ?? 'Select'}
+    </Button>
+  );
+}
+
+interface SelectTriggerProps<TValue extends string> {
+  displayLabel: string | undefined;
+  onPress: () => void;
+  props: SelectProps<TValue>;
+}

package/src/features/form/select/composition/useSelectController.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import type { SelectProps } from '../../../../types/select';
+
+/*** Resolves controlled or uncontrolled Select value state and the selected option. */
+export function useSelectController<TValue extends string>(props: SelectProps<TValue>) {
+  const { defaultValue, onValueChange, options, value: controlledValue } = props;
+  const [localValue, setLocalValue] = React.useState<TValue | undefined>(defaultValue);
+  const value = controlledValue ?? localValue;
+  const selectedOption = options.find((option) => option.value === value);
+
+  const select = React.useCallback(
+    (nextValue: TValue) => {
+      if (controlledValue === undefined) setLocalValue(nextValue);
+      onValueChange?.(nextValue);
+    },
+    [controlledValue, onValueChange],
+  );
+
+  return { select, selectedOption, value } as const;
+}

package/src/features/form/select/public.test.ts

@@ -0,0 +1,25 @@
+import { expect, test } from 'bun:test';
+
+import { selectMeta } from './selectMeta';
+
+test('Select is a direct manifest node with valueChange payload', () => {
+  expect(selectMeta.directManifestNode).toBe(true);
+  expect(selectMeta.events.valueChange.eventType).toBe('select.valueChange');
+  expect(selectMeta.events.valueChange.payloadFields).toEqual([
+    { path: 'value', type: 'string', label: 'Value' },
+  ]);
+});
+
+test('Select uses web Popover and native BottomSheetFlatList presentation', async () => {
+  const [neutral, web, native] = await Promise.all([
+    Bun.file('src/features/form/select/adapters/inbound/Select.tsx').text(),
+    Bun.file('src/features/form/select/adapters/inbound/Select.web.tsx').text(),
+    Bun.file('src/features/form/select/adapters/inbound/Select.native.tsx').text(),
+  ]);
+
+  expect(neutral).toContain("export { Select } from './Select.web';");
+  expect(web).toContain("import { Popover } from '@ankhorage/surface';");
+  expect(native).toContain('<BottomSheetFlatList');
+  expect(native).toContain("contentMode: 'direct'");
+  expect(`${neutral}\n${web}\n${native}`).not.toContain('@react-native-picker/picker');
+});

package/src/features/form/select/public.ts

@@ -0,0 +1,2 @@
+export type { SelectOption, SelectProps } from '../../../types/select';
+export { Select } from './adapters/inbound/Select';

package/src/features/form/select/selectMeta.ts

@@ -0,0 +1,154 @@
+import type { ZoraComponentMeta } from '../../../metadata';
+
+export const selectMeta = {
+  name: 'Select',
+  category: 'component',
+  description:
+    'Single-value form selection with Popover presentation on web and BottomSheet presentation on native.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Select',
+    defaultProps: {
+      label: 'Option',
+      placeholder: 'Select',
+      defaultValue: 'option-b',
+      options: [
+        { value: 'option-a', label: 'First option' },
+        { value: 'option-b', label: 'Second option' },
+        { value: 'option-c', label: 'Third option' },
+      ],
+      disabled: false,
+      readOnly: false,
+      invalid: false,
+    },
+  },
+  bindings: {
+    props: {
+      value: {
+        label: 'Value',
+        description: 'Currently selected option value.',
+        value: { type: 'string' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+      disabled: {
+        label: 'Disabled',
+        description: 'Whether the select is disabled.',
+        value: { type: 'boolean' },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
+    },
+    events: {
+      valueChange: {
+        label: 'Value change',
+        description: 'Runs when the selected option value changes.',
+        payload: {
+          eventType: 'select.valueChange',
+          fields: [{ path: 'value', type: 'string', label: 'Value' }],
+        },
+      },
+    },
+  },
+  events: {
+    valueChange: {
+      label: 'Value change',
+      eventType: 'select.valueChange',
+      description: 'Emitted when the selected option value changes.',
+      payloadFields: [{ path: 'value', type: 'string', label: 'Value' }],
+    },
+  },
+  props: {
+    defaultValue: {
+      type: 'string',
+      category: 'State',
+      label: 'Initial value',
+      authoring: { authority: 'instance' },
+    },
+    value: {
+      type: 'string',
+      category: 'State',
+      label: 'Value',
+      authoring: { authority: 'instance' },
+    },
+    options: {
+      type: 'array',
+      category: 'Content',
+      label: 'Options',
+      itemSchema: [
+        {
+          key: 'value',
+          schema: { type: 'string', category: 'Content', label: 'Value' },
+        },
+        {
+          key: 'label',
+          schema: { type: 'string', category: 'Content', label: 'Label' },
+        },
+        {
+          key: 'disabled',
+          schema: {
+            type: 'boolean',
+            category: 'State',
+            label: 'Disabled',
+            default: false,
+          },
+        },
+      ],
+      authoring: { authority: 'instance' },
+    },
+    label: {
+      type: 'string',
+      category: 'Content',
+      label: 'Label',
+      authoring: { authority: 'instance' },
+    },
+    helperText: {
+      type: 'string',
+      category: 'Content',
+      label: 'Helper text',
+      authoring: { authority: 'instance' },
+    },
+    errorText: {
+      type: 'string',
+      category: 'Content',
+      label: 'Error text',
+      authoring: { authority: 'instance' },
+    },
+    placeholder: {
+      type: 'string',
+      category: 'Content',
+      label: 'Placeholder',
+      default: 'Select',
+      authoring: { authority: 'instance' },
+    },
+    required: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Required',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+    disabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Disabled',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+    readOnly: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Read only',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+    invalid: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Invalid',
+      default: false,
+      authoring: { authority: 'instance' },
+    },
+  },
+} as const satisfies ZoraComponentMeta;

package/src/features/popover-menu/adapters/inbound/PopoverMenu.tsx

@@ -0,0 +1,60 @@
+import {
+  PopoverMenu as SurfacePopoverMenu,
+  type PopoverMenuAction as SurfacePopoverMenuAction,
+} from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveIconSize } from '../../../../internal/recipes';
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { PopoverMenuAction, PopoverMenuProps } from '../../../../types/popover-menu';
+import { Icon } from '../../../icon/public';
+import { Box } from '../../../layout/public';
+
+/*** Presents a ZORA-styled action list through the Surface PopoverMenu capability. */
+export const PopoverMenu = withZoraThemeScope(PopoverMenuInner);
+
+/*** Maps ZORA action presentation into the Surface action-menu boundary. */
+function PopoverMenuInner({
+  themeId: _themeId,
+  mode: _mode,
+  actions,
+  onDismiss,
+  ...props
+}: PopoverMenuProps) {
+  const { theme } = useZoraTheme();
+  const iconColor = theme.semantics.content.muted;
+  const surfaceActions = React.useMemo(
+    () => actions.map((action) => toSurfaceAction(action, iconColor)),
+    [actions, iconColor],
+  );
+
+  return <SurfacePopoverMenu {...props} actions={surfaceActions} dismiss={onDismiss} />;
+}
+
+/*** Maps one ZORA PopoverMenu action to the Surface action contract. */
+function toSurfaceAction(action: PopoverMenuAction, iconColor: string): SurfacePopoverMenuAction {
+  return {
+    activate: action.onPress,
+    description: action.description,
+    disabled: action.disabled,
+    id: action.id,
+    intent: action.intent,
+    leading: renderActionLeading(action, iconColor),
+    selected: action.selected,
+    title: action.title,
+    trailing: renderActionTrailing(action),
+  };
+}
+
+/*** Resolves explicit leading content or the configured action icon. */
+function renderActionLeading(action: PopoverMenuAction, iconColor: string): React.ReactNode {
+  if (action.leading !== undefined) return action.leading;
+  if (action.icon === undefined) return undefined;
+  return <Icon {...action.icon} color={iconColor} size={resolveIconSize('s')} />;
+}
+
+/*** Wraps optional trailing action content in the ZORA layout boundary. */
+function renderActionTrailing(action: PopoverMenuAction): React.ReactNode {
+  return action.trailing === undefined ? undefined : <Box>{action.trailing}</Box>;
+}

package/src/{components/breadcrumbs/meta.ts → features/popover-menu/popoverMenuMeta.ts}

@@ -1,10 +1,10 @@
 import type { ZoraComponentMeta } from '../../metadata';
 
-export const breadcrumbsMeta = {
-  name: 'Breadcrumbs',
+export const popoverMenuMeta = {
+  name: 'PopoverMenu',
   category: 'component',
   directManifestNode: false,
   allowedChildren: [],
-  note: 'Code-facing route hierarchy component; not represented as a manifest node in v1.',
+  note: 'Code-facing anchored action menu; the trigger is a render prop and is not serialized as a direct manifest node.',
   props: {},
 } as const satisfies ZoraComponentMeta;

package/src/features/popover-menu/public.test.ts

@@ -0,0 +1,11 @@
+import { expect, test } from 'bun:test';
+
+test('PopoverMenu composes the released Surface PopoverMenu capability', async () => {
+  const source = await Bun.file(
+    'src/features/popover-menu/adapters/inbound/PopoverMenu.tsx',
+  ).text();
+
+  expect(source).toContain('PopoverMenu as SurfacePopoverMenu');
+  expect(source).toContain('<SurfacePopoverMenu');
+  expect(source).not.toContain('DropdownMenu');
+});

package/src/features/popover-menu/public.ts

@@ -0,0 +1,6 @@
+export type {
+  PopoverMenuAction,
+  PopoverMenuActionIntent,
+  PopoverMenuProps,
+} from '../../types/popover-menu';
+export { PopoverMenu } from './adapters/inbound/PopoverMenu';

package/src/index.ts

@@ -1,9 +1,3 @@
-export type { AppBarMode, AppBarOverflowAction, AppBarProps } from './components/app-bar';
-export { AppBar } from './components/app-bar';
-export type { BreadcrumbItem, BreadcrumbsProps } from './components/breadcrumbs';
-export { Breadcrumbs } from './components/breadcrumbs';
-export type { DropdownMenuProps, MenuAction, MenuActionIntent, MenuProps } from './components/menu';
-export { DropdownMenu, Menu } from './components/menu';
 export type { ModalProps } from './components/modal';
 export { Modal } from './components/modal';
 export type { PaginationProps } from './components/pagination';
@@ -12,8 +6,6 @@ export type { RatingProps } from './components/rating';
 export { Rating } from './components/rating';
 export type { SearchBarProps } from './components/search-bar';
 export { SearchBar } from './components/search-bar';
-export type { SelectOption, SelectProps } from './components/select';
-export { Select } from './components/select';
 export type { TabItem, TabsProps, TabsVariant } from './components/tabs';
 export { Tabs } from './components/tabs';
 export type { ToolbarActionProps, ToolbarPosition, ToolbarProps } from './components/toolbar';
@@ -33,6 +25,8 @@ export {
   ActivityIndicator,
   type ActivityIndicatorProps,
 } from './features/activity-indicator/public';
+export type { AppBarMode, AppBarOverflowMenu, AppBarProps } from './features/app-bar/public';
+export { AppBar } from './features/app-bar/public';
 export type {
   AuthFormBaseProps,
   AuthIdentifierKind,
@@ -70,6 +64,12 @@ export type { BadgeProps } from './features/badge/public';
 export { Badge } from './features/badge/public';
 export type { BottomSheetProps } from './features/bottom-sheet/public';
 export { BottomSheet } from './features/bottom-sheet/public';
+export {
+  type BreadcrumbItem,
+  type BreadcrumbPressEvent,
+  Breadcrumbs,
+  type BreadcrumbsProps,
+} from './features/breadcrumbs/public';
 export type { ButtonProps } from './features/button/public';
 export type {
   ButtonGroupAlign,
@@ -161,6 +161,7 @@ export {
   type RadioGroupProps,
   type RadioProps,
 } from './features/form/radio/public';
+export { Select, type SelectOption, type SelectProps } from './features/form/select/public';
 export {
   TextInput,
   type TextInputProps,
@@ -219,6 +220,12 @@ export type {
 } from './features/list/public';
 export { FlatList, SectionList } from './features/list/public';
 export { MissingElement, type MissingElementProps } from './features/missing-element/public';
+export {
+  PopoverMenu,
+  type PopoverMenuAction,
+  type PopoverMenuActionIntent,
+  type PopoverMenuProps,
+} from './features/popover-menu/public';
 export {
   Progress,
   type ProgressProps,