@astryxdesign/core 0.7.7-canary.f9ac85f → 0.7.7

package/src/PowerSearch/PowerSearch.tsx

@@ -34,6 +34,7 @@ import {TokenizerClearAllMessageContext} from '../Tokenizer/TokenizerClearAllMes
 import {TokenizerItemRemovableContext} from '../Tokenizer/TokenizerItemRemovableContext';
 import {TypeaheadItem} from '../Typeahead/TypeaheadItem';
 import {Token} from '../Token';
+import {TokenNamingContext} from '../Token/TokenNamingContext';
 import {Avatar} from '../Avatar';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import {Icon} from '../Icon';
@@ -62,6 +63,7 @@ import {themeProps} from '../utils/themeProps';
 import {truncateCharacters} from '../utils/characters';
 import {useLocale} from '../i18n/useLocale';
 import type {Locale} from '../i18n/types';
+import type {SearchableItem} from '../Typeahead/types';
 import type {
   PowerSearchConfig,
   PowerSearchFilter,
@@ -74,6 +76,7 @@ import type {
   OperatorValue,
   EnumItem,
   PowerSearchComponents,
+  PowerSearchOperator,
 } from './types';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
@@ -157,52 +160,35 @@ function getEnumLabel(values: ReadonlyArray<EnumItem>, value: string): string {
   return values.find(v => v.value === value)?.label ?? value;
 }
 
-function PowerSearchTokenValue({
-  operatorValue,
-  filterValue,
-  maxLength,
-  locale,
-}: {
-  operatorValue: OperatorValue;
-  filterValue: FilterValue;
-  maxLength: number;
-  locale: Locale;
-}) {
+/**
+ * The visible text of a filter token's value. The token renders it, and the
+ * token's remove button and editor dialog are named by the same text.
+ */
+function tokenValueText(
+  operatorValue: OperatorValue,
+  filterValue: FilterValue,
+  maxLength: number,
+  locale: Locale,
+): string | null {
   switch (filterValue.type) {
     case 'empty':
       return null;
 
     case 'string':
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {truncateString(filterValue.value, maxLength)}
-        </span>
-      );
+      return truncateString(filterValue.value, maxLength);
 
     case 'integer':
     case 'float':
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {filterValue.value}
-        </span>
-      );
+      return String(filterValue.value);
 
     case 'enum':
       if (operatorValue.type === 'enum') {
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {truncateString(
-              getEnumLabel(operatorValue.values, filterValue.value),
-              maxLength,
-            )}
-          </span>
+        return truncateString(
+          getEnumLabel(operatorValue.values, filterValue.value),
+          maxLength,
         );
       }
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {truncateString(filterValue.value, maxLength)}
-        </span>
-      );
+      return truncateString(filterValue.value, maxLength);
 
     case 'string_list': {
       const items = filterValue.value;
@@ -210,25 +196,13 @@ function PowerSearchTokenValue({
         return null;
       }
       if (items.length === 1) {
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {truncateString(items[0], maxLength)}
-          </span>
-        );
+        return truncateString(items[0], maxLength);
       }
       const totalLength = items.reduce((sum, s) => sum + s.length, 0);
       if (totalLength > maxLength) {
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {items.length} items
-          </span>
-        );
+        return `${items.length} items`;
       }
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {items.join(', ')}
-        </span>
-      );
+      return items.join(', ');
     }
 
     case 'enum_list': {
@@ -239,38 +213,18 @@ function PowerSearchTokenValue({
       if (operatorValue.type === 'enum_list') {
         const labels = items.map(v => getEnumLabel(operatorValue.values, v));
         if (labels.length === 1) {
-          return (
-            <span {...stylex.props(tokenValueStyles.value)}>
-              {truncateString(labels[0], maxLength)}
-            </span>
-          );
+          return truncateString(labels[0], maxLength);
         }
         const totalLength = labels.reduce((sum, s) => sum + s.length, 0);
         if (totalLength > maxLength) {
-          return (
-            <span {...stylex.props(tokenValueStyles.value)}>
-              {labels.length} items
-            </span>
-          );
+          return `${labels.length} items`;
         }
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {labels.join(', ')}
-          </span>
-        );
+        return labels.join(', ');
       }
       if (items.length === 1) {
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {truncateString(items[0], maxLength)}
-          </span>
-        );
+        return truncateString(items[0], maxLength);
       }
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {items.length} items
-        </span>
-      );
+      return `${items.length} items`;
     }
 
     case 'entity_list': {
@@ -279,80 +233,42 @@ function PowerSearchTokenValue({
         return null;
       }
       if (entities.length === 1) {
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {truncateString(entities[0].label, maxLength)}
-          </span>
-        );
+        return truncateString(entities[0].label, maxLength);
       }
       const totalLength = entities.reduce((sum, e) => sum + e.label.length, 0);
       if (totalLength > maxLength) {
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {entities.length} items
-          </span>
-        );
+        return `${entities.length} items`;
       }
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {entities.map(e => e.label).join(', ')}
-        </span>
-      );
+      return entities.map(e => e.label).join(', ');
     }
 
     case 'time':
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {filterValue.value}
-        </span>
-      );
+      return filterValue.value;
 
-    case 'date_absolute': {
-      const formatted = formatDateAbsoluteCompact(
-        filterValue.unixSeconds,
-        locale,
+    case 'date_absolute':
+      return truncateString(
+        formatDateAbsoluteCompact(filterValue.unixSeconds, locale),
+        maxLength,
       );
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {truncateString(formatted, maxLength)}
-        </span>
-      );
-    }
 
     case 'date_relative':
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {truncateString(filterValue.value, maxLength)}
-        </span>
-      );
+      return truncateString(filterValue.value, maxLength);
 
     case 'date_range':
-      return <span {...stylex.props(tokenValueStyles.value)}>date range</span>;
+      return 'date range';
 
     case 'custom':
       if (operatorValue.type === 'custom') {
-        return (
-          <span {...stylex.props(tokenValueStyles.value)}>
-            {truncateString(
-              operatorValue.getString(filterValue.value),
-              maxLength,
-            )}
-          </span>
+        return truncateString(
+          operatorValue.getString(filterValue.value),
+          maxLength,
         );
       }
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {filterValue.value}
-        </span>
-      );
+      return filterValue.value;
 
     case 'nested': {
       const count = filterValue.value.length;
-      return (
-        <span {...stylex.props(tokenValueStyles.value)}>
-          {count === 1 ? '1 filter' : `${count} filters`}
-        </span>
-      );
+      return count === 1 ? '1 filter' : `${count} filters`;
     }
 
     default:
@@ -360,6 +276,10 @@ function PowerSearchTokenValue({
   }
 }
 
+function PowerSearchTokenValue({text}: {text: string}) {
+  return <span {...stylex.props(tokenValueStyles.value)}>{text}</span>;
+}
+
 // =============================================================================
 // Types
 // =============================================================================
@@ -490,6 +410,20 @@ type PopoverState =
 // Component
 // =============================================================================
 
+/**
+ * Whether a press on a token with this operator commits the filter instead of
+ * opening its editor: an `empty` operator with no `empty` Editor override.
+ */
+function commitsWithoutEditor(
+  operator: PowerSearchOperator | undefined,
+  componentOverrides: PowerSearchComponents | undefined,
+): boolean {
+  return (
+    operator?.value.type === 'empty' &&
+    componentOverrides?.empty?.Editor == null
+  );
+}
+
 /**
  * Structured filter bar where each token represents a filter (field + operator + value).
  *
@@ -607,6 +541,47 @@ export function PowerSearch({
     type: 'idle',
   });
 
+  // A default filter token's visible text: its label (field and operator)
+  // and its value. The token's remove button and editor dialog are named by
+  // the same text.
+  const tokenText = useCallback(
+    (filter: PowerSearchFilter) => {
+      const field = config.getField(filter.field);
+      const operator = config.getOperator(filter.field, filter.operator);
+      const fieldLabel = field?.label ?? '';
+      const operatorLabel = operator ? resolveOperatorLabel(operator, t) : '';
+      const label = `${fieldLabel}: ${operatorLabel}`.trim();
+      const value = operator
+        ? tokenValueText(
+            operator.value,
+            filter.value,
+            Math.max(
+              maxTokenLength - fieldLabel.length - operatorLabel.length,
+              10,
+            ),
+            locale,
+          )
+        : null;
+      return {label, value, full: value != null ? `${label} ${value}` : label};
+    },
+    [config, maxTokenLength, t, locale],
+  );
+  // The built-in token being edited. A token from a `components` override
+  // names itself, so its editor keeps the plain popover.
+  const editedFilter =
+    popoverState.type === 'editing'
+      ? filters[popoverState.filterIndex]
+      : undefined;
+  const editedOperator =
+    editedFilter != null
+      ? config.getOperator(editedFilter.field, editedFilter.operator)
+      : undefined;
+  const editedBuiltInFilter =
+    editedOperator == null ||
+    componentOverrides?.[editedOperator.value.type]?.Token == null
+      ? editedFilter
+      : undefined;
+
   // Layer for positioning the edit popover anchored to the tokenizer
   const handleLayerHide = useCallback(() => {
     setPopoverStateRaw({type: 'idle'});
@@ -617,9 +592,16 @@ export function PowerSearch({
     hasLightDismiss: true,
     hasCloseButton: false,
     hasAutoFocus: false,
-    // The popup's own listbox/menu content is the exposed semantics; focus
-    // stays on the tokenizer input, so a modal dialog wrapper is incorrect.
-    role: 'none',
+    // Adding: the popup's own listbox/menu content is the exposed semantics,
+    // and focus stays on the tokenizer input, so a dialog wrapper is
+    // incorrect. Editing a token: focus moves into the editor's controls, so
+    // the editor is a non-modal dialog named by the token's visible text.
+    role: editedBuiltInFilter != null ? 'dialog' : 'none',
+    isModal: false,
+    dialogLabel:
+      editedBuiltInFilter != null
+        ? tokenText(editedBuiltInFilter).full
+        : undefined,
   });
 
   // Wrapper that manages layer visibility and tokenizer focus alongside state
@@ -739,22 +721,38 @@ export function PowerSearch({
             value: undefined,
           },
         });
-      } else if (change.type === 'remove' && change.item) {
-        const auxData = change.item.auxiliaryData as PowerSearchAuxData;
-        if (auxData?.filterIndex != null) {
-          const newFilters = filters.filter((_, i) =>
-            _items.some(item => item.auxiliaryData?.filterIndex === i),
+      } else if (change.type === 'remove') {
+        const keptIndices = new Set(
+          _items.map(item => item.auxiliaryData?.filterIndex),
+        );
+        const firstRemovedIndex = filters.findIndex(
+          (_, i) => !keptIndices.has(i),
+        );
+        if (firstRemovedIndex >= 0) {
+          onChange(
+            filters.filter((_, i) => keptIndices.has(i)),
+            'remove',
+            firstRemovedIndex,
           );
-          onChange(newFilters, 'remove', auxData.filterIndex);
         }
       }
     },
     [config, filters, onChange, setPopoverState],
   );
 
-  // Tokenizer's Backspace does not go through renderToken. This predicate
-  // locks every token of a read-only field.
-  const isItemRemovable = useCallback(() => !isReadOnly, [isReadOnly]);
+  // Tokenizer's Backspace and Clear all do not go through renderToken. This
+  // predicate locks each read-only filter, and every token of a read-only
+  // field.
+  const isItemRemovable = useCallback(
+    (item: SearchableItem) => {
+      if (isReadOnly) {
+        return false;
+      }
+      const filterIndex = (item as PowerSearchItem).auxiliaryData?.filterIndex;
+      return filterIndex == null || !filters[filterIndex]?.isReadOnly;
+    },
+    [filters, isReadOnly],
+  );
 
   // Handle clicking a token to edit
   const handleTokenClick = useCallback(
@@ -772,10 +770,7 @@ export function PowerSearch({
       // edit: commit it as that editor's save would, the way adding one does,
       // instead of opening it. A consumer's `empty` Editor override still opens.
       const operator = config.getOperator(filter.field, filter.operator);
-      if (
-        operator?.value.type === 'empty' &&
-        componentOverrides?.empty?.Editor == null
-      ) {
+      if (commitsWithoutEditor(operator, componentOverrides)) {
         const newFilters = [...filters];
         newFilters[index] = {
           field: filter.field,
@@ -880,20 +875,16 @@ export function PowerSearch({
       // Default token rendering
       const fieldLabel = field?.label ?? '';
       const operatorLabel = operator ? resolveOperatorLabel(operator, t) : '';
-      const tokenLabel = `${fieldLabel}: ${operatorLabel}`.trim();
-      const adjustedMaxLength = Math.max(
-        maxTokenLength - fieldLabel.length - operatorLabel.length,
-        10,
-      );
-
+      const text =
+        filter != null
+          ? tokenText(filter)
+          : {label: `${fieldLabel}: ${operatorLabel}`.trim(), value: null};
+      const tokenLabel = text.label;
+      const fullText =
+        text.value != null ? `${text.label} ${text.value}` : text.label;
       const valueContent =
-        operator && filter ? (
-          <PowerSearchTokenValue
-            operatorValue={operator.value}
-            filterValue={filter.value}
-            maxLength={adjustedMaxLength}
-            locale={locale}
-          />
+        text.value != null ? (
+          <PowerSearchTokenValue text={text.value} />
         ) : undefined;
 
       // Show entity photo as token icon for single-entity filters
@@ -907,32 +898,49 @@ export function PowerSearch({
         tokenIcon = <Avatar src={entity.photo} name={entity.label} size={16} />;
       }
 
+      // A token that opens its editor says that it opens a dialog, and the
+      // naming context names it by all its visible text.
+      const editorProps =
+        handleClick != null &&
+        !commitsWithoutEditor(operator, componentOverrides)
+          ? {
+              'aria-haspopup': 'dialog' as const,
+              'aria-expanded':
+                popoverState.type === 'editing' &&
+                popoverState.filterIndex === filterIndex,
+            }
+          : null;
+
       return (
-        <Token
-          label={tokenLabel}
-          size={size}
-          icon={tokenIcon}
-          endContent={valueContent}
-          onMouseDown={
-            handleClick
-              ? e => {
-                  // Keep a token press from entering Tokenizer's input-focus
-                  // redirect. Click still edits/removes; Tab entry is unchanged.
-                  e.preventDefault();
-                }
-              : undefined
-          }
-          onClick={
-            handleClick
-              ? (e: React.MouseEvent) => {
-                  e.stopPropagation();
-                  handleClick();
-                }
-              : undefined
-          }
-          onRemove={handleRemove}
-          isDisabled={isDisabled}
-        />
+        <TokenNamingContext
+          value={{actionName: fullText, removeName: fullText}}>
+          <Token
+            label={tokenLabel}
+            size={size}
+            icon={tokenIcon}
+            {...editorProps}
+            endContent={valueContent}
+            onMouseDown={
+              handleClick
+                ? e => {
+                    // Keep a token press from entering Tokenizer's input-focus
+                    // redirect. Click still edits/removes; Tab entry is unchanged.
+                    e.preventDefault();
+                  }
+                : undefined
+            }
+            onClick={
+              handleClick
+                ? (e: React.MouseEvent) => {
+                    e.stopPropagation();
+                    handleClick();
+                  }
+                : undefined
+            }
+            onRemove={handleRemove}
+            isDisabled={isDisabled}
+          />
+        </TokenNamingContext>
       );
     },
     [
@@ -940,13 +948,14 @@ export function PowerSearch({
       config,
       configProp,
       maxTokenLength,
-      locale,
       size,
       isReadOnly,
       isDisabled,
       handleTokenClick,
       componentOverrides,
       t,
+      popoverState,
+      tokenText,
     ],
   );
 
@@ -1077,9 +1086,13 @@ export function PowerSearch({
   const announce = useAnnounce();
   // PowerSearch words its Clear all as its record does; the field announces
   // these words instead of Tokenizer's (component:Tokenizer AR7).
+  const hasReadOnlyFilter = filters.some(filter => filter.isReadOnly);
   const clearAllMessage = useMemo(
-    () => t('@astryx.powersearch.allFiltersRemoved'),
-    [t],
+    () =>
+      hasReadOnlyFilter
+        ? t('@astryx.powersearch.editableFiltersRemoved')
+        : t('@astryx.powersearch.allFiltersRemoved'),
+    [hasReadOnlyFilter, t],
   );
   const announcedResultCountRef = useRef(resultCountText);
   useEffect(() => {

package/src/RadioList/RadioList.doc.mjs

@@ -148,12 +148,14 @@ export const docs = {
     {
       name: 'containerClassName',
       type: 'string',
-      description: 'Class name for the field container. Same targeting as `containerXstyle`.',
+      description:
+        'Class name for the field container. Same targeting as `containerXstyle`.',
     },
     {
       name: 'containerStyle',
       type: 'CSSProperties',
-      description: 'Inline styles for the field container. Same targeting as `containerXstyle`.',
+      description:
+        'Inline styles for the field container. Same targeting as `containerXstyle`.',
     },
     {
       name: 'controlXstyle',

package/src/RadioList/RadioList.tsx

@@ -403,6 +403,10 @@ export function RadioList({
           disabledMessageTooltip.ref(el);
         }}
         role="radiogroup"
+        // Screen readers announce the whole group as unavailable. Its dimmed
+        // label then labels a disabled control. An enabled list keeps a
+        // caller's own value.
+        aria-disabled={isDisabled || rest['aria-disabled']}
         // A caller aria-labelledby names the group together with its label.
         aria-labelledby={joinAriaIDs(labelID, ariaLabelledByProp)}
         onFocus={composeEventHandlers(handleFocus, onFocus)}