panelui-native 0.88.1 → 0.89.0

package/src/components/search-bar/index.tsx

@@ -127,11 +127,11 @@ import {
 import {
   ScrollView,
   StyleSheet,
+  TextInput,
   View,
   useWindowDimensions,
   type LayoutChangeEvent,
   type NativeSyntheticEvent,
-  type TextInput,
   type TextInputKeyPressEventData,
   type TextInputSubmitEditingEventData,
   type ViewProps,
@@ -287,6 +287,15 @@ const searchBarVariants = tv({
     panelList: 'p-1.5',
     /** The hairline between the results and the field. */
     panelDivider: 'w-full bg-border',
+    /*
+     * A gap between the rows, because a selected one is drawn as a filled
+     * shape. Stacked flush, its fill runs into the row underneath and the two
+     * read as one block with a coloured top half — a row's rounded corners are
+     * only visible when there is background either side of them to round
+     * against. Two points separates the fills and still reads as a list rather
+     * than a set of cards.
+     */
+    section: 'gap-0.5',
     sectionLabel: 'px-3 pb-1 pt-2 text-sm text-muted-foreground',
     item: 'flex-row items-center gap-3 rounded-lg px-3 py-2.5',
     itemLabel: 'flex-1 text-base text-foreground',
@@ -689,9 +698,24 @@ const SearchBarRoot = forwardRef<TextInput, SearchBarProps>(
         clearCloseTimer();
         closeTimer.current = setTimeout(() => {
           closeTimer.current = null;
-          if (!ending.current && keyboardUp.current) {
-            // The keyboard never went down, so the search is still on screen
-            // and something inside it has taken the focus. Give it back.
+          /*
+           * A keyboard that never went down is not on its own proof that the
+           * focus is still inside this search.
+           *
+           * Put two search bars on one screen and they hand the keyboard
+           * between them: the first blurs, the keyboard stays up because the
+           * second now has it, and the first takes it straight back — then the
+           * second does the same, and both draw themselves as the field being
+           * typed into. A screen showing sizes or variants is four of them in a
+           * column, so this is the arrangement, not a corner case.
+           *
+           * So ask who actually holds it. Another field means somebody moved
+           * on deliberately; a focus that has landed nowhere is one of this
+           * search's own buttons taking it, which is what the recovery is for.
+           */
+          const holder = TextInput.State.currentlyFocusedInput();
+          const elsewhere = holder != null && holder !== inputRef.current;
+          if (!ending.current && keyboardUp.current && !elsewhere) {
             inputRef.current?.focus();
             return;
           }
@@ -1121,9 +1145,9 @@ export interface SearchBarSectionProps extends ViewProps {
 
 /** A labelled run of rows inside the panel. */
 function SearchBarSection({ className, label, children, ...props }: SearchBarSectionProps) {
-  const { sectionLabel } = searchBarVariants();
+  const { section, sectionLabel } = searchBarVariants();
   return (
-    <View {...props} className={className}>
+    <View {...props} className={section({ className })}>
       {label ? (
         <Text accessibilityRole="header" className={sectionLabel()}>
           {label}
@@ -1183,8 +1207,9 @@ function SearchBarItem({
       // a card rather than a line in a list. The dim is the whole feedback.
       pressScale={1}
       pressOpacity={0.6}
-      // The rows sit flush against each other, so the points either side of the
-      // gap between two of them would otherwise belong to neither.
+      // The two points of gap the section leaves between rows belong to
+      // neither of them otherwise, and a dead line across a list of targets is
+      // a tap that does nothing.
       hitSlop={{ top: 2, bottom: 2 }}
       {...props}
       className={item({ className })}

package/src/components/selection-mode/index.tsx

@@ -134,7 +134,7 @@ const selectionVariants = tv({
     header: 'h-14 flex-row items-center gap-3 border-b border-border px-4',
     title: 'flex-1 text-center text-base font-semibold text-foreground',
     close: 'h-10 w-10 items-center justify-center rounded-full bg-muted',
-    group: 'overflow-hidden rounded-2xl bg-card',
+    group: 'overflow-hidden rounded-2xl',
     ring: 'rounded-full border-2 border-transparent p-0.5',
     bar: 'flex-row items-stretch',
     action: 'flex-1 items-center justify-center gap-1.5 px-2 py-3',
@@ -162,6 +162,23 @@ const selectionVariants = tv({
     disabled: {
       true: { action: 'opacity-[0.44]' },
     },
+    /**
+     * The group's surface, which depends on what is behind it.
+     *
+     * `card` is a step *down* from the background on a screen, which is what a
+     * grouped list wants there. A sheet is already `popover`, and popover sits
+     * above card in every dark theme — so the same card inside a sheet is
+     * darker than the sheet around it and reads as a hole rather than a raised
+     * set of rows.
+     *
+     * `muted` is an alpha tint, so it steps up from whatever it is drawn on and
+     * is correct against either. It is only used in the sheet because the
+     * screen's card is right where it is.
+     */
+    surface: {
+      screen: { group: 'bg-card' },
+      sheet: { group: 'bg-muted' },
+    },
     /**
      * Flush to the bottom edge, or lifted off it.
      *
@@ -177,6 +194,7 @@ const selectionVariants = tv({
   },
   defaultVariants: {
     placement: 'bar',
+    surface: 'screen',
   },
 });
 
@@ -665,7 +683,10 @@ function SelectionModeGroup({
   ...props
 }: SelectionModeGroupProps) {
   const items = Children.toArray(children).filter(Boolean);
-  const slots = selectionVariants({});
+  // A sheet's own surface already sits above a card's, so which fill the group
+  // takes depends on where it is. Every other part reads the context too.
+  const { sheet } = useSelectionMode();
+  const slots = selectionVariants({ surface: sheet ? 'sheet' : 'screen' });
 
   /**
    * The caption, and the wrapper that carries it. A group with no `label` is
@@ -1133,7 +1154,13 @@ function SelectionModeSheet({
          * screen but in the wrong branch of the tree.
          */}
         <SelectionModeContext.Provider value={context}>
-          <BottomSheet.Header>
+          {/*
+           * `pe-0` gives the trailing edge back. `BottomSheet.Header` reserves
+           * room there for the close button, and this sheet draws none — left
+           * alone, the reserved 48 points push the centred title off the middle
+           * of the sheet and hold "All" that far in from the corner.
+           */}
+          <BottomSheet.Header className="pe-0">
             {/* The sheet already draws the rule and the padding. */}
             <SelectionModeHeader
               title={title}

package/src/hooks/use-keyboard-avoidance.ts

@@ -44,7 +44,7 @@
  * </Animated.View>
  * ```
  */
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import {
   TurboModuleRegistry,
   useWindowDimensions,
@@ -201,7 +201,8 @@ export function useKeyboardAvoidance({
   const translation = useSharedValue(0);
 
   /*
-   * Whether the element has been laid out at least once and is still mounted.
+   * Whether the element can be measured: laid out at least once, and still
+   * mounted.
    *
    * `measure` warns when it is handed a view the layout engine has no metrics
    * for — every frame between a mount and its first layout, and every frame
@@ -210,11 +211,26 @@ export function useKeyboardAvoidance({
    * the warning is printed before that null comes back. Running once a frame,
    * one of these fills the log on its own.
    *
-   * So the layout pass is what says the view can be measured, and the unmount
-   * is what takes it back.
+   * The layout pass arms it. Two things disarm it, because one is not enough:
+   *
+   * - the teardown, in a *layout* effect. A plain effect's cleanup is written
+   *   from the JS thread after the commit, which is one or more frames after
+   *   the view it is protecting has gone — long enough for the loop to measure
+   *   a detached view and log. This is the case an overlay hits every time:
+   *   a dialog whose content unmounts on close takes the element with it while
+   *   the keyboard is still on its way down.
+   * - the worklet itself, whenever a measurement comes back null. That write
+   *   belongs to the UI thread, so it lands whatever order the teardown
+   *   arrives in, and a view that has gone costs one warning rather than one
+   *   per frame.
+   *
+   * A disarm that was only a race is put back by the next layout pass, or by
+   * the keyboard opening again — `everLaidOut` is what makes the second one
+   * safe, since arming before the first layout is the other half of the bug.
    */
   const laidOut = useSharedValue(false);
-  useEffect(
+  const everLaidOut = useSharedValue(false);
+  useLayoutEffect(
     () => () => {
       laidOut.value = false;
     },
@@ -250,7 +266,11 @@ export function useKeyboardAvoidance({
     if (!laidOut.value) return;
 
     const frame = measure(ref);
-    if (!frame || frame.height <= 0) return;
+    if (!frame) {
+      laidOut.value = false;
+      return;
+    }
+    if (frame.height <= 0) return;
 
     const restingBottom = frame.pageY + frame.height - translation.value;
     const keyboardTop = screenHeight - keyboardHeight;
@@ -272,6 +292,10 @@ export function useKeyboardAvoidance({
       if (shouldTrack === wasTracking) return;
       runOnJS(setTracking)(shouldTrack);
 
+      // A keyboard opening is the other place the guard is put back, for the
+      // element that was disarmed by a measurement that raced a re-layout.
+      if (shouldTrack && everLaidOut.value) laidOut.value = true;
+
       // Moving straight from one field to another never closes the keyboard,
       // so the field being left has nothing to follow back down — it is sent
       // home explicitly, or it stays hanging where the keyboard left it.
@@ -282,7 +306,7 @@ export function useKeyboardAvoidance({
   );
 
   const { setActive } = track;
-  useEffect(() => {
+  useLayoutEffect(() => {
     setActive(tracking && mode === 'lift');
     return () => setActive(false);
   }, [tracking, mode, setActive]);
@@ -290,12 +314,13 @@ export function useKeyboardAvoidance({
   const onLayout = useCallback(
     (_event: LayoutChangeEvent) => {
       laidOut.value = true;
+      everLaidOut.value = true;
       // A layout pass while the element is at rest means its slot moved for
       // some reason other than the keyboard. Anything left over from the last
       // lift belongs to the old slot.
       if (!tracking && translation.value !== 0) translation.value = 0;
     },
-    [laidOut, tracking, translation]
+    [everLaidOut, laidOut, tracking, translation]
   );
 
   const animatedStyle = useAnimatedStyle(() => {