panelui-native 0.73.0 → 0.75.1

package/src/components/avatar/avatar-group.ts

@@ -0,0 +1,78 @@
+/**
+ * The arithmetic behind a stack of avatars: how far each one slides under the
+ * one before it, and how many faces are left over once the row is capped.
+ *
+ * It lives apart from the component because both answers are pure and both are
+ * easy to get subtly wrong — a cap of zero that hides everybody, a `total`
+ * lower than the number of faces already on screen, a negative overlap that
+ * turns a stack into a gap.
+ */
+
+/** Rendered diameter of each avatar size, in points. */
+export const AVATAR_SIZE_POINTS = { sm: 32, md: 40, lg: 56, xl: 80 } as const;
+
+export type AvatarSizeName = keyof typeof AVATAR_SIZE_POINTS;
+
+/**
+ * How much of each avatar the next one covers, as a share of its diameter.
+ * A third is enough for the faces to read as one group and to still leave the
+ * widest part of every face visible.
+ */
+export const AVATAR_GROUP_OVERLAP_RATIO = 0.32;
+
+/**
+ * Points one avatar slides under its neighbour.
+ *
+ * Derived from the size rather than fixed, so the stack keeps its proportions
+ * across the size ladder instead of looking crowded at `xl` and loose at `sm`.
+ * A caller's own number wins, clamped so it can close a stack up entirely but
+ * never open it into a gap — that is what a plain row is for.
+ */
+export function avatarGroupOverlap(
+  size: AvatarSizeName,
+  overlap?: number
+): number {
+  const diameter = AVATAR_SIZE_POINTS[size] ?? AVATAR_SIZE_POINTS.md;
+  if (overlap === undefined || !Number.isFinite(overlap)) {
+    return Math.round(diameter * AVATAR_GROUP_OVERLAP_RATIO);
+  }
+  return Math.min(Math.max(overlap, 0), diameter);
+}
+
+export interface AvatarGroupCount {
+  /** How many avatars to render. */
+  visible: number;
+  /** How many are left over, for the trailing count. `0` renders no count. */
+  overflow: number;
+}
+
+/**
+ * Splits a row of faces into the ones shown and the number hidden behind them.
+ *
+ * `max` counts the faces, not the slots — a cap of three with five people shows
+ * three avatars and a `+2`, rather than two and a `+3`.
+ */
+export function avatarGroupCount(
+  count: number,
+  max?: number,
+  total?: number
+): AvatarGroupCount {
+  const people = Number.isFinite(count) ? Math.max(Math.trunc(count), 0) : 0;
+
+  // An unusable cap is no cap: a `max` of zero or NaN reads as "not set", never
+  // as "hide everyone", because an empty row is never what a caller meant.
+  const capped =
+    max !== undefined && Number.isFinite(max) && max >= 1
+      ? Math.min(Math.trunc(max), people)
+      : people;
+
+  // `total` describes a population the children only sample, so it can only add
+  // to the count — a total below what is already on screen is stale, not a
+  // reason to claim there are fewer people than the row is showing.
+  const population =
+    total !== undefined && Number.isFinite(total)
+      ? Math.max(Math.trunc(total), people)
+      : people;
+
+  return { visible: capped, overflow: Math.max(population - capped, 0) };
+}

package/src/components/avatar/index.tsx

@@ -1,4 +1,12 @@
-import { forwardRef, useState, type ReactNode } from 'react';
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
 import {
   Image,
   View,
@@ -9,6 +17,11 @@ import {
 import { tv, type VariantProps } from 'tailwind-variants';
 import { Text, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
+import {
+  avatarGroupCount,
+  avatarGroupOverlap,
+  type AvatarSizeName,
+} from './avatar-group';
 
 const avatarVariants = tv({
   slots: {
@@ -111,6 +124,113 @@ const AvatarBadge = forwardRef<View, AvatarBadgeProps>(
 );
 AvatarBadge.displayName = 'Avatar.Badge';
 
+export interface AvatarGroupProps extends ViewProps {
+  className?: string;
+  /** Size for every avatar in the stack. A child's own `size` still wins. */
+  size?: AvatarSizeName;
+  /**
+   * How many faces to show. The rest are counted into a trailing `+N`.
+   *
+   * It caps the faces, not the row: `max={3}` with five people shows three
+   * avatars and a `+2`.
+   */
+  max?: number;
+  /**
+   * How many people there are, when the children are only the first few of
+   * them. The count is measured against this instead of against the number of
+   * children, so a stack of three out of forty reads `+37`.
+   */
+  total?: number;
+  /** Points each avatar slides under the one before it. Defaults to a third of the size. */
+  overlap?: number;
+}
+
+/**
+ * A row of avatars, each overlapping the one after it, with the people who did
+ * not fit counted at the end.
+ *
+ * The faces are drawn back to front — the first is on top — which is why the
+ * row lays itself out in reverse: later siblings paint over earlier ones, so
+ * the stacking order and the reading order pull against each other and one of
+ * them has to be flipped. Flipping the layout keeps the children in the order
+ * they were written.
+ *
+ * Each face gets a ring in the page background so it separates from the one
+ * underneath whatever surface the stack sits on.
+ *
+ * ```tsx
+ * <Avatar.Group max={3} total={members.length}>
+ *   {members.map((member) => (
+ *     <Avatar key={member.id} source={{ uri: member.avatarUrl }} fallback={member.initials} />
+ *   ))}
+ * </Avatar.Group>
+ * ```
+ */
+const AvatarGroup = forwardRef<View, AvatarGroupProps>(
+  ({ className, size = 'md', max, total, overlap, children, ...props }, ref) => {
+    const faces = Children.toArray(children).filter(isValidElement) as ReactElement<AvatarProps>[];
+    const { visible, overflow } = avatarGroupCount(faces.length, max, total);
+    const slide = avatarGroupOverlap(size, overlap);
+
+    // Back to front: the count sits under the last face, which sits under the
+    // one before it, and so on up to the first.
+    const stack: { key: string; node: ReactNode }[] = [];
+
+    if (overflow > 0) {
+      stack.push({
+        key: 'overflow',
+        node: (
+          <AvatarRoot
+            size={size}
+            fallback={`+${overflow}`}
+            accessibilityLabel={`${overflow} more`}
+            className="border-2 border-background"
+          />
+        ),
+      });
+    }
+
+    for (let index = visible - 1; index >= 0; index -= 1) {
+      const face = faces[index]!;
+      stack.push({
+        key: String(face.key ?? index),
+        node: cloneElement(face, {
+          size: face.props.size ?? size,
+          className: cn('border-2 border-background', face.props.className),
+        }),
+      });
+    }
+
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="list"
+        className={cn('flex-row-reverse self-start', className)}
+        {...props}
+      >
+        {stack.map((entry, index) => (
+          // The first node laid out is the trailing one, and it is the only one
+          // with nothing to slide under.
+          <View key={entry.key} style={index === 0 ? undefined : { marginEnd: -slide }}>
+            {entry.node}
+          </View>
+        ))}
+      </View>
+    );
+  }
+);
+AvatarGroup.displayName = 'Avatar.Group';
+
 export const Avatar = Object.assign(AvatarRoot, {
   Badge: AvatarBadge,
+  Group: AvatarGroup,
 });
+
+export {
+  AVATAR_GROUP_OVERLAP_RATIO,
+  AVATAR_SIZE_POINTS,
+  avatarGroupCount,
+  avatarGroupOverlap,
+  type AvatarGroupCount,
+  type AvatarSizeName,
+} from './avatar-group';

package/src/components/color-picker/color-picker-accessibility.ts

@@ -0,0 +1,12 @@
+/**
+ * Returns an accessibility action only while the picker is interactive.
+ *
+ * React Native can still deliver an action to a disabled adjustable view, so
+ * the handler has to enforce the same disabled boundary as its touch gesture.
+ */
+export function enabledColorPickerAction(
+  actionName: string,
+  disabled: boolean
+): string | undefined {
+  return disabled ? undefined : actionName;
+}

package/src/components/color-picker/index.tsx

@@ -108,6 +108,7 @@ import {
 import { cn } from '../../utils/cn';
 import { selectionTick } from '../../utils/haptics';
 import { Popover, type PopoverContentProps } from '../popover';
+import { enabledColorPickerAction } from './color-picker-accessibility';
 
 /** Settles a thumb that was moved by something other than a finger. */
 const TIMING = { duration: 140 } as const;
@@ -586,7 +587,10 @@ const ColorPickerArea = forwardRef<View, ColorPickerAreaProps>(
     };
 
     const onAccessibilityAction = (event: AccessibilityActionEvent) => {
-      const action = event.nativeEvent.actionName;
+      const action = enabledColorPickerAction(
+        event.nativeEvent.actionName,
+        ctx.disabled
+      );
       if (action === 'increment') nudge('saturation', 1);
       else if (action === 'decrement') nudge('saturation', -1);
       else if (action === 'brighter') nudge('brightness', 1);
@@ -829,8 +833,12 @@ const ColorPickerHue = forwardRef<View, ColorPickerHueProps>(
         disabled={ctx.disabled}
         accessibilityValue={{ min: 0, max: 360, now: announced, text: `${announced}°` }}
         onAccessibilityAction={(event) => {
-          if (event.nativeEvent.actionName === 'increment') nudge(1);
-          else if (event.nativeEvent.actionName === 'decrement') nudge(-1);
+          const action = enabledColorPickerAction(
+            event.nativeEvent.actionName,
+            ctx.disabled
+          );
+          if (action === 'increment') nudge(1);
+          else if (action === 'decrement') nudge(-1);
         }}
       >
         <LinearGradient
@@ -948,8 +956,12 @@ const ColorPickerAlpha = forwardRef<View, ColorPickerAlphaProps>(
           text: `${announced}%`,
         }}
         onAccessibilityAction={(event) => {
-          if (event.nativeEvent.actionName === 'increment') nudge(1);
-          else if (event.nativeEvent.actionName === 'decrement') nudge(-1);
+          const action = enabledColorPickerAction(
+            event.nativeEvent.actionName,
+            ctx.disabled
+          );
+          if (action === 'increment') nudge(1);
+          else if (action === 'decrement') nudge(-1);
         }}
       >
         <Checkerboard />
@@ -1504,8 +1516,12 @@ const ColorPickerBrightness = forwardRef<View, ColorPickerBrightnessProps>(
           text: `${announced}%`,
         }}
         onAccessibilityAction={(event) => {
-          if (event.nativeEvent.actionName === 'increment') nudge(1);
-          else if (event.nativeEvent.actionName === 'decrement') nudge(-1);
+          const action = enabledColorPickerAction(
+            event.nativeEvent.actionName,
+            ctx.disabled
+          );
+          if (action === 'increment') nudge(1);
+          else if (action === 'decrement') nudge(-1);
         }}
       >
         <LinearGradient
@@ -1667,7 +1683,10 @@ const ColorPickerWheel = forwardRef<View, ColorPickerWheelProps>(
     };
 
     const onAccessibilityAction = (event: AccessibilityActionEvent) => {
-      const action = event.nativeEvent.actionName;
+      const action = enabledColorPickerAction(
+        event.nativeEvent.actionName,
+        ctx.disabled
+      );
       if (action === 'increment') nudge('hue', 1);
       else if (action === 'decrement') nudge('hue', -1);
       else if (action === 'saturate') nudge('saturation', 1);

package/src/components/date-time-picker/index.tsx

@@ -84,6 +84,9 @@ const DEFAULT_PLACEHOLDER = 'Pick a date and time';
  */
 const PANEL_WIDTH = 308;
 
+/** A stable rule that makes every calendar day unavailable while disabled. */
+const DISABLE_ALL_DATES = () => true;
+
 /** How a `Date` is written on the closed trigger. */
 function describe(
   value: Date,
@@ -204,18 +207,23 @@ function DateTimePickerRoot({
 
   const setOpen = useCallback(
     (next: boolean) => {
+      if (disabled && next) return;
       if (!isOpenControlled) setInternalOpen(next);
       onOpenChange?.(next);
     },
-    [isOpenControlled, onOpenChange]
+    [disabled, isOpenControlled, onOpenChange]
   );
 
   const commit = useCallback(
     (next: Date) => {
+      // A controlled caller can keep the panel mounted or open while disabled.
+      // Guard the value boundary as well as the visible controls so a stale
+      // press cannot commit during the same render that disables the picker.
+      if (disabled) return;
       if (!isValueControlled) setInternalValue(next);
       onValueChange?.(next);
     },
-    [isValueControlled, onValueChange]
+    [disabled, isValueControlled, onValueChange]
   );
 
   /*
@@ -281,7 +289,7 @@ function DateTimePickerRoot({
         mode="single"
         selected={value}
         onSelect={handleDay}
-        disabled={disabledDates}
+        disabled={disabled ? DISABLE_ALL_DATES : disabledDates}
         minDate={minDate}
         maxDate={maxDate}
         startMonth={minDate}

package/src/components/drawer/index.tsx

@@ -66,14 +66,11 @@ import {
 } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
+  Easing,
   SlideInDown,
   SlideInLeft,
   SlideInRight,
   SlideInUp,
-  SlideOutDown,
-  SlideOutLeft,
-  SlideOutRight,
-  SlideOutUp,
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
@@ -96,6 +93,9 @@ import {
 import { cn } from '../../utils/cn';
 
 const SPRING = { damping: 24, stiffness: 300, mass: 0.7 } as const;
+/** How long the panel takes to leave, whether by a drag or a press. */
+const EXIT_DURATION = 200;
+
 /** How far a drag has to travel outward before releasing it dismisses. */
 const DISMISS_DISTANCE = 80;
 /** A flick this fast dismisses regardless of how far it got. */
@@ -375,9 +375,11 @@ function DrawerContent({
         const velocity =
           (horizontal ? event.velocityX : event.velocityY) * outward;
         if (travel.value > DISMISS_DISTANCE || velocity > DISMISS_VELOCITY) {
-          travel.value = withTiming(extent, { duration: 180 }, (finished) => {
-            if (finished) runOnJS(close)();
-          });
+          // Straight to the exit, without finishing the slide first. The exit
+          // starts from wherever `travel` is and carries it the rest of the
+          // way, so driving it to `extent` here would be the same distance
+          // animated twice.
+          runOnJS(close)();
         } else {
           travel.value = withSpring(0, SPRING);
         }
@@ -413,6 +415,43 @@ function DrawerContent({
     [closeCorner, showClose]
   );
 
+  /*
+   * The slide out is written by hand, because the panel is not always at rest
+   * when it starts.
+   *
+   * A preset animates from the view's *layout* position and applies its own
+   * transform, which overrides the one the drag was already using. So a
+   * swipe-dismiss played twice: the gesture carried the panel off-screen, and
+   * then the exit put it back at zero and slid it out again. Seeding the
+   * initial transform from `travel` makes the two one animation — the exit
+   * picks the panel up wherever the finger left it and carries it the rest of
+   * the way. A press on the close button or the backdrop leaves `travel` at
+   * zero, so that path is the same slide it always was.
+   *
+   * Above the early return, with every other hook. It reads nothing that is
+   * only known once the drawer is open, and a hook below that return is one
+   * that runs on an open drawer and not on a closed one.
+   */
+  const exiting = useCallback(() => {
+    'worklet';
+    const shift = extent * outward;
+    const from = travel.value * outward;
+    const timing = { duration: EXIT_DURATION, easing: Easing.out(Easing.quad) };
+
+    return {
+      initialValues: {
+        transform: horizontal
+          ? [{ translateX: from }, { translateY: 0 }]
+          : [{ translateX: 0 }, { translateY: from }],
+      },
+      animations: {
+        transform: horizontal
+          ? [{ translateX: withTiming(shift, timing) }, { translateY: 0 }]
+          : [{ translateX: 0 }, { translateY: withTiming(shift, timing) }],
+      },
+    };
+  }, [extent, horizontal, outward, travel]);
+
   if (!open) return null;
 
   /*
@@ -433,13 +472,6 @@ function DrawerContent({
     bottom: SlideInDown,
   }[physical];
 
-  const exiting = {
-    left: SlideOutLeft,
-    right: SlideOutRight,
-    top: SlideOutUp,
-    bottom: SlideOutDown,
-  }[physical];
-
   /*
    * The inset and the panel's own padding stack rather than compete.
    *
@@ -499,7 +531,7 @@ function DrawerContent({
                   .damping(24)
                   .stiffness(260)
                   .mass(0.7)}
-                exiting={exiting.duration(200)}
+                exiting={exiting}
                 accessibilityViewIsModal
                 className={panelVariants({ side, className })}
                 {...props}

package/src/components/input/index.tsx

@@ -59,6 +59,7 @@ import { IconColorProvider } from '../../icons';
 import { KeyboardAvoider } from '../../primitives/keyboard-avoider';
 import { Text, textChildren } from '../../primitives/text';
 import { Label } from '../label';
+import { inputContentPadding } from './input-content-padding';
 
 /** Long enough to read as a transition, short enough not to lag a fast tab. */
 const FOCUS_DURATION = 150;
@@ -303,6 +304,9 @@ export const Input = forwardRef<TextInput, InputProps>(
       setEndWidth(event.nativeEvent.layout.width);
     }, []);
 
+    const startPadding = inputContentPadding(startWidth, !!startContent);
+    const endPadding = inputContentPadding(endWidth, !!endContent);
+
     /*
      * The content is quieter than the value. An icon at the same weight as the
      * text reads as part of what was typed, and the placeholder colour is
@@ -325,8 +329,8 @@ export const Input = forwardRef<TextInput, InputProps>(
           borderStyle,
           // Only the side that has content, and only once it has been
           // measured — a 0 here would wipe out the field's own padding.
-          startWidth ? { paddingStart: startWidth } : null,
-          endWidth ? { paddingEnd: endWidth } : null,
+          startPadding ? { paddingStart: startPadding } : null,
+          endPadding ? { paddingEnd: endPadding } : null,
           // Caller styles come last so InputGroup can pad the field around its
           // decorators, but never last enough to drop the animated border.
           style,

package/src/components/input/input-content-padding.ts

@@ -0,0 +1,3 @@
+export function inputContentPadding(width: number, present: boolean): number | undefined {
+  return present && width > 0 && Number.isFinite(width) ? width : undefined;
+}

package/src/components/input-group/index.tsx

@@ -11,7 +11,6 @@ import {
   useCallback,
   useContext,
   useMemo,
-  useState,
   type ReactNode,
 } from 'react';
 import {
@@ -23,6 +22,12 @@ import {
 import { tv } from 'tailwind-variants';
 import { Input, type InputProps } from '../input';
 import { textChildren } from '../../primitives/text';
+import {
+  useInputGroupDecoratorMeasurement,
+  useInputGroupMeasurements,
+  type InputGroupDecoratorOwner,
+  type InputGroupDecoratorSide,
+} from './input-group-measurements';
 
 const inputGroupVariants = tv({
   slots: {
@@ -41,8 +46,15 @@ interface InputGroupState {
   isDisabled: boolean;
   prefixWidth: number;
   suffixWidth: number;
-  setPrefixWidth: (width: number) => void;
-  setSuffixWidth: (width: number) => void;
+  measureDecorator: (
+    side: InputGroupDecoratorSide,
+    owner: InputGroupDecoratorOwner,
+    width: number
+  ) => void;
+  removeDecorator: (
+    side: InputGroupDecoratorSide,
+    owner: InputGroupDecoratorOwner
+  ) => void;
 }
 
 const InputGroupContext = createContext<InputGroupState | null>(null);
@@ -61,12 +73,24 @@ export interface InputGroupProps extends ViewProps {
 const InputGroupRoot = forwardRef<View, InputGroupProps>(
   ({ className, isDisabled = false, children, ...props }, ref) => {
     const { root } = inputGroupVariants();
-    const [prefixWidth, setPrefixWidth] = useState(0);
-    const [suffixWidth, setSuffixWidth] = useState(0);
+    const { prefixWidth, suffixWidth, measureDecorator, removeDecorator } =
+      useInputGroupMeasurements();
 
     const value = useMemo<InputGroupState>(
-      () => ({ isDisabled, prefixWidth, suffixWidth, setPrefixWidth, setSuffixWidth }),
-      [isDisabled, prefixWidth, suffixWidth]
+      () => ({
+        isDisabled,
+        prefixWidth,
+        suffixWidth,
+        measureDecorator,
+        removeDecorator,
+      }),
+      [
+        isDisabled,
+        prefixWidth,
+        suffixWidth,
+        measureDecorator,
+        removeDecorator,
+      ]
     );
 
     return (
@@ -97,14 +121,18 @@ function createDecorator(side: 'prefix' | 'suffix') {
     ({ className, isDecorative = false, onLayout, children, ...props }, ref) => {
       const group = useInputGroup();
       const slots = inputGroupVariants({ isDisabled: group?.isDisabled ?? false });
-      const setWidth = side === 'prefix' ? group?.setPrefixWidth : group?.setSuffixWidth;
+      const measure = useInputGroupDecoratorMeasurement(
+        side,
+        group?.measureDecorator,
+        group?.removeDecorator
+      );
 
       const handleLayout = useCallback(
         (event: LayoutChangeEvent) => {
-          setWidth?.(event.nativeEvent.layout.width);
+          measure(event.nativeEvent.layout.width);
           onLayout?.(event);
         },
-        [setWidth, onLayout]
+        [measure, onLayout]
       );
 
       return (

package/src/components/input-group/input-group-measurements.ts

@@ -0,0 +1,98 @@
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+
+export type InputGroupDecoratorSide = 'prefix' | 'suffix';
+export type InputGroupDecoratorOwner = symbol;
+
+type Widths = Record<InputGroupDecoratorSide, number>;
+type Registries = Record<
+  InputGroupDecoratorSide,
+  Map<InputGroupDecoratorOwner, number>
+>;
+
+export interface InputGroupMeasurements {
+  prefixWidth: number;
+  suffixWidth: number;
+  measureDecorator: (
+    side: InputGroupDecoratorSide,
+    owner: InputGroupDecoratorOwner,
+    width: number
+  ) => void;
+  removeDecorator: (
+    side: InputGroupDecoratorSide,
+    owner: InputGroupDecoratorOwner
+  ) => void;
+}
+
+type MeasureDecorator = InputGroupMeasurements['measureDecorator'];
+type RemoveDecorator = InputGroupMeasurements['removeDecorator'];
+
+const emptyWidths = (): Widths => ({ prefix: 0, suffix: 0 });
+
+function measuredWidth(registry: Map<InputGroupDecoratorOwner, number>) {
+  let width = 0;
+  for (const candidate of registry.values()) width = Math.max(width, candidate);
+  return width;
+}
+
+/** Keeps measured padding tied to the decorators that are still mounted. */
+export function useInputGroupMeasurements(): InputGroupMeasurements {
+  const registries = useRef<Registries>({ prefix: new Map(), suffix: new Map() });
+  const [widths, setWidths] = useState<Widths>(emptyWidths);
+
+  const commitWidth = useCallback((side: InputGroupDecoratorSide) => {
+    const width = measuredWidth(registries.current[side]);
+    setWidths((current) =>
+      current[side] === width ? current : { ...current, [side]: width }
+    );
+  }, []);
+
+  const measureDecorator = useCallback(
+    (side: InputGroupDecoratorSide, owner: InputGroupDecoratorOwner, width: number) => {
+      const registry = registries.current[side];
+      if (Number.isFinite(width) && width > 0) registry.set(owner, width);
+      else registry.delete(owner);
+      commitWidth(side);
+    },
+    [commitWidth]
+  );
+
+  const removeDecorator = useCallback(
+    (side: InputGroupDecoratorSide, owner: InputGroupDecoratorOwner) => {
+      if (!registries.current[side].delete(owner)) return;
+      commitWidth(side);
+    },
+    [commitWidth]
+  );
+
+  return {
+    prefixWidth: widths.prefix,
+    suffixWidth: widths.suffix,
+    measureDecorator,
+    removeDecorator,
+  };
+}
+
+/** Gives one mounted decorator an owner token and unregisters only that owner. */
+export function useInputGroupDecoratorMeasurement(
+  side: InputGroupDecoratorSide,
+  measureDecorator: MeasureDecorator | undefined,
+  removeDecorator: RemoveDecorator | undefined
+) {
+  const owner = useRef<InputGroupDecoratorOwner>(Symbol(side));
+  const width = useRef(0);
+
+  useLayoutEffect(() => {
+    // Re-register the last layout if React replays effects in Strict Mode or
+    // the decorator moves between InputGroup providers.
+    if (width.current > 0) measureDecorator?.(side, owner.current, width.current);
+    return () => removeDecorator?.(side, owner.current);
+  }, [measureDecorator, removeDecorator, side]);
+
+  return useCallback(
+    (nextWidth: number) => {
+      width.current = nextWidth;
+      measureDecorator?.(side, owner.current, nextWidth);
+    },
+    [measureDecorator, side]
+  );
+}