@astryxdesign/core 0.7.7-canary.c0929c8 → 0.7.7-canary.c19ca12

package/dist/SegmentedControl/useSegmentedTouchTracking.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @file useSegmentedTouchTracking.ts
+ * @input The radiogroup element, the selection motion controller and whether
+ *   the control is enabled
+ * @output useSegmentedTouchTracking (a press of any pointer, landing to
+ *   lift, and its ClickWait), and segmentTargetAt, measureSegments and
+ *   liftTargetAt, the segment a pointer counts for
+ * @position Internal to SegmentedControl; drives useSegmentedSelectionMotion.ts
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/SegmentedControl/useSegmentedSelectionMotion.ts
+ * - /packages/core/src/SegmentedControl/__tests__/SegmentedControl.interaction.browser.spec.ts
+ */
+import { type RefObject } from 'react';
+import { type SegmentedSelectionMotion } from './useSegmentedSelectionMotion.js';
+/**
+ * A tap's click still to come. Until it runs, a focus move the tap causes
+ * selects nothing. A key press, the next press or a cancel ends the wait.
+ */
+export interface ClickWait {
+    readonly isAwaiting: () => boolean;
+    readonly end: () => void;
+}
+/** The control's box as measured when the finger landed: viewport px. */
+export interface ControlBounds {
+    readonly left: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+}
+/** A segment as measured when the finger landed: its viewport span, px. */
+export interface SegmentSpan {
+    readonly element: HTMLElement;
+    readonly left: number;
+    readonly right: number;
+}
+/** Every segment of `track`, disabled ones included, measured once. */
+export declare function measureSegments(track: HTMLElement): SegmentSpan[];
+/**
+ * The segment a finger at viewport `x` counts for: the one under it, else the
+ * nearest. A gap between two segments splits at its middle, as UIKit's
+ * segments share an edge. Past the ends, the end segment counts. The result is
+ * null when that segment is disabled.
+ */
+export declare function segmentTargetAt(x: number, segments: ReadonlyArray<SegmentSpan>): HTMLElement | null;
+/**
+ * The segment a lift at viewport (`x`, `y`) commits: inside the control's
+ * `bounds`, the one `segmentTargetAt` counts it for; outside them, none. A
+ * press that slides off cancels, because the control selects rather than
+ * toggles: a second press would not undo it.
+ */
+export declare function liftTargetAt(x: number, y: number, bounds: ControlBounds, segments: ReadonlyArray<SegmentSpan>): HTMLElement | null;
+/**
+ * Tracks a press on the control as UIKit's segmented control does. The press
+ * tracker reports the press from landing to lift. It never claims the
+ * pointer, so a vertical drag still scrolls the page. A horizontal pan
+ * carries the lens. It claims the pointer only past its slop, and the lift
+ * still ends the press.
+ *
+ * The lift decides the segment, wherever the press began. Inside the control,
+ * the segment under the pointer counts, else the nearest one. Outside the
+ * control, nothing counts.
+ *
+ * A tap gets the browser's own click. A drag gets no click from the browser,
+ * so the tracker clicks the segment at the lift. Either way the item's
+ * `onClick` runs once and can cancel the selection. A mouse and a pen are
+ * tracked as a finger is. Keyboard and assistive technology keep the click.
+ */
+export declare function useSegmentedTouchTracking(trackRef: RefObject<HTMLElement | null>, motion: SegmentedSelectionMotion, isEnabled: boolean): ClickWait;
+//# sourceMappingURL=useSegmentedTouchTracking.d.ts.map

package/dist/SegmentedControl/useSegmentedTouchTracking.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSegmentedTouchTracking.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/useSegmentedTouchTracking.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAmB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYvD,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,+BAA+B,CAAC;AAEvC;;;GAGG;AACH,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,UAAU,EAAE,MAAM,OAAO,CAAC;IACnC,QAAQ,CAAC,GAAG,EAAE,MAAM,IAAI,CAAC;CAC1B;AAKD,yEAAyE;AACzE,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,2EAA2E;AAC3E,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,uEAAuE;AACvE,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,GAAG,WAAW,EAAE,CAQjE;AASD;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,CAAC,EAAE,MAAM,EACT,QAAQ,EAAE,aAAa,CAAC,WAAW,CAAC,GACnC,WAAW,GAAG,IAAI,CAWpB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,MAAM,EAAE,aAAa,EACrB,QAAQ,EAAE,aAAa,CAAC,WAAW,CAAC,GACnC,WAAW,GAAG,IAAI,CAUpB;AAID;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACvC,MAAM,EAAE,wBAAwB,EAChC,SAAS,EAAE,OAAO,GACjB,SAAS,CAgKX"}

package/dist/SegmentedControl/useSegmentedTouchTracking.js

@@ -0,0 +1,264 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useSegmentedTouchTracking.ts
+ * @input The radiogroup element, the selection motion controller and whether
+ *   the control is enabled
+ * @output useSegmentedTouchTracking (a press of any pointer, landing to
+ *   lift, and its ClickWait), and segmentTargetAt, measureSegments and
+ *   liftTargetAt, the segment a pointer counts for
+ * @position Internal to SegmentedControl; drives useSegmentedSelectionMotion.ts
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/SegmentedControl/useSegmentedSelectionMotion.ts
+ * - /packages/core/src/SegmentedControl/__tests__/SegmentedControl.interaction.browser.spec.ts
+ */
+import { useRef, useState } from 'react';
+import { PanGestureRecognizer } from "../gestures/PanGestureRecognizer.js";
+import { useGestureRecognizer } from "../gestures/useGestureRecognizer.js";
+import { usePressTracker } from "../gestures/usePressTracker.js";
+import { createActionGroupTracker } from "../hooks/actionGroupTracker.js";
+import { lockSelection } from "../gestures/selectionLock.js";
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import { awaitBrowserClick, clickForLift } from "../utils/browserClickWait.js";
+import { SEGMENT_SELECTOR } from "./useSegmentedSelectionMotion.js";
+
+/**
+ * A tap's click still to come. Until it runs, a focus move the tap causes
+ * selects nothing. A key press, the next press or a cancel ends the wait.
+ */
+
+/** A ref to nothing: hooks given it attach nothing. */
+const DETACHED = {
+  current: null
+};
+
+/** The control's box as measured when the finger landed: viewport px. */
+
+/** A segment as measured when the finger landed: its viewport span, px. */
+
+/** Every segment of `track`, disabled ones included, measured once. */
+export function measureSegments(track) {
+  return Array.from(track.querySelectorAll(SEGMENT_SELECTOR), element => {
+    const rect = element.getBoundingClientRect();
+    return {
+      element,
+      left: rect.left,
+      right: rect.right
+    };
+  });
+}
+function isDisabled(element) {
+  return element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true';
+}
+
+/**
+ * The segment a finger at viewport `x` counts for: the one under it, else the
+ * nearest. A gap between two segments splits at its middle, as UIKit's
+ * segments share an edge. Past the ends, the end segment counts. The result is
+ * null when that segment is disabled.
+ */
+export function segmentTargetAt(x, segments) {
+  let best = null;
+  let distance = Infinity;
+  for (const segment of segments) {
+    const d = Math.max(segment.left - x, 0, x - segment.right);
+    if (d < distance) {
+      distance = d;
+      best = segment;
+    }
+  }
+  return best != null && !isDisabled(best.element) ? best.element : null;
+}
+
+/**
+ * The segment a lift at viewport (`x`, `y`) commits: inside the control's
+ * `bounds`, the one `segmentTargetAt` counts it for; outside them, none. A
+ * press that slides off cancels, because the control selects rather than
+ * toggles: a second press would not undo it.
+ */
+export function liftTargetAt(x, y, bounds, segments) {
+  if (x < bounds.left || x > bounds.right || y < bounds.top || y > bounds.bottom) {
+    return null;
+  }
+  return segmentTargetAt(x, segments);
+}
+const NO_BOUNDS = {
+  left: 0,
+  top: 0,
+  right: -1,
+  bottom: -1
+};
+
+/**
+ * Tracks a press on the control as UIKit's segmented control does. The press
+ * tracker reports the press from landing to lift. It never claims the
+ * pointer, so a vertical drag still scrolls the page. A horizontal pan
+ * carries the lens. It claims the pointer only past its slop, and the lift
+ * still ends the press.
+ *
+ * The lift decides the segment, wherever the press began. Inside the control,
+ * the segment under the pointer counts, else the nearest one. Outside the
+ * control, nothing counts.
+ *
+ * A tap gets the browser's own click. A drag gets no click from the browser,
+ * so the tracker clicks the segment at the lift. Either way the item's
+ * `onClick` runs once and can cancel the selection. A mouse and a pen are
+ * tracked as a finger is. Keyboard and assistive technology keep the click.
+ */
+export function useSegmentedTouchTracking(trackRef, motion, isEnabled) {
+  /** The horizontal pan began for this touch: it is a drag, not a tap. */
+  const isDraggingRef = useRef(false);
+  /** The segments as the finger found them (disabled ones too). */
+  const segmentsRef = useRef([]);
+  /** The control's box as the finger found it: a lift outside it cancels. */
+  const boundsRef = useRef(NO_BOUNDS);
+  const trackerRef = useRef(null);
+  const tracker = trackerRef.current ??= createActionGroupTracker(() => ({
+    roots: () => [trackRef.current],
+    itemSelector: SEGMENT_SELECTOR,
+    highlightExpansion: 0,
+    // The press controller writes the shared press paint on the touched
+    // segment, as everywhere under a finger. The tracker paints nothing of its
+    // own. A held lens shows the selected face.
+    paintsHighlight: false,
+    resolveTarget: (x, y, _targets) => liftTargetAt(x, y, boundsRef.current, segmentsRef.current),
+    onActivated: (item, cancelled) => {
+      const track = trackRef.current;
+      const value = item.dataset.value;
+      if (track != null && value != null) {
+        motion.clicked(track, value, cancelled);
+      }
+    },
+    swallowsNativeClick: true
+  }));
+  /** Click waits still running: an unmount ends them. */
+  const pendingClicksRef = useRef(new Set());
+  /**
+   * A tap lifted and its click has not run. After a direct click, the
+   * browser's late copy can still move focus, so the wait then lasts until the
+   * next key or press.
+   */
+  const clickToComeRef = useRef(false);
+  const [clickWait] = useState(() => ({
+    isAwaiting: () => clickToComeRef.current,
+    end: () => {
+      clickToComeRef.current = false;
+    }
+  }));
+  // Ends the tracker's window listeners and any click wait on unmount.
+  useIsomorphicLayoutEffect(() => {
+    const pendingClicks = pendingClicksRef.current;
+    return () => {
+      tracker.dispose();
+      clickWait.end();
+      for (const end of [...pendingClicks]) {
+        end();
+      }
+    };
+  }, [tracker, clickWait]);
+
+  // Every pointer type is tracked. A disabled control attaches nothing.
+  const attachRef = isEnabled ? trackRef : DETACHED;
+  usePressTracker(attachRef, {
+    isEnabled: () => isEnabled,
+    onControlEvent: (event, touch) => {
+      const track = trackRef.current;
+      if (track == null) {
+        return;
+      }
+      switch (event) {
+        case 'touchDown':
+          {
+            clickWait.end();
+            isDraggingRef.current = false;
+            segmentsRef.current = measureSegments(track);
+            const rect = track.getBoundingClientRect();
+            boundsRef.current = {
+              left: rect.left,
+              top: rect.top,
+              right: rect.right,
+              bottom: rect.bottom
+            };
+            tracker.begin(touch.x, touch.y);
+            motion.begin(track, tracker.beganOn, touch.pointerType === 'touch');
+            break;
+          }
+        case 'touchUpInside':
+        case 'touchUpOutside':
+          {
+            // The lift decides, wherever the press began. A lift outside the
+            // control commits nothing.
+            tracker.move(touch.x, touch.y);
+            const lifted = tracker.highlighted;
+            const isTap = event === 'touchUpInside' && !isDraggingRef.current && lifted != null && lifted === tracker.beganOn;
+            const value = motion.release(lifted);
+            if (value != null && isTap && lifted != null) {
+              // A tap: the browser's own click commits it.
+              tracker.cancel();
+              clickToComeRef.current = true;
+              const pending = pendingClicksRef.current;
+              const endWait = awaitBrowserClick(lifted, {
+                onClicked: isCancelled => {
+                  pending.delete(endWait);
+                  clickWait.end();
+                  motion.clicked(track, value, isCancelled);
+                },
+                onNoClick: () => {
+                  pending.delete(endWait);
+                  motion.clicked(track, value, clickForLift(lifted));
+                }
+              });
+              pending.add(endWait);
+            } else if (value != null) {
+              // No click comes from the browser for a drag: the segment's own
+              // click, inside the lift's event; its onClick may veto it.
+              tracker.end();
+            } else {
+              tracker.cancel();
+            }
+            break;
+          }
+        case 'touchCancel':
+          clickWait.end();
+          tracker.cancel();
+          motion.cancel();
+          break;
+        case 'touchDragInside':
+        case 'touchDragOutside':
+        case 'touchDragEnter':
+        case 'touchDragExit':
+          // The horizontal pan carries the lens.
+          break;
+      }
+    }
+  });
+  useGestureRecognizer(attachRef, () => new PanGestureRecognizer({
+    name: 'segmented-control-drag',
+    direction: 'horizontal',
+    cancelsTouchesInView: false,
+    // No title is selectable under a held finger, as in UIKit. A hold on
+    // the track does something: a drag carries the lens and commits where
+    // it lifts. So this recognizer brings the lock, and the host turns off
+    // text selection and the callout on the track while a finger is down.
+    selectionLock: lockSelection
+  }), recognizer => {
+    if (recognizer.state === 'began') {
+      isDraggingRef.current = true;
+    }
+    if (recognizer.state === 'began' || recognizer.state === 'changed') {
+      const {
+        x,
+        y
+      } = recognizer.location();
+      // The lens chases the finger, then the tracker moves the highlight.
+      motion.drag(x);
+      tracker.move(x, y);
+    }
+  }, {
+    isEnabled
+  });
+  return clickWait;
+}

package/dist/Selector/Selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Selector.d.ts","sourceRoot":"","sources":["../../src/Selector/Selector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAWZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAYpD,OAAO,EAAwB,KAAK,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAkB7E,OAAO,KAAK,EAAC,kBAAkB,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAcpE,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAK7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAS9C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AAI3E,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,+BAA+B,CAAC;AAwdxE,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,WAAW,GAAG,OAAO,CAAC;AAE9D,MAAM,MAAM,oBAAoB,GAAG,oBAAoB,CAAC;AAExD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEjE,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,EAAE,kBAAkB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,iBAAiB,CACzB,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,CACjD,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,cAAc,CAAC;IAC9D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAE/C;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAE/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAEpD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IAIb;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,oBAAoB,CAAC;IAErC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAEjC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAEzD;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAExD;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IAEtC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;IAEpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,KAAK,yBAAyB,CAC5B,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,IAC/C,iBAAiB,CAAC,CAAC,CAAC,GAAG;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxD,CAAC;AAEF,KAAK,sBAAsB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,IAC3E,iBAAiB,CAAC,CAAC,CAAC,GAAG;IACrB;;;;;OAKG;IACH,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/D,CAAC;AAEJ,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,IACzE,yBAAyB,CAAC,CAAC,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAkJ3D;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,kBAAkB,EACnD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,qBAwqCxB;yBAzqCe,QAAQ"}

package/dist/Selector/Selector.js

@@ -18,7 +18,7 @@
  * - /apps/storybook/stories/InputGroup.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Selector/ (showcase blocks)
  */
-import React, { use, useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
+import React, { memo, use, useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { inputDisabledFocusStyles } from "../Field/inputDisabledFocus.js";
 import { useTooltip } from "../Tooltip/index.js";
@@ -37,7 +37,8 @@ import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useAnnounceRenderedText } from "../hooks/useAnnounceRenderedText.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, fontWeightVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
-import { isOptionData, isDivider, isSection, normalizeOption, getSelectableOptions } from "./utils.js";
+import { isOptionData, isDivider, isSection, normalizeOption } from "./utils.js";
+import { getSelectableOptionEntries } from "./selectableOptionEntries.js";
 import { useCombobox, useSelectedItemOffset } from "./hooks.js";
 import { useMenuPress } from "../hooks/useMenuPress.js";
 import { useMenuOverflow } from "../DropdownMenu/useMenuOverflow.js";
@@ -310,6 +311,79 @@ function DefaultOption({
     description: option.description
   });
 }
+/**
+ * Keep each prop stable across renders that do not change this row. A new
+ * `onSelect` or `renderOption` re-renders every row.
+ */
+const SelectorOptionRow = /*#__PURE__*/memo(function SelectorOptionRow({
+  item,
+  flatIndex,
+  id,
+  isHighlighted,
+  isSelected,
+  size,
+  indicatorPosition,
+  renderOption,
+  SelectionMark,
+  onSelect,
+  onHover
+}) {
+  /*
+   * Rendered UNCONDITIONALLY, with the state passed down: the default
+   * check draws nothing when unchecked, but a theme that replaces the
+   * `check` indicator with a radio needs the unselected state to draw
+   * its empty circle. `{isSelected && …}` would make that impossible.
+   *
+   * `selector-check` stays the stable target for the mark's position
+   * in the row; the indicator owns what the mark looks like.
+   */
+  const mark = /*#__PURE__*/_jsx("span", {
+    ...{
+      className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s xgomdpo xjl7jj"
+    },
+    children: /*#__PURE__*/_jsx(SelectionMark, {
+      state: isSelected ? 'checked' : 'unchecked',
+      size: "sm",
+      isDisabled: item.disabled ?? false,
+      ...themeProps('selector-check')
+    })
+  });
+  const optionContent = /*#__PURE__*/_jsx("span", {
+    ...{
+      className: "x78zum5 x6s0dn4 x1txdalj x98rzlu xeuugli"
+    },
+    children: renderOption ? renderOption(item) : /*#__PURE__*/_jsx(DefaultOption, {
+      option: item
+    })
+  });
+  return /*#__PURE__*/_jsx("div", {
+    id: id,
+    role: "option",
+    "aria-selected": isSelected,
+    "aria-disabled": item.disabled,
+    onClick: () => onSelect(item),
+    onMouseEnter: () => onHover(item, flatIndex),
+    ...mergeProps(
+    // Stable theme target on the option row itself, mirroring
+    // `multi-selector-option`: it carries the row's size and runtime
+    // state so a theme can express "selected option at large" or
+    // restyle a given row density without structural selectors. The
+    // row's padding is split across a base and a per-size override (the
+    // default `md` trims the block axis), so `size` is what a theme
+    // needs to reach it. Named `-option-row` because `selector-option`
+    // is the public SelectorOption content primitive, not this row.
+    themeProps('selector-option-row', {
+      size,
+      selected: isSelected ? 'selected' : null,
+      disabled: item.disabled ? 'disabled' : null
+    }), stylex.props(styles.item, itemSizeStyles[size], isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, item.disabled && styles.itemDisabled)),
+    children: indicatorPosition === 'start' ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [mark, optionContent]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [optionContent, mark]
+    })
+  });
+});
 
 // Case-insensitive substring match for a single option. The one predicate used
 // by both the flat filter (count + keyboard nav) and the grouped renderer, so
@@ -482,7 +556,10 @@ export function Selector(props) {
   const triggerLabelledBy = ariaLabelledByProp != null ? joinAriaIDs(ariaLabelledBy ?? fieldLabelId, ariaLabelledByProp) : ariaLabelledBy;
 
   // Flatten options for keyboard navigation
-  const selectableItems = useMemo(() => getSelectableOptions(options), [options]);
+  const selectableEntries = useMemo(() => getSelectableOptionEntries(options), [options]);
+  const selectableItems = useMemo(() => selectableEntries.map(entry => entry.item), [selectableEntries]);
+  // Rows need the same item object on every render, or their memo fails.
+  const normalizedOf = useMemo(() => new Map(selectableEntries.map(entry => [entry.source, entry.item])), [selectableEntries]);
 
   // `action` is declared on the shared option type for `MultiSelector`;
   // this listbox has not adopted it, so it renders the option without the
@@ -900,67 +977,19 @@ export function Selector(props) {
   const SelectionMark = useIndicator('check');
 
   // Render an individual item
-  const renderItem = useCallback((item, flatIndex) => {
-    const isHighlighted = flatIndex === highlightedIndex;
-    const isSelected = item.value === normalizedValue;
-
-    /*
-     * Rendered UNCONDITIONALLY, with the state passed down: the default
-     * check draws nothing when unchecked, but a theme that replaces the
-     * `check` indicator with a radio needs the unselected state to draw
-     * its empty circle. `{isSelected && …}` would make that impossible.
-     *
-     * `selector-check` stays the stable target for the mark's position
-     * in the row; the indicator owns what the mark looks like.
-     */
-    const mark = /*#__PURE__*/_jsx("span", {
-      ...{
-        className: "x3nfvp2 x6s0dn4 xl56j7k x2lah0s xgomdpo xjl7jj"
-      },
-      children: /*#__PURE__*/_jsx(SelectionMark, {
-        state: isSelected ? 'checked' : 'unchecked',
-        size: "sm",
-        isDisabled: item.disabled ?? false,
-        ...themeProps('selector-check')
-      })
-    });
-    const optionContent = /*#__PURE__*/_jsx("span", {
-      ...{
-        className: "x78zum5 x6s0dn4 x1txdalj x98rzlu xeuugli"
-      },
-      children: renderOption ? renderOption(item) : /*#__PURE__*/_jsx(DefaultOption, {
-        option: item
-      })
-    });
-    const content = indicatorPosition === 'start' ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [mark, optionContent]
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [optionContent, mark]
-    });
-    return /*#__PURE__*/_jsx("div", {
-      id: getItemId(flatIndex),
-      role: "option",
-      "aria-selected": isSelected,
-      "aria-disabled": item.disabled,
-      onClick: () => onItemSelect(item),
-      onMouseEnter: () => onItemMouseEnter(item, flatIndex),
-      ...mergeProps(
-      // Stable theme target on the option row itself, mirroring
-      // `multi-selector-option`: it carries the row's size and runtime
-      // state so a theme can express "selected option at large" or
-      // restyle a given row density without structural selectors. The
-      // row's padding is split across a base and a per-size override (the
-      // default `md` trims the block axis), so `size` is what a theme
-      // needs to reach it. Named `-option-row` because `selector-option`
-      // is the public SelectorOption content primitive, not this row.
-      themeProps('selector-option-row', {
-        size,
-        selected: isSelected ? 'selected' : null,
-        disabled: item.disabled ? 'disabled' : null
-      }), stylex.props(styles.item, itemSizeStyles[size], isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, item.disabled && styles.itemDisabled)),
-      children: content
-    }, item.value);
-  }, [renderOption, indicatorPosition, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter, SelectionMark]);
+  const renderItem = useCallback((item, flatIndex) => /*#__PURE__*/_jsx(SelectorOptionRow, {
+    item: item,
+    flatIndex: flatIndex,
+    id: getItemId(flatIndex),
+    isHighlighted: flatIndex === highlightedIndex,
+    isSelected: item.value === normalizedValue,
+    size: size,
+    indicatorPosition: indicatorPosition,
+    renderOption: renderOption,
+    SelectionMark: SelectionMark,
+    onSelect: onItemSelect,
+    onHover: onItemMouseEnter
+  }, item.value), [renderOption, indicatorPosition, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter, SelectionMark]);
 
   // Render all options (handling sections/dividers)
   const renderOptions = useCallback(() => {
@@ -1005,7 +1034,7 @@ export function Selector(props) {
       } else if (isSection(option)) {
         const sectionItems = [];
         for (const opt of option.options) {
-          const normalized = normalizeOption(opt);
+          const normalized = normalizedOf.get(opt) ?? normalizeOption(opt);
           if (isSearching && !optionMatchesQuery(normalized, searchQuery)) {
             continue;
           }
@@ -1034,7 +1063,7 @@ export function Selector(props) {
           }), sectionItems]
         }, `section-${i}`));
       } else if (isOptionData(option)) {
-        const normalized = normalizeOption(option);
+        const normalized = normalizedOf.get(option) ?? normalizeOption(option);
         if (isSearching && !optionMatchesQuery(normalized, searchQuery)) {
           continue;
         }
@@ -1043,7 +1072,7 @@ export function Selector(props) {
       }
     }
     return elements;
-  }, [options, renderItem, hasSearch, searchQuery, filteredItems, isLoading, emptyText, emptySearchText]);
+  }, [options, normalizedOf, renderItem, hasSearch, searchQuery, filteredItems, isLoading, emptyText, emptySearchText]);
 
   // The detached message box renders its own leading status icon, so the
   // on-field icon would duplicate it — keep the chevron indicator instead.

package/dist/Selector/optionShape.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @file optionShape.ts
+ * @input Selector option values
+ * @output The option type guards and `normalizeOption`
+ * @position Internal; re-exported by utils.ts, the public entry point
+ */
+import type { SelectorOptionType, SelectorOptionData, SelectorDivider, SelectorSection } from './types.js';
+/**
+ * Type guard: check if option is a selectable option (string or OptionData)
+ */
+export declare function isOptionData(option: SelectorOptionType): option is SelectorOptionData | string;
+/**
+ * Type guard: check if option is a divider
+ */
+export declare function isDivider(option: SelectorOptionType): option is SelectorDivider;
+/**
+ * Type guard: check if option is a section
+ */
+export declare function isSection(option: SelectorOptionType): option is SelectorSection;
+/**
+ * Normalize string or option to consistent shape
+ */
+export declare function normalizeOption(option: string | SelectorOptionData): SelectorOptionData;
+//# sourceMappingURL=optionShape.d.ts.map

package/dist/Selector/optionShape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"optionShape.d.ts","sourceRoot":"","sources":["../../src/Selector/optionShape.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,eAAe,EAChB,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,wBAAgB,YAAY,CAC1B,MAAM,EAAE,kBAAkB,GACzB,MAAM,IAAI,kBAAkB,GAAG,MAAM,CAKvC;AAED;;GAEG;AACH,wBAAgB,SAAS,CACvB,MAAM,EAAE,kBAAkB,GACzB,MAAM,IAAI,eAAe,CAI3B;AAED;;GAEG;AACH,wBAAgB,SAAS,CACvB,MAAM,EAAE,kBAAkB,GACzB,MAAM,IAAI,eAAe,CAI3B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,GAAG,kBAAkB,GAClC,kBAAkB,CAQpB"}

package/dist/Selector/optionShape.js

@@ -0,0 +1,48 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file optionShape.ts
+ * @input Selector option values
+ * @output The option type guards and `normalizeOption`
+ * @position Internal; re-exported by utils.ts, the public entry point
+ */
+
+/**
+ * Type guard: check if option is a selectable option (string or OptionData)
+ */
+export function isOptionData(option) {
+  if (typeof option === 'string') {
+    return true;
+  }
+  return !('type' in option);
+}
+
+/**
+ * Type guard: check if option is a divider
+ */
+export function isDivider(option) {
+  return typeof option === 'object' && 'type' in option && option.type === 'divider';
+}
+
+/**
+ * Type guard: check if option is a section
+ */
+export function isSection(option) {
+  return typeof option === 'object' && 'type' in option && option.type === 'section';
+}
+
+/**
+ * Normalize string or option to consistent shape
+ */
+export function normalizeOption(option) {
+  if (typeof option === 'string') {
+    return {
+      value: option,
+      label: option
+    };
+  }
+  return {
+    ...option,
+    label: option.label ?? option.value
+  };
+}

package/dist/Selector/selectableOptionEntries.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @file selectableOptionEntries.ts
+ * @input Selector options, with sections and dividers
+ * @output `getSelectableOptionEntries`: each selectable item with the option
+ *   it was given as
+ * @position Internal; the one walk behind utils.ts's `getSelectableOptions`
+ *   and Selector's rows
+ */
+import type { SelectorOptionType, SelectorOptionData } from './types.js';
+/** A selectable option as given, and its normalized data. */
+export interface SelectableOptionEntry {
+    readonly source: string | SelectorOptionData;
+    readonly item: SelectorOptionData;
+}
+/**
+ * Every selectable option (sections flattened, dividers skipped), each with
+ * the option it was given as.
+ */
+export declare function getSelectableOptionEntries(options: SelectorOptionType[]): SelectableOptionEntry[];
+//# sourceMappingURL=selectableOptionEntries.d.ts.map