@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/module/components/OptionSheet/OptionSheet.js

@@ -1,714 +1 @@
-"use strict";
-
-/**
- * OptionSheet — the shared bottom-sheet option picker.
- *
- * Internal primitive behind Select and InlineSelect: RN Modal-backed slide-up
- * sheet with backdrop fade, grab handle, optional title, optional client-side
- * search, the option list (icon + label + description, single dot / multi
- * checkbox) and the multi-select Done footer. Owns the open/close animations
- * and the search query; selection STATE stays with the caller — the sheet
- * only reports `onSelect(option)` and asks `isSelected(value)`.
- *
- * Also the home of the canonical option types (`SelectValue`, `SelectOption`)
- * and accessor signatures shared by every option-picking component. Select
- * re-exports them so the public import path is unchanged.
- */
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Dimensions, Easing, FlatList, Keyboard, Modal, Platform, Pressable, StatusBar, StyleSheet, Text, TextInput, View } from 'react-native';
-import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useDragToDismiss } from "../../hooks/useDragToDismiss.js";
-import { createAnimatedValue, setNativeValue, useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { defaultIcons } from "../AppIcon/defaultIcons.js";
-
-/** Magnifier and clear glyph size in the search box, matching SearchBar's md size. */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const SEARCH_ICON_SIZE = 18;
-
-/** A titled group of options; the sheet lists groups in order under a header row each. */
-
-/** What `renderOption` is told about the row it draws. */
-
-/** One list row: a section header or an option. Headers carry no value and take no tap. */
-
-export const OptionSheet = props => {
-  const {
-    open,
-    onClose,
-    title,
-    options,
-    sections,
-    renderSectionHeader,
-    renderOption,
-    alphabetIndex = false,
-    searchPlaceholder = 'Search…',
-    emptyText = 'No options',
-    labelOf,
-    getValue,
-    disabledOf,
-    destructiveOf,
-    descriptionOf,
-    iconOf,
-    isSelected,
-    onSelect,
-    multi = false,
-    searchable = false,
-    searchSelectionColor,
-    accessibilityLabel,
-    optionStyle,
-    selectedOptionStyle,
-    optionTextStyle,
-    selectedOptionTextStyle
-  } = props;
-  const theme = useTheme();
-  const insets = useSafeAreaInsets();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const [query, setQuery] = useState('');
-  const screenHeight = Dimensions.get('window').height;
-  const sheetMaxHeight = Math.round(screenHeight * 0.7);
-
-  // Animations: backdrop fade + sheet slide-up. `dragAnim` is the live
-  // finger offset from the drag-to-dismiss gesture, composed on top of the
-  // open/close slide so both can drive the same (native) transform.
-  // The close animation below is correct but was never visible: binding the
-  // native Modal to `open` unmounted the tree the moment `open` flipped, so the
-  // exit played against a torn-down view. Keep it mounted until the exit ends.
-  const [rendered, setRendered] = useState(open);
-  const backdropAnim = useRef(createAnimatedValue(0)).current;
-  const sheetAnim = useRef(createAnimatedValue(sheetMaxHeight)).current;
-  const dragAnim = useRef(createAnimatedValue(0)).current;
-  const sheetTranslateY = useMemo(() => Animated.add(sheetAnim, dragAnim), [sheetAnim, dragAnim]);
-  useEffect(() => {
-    if (open) {
-      setRendered(true);
-    }
-  }, [open]);
-  useEffect(() => {
-    if (!rendered) {
-      return;
-    }
-    // A fresh open must start with no residual drag offset.
-    if (open) {
-      setNativeValue(dragAnim, 0);
-    }
-    const anim = open ? Animated.parallel([
-    // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
-    Animated.timing(backdropAnim, {
-      toValue: 1,
-      duration: theme.motion.duration.fast,
-      easing: Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: false
-    }), Animated.spring(sheetAnim, {
-      toValue: 0,
-      damping: theme.motion.spring.snappy.damping,
-      stiffness: theme.motion.spring.snappy.stiffness,
-      mass: theme.motion.spring.snappy.mass,
-      useNativeDriver: true
-    })]) : Animated.parallel([Animated.timing(backdropAnim, {
-      toValue: 0,
-      duration: theme.motion.duration.fast,
-      easing: Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: false
-    }), Animated.timing(sheetAnim, {
-      toValue: sheetMaxHeight,
-      duration: theme.motion.duration.fast,
-      easing: Easing.bezier(...theme.motion.easing.accelerate),
-      useNativeDriver: true
-    })]);
-    anim.start(({
-      finished
-    }) => {
-      if (finished && !open) {
-        setRendered(false);
-      }
-    });
-    return () => anim.stop();
-  }, [open, rendered, backdropAnim, sheetAnim, dragAnim, sheetMaxHeight, theme.motion.duration.fast, theme.motion.easing.standard, theme.motion.easing.accelerate, theme.motion.spring.snappy]);
-
-  // Drag-to-dismiss lives on the handle / title row only, the same as
-  // BottomSheet. A pull on the list (or anywhere else in the body) never moves
-  // or closes the sheet: it used to once the list sat at its top, so an
-  // over-scroll while browsing options closed the picker.
-  const {
-    handleGesture
-  } = useDragToDismiss({
-    drag: dragAnim,
-    travel: sheetMaxHeight,
-    onDismiss: onClose
-  });
-  // Registers the list as a native gesture so a flick that starts on a row
-  // cancels that row's press instead of selecting it (BottomSheet does the same).
-  const listGesture = useMemo(() => Gesture.Native(), []);
-
-  // Keyboard: the search field raises it over the bottom-anchored sheet, and
-  // neither iOS nor Android resizes a translucent Modal for it, so the list
-  // ended up behind the keys. Sit the sheet on the keyboard's top edge and
-  // cap its height to the room left above it. The Modal spans the whole
-  // screen, so the event's screen coordinate is the keyboard's top in host
-  // terms, and it stays right when the reported height leaves out Android's
-  // navigation bar (the same reasoning as BottomSheet's modal mode).
-  const [hostHeight, setHostHeight] = useState(0);
-  const [keyboardOverlap, setKeyboardOverlap] = useState(0);
-  useEffect(() => {
-    if (!rendered) {
-      return;
-    }
-    const showEvt = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvt = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-    const onShow = e => {
-      const host = hostHeight > 0 ? hostHeight : screenHeight;
-      const screenY = e.endCoordinates?.screenY;
-      const keyboardTop = typeof screenY === 'number' && screenY > 0 ? screenY : host - (e.endCoordinates?.height ?? 0);
-      setKeyboardOverlap(Math.max(0, Math.round(host - keyboardTop)));
-    };
-    const onHide = () => setKeyboardOverlap(0);
-    const showSub = Keyboard.addListener(showEvt, onShow);
-    const hideSub = Keyboard.addListener(hideEvt, onHide);
-    return () => {
-      showSub.remove();
-      hideSub.remove();
-      setKeyboardOverlap(0);
-    };
-  }, [rendered, hostHeight, screenHeight]);
-  // The app-level provider can report a top inset of 0 inside the translucent
-  // Modal on Android, so the status bar height is the floor for the top clamp.
-  const topClearance = Math.max(insets.top, StatusBar.currentHeight ?? 0) + theme.spacing.sm;
-  const keyboardUp = keyboardOverlap > 0;
-  const visibleMaxHeight = keyboardUp ? Math.max(0, Math.min(sheetMaxHeight, (hostHeight > 0 ? hostHeight : screenHeight) - keyboardOverlap - topClearance)) : sheetMaxHeight;
-
-  // Stale-search guard: the query must not survive a close/reopen cycle.
-  useEffect(() => {
-    if (!open) {
-      setQuery('');
-    }
-  }, [open]);
-
-  // One flat row list whether or not the caller grouped its options: the
-  // FlatList below is what the drag-to-dismiss and list gestures are wired
-  // to, and Select, InlineSelect, FilePicker and PhoneNumberInput all share
-  // it, so sections flatten into header rows rather than swapping the list.
-  const rows = useMemo(() => {
-    const q = searchable ? query.trim().toLowerCase() : '';
-    const matches = o => q.length === 0 || labelOf(o).toLowerCase().includes(q) || (descriptionOf(o) ?? '').toLowerCase().includes(q);
-    if (!sections) {
-      return options.filter(matches).map(option => ({
-        kind: 'option',
-        option
-      }));
-    }
-    const out = [];
-    sections.forEach((section, index) => {
-      const kept = section.options.filter(matches);
-      if (kept.length === 0) {
-        return;
-      }
-      out.push({
-        kind: 'header',
-        title: section.title
-      });
-      for (const option of kept) {
-        out.push({
-          kind: 'option',
-          option,
-          section: index
-        });
-      }
-    });
-    return out;
-  }, [searchable, query, options, sections, labelOf, descriptionOf]);
-  const handleClose = useCallback(() => {
-    onClose();
-  }, [onClose]);
-
-  // The letter rail: each letter maps to the first row (inside the indexed
-  // range) whose label starts with it. Labels starting with anything else
-  // gather under '#'. With sections only the last group is indexed.
-  const listRef = useRef(null);
-  const letterTargets = useMemo(() => {
-    const targets = new Map();
-    if (!alphabetIndex) {
-      return targets;
-    }
-    let start = 0;
-    if (sections) {
-      for (let i = rows.length - 1; i >= 0; i -= 1) {
-        if (rows[i].kind === 'header') {
-          start = i + 1;
-          break;
-        }
-      }
-    }
-    for (let i = start; i < rows.length; i += 1) {
-      const row = rows[i];
-      if (row.kind !== 'option') {
-        continue;
-      }
-      const first = labelOf(row.option).trim().charAt(0).toUpperCase();
-      const letter = /^[A-Z]$/.test(first) ? first : '#';
-      if (!targets.has(letter)) {
-        targets.set(letter, i);
-      }
-    }
-    return targets;
-  }, [alphabetIndex, rows, sections, labelOf]);
-  const showRail = alphabetIndex && letterTargets.size > 0 && query.trim().length === 0;
-  const railLetters = useMemo(() => [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ', ...(letterTargets.has('#') ? ['#'] : [])], [letterTargets]);
-  const jumpTo = useCallback(letter => {
-    const index = letterTargets.get(letter);
-    if (index === undefined) {
-      return;
-    }
-    listRef.current?.scrollToIndex({
-      index,
-      animated: true,
-      viewPosition: 0
-    });
-  }, [letterTargets]);
-  // Rows are not measured until rendered, so a jump far past the rendered
-  // window cannot land in one go: scroll near it by the average row height,
-  // then retry once the window has caught up.
-  const jumpRetryRef = useRef(null);
-  const cancelJumpRetry = useCallback(() => {
-    if (jumpRetryRef.current !== null) {
-      clearTimeout(jumpRetryRef.current);
-      jumpRetryRef.current = null;
-    }
-  }, []);
-  const handleScrollToIndexFailed = useCallback(info => {
-    listRef.current?.scrollToOffset({
-      offset: info.averageItemLength * info.index,
-      animated: false
-    });
-    cancelJumpRetry();
-    jumpRetryRef.current = setTimeout(() => {
-      jumpRetryRef.current = null;
-      listRef.current?.scrollToIndex({
-        index: info.index,
-        animated: true,
-        viewPosition: 0
-      });
-    }, 50);
-  }, [cancelJumpRetry]);
-  // A retry pending when the sheet closes or unmounts would scroll a list that is gone.
-  useEffect(() => {
-    if (!rendered) {
-      cancelJumpRetry();
-    }
-    return cancelJumpRetry;
-  }, [rendered, cancelJumpRetry]);
-  const renderRow = ({
-    item: row
-  }) => {
-    if (row.kind === 'header') {
-      return /*#__PURE__*/_jsx(View
-      // One accessibility element, so a screen reader announces the group
-      // as "Popular, header" rather than reading its text as a stray label.
-      , {
-        accessible: true,
-        accessibilityRole: "header",
-        style: [styles.sectionHeader, {
-          paddingHorizontal: theme.spacing.lg,
-          paddingTop: theme.spacing.md
-        }],
-        children: renderSectionHeader ? renderSectionHeader(row.title) : /*#__PURE__*/_jsx(Text, {
-          style: [styles.sectionTitle, {
-            color: theme.colors.text.tertiary,
-            fontSize: theme.typography.fontSize.xs,
-            fontWeight: theme.typography.fontWeight.semibold
-          }],
-          children: row.title.toUpperCase()
-        })
-      });
-    }
-    const item = row.option;
-    const itemLabel = labelOf(item);
-    const itemValue = getValue(item);
-    const itemDescription = descriptionOf(item);
-    const itemIcon = iconOf(item);
-    const selected = isSelected(itemValue);
-    const optDisabled = disabledOf(item);
-    const destructive = destructiveOf?.(item) ?? false;
-    return /*#__PURE__*/_jsxs(Pressable, {
-      onPress: () => onSelect(item),
-      disabled: optDisabled,
-      android_ripple: {
-        color: theme.colors.surface.pressed,
-        borderless: false
-      },
-      accessibilityRole: "button",
-      accessibilityLabel: itemLabel,
-      accessibilityState: {
-        selected,
-        disabled: optDisabled
-      },
-      style: ({
-        pressed
-      }) => [styles.optionRow, {
-        backgroundColor: selected ? theme.colors.surface.selected : pressed ? theme.colors.surface.pressed : 'transparent',
-        opacity: optDisabled ? 0.5 : 1,
-        paddingHorizontal: theme.spacing.lg,
-        paddingVertical: theme.spacing.md
-      }, optionStyle, selected ? selectedOptionStyle : null],
-      children: [renderOption ? /*#__PURE__*/_jsx(View, {
-        style: styles.optionTextWrap,
-        children: renderOption(item, {
-          selected,
-          disabled: optDisabled
-        })
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [itemIcon ? /*#__PURE__*/_jsx(View, {
-          style: styles.optionIcon,
-          children: itemIcon
-        }) : null, /*#__PURE__*/_jsxs(View, {
-          style: styles.optionTextWrap,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.optionLabel, {
-              color: destructive ? theme.colors.error : selected ? theme.colors.primary : theme.colors.text.primary,
-              fontSize: theme.typography.fontSize.base,
-              fontWeight: selected ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
-            }, optionTextStyle, selected ? selectedOptionTextStyle : null],
-            numberOfLines: 1,
-            children: itemLabel
-          }), itemDescription ? /*#__PURE__*/_jsx(Text, {
-            style: [styles.optionDescription, {
-              color: theme.colors.text.tertiary,
-              fontSize: theme.typography.fontSize.sm
-            }],
-            numberOfLines: 2,
-            children: itemDescription
-          }) : null]
-        })]
-      }), multi ? /*#__PURE__*/_jsx(View, {
-        style: [styles.checkbox, {
-          borderColor: selected ? theme.colors.primary : theme.colors.border.primary,
-          backgroundColor: selected ? theme.colors.primary : 'transparent'
-        }],
-        children: selected ? /*#__PURE__*/_jsx(View, {
-          style: styles.checkboxTick
-        }) : null
-      }) : selected ? /*#__PURE__*/_jsx(View, {
-        style: [styles.singleSelectedDot, {
-          backgroundColor: theme.colors.primary
-        }]
-      }) : null]
-    });
-  };
-  return /*#__PURE__*/_jsx(Modal, {
-    visible: rendered,
-    transparent: true,
-    animationType: "none",
-    onRequestClose: handleClose,
-    statusBarTranslucent: true,
-    navigationBarTranslucent: true,
-    children: /*#__PURE__*/_jsxs(GestureHandlerRootView
-    // Backdrop wraps the sheet — see Modal.tsx for the Fabric reason.
-    , {
-      collapsable: false,
-      onLayout: e => setHostHeight(e.nativeEvent.layout.height),
-      style: [StyleSheet.absoluteFill, {
-        backgroundColor: theme.colors.background.overlay
-      }],
-      children: [/*#__PURE__*/_jsx(Pressable, {
-        style: StyleSheet.absoluteFill,
-        onPress: handleClose,
-        accessibilityRole: "button",
-        accessibilityLabel: "Close picker"
-      }), /*#__PURE__*/_jsxs(Animated.View, {
-        accessibilityViewIsModal: true,
-        accessibilityLabel: accessibilityLabel ?? title ?? 'Options',
-        style: [styles.sheet, {
-          maxHeight: visibleMaxHeight,
-          bottom: keyboardOverlap,
-          // The keyboard already covers the home indicator / nav bar.
-          paddingBottom: keyboardUp ? 16 : insets.bottom + 16,
-          backgroundColor: theme.colors.background.elevated,
-          borderTopLeftRadius: theme.radius.xl,
-          borderTopRightRadius: theme.radius.xl,
-          ...smoothCorners,
-          transform: [{
-            translateY: sheetTranslateY
-          }],
-          ...theme.shadows.xl
-        }],
-        children: [/*#__PURE__*/_jsx(GestureDetector, {
-          gesture: handleGesture,
-          children: /*#__PURE__*/_jsxs(View, {
-            children: [/*#__PURE__*/_jsx(View, {
-              style: styles.sheetHandleRow,
-              children: /*#__PURE__*/_jsx(View, {
-                style: [styles.sheetHandle, {
-                  backgroundColor: theme.components.select?.handleColor ?? theme.components.bottomSheet?.handleColor ?? theme.colors.border.primary
-                }]
-              })
-            }), title ? /*#__PURE__*/_jsx(Text, {
-              style: [styles.sheetTitle, {
-                color: theme.colors.text.primary,
-                fontSize: theme.typography.fontSize.lg,
-                fontWeight: theme.typography.fontWeight.semibold,
-                paddingHorizontal: theme.spacing.lg,
-                marginBottom: theme.spacing.sm
-              }],
-              children: title
-            }) : null]
-          })
-        }), searchable ? /*#__PURE__*/_jsx(View, {
-          style: [styles.searchWrap, {
-            marginHorizontal: theme.spacing.lg,
-            marginBottom: theme.spacing.sm
-          }],
-          children: /*#__PURE__*/_jsxs(View, {
-            style: [styles.searchBox, {
-              backgroundColor: theme.colors.background.secondary,
-              borderColor: theme.colors.border.primary,
-              borderRadius: theme.radius.md,
-              ...smoothCorners,
-              paddingHorizontal: theme.spacing.md,
-              gap: theme.spacing.sm
-            }],
-            children: [(theme.icons?.search ?? defaultIcons.search)({
-              size: SEARCH_ICON_SIZE,
-              color: theme.colors.text.tertiary
-            }), /*#__PURE__*/_jsx(TextInput, {
-              value: query,
-              onChangeText: setQuery,
-              placeholder: searchPlaceholder,
-              placeholderTextColor: theme.colors.text.tertiary,
-              selectionColor: searchSelectionColor ?? theme.colors.border.focus,
-              accessibilityLabel: "Search options",
-              style: [styles.searchInput, {
-                color: theme.colors.text.primary,
-                fontSize: theme.typography.fontSize.base,
-                paddingVertical: theme.spacing.sm
-              }]
-            }), query.length > 0 ? /*#__PURE__*/_jsx(Pressable, {
-              onPress: () => setQuery(''),
-              hitSlop: 8,
-              accessibilityRole: "button",
-              accessibilityLabel: "Clear search",
-              children: (theme.icons?.close ?? defaultIcons.close)({
-                size: SEARCH_ICON_SIZE,
-                color: theme.colors.text.secondary
-              })
-            }) : null]
-          })
-        }) : null, /*#__PURE__*/_jsxs(View, {
-          style: [styles.listWrap, showRail ? styles.listRow : null],
-          children: [/*#__PURE__*/_jsx(GestureDetector, {
-            gesture: listGesture,
-            children: /*#__PURE__*/_jsx(FlatList, {
-              ref: listRef,
-              data: rows,
-              keyExtractor: row => row.kind === 'header' ? `h:${row.title}` : `o:${row.section ?? ''}:${String(getValue(row.option))}`,
-              renderItem: renderRow,
-              onScrollToIndexFailed: handleScrollToIndexFailed,
-              overScrollMode: "never",
-              bounces: false,
-              keyboardShouldPersistTaps: "handled",
-              showsVerticalScrollIndicator: !showRail,
-              style: showRail ? styles.listBesideRail : null,
-              ListEmptyComponent: /*#__PURE__*/_jsx(Text, {
-                style: [styles.empty, {
-                  color: theme.colors.text.tertiary,
-                  fontSize: theme.typography.fontSize.sm,
-                  paddingVertical: theme.spacing.xl
-                }],
-                children: emptyText
-              })
-            })
-          }), showRail ? /*#__PURE__*/_jsx(View, {
-            style: [styles.rail, {
-              paddingRight: theme.spacing.xs
-            }],
-            accessibilityRole: "list",
-            accessibilityLabel: "Jump to letter",
-            testID: "option-sheet-alphabet",
-            children: railLetters.map(letter => {
-              const enabled = letterTargets.has(letter);
-              return /*#__PURE__*/_jsx(Pressable, {
-                onPress: () => jumpTo(letter),
-                disabled: !enabled,
-                hitSlop: {
-                  left: 8,
-                  right: 8
-                },
-                accessibilityRole: "button",
-                accessibilityLabel: `Jump to ${letter}`,
-                accessibilityState: {
-                  disabled: !enabled
-                },
-                style: styles.railLetter,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: [styles.railLetterText, {
-                    color: enabled ? theme.colors.primary : theme.colors.text.tertiary,
-                    fontSize: theme.typography.fontSize.xs,
-                    fontWeight: theme.typography.fontWeight.semibold,
-                    opacity: enabled ? 1 : 0.45
-                  }],
-                  children: letter
-                })
-              }, letter);
-            })
-          }) : null]
-        }), multi ? /*#__PURE__*/_jsx(View, {
-          style: [styles.sheetFooter, {
-            borderTopColor: theme.colors.border.secondary,
-            paddingHorizontal: theme.spacing.lg,
-            paddingVertical: theme.spacing.md
-          }],
-          children: /*#__PURE__*/_jsx(Pressable, {
-            onPress: handleClose,
-            accessibilityRole: "button",
-            accessibilityLabel: "Done",
-            style: ({
-              pressed
-            }) => [styles.doneButton, {
-              backgroundColor: pressed ? theme.colors.primaryPressed : theme.colors.primary,
-              borderRadius: theme.radius.md,
-              ...smoothCorners,
-              paddingVertical: theme.spacing.sm,
-              paddingHorizontal: theme.spacing.lg
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: {
-                color: theme.colors.text.inverse,
-                fontSize: theme.typography.fontSize.base,
-                fontWeight: theme.typography.fontWeight.semibold
-              },
-              children: "Done"
-            })
-          })
-        }) : null]
-      })]
-    })
-  });
-};
-OptionSheet.displayName = 'OptionSheet';
-const buildStyles = theme => StyleSheet.create({
-  sheet: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    paddingBottom: 16,
-    overflow: 'hidden'
-  },
-  sheetHandleRow: {
-    alignItems: 'center',
-    paddingTop: 10,
-    paddingBottom: 8
-  },
-  sheetHandle: {
-    width: 36,
-    height: 4,
-    borderRadius: 2,
-    ...smoothCorners
-  },
-  sheetTitle: {
-    includeFontPadding: false
-  },
-  searchWrap: {
-    width: 'auto'
-  },
-  searchBox: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1
-  },
-  searchInput: {
-    flex: 1,
-    includeFontPadding: false
-  },
-  optionRow: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  sectionHeader: {
-    paddingBottom: 4
-  },
-  listWrap: {
-    flexShrink: 1
-  },
-  // Only applied while the rail shows.
-  listRow: {
-    flexDirection: 'row'
-  },
-  listBesideRail: {
-    flex: 1
-  },
-  rail: {
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    alignSelf: 'stretch',
-    paddingVertical: 4
-  },
-  railLetter: {
-    paddingHorizontal: 4,
-    minHeight: 14,
-    justifyContent: 'center'
-  },
-  railLetterText: {
-    includeFontPadding: false,
-    lineHeight: 14
-  },
-  sectionTitle: {
-    includeFontPadding: false,
-    letterSpacing: 0.6
-  },
-  optionIcon: {
-    marginRight: 12
-  },
-  optionTextWrap: {
-    flex: 1
-  },
-  optionLabel: {
-    includeFontPadding: false
-  },
-  optionDescription: {
-    includeFontPadding: false,
-    marginTop: 2
-  },
-  checkbox: {
-    width: 22,
-    height: 22,
-    borderRadius: 6,
-    ...smoothCorners,
-    borderWidth: 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: 12
-  },
-  checkboxTick: {
-    width: 10,
-    height: 6,
-    borderLeftWidth: 2,
-    borderBottomWidth: 2,
-    borderColor: theme.colors.onPrimary,
-    transform: [{
-      rotate: '-45deg'
-    }, {
-      translateY: -1
-    }]
-  },
-  singleSelectedDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    ...smoothCorners,
-    marginLeft: 12
-  },
-  empty: {
-    textAlign: 'center'
-  },
-  sheetFooter: {
-    borderTopWidth: StyleSheet.hairlineWidth,
-    alignItems: 'flex-end'
-  },
-  doneButton: {
-    alignSelf: 'flex-end'
-  }
-});
-export default OptionSheet;
-//# sourceMappingURL=OptionSheet.js.map
+import e,{useCallback as t,useEffect as o,useMemo as i,useRef as r,useState as n}from"react";import{Animated as s,Dimensions as l,Easing as a,FlatList as c,Modal as d,Platform as p,Pressable as h,StatusBar as g,StyleSheet as m,Text as u,TextInput as y,View as b}from"react-native";import{Gesture as f,GestureDetector as x,GestureHandlerRootView as S}from"react-native-gesture-handler";import{useKeyboardState as T}from"react-native-keyboard-controller";import{useSafeAreaInsets as C}from"react-native-safe-area-context";import{useDragToDismiss as k}from"../../hooks/useDragToDismiss.js";import{createAnimatedValue as v,setNativeValue as z,useTheme as w}from"../../theme/index.js";import{smoothCorners as L}from"../../utils/corners.js";import{defaultIcons as R}from"../AppIcon/defaultIcons.js";import{ToastHost as W}from"../Toast/ToastProvider.js";import{jsx as I,jsxs as D,Fragment as H}from"react/jsx-runtime";export const OptionSheet=e=>{const{open:P,onClose:O,onAfterClose:B,title:V,options:F,sections:j,renderSectionHeader:M,renderOption:N,alphabetIndex:A=!1,searchPlaceholder:E="Search…",emptyText:$="No options",labelOf:J,getValue:U,disabledOf:Y,destructiveOf:G,descriptionOf:Z,iconOf:q,isSelected:K,onSelect:Q,multi:X=!1,searchable:_=!1,searchSelectionColor:ee,accessibilityLabel:te,optionStyle:oe,selectedOptionStyle:ie,optionTextStyle:re,selectedOptionTextStyle:ne,testID:se}=e,le=w(),ae=C(),ce=i(()=>buildStyles(le),[le]),[de,pe]=n(""),he=l.get("window").height,ge=Math.round(.7*he),[me,ue]=n(P),ye=r(v(0)).current,be=r(v(ge)).current,fe=r(v(0)).current,xe=i(()=>s.add(be,fe),[be,fe]);o(()=>{P&&ue(!0)},[P]);const Se=r(B);Se.current=B;const Te=r(me);o(()=>{Te.current&&!me&&"ios"!==p.OS&&Se.current?.(),Te.current=me},[me]),o(()=>{if(!me)return;P&&z(fe,0);const e=P?s.parallel([s.timing(ye,{toValue:1,duration:le.motion.duration.fast,easing:a.bezier(...le.motion.easing.standard),useNativeDriver:!1}),s.spring(be,{toValue:0,damping:le.motion.spring.snappy.damping,stiffness:le.motion.spring.snappy.stiffness,mass:le.motion.spring.snappy.mass,useNativeDriver:!0})]):s.parallel([s.timing(ye,{toValue:0,duration:le.motion.duration.fast,easing:a.bezier(...le.motion.easing.standard),useNativeDriver:!1}),s.timing(be,{toValue:ge,duration:le.motion.duration.fast,easing:a.bezier(...le.motion.easing.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!P&&ue(!1)}),()=>e.stop()},[P,me,ye,be,fe,ge,le.motion.duration.fast,le.motion.easing.standard,le.motion.easing.accelerate,le.motion.spring.snappy]);const{handleGesture:Ce}=k({drag:fe,travel:ge,onDismiss:O}),ke=i(()=>f.Native(),[]),[ve,ze]=n(0),we=T(e=>e.height),Le=me?Math.max(0,Math.round(we)):0,Re=Math.max(ae.top,g.currentHeight??0)+le.spacing.sm,We=Le>0,Ie=We?Math.max(0,Math.min(ge,(ve>0?ve:he)-Le-Re)):ge;o(()=>{P||pe("")},[P]);const De=i(()=>{const e=_?de.trim().toLowerCase():"",matches=t=>0===e.length||J(t).toLowerCase().includes(e)||(Z(t)??"").toLowerCase().includes(e);if(!j)return F.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return j.forEach((e,o)=>{const i=e.options.filter(matches);if(0!==i.length){t.push({kind:"header",title:e.title});for(const e of i)t.push({kind:"option",option:e,section:o})}}),t},[_,de,F,j,J,Z]),He=t(()=>{O()},[O]),Pe=r(null),Oe=i(()=>{const e=new Map;if(!A)return e;let t=0;if(j)for(let e=De.length-1;e>=0;e-=1)if("header"===De[e].kind){t=e+1;break}for(let o=t;o<De.length;o+=1){const t=De[o];if("option"!==t.kind)continue;const i=J(t.option).trim().charAt(0).toUpperCase(),r=/^[A-Z]$/.test(i)?i:"#";e.has(r)||e.set(r,o)}return e},[A,De,j,J]),Be=A&&Oe.size>0&&0===de.trim().length,Ve=i(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...Oe.has("#")?["#"]:[]],[Oe]),Fe=t(e=>{const t=Oe.get(e);void 0!==t&&Pe.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[Oe]),je=r(null),Me=t(()=>{null!==je.current&&(clearTimeout(je.current),je.current=null)},[]),Ne=t(e=>{Pe.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),Me(),je.current=setTimeout(()=>{je.current=null,Pe.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[Me]);o(()=>(me||Me(),Me),[me,Me]);return I(d,{visible:me,transparent:!0,animationType:"none",onRequestClose:He,onDismiss:()=>Se.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:D(S,{collapsable:!1,onLayout:e=>ze(e.nativeEvent.layout.height),style:[m.absoluteFill,{backgroundColor:le.colors.background.overlay}],children:[I(h,{style:m.absoluteFill,onPress:He,accessibilityRole:"button",accessibilityLabel:"Close picker"}),D(s.View,{testID:se,accessibilityViewIsModal:!0,accessibilityLabel:te??V??"Options",style:[ce.sheet,{maxHeight:Ie,bottom:Le,paddingBottom:We?16:ae.bottom+16,backgroundColor:le.colors.background.elevated,borderTopLeftRadius:le.radius.xl,borderTopRightRadius:le.radius.xl,...L,transform:[{translateY:xe}],...le.shadows.xl}],children:[I(x,{gesture:Ce,children:D(b,{children:[I(b,{style:ce.sheetHandleRow,children:I(b,{style:[ce.sheetHandle,{backgroundColor:le.components.select?.handleColor??le.components.bottomSheet?.handleColor??le.colors.border.primary}]})}),V?I(u,{style:[ce.sheetTitle,{color:le.colors.text.primary,fontSize:le.typography.fontSize.lg,fontWeight:le.typography.fontWeight.semibold,paddingHorizontal:le.spacing.lg,marginBottom:le.spacing.sm}],children:V}):null]})}),_?I(b,{style:[ce.searchWrap,{marginHorizontal:le.spacing.lg,marginBottom:le.spacing.sm}],children:D(b,{style:[ce.searchBox,{backgroundColor:le.colors.background.secondary,borderColor:le.colors.border.primary,borderRadius:le.radius.md,...L,paddingHorizontal:le.spacing.md,gap:le.spacing.sm}],children:[(le.icons?.search??R.search)({size:18,color:le.colors.text.tertiary}),I(y,{value:de,onChangeText:pe,placeholder:E,placeholderTextColor:le.colors.text.tertiary,selectionColor:ee??le.colors.border.focus,accessibilityLabel:"Search options",style:[ce.searchInput,{color:le.colors.text.primary,fontSize:le.typography.fontSize.base,paddingVertical:le.spacing.sm}]}),de.length>0?I(h,{onPress:()=>pe(""),hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(le.icons?.close??R.close)({size:18,color:le.colors.text.secondary})}):null]})}):null,D(b,{style:[ce.listWrap,Be?ce.listRow:null],children:[I(x,{gesture:ke,children:I(c,{ref:Pe,data:De,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(U(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return I(b,{accessible:!0,accessibilityRole:"header",style:[ce.sectionHeader,{paddingHorizontal:le.spacing.lg,paddingTop:le.spacing.md}],children:M?M(e.title):I(u,{style:[ce.sectionTitle,{color:le.colors.text.tertiary,fontSize:le.typography.fontSize.xs,fontWeight:le.typography.fontWeight.semibold}],children:e.title.toUpperCase()})});const t=e.option,o=J(t),i=U(t),r=Z(t),n=q(t),s=K(i),l=Y(t),a=G?.(t)??!1;return D(h,{onPress:()=>Q(t),disabled:l,android_ripple:{color:le.colors.surface.pressed,borderless:!1},accessibilityRole:"button",accessibilityLabel:o,accessibilityState:{selected:s,disabled:l},style:({pressed:e})=>[ce.optionRow,{backgroundColor:s?le.colors.surface.selected:e?le.colors.surface.pressed:"transparent",opacity:l?.5:1,paddingHorizontal:le.spacing.lg,paddingVertical:le.spacing.md},oe,s?ie:null],children:[N?I(b,{style:ce.optionTextWrap,children:N(t,{selected:s,disabled:l})}):D(H,{children:[n?I(b,{style:ce.optionIcon,children:n}):null,D(b,{style:ce.optionTextWrap,children:[I(u,{style:[ce.optionLabel,{color:a?le.colors.error:s?le.colors.primary:le.colors.text.primary,fontSize:le.typography.fontSize.base,fontWeight:s?le.typography.fontWeight.semibold:le.typography.fontWeight.medium},re,s?ne:null],numberOfLines:1,children:o}),r?I(u,{style:[ce.optionDescription,{color:le.colors.text.tertiary,fontSize:le.typography.fontSize.sm}],numberOfLines:2,children:r}):null]})]}),X?I(b,{style:[ce.checkbox,{borderColor:s?le.colors.primary:le.colors.border.primary,backgroundColor:s?le.colors.primary:"transparent"}],children:s?I(b,{style:ce.checkboxTick}):null}):s?I(b,{style:[ce.singleSelectedDot,{backgroundColor:le.colors.primary}]}):null]})},onScrollToIndexFailed:Ne,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!Be,style:Be?ce.listBesideRail:null,ListEmptyComponent:I(u,{style:[ce.empty,{color:le.colors.text.tertiary,fontSize:le.typography.fontSize.sm,paddingVertical:le.spacing.xl}],children:$})})}),Be?I(b,{style:[ce.rail,{paddingRight:le.spacing.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:Ve.map(e=>{const t=Oe.has(e);return I(h,{onPress:()=>Fe(e),disabled:!t,hitSlop:{left:8,right:8},accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},style:ce.railLetter,children:I(u,{style:[ce.railLetterText,{color:t?le.colors.primary:le.colors.text.tertiary,fontSize:le.typography.fontSize.xs,fontWeight:le.typography.fontWeight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),X?I(b,{style:[ce.sheetFooter,{borderTopColor:le.colors.border.secondary,paddingHorizontal:le.spacing.lg,paddingVertical:le.spacing.md}],children:I(h,{onPress:He,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[ce.doneButton,{backgroundColor:e?le.colors.primaryPressed:le.colors.primary,borderRadius:le.radius.md,...L,paddingVertical:le.spacing.sm,paddingHorizontal:le.spacing.lg}],children:I(u,{style:{color:le.colors.onPrimary,fontSize:le.typography.fontSize.base,fontWeight:le.typography.fontWeight.semibold},children:"Done"})})}):null]}),I(W,{})]})})};OptionSheet.displayName="OptionSheet";const buildStyles=e=>m.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:16,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:10,paddingBottom:8},sheetHandle:{width:36,height:4,borderRadius:2,...L},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:4},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:4},railLetter:{paddingHorizontal:4,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:12},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:2},checkbox:{width:22,height:22,borderRadius:6,...L,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:12},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors.onPrimary,transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:4,...L,marginLeft:12},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:m.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});export default OptionSheet;