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

package/dist/MobileTokenizer/MobileTokenizer.js

@@ -4,13 +4,12 @@
 
 /**
  * @file MobileTokenizer.tsx
- * @input Uses public @astryxdesign/core components and hooks only
- *   (AlertDialog, BottomSheet, Button, CheckboxIndicator, EmptyState, Field,
- *   Icon, Spinner, Text, TextInput, Token, VisuallyHidden, useAnnounce,
- *   useMergedRefs, useTooltip, useTranslator)
+ * @input Public @astryxdesign/core components and hooks, plus private Lab
+ *   mobile-sheet confirmation and search-drag dismissal owners
  * @output Exports MobileTokenizer — Lab prototype of the touch Tokenizer
- *   flow with a single searchable sheet, stable in-session checkbox ordering,
- *   and progressive long-list rendering
+ *   flow with the inline-compatible closed trigger, a searchable draft-selection
+ *   sheet, persistent Clear all / Save footer, dirty-dismiss confirmation,
+ *   stable checkbox ordering, and progressive long-list rendering
  * @position Lab (canary) stack layer 1: the touch sheet's user-experience
  *   pass happens here; Core's sheet presentation (`component:Tokenizer`
  *   DEC-3, FR16–FR24, AR6) is implemented but not exposed. The behaviors
@@ -29,11 +28,14 @@
  * API mirrors Core Tokenizer (label/isLabelHidden/searchSource/value/onChange/
  * change, renderItem, hasCreate, maxEntries) so graduation is an import swap.
  * Lab deltas: the filter is a bordered TextInput (Core's PanelSearchInput is
- * not exported), and there is no theming/spec contract yet.
+ * not exported); row, Create, and Clear all changes stay in one draft until
+ * Save; the footer stays visible while searching; dirty dismissal asks before
+ * discarding; and directly dragging results blurs the search so the mobile
+ * keyboard leaves without clearing the query. There is no theming/spec contract
+ * yet.
  */
 import { useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { AlertDialog } from '@astryxdesign/core/AlertDialog';
 import { BottomSheet } from '@astryxdesign/core/BottomSheet';
 import { Button } from '@astryxdesign/core/Button';
 import { EmptyState } from '@astryxdesign/core/EmptyState';
@@ -51,6 +53,8 @@ import { composeEventHandlers, mergeProps } from '@astryxdesign/core/utils';
 import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { colorVars, radiusVars, sizeVars, spacingVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { MobileSheetConfirmation } from "../internal/MobileSheetConfirmation.js";
+import { useDismissSearchOnTouchDrag } from "../internal/useDismissSearchOnTouchDrag.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CREATABLE_ID_PREFIX = '__xds_create__';
 const LIST_RENDER_BATCH_SIZE = 50;
@@ -60,6 +64,9 @@ const LIST_LOAD_MORE_THRESHOLD_PX = 200;
 // concentric with the field's (radius-2) when inset = radius-2 − radius-1 −
 // border = 3px. The same number is the row gap, so wrapped rows read evenly.
 const TOKEN_ROW_INSET = `calc(${spacingVars['--spacing-1']} - 1px)`;
+function hasSameSelection(a, b) {
+  return a.length === b.length && a.every(item => b.some(candidate => candidate.id === item.id));
+}
 const styles = {
   trigger: {
     kzqmXN: "xh8yej3",
@@ -173,15 +180,9 @@ export function MobileTokenizer({
     sheetQueryRef.current = query;
     onChangeQuery?.(query);
   }, [onChangeQuery]);
-  const selectedIds = useMemo(() => new Set(value.map(v => v.id)), [value]);
-  const isAtMax = maxEntries != null && value.length >= maxEntries;
-
   // A field that becomes disabled cannot keep its sheet open, and must not
-  // reopen it when re-enabled (FR17). Adjusted in the render that sees the
-  // change, not an effect, so no frame shows both. A sheet that was open when
-  // the field became disabled stays mounted, closed, so it runs its exit and
-  // hands focus back to the trigger; a field disabled from the start mounts
-  // no sheet.
+  // reopen it when re-enabled (FR17). A forced close bypasses the dirty-draft
+  // prompt, keeps the query, and discards the in-sheet draft on the next open.
   const [wasDisabled, setWasDisabled] = useState(isDisabled);
   const [keepsSheetWhileDisabled, setKeepsSheetWhileDisabled] = useState(false);
   if (isDisabled !== wasDisabled) {
@@ -194,51 +195,11 @@ export function MobileTokenizer({
       setKeepsSheetWhileDisabled(false);
     }
   }
-  const handleAdd = useCallback(item => {
-    if (isDisabled || isAtMax || selectedIds.has(item.id)) {
-      return false;
-    }
-    if (hasCreate && typeof item.id === 'string' && item.id.startsWith(CREATABLE_ID_PREFIX)) {
-      const created = item.id.slice(CREATABLE_ID_PREFIX.length);
-      if (selectedIds.has(created)) {
-        return false;
-      }
-      const createdItem = {
-        id: created,
-        label: created
-      };
-      const real = createdItem;
-      onChange([...value, real], {
-        item: real,
-        type: 'create'
-      });
-      return true;
-    }
-    onChange([...value, item], {
-      item,
-      type: 'add'
-    });
-    return true;
-  }, [hasCreate, isAtMax, isDisabled, onChange, selectedIds, value]);
-  const handleRemove = useCallback(item => {
-    if (isDisabled) {
-      return false;
-    }
-    onChange(value.filter(v => v.id !== item.id), {
-      item,
-      type: 'remove'
-    });
-    return true;
-  }, [isDisabled, onChange, value]);
-  const handleClearAll = useCallback(() => {
-    if (isDisabled || value.length === 0) {
-      return;
+  const handleSheetCommit = useCallback((items, change) => {
+    if (!isDisabled) {
+      onChange(items, change);
     }
-    onChange([], {
-      item: value[value.length - 1],
-      type: 'remove'
-    });
-  }, [isDisabled, onChange, value]);
+  }, [isDisabled, onChange]);
   const showsDisabledMessage = isDisabled && disabledMessage != null;
   // The disabled reason as a tooltip on the trigger, for hover, focus and
   // touch alike, and the element the trigger's description names
@@ -363,17 +324,14 @@ export function MobileTokenizer({
       label: label,
       searchSource: searchSource,
       value: value,
-      selectedIds: selectedIds,
-      isAtMax: isAtMax,
+      maxEntries: maxEntries,
       hasCreate: hasCreate,
       maxMenuItems: maxMenuItems,
       minQueryLength: minQueryLength,
       debounceMs: debounceMs,
       emptySearchResultsText: emptySearchResultsText,
       renderItem: renderItem,
-      onAdd: handleAdd,
-      onRemove: handleRemove,
-      onClearAll: handleClearAll,
+      onCommit: handleSheetCommit,
       onChangeQuery: handleSheetQueryChange
     })]
   });
@@ -381,7 +339,7 @@ export function MobileTokenizer({
 MobileTokenizer.displayName = 'MobileTokenizer';
 /**
  * The sheet: BottomSheet around the content. The content owns the query; a
- * close the person makes (Done, swipe, scrim, Escape) clears it through a
+ * close the person makes (Save, swipe, scrim, Escape) clears it through a
  * handle from the closing event, so a close the field forces (becoming
  * disabled) keeps it (FR18).
  */
@@ -393,7 +351,8 @@ function MobileTokenizerSheet({
   ...content
 }) {
   const clearQueryRef = useRef(null);
-  const requestClose = () => {
+  const requestDismissRef = useRef(null);
+  const closeSheet = () => {
     clearQueryRef.current?.();
     onOpenChange(false);
   };
@@ -402,8 +361,10 @@ function MobileTokenizerSheet({
     onOpenChange: next => {
       if (next) {
         onOpenChange(true);
+      } else if (requestDismissRef.current != null) {
+        requestDismissRef.current();
       } else {
-        requestClose();
+        closeSheet();
       }
     },
     finalFocusRef: finalFocusRef,
@@ -415,7 +376,8 @@ function MobileTokenizerSheet({
       isOpen: isOpen,
       label: label,
       clearQueryRef: clearQueryRef,
-      onRequestClose: requestClose
+      requestDismissRef: requestDismissRef,
+      onCloseSheet: closeSheet
     })
   });
 }
@@ -427,21 +389,19 @@ function MobileTokenizerSheetContent({
   isOpen,
   initialQuery,
   clearQueryRef,
-  onRequestClose,
+  requestDismissRef,
+  onCloseSheet,
   label,
   searchSource,
   value,
-  selectedIds,
-  isAtMax,
+  maxEntries,
   hasCreate,
   maxMenuItems,
   minQueryLength,
   debounceMs,
   emptySearchResultsText,
   renderItem,
-  onAdd,
-  onRemove,
-  onClearAll,
+  onCommit,
   onChangeQuery
 }) {
   const t = useTranslator();
@@ -449,6 +409,20 @@ function MobileTokenizerSheetContent({
   const searchRef = useRef(null);
   const clearAllRef = useRef(null);
 
+  // One open sheet owns one selection draft. The caller's controlled value is
+  // unchanged until Save, so a cancelled dismissal can discard cleanly.
+  const [valueAtOpen, setValueAtOpen] = useState(() => [...value]);
+  const [draftValue, setDraftValue] = useState(() => [...value]);
+  const lastDraftChangeRef = useRef(null);
+  const [isClearConfirmationOpen, setIsClearConfirmationOpen] = useState(false);
+  const [isDiscardConfirmationOpen, setIsDiscardConfirmationOpen] = useState(false);
+  const afterConfirmationRef = useRef(null);
+  const shouldRestoreDraftFocusRef = useRef(false);
+  const isDraftDirty = !hasSameSelection(valueAtOpen, draftValue);
+  const selectedIds = useMemo(() => new Set(draftValue.map(item => item.id)), [draftValue]);
+  const isAtMax = maxEntries != null && draftValue.length >= maxEntries;
+  const isDraftOverMax = maxEntries != null && draftValue.length > maxEntries;
+
   // ---- query and search ----
   const [query, setQuery] = useState(initialQuery);
   const trimmedQuery = query.trim();
@@ -544,7 +518,11 @@ function MobileTokenizerSheetContent({
   if (isOpen !== wasOpen) {
     setWasOpen(isOpen);
     if (isOpen) {
-      setSelectedItemsAtOpen(value);
+      const snapshot = [...value];
+      setValueAtOpen(snapshot);
+      setDraftValue(snapshot);
+      lastDraftChangeRef.current = null;
+      setSelectedItemsAtOpen(snapshot);
       resetListWindow();
       // An open lists the bootstrap set, or searches a query kept across a
       // forced close (FR18); a kept query below the threshold leaves nothing
@@ -557,6 +535,12 @@ function MobileTokenizerSheetContent({
       } else {
         announcedSearchIdRef.current = searchIdRef.current;
       }
+    } else {
+      // Close both confirmations in the same render that closes the sheet.
+      afterConfirmationRef.current = null;
+      shouldRestoreDraftFocusRef.current = false;
+      setIsClearConfirmationOpen(false);
+      setIsDiscardConfirmationOpen(false);
     }
   }
   const handleQueryChange = next => {
@@ -587,16 +571,16 @@ function MobileTokenizerSheetContent({
     const selectedAtOpenMatches = selectedItemsAtOpen.filter(matchesQuery);
     const selectedAtOpenIds = new Set(selectedAtOpenMatches.map(item => item.id));
     const resultIds = new Set(results.map(item => item.id));
-    const selectedItemsMissingFromResults = value.filter(item => !selectedAtOpenIds.has(item.id) && !resultIds.has(item.id) && matchesQuery(item));
+    const selectedItemsMissingFromResults = draftValue.filter(item => !selectedAtOpenIds.has(item.id) && !resultIds.has(item.id) && matchesQuery(item));
     return [...selectedAtOpenMatches, ...selectedItemsMissingFromResults, ...results.filter(item => !selectedAtOpenIds.has(item.id))];
-  }, [trimmedQuery, results, selectedItemsAtOpen, value]);
+  }, [trimmedQuery, results, selectedItemsAtOpen, draftValue]);
   const renderedItems = visibleItems.slice(0, renderedItemCount);
   const createItem = useMemo(() => {
     if (!hasCreate || trimmedQuery === '' || isAtMax) {
       return null;
     }
     const lower = trimmedQuery.toLowerCase();
-    if (selectedIds.has(trimmedQuery) || value.some(item => item.label.toLowerCase() === lower) || results.some(r => r.label.toLowerCase() === lower)) {
+    if (selectedIds.has(trimmedQuery) || draftValue.some(item => item.label.toLowerCase() === lower) || results.some(r => r.label.toLowerCase() === lower)) {
       return null;
     }
     return {
@@ -605,7 +589,7 @@ function MobileTokenizerSheetContent({
         value: trimmedQuery
       })
     };
-  }, [hasCreate, trimmedQuery, results, selectedIds, isAtMax, value, t]);
+  }, [hasCreate, trimmedQuery, results, selectedIds, isAtMax, draftValue, t]);
   const isQueryEmpty = trimmedQuery === '';
   // An empty state is a searched query's answer. An empty query that lists
   // nothing — nothing selected and an empty bootstrap set — shows only the
@@ -627,21 +611,28 @@ function MobileTokenizerSheetContent({
     }
   }, [announce, createItem, isOpen, isPending, isQueryEmpty, isSettledEmpty, visibleItems.length, searchId, t]);
 
-  // ---- Clear all ----
-  // The confirmation is in the DOM only from the Clear all press until it
-  // closes (INV7). Dialog restores focus only in its close effect, so the
-  // sheet places focus itself once the modal is gone: on the search field
-  // after a confirmed clear — the clear is spent, and the search field is
-  // where the next selection starts (FR24, `spec:AST-085` FR4) — and back on
-  // Clear all after a cancel. A confirmed clear is announced there too, after
-  // the confirmation has gone, so the words are delivered inside the sheet
-  // (`spec:AST-086` FR14).
-  const [isClearConfirmationOpen, setIsClearConfirmationOpen] = useState(false);
-  const afterConfirmationRef = useRef(null);
+  // ---- confirmations and dismissal ----
+  const closeDiscardConfirmation = () => {
+    shouldRestoreDraftFocusRef.current = true;
+    setIsDiscardConfirmationOpen(false);
+  };
+  // Synchronize DOM focus with the closed discard dialog. Dialog restores focus
+  // in its own close Effect, so focus the search only after that dialog closes.
+  useEffect(() => {
+    if (isDiscardConfirmationOpen || !shouldRestoreDraftFocusRef.current || !isOpen) {
+      return;
+    }
+    shouldRestoreDraftFocusRef.current = false;
+    searchRef.current?.focus({
+      preventScroll: true
+    });
+  }, [isDiscardConfirmationOpen, isOpen]);
   const closeClearConfirmation = confirmed => {
     afterConfirmationRef.current = confirmed ? 'search' : 'clear-all';
     setIsClearConfirmationOpen(false);
   };
+  // Synchronize DOM focus and the live-region announcement after the clear
+  // dialog closes, once Dialog's own close Effect has restored focus.
   useEffect(() => {
     if (isClearConfirmationOpen || afterConfirmationRef.current == null) {
       return;
@@ -655,10 +646,53 @@ function MobileTokenizerSheetContent({
       clearAllRef.current?.focus();
     }
   }, [announce, isClearConfirmationOpen, t]);
+  useImperativeHandle(requestDismissRef, () => () => {
+    if (isDraftDirty) {
+      setIsDiscardConfirmationOpen(true);
+    } else {
+      onCloseSheet();
+    }
+  }, [isDraftDirty, onCloseSheet]);
+  const handleSave = () => {
+    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 = null;
+      if (lastChangeIsNet) {
+        change = lastDraftChange;
+      } else if (lastDraftChange?.type === 'remove' && removed != null) {
+        change = {
+          item: removed,
+          type: 'remove'
+        };
+      } else if (added != null) {
+        const 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);
+      }
+    }
+    onCloseSheet();
+  };
   const searchLabel = t('@astryx.tokenizer.search', {
     label
   });
   const noResultsTitle = emptySearchResultsText ?? t('@astryx.typeahead.emptySearchResults');
+  const listDragProps = useDismissSearchOnTouchDrag(() => [searchRef.current]);
   return /*#__PURE__*/_jsxs("div", {
     ...{
       className: "x78zum5 xdt5ytf x5yr21d x2lwn1j xrrkdod xoxd1wu xvmdzux"
@@ -718,6 +752,7 @@ function MobileTokenizerSheetContent({
       "data-testid": "mobile-tokenizer-list",
       "data-rendered-count": renderedItems.length,
       "data-total-count": visibleItems.length,
+      ...listDragProps,
       onScroll: event => {
         const list = event.currentTarget;
         const distanceFromBottom = list.scrollHeight - list.scrollTop - list.clientHeight;
@@ -747,12 +782,21 @@ function MobileTokenizerSheetContent({
           variant: "secondary",
           size: "lg",
           onClick: () => {
-            if (onAdd(createItem)) {
-              announce(t('@astryx.tokenizer.tokenAdded', {
-                label: trimmedQuery
-              }));
-            }
+            const item = {
+              id: trimmedQuery,
+              label: trimmedQuery
+            };
+            const createdItem = item;
+            setDraftValue(current => [...current, createdItem]);
+            lastDraftChangeRef.current = {
+              item: createdItem,
+              type: 'create'
+            };
+            announce(t('@astryx.tokenizer.tokenAdded', {
+              label: trimmedQuery
+            }));
             handleQueryChange('');
+            searchRef.current?.focus();
           }
         })]
       }), renderedItems.map(item => {
@@ -769,12 +813,20 @@ function MobileTokenizerSheetContent({
               return;
             }
             if (isSelected) {
-              if (onRemove(item)) {
-                announce(t('@astryx.tokenizer.tokenRemoved', {
-                  label: item.label
-                }));
-              }
-            } else if (onAdd(item)) {
+              setDraftValue(current => current.filter(selected => selected.id !== item.id));
+              lastDraftChangeRef.current = {
+                item,
+                type: 'remove'
+              };
+              announce(t('@astryx.tokenizer.tokenRemoved', {
+                label: item.label
+              }));
+            } else {
+              setDraftValue(current => [...current, item]);
+              lastDraftChangeRef.current = {
+                item,
+                type: 'add'
+              };
               announce(t('@astryx.tokenizer.tokenAdded', {
                 label: item.label
               }));
@@ -805,7 +857,7 @@ function MobileTokenizerSheetContent({
           })]
         }, item.id);
       })]
-    }), isQueryEmpty && /*#__PURE__*/_jsxs("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       ...{
         className: "x78zum5 x6s0dn4 x1txdalj x1vlblms xr1yuqi"
       },
@@ -814,23 +866,22 @@ function MobileTokenizerSheetContent({
         label: t('@astryx.tokenizer.clearAll'),
         variant: "secondary",
         size: "lg",
-        isDisabled: value.length === 0
-        // With a tooltip, Button's disabled mode is `aria-disabled`: the
-        // action keeps its focus order and says why it does nothing
-        // (`spec:AST-085` FR1), instead of leaving the tab order as a
-        // natively disabled button does (FR24).
-        ,
-        tooltip: value.length === 0 ? t('@astryx.tokenizer.nothingToClear') : undefined,
+        isDisabled: draftValue.length === 0,
+        tooltip: draftValue.length === 0 ? t('@astryx.tokenizer.nothingToClear') : undefined,
         onClick: () => setIsClearConfirmationOpen(true),
         xstyle: styles.footerAction
       }), /*#__PURE__*/_jsx(Button, {
-        label: t('@astryx.tokenizer.done'),
+        label: t('@astryx.tokenizer.save'),
         variant: "primary",
         size: "lg",
-        onClick: onRequestClose,
+        isDisabled: isDraftOverMax,
+        tooltip: isDraftOverMax ? t('@astryx.tokenizer.selectionLimit', {
+          count: maxEntries ?? 0
+        }) : undefined,
+        onClick: handleSave,
         xstyle: styles.footerAction
       })]
-    }), isClearConfirmationOpen && /*#__PURE__*/_jsx(AlertDialog, {
+    }), isClearConfirmationOpen && /*#__PURE__*/_jsx(MobileSheetConfirmation, {
       isOpen: true,
       onOpenChange: next => {
         if (!next) {
@@ -841,11 +892,37 @@ function MobileTokenizerSheetContent({
       description: t('@astryx.tokenizer.clearAllDescription', {
         label
       }),
+      cancelLabel: t('@astryx.alertDialog.cancel'),
       actionLabel: t('@astryx.tokenizer.clearSelection'),
       onAction: () => {
-        onClearAll();
+        const lastItem = draftValue[draftValue.length - 1];
+        if (lastItem != null) {
+          setDraftValue([]);
+          lastDraftChangeRef.current = {
+            item: lastItem,
+            type: 'remove'
+          };
+        }
         closeClearConfirmation(true);
       }
+    }), isDiscardConfirmationOpen && /*#__PURE__*/_jsx(MobileSheetConfirmation, {
+      isOpen: true,
+      onOpenChange: next => {
+        if (!next) {
+          closeDiscardConfirmation();
+        }
+      },
+      title: t('@astryx.tokenizer.discardChangesTitle'),
+      description: t('@astryx.tokenizer.discardChangesDescription', {
+        label
+      }),
+      cancelLabel: t('@astryx.tokenizer.keepEditing'),
+      actionLabel: t('@astryx.tokenizer.discardChanges'),
+      onAction: () => {
+        shouldRestoreDraftFocusRef.current = false;
+        setIsDiscardConfirmationOpen(false);
+        onCloseSheet();
+      }
     })]
   });
 }

package/dist/internal/MobileSheetConfirmation.d.ts

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,88 @@
+// 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

@@ -0,0 +1,21 @@
+/**
+ * @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

@@ -0,0 +1 @@
+{"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"}