@astryxdesign/core 0.7.7-canary.550ff21 → 0.7.7-canary.58c5b8a

package/dist/Tokenizer/Tokenizer.js

@@ -6,16 +6,10 @@
  * @file Tokenizer.tsx
  * @input Uses React, BaseTypeahead, Field, Token, useAnnounce,
  *   useAdaptivePresentation, and TokenizerBottomSheet (lazy)
- * @output Exports Tokenizer multi-select typeahead component, and the
- *   internal TokenizerWithPresentation signature the `internal/tokenizer-presentation`
- *   entry re-exports
+ * @output Exports Tokenizer multi-select typeahead component
  * @position Composed component; forwards DOM ref and exposes focus control via
- *   handleRef. The sheet presentation — a trigger that opens
- *   TokenizerBottomSheet — is implemented but not exposed: `TokenizerProps`
- *   offers no `experimental.presentation` while its user experience is being
- *   finished (`component:Tokenizer` DEC-3, implementation gap), and only
- *   Astryx's own packages reach it through the internal entry
- *   (`architecture:react-component-runtime` INV13).
+ *   handleRef. The experimental `presentation` option swaps the inline
+ *   combobox for a trigger that opens TokenizerBottomSheet.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Tokenizer/index.ts
@@ -32,6 +26,7 @@ import { useFieldInputStyling } from "../Field/fieldParts.js";
 import { inputDisabledFocusStyles } from "../Field/inputDisabledFocus.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { TokenizerClearAllMessageContext } from "./TokenizerClearAllMessageContext.js";
+import { TokenizerItemRemovableContext } from "./TokenizerItemRemovableContext.js";
 import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
 import { useAdaptivePresentation } from "../hooks/useAdaptivePresentation.js";
 import { useIsHydrating } from "../hooks/useIsHydrating.js";
@@ -57,6 +52,7 @@ import { themeProps } from "../utils/themeProps.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/Tokenizer/Tokenizer.generated.js";
+import { isRenderable } from "../utils/isRenderable.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 registerEnglishFallback(english);
 
@@ -82,20 +78,12 @@ registerEnglishFallback(english);
  */
 
 /**
- * The presentation options the sheet-capable signature admits. Not public:
- * `TokenizerProps` has no `experimental` while the sheet's user experience is
- * being finished; Astryx's own packages reach the sheet through
- * `@astryxdesign/core/internal/tokenizer-presentation`.
- */
-
-/**
- * The props of the sheet-capable signature: `TokenizerProps` plus the
- * presentation options and a `ref` that also accepts the sheet presentation's
- * trigger button, the control it stands for there. Not public: reached only
- * as `TokenizerWithPresentation` through the internal entry, so the released
- * `TokenizerProps` — an interface, so `interface X extends TokenizerProps<T>`,
- * `Omit<TokenizerProps<T>, …>` and `ComponentProps<typeof Tokenizer>` keep
- * their released shapes — names no presentation.
+ * The props the experimental opt-in admits. `experimental` is present, and
+ * `ref` also accepts the sheet presentation's trigger button, the control it
+ * stands for there. Only the overload below reaches this type. `TokenizerProps`
+ * stays the component's declared props type: it is an interface, so
+ * `interface X extends TokenizerProps<T>`, `Omit<TokenizerProps<T>, …>` and
+ * `ComponentProps<typeof Tokenizer>` keep their released shapes.
  */
 
 // =============================================================================
@@ -392,10 +380,10 @@ function EndLane({
   });
 }
 
-// The public signature names no presentation: `ComponentProps<typeof
-// Tokenizer>` and every public call resolve against `TokenizerProps`. The
-// implementation also reads the presentation options, reached only through
-// `TokenizerWithPresentation` below.
+// Keep this overload first. TypeScript resolves `ComponentProps<typeof
+// Tokenizer>` against the last overload, so that type stays the stable props.
+// A call that passes `experimental` matches this one and may pass the wider
+// `ref`.
 
 export function Tokenizer({
   label,
@@ -512,6 +500,14 @@ export function Tokenizer({
     sheetQueryRef.current = query;
     onChangeQuery?.(query);
   }, [onChangeQuery]);
+  // Save's one report. The sheet announced each edit as it happened, so
+  // nothing is announced here; a field that is disabled at Save reports
+  // nothing.
+  const handleSheetCommit = useCallback((items, change) => {
+    if (!isDisabled) {
+      onChange(items, change);
+    }
+  }, [isDisabled, onChange]);
   // Set around a focus move the field makes itself — a presentation swap
   // handing focus from one control to the other — so the receiving control
   // does not report it as focus entering from outside.
@@ -644,11 +640,15 @@ export function Tokenizer({
   // `endContent`, a clear button, or all three — so its width is measured
   // rather than assumed, and the input reserves it.
   const [laneRef, laneReserve] = useEndLaneReserve(END_LANE_INSET);
+  // A composing component can lock tokens (PowerSearch's read-only filters
+  // and read-only field). No remove path removes a locked token.
+  const isItemRemovable = use(TokenizerItemRemovableContext);
+  const canRemoveItem = useCallback(item => isItemRemovable?.(item) ?? true, [isItemRemovable]);
   // The half of the lane's contents this component knows about. The busy half
   // is the leaf's own business — folding it in here would mean reading the
   // busy state during this render, which is exactly the re-render the store
   // exists to avoid.
-  const hasClearButton = hasClear && value.length > 0 && !isDisabled;
+  const hasClearButton = hasClear && !isDisabled && value.some(canRemoveItem);
   const hasStaticEndLane = Boolean(endContent || hasClearButton);
   const [isFocusedWithin, setIsFocusedWithin] = useState(false);
   const isTruncated = !isFocusedWithin && tokenOverflowBehavior !== 'none' && value.length > 0;
@@ -851,7 +851,7 @@ export function Tokenizer({
   // input and the per-token remove buttons route through here, so the
   // announcement covers both.
   const handleRemove = useCallback((item, options) => {
-    if (isDisabled) {
+    if (isDisabled || !canRemoveItem(item)) {
       return false;
     }
     const newItems = value.filter(v => v.id !== item.id);
@@ -866,20 +866,20 @@ export function Tokenizer({
     }
     inputRef.current?.focus();
     return true;
-  }, [value, onChange, isDisabled, announce, t]);
+  }, [value, onChange, isDisabled, canRemoveItem, announce, t]);
 
-  // Handle clearing all items
   // A composing component that words its own Clear all (PowerSearch) provides
   // its words; otherwise the field's own (component:Tokenizer AR7).
   const clearAllMessage = use(TokenizerClearAllMessageContext) ?? t('@astryx.tokenizer.allRemoved');
   const handleClearAll = useCallback(options => {
-    if (isDisabled || value.length === 0) {
+    const removedItems = value.filter(canRemoveItem);
+    if (isDisabled || removedItems.length === 0) {
       return;
     }
-    // Report the last item as removed (convention)
-    const lastItem = value[value.length - 1];
-    onChange([], {
-      item: lastItem,
+    // onChange names one item. Clear all names the last one it removes.
+    const lastRemovedItem = removedItems[removedItems.length - 1];
+    onChange(value.filter(item => !canRemoveItem(item)), {
+      item: lastRemovedItem,
       type: 'remove'
     });
     // Focus moves to the input, so the emptied selection is announced, in
@@ -888,7 +888,7 @@ export function Tokenizer({
       announce(clearAllMessage);
     }
     inputRef.current?.focus();
-  }, [value, onChange, isDisabled, announce, clearAllMessage]);
+  }, [value, onChange, isDisabled, canRemoveItem, announce, clearAllMessage]);
 
   // Handle backspace on empty input — remove last token
   const handleKeyDown = useCallback(e => {
@@ -931,7 +931,7 @@ export function Tokenizer({
     return /*#__PURE__*/_jsx(Token, {
       label: item.label,
       size: size,
-      onRemove: isDisabled ? undefined : onRemoveItem,
+      onRemove: isDisabled || !canRemoveItem(item) ? undefined : onRemoveItem,
       isDisabled: isDisabled,
       xstyle: styles.token
     }, item.id);
@@ -966,7 +966,7 @@ export function Tokenizer({
       status: status?.type,
       disabled: isDisabled ? 'disabled' : null
     }), stylex.props(inputWrapperStyles.base, styles.wrapper, value.length > 0 && styles.wrapperWithTokens, isTruncated ? truncatedSizeStyles[size] : sizeStyle, isTruncated && styles.truncatedWrapper, isDisabled && inputWrapperStyles.disabled, isDisabled && inputDisabledFocusStyles.nestedRing, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], controlXstyle), controlClassName, controlStyle),
-    children: [startIcon && /*#__PURE__*/_jsx("span", {
+    children: [isRenderable(startIcon) && /*#__PURE__*/_jsx("span", {
       ...{
         0: {},
         1: {
@@ -1151,7 +1151,7 @@ export function Tokenizer({
         // as Selector's bottom-sheet trigger does; the sheet's own rows
         // and search field carry the touch-sized targets.
         sizeStyles[size], value.length > 0 && styles.wrapperWithTokens, isDisabled && inputWrapperStyles.disabled, isDisabled && styles.sheetTriggerDisabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], controlXstyle), controlClassName, controlStyle),
-        children: [startIcon && /*#__PURE__*/_jsx("span", {
+        children: [isRenderable(startIcon) && /*#__PURE__*/_jsx("span", {
           ...{
             0: {},
             1: {
@@ -1196,17 +1196,13 @@ export function Tokenizer({
         label: label,
         searchSource: searchSource,
         value: value,
-        isAtMax: isAtMax,
+        maxEntries: maxEntries,
         hasCreate: hasCreate,
         maxMenuItems: maxMenuItems ?? 10,
         minQueryLength: minQueryLength ?? 1,
         debounceMs: debounceMs ?? 150,
         emptySearchText: emptySearchText,
-        onAdd: handleAdd,
-        onRemove: handleRemove,
-        onClearAll: () => handleClearAll({
-          silent: true
-        }),
+        onCommit: handleSheetCommit,
         onChangeQuery: handleSheetQueryChange
       })]
     });
@@ -1222,7 +1218,7 @@ export function Tokenizer({
           disabled: isDisabled ? 'disabled' : null
         }), stylex.props(inputWrapperStyles.base, styles.wrapper, value.length > 0 && styles.wrapperWithTokens, placeholderSizeStyle, isTruncated && styles.truncatedWrapper, isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], controlXstyle), controlClassName, controlStyle),
         children: isTruncated && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [startIcon && renderIconSlot(startIcon, {
+          children: [isRenderable(startIcon) && renderIconSlot(startIcon, {
             size: 'sm',
             color: 'secondary'
           }), /*#__PURE__*/_jsx(OverflowList, {
@@ -1273,16 +1269,4 @@ export function Tokenizer({
     children: [tokenizerContent, showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
-Tokenizer.displayName = 'Tokenizer';
-
-/**
- * The same component with the sheet presentation reachable: `experimental`
- * (`presentation: 'popover' | 'bottom-sheet' | 'adaptive'`) and a `ref` that
- * also takes the trigger button. Not public — re-exported only by
- * `@astryxdesign/core/internal/tokenizer-presentation`, the entry reserved
- * for Astryx's own packages (`architecture:react-component-runtime` INV13),
- * while the sheet's user experience is being finished (`component:Tokenizer`
- * DEC-3). The public `Tokenizer` renders the popover presentation for every
- * field.
- */
-export const TokenizerWithPresentation = Tokenizer;
+Tokenizer.displayName = 'Tokenizer';

package/dist/Tokenizer/TokenizerBottomSheet.d.ts

@@ -22,13 +22,17 @@
  * - /docs/specs/components/Tokenizer/Tokenizer.spec.md (FR16–FR24, AR6, PR6)
  */
 import { type ReactNode, type RefObject } from 'react';
+import { type SheetDraftChange } from '../internal/sheetDraft.js';
 import type { SearchableItem, SearchSource } from '../Typeahead/types.js';
 /** Rows rendered per batch while a long list scrolls (`component:Tokenizer` FR21). */
 export declare const LIST_RENDER_BATCH_SIZE = 50;
 export interface TokenizerBottomSheetProps<T extends SearchableItem> {
     /** Whether the sheet is open. */
     isOpen: boolean;
-    /** Called with `false` when the sheet dismisses or Done is pressed. */
+    /**
+     * Called with `false` when the sheet closes: Save, a clean dismissal, or a
+     * confirmed discard.
+     */
     onOpenChange: (isOpen: boolean) => void;
     /** The trigger, which takes focus back after the sheet closes. */
     finalFocusRef: RefObject<HTMLElement | null>;
@@ -44,10 +48,10 @@ export interface TokenizerBottomSheetProps<T extends SearchableItem> {
     /** The field label; names the sheet, the search field, and the list. */
     label: string;
     searchSource: SearchSource<T>;
-    /** The committed selection. */
+    /** The committed selection; the draft the sheet edits starts from it. */
     value: T[];
-    /** Whether `maxEntries` is reached. */
-    isAtMax: boolean;
+    /** The selection limit, enforced on the draft. */
+    maxEntries: number | undefined;
     hasCreate: boolean;
     maxMenuItems: number;
     minQueryLength: number;
@@ -55,41 +59,34 @@ export interface TokenizerBottomSheetProps<T extends SearchableItem> {
     /** The no-results message; a string becomes the empty state's title. */
     emptySearchText: ReactNode;
     /**
-     * Tokenizer's add path — duplicate checks and the create sentinel — asked
-     * to stay silent: the sheet announces the change itself, from inside its
-     * dialog, where `useAnnounce` routes it (`spec:AST-086` FR14). Returns
-     * whether the item was added.
+     * Save's one report: the whole draft and the last edit that still holds.
+     * The sheet announces each edit itself when it happens, from inside its
+     * dialog, where `useAnnounce` routes it; nothing is announced on Save.
      */
-    onAdd: (item: T, options: {
-        silent: true;
-    }) => boolean;
-    /** Tokenizer's remove path, silent for the same reason. */
-    onRemove: (item: T, options: {
-        silent: true;
-    }) => boolean;
-    /** Tokenizer's clear-all path. */
-    onClearAll: () => void;
+    onCommit: (items: T[], change: SheetDraftChange<T>) => void;
     onChangeQuery?: (query: string) => void;
 }
 /**
  * The touch surface of Tokenizer's `bottom-sheet` presentation.
  *
- * Rows keep their position while the sheet is open: the items selected when it
- * opened lead, in `value` order, then selected items the results do not carry,
- * then the results. Toggling a row changes its checkbox and nothing else; the
- * next open takes a fresh snapshot and regroups selected-first.
- */
-/**
- * The sheet: BottomSheet around the content. Split in two so the content —
+ * One open sheet edits one draft that starts as `value`; rows, the create row
+ * and Clear all change the draft, and Save reports it once. Rows keep their
+ * position while the sheet is open: the items selected when it opened lead,
+ * in `value` order, then draft-selected items the results do not carry, then
+ * the results; the next open takes a fresh snapshot and regroups
+ * selected-first.
+ *
+ * The sheet is BottomSheet around the content, split in two so the content —
  * search, rows, footer, and every announcement about them — is rendered
  * inside the sheet's dialog, where `useAnnounce` routes into it while it is
- * open (`spec:AST-086` FR14): a component that renders a modal and announces
- * about its content is inside that modal only when the announcing code is.
+ * open: a component that renders a modal and announces about its content is
+ * inside that modal only when the announcing code is.
  *
  * The outer part also tells the content how a close came about: a close the
- * person made (Done, swipe, scrim, Escape) clears the query so the next open
+ * person made (Save, swipe, scrim, Escape) clears the query so the next open
  * lists the bootstrap set, while a close the field forced (becoming disabled
- * while open) keeps it (`component:Tokenizer` FR18).
+ * while open) keeps it. A swipe, scrim or Escape close of a changed draft is
+ * routed to the content first, which asks before discarding.
  */
 export declare function TokenizerBottomSheet<T extends SearchableItem>({ isOpen, onOpenChange, finalFocusRef, label, ...content }: TokenizerBottomSheetProps<T>): import("react").JSX.Element;
 export declare namespace TokenizerBottomSheet {

package/dist/Tokenizer/TokenizerBottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenizerBottomSheet.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/TokenizerBottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAiBf,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAgBrE,sFAAsF;AACtF,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAyHzC,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,cAAc;IACjE,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,kEAAkE;IAClE,aAAa,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C;;;;;;;OAOG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,+BAA+B;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,eAAe,EAAE,SAAS,CAAC;IAC3B;;;;;OAKG;IACH,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE;QAAC,MAAM,EAAE,IAAI,CAAA;KAAC,KAAK,OAAO,CAAC;IACrD,2DAA2D;IAC3D,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE;QAAC,MAAM,EAAE,IAAI,CAAA;KAAC,KAAK,OAAO,CAAC;IACxD,kCAAkC;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED;;;;;;;GAOG;AACH;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,cAAc,EAAE,EAC7D,MAAM,EACN,YAAY,EACZ,aAAa,EACb,KAAK,EACL,GAAG,OAAO,EACX,EAAE,yBAAyB,CAAC,CAAC,CAAC,+BAgC9B;yBAtCe,oBAAoB"}
+{"version":3,"file":"TokenizerBottomSheet.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/TokenizerBottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAgBf,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAqBrE,sFAAsF;AACtF,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAyHzC,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,cAAc;IACjE,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,kEAAkE;IAClE,aAAa,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C;;;;;;;OAOG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,yEAAyE;IACzE,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,kDAAkD;IAClD,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,eAAe,EAAE,SAAS,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,cAAc,EAAE,EAC7D,MAAM,EACN,YAAY,EACZ,aAAa,EACb,KAAK,EACL,GAAG,OAAO,EACX,EAAE,yBAAyB,CAAC,CAAC,CAAC,+BAqC9B;yBA3Ce,oBAAoB"}