@astryxdesign/core 0.7.7-canary.f9ac85f → 0.7.7

package/src/i18n/generated-english/Tokenizer/TokenizerBottomSheet.generated.ts

@@ -7,6 +7,7 @@
  */
 
 const english: Readonly<Record<string, string>> = {
+  "@astryx.alertDialog.cancel": "Cancel",
   "@astryx.textInput.clearLabel": "Clear {label}",
   "@astryx.tokenizer.add": "Add",
   "@astryx.tokenizer.addValue": "Add {value}",
@@ -16,11 +17,16 @@ const english: Readonly<Record<string, string>> = {
   "@astryx.tokenizer.clearAllTitle": "Clear all selected items?",
   "@astryx.tokenizer.clearSelection": "Clear selection",
   "@astryx.tokenizer.create": "Create \"{value}\"",
-  "@astryx.tokenizer.done": "Done",
+  "@astryx.tokenizer.discardChanges": "Discard changes",
+  "@astryx.tokenizer.discardChangesDescription": "Your changes to {label} haven't been saved.",
+  "@astryx.tokenizer.discardChangesTitle": "Discard changes?",
+  "@astryx.tokenizer.keepEditing": "Keep editing",
   "@astryx.tokenizer.noResultsDescription": "Try a different search.",
   "@astryx.tokenizer.nothingToClear": "Nothing selected",
+  "@astryx.tokenizer.save": "Save",
   "@astryx.tokenizer.search": "Search {label}",
   "@astryx.tokenizer.searchPlaceholder": "Search…",
+  "@astryx.tokenizer.selectionLimit": "Select up to {count, plural, one {# item} other {# items}}",
   "@astryx.tokenizer.tokenAdded": "Added {label}",
   "@astryx.tokenizer.tokenRemoved": "Removed {label}",
   "@astryx.typeahead.emptySearchResults": "No results found",

package/src/i18n/generated-locales/en.generated.ts

@@ -315,6 +315,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.powersearch.label': 'Search',
   '@astryx.powersearch.placeholder': 'Search…',
   '@astryx.powersearch.allFiltersRemoved': 'All filters removed',
+  '@astryx.powersearch.editableFiltersRemoved': 'Editable filters removed',
   '@astryx.resizable.collapsed': 'Collapsed',
   '@astryx.resizable.handle.label': 'Resize handle',
   '@astryx.selector.placeholder': 'Select…',

package/src/i18n/generated-locales/pseudo.generated.ts

@@ -322,6 +322,7 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
   '@astryx.powersearch.label': '⟦Šéàřçĥ⟧',
   '@astryx.powersearch.placeholder': '⟦Šéàřçĥ…⟧',
   '@astryx.powersearch.allFiltersRemoved': '⟦Àłł ƒíłţéřš řéɱóṽéð⟧',
+  '@astryx.powersearch.editableFiltersRemoved': '⟦Éðíţàƀłé ƒíłţéřš řéɱóṽéð⟧',
   '@astryx.resizable.collapsed': '⟦Çółłàþšéð⟧',
   '@astryx.resizable.handle.label': '⟦Řéšížé ĥàñðłé⟧',
   '@astryx.selector.placeholder': '⟦Šéłéçţ…⟧',

package/src/internal/SheetConfirmation.tsx

@@ -0,0 +1,101 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file SheetConfirmation.tsx
+ * @input Dialog, Layout, Heading, Text, Button; caller-owned copy
+ * @output SheetConfirmation — the confirmation a touch sheet opens over
+ *   itself for Clear all and for discarding a changed draft
+ * @position Core-internal, shared by the Tokenizer sheet and the PowerSearch
+ *   sheets; not a public export
+ *
+ * AlertDialog fixes its purpose to form and its safe action to ghost. A touch
+ * sheet's confirmation allows scrim dismissal. Its two full-width large
+ * actions are stacked and separated: the destructive action first in reading
+ * order, the safe action focused first. The alert-dialog theme target stays.
+ */
+
+import {useId} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {Button} from '../Button/Button';
+import {Dialog} from '../Dialog/Dialog';
+import {Heading} from '../Heading/Heading';
+import {Layout} from '../Layout/Layout';
+import {LayoutContent} from '../Layout/LayoutContent';
+import {LayoutFooter} from '../Layout/LayoutFooter';
+import {Stack} from '../Stack/Stack';
+import {Text} from '../Text/Text';
+import {themeProps} from '../utils/themeProps';
+
+export interface SheetConfirmationProps {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  title: string;
+  description: string;
+  cancelLabel: string;
+  actionLabel: string;
+  onAction: () => void;
+}
+
+const styles = stylex.create({
+  action: {width: '100%'},
+});
+
+export function SheetConfirmation({
+  isOpen,
+  onOpenChange,
+  title,
+  description,
+  cancelLabel,
+  actionLabel,
+  onAction,
+}: SheetConfirmationProps) {
+  const titleId = useId();
+  const descriptionId = useId();
+  return (
+    <Dialog
+      {...themeProps('alert-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}>
+              {title}
+            </Heading>
+            <Text type="body" color="secondary" id={descriptionId}>
+              {description}
+            </Text>
+          </LayoutContent>
+        }
+        footer={
+          <LayoutFooter>
+            <Stack direction="vertical" gap={4} hAlign="stretch">
+              <Button
+                label={actionLabel}
+                variant="destructive"
+                size="lg"
+                onClick={onAction}
+                xstyle={styles.action}
+              />
+              <Button
+                label={cancelLabel}
+                variant="secondary"
+                size="lg"
+                onClick={() => onOpenChange(false)}
+                data-autofocus
+                xstyle={styles.action}
+              />
+            </Stack>
+          </LayoutFooter>
+        }
+      />
+    </Dialog>
+  );
+}

package/src/internal/sheetDraft.ts

@@ -0,0 +1,80 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/**
+ * @file sheetDraft.ts
+ * @input A sheet's selection at open, its draft, and the last edit made
+ * @output SheetDraftChange, hasSameSelection, nameSheetDraftChange — the
+ *   rules a touch sheet's Save and dismissal share
+ * @position Core-internal, shared by the Tokenizer sheet and the Lab sheets
+ *   through `internal/touch-sheet`; not a public export
+ *
+ * A touch sheet edits a draft and reports it once, on Save, with one change:
+ * the last edit that still holds, else the nearest net add or remove. A
+ * dismissal asks before discarding only while the draft differs from the
+ * selection at open, as a set: a row unchecked and checked again is no change.
+ */
+
+interface SheetDraftItem {
+  id: string | number;
+}
+
+/** An edit of a sheet's draft, and the shape Save reports. */
+export type SheetDraftChange<T> = {
+  item: T;
+  type: 'add' | 'create' | 'remove';
+};
+
+/** Whether two selections hold the same items, in any order. */
+export function hasSameSelection<T extends SheetDraftItem>(
+  a: ReadonlyArray<T>,
+  b: ReadonlyArray<T>,
+): boolean {
+  if (a.length !== b.length) {
+    return false;
+  }
+  const ids = new Set(a.map(item => item.id));
+  return b.every(item => ids.has(item.id));
+}
+
+/**
+ * The change Save reports for a draft that differs from the selection at
+ * open, or `null` when nothing differs. The last edit names it when it still
+ * holds: its item is in the draft and was not selected at open, or was
+ * selected at open and is gone. Otherwise, after a removal, a `remove` names
+ * an item that is gone; otherwise an `add` (`create` when the last edit
+ * created that item) names an item that is new; otherwise a `remove` names
+ * an item that is gone.
+ */
+export function nameSheetDraftChange<T extends SheetDraftItem>(
+  valueAtOpen: ReadonlyArray<T>,
+  draftValue: ReadonlyArray<T>,
+  lastDraftChange: SheetDraftChange<T> | null,
+): SheetDraftChange<T> | null {
+  const wasSelected = (id: T['id']) => valueAtOpen.some(item => item.id === id);
+  const isSelected = (id: T['id']) => draftValue.some(item => item.id === id);
+  const added = draftValue.find(item => !wasSelected(item.id));
+  const removed = valueAtOpen.find(item => !isSelected(item.id));
+  const lastChangeIsNet =
+    lastDraftChange != null &&
+    (lastDraftChange.type === 'remove'
+      ? wasSelected(lastDraftChange.item.id) &&
+        !isSelected(lastDraftChange.item.id)
+      : isSelected(lastDraftChange.item.id) &&
+        !wasSelected(lastDraftChange.item.id));
+  if (lastChangeIsNet) {
+    return lastDraftChange;
+  }
+  if (lastDraftChange?.type === 'remove' && removed != null) {
+    return {item: removed, type: 'remove'};
+  }
+  if (added != null) {
+    const type: SheetDraftChange<T>['type'] =
+      lastDraftChange?.item.id === added.id && lastDraftChange.type === 'create'
+        ? 'create'
+        : 'add';
+    return {item: added, type};
+  }
+  if (removed != null) {
+    return {item: removed, type: 'remove'};
+  }
+  return null;
+}

package/src/internal/touch-sheet.ts

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/**
+ * @file touch-sheet.ts
+ * @input The touch sheets' shared confirmation, search-drag dismissal and
+ *   draft rules
+ * @output `@astryxdesign/core/internal/touch-sheet`: SheetConfirmation,
+ *   useDismissSearchOnTouchDrag, hasSameSelection and nameSheetDraftChange,
+ *   re-exported by name for Lab's sheets
+ * @position An internal entry reserved for Astryx's own packages:
+ *   undocumented, outside the public API and its compatibility promise,
+ *   versioned in lockstep with Core, and allowed only in Core and Lab by the
+ *   `@astryx/no-core-internal-import` lint rule. Core components import the
+ *   same modules by relative path. Named re-exports only.
+ *
+ * SYNC: When modified, update scripts/sync-exports.js.
+ */
+export {SheetConfirmation} from './SheetConfirmation';
+export type {SheetConfirmationProps} from './SheetConfirmation';
+export {useDismissSearchOnTouchDrag} from './useDismissSearchOnTouchDrag';
+export {hasSameSelection, nameSheetDraftChange} from './sheetDraft';
+export type {SheetDraftChange} from './sheetDraft';

package/src/internal/useDismissSearchOnTouchDrag.ts

@@ -0,0 +1,69 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useDismissSearchOnTouchDrag.ts
+ * @input Caller-owned search inputs, a focus target, and touch events from a
+ *   separate results list
+ * @output useDismissSearchOnTouchDrag — touch handlers for the results list
+ * @position Core-internal, shared by the touch sheets; not a public export
+ *
+ * A direct vertical touch drag on the results moves focus off a focused
+ * search input. The on-screen keyboard then leaves and the rows come into
+ * view; the query stays. Focus goes to the caller's target (the sheet's
+ * panel), never to the page body behind an open modal. Scroll events are not
+ * observed: filtering can clamp scrollTop and fire scroll while someone is
+ * typing. Small moves, taps and multi-touch gestures leave focus alone.
+ */
+
+import {useRef, type TouchEvent} from 'react';
+
+const DRAG_THRESHOLD_PX = 8;
+
+type SearchInput = HTMLInputElement | null | undefined;
+
+export function useDismissSearchOnTouchDrag(
+  getSearchInputs: () => ReadonlyArray<SearchInput>,
+  getFocusTarget?: () => HTMLElement | null | undefined,
+) {
+  const startYRef = useRef<number | null>(null);
+  const reset = () => {
+    startYRef.current = null;
+  };
+
+  return {
+    onTouchStart: (event: TouchEvent<HTMLElement>) => {
+      startYRef.current =
+        event.touches.length === 1 ? event.touches[0].clientY : null;
+    },
+    onTouchMove: (event: TouchEvent<HTMLElement>) => {
+      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,
+      );
+      if (focusedSearch == null) {
+        return;
+      }
+      const target = getFocusTarget?.();
+      if (target != null) {
+        target.focus({preventScroll: true});
+      } else {
+        focusedSearch.blur();
+      }
+    },
+    onTouchEnd: reset,
+    onTouchCancel: reset,
+  };
+}

package/src/motion/reducedMotion.ts

@@ -4,7 +4,7 @@
  * @file reducedMotion.ts
  * @input The Reduced Motion preference, the primary pointer, the motion tables
  * @output reducedMotionFade (the fade the animator would play, for motion it
- *   does not drive) and the two media queries a StyleX transition spells
+ *   does not drive), playReducedMotionDip, and the queries a transition spells
  * @position The one Reduced Motion policy (design:reduced-motion) for code
  *   beside the animator: a raw Web Animations fade, a CSS transition
  *
@@ -102,3 +102,81 @@ export function reducedMotionFade(
     easing: `cubic-bezier(${curve.join(', ')})`,
   };
 }
+
+/** A running Reduced Motion dip. */
+export interface ReducedMotionDip {
+  /** Stops the dip. A change that has not landed yet never lands. */
+  cancel(): void;
+}
+
+/**
+ * Plays `fade` on `element` as a dip, and runs `land` at its middle: the
+ * fade-out, the change, then the fade-in. The fade-out holds at 0 until `land`
+ * has run, and the fade-in starts only after it. So the change never shows at
+ * full opacity, however late the main thread runs. A timer at the middle can
+ * fire after the fade-in has begun.
+ *
+ * `land` must apply the change before it returns: the fade-in starts right
+ * after it. `from` is the opacity the fade-out starts at: a leaving element
+ * fades out from where it is.
+ *
+ * @example
+ * ```
+ * const dip = playReducedMotionDip(scroller, fade, () => scroller.scrollTo({top}));
+ * // A newer change replaces it:
+ * dip.cancel();
+ * ```
+ */
+export function playReducedMotionDip(
+  element: Element,
+  fade: ReducedMotionFade,
+  land: () => void,
+  from = 1,
+): ReducedMotionDip {
+  const half = fade.duration / 2;
+  let isCancelled = false;
+  let fadeIn: Animation | null = null;
+  const fadeOut = element.animate(
+    [{opacity: from, easing: fade.easing}, {opacity: 0}],
+    {duration: half, fill: 'forwards'},
+  );
+  fadeOut.finished.then(
+    () => {
+      if (isCancelled) {
+        return;
+      }
+      land();
+      // The fade-in holds 0 until it starts: after a long stall, its start can
+      // come after the frame that runs this.
+      fadeIn = element.animate(
+        [{opacity: 0, easing: fade.easing}, {opacity: 1}],
+        {duration: half, fill: 'backwards'},
+      );
+      // The fade-in keeps the dip's own schedule: it starts where the fade-out
+      // ended, so the dip keeps its length. The clock is read after the
+      // landing, because a frame's timestamp does not count the landing's own
+      // work. After a long stall, half of the fade-in still plays.
+      const fadeOutEnd = endTime(fadeOut, half);
+      if (fadeOutEnd != null) {
+        fadeIn.startTime = Math.max(fadeOutEnd, performance.now() - half / 2);
+      }
+      // The fade-in now holds the opacity, so the held 0 can go.
+      fadeOut.cancel();
+    },
+    // A cancelled fade-out rejects `finished`: nothing lands.
+    () => {},
+  );
+  return {
+    cancel() {
+      isCancelled = true;
+      fadeOut.cancel();
+      fadeIn?.cancel();
+    },
+  };
+}
+
+/** When `animation` was due to end, on its timeline (ms), if it has started. */
+function endTime(animation: Animation, duration: number): number | null {
+  const start = animation.startTime;
+  return typeof start === 'number' ? start + duration : null;
+}

package/src/utils/clickGuard.ts

@@ -26,6 +26,11 @@
 // `touchend`, aimed at whatever is under the finger by then. They go with
 // the click, the next `pointerdown` or the window, as the guard does.
 //
+// The menu press model's arm at a finger's release also cancels that touch's
+// `touchend`, so the browser creates no click and no compatibility mouse
+// events. A busy main thread can otherwise hold that click past the window,
+// when a drill-in has put another row under the finger.
+//
 // Some clicks always pass:
 // - a click with `detail` 0: a keyboard's, a screen reader's, or one that the
 //   page dispatches;
@@ -56,6 +61,13 @@ export interface ClickGuardOptions {
    * @default false
    */
   readonly takesLateMouse?: boolean;
+  /**
+   * The menu press model's arm at a finger's release: the guard also cancels
+   * that touch's `touchend`, so the browser creates no click for it. A
+   * cancelled `touchend` disarms the guard.
+   * @default false
+   */
+  readonly cancelsTouchEnd?: boolean;
 }
 
 interface Guard {
@@ -89,7 +101,11 @@ function listenForClicks(view: Window): () => void {
 /** Swallow the browser's next click on `doc` (see the file header). */
 export function armClickGuard(
   doc: Document,
-  {staysInstalled = false, takesLateMouse = false}: ClickGuardOptions = {},
+  {
+    staysInstalled = false,
+    takesLateMouse = false,
+    cancelsTouchEnd = false,
+  }: ClickGuardOptions = {},
 ): void {
   const view = doc.defaultView;
   if (view == null) {
@@ -116,6 +132,26 @@ export function armClickGuard(
       );
     }
   }
+  if (cancelsTouchEnd) {
+    // A touch sends its pointerup before its touchend, so the next touchend is
+    // that touch's own. The next pointerdown disarms the guard first.
+    const stopTouchEnd = subscribeInput(
+      view,
+      'touchend',
+      event => {
+        stopTouchEnd();
+        // A touchend that the browser took for a scroll is not cancelable.
+        // The guard stays armed for a click that may follow it.
+        if (event.cancelable) {
+          event.preventDefault();
+          // No click follows a cancelled touchend.
+          disarmClickGuard(doc);
+        }
+      },
+      {cancels: true},
+    );
+    guard.unsubscribers.push(stopTouchEnd);
+  }
   guard.timer = setTimeout(() => disarmClickGuard(doc), CLICK_GUARD_WINDOW_MS);
 }
 

package/dist/internal/tokenizer-presentation.d.ts

@@ -1,21 +0,0 @@
-/**
- * @file tokenizer-presentation.ts
- * @input Tokenizer's sheet-capable signature
- * @output `@astryxdesign/core/internal/tokenizer-presentation`: the Tokenizer
- *   with its `presentation` options reachable, for Astryx's own packages
- * @position An internal entry reserved for Astryx's own packages:
- *   undocumented, outside the public API and its compatibility promise
- *   (spec:AST-017 FR21), versioned in lockstep with Core, and allowed only in
- *   Core and Lab by the `@astryx/no-core-internal-import` lint rule
- *   (architecture:react-component-runtime INV13). The sheet presentation is
- *   implemented but not yet exposed: the public `TokenizerProps` offers no
- *   `experimental.presentation` while its user experience is being finished
- *   (`component:Tokenizer` DEC-3, implementation gap), and every public field
- *   renders the popover presentation. Named re-exports only.
- *
- * SYNC: When modified, update tokenizer-presentation.test.ts and
- * scripts/sync-exports.js.
- */
-export { TokenizerWithPresentation } from '../Tokenizer/Tokenizer.js';
-export type { TokenizerPresentationOptions, TokenizerWithPresentationProps, } from '../Tokenizer/Tokenizer.js';
-//# sourceMappingURL=tokenizer-presentation.d.ts.map

package/dist/internal/tokenizer-presentation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokenizer-presentation.d.ts","sourceRoot":"","sources":["../../src/internal/tokenizer-presentation.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AACjE,YAAY,EACV,4BAA4B,EAC5B,8BAA8B,GAC/B,MAAM,wBAAwB,CAAC"}

package/dist/internal/tokenizer-presentation.js

@@ -1,21 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file tokenizer-presentation.ts
- * @input Tokenizer's sheet-capable signature
- * @output `@astryxdesign/core/internal/tokenizer-presentation`: the Tokenizer
- *   with its `presentation` options reachable, for Astryx's own packages
- * @position An internal entry reserved for Astryx's own packages:
- *   undocumented, outside the public API and its compatibility promise
- *   (spec:AST-017 FR21), versioned in lockstep with Core, and allowed only in
- *   Core and Lab by the `@astryx/no-core-internal-import` lint rule
- *   (architecture:react-component-runtime INV13). The sheet presentation is
- *   implemented but not yet exposed: the public `TokenizerProps` offers no
- *   `experimental.presentation` while its user experience is being finished
- *   (`component:Tokenizer` DEC-3, implementation gap), and every public field
- *   renders the popover presentation. Named re-exports only.
- *
- * SYNC: When modified, update tokenizer-presentation.test.ts and
- * scripts/sync-exports.js.
- */
-export { TokenizerWithPresentation } from "../Tokenizer/Tokenizer.js";

package/src/internal/tokenizer-presentation.ts

@@ -1,25 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file tokenizer-presentation.ts
- * @input Tokenizer's sheet-capable signature
- * @output `@astryxdesign/core/internal/tokenizer-presentation`: the Tokenizer
- *   with its `presentation` options reachable, for Astryx's own packages
- * @position An internal entry reserved for Astryx's own packages:
- *   undocumented, outside the public API and its compatibility promise
- *   (spec:AST-017 FR21), versioned in lockstep with Core, and allowed only in
- *   Core and Lab by the `@astryx/no-core-internal-import` lint rule
- *   (architecture:react-component-runtime INV13). The sheet presentation is
- *   implemented but not yet exposed: the public `TokenizerProps` offers no
- *   `experimental.presentation` while its user experience is being finished
- *   (`component:Tokenizer` DEC-3, implementation gap), and every public field
- *   renders the popover presentation. Named re-exports only.
- *
- * SYNC: When modified, update tokenizer-presentation.test.ts and
- * scripts/sync-exports.js.
- */
-export {TokenizerWithPresentation} from '../Tokenizer/Tokenizer';
-export type {
-  TokenizerPresentationOptions,
-  TokenizerWithPresentationProps,
-} from '../Tokenizer/Tokenizer';