panelui-native 0.85.0 → 0.86.0

package/src/components/progress-button/index.tsx

@@ -116,15 +116,6 @@ const DONE_TINT = {
 
 const progressButtonVariants = tv({
   slots: {
-    /*
-     * A pill, not the `rounded-lg` the other buttons take.
-     *
-     * The fill is clipped by this radius, so the shape of the button is also
-     * the shape of the wipe's leading edge as it comes out of the corner. On a
-     * small radius that edge emerges square from a rounded box, which reads as
-     * a rectangle sliding out from under the button rather than as the button
-     * filling up.
-     */
     /*
      * Every variant rests on the same secondary surface, and `variant` decides
      * only what colour comes across it.
@@ -140,7 +131,7 @@ const progressButtonVariants = tv({
      * that survives the wipe, since the fill covers the ground the label was
      * standing on and the second copy takes over.
      */
-    root: 'relative overflow-hidden rounded-full border border-transparent bg-secondary',
+    root: 'relative overflow-hidden border border-transparent bg-secondary',
     /*
      * The row inside the button. It is separate from `root` because the fill
      * has to sit over the whole button including its padding — a wipe that
@@ -179,29 +170,50 @@ const progressButtonVariants = tv({
     size: {
       // Matched to Button's boxes, and `min-h-*` for the same reason: the
       // label's glyphs grow with the system text size and the box has to grow
-      // with them.
-      // Wider than the equivalent Button, because the corner is a half-circle
-      // rather than a small radius: the curve eats into the side padding, and
-      // at Button's values the first and last glyphs sit against it.
+      // with them. The side padding is `shape`'s to decide, below.
       sm: {
         root: 'min-h-9',
-        content: 'min-h-9 gap-1.5 px-3.5 py-2',
+        content: 'min-h-9 gap-1.5 py-2',
         label: 'text-[14px]',
         fillLabel: 'text-[14px]',
       },
       md: {
         root: 'min-h-11',
-        content: 'min-h-11 px-5 py-2.5',
+        content: 'min-h-11 py-2.5',
         label: 'text-[16px]',
         fillLabel: 'text-[16px]',
       },
       lg: {
         root: 'min-h-12',
-        content: 'min-h-12 px-7 py-2.5',
+        content: 'min-h-12 py-2.5',
         label: 'text-[18px]',
         fillLabel: 'text-[18px]',
       },
     },
+    /*
+     * The corner, and the side padding that follows from it.
+     *
+     * The fill is clipped by the button's radius, so the shape of the button is
+     * also the shape of the wipe's leading edge as it comes out of the corner.
+     * A pill sends that edge out as a curve, which reads as the button filling
+     * up; a small radius sends it out square, which reads as a rectangle
+     * sliding out from under the button. That is why `pill` is the default and
+     * stays it.
+     *
+     * `rounded` is for a progress button standing in a row of ordinary ones —
+     * a form's footer, a toolbar, a card's actions — where a lone pill among
+     * `rounded-lg` buttons reads as a different kind of control rather than as
+     * the one that has to be held. It is `Button`'s box exactly: same radius,
+     * same padding, same minimum width, and the heights already agreed.
+     */
+    shape: {
+      // The radius is only on the root. It has `overflow-hidden`, so it is what
+      // clips the fill — and the fill's own leading edge has to stay straight:
+      // rounding it would round the wipe's front as well as the button's
+      // corner, which is a bar with a domed end travelling across the button.
+      pill: { root: 'rounded-full' },
+      rounded: { root: 'rounded-lg' },
+    },
     fullWidth: {
       true: { root: 'w-full' },
     },
@@ -209,9 +221,22 @@ const progressButtonVariants = tv({
       true: { root: 'opacity-[0.64]' },
     },
   },
+  compoundVariants: [
+    // A pill is wider than the equivalent Button at every size, because the
+    // corner is a half-circle rather than a small radius: the curve eats into
+    // the side padding, and at Button's values the first and last glyphs sit
+    // against it. `rounded` has Button's corner, so it takes Button's padding.
+    { shape: 'pill', size: 'sm', class: { content: 'px-3.5' } },
+    { shape: 'pill', size: 'md', class: { content: 'px-5' } },
+    { shape: 'pill', size: 'lg', class: { content: 'px-7' } },
+    { shape: 'rounded', size: 'sm', class: { root: 'min-w-9', content: 'px-2.5' } },
+    { shape: 'rounded', size: 'md', class: { root: 'min-w-11', content: 'px-4' } },
+    { shape: 'rounded', size: 'lg', class: { content: 'px-6' } },
+  ],
   defaultVariants: {
     variant: 'primary',
     size: 'md',
+    shape: 'pill',
   },
 });
 
@@ -221,6 +246,8 @@ type ProgressButtonVariantProps = VariantProps<typeof progressButtonVariants>;
 export type ProgressButtonVariant = NonNullable<ProgressButtonVariantProps['variant']>;
 /** How big a progress button is. */
 export type ProgressButtonSize = NonNullable<ProgressButtonVariantProps['size']>;
+/** What corner a progress button has. */
+export type ProgressButtonShape = NonNullable<ProgressButtonVariantProps['shape']>;
 
 interface ProgressButtonContextValue {
   /** `0` to `1` across the hold. */
@@ -282,6 +309,18 @@ export interface ProgressButtonProps
    * whether an action is worth feeling is the caller's call, not the control's.
    */
   haptics?: boolean;
+  /**
+   * The corner. `pill` by default — the fill is clipped by it, so a half-circle
+   * sends the wipe's leading edge out as a curve and the button reads as
+   * filling up.
+   *
+   * `rounded` gives it [Button](/docs/components/button)'s box exactly: the
+   * same radius, side padding and minimum width, at heights that already
+   * matched. Use it where the hold stands in a row of ordinary buttons — a
+   * form's footer, a toolbar, a card's actions — and a lone pill would read as
+   * a different kind of control rather than as the one that has to be held.
+   */
+  shape?: ProgressButtonShape;
   children?: ReactNode;
 }
 
@@ -290,6 +329,7 @@ const ProgressButtonRoot = forwardRef<View, ProgressButtonProps>(function Progre
     className,
     variant = 'primary',
     size = 'md',
+    shape = 'pill',
     fullWidth,
     holdDuration,
     onComplete,
@@ -305,7 +345,7 @@ const ProgressButtonRoot = forwardRef<View, ProgressButtonProps>(function Progre
   },
   ref
 ) {
-  const slots = progressButtonVariants({ variant, size, fullWidth, disabled });
+  const slots = progressButtonVariants({ variant, size, shape, fullWidth, disabled });
   const duration = resolveHoldDuration(holdDuration);
   const reducedMotion = useReducedMotion();
 

package/src/components/tabs/index.tsx

@@ -225,8 +225,6 @@ interface TabsContextValue {
   registerLayout: (value: string, layout: TabLayout) => void;
   layouts: Record<string, TabLayout>;
   variant: TabsVariant;
-  scrollable: boolean;
-  setScrollable: (scrollable: boolean) => void;
   keepMounted: TabsKeepMounted;
   /**
    * Whether the panels are in a strip rather than stacked in place.
@@ -241,6 +239,23 @@ interface TabsContextValue {
 
 const TabsContext = createContext<TabsContextValue | null>(null);
 
+/**
+ * Whether the row the trigger is in scrolls, published by that row.
+ *
+ * It is a `Tabs.List` prop and it decides a trigger's width — intrinsic in a
+ * scroller, an equal share in a fixed row — so the two have to agree in the
+ * commit they are laid out in. Routed through the root it arrived one commit
+ * late: every trigger was measured once at its equal-share position, the
+ * indicator snapped to that geometry because it was the first measurement it
+ * had, and the second pass moved everything. With enough tabs to need a
+ * scroller in the first place, the gap between the two geometries is most of
+ * the row.
+ *
+ * Separate from the root's context so it can be provided by the list, and
+ * defaulted so a trigger outside one still resolves.
+ */
+const TabsListContext = createContext(false);
+
 function useTabs(component: string): TabsContextValue {
   const context = useContext(TabsContext);
   if (!context) {
@@ -371,9 +386,6 @@ function TabsRoot({
 }: TabsProps) {
   const [internalValue, setInternalValue] = useState(defaultValue);
   const [layouts, setLayouts] = useState<Record<string, TabLayout>>({});
-  // Published by the List rather than the root, because it is the List that
-  // decides whether it scrolls — but the Triggers below it need to know.
-  const [scrollable, setScrollable] = useState(false);
   const isControlled = value !== undefined;
   const resolvedValue = isControlled ? value : internalValue;
   const animationDisabled = animation === 'disable-all';
@@ -415,8 +427,6 @@ function TabsRoot({
       registerLayout,
       layouts,
       variant,
-      scrollable,
-      setScrollable,
       keepMounted,
       pager: paged,
       animationDisabled,
@@ -427,7 +437,6 @@ function TabsRoot({
       registerLayout,
       layouts,
       variant,
-      scrollable,
       keepMounted,
       paged,
       animationDisabled,
@@ -481,9 +490,23 @@ function TabsPager({
 
   const order = useMemo(() => panels.map((panel) => panel.props.value), [panels]);
   const count = panels.length;
-  // An unknown value shows the first panel rather than none of them: a tab set
-  // with nothing in it is a harder thing to debug than one showing the wrong tab.
-  const active = Math.max(0, order.indexOf(value));
+  /*
+   * The index of the value, or the last one that resolved.
+   *
+   * A value that is not among the panels is a moment rather than a state: a
+   * controlled parent part-way through an update, panels rebuilt from a `map`
+   * whose keys changed. Falling back to zero for that moment springs the strip
+   * to the first panel and back, which is a visible flicker for something that
+   * was never wrong. Holding the last index shows the panel that was already
+   * there until the new one arrives.
+   *
+   * Zero remains the answer when nothing has ever resolved — a tab set with
+   * nothing in it is a harder thing to debug than one showing the wrong tab.
+   */
+  const resolved = order.indexOf(value);
+  const lastResolved = useRef(0);
+  if (resolved >= 0) lastResolved.current = resolved;
+  const active = resolved >= 0 ? resolved : Math.min(lastResolved.current, count - 1);
 
   const [width, setWidth] = useState(0);
   const position = useSharedValue(active);
@@ -640,9 +663,22 @@ function TabsPager({
     [sign, commit, position, start, dragging, widthValue, countValue]
   );
 
-  const strip = useAnimatedStyle(() => ({
-    transform: [{ translateX: -position.value * widthValue.value * sign }],
-  }));
+  /*
+   * The width comes in as the React value, not through `widthValue`.
+   *
+   * `widthValue` is mirrored from state in an effect, so it is a commit behind
+   * — and the commit it is behind by is the one where the strip first appears.
+   * For that frame the transform evaluated to `-position × 0`, which is panel
+   * zero on screen whichever tab is active: the tab set opened on the first
+   * panel and jumped to the right one. Reading `width` here re-creates the
+   * style when it changes, so the first frame of the strip is already in the
+   * right place. `widthValue` is still what the gesture reads, because a
+   * worklet cannot see React state.
+   */
+  const strip = useAnimatedStyle(
+    () => ({ transform: [{ translateX: -position.value * width * sign }] }),
+    [width, sign]
+  );
 
   const onLayout = useCallback((event: LayoutChangeEvent) => {
     const measured = event.nativeEvent.layout;
@@ -755,27 +791,54 @@ export interface TabsListProps extends ViewProps {
   children: ReactNode;
 }
 
+/**
+ * Where the active tab should sit in the scroller, or null when it cannot be
+ * known yet.
+ *
+ * A little in from the edge rather than flush against it, so the tab does not
+ * read as the last one in the row.
+ */
+function scrollTarget(layout: TabLayout | undefined): number | null {
+  if (!layout) return null;
+  return Math.max(layout.x - 24, 0);
+}
+
 function TabsList({ className, scrollable = false, children, ...props }: TabsListProps) {
-  const { variant, setScrollable, value, layouts } = useTabs('Tabs.List');
+  const { variant, value, layouts } = useTabs('Tabs.List');
   const { list } = tabsVariants({ variant });
   const scroller = useRef<ScrollView>(null);
 
-  useEffect(() => {
-    setScrollable(scrollable);
-  }, [scrollable, setScrollable]);
+  /*
+   * Where the row should be, kept as a ref rather than only applied once.
+   *
+   * A horizontal scroller does not always keep its offset when its content is
+   * laid out again, and the row is laid out again on every switch — so the
+   * scroller can be left at zero, showing the first tab, with nothing in this
+   * component's state disagreeing. Re-applying the target from
+   * `onContentSizeChange` puts it back where the selection says it should be.
+   */
+  const target = scrollTarget(layouts[value]);
+  const targetRef = useRef<number | null>(target);
+  targetRef.current = target;
+  const settled = useRef(false);
 
-  // Bring the active tab into view when it changes from elsewhere — a
+  // Bring the active tab into view when the selection changes — a press, a
   // controlled switch, or a swipe on the panel below.
-  const activeLayout = layouts[value];
   useEffect(() => {
-    if (!scrollable || !activeLayout) return;
+    if (!scrollable || target === null) return;
     scroller.current?.scrollTo({
-      // Land the tab a little in from the edge rather than flush against it,
-      // so it does not read as the last one in the row.
-      x: Math.max(activeLayout.x - 24, 0),
-      animated: true,
+      x: target,
+      // The first measurement has nowhere to travel from: animating it is a
+      // row that visibly slides into place as the screen appears.
+      animated: settled.current,
     });
-  }, [scrollable, activeLayout?.x, activeLayout]);
+    settled.current = true;
+  }, [scrollable, value, target]);
+
+  const restore = useCallback(() => {
+    if (!scrollable || targetRef.current === null) return;
+    scroller.current?.scrollTo({ x: targetRef.current, animated: false });
+  }, [scrollable]);
 
   const row = (
     <View {...props} accessibilityRole="tablist" className={cn(list(), className)}>
@@ -786,7 +849,14 @@ function TabsList({ className, scrollable = false, children, ...props }: TabsLis
     </View>
   );
 
-  if (!scrollable) return row;
+  /*
+   * The triggers are told whether they are in a scroller here rather than
+   * through the root, so their width and the row they are measured in belong to
+   * one commit. See {@link TabsListContext}.
+   */
+  const scoped = <TabsListContext.Provider value={scrollable}>{row}</TabsListContext.Provider>;
+
+  if (!scrollable) return scoped;
 
   return (
     <ScrollView
@@ -796,8 +866,9 @@ function TabsList({ className, scrollable = false, children, ...props }: TabsLis
       // The row measures itself, and the indicator is positioned against it,
       // so the scroller must not stretch it to the viewport width.
       contentContainerStyle={{ flexGrow: 0 }}
+      onContentSizeChange={restore}
     >
-      {row}
+      {scoped}
     </ScrollView>
   );
 }
@@ -826,20 +897,30 @@ function TabsTrigger({
   children,
 }: TabsTriggerProps) {
   const context = useTabs('Tabs.Trigger');
+  const scrollable = useContext(TabsListContext);
   const active = context.value === value;
   const slots = tabsVariants({
     variant: context.variant,
     active,
     disabled,
-    scrollable: context.scrollable,
+    scrollable,
   });
 
+  /*
+   * Bound to `registerLayout` alone, which is stable for the life of the tab
+   * set — not to the whole context, which is rebuilt every time any trigger
+   * registers. Depending on the context made this a new function on every
+   * measurement, so a layout burst handed every trigger a new `onLayout` for
+   * every *other* trigger's measurement: quadratic prop updates in exactly the
+   * case that has enough tabs to be slow.
+   */
+  const { registerLayout } = context;
   const handleLayout = useCallback(
     (event: LayoutChangeEvent) => {
       const { x, width } = event.nativeEvent.layout;
-      context.registerLayout(value, { x, width });
+      registerLayout(value, { x, width });
     },
-    [context, value]
+    [registerLayout, value]
   );
 
   if (context.variant === 'expanding') {

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

@@ -46,6 +46,7 @@
  */
 import { useCallback, useEffect, useState } from 'react';
 import {
+  TurboModuleRegistry,
   useWindowDimensions,
   type LayoutChangeEvent,
   type View,
@@ -117,12 +118,44 @@ export interface UseKeyboardAvoidanceResult {
 type KeyboardHeightHook = () => SharedValue<number>;
 
 /**
- * Resolved once, at module load, so the hook below always calls the same
- * underlying hook — swapping between them per render would break the rules of
- * hooks.
+ * Whether the controller's native module is actually in this client.
+ *
+ * Resolving the package is not the same as being able to use it: in Expo Go the
+ * JavaScript is in `node_modules` and requires cleanly, and every call into it
+ * throws from a proxy that reports the package as unlinked. A `try`/`catch`
+ * around the require never sees that, because it happens later.
+ */
+function nativeControllerPresent(): boolean {
+  try {
+    return TurboModuleRegistry.get('KeyboardController') !== null;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Resolved on the first render rather than at module load, and then never
+ * again.
+ *
+ * The resolution asks the native module registry a question, and this module is
+ * reachable from the package's root entry — so at module scope that question
+ * was being asked while a consuming app was still evaluating its imports,
+ * before the runtime had finished standing up. By the first render it is up.
+ *
+ * Caching it is what keeps the rules of hooks: `useKeyboardHeight` always calls
+ * the same underlying hook, because the implementation is chosen once and
+ * cannot change afterwards.
  */
-const useKeyboardHeight: KeyboardHeightHook = (() => {
+let keyboardHeightImpl: KeyboardHeightHook | undefined;
+
+function useKeyboardHeight(): SharedValue<number> {
+  if (!keyboardHeightImpl) keyboardHeightImpl = resolveKeyboardHeight();
+  return keyboardHeightImpl();
+}
+
+const resolveKeyboardHeight = (): KeyboardHeightHook => {
   try {
+    if (!nativeControllerPresent()) return () => useAnimatedKeyboard().height;
     // eslint-disable-next-line @typescript-eslint/no-require-imports
     const controller = require('react-native-keyboard-controller');
     if (typeof controller?.useReanimatedKeyboardAnimation === 'function') {
@@ -139,11 +172,12 @@ const useKeyboardHeight: KeyboardHeightHook = (() => {
   }
 
   return () => useAnimatedKeyboard().height;
-})();
+};
 
 /** True when the keyboard controller is driving this, rather than the fallback. */
 export function hasKeyboardController(): boolean {
   try {
+    if (!nativeControllerPresent()) return false;
     // eslint-disable-next-line @typescript-eslint/no-require-imports
     return typeof require('react-native-keyboard-controller')
       ?.useReanimatedKeyboardAnimation === 'function';

package/src/providers/panel-ui-provider.tsx

@@ -1,5 +1,5 @@
 import { Fragment, type ComponentType, type ReactNode } from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, TurboModuleRegistry, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import {
   PortalHost,
@@ -15,16 +15,44 @@ import { cn } from '../utils/cn';
  * avoidance simply does nothing. Mount it here when the package is installed
  * so `avoidKeyboard` works without any extra setup, and fall back to a
  * pass-through when it is not.
+ *
+ * Installed is not the same question as usable, and the difference is what a
+ * `try`/`catch` around the `require` cannot see. In a client that loads no
+ * native modules of its own — Expo Go — the JavaScript is in `node_modules`
+ * and resolves, so the require succeeds and hands back a provider whose native
+ * side is absent. The throw then lands when that provider mounts, outside the
+ * `try`, and takes the app down before anything has painted.
+ *
+ * `TurboModuleRegistry.get` answers the real question and returns null rather
+ * than throwing, so the pass-through is reached instead.
+ *
+ * Resolved on the first render rather than when this module is evaluated. This
+ * file is the first thing a consuming app imports, and asking the native module
+ * registry a question before the runtime has finished standing up is a question
+ * asked too early — by the first render it is up, and the answer cannot change
+ * afterwards. The result is cached so the component type is stable: swapping it
+ * between renders would unmount and rebuild everything below it.
  */
-const KeyboardProvider: ComponentType<{ children?: ReactNode }> = (() => {
+let keyboardProvider: ComponentType<{ children?: ReactNode }> | undefined;
+
+function resolveKeyboardProvider(): ComponentType<{ children?: ReactNode }> {
+  if (keyboardProvider) return keyboardProvider;
+
+  let resolved: ComponentType<{ children?: ReactNode }> = Fragment;
   try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const controller = require('react-native-keyboard-controller');
-    return controller?.KeyboardProvider ?? Fragment;
+    if (TurboModuleRegistry.get('KeyboardController') !== null) {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      const controller = require('react-native-keyboard-controller');
+      resolved = controller?.KeyboardProvider ?? Fragment;
+    }
   } catch {
-    return Fragment;
+    // Not installed, or installed without its native half. Either way the
+    // pass-through is the answer.
   }
-})();
+
+  keyboardProvider = resolved;
+  return resolved;
+}
 
 export interface PanelUIProviderProps {
   children: ReactNode;
@@ -57,6 +85,10 @@ export function PanelUIProvider({
   className,
   background = true,
 }: PanelUIProviderProps) {
+  // Resolved once, on the first render of the first provider in the app, and
+  // cached from there. See {@link resolveKeyboardProvider}.
+  const KeyboardProvider = resolveKeyboardProvider();
+
   return (
     <GestureHandlerRootView style={styles.root}>
       {/* Outermost of ours, so every field below it can avoid the keyboard.