@astryxdesign/core 0.5.1 → 0.5.2-canary.0f46244

package/src/Selector/selectorPresentation.stylex.ts

@@ -0,0 +1,20 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file selectorPresentation.stylex.ts
+ * @input Uses field border tokens
+ * @output Shared focus-return styles for Selector and MultiSelector
+ * @position Internal visual policy for selector presentation changes
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import {colorVars} from '../theme/tokens.stylex';
+
+export const selectorPresentationStyles = stylex.create({
+  pointerRestoredFocus: {
+    borderColor: colorVars['--color-border-emphasized'],
+    boxShadow: 'none',
+    outlineWidth: '0',
+    outlineStyle: 'none',
+  },
+});

package/src/Selector/useSelectorPresentation.ts

@@ -0,0 +1,147 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useSelectorPresentation.ts
+ * @input Uses the shared adaptive presentation policy and usePopover
+ * @output Coordinates popover and bottom-sheet disclosure state
+ * @position Internal presentation controller shared by Selector and MultiSelector
+ */
+
+import {
+  useCallback,
+  useRef,
+  useState,
+  type FocusEvent,
+  type RefObject,
+} from 'react';
+import {
+  usePopoverInternal,
+  type UsePopoverOptions,
+  type UsePopoverReturn,
+} from '../Popover/usePopover';
+import {
+  useAdaptivePresentation,
+  type AdaptivePresentation,
+  type ResolvedAdaptivePresentation,
+} from '../hooks/useAdaptivePresentation';
+import {useFocusReturnVisibility} from '../hooks/useFocusReturnVisibility';
+
+interface UseSelectorPresentationOptions {
+  presentation: AdaptivePresentation;
+  onHide: () => void;
+  popoverOptions: Omit<UsePopoverOptions, 'onHide'>;
+  triggerRef: RefObject<HTMLElement | null>;
+}
+
+interface SelectorPresentationController {
+  activePresentation: ResolvedAdaptivePresentation;
+  hide: () => void;
+  isOpen: boolean;
+  isSheetOpen: boolean;
+  isTriggerFocusRingSuppressed: boolean;
+  onSheetOpenChange: (isOpen: boolean) => void;
+  onTriggerFocus: (event: FocusEvent<HTMLElement>) => void;
+  popover: UsePopoverReturn & {wasJustDismissed: () => boolean};
+  show: () => void;
+  wasJustDismissed: () => boolean;
+}
+
+export function useSelectorPresentation({
+  presentation,
+  onHide,
+  popoverOptions,
+  triggerRef,
+}: UseSelectorPresentationOptions): SelectorPresentationController {
+  const resolvedPresentation = useAdaptivePresentation(presentation);
+  const activePresentationRef =
+    useRef<ResolvedAdaptivePresentation>(resolvedPresentation);
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const isSheetOpenRef = useRef(false);
+  const onHideRef = useRef(onHide);
+  const {
+    isFocusRingSuppressed,
+    onFocusReturnTargetFocus,
+    prepareFocusReturn,
+    resetFocusReturn,
+  } = useFocusReturnVisibility();
+  onHideRef.current = onHide;
+
+  const handlePopoverHide = useCallback(() => {
+    prepareFocusReturn();
+    onHideRef.current();
+    triggerRef.current?.focus();
+  }, [prepareFocusReturn, triggerRef]);
+  const popover = usePopoverInternal({
+    ...popoverOptions,
+    onHide: handlePopoverHide,
+  });
+  const {
+    hide: hidePopover,
+    show: showPopover,
+    wasJustDismissed: wasPopoverJustDismissed,
+  } = popover;
+
+  const show = useCallback(() => {
+    resetFocusReturn();
+    activePresentationRef.current = resolvedPresentation;
+    if (resolvedPresentation === 'bottom-sheet') {
+      isSheetOpenRef.current = true;
+      setIsSheetOpen(true);
+    } else {
+      showPopover();
+    }
+  }, [resetFocusReturn, resolvedPresentation, showPopover]);
+
+  const hide = useCallback(() => {
+    if (isSheetOpenRef.current) {
+      prepareFocusReturn();
+      isSheetOpenRef.current = false;
+      setIsSheetOpen(false);
+      onHideRef.current();
+    } else {
+      hidePopover();
+    }
+  }, [hidePopover, prepareFocusReturn]);
+
+  const handleTriggerFocus = useCallback(
+    (_event: FocusEvent<HTMLElement>) => onFocusReturnTargetFocus(),
+    [onFocusReturnTargetFocus],
+  );
+
+  const handleSheetOpenChange = useCallback(
+    (nextIsOpen: boolean) => {
+      if (nextIsOpen) {
+        show();
+      } else {
+        hide();
+      }
+    },
+    [hide, show],
+  );
+
+  const isOpen = popover.isOpen || isSheetOpen;
+  const activePresentation = isOpen
+    ? activePresentationRef.current
+    : resolvedPresentation;
+
+  const wasJustDismissed = useCallback(
+    () =>
+      activePresentationRef.current === 'popover' && wasPopoverJustDismissed(),
+    [wasPopoverJustDismissed],
+  );
+
+  return {
+    activePresentation,
+    hide,
+    isOpen,
+    isSheetOpen,
+    isTriggerFocusRingSuppressed: isFocusRingSuppressed,
+    onSheetOpenChange: handleSheetOpenChange,
+    onTriggerFocus: handleTriggerFocus,
+    popover,
+    show,
+    wasJustDismissed,
+  };
+}

package/src/Slider/Slider.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'Slider',
   displayName: 'Slider',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["slider","range","slidebar","trackbar","scrubber","knob","thumb","rangeslider"],
   playground: {
     defaults: {
@@ -364,4 +364,4 @@ export const docsDense = {
     labelTooltip: 'Tooltip text for info icon next to label.',
     xstyle: 'StyleX layout styles; must be stylex.create() value.',
   },
-};
+};

package/src/Switch/Switch.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'Switch',
   displayName: 'Switch',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'switch',
     'toggle',

package/src/TextArea/TextArea.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'TextArea',
   displayName: 'Text Area',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["textarea","textfield","multiline","comment","message","autoresize","autosize","charlimit"],
   props: [
     {

package/src/TextInput/TextInput.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'TextInput',
   displayName: 'Text Input',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["textinput","textfield","input","search","clearable","prefix","suffix","adornment","validation"],
   props: [
     {

package/src/TimeInput/TimeInput.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'TimeInput',
   displayName: 'Time Input',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'timeinput',
     'timepicker',

package/src/Toast/ToastViewport.test.tsx

@@ -793,6 +793,11 @@ describe('Toast swipe dismissal', () => {
     expect(visualToast.style.getPropertyValue('--_toast-swipe-exit-y')).toBe(
       '120%',
     );
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('');
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
+      '',
+    );
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-scale')).toBe('');
     expect(getComputedStyle(visualToast).transform).not.toContain('translateX');
   });
 
@@ -1147,11 +1152,9 @@ describe('Toast swipe dismissal', () => {
 
     expect(onHide).toHaveBeenCalledWith('manual');
     expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
-      '0.700',
-    );
-    expect(visualToast.style.getPropertyValue('--_toast-swipe-scale')).toBe(
-      '0.985',
+      '',
     );
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-scale')).toBe('');
     expect(visualToast.style.getPropertyValue('--_toast-swipe-exit-y')).toBe(
       'calc(-1 * 120%)',
     );
@@ -1248,6 +1251,117 @@ describe('Toast swipe dismissal', () => {
     );
   });
 
+  it('abandons a one-finger swipe when a second touch starts', () => {
+    const {visualToast, onHide} = renderSwipeToast();
+    const dispatchTouch = (
+      type: 'touchstart' | 'touchmove',
+      touches: {identifier: number; clientX: number; clientY: number}[],
+      changedTouches = touches,
+    ) => {
+      const event = new Event(type, {bubbles: true, cancelable: true});
+      Object.defineProperty(event, 'touches', {value: touches});
+      Object.defineProperty(event, 'changedTouches', {value: changedTouches});
+      visualToast.dispatchEvent(event);
+      return event;
+    };
+    const first = {identifier: 51, clientX: 10, clientY: 0};
+    const second = {identifier: 52, clientX: 30, clientY: 40};
+
+    act(() => {
+      dispatchTouch('touchstart', [first]);
+      dispatchTouch('touchmove', [{...first, clientY: 40}]);
+    });
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('40px');
+
+    act(() => {
+      dispatchTouch('touchstart', [first, second], [second]);
+    });
+    const multitouchMove = dispatchTouch('touchmove', [first, second]);
+
+    expect(multitouchMove.defaultPrevented).toBe(false);
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('');
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
+      '',
+    );
+    expect(onHide).not.toHaveBeenCalled();
+  });
+
+  it('does not dismiss when another touch remains outside the Toast', () => {
+    const {visualToast, onHide} = renderSwipeToast();
+    const first = {identifier: 61, clientX: 10, clientY: 0};
+    const second = {identifier: 62, clientX: 200, clientY: 200};
+    const dispatchTouch = (
+      type: 'touchstart' | 'touchmove' | 'touchend',
+      touches: (typeof first)[],
+      changedTouches: (typeof first)[],
+    ) => {
+      const event = new Event(type, {bubbles: true, cancelable: true});
+      Object.defineProperty(event, 'touches', {value: touches});
+      Object.defineProperty(event, 'changedTouches', {value: changedTouches});
+      visualToast.dispatchEvent(event);
+      return event;
+    };
+
+    act(() => {
+      dispatchTouch('touchstart', [first], [first]);
+      dispatchTouch(
+        'touchmove',
+        [{...first, clientY: 60}],
+        [{...first, clientY: 60}],
+      );
+    });
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('60px');
+
+    // The second contact began outside the Toast, so its touchstart did not
+    // reach the Toast listener. Ending the tracked finger must still cancel
+    // while that other contact remains active.
+    act(() => {
+      dispatchTouch('touchend', [second], [{...first, clientY: 60}]);
+    });
+
+    expect(onHide).not.toHaveBeenCalled();
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('');
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
+      '',
+    );
+  });
+
+  it('does not let a pen event with the same numeric ID control a touch gesture', () => {
+    const {visualToast, onHide} = renderSwipeToast();
+    const touch = {identifier: 7, clientX: 10, clientY: 0};
+    const touchStart = new Event('touchstart', {
+      bubbles: true,
+      cancelable: true,
+    });
+    Object.defineProperty(touchStart, 'touches', {value: [touch]});
+    Object.defineProperty(touchStart, 'changedTouches', {value: [touch]});
+
+    act(() => {
+      visualToast.dispatchEvent(touchStart);
+      fireEvent.pointerMove(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 10,
+        clientY: 60,
+      });
+      fireEvent.pointerUp(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 10,
+        clientY: 60,
+      });
+    });
+
+    expect(onHide).not.toHaveBeenCalled();
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('');
+
+    act(() => {
+      visualToast.dispatchEvent(
+        new Event('touchcancel', {bubbles: true, cancelable: true}),
+      );
+    });
+  });
+
   it('removes native touch listeners when a Toast unmounts', () => {
     const {visualToast, unmount} = renderSwipeToast();
     const removeListener = vi.spyOn(visualToast, 'removeEventListener');

package/src/Toast/useToastGesture.ts

@@ -25,12 +25,14 @@ const SWIPE_ACTIVE_SCALE_MAX = 0.02;
 export type ToastGestureDirection = 1 | -1;
 
 interface GesturePoint {
+  source: 'touch' | 'pen';
   pointerId: number;
   clientX: number;
   clientY: number;
 }
 
 interface GestureState {
+  source: GesturePoint['source'];
   pointerId: number;
   startX: number;
   startY: number;
@@ -126,6 +128,7 @@ export function useToastGesture({
       }
       const surfaceSize = Math.max(root.getBoundingClientRect().height, 1);
       gestureRef.current = {
+        source: point.source,
         pointerId: point.pointerId,
         startX: point.clientX,
         startY: point.clientY,
@@ -159,7 +162,12 @@ export function useToastGesture({
     ) => {
       const state = gestureRef.current;
       const root = rootRef.current;
-      if (!state || !root || point.pointerId !== state.pointerId) {
+      if (
+        !state ||
+        !root ||
+        point.source !== state.source ||
+        point.pointerId !== state.pointerId
+      ) {
         return;
       }
       const deltaX = point.clientX - state.startX;
@@ -209,7 +217,12 @@ export function useToastGesture({
     (point: GesturePoint) => {
       const state = gestureRef.current;
       const root = rootRef.current;
-      if (!state || !root || point.pointerId !== state.pointerId) {
+      if (
+        !state ||
+        !root ||
+        point.source !== state.source ||
+        point.pointerId !== state.pointerId
+      ) {
         return;
       }
       const travel = Math.max(
@@ -225,6 +238,10 @@ export function useToastGesture({
       gestureRef.current = null;
       root.style.removeProperty('transition-duration');
       if (isDismissed) {
+        // The exit animation owns the final translation. Clear the live-drag
+        // transform/fade/scale first so a standalone Toast does not remain
+        // partially translated or faded after its dismiss callback fires.
+        clearTransientStyles(root);
         root.style.setProperty(
           '--_toast-swipe-exit-y',
           state.direction === 1
@@ -247,7 +264,15 @@ export function useToastGesture({
       if (
         event.pointerType === 'pen' &&
         (event.button == null || event.button === 0) &&
-        beginGesture(event, event.target)
+        beginGesture(
+          {
+            source: 'pen',
+            pointerId: event.pointerId,
+            clientX: event.clientX,
+            clientY: event.clientY,
+          },
+          event.target,
+        )
       ) {
         rootRef.current?.setPointerCapture?.(event.pointerId);
       }
@@ -261,7 +286,12 @@ export function useToastGesture({
         return;
       }
       moveGesture(
-        event,
+        {
+          source: 'pen',
+          pointerId: event.pointerId,
+          clientX: event.clientX,
+          clientY: event.clientY,
+        },
         () => event.preventDefault(),
         () => rootRef.current?.releasePointerCapture?.(event.pointerId),
       );
@@ -275,7 +305,12 @@ export function useToastGesture({
         return;
       }
       rootRef.current?.releasePointerCapture?.(event.pointerId);
-      endGesture(event);
+      endGesture({
+        source: 'pen',
+        pointerId: event.pointerId,
+        clientX: event.clientX,
+        clientY: event.clientY,
+      });
     },
     [endGesture],
   );
@@ -284,6 +319,7 @@ export function useToastGesture({
     (event: ReactPointerEvent<HTMLDivElement>) => {
       if (
         event.pointerType === 'pen' &&
+        gestureRef.current?.source === 'pen' &&
         gestureRef.current?.pointerId === event.pointerId
       ) {
         resetGesture(true);
@@ -298,12 +334,14 @@ export function useToastGesture({
       return;
     }
     const point = (touch: Touch): GesturePoint => ({
+      source: 'touch',
       pointerId: touch.identifier,
       clientX: touch.clientX,
       clientY: touch.clientY,
     });
     const changedTouch = (event: TouchEvent) => {
-      const pointerId = gestureRef.current?.pointerId;
+      const state = gestureRef.current;
+      const pointerId = state?.source === 'touch' ? state.pointerId : null;
       return pointerId == null
         ? undefined
         : [...event.changedTouches].find(
@@ -311,12 +349,23 @@ export function useToastGesture({
           );
     };
     const handleTouchStart = (event: TouchEvent) => {
-      const touch = event.touches.length === 1 ? event.changedTouches[0] : null;
-      if (touch) {
+      if (event.touches?.length !== 1) {
+        // A second contact means the browser may be handling pinch zoom or
+        // two-finger scrolling. Abandon any accepted one-finger swipe before
+        // touchmove can suppress that native gesture.
+        resetGesture(true);
+        return;
+      }
+      const touch = event.changedTouches[0];
+      if (touch != null) {
         beginGesture(point(touch), event.target);
       }
     };
     const handleTouchMove = (event: TouchEvent) => {
+      if (event.touches?.length !== 1) {
+        resetGesture(true);
+        return;
+      }
       const touch = changedTouch(event);
       if (touch) {
         moveGesture(point(touch), () => {
@@ -327,6 +376,10 @@ export function useToastGesture({
       }
     };
     const handleTouchEnd = (event: TouchEvent) => {
+      if (event.touches.length > 0) {
+        resetGesture(true);
+        return;
+      }
       const touch = changedTouch(event);
       if (touch) {
         endGesture(point(touch));

package/src/Tokenizer/Tokenizer.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'Tokenizer',
   displayName: 'Tokenizer',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["tokenizer","multiselect","multi-select","chips","tags","combobox","autocomplete","taginput","chipinput"],
   props: [
     {

package/src/Typeahead/Typeahead.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'Typeahead',
   displayName: 'Typeahead',
   group: 'Typeahead',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'typeahead',
     'autocomplete',

package/src/hooks/useAdaptivePresentation.ts

@@ -0,0 +1,35 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useAdaptivePresentation.ts
+ * @input Uses the shared SSR-safe media-query hook
+ * @output Resolves popover/bottom-sheet presentation policy
+ * @position Internal overlay policy shared across component families
+ */
+
+import {useMediaQuery} from './useMediaQuery';
+
+export type AdaptivePresentation = 'popover' | 'bottom-sheet' | 'adaptive';
+export type ResolvedAdaptivePresentation = Exclude<
+  AdaptivePresentation,
+  'adaptive'
+>;
+
+// Width keeps desktop-class tablets and large touch displays anchored by
+// default. Pointer capability, rather than `hover: none`, avoids excluding
+// touch browsers that also report hover capability.
+export const COMPACT_TOUCH_PRESENTATION_QUERY =
+  '(max-width: 768px) and (pointer: coarse)';
+
+export function useAdaptivePresentation(
+  presentation: AdaptivePresentation,
+): ResolvedAdaptivePresentation {
+  const isCompactTouch = useMediaQuery(COMPACT_TOUCH_PRESENTATION_QUERY);
+  return presentation === 'adaptive'
+    ? isCompactTouch
+      ? 'bottom-sheet'
+      : 'popover'
+    : presentation;
+}

package/src/hooks/useFocusReturnVisibility.ts

@@ -0,0 +1,45 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useFocusReturnVisibility.ts
+ * @input Uses the shared interaction-modality tracker
+ * @output Preserves returned focus while suppressing pointer-only focus rings
+ * @position Internal focus-return policy for adaptive overlays
+ */
+
+import {useCallback, useEffect, useState} from 'react';
+import {
+  getInteractionModality,
+  trackInteractionModality,
+} from '../utils/interactionModality';
+
+export function useFocusReturnVisibility() {
+  const [isFocusRingSuppressed, setIsFocusRingSuppressed] = useState(false);
+
+  useEffect(() => {
+    trackInteractionModality();
+  }, []);
+
+  const prepareFocusReturn = useCallback(() => {
+    setIsFocusRingSuppressed(getInteractionModality() === 'pointer');
+  }, []);
+
+  const resetFocusReturn = useCallback(() => {
+    setIsFocusRingSuppressed(false);
+  }, []);
+
+  const onFocusReturnTargetFocus = useCallback(() => {
+    if (getInteractionModality() === 'keyboard') {
+      setIsFocusRingSuppressed(false);
+    }
+  }, []);
+
+  return {
+    isFocusRingSuppressed,
+    onFocusReturnTargetFocus,
+    prepareFocusReturn,
+    resetFocusReturn,
+  };
+}

package/src/hooks/useFocusTrap.test.tsx

@@ -193,6 +193,46 @@ describe('useFocusTrap tabbable model (infra-8)', () => {
     expect(screen.getByTestId('first')).toHaveFocus();
   });
 
+  it('moves from a programmatic container focus target into the tabbable cycle', () => {
+    render(
+      <Trap>
+        <button type="button" data-testid="first">
+          First
+        </button>
+        <button type="button" data-testid="last">
+          Last
+        </button>
+      </Trap>,
+    );
+    const trap = screen.getByTestId('trap');
+    trap.tabIndex = -1;
+    trap.focus();
+
+    fireEvent.keyDown(document, {key: 'Tab'});
+
+    expect(screen.getByTestId('first')).toHaveFocus();
+  });
+
+  it('moves backward from a programmatic container focus target to the last tabbable control', () => {
+    render(
+      <Trap>
+        <button type="button" data-testid="first">
+          First
+        </button>
+        <button type="button" data-testid="last">
+          Last
+        </button>
+      </Trap>,
+    );
+    const trap = screen.getByTestId('trap');
+    trap.tabIndex = -1;
+    trap.focus();
+
+    fireEvent.keyDown(document, {key: 'Tab', shiftKey: true});
+
+    expect(screen.getByTestId('last')).toHaveFocus();
+  });
+
   it('keeps a programmatic focus target when the trap has no tabbable controls', () => {
     render(
       <Trap>