panelui-native 0.51.1 → 0.54.0

package/src/components/combobox/index.tsx

@@ -296,6 +296,13 @@ function eachOption(children: ReactNode, visit: (option: ComboboxItemProps) => v
  * A group is rebuilt around whatever survives inside it and dropped when that
  * is nothing — a heading over no options reads as a section that failed to load
  * rather than one the query emptied.
+ *
+ * Every kept node is given a key on the way out. This walk builds a plain array
+ * rather than going through `Children.map`, which is the one that hands out keys
+ * of its own, so options written as literal JSX — the ordinary way to write a
+ * short, fixed list — arrive here with none. An option's `value` is already
+ * unique within a list, and a group is named by its label, so both key
+ * themselves; an explicit key on the element still wins.
  */
 function filterOptions(
   children: ReactNode,
@@ -303,20 +310,31 @@ function filterOptions(
 ): ReactNode[] {
   const kept: ReactNode[] = [];
 
-  Children.forEach(children, (child) => {
+  Children.forEach(children, (child, index) => {
     if (!isValidElement(child)) return;
 
     if (child.type === ComboboxGroup) {
       const props = child.props as ComboboxGroupProps;
       const inner = filterOptions(props.children, matches);
       if (inner.length) {
-        kept.push(cloneElement(child as ReactElement<ComboboxGroupProps>, {}, inner));
+        kept.push(
+          cloneElement(
+            child as ReactElement<ComboboxGroupProps>,
+            { key: child.key ?? `group:${props.label ?? index}` },
+            inner
+          )
+        );
       }
       return;
     }
 
     if (child.type === ComboboxItem && matches(child.props as ComboboxItemProps)) {
-      kept.push(child);
+      const props = child.props as ComboboxItemProps;
+      kept.push(
+        cloneElement(child as ReactElement<ComboboxItemProps>, {
+          key: child.key ?? `option:${props.value}`,
+        })
+      );
     }
   });
 
@@ -471,6 +489,15 @@ function ComboboxRoot<Mode extends ComboboxMode = 'single'>({
   const [internalQuery, setInternalQuery] = useState(defaultInputValue);
   const query = inputValue !== undefined ? inputValue : internalQuery;
 
+  /*
+   * Which chip a second backspace would take, in `multiple` mode. A held
+   * backspace repeats, and a field that removed on the first one would empty
+   * itself in the time it takes to notice — the mark is the beat that lets you
+   * stop. It is an index rather than a value because the same label can appear
+   * twice once the caller allows a custom value that matches an option.
+   */
+  const [marked, setMarked] = useState<number | null>(null);
+
   /** The selection as a list, which is the shape everything downstream wants. */
   const values = useMemo(() => {
     if (selection == null) return [];
@@ -549,13 +576,66 @@ function ComboboxRoot<Mode extends ComboboxMode = 'single'>({
    * that lifts its content clear of the keyboard moves the field after it was
    * measured, and the list would stay at the old position. Re-measure whenever
    * the keyboard's height changes while the list is open.
+   *
+   * Except while the list is being dragged. The list dismisses the keyboard on
+   * drag, so the first finger movement changes the keyboard's height, which
+   * lands a new anchor, which recomputes the panel's `top` *and* its
+   * `maxHeight` — the panel resizes and moves under the finger that is
+   * scrolling it, which is the stutter. The measurement is only stale once the
+   * keyboard has finished leaving, so it is deferred to the end of the drag,
+   * which is also the first moment it can be taken correctly.
    */
-  useEffect(() => {
-    if (!open || presentation !== 'overlay') return;
+  const draggingList = useRef(false);
+  const anchorStale = useRef(false);
+
+  const remeasure = useCallback(() => {
     fieldRef.current?.measureInWindow((x, y, width, height) =>
       setAnchor({ x, y, width, height })
     );
-  }, [open, presentation, keyboardHeight]);
+  }, []);
+
+  useEffect(() => {
+    if (!open || presentation !== 'overlay') return;
+    if (draggingList.current) {
+      anchorStale.current = true;
+      return;
+    }
+    remeasure();
+  }, [open, presentation, keyboardHeight, remeasure]);
+
+  const settleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const cancelSettle = useCallback(() => {
+    if (settleTimer.current === null) return;
+    clearTimeout(settleTimer.current);
+    settleTimer.current = null;
+  }, []);
+
+  const onListDragStart = useCallback(() => {
+    cancelSettle();
+    draggingList.current = true;
+  }, [cancelSettle]);
+
+  const onListSettled = useCallback(() => {
+    cancelSettle();
+    draggingList.current = false;
+    if (!anchorStale.current) return;
+    anchorStale.current = false;
+    remeasure();
+  }, [cancelSettle, remeasure]);
+
+  /*
+   * A fling ends the drag and then keeps moving, and momentum begins a frame
+   * *after* the drag ends — so the end of the drag cannot tell the two apart by
+   * itself. It arms a short timer instead, which momentum starting cancels; a
+   * drag that stops dead has no momentum to cancel it and settles on the timer.
+   */
+  const onListDragEnd = useCallback(() => {
+    cancelSettle();
+    settleTimer.current = setTimeout(onListSettled, 80);
+  }, [cancelSettle, onListSettled]);
+
+  useEffect(() => cancelSettle, [cancelSettle]);
 
   /*
    * A single-select field shows the chosen option's label when it is not being
@@ -671,12 +751,38 @@ function ComboboxRoot<Mode extends ComboboxMode = 'single'>({
     [selection, commit]
   );
 
+  /**
+   * Removal by position, which is what the backspace mark holds. Removing by
+   * value would take both of a repeated label rather than the marked one.
+   */
+  const removeAt = useCallback(
+    (index: number) => {
+      const current = Array.isArray(selection) ? selection : [];
+      if (index < 0 || index >= current.length) return;
+      commit(
+        current.filter((_, position) => position !== index) as ComboboxSelection[Mode]
+      );
+    },
+    [selection, commit]
+  );
+
   const clear = useCallback(() => {
     setQuery('');
+    setMarked(null);
     commit((multiple ? [] : undefined) as ComboboxSelection[Mode]);
     inputRef.current?.focus();
   }, [setQuery, commit, multiple]);
 
+  /*
+   * The chips can also change from outside — a form reset, a pick undone in the
+   * list — which would leave the mark pointing past the end of them. A stale
+   * mark is a chip deleted by a backspace meant for the one that used to be
+   * there.
+   */
+  useEffect(() => {
+    if (marked !== null && marked >= values.length) setMarked(null);
+  }, [marked, values.length]);
+
   const context = useMemo<ComboboxContextValue>(
     () => ({ values, onSelect: (next) => select(next) }),
     [values, select]
@@ -751,6 +857,13 @@ function ComboboxRoot<Mode extends ComboboxMode = 'single'>({
       // option would be swallowed by the keyboard dismissing first.
       keyboardShouldPersistTaps="always"
       keyboardDismissMode="on-drag"
+      // Both ends are wired: a slow drag that stops where it started never
+      // gets a momentum event, and a fling reports the drag ending long before
+      // the list has stopped.
+      onScrollBeginDrag={onListDragStart}
+      onScrollEndDrag={onListDragEnd}
+      onMomentumScrollBegin={cancelSettle}
+      onMomentumScrollEnd={onListSettled}
     >
       <View className="gap-1">{body}</View>
     </ScrollView>
@@ -769,10 +882,14 @@ function ComboboxRoot<Mode extends ComboboxMode = 'single'>({
     >
       <View className={slots.fieldContent()}>
         {multiple
-          ? values.map((entry) => (
+          ? values.map((entry, index) => (
               <Chip
                 key={entry}
                 size="sm"
+                // The marked chip turns destructive rather than growing an
+                // outline: it is about to be deleted, and that is the one
+                // colour in the theme that already means exactly that.
+                variant={marked === index ? 'destructive' : 'default'}
                 // A chip is `self-start` by default, which overrides the row's
                 // `items-center` and leaves it riding high against the input.
                 // Inside a field it is one of several things sharing a line.
@@ -789,6 +906,9 @@ function ComboboxRoot<Mode extends ComboboxMode = 'single'>({
           className={slots.input()}
           value={query}
           onChangeText={(next) => {
+            // Typing takes the mark off: the backspace that would have removed
+            // a chip has been overtaken by a new query.
+            setMarked(null);
             setQuery(next);
             if (!open) openList();
           }}
@@ -796,20 +916,31 @@ function ComboboxRoot<Mode extends ComboboxMode = 'single'>({
             setFocused(true);
             if (openOnFocus) openList();
           }}
-          onBlur={() => setFocused(false)}
+          onBlur={() => {
+            setFocused(false);
+            setMarked(null);
+          }}
           onSubmitEditing={submit}
           onKeyPress={({ nativeEvent }) => {
-            // Backspace on an empty field takes the last chip back — the same
-            // reflex that deletes a character, extended to the thing in front
-            // of the cursor when there is no character left to delete.
-            if (
-              multiple &&
-              nativeEvent.key === 'Backspace' &&
-              query.length === 0 &&
-              values.length > 0
-            ) {
-              remove(values[values.length - 1]!);
+            if (!multiple) return;
+            if (nativeEvent.key !== 'Backspace') {
+              setMarked(null);
+              return;
+            }
+            // There is still a character in front of the cursor: backspace
+            // means what it always means, and the chips are none of its
+            // business.
+            if (query.length > 0 || values.length === 0) return;
+
+            // Backspace on an empty field reaches the thing in front of the
+            // cursor when there is no character left to delete — but it marks
+            // that chip first, and only the next one takes it.
+            if (marked !== null && marked < values.length) {
+              removeAt(marked);
+              setMarked(null);
+              return;
             }
+            setMarked(values.length - 1);
           }}
           editable={!disabled}
           // Android lays a single-line input's text against the top of its box