@astryxdesign/core 0.7.6 → 0.7.7-canary.0d1ddcd

package/src/Slider/useSliderTouch.ts

@@ -0,0 +1,78 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useSliderTouch.ts
+ * @input Slider's value model and parts, and sliderTouchController.ts
+ * @output Exports `useSliderTouch` (the React wiring) and the
+ *   `SliderTouchModel` and `SliderTouchParts` types
+ * @position Internal to Slider. It is the touch layer's one import site, so
+ *   a desktop build can swap that module whole.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Slider/sliderTouchController.ts
+ * - /packages/core/src/Slider/Slider.tsx (the model and the parts)
+ * - /packages/core/src/Slider/useSliderTouch.test.tsx
+ */
+
+import {useEffect, useState} from 'react';
+import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
+import {
+  SliderTouchController,
+  type SliderTouchModel,
+  type SliderTouchParts,
+} from './sliderTouchController';
+
+export type {SliderTouchModel, SliderTouchParts} from './sliderTouchController';
+
+export interface UseSliderTouchOptions {
+  /** The slider is enabled: its gestures attach for every pointer. */
+  readonly isEnabled: boolean;
+  readonly model: SliderTouchModel;
+  readonly getParts: () => SliderTouchParts | null;
+  /** Re-attaches when the thumbs or the orientation change. */
+  readonly thumbCount: number;
+  /**
+   * Whether each thumb renders inside its value tooltip: changing it mounts
+   * new thumbs. So the gestures re-attach.
+   */
+  readonly thumbsWrapped: boolean;
+}
+
+/**
+ * Wires UISlider's tracking to a rendered Slider for every pointer, while it
+ * is enabled. Slider's own pointer handlers then take only a mouse press on
+ * the track.
+ */
+export function useSliderTouch({
+  isEnabled,
+  model,
+  getParts,
+  thumbCount,
+  thumbsWrapped,
+}: UseSliderTouchOptions): void {
+  // The parts getter reads only refs. So the first one stays current.
+  const [controller] = useState(
+    () => new SliderTouchController(model, getParts),
+  );
+  // Hands the controller this render's model: the values and callbacks it
+  // reads from gesture callbacks outside React's render.
+  useIsomorphicLayoutEffect(() => {
+    controller.setModel(model);
+  });
+  const {isHorizontal} = model;
+  // Synchronizes the thumbs with the document's gesture host. Their
+  // PressTrackers and pans attach while the slider is enabled. They detach,
+  // ending any interaction silently, when it is disabled or the thumbs
+  // change.
+  useEffect(() => {
+    if (!isEnabled) {
+      return undefined;
+    }
+    return controller.attach();
+  }, [controller, isEnabled, thumbCount, isHorizontal, thumbsWrapped]);
+  // Releases the controller's animators and gesture host listeners on
+  // unmount.
+  useEffect(() => () => controller.dispose(), [controller]);
+}

package/src/Typeahead/BaseTypeahead.tsx

@@ -79,6 +79,7 @@ import {
   useComponentTranslator,
 } from '../i18n/useComponentTranslator';
 import english from '../i18n/generated-english/Typeahead/BaseTypeahead.generated';
+import {textEntryTraitAttributes} from '../Field/textEntryTraits';
 
 registerEnglishFallback(english);
 // =============================================================================
@@ -607,8 +608,9 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
   );
   // Committed values (Tokenizer's tokens) leave the shown rows in the same
   // render that commits them, before any reload answers, so a list never
-  // offers a token (component:Tokenizer FR13). The highlight stays on its item
-  // when that item remains. The previous key is remembered in state, like
+  // offers a token (component:Tokenizer FR13). Until the reload answers, the
+  // highlight stays on its item when that item remains; the reloaded list
+  // highlights its first row. The previous key is remembered in state, like
   // `sourceOfState` below.
   const committedChoices = useCommittedChoices();
   const committedChoicesKey = committedChoices?.key;
@@ -1119,11 +1121,16 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
       resultsGenRef.current = gen;
       const shown = bootstrapResults.slice(0, maxMenuItems);
       const nextHighlightedIndex = shown.length > 0 ? 0 : -1;
+      // A focus load that yields no choice, or fails (it arrives here empty),
+      // closes the list rather than leaving it open and empty. A typed
+      // query's empty search is not a focus load and keeps its empty-search
+      // message.
       if (
         results.length === 0 &&
         shown.length === 0 &&
         highlightedIndex === -1
       ) {
+        popover.hide();
         return;
       }
       setHeldHeight(null);
@@ -1131,11 +1138,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
       setHighlightedIndex(nextHighlightedIndex);
       if (bootstrapResults.length > 0) {
         showLayer();
-      } else if (committedChoices != null) {
-        // A Tokenizer list left with no eligible choice (its focus entries
-        // all committed, or the request failed) closes rather than staying
-        // open and empty (component:Tokenizer FR15). A plain Typeahead
-        // provides no committed choices and keeps its current behavior.
+      } else {
         popover.hide();
       }
     },
@@ -1146,7 +1149,6 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
       showLayer,
       replaceResults,
       popover,
-      committedChoices,
     ],
   );
 
@@ -1722,6 +1724,12 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
         autoFocus={hasAutoFocus}
         data-autofocus={hasAutoFocus || undefined}
         autoComplete="off"
+        // Autocorrect would rewrite names and identifiers. The key is only a
+        // label: Enter still commits the highlighted option.
+        {...textEntryTraitAttributes({
+          enterKeyHint: 'search',
+          hasAutoCorrect: false,
+        })}
         {...mergeProps(
           stylex.props(
             styles.input,

package/src/gestures/GestureArena.ts

@@ -228,6 +228,7 @@ export class GestureArena {
           target: input.target,
           scroll: input.scroll ?? null,
           takenByBrowser: false,
+          ...(input.scrollType == null ? {} : {scrollType: input.scrollType}),
         };
         const participants: GestureRecognizer[] = [];
         for (const [depth, recognizer] of input.recognizers.entries()) {