@astryxdesign/lab 0.7.6-canary.f73623d → 0.7.6-canary.f77aaf2

package/dist/internal/useDismissSearchOnTouchDrag.js

@@ -0,0 +1,43 @@
+// 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.7.6-canary.f73623d",
+  "version": "0.7.6-canary.f77aaf2",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.7.6-canary.f73623d",
+    "@astryxdesign/core": "0.7.6-canary.f77aaf2",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -59,8 +59,8 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.6-canary.f73623d",
-    "@astryxdesign/cli": "0.7.6-canary.f73623d",
+    "@astryxdesign/a11y-spec": "0.7.6-canary.f77aaf2",
+    "@astryxdesign/cli": "0.7.6-canary.f77aaf2",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/CommentPin/CommentPin.tsx

@@ -15,7 +15,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/lab/src/CommentPin/CommentPin.doc.mjs
- * - /packages/lab/src/CommentPin/CommentPin.spec.md
+ * - /docs/specs/components/CommentPin/CommentPin.spec.md
  * - /packages/lab/src/CommentPin/CommentPin.test.tsx
  * - /packages/lab/src/CommentPin/index.ts
  * - /apps/storybook/stories/CommentPin.stories.tsx

package/src/Comments/CommentComposer.test.tsx

@@ -200,6 +200,62 @@ describe('CommentComposer', () => {
     expect(screen.getByTestId('draft').textContent).toBe('Ship it 🎉');
   });
 
+  it('ends the upload busy state when onActionPendingChange is a new function each render', async () => {
+    let finishUpload: (images: {url: string; alt: string}[]) => void = () => {};
+    const onUploadImages = vi.fn(
+      () =>
+        new Promise<{url: string; alt: string}[]>(resolve => {
+          finishUpload = resolve;
+        }),
+    );
+    function Host() {
+      const [draft, setDraft] = useState('See this');
+      const [pending, setPending] = useState(false);
+      return (
+        <>
+          <CommentComposerBase
+            value={draft}
+            onChange={setDraft}
+            onSubmit={() => {}}
+            placeholder="Reply"
+            context={{kind: 'comment'}}
+            highlightColor="yellow"
+            triggers={[]}
+            agentCommands={[]}
+            hasEmojiPicker={false}
+            isSubmitting={false}
+            onUploadImages={onUploadImages}
+            // Inline: a new callback on every render of the host.
+            onActionPendingChange={isPending => setPending(isPending)}
+          />
+          <output data-testid="pending">{String(pending)}</output>
+        </>
+      );
+    }
+    const {container} = render(<Host />);
+    const input = container.querySelector('input[type="file"]');
+    if (!(input instanceof HTMLInputElement)) {
+      throw new Error('File input not found');
+    }
+    const file = new File(['png'], 'chart.png', {type: 'image/png'});
+    await act(async () => {
+      fireEvent.change(input, {target: {files: [file]}});
+      await Promise.resolve();
+    });
+    await settle();
+    expect(onUploadImages).toHaveBeenCalledWith([file]);
+    expect(screen.getByTestId('pending').textContent).toBe('true');
+
+    await act(async () => {
+      finishUpload([{url: 'https://example.com/a.png', alt: 'Chart'}]);
+      await Promise.resolve();
+    });
+    await settle();
+
+    expect(screen.getByTestId('pending').textContent).toBe('false');
+    expect(container.querySelector('[aria-busy="true"]')).toBeNull();
+  });
+
   it('uploads attached images and appends them as Markdown', async () => {
     const onChange = vi.fn();
     const onUploadImages = vi

package/src/Comments/CommentComposer.tsx

@@ -239,6 +239,11 @@ export function CommentComposerBase({
   latestValueRef.current = value;
   const isMountedRef = useRef(true);
   const actionPendingRef = useRef(false);
+  // The latest callback, read when reporting. An inline callback is new on
+  // every render; depending on it would re-run the unmount cleanup below on
+  // each render and leave the composer busy after its upload ends.
+  const onActionPendingChangeRef = useRef(onActionPendingChange);
+  onActionPendingChangeRef.current = onActionPendingChange;
   const isSubmittingRef = useRef(isSubmitting);
   isSubmittingRef.current = isSubmitting;
   const imageInputRef = useRef<HTMLInputElement>(null);
@@ -269,27 +274,27 @@ export function CommentComposerBase({
   const [isActionPending, setIsActionPending] = useState(false);
   const [isPickerOpen, setIsPickerOpen] = useState(false);
 
-  const updateActionPending = useCallback(
-    (nextPending: boolean) => {
-      if (actionPendingRef.current === nextPending) {
-        return;
-      }
-      actionPendingRef.current = nextPending;
-      setIsActionPending(nextPending);
-      onActionPendingChange?.(nextPending);
-    },
-    [onActionPendingChange],
-  );
+  const updateActionPending = useCallback((nextPending: boolean) => {
+    if (actionPendingRef.current === nextPending) {
+      return;
+    }
+    actionPendingRef.current = nextPending;
+    setIsActionPending(nextPending);
+    onActionPendingChangeRef.current?.(nextPending);
+  }, []);
+  // Tracks mount for the upload's async completion, and on unmount releases
+  // the host's pending-action hold, which the upload's finally skips once
+  // unmounted.
   useEffect(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
       if (actionPendingRef.current) {
         actionPendingRef.current = false;
-        onActionPendingChange?.(false);
+        onActionPendingChangeRef.current?.(false);
       }
     };
-  }, [onActionPendingChange]);
+  }, []);
 
   const uploadImages = async (files: readonly File[]) => {
     if (onUploadImages == null || files.length === 0) {

package/src/MobilePowerSearch/MobilePowerSearch.doc.mjs

@@ -107,7 +107,7 @@ export const docs = {
   ],
   usage: {
     description:
-      'Lab prototype for trying the touch PowerSearch flow. Choose it explicitly on touch layouts (for example `const Search = isTouch ? MobilePowerSearch : PowerSearch`); it never switches on pointer type by itself. The whole field is one Manage filters trigger showing display-only tokens. Tapping it opens a tall Filters sheet listing each filter with its value in bold and a direct trailing remove action, an Add filter icon button at the top right, and sticky Clear all and Done actions. One-tap boolean filters use the same trailing remove action as every other removable filter. When there are no filters, the centered Add filter action stands alone; the duplicate header add and footer Done controls are hidden. Clear all asks for confirmation, removes editable filters without closing the sheet, and preserves read-only filters. Opening the rest of a row edits that filter with Cancel and Apply. Add filter opens directly when no filter exists and leaves search unfocused until the user chooses it; when the config names a content-search field it carries that search with inline suggestions. Creating a filter drills field → operator (radios, only when a field has more than one) → value. A value editor that is the sheet’s only section sits directly on the sheet surface; multiple sections use separate muted containers. The previous step remains open beneath the current standalone BottomSheet, so Escape, a scrim press, or a downward swipe dismisses the current sheet and reveals that retained step; the Add filter header stays action-free. the stack keeps one scrim and blocks covered sheets. Single-value choices use persistent radio indicators and multi-value choices use persistent checkbox indicators. Searchable string and entity lists and date calendars remain inline in the value sheet; date-only and date-range selections honor timezoneID, while date-time operators keep their date-and-time input. Announcements made while a sheet is open are delivered inside that dialog. Filters remain keyed by identity across controlled reorder, stale filters stay visible and removable, and controlled removals re-home focus. The scroll viewport reaches the sheet edge while padded inner content aligns with the fixed header. Fields whose only operators are nested are left out with a development warning.',
+      'Lab prototype for trying the touch PowerSearch flow. Choose it explicitly on touch layouts (for example `const Search = isTouch ? MobilePowerSearch : PowerSearch`); it never switches on pointer type by itself. The whole field is one Manage filters trigger showing display-only tokens. Tapping it opens a tall Filters sheet listing each filter with its value in bold and a direct trailing remove action, an Add filter icon button at the top right, and sticky Clear all and Done actions. One-tap boolean filters use the same trailing remove action as every other removable filter. When there are no filters, the centered Add filter action stands alone; the duplicate header add and footer Done controls are hidden. Clear all asks for confirmation, removes editable filters without closing the sheet, and preserves read-only filters. Opening the rest of a row edits that filter with Cancel and Apply. Add filter opens directly when no filter exists and leaves search unfocused until the user chooses it; when the config names a content-search field it carries that search with inline suggestions. Creating a filter drills field → operator (radios, only when a field has more than one) → value. A value editor that is the sheet’s only section sits directly on the sheet surface; multiple sections use separate muted containers. The previous step remains open beneath the current standalone BottomSheet, so Escape, a scrim press, or a downward swipe dismisses the current sheet and reveals that retained step; the Add filter header stays action-free. the stack keeps one scrim and blocks covered sheets. Single-value choices use persistent radio indicators and multi-value choices use persistent checkbox indicators. Searchable string and entity lists and date calendars remain inline in the value sheet; date-only and date-range selections honor timezoneID, while date-time operators keep their date-and-time input. Announcements made while a sheet is open are delivered inside that dialog. Filters remain keyed by identity across controlled reorder, stale filters stay visible and removable, and controlled removals re-home focus. The scroll viewport reaches the sheet edge while padded inner content aligns with the fixed header. Dragging the results dismisses the search keyboard without clearing the query; filtering keeps search focused. Fields whose only operators are nested are left out with a development warning.',
     bestPractices: [
       {
         guidance: true,

package/src/MobilePowerSearch/MobilePowerSearch.test.tsx

@@ -1009,11 +1009,16 @@ describe('MobilePowerSearch Add filter', () => {
       sheet().querySelectorAll<HTMLElement>('div'),
     ).find(element => getComputedStyle(element).overflowY === 'auto')!;
     fireEvent.scroll(scrollBody);
+    expect(search).toHaveFocus();
+    fireEvent.touchStart(scrollBody, {touches: [{clientY: 100}]});
+    fireEvent.touchMove(scrollBody, {touches: [{clientY: 107}]});
+    expect(search).toHaveFocus();
+    fireEvent.touchMove(scrollBody, {touches: [{clientY: 109}]});
     expect(search).not.toHaveFocus();
     search.focus();
-    fireEvent.touchMove(scrollBody);
-    expect(search).not.toHaveFocus();
     fireEvent.change(search, {target: {value: 'Field'}});
+    fireEvent.scroll(scrollBody);
+    expect(search).toHaveFocus();
     expect(
       within(sheet()).getAllByRole('button', {name: /^Field/}),
     ).toHaveLength(2);

package/src/MobilePowerSearch/MobilePowerSearch.tsx

@@ -5,11 +5,8 @@
 /**
  * @file MobilePowerSearch.tsx
  * @input Core PowerSearch config, filters and onChange (the same props as
- *   @astryxdesign/core PowerSearch); public @astryxdesign/core components only
- *   (BottomSheet, Button, Field, Heading, Icon, List,
- *   RadioList, Text, TextInput, Token, Tooltip hooks, i18n, hooks —
- *   useAnnounce for every announcement — utils, Layout container-padding
- *   styles)
+ *   @astryxdesign/core PowerSearch); public Core primitives and private Lab
+ *   mobile-sheet confirmation and search-drag dismissal owners
  * @output Exports MobilePowerSearch — Lab prototype of the touch PowerSearch
  *   flow: the whole field is one "Manage filters" trigger with display-only
  *   tokens, a Filters sheet with editable rows and direct remove actions, Add
@@ -93,7 +90,6 @@ import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '@astryxdesign/core';
 import {BottomSheet} from '@astryxdesign/core/BottomSheet';
 import {Button} from '@astryxdesign/core/Button';
-import {Dialog} from '@astryxdesign/core/Dialog';
 import {EmptyState} from '@astryxdesign/core/EmptyState';
 import {
   Field,
@@ -107,7 +103,6 @@ import {
 import {Heading} from '@astryxdesign/core/Heading';
 import {Icon, renderIconSlot, type IconType} from '@astryxdesign/core/Icon';
 import {IconButton} from '@astryxdesign/core/IconButton';
-import {Layout, LayoutContent, LayoutFooter} from '@astryxdesign/core/Layout';
 import {containerPaddingInlineVarStyles} from '@astryxdesign/core/Layout/padding.stylex';
 import {List, ListItem} from '@astryxdesign/core/List';
 import {resolveOperatorLabel} from '@astryxdesign/core/PowerSearch';
@@ -126,7 +121,6 @@ import {formatFilterValue} from '@astryxdesign/core/PowerSearch/utils';
 import type {InternalConfig} from '@astryxdesign/core/PowerSearch/utils';
 import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
 import {useSize} from '@astryxdesign/core/SizeContext';
-import {Stack} from '@astryxdesign/core/Stack';
 import {Text} from '@astryxdesign/core/Text';
 import {TextInput} from '@astryxdesign/core/TextInput';
 import {Token} from '@astryxdesign/core/Token';
@@ -148,6 +142,8 @@ 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 {MobilePowerSearchValueEditor} from './MobilePowerSearchValueEditor';
 import {
   createContentSearchSource,
@@ -207,7 +203,7 @@ export interface MobilePowerSearchProps extends Omit<
   /** Validation status. */
   status?: InputStatus;
   /** How the status message is placed. @default 'attached' */
-  statusVariant?: FieldStatusVariant;
+  statusVariant?: FieldStatusVariant | 'tooltip';
   /** Max display length for token values. @default 40 */
   maxTokenLength?: number;
   /** Max suggestions in string and entity value typeaheads. @default 10 */
@@ -257,63 +253,6 @@ function PlusIcon(props: SVGProps<SVGSVGElement>) {
   );
 }
 
-function ClearFiltersConfirmation({
-  isOpen,
-  onOpenChange,
-  onConfirm,
-}: {
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  onConfirm: () => void;
-}) {
-  const titleId = useId();
-  const descriptionId = useId();
-  return (
-    <Dialog
-      isOpen={isOpen}
-      onOpenChange={onOpenChange}
-      purpose="info"
-      role="alertdialog"
-      aria-labelledby={titleId}
-      aria-describedby={descriptionId}
-      width={400}>
-      <Layout
-        content={
-          <LayoutContent>
-            <Heading level={2} id={titleId}>
-              Clear all filters?
-            </Heading>
-            <Text type="body" color="secondary" id={descriptionId}>
-              This removes all editable filters from this search.
-            </Text>
-          </LayoutContent>
-        }
-        footer={
-          <LayoutFooter>
-            <Stack direction="vertical" gap={4} hAlign="stretch">
-              <Button
-                label="Clear filters"
-                variant="destructive"
-                size="lg"
-                onClick={onConfirm}
-                xstyle={styles.confirmationAction}
-              />
-              <Button
-                label="Keep filters"
-                variant="secondary"
-                size="lg"
-                onClick={() => onOpenChange(false)}
-                data-autofocus
-                xstyle={styles.confirmationAction}
-              />
-            </Stack>
-          </LayoutFooter>
-        }
-      />
-    </Dialog>
-  );
-}
-
 const sizeStyles = stylex.create({
   sm: {minHeight: sizeVars['--size-element-sm']},
   md: {minHeight: sizeVars['--size-element-md']},
@@ -520,9 +459,6 @@ const styles = stylex.create({
   trailingControlRow: {
     flexDirection: 'row-reverse',
   },
-  confirmationAction: {
-    width: '100%',
-  },
   rowValue: {
     fontWeight: fontWeightVars['--font-weight-bold'],
   },
@@ -953,14 +889,10 @@ export function MobilePowerSearch({
 
   // ------------------------------------------------------------------ focus --
 
-  const blurFieldPickerSearch = useCallback(() => {
-    const activeElement = document.activeElement;
-    const contentSearch = contentSearchRef.current?.querySelector('input');
-    const fieldSearch = fieldSearchRef.current?.querySelector('input');
-    if (activeElement === contentSearch || activeElement === fieldSearch) {
-      (activeElement as HTMLInputElement).blur();
-    }
-  }, []);
+  const fieldPickerDragProps = useDismissSearchOnTouchDrag(() => [
+    contentSearchRef.current?.querySelector('input'),
+    fieldSearchRef.current?.querySelector('input'),
+  ]);
 
   const focusPendingSheetTarget = useCallback(() => {
     const target = pendingSheetFocusRef.current;
@@ -2132,10 +2064,7 @@ export function MobilePowerSearch({
               </div>
             ) : null}
           </div>
-          <div
-            {...scrollViewportProps}
-            onScroll={blurFieldPickerSearch}
-            onTouchMove={blurFieldPickerSearch}>
+          <div {...scrollViewportProps} {...fieldPickerDragProps}>
             <div {...scrollContentProps}>
               {hasContentSearch ? (
                 contentResults.length > 0 ? (
@@ -2427,10 +2356,14 @@ export function MobilePowerSearch({
         </div>
       </BottomSheet>
 
-      <ClearFiltersConfirmation
+      <MobileSheetConfirmation
         isOpen={isClearConfirmationOpen}
         onOpenChange={setIsClearConfirmationOpen}
-        onConfirm={() => {
+        title="Clear all filters?"
+        description="This removes all editable filters from this search."
+        actionLabel="Clear filters"
+        cancelLabel="Keep filters"
+        onAction={() => {
           handleClearAll();
           setIsClearConfirmationOpen(false);
         }}

package/src/MobileTokenizer/MobileTokenizer.doc.mjs

@@ -11,7 +11,7 @@ export const docs = {
     {name: 'isLabelHidden', type: 'boolean', description: 'Hide the visible label; the trigger and the sheet keep it as their accessible name.', default: 'false'},
     {name: 'searchSource', type: 'SearchSource<T>', description: 'Core Typeahead search source (search + bootstrap).', required: true},
     {name: 'value', type: 'T[]', description: 'Selected items (Core SearchableItem).', required: true},
-    {name: 'onChange', type: '(items: T[], change: MobileTokenizerChange<T>) => void', description: 'Mirrors Core Tokenizer: single-item add/create/remove, or reorder.', required: true},
+    {name: 'onChange', type: '(items: T[], change: MobileTokenizerChange<T>) => void', description: 'Called by Save when the selection draft differs from the opening value. Receives the complete committed selection plus the latest add/create/remove metadata.', required: true},
     {name: 'renderItem', type: '(item: T) => ReactNode', description: 'Custom content for a result row, shown beside its checkbox. Default: the item label.'},
     {name: 'placeholder', type: 'string', description: 'Trigger text when nothing is selected.'},
     {name: 'description', type: 'string', description: 'Help text under the field, read with the trigger.'},
@@ -24,14 +24,14 @@ export const docs = {
   ],
   usage: {
     description:
-      'Lab prototype for trying the touch Tokenizer flow: tap the field to open one searchable sheet where selected and available items share a full-row checkbox list. Selected items are grouped first when the sheet opens, while checkbox changes keep every existing row in place until the sheet closes; the latest selection is regrouped the next time it opens. Selected custom values stay in the list, and long result sets render progressively in 50-item batches. Custom text uses a trailing Add action, and guarded Clear all plus Done actions finish the unfiltered flow. The footer is hidden while searching. Clear all stays in the focus order when nothing is selected and says why; a confirmed clear returns focus to the search field and is announced inside the sheet. Every announcement — additions, removals, result counts — is delivered inside the open sheet. The trigger describes its selection to assistive technology (count, then the tokens) after the field description, status, and disabled reason. Strings come from the shared Astryx catalog.',
+      'Lab prototype for trying the touch Tokenizer flow: tap the field to open one searchable sheet where selected and available items share a full-row checkbox list. Selection changes remain in a draft until Save commits them; swipe, scrim, or Escape dismissal asks before discarding a dirty draft, while a clean dismissal closes directly. Selected items are grouped first when the sheet opens, while checkbox changes keep every existing row in place until the sheet closes; the latest selection is regrouped the next time it opens. Selected custom values stay in the list, and long result sets render progressively in 50-item batches. Custom text uses a trailing Add action. The bordered large search stays above the list, and scrolling or dragging results dismisses the software keyboard without clearing the query. Clear all and Save remain visible while searching. Clear all updates the draft only and requires confirmation; a confirmed clear returns focus to the search field and is announced inside the sheet. Every announcement — additions, removals, result counts — is delivered inside the open sheet. The trigger describes its committed selection to assistive technology (count, then the tokens) after the field description, status, and disabled reason. Strings come from the shared Astryx catalog.',
     bestPractices: [
       {guidance: true, description: 'Try this in Lab/canary to validate the flow; graduate via Core Tokenizer presentation="adaptive" when it ships.'},
       {guidance: false, description: 'Do not ship stable product on this Lab API; it has no theming or spec contract yet.'},
     ],
     anatomy: [
       {name: 'Trigger field', required: true, description: 'Button showing tokens as a summary, in the inline Tokenizer field\'s own box: same border, radius, surface, block size and token inset as the desktop field.'},
-      {name: 'Management sheet', required: true, description: 'One searchable list with trailing checkboxes for existing items, a trailing Add action for custom text, and equal-width Clear all and Done footer actions when unfiltered. Clear all requires confirmation and stays focusable with its reason when nothing is selected; the footer is hidden while searching. Nothing of the sheet is in the page while it is closed.'},
+      {name: 'Management sheet', required: true, description: 'One searchable list with trailing checkboxes for existing items, a trailing Add action for custom text, and persistent equal-width Clear all and Save footer actions. Save commits the draft; dirty dismissal asks before discarding. Nothing of the sheet is in the page while it is closed.'},
     ],
   },
 };