@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

package/src/MultiSelector/MultiSelector.doc.mjs

@@ -214,9 +214,9 @@ export const docs = {
         },
         {
           name: 'variant',
-          type: "'input' | 'ghost'",
+          type: "'input' | 'secondary' | 'ghost'",
           description:
-            'Visual trigger style. input is the bordered input treatment for forms; ghost is borderless and matches ghost buttons for toolbar usage.',
+            'Visual trigger style. input is the bordered input treatment for forms; secondary matches the secondary buttons of the active theme (borderless and neutral-filled by default) for navs and toolbars; ghost is borderless and transparent, matching ghost buttons for toolbar usage.',
           default: "'input'",
         },
         {
@@ -340,9 +340,9 @@ export const docs = {
           name: 'statusVariant',
           type: "'attached' | 'detached' | 'tooltip'",
           description:
-            'How the status message is placed relative to the input. attached overlaps directly below the bordered input and is only valid for the input variant; ghost selectors detach attached status messages by default. Use tooltip for compact toolbar controls.',
+            'How the status message is placed relative to the input. attached overlaps directly below the bordered input and is only valid for the input variant; secondary and ghost selectors detach attached status messages by default. Use tooltip for compact toolbar controls.',
           default:
-            "'attached' for input selectors; 'detached' for ghost selectors",
+            "'attached' for input selectors; 'detached' for secondary and ghost selectors",
         },
         {
           name: 'renderOption',
@@ -493,7 +493,7 @@ export const docs = {
       {
         guidance: true,
         description:
-          'Use variant="ghost" when a multi-selector sits in a toolbar with ghost buttons. If validation status is needed there, prefer statusVariant="tooltip" so the toolbar height stays compact.',
+          'Use variant="secondary" when a multi-selector sits beside secondary buttons or segmented controls, and variant="ghost" when it sits beside ghost buttons. If validation status is needed there, prefer statusVariant="tooltip" so the toolbar height stays compact.',
       },
       {
         guidance: true,
@@ -661,7 +661,7 @@ export const docsDense = {
       {
         guidance: true,
         description:
-          'Use variant="ghost" in toolbars with ghost buttons; prefer statusVariant="tooltip" for compact validation status.',
+          'Use variant="secondary" beside secondary buttons or segmented controls and variant="ghost" beside ghost buttons; prefer statusVariant="tooltip" for compact validation status.',
       },
       {
         guidance: false,
@@ -693,7 +693,7 @@ export const docsDense = {
         placeholder: 'text when nothing selected',
         size: 'size variant',
         variant:
-          'visual trigger style: input bordered control or ghost toolbar control',
+          'visual trigger style: input bordered control, secondary control matching the theme secondary buttons, or ghost transparent control',
         triggerDisplay: 'how to show selected in trigger',
         formatValue:
           'formats count/labels trigger text; receives selected items',
@@ -719,7 +719,7 @@ export const docsDense = {
         isLoading: 'spinner in trigger',
         status: 'validation status w/ optional message',
         statusVariant:
-          'status message placement; ghost detaches attached by default; use tooltip for compact toolbars.',
+          'status message placement; secondary and ghost detach attached by default; use tooltip for compact toolbars.',
         renderOption:
           'custom render fn per selectable option; not dividers/sections/select-all',
         renderTrigger:

package/src/MultiSelector/MultiSelector.spec.md

@@ -31,7 +31,7 @@ architecture:
     architecture:public-component-api,
   ]
 contributing: []
-system_specs: [spec:AST-011/DEC-1]
+system_specs: [spec:AST-011/DEC-1, spec:AST-079/DEC-1]
 ---
 
 # MultiSelector component contract

package/src/MultiSelector/MultiSelector.test.tsx

@@ -25,7 +25,7 @@ import {
   type MultiSelectorHandle,
   type MultiSelectorChange,
 } from './MultiSelector';
-import {useRef} from 'react';
+import {useRef, useState} from 'react';
 import {Icon} from '../Icon';
 import {InternationalizationProvider} from '../i18n';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
@@ -33,6 +33,8 @@ import {__resetInteractionModalityForTest} from '../utils/interactionModality';
 import {defineTheme} from '../theme/defineTheme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
 import {selectorPresentationStyles} from '../Selector/selectorPresentation.stylex';
+import {groupStyles} from '../InputGroup/groupStyles';
+import {InputGroup, InputGroupText} from '../InputGroup';
 
 function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   const {prose, component} = generateThemeCSS(theme);
@@ -219,6 +221,54 @@ describe('MultiSelector', () => {
     expect(screen.getByLabelText('Fruit')).toBeInTheDocument();
   });
 
+  it('applies distinct trigger chrome to the secondary variant', () => {
+    // data-testid reaches the native control; the variant is on the trigger root.
+    const triggerRoot = () =>
+      screen
+        .getByTestId('selector')
+        .closest('.astryx-multi-selector') as HTMLElement;
+    const {rerender} = render(
+      <MultiSelector
+        label="Fruit"
+        options={defaultOptions}
+        value={[]}
+        onChange={() => {}}
+        variant="input"
+        data-testid="selector"
+      />,
+    );
+    const inputClasses = triggerRoot().className;
+
+    rerender(
+      <MultiSelector
+        label="Fruit"
+        options={defaultOptions}
+        value={[]}
+        onChange={() => {}}
+        variant="secondary"
+        data-testid="selector"
+      />,
+    );
+    const secondary = triggerRoot();
+    const secondaryClasses = secondary.className;
+    expect(secondary).toHaveAttribute('data-variant', 'secondary');
+
+    rerender(
+      <MultiSelector
+        label="Fruit"
+        options={defaultOptions}
+        value={[]}
+        onChange={() => {}}
+        variant="ghost"
+        data-testid="selector"
+      />,
+    );
+    const ghostClasses = triggerRoot().className;
+
+    expect(secondaryClasses).not.toBe(inputClasses);
+    expect(secondaryClasses).not.toBe(ghostClasses);
+  });
+
   it('renders custom option content with renderOption', async () => {
     const user = userEvent.setup();
     render(
@@ -1595,6 +1645,55 @@ describe('MultiSelector', () => {
       expect(clear).not.toHaveAttribute('tabIndex', '-1');
     });
 
+    it('returns focus to the trigger when the clear button is activated by keyboard', async () => {
+      function Controlled() {
+        const [value, setValue] = useState(['Apple', 'Banana']);
+        return (
+          <MultiSelector
+            label="Fruit"
+            options={defaultOptions}
+            value={value}
+            onChange={setValue}
+            hasClear
+          />
+        );
+      }
+      const user = userEvent.setup();
+      render(<Controlled />);
+      screen.getByRole('button', {name: 'Clear all Fruit'}).focus();
+      await user.keyboard('{Enter}');
+      expect(
+        screen.queryByRole('button', {name: 'Clear all Fruit'}),
+      ).not.toBeInTheDocument();
+      expect(screen.getByRole('combobox')).toHaveFocus();
+    });
+
+    it('leaves focus in the search input when the clear button is clicked with the list open', async () => {
+      function Controlled() {
+        const [value, setValue] = useState(['Apple', 'Banana']);
+        return (
+          <MultiSelector
+            label="Fruit"
+            options={defaultOptions}
+            value={value}
+            onChange={setValue}
+            hasClear
+            hasSearch
+          />
+        );
+      }
+      const user = userEvent.setup();
+      const {container} = render(<Controlled />);
+      await user.click(container.querySelector('[aria-haspopup]') as Element);
+      const search = screen.getByRole('combobox', h);
+      search.focus();
+      await user.click(screen.getByRole('button', {name: 'Clear all Fruit'}));
+      expect(
+        screen.queryByRole('button', {name: 'Clear all Fruit'}),
+      ).not.toBeInTheDocument();
+      expect(search).toHaveFocus();
+    });
+
     it('scrolls the highlighted option into view during arrow navigation', async () => {
       const scrollIntoView = vi.fn();
       Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
@@ -2396,26 +2495,29 @@ describe('MultiSelector statusVariant forwarding', () => {
     ).not.toBeNull();
   });
 
-  it('detaches attached status by default for the ghost variant', () => {
-    const {container} = render(
-      <MultiSelector
-        label="Fruit"
-        options={['Apple', 'Banana']}
-        value={[]}
-        onChange={() => {}}
-        variant="ghost"
-        status={{type: 'error', message: 'Required'}}
-      />,
-    );
-    expect(container.querySelector('.astryx-multi-selector')).toHaveAttribute(
-      'data-variant',
-      'ghost',
-    );
-    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
-      'data-variant',
-      'detached',
-    );
-  });
+  it.each(['secondary', 'ghost'] as const)(
+    'detaches attached status by default for the %s variant',
+    variant => {
+      const {container} = render(
+        <MultiSelector
+          label="Fruit"
+          options={['Apple', 'Banana']}
+          value={[]}
+          onChange={() => {}}
+          variant={variant}
+          status={{type: 'error', message: 'Required'}}
+        />,
+      );
+      expect(container.querySelector('.astryx-multi-selector')).toHaveAttribute(
+        'data-variant',
+        variant,
+      );
+      expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+        'data-variant',
+        'detached',
+      );
+    },
+  );
 
   it('uses a status tooltip for ghost multi-selectors when requested', () => {
     const {container} = render(
@@ -4206,3 +4308,68 @@ describe('MultiSelector create row inside a grid', () => {
     });
   });
 });
+
+describe('MultiSelector in an InputGroup', () => {
+  const groupClasses = () =>
+    stylex.props(groupStyles.inGroup).className!.split(' ');
+  const triggerBox = (name: RegExp) =>
+    screen
+      .getByRole('combobox', {name})
+      .closest('.astryx-multi-selector') as HTMLElement;
+
+  it.each(['input', 'secondary'] as const)(
+    'gives a grouped %s trigger the connected group geometry in every position',
+    variant => {
+      const selector = (label: string) => (
+        <MultiSelector
+          label={label}
+          isLabelHidden
+          variant={variant}
+          options={['Apple', 'Banana', 'Cherry']}
+          value={EMPTY_VALUE}
+          onChange={() => {}}
+        />
+      );
+      render(
+        <>
+          <InputGroup label="First">
+            {selector('Fruit first')}
+            <InputGroupText>kg</InputGroupText>
+          </InputGroup>
+          <InputGroup label="Middle">
+            <InputGroupText>#</InputGroupText>
+            {selector('Fruit middle')}
+            <InputGroupText>kg</InputGroupText>
+          </InputGroup>
+          <InputGroup label="Last">
+            <InputGroupText>#</InputGroupText>
+            {selector('Fruit last')}
+          </InputGroup>
+        </>,
+      );
+
+      // Row height, seam radii, and focus stacking come from these classes;
+      // a secondary trigger keeps its fill but not its standalone edges.
+      for (const position of ['first', 'middle', 'last']) {
+        const classes = new Set(
+          triggerBox(new RegExp(`Fruit ${position}`)).className.split(' '),
+        );
+        expect(groupClasses().every(c => classes.has(c))).toBe(true);
+      }
+    },
+  );
+
+  it('keeps a standalone secondary trigger out of the group geometry', () => {
+    render(
+      <MultiSelector
+        label="Fruit"
+        variant="secondary"
+        options={['Apple', 'Banana', 'Cherry']}
+        value={EMPTY_VALUE}
+        onChange={() => {}}
+      />,
+    );
+    const classes = new Set(triggerBox(/Fruit/).className.split(' '));
+    expect(groupClasses().some(c => classes.has(c))).toBe(false);
+  });
+});

package/src/MultiSelector/MultiSelector.tsx

@@ -5,13 +5,14 @@
 /**
  * @file MultiSelector.tsx
  * @input Uses React, StyleX, usePopover, useTooltip, CheckboxInput, Field, Badge, Icon, InputGroupContext
- * @output Exports MultiSelector component
+ * @output Exports MultiSelector with input, secondary, and ghost trigger variants
  * @position Core implementation; consumed by index.ts
  *
  * SYNC: When modified, update:
  * - /packages/core/src/MultiSelector/MultiSelector.doc.mjs
  * - /packages/core/src/MultiSelector/MultiSelector.test.tsx
  * - /packages/core/src/MultiSelector/index.ts
+ * - /apps/storybook/stories/MultiSelector.stories.tsx
  * - /apps/storybook/stories/InputGroup.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/MultiSelector/ (showcase blocks)
  */
@@ -241,6 +242,31 @@ const styles = stylex.create({
       '[data-astryx-press="on"]': 'scale(0.98)',
     },
   },
+  // Keep the input-family width contract while reusing ghost's borderless paint
+  // and the neutral resting fill used by secondary buttons.
+  triggerSecondary: {
+    borderWidth: 0,
+    backgroundColor: colorVars['--color-neutral'],
+    boxShadow: {
+      default: 'none',
+      ':hover:not(:focus-within):where(:not(:disabled,[aria-disabled="true"]))':
+        {
+          '@media (hover: hover)': 'none',
+        },
+      ':focus-within': 'none',
+    },
+    fontWeight: fontWeightVars['--font-weight-medium'],
+    transitionProperty:
+      'background-image, background-color, color, opacity, transform',
+    transform: {
+      default: 'scale(1)',
+      ':active': {
+        default: 'scale(0.98)',
+        '@media (pointer: coarse)': 'scale(1)',
+      },
+      '[data-astryx-press="on"]': 'scale(0.98)',
+    },
+  },
   triggerGhostDisabled: {
     backgroundImage: 'none',
     transform: {
@@ -494,7 +520,7 @@ const STATUS_BUTTON_LABEL_KEY: Record<MultiSelectorStatusType, string> = {
 
 export type MultiSelectorSize = 'sm' | 'md' | 'lg';
 
-export type MultiSelectorVariant = 'input' | 'ghost';
+export type MultiSelectorVariant = 'input' | 'secondary' | 'ghost';
 
 export type MultiSelectorPresentation = AdaptivePresentation;
 
@@ -736,7 +762,9 @@ export interface MultiSelectorProps<
   /**
    * Visual style of the selector trigger.
    * - 'input': bordered input-style trigger for forms
-   * - 'ghost': borderless trigger matching ghost buttons, for toolbars
+   * - 'secondary': matches the theme's secondary buttons (borderless and
+   *   neutral-filled by default)
+   * - 'ghost': borderless, transparent trigger matching ghost buttons
    * @default 'input'
    */
   variant?: MultiSelectorVariant;
@@ -750,7 +778,7 @@ export interface MultiSelectorProps<
    * - 'attached': message overlaps directly below the bordered input (input variant only)
    * - 'detached': message floats below as a separate element with spacing
    * - 'tooltip': message is exposed from the on-field status icon
-   * @default 'attached' for input selectors; 'detached' for ghost selectors
+   * @default 'attached' for input selectors; 'detached' for secondary and ghost selectors
    */
   statusVariant?: FieldStatusVariant;
 
@@ -1114,7 +1142,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     emptySearchTextFromProps ?? t('@astryx.multiSelector.emptySearchResults');
   const size = useSize(sizeProp, 'md');
   const effectiveStatusVariant =
-    variant === 'ghost' && statusVariant === 'attached'
+    variant !== 'input' && statusVariant === 'attached'
       ? 'detached'
       : statusVariant;
   const isEffectivelyReadOnly = isReadOnly && !isDisabled;
@@ -1569,6 +1597,14 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     (e: React.MouseEvent) => {
       e.stopPropagation(); // Don't open dropdown
       clearValues();
+      // A keyboard activation (detail 0) leaves focus on the clear button,
+      // which unmounts once the value is empty and would drop focus to <body>;
+      // hand it to the trigger. A pointer press never focuses the button, so
+      // there is no focus to repair, and moving it would pull focus out of an
+      // open list's search input.
+      if (e.detail === 0) {
+        triggerRef.current?.focus();
+      }
     },
     [clearValues],
   );
@@ -2465,25 +2501,28 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
             inputWrapperStyles.base,
             styles.triggerContainer,
             sizeStyles[size],
+            variant === 'secondary' && styles.triggerSecondary,
             variant === 'ghost' && styles.triggerGhost,
-            variant === 'ghost' && interactionOverlayStyles.backgroundImage,
-            variant === 'ghost' && focusOutlineStyles.focusWithin,
+            variant !== 'input' && interactionOverlayStyles.backgroundImage,
+            variant !== 'input' && focusOutlineStyles.focusWithin,
             surface.isTriggerFocusRingSuppressed &&
               selectorPresentationStyles.pointerRestoredFocus,
             isDisabled && inputWrapperStyles.disabled,
             isEffectivelyReadOnly && styles.triggerReadOnly,
-            variant === 'ghost' && isDisabled && styles.triggerGhostDisabled,
-            variant === 'ghost' &&
+            variant !== 'input' && isDisabled && styles.triggerGhostDisabled,
+            variant !== 'input' &&
               isEffectivelyReadOnly &&
               styles.triggerGhostReadOnly,
             optimisticValue.length === 0 && styles.triggerPlaceholder,
-            variant !== 'ghost' &&
+            variant === 'input' &&
               status &&
               inputStatusBorderStyles[status.type],
-            variant !== 'ghost' &&
+            variant === 'input' &&
               status &&
               !isDisabled &&
               inputStatusHoverShadowStyles[status.type],
+            // Grouped secondary triggers keep their neutral fill but take the
+            // group's row height, connected edge radii, and focus stacking.
             variant !== 'ghost' && inputGroup && groupStyles.inGroup,
             controlXstyle,
           ),

package/src/NumberInput/NumberInput.test.tsx

@@ -1099,6 +1099,30 @@ describe('NumberInput', () => {
       expect(screen.getByRole('alert')).toHaveTextContent('Invalid number');
     });
 
+    it('resolves the invalid-number announcement from the i18n catalog', async () => {
+      const user = userEvent.setup();
+      render(
+        <InternationalizationProvider
+          locale="ar-SA"
+          overrides={{
+            'ar-SA': {'@astryx.numberInput.invalidNumber': 'رقم غير صالح'},
+          }}>
+          <NumberInput
+            label="Count"
+            value={null}
+            onChange={() => {}}
+            isIntegerOnly
+          />
+        </InternationalizationProvider>,
+      );
+
+      const input = screen.getByRole('spinbutton');
+      await user.click(input);
+      await user.type(input, '3.5');
+
+      expect(screen.getByRole('alert')).toHaveTextContent('رقم غير صالح');
+    });
+
     it('does not announce an alert message when input is valid', async () => {
       const user = userEvent.setup();
       render(<NumberInput label="Count" value={null} onChange={() => {}} />);

package/src/NumberInput/NumberInput.tsx

@@ -977,7 +977,7 @@ export function NumberInput({
         user would get no feedback that their entry was rejected (WCAG 3.3.1).
       */}
       <VisuallyHidden as="div" role="alert" aria-live="assertive">
-        {!isInputValid ? 'Invalid number' : ''}
+        {!isInputValid ? t('@astryx.numberInput.invalidNumber') : ''}
       </VisuallyHidden>
       {hasClear && value != null && !isDisabled && !isReadOnly && (
         <InputClearButton

package/src/NumberInput/__tests__/NumberInput.a11y.chromium.spec.ts

@@ -71,21 +71,6 @@ async function runState(
   });
 }
 
-test('every expectation is exercised by at least one NumberInput state', async ({
-  page,
-}) => {
-  test.setTimeout(4 * 60 * 1000);
-  const cdp = await page.context().newCDPSession(page);
-  const results: BindingResult[] = [];
-  for (const state of NUMBER_INPUT_A11Y_STATES) {
-    results.push(await runState(page, cdp, state));
-  }
-  expect(neverExercised(results)).toEqual([]);
-  expect(unmatchedKnownFailures(NUMBER_INPUT_KNOWN_FAILURES, results)).toEqual(
-    [],
-  );
-});
-
 test('the Chromium read-only omission remains exact visible debt', async ({
   page,
 }) => {
@@ -104,13 +89,35 @@ test('the Chromium read-only omission remains exact visible debt', async ({
   expect(readOnly?.knownFailure).toBe(NUMBER_INPUT_KNOWN_FAILURES[0]);
 });
 
+// Each state's result, recorded by its own test below so the whole-suite check
+// at the end reads it instead of measuring every state a second time. A state
+// whose test did not run in this worker (a filtered run, or a worker restarted
+// after a failure) is measured by the whole-suite check itself.
+const recorded = new Map<string, BindingResult>();
+
 for (const state of NUMBER_INPUT_A11Y_STATES) {
   test(`NumberInput [${state.id}] — ${state.summary}`, async ({page}) => {
     const cdp = await page.context().newCDPSession(page);
     const result = await runState(page, cdp, state);
+    recorded.set(state.id, result);
     const report = summarize(SPINBUTTON_PATTERN, [result]);
     expect(formatFailures(blockingResults([result]))).toBe('');
     expect(report.unrunLayers).toEqual([]);
     expect(report.counts.unexpectedPass).toBe(0);
   });
 }
+
+test('every expectation is exercised by at least one NumberInput state', async ({
+  page,
+}) => {
+  test.setTimeout(4 * 60 * 1000);
+  const cdp = await page.context().newCDPSession(page);
+  const results: BindingResult[] = [];
+  for (const state of NUMBER_INPUT_A11Y_STATES) {
+    results.push(recorded.get(state.id) ?? (await runState(page, cdp, state)));
+  }
+  expect(neverExercised(results)).toEqual([]);
+  expect(unmatchedKnownFailures(NUMBER_INPUT_KNOWN_FAILURES, results)).toEqual(
+    [],
+  );
+});

package/src/PowerSearch/PowerSearchEditPopover.test.tsx

@@ -18,6 +18,7 @@ import {
   waitFor,
   within,
 } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React, {useState} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {layerViewportInset} from '../Layer/layerViewportInset.stylex';
@@ -1110,3 +1111,80 @@ describe('empty-operator token with an Editor override', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 });
+
+describe('Enter on a focused footer button (#7437)', () => {
+  const validFilter: PowerSearchFilter = {
+    field: 'status',
+    operator: 'is',
+    value: {type: 'string', value: 'example'},
+  };
+
+  function Harness({
+    onSave,
+    onCancel,
+  }: {
+    onSave: (filter: PowerSearchFilter | null) => void;
+    onCancel: () => void;
+  }) {
+    const internalConfig = useInternalConfig(testConfig);
+    return (
+      <PowerSearchEditPopover
+        config={internalConfig}
+        filter={validFilter}
+        mode="edit"
+        onSave={onSave}
+        onCancel={onCancel}
+      />
+    );
+  }
+
+  it('cancels without saving when Cancel has focus', async () => {
+    const onSave = vi.fn();
+    const onCancel = vi.fn();
+    const user = userEvent.setup();
+    render(<Harness onSave={onSave} onCancel={onCancel} />);
+
+    screen.getByRole('button', {name: 'Cancel'}).focus();
+    await user.keyboard('{Enter}');
+
+    expect(onCancel).toHaveBeenCalledTimes(1);
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it('deletes the filter when Delete has focus', async () => {
+    const onSave = vi.fn();
+    const user = userEvent.setup();
+    render(<Harness onSave={onSave} onCancel={() => {}} />);
+
+    screen.getByRole('button', {name: 'Delete'}).focus();
+    await user.keyboard('{Enter}');
+
+    expect(onSave).toHaveBeenCalledTimes(1);
+    expect(onSave).toHaveBeenCalledWith(null);
+  });
+
+  it('saves once when Apply has focus', async () => {
+    const onSave = vi.fn();
+    const user = userEvent.setup();
+    render(<Harness onSave={onSave} onCancel={() => {}} />);
+
+    screen.getByRole('button', {name: 'Apply'}).focus();
+    await user.keyboard('{Enter}');
+
+    expect(onSave).toHaveBeenCalledTimes(1);
+    expect(onSave).toHaveBeenCalledWith(validFilter);
+  });
+
+  it('still cancels on Escape when a button has focus', async () => {
+    const onSave = vi.fn();
+    const onCancel = vi.fn();
+    const user = userEvent.setup();
+    render(<Harness onSave={onSave} onCancel={onCancel} />);
+
+    screen.getByRole('button', {name: 'Delete'}).focus();
+    await user.keyboard('{Escape}');
+
+    expect(onCancel).toHaveBeenCalledTimes(1);
+    expect(onSave).not.toHaveBeenCalled();
+  });
+});

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -793,6 +793,12 @@ export function PowerSearchEditPopover({
       if (isImeKeyEvent(e.nativeEvent)) {
         return;
       }
+      // A focused button owns its Enter: Cancel cancels, Delete deletes, and
+      // the date picker's calendar button opens the calendar. Enter in a
+      // text or number value field still saves.
+      if (e.key === 'Enter' && e.target instanceof HTMLButtonElement) {
+        return;
+      }
       if (e.key === 'Enter' && !isSaveDisabled && !e.defaultPrevented) {
         e.preventDefault();
         handleSave();