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

package/src/MobilePowerSearch/MobilePowerSearch.tsx

@@ -142,8 +142,11 @@ import {
   typographyVars,
 } from '@astryxdesign/core/theme/tokens.stylex';
 import {isImeKeyEvent, isRenderable, rtlStyles} from '@astryxdesign/core/utils';
-import {MobileSheetConfirmation} from '../internal/MobileSheetConfirmation';
-import {useDismissSearchOnTouchDrag} from '../internal/useDismissSearchOnTouchDrag';
+
+import {
+  SheetConfirmation,
+  useDismissSearchOnTouchDrag,
+} from '@astryxdesign/core/internal/touch-sheet';
 import {MobilePowerSearchValueEditor} from './MobilePowerSearchValueEditor';
 import {
   createContentSearchSource,
@@ -889,10 +892,18 @@ export function MobilePowerSearch({
 
   // ------------------------------------------------------------------ focus --
 
-  const fieldPickerDragProps = useDismissSearchOnTouchDrag(() => [
-    contentSearchRef.current?.querySelector('input'),
-    fieldSearchRef.current?.querySelector('input'),
-  ]);
+  // A drag moves focus to the sheet's panel, never to the page body behind
+  // the open modal.
+  const fieldPickerDragProps = useDismissSearchOnTouchDrag(
+    () => [
+      contentSearchRef.current?.querySelector('input'),
+      fieldSearchRef.current?.querySelector('input'),
+    ],
+    () =>
+      (
+        fieldSearchRef.current ?? contentSearchRef.current
+      )?.closest<HTMLElement>('[tabindex="-1"]'),
+  );
 
   const focusPendingSheetTarget = useCallback(() => {
     const target = pendingSheetFocusRef.current;
@@ -2356,7 +2367,7 @@ export function MobilePowerSearch({
         </div>
       </BottomSheet>
 
-      <MobileSheetConfirmation
+      <SheetConfirmation
         isOpen={isClearConfirmationOpen}
         onOpenChange={setIsClearConfirmationOpen}
         title="Clear all filters?"

package/src/MobileTokenizer/MobileTokenizer.test.tsx

@@ -185,6 +185,9 @@ describe('MobileTokenizer (Lab, single-sheet flow)', () => {
     let discard = await screen.findByRole('alertdialog', {
       name: 'Discard changes?',
     });
+    // A scrim press starts and ends on the dialog itself.
+    fireEvent.pointerDown(discard);
+    fireEvent.pointerUp(discard);
     fireEvent.click(discard);
     await waitFor(() =>
       expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument(),
@@ -1245,6 +1248,7 @@ describe('MobileTokenizer Core-sheet parity', () => {
       );
     }
     render(<Flow />);
+    const trigger = screen.getByRole('button', {name: /Tags/});
     const sheet = await openSheet();
     // Pending from open until the bootstrap settles.
     expect(within(sheet).getByRole('img', {name: 'Loading'})).toBeTruthy();
@@ -1261,11 +1265,8 @@ describe('MobileTokenizer Core-sheet parity', () => {
     // The field becomes disabled while open: the sheet closes and the query
     // is kept; re-enabled and reopened, it starts from "en", settled.
     fireEvent.click(screen.getByRole('button', {name: 'Toggle'}));
-    expect(screen.getByRole('button', {name: /Tags/})).toHaveAttribute(
-      'aria-expanded',
-      'false',
-    );
-    act(() => screen.getByRole('button', {name: /Tags/}).focus());
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    act(() => trigger.focus());
     await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
     fireEvent.click(screen.getByRole('button', {name: 'Toggle'}));
     const reopened = await openSheet();

package/src/MobileTokenizer/MobileTokenizer.tsx

@@ -5,7 +5,7 @@
 /**
  * @file MobileTokenizer.tsx
  * @input Public @astryxdesign/core components and hooks, plus private Lab
- *   mobile-sheet confirmation and search-drag dismissal owners
+ *   touch-sheet confirmation and search-drag dismissal from Core's internal entry
  * @output Exports MobileTokenizer — Lab prototype of the touch Tokenizer
  *   flow with the inline-compatible closed trigger, a searchable draft-selection
  *   sheet, persistent Clear all / Save footer, dirty-dismiss confirmation,
@@ -72,8 +72,13 @@ import {
   sizeVars,
   spacingVars,
 } from '@astryxdesign/core/theme/tokens.stylex';
-import {MobileSheetConfirmation} from '../internal/MobileSheetConfirmation';
-import {useDismissSearchOnTouchDrag} from '../internal/useDismissSearchOnTouchDrag';
+import {
+  SheetConfirmation,
+  hasSameSelection,
+  nameSheetDraftChange,
+  useDismissSearchOnTouchDrag,
+  type SheetDraftChange,
+} from '@astryxdesign/core/internal/touch-sheet';
 
 export type MobileTokenizerChange<T extends SearchableItem> =
   | {item: T; type: 'add'}
@@ -130,18 +135,6 @@ const LIST_LOAD_MORE_THRESHOLD_PX = 200;
 // border = 3px. The same number is the row gap, so wrapped rows read evenly.
 const TOKEN_ROW_INSET = `calc(${spacingVars['--spacing-1']} - 1px)`;
 
-type SheetDraftChange<T> = {
-  item: T;
-  type: 'add' | 'create' | 'remove';
-};
-
-function hasSameSelection<T extends SearchableItem>(a: T[], b: T[]): boolean {
-  return (
-    a.length === b.length &&
-    a.every(item => b.some(candidate => candidate.id === item.id))
-  );
-}
-
 const styles = stylex.create({
   // The closed trigger is the inline Tokenizer field's own control box, as a
   // button — the same `inputWrapperStyles.base` box Core's sheet trigger
@@ -1018,39 +1011,15 @@ function MobileTokenizerSheetContent<T extends SearchableItem>({
     if (isDraftOverMax) {
       return;
     }
-    if (isDraftDirty) {
-      const added = draftValue.find(
-        item => !valueAtOpen.some(openItem => openItem.id === item.id),
-      );
-      const removed = valueAtOpen.find(
-        item => !draftValue.some(draftItem => draftItem.id === item.id),
-      );
-      const lastDraftChange = lastDraftChangeRef.current;
-      const lastChangeIsNet =
-        lastDraftChange != null &&
-        (lastDraftChange.type === 'remove'
-          ? valueAtOpen.some(item => item.id === lastDraftChange.item.id) &&
-            !draftValue.some(item => item.id === lastDraftChange.item.id)
-          : draftValue.some(item => item.id === lastDraftChange.item.id) &&
-            !valueAtOpen.some(item => item.id === lastDraftChange.item.id));
-      let change: SheetDraftChange<T> | null = null;
-      if (lastChangeIsNet) {
-        change = lastDraftChange;
-      } else if (lastDraftChange?.type === 'remove' && removed != null) {
-        change = {item: removed, type: 'remove'};
-      } else if (added != null) {
-        const type: SheetDraftChange<T>['type'] =
-          lastDraftChange?.item.id === added.id &&
-          lastDraftChange.type === 'create'
-            ? 'create'
-            : 'add';
-        change = {item: added, type};
-      } else if (removed != null) {
-        change = {item: removed, type: 'remove'};
-      }
-      if (change != null) {
-        onCommit([...draftValue], change);
-      }
+    const change = isDraftDirty
+      ? nameSheetDraftChange(
+          valueAtOpen,
+          draftValue,
+          lastDraftChangeRef.current,
+        )
+      : null;
+    if (change != null) {
+      onCommit([...draftValue], change);
     }
     onCloseSheet();
   };
@@ -1058,7 +1027,12 @@ function MobileTokenizerSheetContent<T extends SearchableItem>({
   const searchLabel = t('@astryx.tokenizer.search', {label});
   const noResultsTitle =
     emptySearchResultsText ?? t('@astryx.typeahead.emptySearchResults');
-  const listDragProps = useDismissSearchOnTouchDrag(() => [searchRef.current]);
+  // A drag moves focus to the sheet's panel, never to the page body behind
+  // the open modal.
+  const listDragProps = useDismissSearchOnTouchDrag(
+    () => [searchRef.current],
+    () => searchRef.current?.closest<HTMLElement>('[tabindex="-1"]'),
+  );
 
   return (
     <div {...stylex.props(styles.sheetBody)}>
@@ -1245,7 +1219,7 @@ function MobileTokenizerSheetContent<T extends SearchableItem>({
         />
       </div>
       {isClearConfirmationOpen && (
-        <MobileSheetConfirmation
+        <SheetConfirmation
           isOpen
           onOpenChange={next => {
             if (!next) {
@@ -1270,7 +1244,7 @@ function MobileTokenizerSheetContent<T extends SearchableItem>({
         />
       )}
       {isDiscardConfirmationOpen && (
-        <MobileSheetConfirmation
+        <SheetConfirmation
           isOpen
           onOpenChange={next => {
             if (!next) {

package/dist/InfoTip/InfoTip.d.ts

@@ -1,58 +0,0 @@
-/**
- * @file InfoTip.tsx
- * @input Uses React, stylex, Tooltip + Icon from @astryxdesign/core, color/spacing/radius/duration/ease tokens
- * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
- * @position Lab experiment (RFC meta/astryx#3349); core implementation consumed by index.ts
- *
- * SYNC: When modified, update these files to stay in sync:
- * - /packages/lab/src/InfoTip/InfoTip.doc.mjs (props table, features)
- * - /packages/lab/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
- * - /packages/lab/src/InfoTip/index.ts (exports if types change)
- */
-import { type ReactNode } from 'react';
-import { type IconSize } from '@astryxdesign/core/Icon';
-/**
- * Size of the info icon. Maps 1:1 to Icon sizes
- * (xsm: 12px, sm: 16px, md: 20px, lg: 24px).
- */
-export type InfoTipSize = IconSize;
-export interface InfoTipProps {
-    /**
-     * Content to display in the tooltip.
-     * Typically short, non-interactive text. Mirrors Tooltip's `content` prop.
-     */
-    content: ReactNode;
-    /**
-     * Accessible name for the trigger button.
-     * @default 'More information'
-     */
-    label?: string;
-    /**
-     * Size of the info icon.
-     * @default 'sm'
-     */
-    size?: InfoTipSize;
-}
-/**
- * An inline info-icon help affordance: a small "i" button that reveals a
- * tooltip on hover, keyboard focus, and tap. Use it next to labels, values,
- * and metrics for permission notes, metric definitions, and field help.
- *
- * The value over hand-composing Icon inside Tooltip is the pre-wired
- * accessible trigger: a real button with an aria-label, Tab-reachable,
- * tooltip on hover AND focus, and Escape dismissal.
- *
- * Composed entirely from core primitives (Tooltip + Icon); the info icon
- * resolves from the global icon registry, so themes can override it.
- *
- * @example
- * ```
- * <InfoTip content="Editors can change this field; viewers cannot." />
- * <InfoTip content="30-day rolling average." label="About this metric" />
- * ```
- */
-export declare function InfoTip({ content, label, size, }: InfoTipProps): ReactNode;
-export declare namespace InfoTip {
-    var displayName: string;
-}
-//# sourceMappingURL=InfoTip.d.ts.map

package/dist/InfoTip/InfoTip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"InfoTip.d.ts","sourceRoot":"","sources":["../../src/InfoTip/InfoTip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,yBAAyB,CAAC;AAW5D;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;AAEnC,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AA8BD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAA0B,EAC1B,IAAW,GACZ,EAAE,YAAY,GAAG,SAAS,CAqB1B;yBAzBe,OAAO"}

package/dist/InfoTip/InfoTip.js

@@ -1,94 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file InfoTip.tsx
- * @input Uses React, stylex, Tooltip + Icon from @astryxdesign/core, color/spacing/radius/duration/ease tokens
- * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
- * @position Lab experiment (RFC meta/astryx#3349); core implementation consumed by index.ts
- *
- * SYNC: When modified, update these files to stay in sync:
- * - /packages/lab/src/InfoTip/InfoTip.doc.mjs (props table, features)
- * - /packages/lab/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
- * - /packages/lab/src/InfoTip/index.ts (exports if types change)
- */
-import * as stylex from '@stylexjs/stylex';
-import { Icon } from '@astryxdesign/core/Icon';
-import { Tooltip } from '@astryxdesign/core/Tooltip';
-import '@astryxdesign/core/theme/tokens.stylex';
-import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from '@astryxdesign/core/theme/tokens.stylex';
-import { focusOutlineStyles } from '@astryxdesign/core/utils';
-
-/**
- * Size of the info icon. Maps 1:1 to Icon sizes
- * (xsm: 12px, sm: 16px, md: 20px, lg: 24px).
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const styles = {
-  trigger: {
-    k1xSpc: "x3nfvp2",
-    kGNEyG: "x6s0dn4",
-    kjj79g: "xl56j7k",
-    kXLuUW: "xxymvpz",
-    kmVPX3: "x12nba7r",
-    kogj98: "x1ghz6dp",
-    ksu8eU: "xng3xce",
-    kWkggS: "xjbqb8w",
-    kaIpWk: "xjspbzw",
-    kkrTdU: "x1ypdohk x16khyan",
-    kMwMTN: "xv9yike x10ue8fs",
-    k1ekBW: "xt3l3uh",
-    kIyJzY: "xuedmi6",
-    kAMwcw: "xlr8y92",
-    $$css: true
-  }
-};
-
-/**
- * An inline info-icon help affordance: a small "i" button that reveals a
- * tooltip on hover, keyboard focus, and tap. Use it next to labels, values,
- * and metrics for permission notes, metric definitions, and field help.
- *
- * The value over hand-composing Icon inside Tooltip is the pre-wired
- * accessible trigger: a real button with an aria-label, Tab-reachable,
- * tooltip on hover AND focus, and Escape dismissal.
- *
- * Composed entirely from core primitives (Tooltip + Icon); the info icon
- * resolves from the global icon registry, so themes can override it.
- *
- * @example
- * ```
- * <InfoTip content="Editors can change this field; viewers cannot." />
- * <InfoTip content="30-day rolling average." label="About this metric" />
- * ```
- */
-export function InfoTip({
-  content,
-  label = 'More information',
-  size = 'sm'
-}) {
-  // No local Escape handler: the trigger used to stopPropagation the press,
-  // which hid the tip but left the browser's close watcher to fire `cancel` on
-  // an enclosing Dialog, so one press took both (#5168). Tooltip's own entry in
-  // the shared dismissal stack takes it instead.
-  return /*#__PURE__*/_jsx(Tooltip, {
-    content: content
-    // The trigger is a real button, so Tooltip's `auto` touch rule would
-    // give the tap to the control and suppress the tooltip. Here the tooltip
-    // IS the control's only purpose, so the tap has to open it — otherwise
-    // an InfoTip's content is unreachable on a phone.
-    ,
-    touchTrigger: "tap",
-    children: /*#__PURE__*/_jsx("button", {
-      type: "button",
-      "aria-label": label,
-      ...stylex.props(focusOutlineStyles.focusVisible, styles.trigger),
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: "info",
-        size: size
-      })
-    })
-  });
-}
-InfoTip.displayName = 'InfoTip';

package/dist/internal/MobileSheetConfirmation.d.ts

@@ -1,12 +0,0 @@
-interface MobileSheetConfirmationProps {
-    isOpen: boolean;
-    onOpenChange: (isOpen: boolean) => void;
-    title: string;
-    description: string;
-    cancelLabel: string;
-    actionLabel: string;
-    onAction: () => void;
-}
-export declare function MobileSheetConfirmation({ isOpen, onOpenChange, title, description, cancelLabel, actionLabel, onAction, }: MobileSheetConfirmationProps): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=MobileSheetConfirmation.d.ts.map

package/dist/internal/MobileSheetConfirmation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MobileSheetConfirmation.d.ts","sourceRoot":"","sources":["../../src/internal/MobileSheetConfirmation.tsx"],"names":[],"mappings":"AA0BA,UAAU,4BAA4B;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,QAAQ,GACT,EAAE,4BAA4B,+BAgD9B"}

package/dist/internal/MobileSheetConfirmation.js

@@ -1,88 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file MobileSheetConfirmation.tsx
- * @input Public Core Dialog, layout, text and action primitives; caller-owned copy
- * @output Private confirmation shared by MobileTokenizer and MobilePowerSearch
- * @position Lab-only mobile sheet confirmation owner; not a public export
- *
- * Core AlertDialog fixes its purpose to form and its safe action to ghost.
- * These Lab flows instead allow scrim dismissal and use separated, full-width
- * large actions with the secondary safe action focused first. Keep that
- * difference here, while preserving the existing alert-dialog theme target.
- */
-import { useId } from 'react';
-import * as stylex from '@stylexjs/stylex';
-import { Button } from '@astryxdesign/core/Button';
-import { Dialog } from '@astryxdesign/core/Dialog';
-import { Heading } from '@astryxdesign/core/Heading';
-import { Layout, LayoutContent, LayoutFooter } from '@astryxdesign/core/Layout';
-import { Stack } from '@astryxdesign/core/Stack';
-import { Text } from '@astryxdesign/core/Text';
-import { themeProps } from '@astryxdesign/core/utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = {
-  action: {
-    kzqmXN: "xh8yej3",
-    $$css: true
-  }
-};
-export function MobileSheetConfirmation({
-  isOpen,
-  onOpenChange,
-  title,
-  description,
-  cancelLabel,
-  actionLabel,
-  onAction
-}) {
-  const titleId = useId();
-  const descriptionId = useId();
-  return /*#__PURE__*/_jsx(Dialog, {
-    ...themeProps('alert-dialog'),
-    isOpen: isOpen,
-    onOpenChange: onOpenChange,
-    purpose: "info",
-    role: "alertdialog",
-    "aria-labelledby": titleId,
-    "aria-describedby": descriptionId,
-    width: 400,
-    children: /*#__PURE__*/_jsx(Layout, {
-      content: /*#__PURE__*/_jsxs(LayoutContent, {
-        children: [/*#__PURE__*/_jsx(Heading, {
-          level: 2,
-          id: titleId,
-          children: title
-        }), /*#__PURE__*/_jsx(Text, {
-          type: "body",
-          color: "secondary",
-          id: descriptionId,
-          children: description
-        })]
-      }),
-      footer: /*#__PURE__*/_jsx(LayoutFooter, {
-        children: /*#__PURE__*/_jsxs(Stack, {
-          direction: "vertical",
-          gap: 4,
-          hAlign: "stretch",
-          children: [/*#__PURE__*/_jsx(Button, {
-            label: actionLabel,
-            variant: "destructive",
-            size: "lg",
-            onClick: onAction,
-            xstyle: styles.action
-          }), /*#__PURE__*/_jsx(Button, {
-            label: cancelLabel,
-            variant: "secondary",
-            size: "lg",
-            onClick: () => onOpenChange(false),
-            "data-autofocus": true,
-            xstyle: styles.action
-          })]
-        })
-      })
-    })
-  });
-}

package/dist/internal/useDismissSearchOnTouchDrag.d.ts

@@ -1,21 +0,0 @@
-/**
- * @file useDismissSearchOnTouchDrag.ts
- * @input Caller-owned search inputs and touch events from a separate results list
- * @output Private touch handlers shared by the Lab mobile search sheets
- * @position One owner for results-drag keyboard dismissal; not a public export
- *
- * A direct vertical touch drag dismisses only a focused caller-owned search.
- * Scroll events are deliberately not observed: filtering can clamp scrollTop
- * and fire scroll while someone is typing. Small moves, taps and multi-touch
- * gestures leave focus alone. The hook acquires no external resource.
- */
-import { type TouchEvent } from 'react';
-type SearchInput = HTMLInputElement | null | undefined;
-export declare function useDismissSearchOnTouchDrag(getSearchInputs: () => readonly SearchInput[]): {
-    onTouchStart: (event: TouchEvent<HTMLElement>) => void;
-    onTouchMove: (event: TouchEvent<HTMLElement>) => void;
-    onTouchEnd: () => void;
-    onTouchCancel: () => void;
-};
-export {};
-//# sourceMappingURL=useDismissSearchOnTouchDrag.d.ts.map

package/dist/internal/useDismissSearchOnTouchDrag.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDismissSearchOnTouchDrag.d.ts","sourceRoot":"","sources":["../../src/internal/useDismissSearchOnTouchDrag.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAS,KAAK,UAAU,EAAC,MAAM,OAAO,CAAC;AAI9C,KAAK,WAAW,GAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;AAEvD,wBAAgB,2BAA2B,CACzC,eAAe,EAAE,MAAM,SAAS,WAAW,EAAE;0BAQrB,UAAU,CAAC,WAAW,CAAC;yBAIxB,UAAU,CAAC,WAAW,CAAC;;;EAqB/C"}

package/dist/internal/useDismissSearchOnTouchDrag.js

@@ -1,43 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file useDismissSearchOnTouchDrag.ts
- * @input Caller-owned search inputs and touch events from a separate results list
- * @output Private touch handlers shared by the Lab mobile search sheets
- * @position One owner for results-drag keyboard dismissal; not a public export
- *
- * A direct vertical touch drag dismisses only a focused caller-owned search.
- * Scroll events are deliberately not observed: filtering can clamp scrollTop
- * and fire scroll while someone is typing. Small moves, taps and multi-touch
- * gestures leave focus alone. The hook acquires no external resource.
- */
-import { useRef } from 'react';
-const DRAG_THRESHOLD_PX = 8;
-export function useDismissSearchOnTouchDrag(getSearchInputs) {
-  const startYRef = useRef(null);
-  const reset = () => {
-    startYRef.current = null;
-  };
-  return {
-    onTouchStart: event => {
-      startYRef.current = event.touches.length === 1 ? event.touches[0].clientY : null;
-    },
-    onTouchMove: event => {
-      if (event.touches.length !== 1) {
-        reset();
-        return;
-      }
-      const startY = startYRef.current;
-      if (startY == null || Math.abs(event.touches[0].clientY - startY) < DRAG_THRESHOLD_PX) {
-        return;
-      }
-      reset();
-      const focusedSearch = getSearchInputs().find(input => input != null && input === document.activeElement);
-      focusedSearch?.blur();
-    },
-    onTouchEnd: reset,
-    onTouchCancel: reset
-  };
-}

package/src/InfoTip/InfoTip.doc.mjs

@@ -1,100 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
-
-export const docs = {
-  name: 'InfoTip',
-  displayName: 'Info Tip',
-  category: 'Feedback & Status',
-  keywords: ["info","tooltip","help","hint","affordance","icon","label","field","metric","definition"],
-  props: [
-    {
-      name: 'content',
-      type: 'ReactNode',
-      description: 'Content to display in the tooltip. Typically short, non-interactive text. Mirrors Tooltip\'s content prop.',
-      required: true,
-    },
-    {
-      name: 'label',
-      type: 'string',
-      description: 'Accessible name for the trigger button.',
-      default: "'More information'",
-    },
-    {
-      name: 'size',
-      type: "'xsm' | 'sm' | 'md' | 'lg'",
-      description: 'Size of the info icon (12px, 16px, 20px, 24px). Maps 1:1 to Icon sizes.',
-      default: "'sm'",
-    },
-  ],
-  usage: {
-    description:
-      'An inline info-icon help affordance: a small "i" button that reveals a tooltip on hover, keyboard focus, and tap. Use it next to labels, values, and metrics for permission notes, metric definitions, and field help. Its value over hand-composing Icon inside Tooltip is the pre-wired accessible trigger: a real button with an aria-label, Tab-reachable, tooltip on hover AND focus AND tap, and Escape dismissal.',
-    bestPractices: [
-      { guidance: true, description: 'Keep tooltip content concise, plain, and non-interactive; use Popover or HoverCard for links and buttons.' },
-      { guidance: true, description: 'Override label when "More information" is too generic, e.g. "About this metric".' },
-      { guidance: true, description: 'Rely on InfoTip rather than a hand-rolled info button on touch: it sets Tooltip touchTrigger to tap, so a tap opens the tooltip even though the trigger is a button, and a tap outside dismisses it.' },
-      { guidance: false, description: 'Hand-compose Icon inside Tooltip for info affordances; the bare Icon is aria-hidden and unfocusable, so keyboard and screen-reader users never see it.' },
-      { guidance: false, description: 'Use InfoTip for essential information users must see to complete a task; put that text inline instead.' },
-    ],
-  },
-};
-
-/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
-export const docsZh = {
-  name: 'InfoTip',
-  displayName: 'Info Tip',
-  props: [
-    {
-      name: 'content',
-      type: 'ReactNode',
-      description: '工具提示中显示的内容。通常为简短的非交互文本。与 Tooltip 的 content 属性一致。',
-      required: true,
-    },
-    {
-      name: 'label',
-      type: 'string',
-      description: '触发按钮的无障碍名称。',
-      default: "'More information'",
-    },
-    {
-      name: 'size',
-      type: "'xsm' | 'sm' | 'md' | 'lg'",
-      description: '信息图标的尺寸（12px、16px、20px、24px）。与 Icon 尺寸一一对应。',
-      default: "'sm'",
-    },
-  ],
-  usage: {
-    description:
-      'An inline info-icon help affordance: a small "i" button that reveals a tooltip on hover, keyboard focus, and tap. Use it next to labels, values, and metrics for permission notes, metric definitions, and field help.',
-    bestPractices: [
-      { guidance: true, description: 'Keep tooltip content concise, plain, and non-interactive; use Popover or HoverCard for links and buttons.' },
-      { guidance: true, description: 'Override label when "More information" is too generic, e.g. "About this metric".' },
-      { guidance: true, description: 'Rely on InfoTip rather than a hand-rolled info button on touch: it sets Tooltip touchTrigger to tap, so a tap opens the tooltip even though the trigger is a button, and a tap outside dismisses it.' },
-      { guidance: false, description: 'Hand-compose Icon inside Tooltip for info affordances; the bare Icon is aria-hidden and unfocusable, so keyboard and screen-reader users never see it.' },
-      { guidance: false, description: 'Use InfoTip for essential information users must see to complete a task; put that text inline instead.' },
-    ],
-  },
-};
-
-/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
-export const docsDense = {
-  description:
-    'Inline info-icon help affordance: accessible "i" button trigger pre-wired into a Tooltip.',
-  usage: {
-    description:
-      'A small "i" button that reveals a tooltip on hover, keyboard focus, and tap. Use next to labels, values, and metrics for permission notes, metric definitions, and field help. Pre-wired accessible trigger: real button, aria-label, Tab-reachable, tooltip on hover AND focus AND tap, Escape dismissal.',
-    bestPractices: [
-      { guidance: true, description: 'Keep tooltip content concise, plain, and non-interactive; use Popover or HoverCard for links and buttons.' },
-      { guidance: true, description: 'Override label when "More information" is too generic, e.g. "About this metric".' },
-      { guidance: true, description: 'Rely on InfoTip rather than a hand-rolled info button on touch: it sets Tooltip touchTrigger to tap, so a tap opens the tooltip even though the trigger is a button, and a tap outside dismisses it.' },
-      { guidance: false, description: 'Hand-compose Icon inside Tooltip for info affordances; the bare Icon is aria-hidden and unfocusable.' },
-      { guidance: false, description: 'Use InfoTip for essential information users must see to complete a task; put that text inline instead.' },
-    ],
-  },
-  propDescriptions: {
-    content: 'Tooltip content. Short, non-interactive text. Mirrors Tooltip content prop.',
-    label: "Accessible name for the trigger button. Default 'More information'.",
-    size: 'Info icon size (12/16/20/24px). Maps 1:1 to Icon sizes.',
-  },
-};