@webority/mobile-ui 0.0.39 → 0.1.0

package/lib/commonjs/components/OptionSheet/OptionSheet.js

@@ -1,718 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.OptionSheet = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _reactNativeGestureHandler = require("react-native-gesture-handler");
-var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-var _useDragToDismiss = require("../../hooks/useDragToDismiss.js");
-var _index = require("../../theme/index.js");
-var _corners = require("../../utils/corners.js");
-var _defaultIcons = require("../AppIcon/defaultIcons.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * 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.
- */
-
-/** Magnifier and clear glyph size in the search box, matching SearchBar's md size. */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. */
-
-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 = (0, _index.useTheme)();
-  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const [query, setQuery] = (0, _react.useState)('');
-  const screenHeight = _reactNative.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] = (0, _react.useState)(open);
-  const backdropAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  const sheetAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(sheetMaxHeight)).current;
-  const dragAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  const sheetTranslateY = (0, _react.useMemo)(() => _reactNative.Animated.add(sheetAnim, dragAnim), [sheetAnim, dragAnim]);
-  (0, _react.useEffect)(() => {
-    if (open) {
-      setRendered(true);
-    }
-  }, [open]);
-  (0, _react.useEffect)(() => {
-    if (!rendered) {
-      return;
-    }
-    // A fresh open must start with no residual drag offset.
-    if (open) {
-      (0, _index.setNativeValue)(dragAnim, 0);
-    }
-    const anim = open ? _reactNative.Animated.parallel([
-    // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
-    _reactNative.Animated.timing(backdropAnim, {
-      toValue: 1,
-      duration: theme.motion.duration.fast,
-      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: false
-    }), _reactNative.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
-    })]) : _reactNative.Animated.parallel([_reactNative.Animated.timing(backdropAnim, {
-      toValue: 0,
-      duration: theme.motion.duration.fast,
-      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-      useNativeDriver: false
-    }), _reactNative.Animated.timing(sheetAnim, {
-      toValue: sheetMaxHeight,
-      duration: theme.motion.duration.fast,
-      easing: _reactNative.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
-  } = (0, _useDragToDismiss.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 = (0, _react.useMemo)(() => _reactNativeGestureHandler.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] = (0, _react.useState)(0);
-  const [keyboardOverlap, setKeyboardOverlap] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
-    if (!rendered) {
-      return;
-    }
-    const showEvt = _reactNative.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvt = _reactNative.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 = _reactNative.Keyboard.addListener(showEvt, onShow);
-    const hideSub = _reactNative.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, _reactNative.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.
-  (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.useRef)(null);
-  const letterTargets = (0, _react.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 = (0, _react.useMemo)(() => [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ', ...(letterTargets.has('#') ? ['#'] : [])], [letterTargets]);
-  const jumpTo = (0, _react.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 = (0, _react.useRef)(null);
-  const cancelJumpRetry = (0, _react.useCallback)(() => {
-    if (jumpRetryRef.current !== null) {
-      clearTimeout(jumpRetryRef.current);
-      jumpRetryRef.current = null;
-    }
-  }, []);
-  const handleScrollToIndexFailed = (0, _react.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.
-  (0, _react.useEffect)(() => {
-    if (!rendered) {
-      cancelJumpRetry();
-    }
-    return cancelJumpRetry;
-  }, [rendered, cancelJumpRetry]);
-  const renderRow = ({
-    item: row
-  }) => {
-    if (row.kind === 'header') {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.optionTextWrap,
-        children: renderOption(item, {
-          selected,
-          disabled: optDisabled
-        })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [itemIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.optionIcon,
-          children: itemIcon
-        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.optionTextWrap,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.optionDescription, {
-              color: theme.colors.text.tertiary,
-              fontSize: theme.typography.fontSize.sm
-            }],
-            numberOfLines: 2,
-            children: itemDescription
-          }) : null]
-        })]
-      }), multi ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.checkbox, {
-          borderColor: selected ? theme.colors.primary : theme.colors.border.primary,
-          backgroundColor: selected ? theme.colors.primary : 'transparent'
-        }],
-        children: selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.checkboxTick
-        }) : null
-      }) : selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.singleSelectedDot, {
-          backgroundColor: theme.colors.primary
-        }]
-      }) : null]
-    });
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
-    visible: rendered,
-    transparent: true,
-    animationType: "none",
-    onRequestClose: handleClose,
-    statusBarTranslucent: true,
-    navigationBarTranslucent: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView
-    // Backdrop wraps the sheet — see Modal.tsx for the Fabric reason.
-    , {
-      collapsable: false,
-      onLayout: e => setHostHeight(e.nativeEvent.layout.height),
-      style: [_reactNative.StyleSheet.absoluteFill, {
-        backgroundColor: theme.colors.background.overlay
-      }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        style: _reactNative.StyleSheet.absoluteFill,
-        onPress: handleClose,
-        accessibilityRole: "button",
-        accessibilityLabel: "Close picker"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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,
-          ..._corners.smoothCorners,
-          transform: [{
-            translateY: sheetTranslateY
-          }],
-          ...theme.shadows.xl
-        }],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
-          gesture: handleGesture,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: styles.sheetHandleRow,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: [styles.sheetHandle, {
-                  backgroundColor: theme.components.select?.handleColor ?? theme.components.bottomSheet?.handleColor ?? theme.colors.border.primary
-                }]
-              })
-            }), title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.searchWrap, {
-            marginHorizontal: theme.spacing.lg,
-            marginBottom: theme.spacing.sm
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: [styles.searchBox, {
-              backgroundColor: theme.colors.background.secondary,
-              borderColor: theme.colors.border.primary,
-              borderRadius: theme.radius.md,
-              ..._corners.smoothCorners,
-              paddingHorizontal: theme.spacing.md,
-              gap: theme.spacing.sm
-            }],
-            children: [(theme.icons?.search ?? _defaultIcons.defaultIcons.search)({
-              size: SEARCH_ICON_SIZE,
-              color: theme.colors.text.tertiary
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-              onPress: () => setQuery(''),
-              hitSlop: 8,
-              accessibilityRole: "button",
-              accessibilityLabel: "Clear search",
-              children: (theme.icons?.close ?? _defaultIcons.defaultIcons.close)({
-                size: SEARCH_ICON_SIZE,
-                color: theme.colors.text.secondary
-              })
-            }) : null]
-          })
-        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.listWrap, showRail ? styles.listRow : null],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
-            gesture: listGesture,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: [styles.empty, {
-                  color: theme.colors.text.tertiary,
-                  fontSize: theme.typography.fontSize.sm,
-                  paddingVertical: theme.spacing.xl
-                }],
-                children: emptyText
-              })
-            })
-          }), showRail ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.sheetFooter, {
-            borderTopColor: theme.colors.border.secondary,
-            paddingHorizontal: theme.spacing.lg,
-            paddingVertical: theme.spacing.md
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-            onPress: handleClose,
-            accessibilityRole: "button",
-            accessibilityLabel: "Done",
-            style: ({
-              pressed
-            }) => [styles.doneButton, {
-              backgroundColor: pressed ? theme.colors.primaryPressed : theme.colors.primary,
-              borderRadius: theme.radius.md,
-              ..._corners.smoothCorners,
-              paddingVertical: theme.spacing.sm,
-              paddingHorizontal: theme.spacing.lg
-            }],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: {
-                color: theme.colors.text.inverse,
-                fontSize: theme.typography.fontSize.base,
-                fontWeight: theme.typography.fontWeight.semibold
-              },
-              children: "Done"
-            })
-          })
-        }) : null]
-      })]
-    })
-  });
-};
-exports.OptionSheet = OptionSheet;
-OptionSheet.displayName = 'OptionSheet';
-const buildStyles = theme => _reactNative.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,
-    ..._corners.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,
-    ..._corners.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,
-    ..._corners.smoothCorners,
-    marginLeft: 12
-  },
-  empty: {
-    textAlign: 'center'
-  },
-  sheetFooter: {
-    borderTopWidth: _reactNative.StyleSheet.hairlineWidth,
-    alignItems: 'flex-end'
-  },
-  doneButton: {
-    alignSelf: 'flex-end'
-  }
-});
-var _default = exports.default = OptionSheet;
-//# sourceMappingURL=OptionSheet.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.OptionSheet=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_useDragToDismiss=require("../../hooks/useDragToDismiss.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,a,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(o=t?i:r){if(o.has(e))return o.get(e);o.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?o(s,t,a):s[t]=e[t]);return s})(e,t)}const SEARCH_ICON_SIZE=18,OptionSheet=e=>{const{open:t,onClose:r,onAfterClose:i,title:o,options:a,sections:s,renderSectionHeader:n,renderOption:l,alphabetIndex:c=!1,searchPlaceholder:d="Search…",emptyText:u="No options",labelOf:p,getValue:m,disabledOf:h,destructiveOf:g,descriptionOf:_,iconOf:x,isSelected:y,onSelect:f,multi:b=!1,searchable:v=!1,searchSelectionColor:j,accessibilityLabel:R,optionStyle:S,selectedOptionStyle:N,optionTextStyle:T,selectedOptionTextStyle:C,testID:w}=e,k=(0,_index.useTheme)(),V=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),I=(0,_react.useMemo)(()=>buildStyles(k),[k]),[P,D]=(0,_react.useState)(""),W=_reactNative.Dimensions.get("window").height,z=Math.round(.7*W),[L,H]=(0,_react.useState)(t),O=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,M=(0,_react.useRef)((0,_index.createAnimatedValue)(z)).current,A=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,B=(0,_react.useMemo)(()=>_reactNative.Animated.add(M,A),[M,A]);(0,_react.useEffect)(()=>{t&&H(!0)},[t]);const q=(0,_react.useRef)(i);q.current=i;const E=(0,_react.useRef)(L);(0,_react.useEffect)(()=>{E.current&&!L&&"ios"!==_reactNative.Platform.OS&&q.current?.(),E.current=L},[L]),(0,_react.useEffect)(()=>{if(!L)return;t&&(0,_index.setNativeValue)(A,0);const e=t?_reactNative.Animated.parallel([_reactNative.Animated.timing(O,{toValue:1,duration:k.motion.duration.fast,easing:_reactNative.Easing.bezier(...k.motion.easing.standard),useNativeDriver:!1}),_reactNative.Animated.spring(M,{toValue:0,damping:k.motion.spring.snappy.damping,stiffness:k.motion.spring.snappy.stiffness,mass:k.motion.spring.snappy.mass,useNativeDriver:!0})]):_reactNative.Animated.parallel([_reactNative.Animated.timing(O,{toValue:0,duration:k.motion.duration.fast,easing:_reactNative.Easing.bezier(...k.motion.easing.standard),useNativeDriver:!1}),_reactNative.Animated.timing(M,{toValue:z,duration:k.motion.duration.fast,easing:_reactNative.Easing.bezier(...k.motion.easing.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&H(!1)}),()=>e.stop()},[t,L,O,M,A,z,k.motion.duration.fast,k.motion.easing.standard,k.motion.easing.accelerate,k.motion.spring.snappy]);const{handleGesture:F}=(0,_useDragToDismiss.useDragToDismiss)({drag:A,travel:z,onDismiss:r}),G=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Native(),[]),[$,K]=(0,_react.useState)(0),J=(0,_reactNativeKeyboardController.useKeyboardState)(e=>e.height),U=L?Math.max(0,Math.round(J)):0,Y=Math.max(V.top,_reactNative.StatusBar.currentHeight??0)+k.spacing.sm,Z=U>0,Q=Z?Math.max(0,Math.min(z,($>0?$:W)-U-Y)):z;(0,_react.useEffect)(()=>{t||D("")},[t]);const X=(0,_react.useMemo)(()=>{const e=v?P.trim().toLowerCase():"",matches=t=>0===e.length||p(t).toLowerCase().includes(e)||(_(t)??"").toLowerCase().includes(e);if(!s)return a.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return s.forEach((e,r)=>{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:r})}}),t},[v,P,a,s,p,_]),ee=(0,_react.useCallback)(()=>{r()},[r]),te=(0,_react.useRef)(null),re=(0,_react.useMemo)(()=>{const e=new Map;if(!c)return e;let t=0;if(s)for(let e=X.length-1;e>=0;e-=1)if("header"===X[e].kind){t=e+1;break}for(let r=t;r<X.length;r+=1){const t=X[r];if("option"!==t.kind)continue;const i=p(t.option).trim().charAt(0).toUpperCase(),o=/^[A-Z]$/.test(i)?i:"#";e.has(o)||e.set(o,r)}return e},[c,X,s,p]),ie=c&&re.size>0&&0===P.trim().length,oe=(0,_react.useMemo)(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...re.has("#")?["#"]:[]],[re]),ae=(0,_react.useCallback)(e=>{const t=re.get(e);void 0!==t&&te.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[re]),se=(0,_react.useRef)(null),ne=(0,_react.useCallback)(()=>{null!==se.current&&(clearTimeout(se.current),se.current=null)},[]),le=(0,_react.useCallback)(e=>{te.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),ne(),se.current=setTimeout(()=>{se.current=null,te.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[ne]);(0,_react.useEffect)(()=>(L||ne(),ne),[L,ne]);return(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:L,transparent:!0,animationType:"none",onRequestClose:ee,onDismiss:()=>q.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:(0,_jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView,{collapsable:!1,onLayout:e=>K(e.nativeEvent.layout.height),style:[_reactNative.StyleSheet.absoluteFill,{backgroundColor:k.colors.background.overlay}],children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:ee,accessibilityRole:"button",accessibilityLabel:"Close picker"}),(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{testID:w,accessibilityViewIsModal:!0,accessibilityLabel:R??o??"Options",style:[I.sheet,{maxHeight:Q,bottom:U,paddingBottom:Z?16:V.bottom+16,backgroundColor:k.colors.background.elevated,borderTopLeftRadius:k.radius.xl,borderTopRightRadius:k.radius.xl,..._corners.smoothCorners,transform:[{translateY:B}],...k.shadows.xl}],children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:F,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:I.sheetHandleRow,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[I.sheetHandle,{backgroundColor:k.components.select?.handleColor??k.components.bottomSheet?.handleColor??k.colors.border.primary}]})}),o?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[I.sheetTitle,{color:k.colors.text.primary,fontSize:k.typography.fontSize.lg,fontWeight:k.typography.fontWeight.semibold,paddingHorizontal:k.spacing.lg,marginBottom:k.spacing.sm}],children:o}):null]})}),v?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[I.searchWrap,{marginHorizontal:k.spacing.lg,marginBottom:k.spacing.sm}],children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[I.searchBox,{backgroundColor:k.colors.background.secondary,borderColor:k.colors.border.primary,borderRadius:k.radius.md,..._corners.smoothCorners,paddingHorizontal:k.spacing.md,gap:k.spacing.sm}],children:[(k.icons?.search??_defaultIcons.defaultIcons.search)({size:18,color:k.colors.text.tertiary}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{value:P,onChangeText:D,placeholder:d,placeholderTextColor:k.colors.text.tertiary,selectionColor:j??k.colors.border.focus,accessibilityLabel:"Search options",style:[I.searchInput,{color:k.colors.text.primary,fontSize:k.typography.fontSize.base,paddingVertical:k.spacing.sm}]}),P.length>0?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>D(""),hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(k.icons?.close??_defaultIcons.defaultIcons.close)({size:18,color:k.colors.text.secondary})}):null]})}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[I.listWrap,ie?I.listRow:null],children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:G,children:(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:te,data:X,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(m(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return(0,_jsxRuntime.jsx)(_reactNative.View,{accessible:!0,accessibilityRole:"header",style:[I.sectionHeader,{paddingHorizontal:k.spacing.lg,paddingTop:k.spacing.md}],children:n?n(e.title):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[I.sectionTitle,{color:k.colors.text.tertiary,fontSize:k.typography.fontSize.xs,fontWeight:k.typography.fontWeight.semibold}],children:e.title.toUpperCase()})});const t=e.option,r=p(t),i=m(t),o=_(t),a=x(t),s=y(i),c=h(t),d=g?.(t)??!1;return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>f(t),disabled:c,android_ripple:{color:k.colors.surface.pressed,borderless:!1},accessibilityRole:"button",accessibilityLabel:r,accessibilityState:{selected:s,disabled:c},style:({pressed:e})=>[I.optionRow,{backgroundColor:s?k.colors.surface.selected:e?k.colors.surface.pressed:"transparent",opacity:c?.5:1,paddingHorizontal:k.spacing.lg,paddingVertical:k.spacing.md},S,s?N:null],children:[l?(0,_jsxRuntime.jsx)(_reactNative.View,{style:I.optionTextWrap,children:l(t,{selected:s,disabled:c})}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[a?(0,_jsxRuntime.jsx)(_reactNative.View,{style:I.optionIcon,children:a}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:I.optionTextWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[I.optionLabel,{color:d?k.colors.error:s?k.colors.primary:k.colors.text.primary,fontSize:k.typography.fontSize.base,fontWeight:s?k.typography.fontWeight.semibold:k.typography.fontWeight.medium},T,s?C:null],numberOfLines:1,children:r}),o?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[I.optionDescription,{color:k.colors.text.tertiary,fontSize:k.typography.fontSize.sm}],numberOfLines:2,children:o}):null]})]}),b?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[I.checkbox,{borderColor:s?k.colors.primary:k.colors.border.primary,backgroundColor:s?k.colors.primary:"transparent"}],children:s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:I.checkboxTick}):null}):s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[I.singleSelectedDot,{backgroundColor:k.colors.primary}]}):null]})},onScrollToIndexFailed:le,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!ie,style:ie?I.listBesideRail:null,ListEmptyComponent:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[I.empty,{color:k.colors.text.tertiary,fontSize:k.typography.fontSize.sm,paddingVertical:k.spacing.xl}],children:u})})}),ie?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[I.rail,{paddingRight:k.spacing.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:oe.map(e=>{const t=re.has(e);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>ae(e),disabled:!t,hitSlop:{left:8,right:8},accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},style:I.railLetter,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[I.railLetterText,{color:t?k.colors.primary:k.colors.text.tertiary,fontSize:k.typography.fontSize.xs,fontWeight:k.typography.fontWeight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),b?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[I.sheetFooter,{borderTopColor:k.colors.border.secondary,paddingHorizontal:k.spacing.lg,paddingVertical:k.spacing.md}],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:ee,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[I.doneButton,{backgroundColor:e?k.colors.primaryPressed:k.colors.primary,borderRadius:k.radius.md,..._corners.smoothCorners,paddingVertical:k.spacing.sm,paddingHorizontal:k.spacing.lg}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:k.colors.onPrimary,fontSize:k.typography.fontSize.base,fontWeight:k.typography.fontWeight.semibold},children:"Done"})})}):null]}),(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})})};exports.OptionSheet=OptionSheet,OptionSheet.displayName="OptionSheet";const buildStyles=e=>_reactNative.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,..._corners.smoothCorners},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,..._corners.smoothCorners,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,..._corners.smoothCorners,marginLeft:12},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:_reactNative.StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});var _default=exports.default=OptionSheet;