panelui-native 0.7.0 → 0.12.0

package/src/components/select/index.tsx

@@ -1,28 +1,69 @@
+/**
+ * Select — a picker with one trigger and three ways of showing its options.
+ *
+ * Which one is right depends on what surrounds the trigger, not on what the
+ * options are, which is why it is a prop rather than three components:
+ *
+ * - `sheet` (default) takes the bottom of the screen. Best for a long list, or
+ *   on a small screen where an anchored panel would cover the thing you are
+ *   choosing for.
+ * - `inline` expands the list in normal layout flow. Everything below moves
+ *   down. Right inside a settings list, where that reads as the row growing;
+ *   wrong anywhere the shift is jarring.
+ * - `overlay` floats the list above the page through a portal, anchored to the
+ *   trigger and flipped above it when there is no room below. Nothing else on
+ *   the screen moves.
+ *
+ * ```tsx
+ * <Select value={region} onValueChange={setRegion} presentation="overlay">
+ *   <Select.Item value="us" label="United States" />
+ *   <Select.Item value="eu" label="Europe" />
+ * </Select>
+ * ```
+ */
 import {
   Children,
   createContext,
   isValidElement,
+  useCallback,
   useContext,
   useMemo,
+  useRef,
   useState,
-  type ReactElement,
   type ReactNode,
 } from 'react';
-import { Pressable, ScrollView, View } from 'react-native';
+import {
+  Pressable,
+  ScrollView,
+  useWindowDimensions,
+  View,
+  type LayoutChangeEvent,
+} from 'react-native';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { CheckIcon, ChevronDownIcon } from '../../icons';
 import { getNativeUI } from '../../native';
+import { Portal } from '../../primitives/portal';
 import { Text } from '../../primitives/text';
 import { BottomSheet } from '../bottom-sheet';
 
 const selectVariants = tv({
   slots: {
+    // `rounded-lg`, the same radius Button and Input use — a select sitting in
+    // a form beside either of them should read as the same family of control.
     trigger:
-      'w-full flex-row items-center justify-between gap-3 rounded-2xl border border-input bg-background px-4 py-3.5',
+      'w-full flex-row items-center justify-between gap-3 rounded-lg border border-input bg-background px-4 py-3.5',
     triggerLabel: 'flex-1 text-base font-medium text-foreground',
     placeholder: 'flex-1 text-base text-muted-foreground',
-    item: 'flex-row items-center gap-2 rounded-xl px-3 py-3',
+    list: 'overflow-hidden rounded-xl border border-border bg-popover p-2 shadow-sm',
+    item: 'flex-row items-center gap-2 rounded-lg px-3 py-3',
     itemLabel: 'flex-1 text-base font-medium text-foreground',
     itemIndicator: 'h-5 w-5 items-center justify-center',
   },
@@ -31,11 +72,29 @@ const selectVariants = tv({
       true: { item: 'bg-accent' },
     },
     disabled: {
-      true: { trigger: 'opacity-50' },
+      true: { trigger: 'opacity-[0.64]' },
+    },
+    presentation: {
+      sheet: {},
+      inline: { list: 'mt-2' },
+      overlay: { list: 'shadow-lg' },
     },
   },
+  defaultVariants: {
+    presentation: 'sheet',
+  },
 });
 
+export type SelectPresentation = 'sheet' | 'inline' | 'overlay';
+
+/**
+ * Height given to the native host per appearance — a menu is a compact button,
+ * a wheel is a full rotor. The host is told its size rather than asked to
+ * measure the platform's content, which arrives a frame late and leaves the
+ * control collapsed until something forces a second pass.
+ */
+const NATIVE_HEIGHT = { menu: 44, wheel: 216 } as const;
+
 interface SelectContextValue {
   value: string | undefined;
   onSelect: (value: string) => void;
@@ -48,7 +107,7 @@ export interface SelectItemProps {
   label: string;
 }
 
-/** Declarative option. Rendered inside the picker sheet. */
+/** Declarative option. Rendered inside whichever surface is presenting. */
 function SelectItem({ value, label }: SelectItemProps) {
   const context = useContext(SelectContext);
   if (!context) {
@@ -79,22 +138,45 @@ function SelectItem({ value, label }: SelectItemProps) {
   );
 }
 
+/** Trigger frame in window coordinates, measured when the list opens. */
+interface Anchor {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
 export interface SelectProps {
   className?: string;
   value?: string;
   onValueChange: (value: string) => void;
   placeholder?: string;
-  /** Sheet title shown above the options. */
-  title?: string;
   disabled?: boolean;
   /**
-   * Render the platform's own picker instead of the trigger-and-sheet pair.
+   * Where the options appear. `sheet` takes the bottom of the screen, `inline`
+   * expands the list in layout flow, `overlay` floats it above the page
+   * anchored to the trigger.
+   */
+  presentation?: SelectPresentation;
+  /** Sheet title shown above the options. `sheet` presentation only. */
+  title?: string;
+  /**
+   * Width of the floating list. `trigger` matches the trigger, `content` sizes
+   * to the longest option, or pass a pixel value. `overlay` only.
+   */
+  contentWidth?: 'trigger' | 'content' | number;
+  /** Gap between the trigger and the floating list. `overlay` only. */
+  offset?: number;
+  /** Called when the options open or close. */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Render the platform's own picker instead of the trigger-and-list pair.
    * Requires the optional `@expo/ui` package; without it this prop does
    * nothing.
    *
    * **Theme tokens do not apply** — the platform draws the picker, so
-   * `className` and `title` are ignored. `Select.Item` children still declare
-   * the options.
+   * `className`, `title` and `presentation` are ignored. `Select.Item`
+   * children still declare the options.
    */
   native?: boolean;
   /**
@@ -110,13 +192,22 @@ function SelectRoot({
   value,
   onValueChange,
   placeholder = 'Select an option',
-  title,
   disabled,
+  presentation = 'sheet',
+  title,
+  contentWidth = 'trigger',
+  offset = 8,
+  onOpenChange,
   native,
   nativeAppearance = 'menu',
   children,
 }: SelectProps) {
   const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState<Anchor | null>(null);
+  const [listHeight, setListHeight] = useState(0);
+  const triggerRef = useRef<View>(null);
+  const chevron = useSharedValue(0);
+  const { height: screenHeight } = useWindowDimensions();
   const nativeUI = native ? getNativeUI() : null;
 
   const options = useMemo(() => {
@@ -134,28 +225,61 @@ function SelectRoot({
     [options, value]
   );
 
+  const close = useCallback(() => {
+    chevron.value = withTiming(0, { duration: 160 });
+    setOpen(false);
+    onOpenChange?.(false);
+  }, [chevron, onOpenChange]);
+
+  const toggle = useCallback(() => {
+    if (open) {
+      close();
+      return;
+    }
+
+    const show = () => {
+      chevron.value = withTiming(1, { duration: 160 });
+      setOpen(true);
+      onOpenChange?.(true);
+    };
+
+    if (presentation !== 'overlay') {
+      show();
+      return;
+    }
+
+    // The floating list is positioned in window coordinates, so it has to know
+    // where the trigger actually landed — not where layout said it would.
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setAnchor({ x, y, width, height });
+      show();
+    });
+  }, [chevron, close, onOpenChange, open, presentation]);
+
   const context = useMemo<SelectContextValue>(
     () => ({
       value,
       onSelect: (next) => {
         onValueChange(next);
-        setOpen(false);
+        close();
       },
     }),
-    [value, onValueChange]
+    [value, onValueChange, close]
   );
 
-  const { trigger, triggerLabel, placeholder: placeholderSlot } = selectVariants({
-    disabled: !!disabled,
-  });
+  const slots = selectVariants({ disabled: !!disabled, presentation });
   const chevronColor = useCSSVariable('--color-muted-foreground');
 
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${chevron.value * 180}deg` }],
+  }));
+
   if (nativeUI) {
     const { Host, Picker } = nativeUI;
     // The native picker has no empty state, so an unset value shows the first
     // option rather than the placeholder.
     return (
-      <Host matchContents>
+      <Host style={{ height: NATIVE_HEIGHT[nativeAppearance] }}>
         <Picker
           selectedValue={value ?? options[0]?.value ?? ''}
           onValueChange={(next: string) => onValueChange(next)}
@@ -163,51 +287,140 @@ function SelectRoot({
           enabled={!disabled}
         >
           {options.map((option) => (
-            <Picker.Item
-              key={option.value}
-              label={option.label}
-              value={option.value}
-            />
+            <Picker.Item key={option.value} label={option.label} value={option.value} />
           ))}
         </Picker>
       </Host>
     );
   }
 
-  return (
-    <SelectContext.Provider value={context}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityState={{ disabled: !!disabled, expanded: open }}
-        disabled={disabled}
-        onPress={() => setOpen(true)}
-        className={trigger({ className })}
-      >
-        {selectedLabel ? (
-          <Text className={triggerLabel()}>{selectedLabel}</Text>
-        ) : (
-          <Text className={placeholderSlot()}>{placeholder}</Text>
-        )}
+  const trigger = (
+    <Pressable
+      ref={triggerRef}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: !!disabled, expanded: open }}
+      disabled={disabled}
+      onPress={toggle}
+      className={slots.trigger()}
+    >
+      {selectedLabel ? (
+        <Text className={slots.triggerLabel()}>{selectedLabel}</Text>
+      ) : (
+        <Text className={slots.placeholder()}>{placeholder}</Text>
+      )}
+      <Animated.View style={chevronStyle}>
         <ChevronDownIcon
           color={typeof chevronColor === 'string' ? chevronColor : '#737373'}
         />
-      </Pressable>
-      <BottomSheet open={open} onOpenChange={setOpen}>
-        <BottomSheet.Content>
-          {/* BottomSheet.Content portals its children out of this subtree —
-              re-provide the select context so Select.Item keeps working. */}
+      </Animated.View>
+    </Pressable>
+  );
+
+  if (presentation === 'sheet') {
+    return (
+      <SelectContext.Provider value={context}>
+        <View className={className}>{trigger}</View>
+        {/* The sheet only ever reports a close — it is opened from the
+            trigger — and close() has the chevron to put back. */}
+        <BottomSheet
+          open={open}
+          onOpenChange={(next) => {
+            if (!next) close();
+          }}
+        >
+          <BottomSheet.Content>
+            {/* BottomSheet.Content portals its children out of this subtree —
+                re-provide the select context so Select.Item keeps working. */}
+            <SelectContext.Provider value={context}>
+              {title ? (
+                <Text size="lg" weight="semibold" className="mb-2 px-3">
+                  {title}
+                </Text>
+              ) : null}
+              <ScrollView bounces={false} className="max-h-96">
+                <View className="gap-1 pb-2">{children}</View>
+              </ScrollView>
+            </SelectContext.Provider>
+          </BottomSheet.Content>
+        </BottomSheet>
+      </SelectContext.Provider>
+    );
+  }
+
+  if (presentation === 'inline') {
+    return (
+      <SelectContext.Provider value={context}>
+        <View className={className}>
+          {trigger}
+          {open ? (
+            <Animated.View
+              entering={FadeIn.duration(140)}
+              exiting={FadeOut.duration(120)}
+              className={slots.list()}
+            >
+              {children}
+            </Animated.View>
+          ) : null}
+        </View>
+      </SelectContext.Provider>
+    );
+  }
+
+  // Flip above the trigger when the list would run off the bottom. listHeight
+  // is 0 on the first frame, so the list opens downwards and corrects itself
+  // once measured — which is invisible inside the 140ms fade.
+  const spaceBelow = anchor ? screenHeight - (anchor.y + anchor.height) - offset : 0;
+  const flip = !!anchor && listHeight > 0 && listHeight > spaceBelow;
+
+  const overlayPosition = anchor
+    ? {
+        position: 'absolute' as const,
+        left: anchor.x,
+        ...(flip
+          ? { bottom: screenHeight - anchor.y + offset }
+          : { top: anchor.y + anchor.height + offset }),
+        ...(contentWidth === 'trigger'
+          ? { width: anchor.width }
+          : typeof contentWidth === 'number'
+            ? { width: contentWidth }
+            : { minWidth: anchor.width }),
+        // Never collapse to nothing in a cramped viewport — the list scrolls.
+        maxHeight: Math.max((flip ? anchor.y : spaceBelow) - offset, 160),
+      }
+    : null;
+
+  const onListLayout = (event: LayoutChangeEvent) => {
+    setListHeight(event.nativeEvent.layout.height);
+  };
+
+  return (
+    <SelectContext.Provider value={context}>
+      <View className={className}>{trigger}</View>
+
+      {open && overlayPosition ? (
+        <Portal>
+          {/* Full-screen catcher so a press anywhere else dismisses the list. */}
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Close"
+            onPress={close}
+            style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
+          />
           <SelectContext.Provider value={context}>
-            {title ? (
-              <Text size="lg" weight="semibold" className="mb-2 px-3">
-                {title}
-              </Text>
-            ) : null}
-            <ScrollView bounces={false} className="max-h-96">
-              <View className="gap-1 pb-2">{children}</View>
-            </ScrollView>
+            <Animated.View
+              entering={FadeIn.duration(140)}
+              exiting={FadeOut.duration(120)}
+              onLayout={onListLayout}
+              style={overlayPosition}
+              className={slots.list()}
+            >
+              <ScrollView bounces={false} showsVerticalScrollIndicator={false}>
+                {children}
+              </ScrollView>
+            </Animated.View>
           </SelectContext.Provider>
-        </BottomSheet.Content>
-      </BottomSheet>
+        </Portal>
+      ) : null}
     </SelectContext.Provider>
   );
 }

package/src/components/separator/index.tsx

@@ -0,0 +1,97 @@
+/**
+ * Separator — a rule between content.
+ *
+ * React Native has no `<hr>` and no border shorthand that survives a flex row,
+ * so a separator here is a view with a size on one axis and a stretch on the
+ * other. That is why orientation is a prop rather than something the layout
+ * infers: the component has to know which axis carries the thickness.
+ *
+ * ```tsx
+ * <Separator />
+ * <Separator orientation="vertical" />
+ * ```
+ *
+ * A vertical separator takes its length from the parent, so the parent needs a
+ * height — inside a `flex-row` with `items-stretch`, or with an explicit `h-*`
+ * on either the row or the separator itself. Without one it measures zero and
+ * nothing draws.
+ */
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { tv, type VariantProps } from 'tailwind-variants';
+
+const separatorVariants = tv({
+  base: 'bg-border',
+  variants: {
+    orientation: {
+      horizontal: 'w-full',
+      vertical: 'h-full',
+    },
+    variant: {
+      thin: '',
+      thick: '',
+    },
+  },
+  compoundVariants: [
+    // Thickness is on whichever axis is *not* the length, so it cannot be
+    // expressed by the orientation and variant classes independently.
+    { orientation: 'horizontal', variant: 'thin', class: 'h-px' },
+    { orientation: 'horizontal', variant: 'thick', class: 'h-1' },
+    { orientation: 'vertical', variant: 'thin', class: 'w-px' },
+    { orientation: 'vertical', variant: 'thick', class: 'w-1' },
+  ],
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'thin',
+  },
+});
+
+export interface SeparatorProps
+  extends ViewProps,
+    VariantProps<typeof separatorVariants> {
+  className?: string;
+  /**
+   * Thickness in pixels, overriding the variant. Sets the height of a
+   * horizontal separator and the width of a vertical one.
+   */
+  thickness?: number;
+  /**
+   * Whether the separator is only visual. A decorative separator is skipped by
+   * screen readers; set false when the split itself carries meaning — between
+   * two groups of menu items, say — and it is announced instead.
+   */
+  decorative?: boolean;
+}
+
+export const Separator = forwardRef<View, SeparatorProps>(
+  (
+    {
+      className,
+      orientation = 'horizontal',
+      variant,
+      thickness,
+      decorative = true,
+      style,
+      ...props
+    },
+    ref
+  ) => (
+    <View
+      ref={ref}
+      // `role` rather than `accessibilityRole` — React Native's older role list
+      // has no separator, the ARIA-aligned one does.
+      role={decorative ? 'none' : 'separator'}
+      accessible={!decorative}
+      aria-orientation={decorative ? undefined : orientation}
+      className={separatorVariants({ orientation, variant, className })}
+      style={
+        thickness !== undefined
+          ? [orientation === 'horizontal' ? { height: thickness } : { width: thickness }, style]
+          : style
+      }
+      {...props}
+    />
+  )
+);
+
+Separator.displayName = 'Separator';