@limonify/zest-ui 0.1.0

package/src/select/root/SelectRoot.tsx

@@ -0,0 +1,153 @@
+'use client';
+import type * as React from 'react';
+import { useRefWithInit } from '../../hooks/useRefWithInit';
+import type { ZestChangeEventDetails } from '../../utils/createChangeEventDetails';
+import type { REASONS } from '../../utils/reasons';
+import { SelectStore, type SelectItems } from '../store/SelectStore';
+import { SelectRootContext } from './SelectRootContext';
+
+/**
+ * Groups all parts of the select.
+ * Doesn't render its own element.
+ *
+ * Unlike the web version there is no hidden `<select>`: React Native has no form
+ * submission, so `name`/`form` are omitted. Multi-select is not ported yet.
+ */
+export function SelectRoot<Value = any>(props: SelectRoot.Props<Value>) {
+  const {
+    children,
+    defaultOpen = false,
+    defaultValue,
+    disabled = false,
+    items,
+    multiple = false,
+    onOpenChange,
+    onValueChange,
+    open,
+    readOnly = false,
+    required = false,
+    value,
+  } = props;
+
+  const store = useRefWithInit(
+    () =>
+      new SelectStore({
+        open: defaultOpen,
+        openProp: open,
+        // A multiple select's selection is a list, so an omitted default is an
+        // empty one rather than "nothing selected".
+        value: defaultValue ?? (multiple ? [] : undefined),
+        valueProp: value,
+        items,
+        multiple,
+        disabled,
+        readOnly,
+        required,
+      }),
+  ).current;
+
+  store.useControlledProp('openProp', open);
+  store.useControlledProp('valueProp', value);
+  store.useContextCallback('onOpenChange', onOpenChange);
+  store.useContextCallback('onValueChange', onValueChange);
+  store.useSyncedValues({ disabled, readOnly, required, items, multiple });
+
+  return <SelectRootContext.Provider value={store}>{children}</SelectRootContext.Provider>;
+}
+
+export interface SelectRootState {}
+
+export interface SelectRootProps<Value = any> {
+  /**
+   * The value of the currently selected item.
+   *
+   * To render an uncontrolled select, use the `defaultValue` prop instead.
+   */
+  value?: Value | undefined;
+  /**
+   * The value of the initially selected item.
+   *
+   * To render a controlled select, use the `value` prop instead.
+   */
+  defaultValue?: Value | undefined;
+  /**
+   * Event handler called when the selected value changes.
+   */
+  onValueChange?:
+    | ((value: Value, eventDetails: SelectRoot.ChangeEventDetails) => void)
+    | undefined;
+  /**
+   * Whether the select popup is currently open.
+   */
+  open?: boolean | undefined;
+  /**
+   * Whether the select popup is initially open.
+   * @default false
+   */
+  defaultOpen?: boolean | undefined;
+  /**
+   * Event handler called when the popup is opened or closed.
+   */
+  onOpenChange?:
+    | ((open: boolean, eventDetails: SelectRoot.ChangeEventDetails) => void)
+    | undefined;
+  /**
+   * Whether more than one item can be selected.
+   *
+   * The value becomes an array, pressing an item toggles it rather than
+   * replacing the selection, and the popup stays open until it is dismissed.
+   * @default false
+   */
+  multiple?: boolean | undefined;
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Whether the user should be unable to choose a different item.
+   * @default false
+   */
+  readOnly?: boolean | undefined;
+  /**
+   * Whether the user must choose a value.
+   * @default false
+   */
+  required?: boolean | undefined;
+  /**
+   * Value-to-label data for the items in the popup.
+   *
+   * `Select.ItemText` registers each item's label as it mounts, but the items
+   * live in the portal and so do not exist until the popup is first opened.
+   * Pass `items` for `Select.Value` to render the selected label before then.
+   *
+   * @example
+   * ```tsx
+   * <Select.Root items={{ sans: 'Sans-serif', serif: 'Serif' }} />
+   * // or, for non-string values:
+   * <Select.Root items={[{ value: 1, label: 'One' }]} />
+   * ```
+   */
+  items?: SelectItems | undefined;
+  /**
+   * The content of the select.
+   */
+  children?: React.ReactNode;
+}
+
+export type SelectRootChangeEventReason =
+  | typeof REASONS.triggerPress
+  | typeof REASONS.outsidePress
+  | typeof REASONS.escapeKey
+  | typeof REASONS.itemPress
+  | typeof REASONS.imperativeAction
+  | typeof REASONS.none;
+
+export type SelectRootChangeEventDetails = ZestChangeEventDetails<SelectRootChangeEventReason>;
+
+export namespace SelectRoot {
+  export type State = SelectRootState;
+  export type Props<TValue = any> = SelectRootProps<TValue>;
+  export type ChangeEventReason = SelectRootChangeEventReason;
+  export type ChangeEventDetails = SelectRootChangeEventDetails;
+}

package/src/select/root/SelectRootContext.ts

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import type { SelectStore } from '../store/SelectStore';
+
+export const SelectRootContext = React.createContext<SelectStore | undefined>(undefined);
+
+export function useSelectRootContext() {
+  const context = React.useContext(SelectRootContext);
+  if (context === undefined) {
+    throw new Error(
+      'Zest: SelectRootContext is missing. Select parts must be placed within <Select.Root>.',
+    );
+  }
+
+  return context;
+}

package/src/select/store/SelectStore.ts

@@ -0,0 +1,195 @@
+import { createSelector } from '../../store/createSelector';
+import { ReactStore } from '../../store/ReactStore';
+import type { SelectRoot } from '../root/SelectRoot';
+
+/**
+ * Value-to-label data, as either a record keyed by value or an explicit list
+ * (which is what non-string values need).
+ */
+export type SelectItems =
+  | Record<string, string>
+  | ReadonlyArray<{ value: unknown; label: string }>;
+
+/**
+ * Whether `value` is selected, given the current selection. In multiple mode the
+ * selection is an array and membership is what counts.
+ */
+export function isSelectValueSelected(
+  selectedValue: unknown,
+  value: unknown,
+  multiple: boolean,
+): boolean {
+  if (multiple) {
+    return Array.isArray(selectedValue) && selectedValue.includes(value);
+  }
+
+  return selectedValue === value;
+}
+
+/**
+ * The selection after `value` is pressed: a replacement normally, a toggle in
+ * multiple mode.
+ */
+export function toggleSelectValue(
+  selectedValue: unknown,
+  value: unknown,
+  multiple: boolean,
+): unknown {
+  if (!multiple) {
+    return value;
+  }
+
+  const current = Array.isArray(selectedValue) ? selectedValue : [];
+
+  return current.includes(value)
+    ? current.filter((item) => item !== value)
+    : [...current, value];
+}
+
+/**
+ * Resolves a value's label from the consumer's `items`, falling back to the
+ * labels items registered as they mounted.
+ */
+export function resolveSelectLabel(
+  items: SelectItems | undefined,
+  labelsByValue: Map<unknown, string>,
+  value: unknown,
+): string | undefined {
+  if (items) {
+    if (Array.isArray(items)) {
+      const match = items.find((item) => item.value === value);
+      if (match) {
+        return match.label;
+      }
+    } else if (typeof value === 'string') {
+      const label = (items as Record<string, string>)[value];
+      if (label !== undefined) {
+        return label;
+      }
+    }
+  }
+
+  return labelsByValue.get(value);
+}
+
+export type State = {
+  open: boolean;
+  openProp: boolean | undefined;
+  /**
+   * The uncontrolled selected value. Read through the `value` selector, which
+   * resolves the controlled prop first.
+   */
+  value: unknown;
+  /**
+   * The controlled `value` prop, when provided.
+   */
+  valueProp: unknown;
+  /**
+   * Labels registered by `Select.ItemText` as items mount.
+   */
+  labelsByValue: Map<unknown, string>;
+  /**
+   * The consumer's value-to-label data. Items only register their labels once
+   * they mount, which cannot happen before the popup is first opened — so a
+   * closed select can only render its selected label from this.
+   */
+  items: SelectItems | undefined;
+  /**
+   * Whether more than one item can be selected, which makes `value` an array.
+   */
+  multiple: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  required: boolean;
+  /**
+   * The anchor's native node, carried across the portal boundary.
+   */
+  triggerNode: unknown;
+  /**
+   * The id of the `Select.Label`, associated with the trigger. `undefined` when
+   * there is no label.
+   */
+  labelId: string | undefined;
+  update: (() => void) | undefined;
+};
+
+type Context = {
+  onValueChange: ((value: any, eventDetails: SelectRoot.ChangeEventDetails) => void) | undefined;
+  onOpenChange: ((open: boolean, eventDetails: SelectRoot.ChangeEventDetails) => void) | undefined;
+};
+
+const selectors = {
+  open: createSelector((state: State) => state.openProp ?? state.open),
+  value: createSelector((state: State) =>
+    state.valueProp !== undefined ? state.valueProp : state.value,
+  ),
+  labelsByValue: createSelector((state: State) => state.labelsByValue),
+  items: createSelector((state: State) => state.items),
+  multiple: createSelector((state: State) => state.multiple),
+  disabled: createSelector((state: State) => state.disabled),
+  readOnly: createSelector((state: State) => state.readOnly),
+  required: createSelector((state: State) => state.required),
+  triggerNode: createSelector((state: State) => state.triggerNode),
+  labelId: createSelector((state: State) => state.labelId),
+  update: createSelector((state: State) => state.update),
+};
+
+export class SelectStore extends ReactStore<Readonly<State>, Context, typeof selectors> {
+  constructor(initialState?: Partial<State>) {
+    super(
+      {
+        open: false,
+        openProp: undefined,
+        value: undefined,
+        valueProp: undefined,
+        labelsByValue: new Map(),
+        items: undefined,
+        multiple: false,
+        disabled: false,
+        readOnly: false,
+        required: false,
+        triggerNode: null,
+        labelId: undefined,
+        update: undefined,
+        ...initialState,
+      },
+      { onValueChange: undefined, onOpenChange: undefined },
+      selectors,
+    );
+  }
+
+  public setOpen = (nextOpen: boolean, eventDetails: SelectRoot.ChangeEventDetails) => {
+    if (nextOpen === this.select('open')) {
+      return;
+    }
+
+    this.context.onOpenChange?.(nextOpen, eventDetails);
+
+    if (eventDetails.isCanceled) {
+      return;
+    }
+
+    this.set('open', nextOpen);
+  };
+
+  public setValue = (nextValue: unknown, eventDetails: SelectRoot.ChangeEventDetails) => {
+    this.context.onValueChange?.(nextValue, eventDetails);
+
+    if (eventDetails.isCanceled) {
+      return;
+    }
+
+    this.set('value', nextValue);
+  };
+
+  public registerLabel = (value: unknown, label: string) => {
+    const labels = this.state.labelsByValue;
+    if (labels.get(value) === label) {
+      return;
+    }
+
+    const next = new Map(labels);
+    next.set(value, label);
+    this.set('labelsByValue', next);
+  };
+}

package/src/select/trigger/SelectTrigger.tsx

@@ -0,0 +1,103 @@
+'use client';
+import * as React from 'react';
+import { Pressable, type GestureResponderEvent } from 'react-native';
+import { useSelectRootContext } from '../root/SelectRootContext';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import { useButton } from '../../internals/use-button/useButton';
+import { useMergedRefs } from '../../hooks/useMergedRefs';
+import type { ZestUIComponentProps } from '../../types';
+import { createChangeEventDetails } from '../../utils/createChangeEventDetails';
+import { REASONS } from '../../utils/reasons';
+
+/**
+ * A button that opens the select popup, and the element it is positioned against.
+ * Renders a `<Pressable>`.
+ */
+export function SelectTrigger(componentProps: SelectTrigger.Props) {
+  const {
+    render,
+    className,
+    style,
+    disabled: disabledProp = false,
+    ref,
+    ...elementProps
+  } = componentProps;
+
+  const store = useSelectRootContext();
+  const open = store.useState('open');
+  const rootDisabled = store.useState('disabled');
+  const readOnly = store.useState('readOnly');
+  const required = store.useState('required');
+  const labelId = store.useState('labelId');
+
+  const disabled = rootDisabled || disabledProp;
+
+  const [pressed, setPressed] = React.useState(false);
+
+  const { getButtonProps } = useButton({ disabled });
+
+  const anchorRef = React.useCallback(
+    (node: unknown) => {
+      store.set('triggerNode', node);
+    },
+    [store],
+  );
+  const mergedRef = useMergedRefs(ref, anchorRef);
+
+  const state: SelectTriggerState = { disabled, open, pressed, readOnly, required };
+
+  return useRenderElement(Pressable, componentProps, {
+    state,
+    ref: mergedRef,
+    props: [
+      {
+        onPress(event: GestureResponderEvent) {
+          if (readOnly) {
+            return;
+          }
+
+          store.setOpen(!open, createChangeEventDetails(REASONS.triggerPress, event));
+        },
+        onPressIn() {
+          setPressed(true);
+        },
+        onPressOut() {
+          setPressed(false);
+        },
+        onLayout() {
+          store.state.update?.();
+        },
+        accessibilityRole: 'combobox' as const,
+        accessibilityLabelledBy: labelId,
+        accessibilityState: { expanded: open, disabled: disabled || undefined },
+        'aria-haspopup': 'listbox' as const,
+        'aria-readonly': readOnly || undefined,
+        'aria-required': required || undefined,
+      },
+      elementProps,
+      getButtonProps,
+    ],
+  });
+}
+
+export interface SelectTriggerState {
+  disabled: boolean;
+  open: boolean;
+  pressed: boolean;
+  readOnly: boolean;
+  required: boolean;
+}
+
+export interface SelectTriggerProps
+  extends ZestUIComponentProps<typeof Pressable, SelectTriggerState> {
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+}
+
+export namespace SelectTrigger {
+  export type State = SelectTriggerState;
+  export type Props = SelectTriggerProps;
+}

package/src/select/value/SelectValue.tsx

@@ -0,0 +1,77 @@
+'use client';
+import { Text } from 'react-native';
+import { useSelectRootContext } from '../root/SelectRootContext';
+import { resolveSelectLabel } from '../store/SelectStore';
+import { useRenderElement } from '../../use-render/useRenderElement';
+import type { ZestUIComponentProps } from '../../types';
+
+/**
+ * The label of the currently selected item.
+ * Renders a `<Text>`.
+ *
+ * The label comes from `Select.Root`'s `items` prop, falling back to the labels
+ * `Select.ItemText` registers as items mount. Without `items` the label is only
+ * known after the popup has been opened once, since that is when the items first
+ * render. Pass `children` as a function to format it yourself.
+ *
+ * In a `multiple` select there are several labels, so `label` is them joined
+ * with a comma and `labels` holds them individually — a comma is rarely the
+ * right separator, so format from `labels` when it matters.
+ */
+export function SelectValue(componentProps: SelectValue.Props) {
+  const { render, className, style, children, ref, ...elementProps } = componentProps;
+
+  const store = useSelectRootContext();
+  const value = store.useState('value');
+  const labelsByValue = store.useState('labelsByValue');
+  const items = store.useState('items');
+  const multiple = store.useState('multiple');
+
+  const labels =
+    multiple && Array.isArray(value)
+      ? value
+          .map((item) => resolveSelectLabel(items, labelsByValue, item))
+          .filter((item): item is string => item !== undefined)
+      : [resolveSelectLabel(items, labelsByValue, value)].filter(
+          (item): item is string => item !== undefined,
+        );
+
+  const label = labels.length > 0 ? labels.join(', ') : undefined;
+
+  const state: SelectValueState = { value, label, labels };
+
+  const resolvedChildren = typeof children === 'function' ? children(state) : (children ?? label);
+
+  return useRenderElement(Text, componentProps, {
+    state,
+    ref,
+    props: [elementProps, { children: resolvedChildren }],
+  });
+}
+
+export interface SelectValueState {
+  /**
+   * The currently selected value.
+   */
+  value: unknown;
+  /**
+   * The selected item's label, if it is known. In a `multiple` select, every
+   * selected label joined with a comma.
+   */
+  label: string | undefined;
+  /**
+   * Every selected label, in selection order. Empty when nothing is selected or
+   * no label is known yet.
+   */
+  labels: string[];
+}
+
+export interface SelectValueProps
+  extends Omit<ZestUIComponentProps<typeof Text, SelectValueState>, 'children'> {
+  children?: React.ReactNode | ((state: SelectValueState) => React.ReactNode);
+}
+
+export namespace SelectValue {
+  export type State = SelectValueState;
+  export type Props = SelectValueProps;
+}

package/src/separator/Separator.tsx

@@ -0,0 +1,49 @@
+'use client';
+import { View } from 'react-native';
+import type { ZestUIComponentProps, Orientation } from '../types';
+import { useRenderElement } from '../use-render/useRenderElement';
+
+/**
+ * A separator element accessible to screen readers.
+ * Renders a `<View>`.
+ */
+export function Separator(componentProps: Separator.Props) {
+  const {
+    className,
+    render,
+    orientation = 'horizontal',
+    style,
+    ref,
+    ...elementProps
+  } = componentProps;
+
+  const state: SeparatorState = { orientation };
+
+  const element = useRenderElement(View, componentProps, {
+    state,
+    ref,
+    props: [{ role: 'separator', 'aria-orientation': orientation }, elementProps],
+  });
+
+  return element;
+}
+
+export interface SeparatorProps extends ZestUIComponentProps<typeof View, SeparatorState> {
+  /**
+   * The orientation of the separator.
+   * @default 'horizontal'
+   */
+  orientation?: Orientation | undefined;
+}
+
+export interface SeparatorState {
+  /**
+   * The orientation of the separator.
+   */
+  orientation: Orientation;
+}
+
+export namespace Separator {
+  export type Props = SeparatorProps;
+  export type State = SeparatorState;
+}

package/src/separator/index.ts

@@ -0,0 +1,3 @@
+export { Separator } from './Separator';
+
+export type * from './Separator';