@webority/mobile-ui 0.0.39 → 0.2.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
+"use strict";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Dimensions,Easing,FlatList,Modal,Platform,Pressable,StatusBar,StyleSheet,Text,TextInput,View}from"react-native";import{Gesture,GestureDetector,GestureHandlerRootView}from"react-native-gesture-handler";import{useKeyboardState}from"react-native-keyboard-controller";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";import{ToastHost}from"../Toast/ToastProvider.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const SEARCH_ICON_SIZE=18;export const OptionSheet=e=>{const{open:t,onClose:o,onAfterClose:i,title:s,options:r,sections:n,renderSectionHeader:a,renderOption:l,alphabetIndex:c=!1,searchPlaceholder:d="Search…",emptyText:p="No options",labelOf:u,getValue:h,disabledOf:m,destructiveOf:g,descriptionOf:y,iconOf:f,isSelected:b,onSelect:x,multi:S=!1,searchable:T=!1,searchSelectionColor:j,accessibilityLabel:C,optionStyle:w,selectedOptionStyle:_,optionTextStyle:R,selectedOptionTextStyle:V,testID:k}=e,I=useTheme(),v=useSafeAreaInsets(),z=useMemo(()=>buildStyles(I),[I]),[D,L]=useState(""),P=Dimensions.get("window").height,H=Math.round(.7*P),[W,A]=useState(t),M=useRef(createAnimatedValue(0)).current,O=useRef(createAnimatedValue(H)).current,B=useRef(createAnimatedValue(0)).current,E=useMemo(()=>Animated.add(O,B),[O,B]);useEffect(()=>{t&&A(!0)},[t]);const F=useRef(i);F.current=i;const N=useRef(W);useEffect(()=>{N.current&&!W&&"ios"!==Platform.OS&&F.current?.(),N.current=W},[W]),useEffect(()=>{if(!W)return;t&&setNativeValue(B,0);const e=t?Animated.parallel([Animated.timing(M,{toValue:1,duration:I.motion.duration.fast,easing:Easing.bezier(...I.motion.easing.standard),useNativeDriver:!1}),Animated.spring(O,{toValue:0,damping:I.motion.spring.snappy.damping,stiffness:I.motion.spring.snappy.stiffness,mass:I.motion.spring.snappy.mass,useNativeDriver:!0})]):Animated.parallel([Animated.timing(M,{toValue:0,duration:I.motion.duration.fast,easing:Easing.bezier(...I.motion.easing.standard),useNativeDriver:!1}),Animated.timing(O,{toValue:H,duration:I.motion.duration.fast,easing:Easing.bezier(...I.motion.easing.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&A(!1)}),()=>e.stop()},[t,W,M,O,B,H,I.motion.duration.fast,I.motion.easing.standard,I.motion.easing.accelerate,I.motion.spring.snappy]);const{handleGesture:G}=useDragToDismiss({drag:B,travel:H,onDismiss:o}),$=useMemo(()=>Gesture.Native(),[]),[J,K]=useState(0),U=useKeyboardState(e=>e.height),Y=W?Math.max(0,Math.round(U)):0,Z=Math.max(v.top,StatusBar.currentHeight??0)+I.spacing.sm,q=Y>0,Q=q?Math.max(0,Math.min(H,(J>0?J:P)-Y-Z)):H;useEffect(()=>{t||L("")},[t]);const X=useMemo(()=>{const e=T?D.trim().toLowerCase():"",matches=t=>0===e.length||u(t).toLowerCase().includes(e)||(y(t)??"").toLowerCase().includes(e);if(!n)return r.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return n.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},[T,D,r,n,u,y]),ee=useCallback(()=>{o()},[o]),te=useRef(null),oe=useMemo(()=>{const e=new Map;if(!c)return e;let t=0;if(n)for(let e=X.length-1;e>=0;e-=1)if("header"===X[e].kind){t=e+1;break}for(let o=t;o<X.length;o+=1){const t=X[o];if("option"!==t.kind)continue;const i=u(t.option).trim().charAt(0).toUpperCase(),s=/^[A-Z]$/.test(i)?i:"#";e.has(s)||e.set(s,o)}return e},[c,X,n,u]),ie=c&&oe.size>0&&0===D.trim().length,se=useMemo(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...oe.has("#")?["#"]:[]],[oe]),re=useCallback(e=>{const t=oe.get(e);void 0!==t&&te.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[oe]),ne=useRef(null),ae=useCallback(()=>{null!==ne.current&&(clearTimeout(ne.current),ne.current=null)},[]),le=useCallback(e=>{te.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),ae(),ne.current=setTimeout(()=>{ne.current=null,te.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[ae]);useEffect(()=>(W||ae(),ae),[W,ae]);return _jsx(Modal,{visible:W,transparent:!0,animationType:"none",onRequestClose:ee,onDismiss:()=>F.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:_jsxs(GestureHandlerRootView,{collapsable:!1,onLayout:e=>K(e.nativeEvent.layout.height),style:[StyleSheet.absoluteFill,{backgroundColor:I.colors.background.overlay}],children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:ee,accessibilityRole:"button",accessibilityLabel:"Close picker"}),_jsxs(Animated.View,{testID:k,accessibilityViewIsModal:!0,accessibilityLabel:C??s??"Options",style:[z.sheet,{maxHeight:Q,bottom:Y,paddingBottom:q?16:v.bottom+16,backgroundColor:I.colors.background.elevated,borderTopLeftRadius:I.radius.xl,borderTopRightRadius:I.radius.xl,...smoothCorners,transform:[{translateY:E}],...I.shadows.xl}],children:[_jsx(GestureDetector,{gesture:G,children:_jsxs(View,{children:[_jsx(View,{style:z.sheetHandleRow,children:_jsx(View,{style:[z.sheetHandle,{backgroundColor:I.components.select?.handleColor??I.components.bottomSheet?.handleColor??I.colors.border.primary}]})}),s?_jsx(Text,{style:[z.sheetTitle,{color:I.colors.text.primary,fontSize:I.typography.fontSize.lg,fontWeight:I.typography.fontWeight.semibold,paddingHorizontal:I.spacing.lg,marginBottom:I.spacing.sm}],children:s}):null]})}),T?_jsx(View,{style:[z.searchWrap,{marginHorizontal:I.spacing.lg,marginBottom:I.spacing.sm}],children:_jsxs(View,{style:[z.searchBox,{backgroundColor:I.colors.background.secondary,borderColor:I.colors.border.primary,borderRadius:I.radius.md,...smoothCorners,paddingHorizontal:I.spacing.md,gap:I.spacing.sm}],children:[(I.icons?.search??defaultIcons.search)({size:18,color:I.colors.text.tertiary}),_jsx(TextInput,{value:D,onChangeText:L,placeholder:d,placeholderTextColor:I.colors.text.tertiary,selectionColor:j??I.colors.border.focus,accessibilityLabel:"Search options",style:[z.searchInput,{color:I.colors.text.primary,fontSize:I.typography.fontSize.base,paddingVertical:I.spacing.sm}]}),D.length>0?_jsx(Pressable,{onPress:()=>L(""),hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(I.icons?.close??defaultIcons.close)({size:18,color:I.colors.text.secondary})}):null]})}):null,_jsxs(View,{style:[z.listWrap,ie?z.listRow:null],children:[_jsx(GestureDetector,{gesture:$,children:_jsx(FlatList,{ref:te,data:X,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(h(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return _jsx(View,{accessible:!0,accessibilityRole:"header",style:[z.sectionHeader,{paddingHorizontal:I.spacing.lg,paddingTop:I.spacing.md}],children:a?a(e.title):_jsx(Text,{style:[z.sectionTitle,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.xs,fontWeight:I.typography.fontWeight.semibold}],children:e.title.toUpperCase()})});const t=e.option,o=u(t),i=h(t),s=y(t),r=f(t),n=b(i),c=m(t),d=g?.(t)??!1;return _jsxs(Pressable,{onPress:()=>x(t),disabled:c,android_ripple:{color:I.colors.surface.pressed,borderless:!1},accessibilityRole:"button",accessibilityLabel:o,accessibilityState:{selected:n,disabled:c},style:({pressed:e})=>[z.optionRow,{backgroundColor:n?I.colors.surface.selected:e?I.colors.surface.pressed:"transparent",opacity:c?.5:1,paddingHorizontal:I.spacing.lg,paddingVertical:I.spacing.md},w,n?_:null],children:[l?_jsx(View,{style:z.optionTextWrap,children:l(t,{selected:n,disabled:c})}):_jsxs(_Fragment,{children:[r?_jsx(View,{style:z.optionIcon,children:r}):null,_jsxs(View,{style:z.optionTextWrap,children:[_jsx(Text,{style:[z.optionLabel,{color:d?I.colors.error:n?I.colors.primary:I.colors.text.primary,fontSize:I.typography.fontSize.base,fontWeight:n?I.typography.fontWeight.semibold:I.typography.fontWeight.medium},R,n?V:null],numberOfLines:1,children:o}),s?_jsx(Text,{style:[z.optionDescription,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.sm}],numberOfLines:2,children:s}):null]})]}),S?_jsx(View,{style:[z.checkbox,{borderColor:n?I.colors.primary:I.colors.border.primary,backgroundColor:n?I.colors.primary:"transparent"}],children:n?_jsx(View,{style:z.checkboxTick}):null}):n?_jsx(View,{style:[z.singleSelectedDot,{backgroundColor:I.colors.primary}]}):null]})},onScrollToIndexFailed:le,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!ie,style:ie?z.listBesideRail:null,ListEmptyComponent:_jsx(Text,{style:[z.empty,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.sm,paddingVertical:I.spacing.xl}],children:p})})}),ie?_jsx(View,{style:[z.rail,{paddingRight:I.spacing.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:se.map(e=>{const t=oe.has(e);return _jsx(Pressable,{onPress:()=>re(e),disabled:!t,hitSlop:{left:8,right:8},accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},style:z.railLetter,children:_jsx(Text,{style:[z.railLetterText,{color:t?I.colors.primary:I.colors.text.tertiary,fontSize:I.typography.fontSize.xs,fontWeight:I.typography.fontWeight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),S?_jsx(View,{style:[z.sheetFooter,{borderTopColor:I.colors.border.secondary,paddingHorizontal:I.spacing.lg,paddingVertical:I.spacing.md}],children:_jsx(Pressable,{onPress:ee,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[z.doneButton,{backgroundColor:e?I.colors.primaryPressed:I.colors.primary,borderRadius:I.radius.md,...smoothCorners,paddingVertical:I.spacing.sm,paddingHorizontal:I.spacing.lg}],children:_jsx(Text,{style:{color:I.colors.onPrimary,fontSize:I.typography.fontSize.base,fontWeight:I.typography.fontWeight.semibold},children:"Done"})})}):null]}),_jsx(ToastHost,{})]})})};OptionSheet.displayName="OptionSheet";const buildStyles=e=>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:!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,...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,...smoothCorners,marginLeft:12},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});export default OptionSheet;