@astryxdesign/core 0.7.2-canary.fe2c655 → 0.7.2

package/src/PowerSearch/PowerSearch.test.tsx

@@ -552,6 +552,68 @@ describe('PowerSearch', () => {
   });
 });
 
+describe('filter token focus', () => {
+  it('opens the editor with the mouse without opening search suggestions', async () => {
+    const user = userEvent.setup();
+    render(
+      <PowerSearch
+        config={config}
+        filters={[
+          {
+            field: 'status',
+            operator: 'is',
+            value: {type: 'enum', value: 'open'},
+          },
+        ]}
+        onChange={() => {}}
+      />,
+    );
+    const input = screen.getByRole('combobox', {name: 'Search'});
+
+    await user.pointer({
+      target: screen.getByText('Status: is'),
+      keys: '[MouseLeft>]',
+    });
+    expect(input).not.toHaveFocus();
+    expect(input).toHaveAttribute('aria-expanded', 'false');
+    expect(
+      screen.queryByRole('button', {name: 'Apply', hidden: true}),
+    ).toBeNull();
+
+    await user.pointer({keys: '[/MouseLeft]'});
+    expect(
+      await screen.findByRole('button', {name: 'Apply', hidden: true}),
+    ).toBeInTheDocument();
+  });
+
+  it('preserves search entry and token editing with the keyboard', async () => {
+    const user = userEvent.setup();
+    render(
+      <PowerSearch
+        config={config}
+        filters={[
+          {
+            field: 'status',
+            operator: 'is',
+            value: {type: 'enum', value: 'open'},
+          },
+        ]}
+        onChange={() => {}}
+      />,
+    );
+    await user.tab();
+    expect(screen.getByRole('combobox', {name: 'Search'})).toHaveFocus();
+
+    await user.tab({shift: true}); // Remove button
+    await user.tab({shift: true}); // Token label
+    expect(screen.getByRole('button', {name: 'Status: is'})).toHaveFocus();
+    await user.keyboard('{Enter}');
+    expect(
+      await screen.findByRole('button', {name: 'Apply', hidden: true}),
+    ).toBeInTheDocument();
+  });
+});
+
 describe('PowerSearch statusVariant forwarding', () => {
   it('defaults to attached (status renders with data-variant="attached")', () => {
     const {container} = render(

package/src/PowerSearch/PowerSearch.tsx

@@ -900,6 +900,15 @@ export function PowerSearch({
           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) => {

package/src/PowerSearch/PowerSearchValueEditor.test.tsx

@@ -80,6 +80,77 @@ function createSearchSource(
   };
 }
 
+describe('isDisabled reaches every built-in value editor', () => {
+  const items = [
+    {id: 'a', label: 'Alpha'},
+    {id: 'b', label: 'Beta'},
+  ];
+  const enumValues = [
+    {value: 'a', label: 'Alpha'},
+    {value: 'b', label: 'Beta'},
+  ];
+  const cases: ReadonlyArray<[string, OperatorValue]> = [
+    ['string', {type: 'string'}],
+    [
+      'string with a search source',
+      {type: 'string', searchSource: createSearchSource(items)},
+    ],
+    [
+      'string_list',
+      {type: 'string_list', searchSource: createSearchSource(items)},
+    ],
+    ['integer', {type: 'integer'}],
+    ['float', {type: 'float'}],
+    ['time', {type: 'time'}],
+    ['date_absolute', {type: 'date_absolute'}],
+    ['date_relative', {type: 'date_relative'}],
+    ['date_range', {type: 'date_range'}],
+    ['enum', {type: 'enum', values: enumValues}],
+    ['enum_list', {type: 'enum_list', values: enumValues}],
+    [
+      'entity_list',
+      {type: 'entity_list', searchSource: createSearchSource(items)},
+    ],
+  ];
+
+  // Every form control the editor renders outside a closed popover (a date
+  // input's calendar stays mounted while closed, and its disabled trigger
+  // cannot open it), so a disabled built-in editor leaves nothing a person
+  // can type into, press, or open.
+  function controlsOf(container: HTMLElement): HTMLElement[] {
+    return Array.from(
+      container.querySelectorAll<HTMLElement>(
+        'input, textarea, button, select, [role="combobox"], [contenteditable="true"]',
+      ),
+    ).filter(element => {
+      const popover = element.closest<HTMLElement>('[popover]');
+      return (
+        element.getAttribute('aria-hidden') !== 'true' &&
+        (popover == null || popover.matches(':popover-open'))
+      );
+    });
+  }
+
+  const isUnavailable = (element: HTMLElement) =>
+    (element as HTMLInputElement).disabled === true ||
+    element.getAttribute('aria-disabled') === 'true';
+
+  it.each(cases)('%s', (_name, operatorValue) => {
+    const {container} = render(
+      <PowerSearchValueEditor
+        operatorValue={operatorValue}
+        filterValue={undefined}
+        onChange={() => {}}
+        config={stubConfig}
+        isDisabled
+      />,
+    );
+    const controls = controlsOf(container);
+    expect(controls.length).toBeGreaterThan(0);
+    expect(controls.filter(element => !isUnavailable(element))).toEqual([]);
+  });
+});
+
 // =============================================================================
 // #1103 — StringEditor ignores searchSource
 // =============================================================================

package/src/PowerSearch/PowerSearchValueEditor.tsx

@@ -105,12 +105,14 @@ function StringEditor({
   onChange,
   onEnter: _onEnter,
   maxMenuItems,
+  isDisabled,
 }: {
   operatorValue: OperatorValue & {type: 'string'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
   onEnter?: () => void;
   maxMenuItems?: number;
+  isDisabled?: boolean;
 }) {
   const t = useTranslator();
   const currentValue = filterValue?.type === 'string' ? filterValue.value : '';
@@ -126,6 +128,7 @@ function StringEditor({
       <Typeahead
         label={t('@astryx.powersearch.valueEditor.value')}
         isLabelHidden
+        isDisabled={isDisabled}
         searchSource={operatorValue.searchSource}
         value={selectedItem}
         onChange={item => {
@@ -146,6 +149,7 @@ function StringEditor({
     <TextInput
       label={t('@astryx.powersearch.valueEditor.value')}
       isLabelHidden
+      isDisabled={isDisabled}
       value={currentValue}
       placeholder={t('@astryx.powersearch.valueEditor.enterValuePlaceholder')}
       onChange={(value: string) => {
@@ -160,11 +164,13 @@ function StringListEditor({
   filterValue,
   onChange,
   maxMenuItems,
+  isDisabled,
 }: {
   operatorValue: OperatorValue & {type: 'string_list'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
   maxMenuItems?: number;
+  isDisabled?: boolean;
 }) {
   const t = useTranslator();
   const currentValue: SearchableItem[] = useMemo(() => {
@@ -194,6 +200,7 @@ function StringListEditor({
     <Tokenizer
       label={t('@astryx.powersearch.valueEditor.values')}
       isLabelHidden
+      isDisabled={isDisabled}
       searchSource={source}
       value={currentValue}
       onChange={items => {
@@ -278,11 +285,13 @@ function IntegerEditor({
   filterValue,
   onChange,
   onEnter,
+  isDisabled,
 }: {
   operatorValue: OperatorValue & {type: 'integer'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
   onEnter?: () => void;
+  isDisabled?: boolean;
 }) {
   const t = useTranslator();
   const currentValue =
@@ -300,6 +309,7 @@ function IntegerEditor({
     <NumberInput
       label={t('@astryx.powersearch.valueEditor.value')}
       isLabelHidden
+      isDisabled={isDisabled}
       value={currentValue ?? null}
       onChange={handlers.handleChange}
       onFocus={handlers.handleFocus}
@@ -320,11 +330,13 @@ function FloatEditor({
   filterValue,
   onChange,
   onEnter,
+  isDisabled,
 }: {
   operatorValue: OperatorValue & {type: 'float'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
   onEnter?: () => void;
+  isDisabled?: boolean;
 }) {
   const t = useTranslator();
   const currentValue =
@@ -342,6 +354,7 @@ function FloatEditor({
     <NumberInput
       label={t('@astryx.powersearch.valueEditor.value')}
       isLabelHidden
+      isDisabled={isDisabled}
       value={currentValue ?? null}
       onChange={handlers.handleChange}
       onFocus={handlers.handleFocus}
@@ -360,10 +373,12 @@ function TimeEditor({
   operatorValue,
   filterValue,
   onChange,
+  isDisabled,
 }: {
   operatorValue: OperatorValue & {type: 'time'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
+  isDisabled?: boolean;
 }) {
   const t = useTranslator();
   const currentValue =
@@ -375,6 +390,7 @@ function TimeEditor({
     <TimeInput
       label={t('@astryx.powersearch.valueEditor.time')}
       isLabelHidden
+      isDisabled={isDisabled}
       value={currentValue}
       onChange={value => {
         if (value != null) {
@@ -390,10 +406,12 @@ function TimeEditor({
 function DateAbsoluteEditor({
   filterValue,
   onChange,
+  isDisabled,
 }: {
   operatorValue: OperatorValue & {type: 'date_absolute'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
+  isDisabled?: boolean;
 }) {
   const t = useTranslator();
   // Convert unixSeconds to ISO date string for the date input
@@ -409,6 +427,7 @@ function DateAbsoluteEditor({
     <DateInput
       label={t('@astryx.powersearch.valueEditor.date')}
       isLabelHidden
+      isDisabled={isDisabled}
       value={currentValue}
       onChange={value => {
         if (value != null) {
@@ -424,10 +443,12 @@ function DateRelativeEditor({
   operatorValue,
   filterValue,
   onChange,
+  isDisabled,
 }: {
   operatorValue: OperatorValue & {type: 'date_relative'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
+  isDisabled?: boolean;
 }) {
   const t = useTranslator();
   const currentValue =
@@ -469,6 +490,7 @@ function DateRelativeEditor({
     <Selector
       label={t('@astryx.powersearch.valueEditor.relativeDate')}
       isLabelHidden
+      isDisabled={isDisabled}
       options={options}
       value={currentValue}
       onChange={value => {
@@ -481,10 +503,12 @@ function DateRelativeEditor({
 function DateRangeEditor({
   filterValue,
   onChange,
+  isDisabled,
 }: {
   operatorValue: OperatorValue & {type: 'date_range'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
+  isDisabled?: boolean;
 }) {
   const t = useTranslator();
   const currentValue = useMemo<DateRange | null>(() => {
@@ -534,6 +558,7 @@ function DateRangeEditor({
       <DateRangeInput
         label={t('@astryx.powersearch.valueEditor.dateRange')}
         isLabelHidden
+        isDisabled={isDisabled}
         value={currentValue}
         onChange={handleChange}
         hasClear={false}
@@ -546,10 +571,12 @@ function EnumEditor({
   operatorValue,
   filterValue,
   onChange,
+  isDisabled,
 }: {
   operatorValue: OperatorValue & {type: 'enum'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue, shouldSave?: boolean) => void;
+  isDisabled?: boolean;
 }) {
   const t = useTranslator();
   const currentValue =
@@ -568,6 +595,7 @@ function EnumEditor({
     <Selector
       label={t('@astryx.powersearch.valueEditor.value')}
       isLabelHidden
+      isDisabled={isDisabled}
       options={options}
       value={currentValue}
       onChange={value => {
@@ -581,10 +609,12 @@ function EnumListEditor({
   operatorValue,
   filterValue,
   onChange,
+  isDisabled,
 }: {
   operatorValue: OperatorValue & {type: 'enum_list'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
+  isDisabled?: boolean;
 }) {
   const t = useTranslator();
   const items = useMemo(
@@ -608,6 +638,7 @@ function EnumListEditor({
     <Tokenizer
       label={t('@astryx.powersearch.valueEditor.values')}
       isLabelHidden
+      isDisabled={isDisabled}
       searchSource={source}
       value={currentValue}
       onChange={selectedItems => {
@@ -632,11 +663,13 @@ function EntityListEditor({
   filterValue,
   onChange,
   maxMenuItems,
+  isDisabled,
 }: {
   operatorValue: OperatorValue & {type: 'entity_list'};
   filterValue: FilterValue | undefined;
   onChange: (value: FilterValue) => void;
   maxMenuItems?: number;
+  isDisabled?: boolean;
 }) {
   const t = useTranslator();
   const source = useMemo<SearchSource<SearchableItem>>(() => {
@@ -665,6 +698,7 @@ function EntityListEditor({
     <Tokenizer
       label={t('@astryx.powersearch.valueEditor.entities')}
       isLabelHidden
+      isDisabled={isDisabled}
       searchSource={source}
       value={currentValue}
       onChange={items => {
@@ -738,6 +772,7 @@ export function PowerSearchValueEditor({
     case 'string':
       return (
         <StringEditor
+          isDisabled={isDisabled}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -749,6 +784,7 @@ export function PowerSearchValueEditor({
     case 'string_list':
       return (
         <StringListEditor
+          isDisabled={isDisabled}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -759,6 +795,7 @@ export function PowerSearchValueEditor({
     case 'integer':
       return (
         <IntegerEditor
+          isDisabled={isDisabled}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -769,6 +806,7 @@ export function PowerSearchValueEditor({
     case 'float':
       return (
         <FloatEditor
+          isDisabled={isDisabled}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -779,6 +817,7 @@ export function PowerSearchValueEditor({
     case 'time':
       return (
         <TimeEditor
+          isDisabled={isDisabled}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -788,6 +827,7 @@ export function PowerSearchValueEditor({
     case 'date_absolute':
       return (
         <DateAbsoluteEditor
+          isDisabled={isDisabled}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -797,6 +837,7 @@ export function PowerSearchValueEditor({
     case 'date_relative':
       return (
         <DateRelativeEditor
+          isDisabled={isDisabled}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -806,6 +847,7 @@ export function PowerSearchValueEditor({
     case 'date_range':
       return (
         <DateRangeEditor
+          isDisabled={isDisabled}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -815,6 +857,7 @@ export function PowerSearchValueEditor({
     case 'enum':
       return (
         <EnumEditor
+          isDisabled={isDisabled}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -824,6 +867,7 @@ export function PowerSearchValueEditor({
     case 'enum_list':
       return (
         <EnumListEditor
+          isDisabled={isDisabled}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}
@@ -833,6 +877,7 @@ export function PowerSearchValueEditor({
     case 'entity_list':
       return (
         <EntityListEditor
+          isDisabled={isDisabled}
           operatorValue={operatorValue}
           filterValue={filterValue}
           onChange={onChange}

package/src/ProgressBar/ProgressBar.doc.mjs

@@ -53,6 +53,7 @@ export const docs = {
     'determinate',
     'indeterminate',
     'meter',
+    'linearprogress',
   ],
   props: [
     {

package/src/RadioList/RadioList.fr10.test.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it} from 'vitest';
-import {screen} from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render, screen} from '@testing-library/react';
 import {expectFieldInputProps} from '../Field/fieldInputFamily.testing';
 import {describeFieldInputParts} from '../Field/fieldInputFamily.render-testing';
 import {RadioList, type RadioListProps} from './RadioList';
@@ -22,3 +22,46 @@ describeFieldInputParts('RadioList', {
   getControl: () => screen.getByRole('radiogroup'),
   inGroup: false,
 });
+
+describe('RadioList FR10 details', () => {
+  it("names the radiogroup by its label and then a caller's aria-labelledby", () => {
+    render(
+      <>
+        <span id="caller-name">Billing</span>
+        <RadioList
+          label="Plan"
+          value="a"
+          onChange={() => {}}
+          aria-labelledby="caller-name">
+          <RadioListItem label="A" value="a" />
+        </RadioList>
+      </>,
+    );
+    const group = screen.getByRole('radiogroup');
+    const ids = group.getAttribute('aria-labelledby')?.split(' ');
+    expect(ids).toHaveLength(2);
+    expect(document.getElementById(ids?.[0] ?? '')?.textContent).toContain(
+      'Plan',
+    );
+    expect(ids?.[1]).toBe('caller-name');
+    expect(screen.getByRole('radiogroup', {name: 'Plan Billing'})).toBe(group);
+  });
+
+  it('puts hidden, inert, and dir on the radiogroup', () => {
+    render(
+      <RadioList
+        label="Plan"
+        value="a"
+        onChange={() => {}}
+        hidden
+        inert
+        dir="rtl">
+        <RadioListItem label="A" value="a" />
+      </RadioList>,
+    );
+    const group = document.querySelector<HTMLElement>('[role="radiogroup"]');
+    expect(group).toHaveAttribute('hidden');
+    expect(group).toHaveAttribute('inert');
+    expect(group).toHaveAttribute('dir', 'rtl');
+  });
+});

package/src/RadioList/RadioList.test.tsx

@@ -524,6 +524,28 @@ describe('RadioList', () => {
   });
 
   describe('RadioListItem rest forwarding', () => {
+    it('forwards align to its Item row unchanged', () => {
+      render(
+        <RadioList label="Preference" value="" onChange={() => {}}>
+          <RadioListItem label="Option A" value="a" data-testid="item-a" />
+          <RadioListItem
+            label="Option B"
+            value="b"
+            align="first-line"
+            data-testid="item-b"
+          />
+        </RadioList>,
+      );
+      expect(screen.getByTestId('item-a')).toHaveAttribute(
+        'data-align',
+        'center',
+      );
+      expect(screen.getByTestId('item-b')).toHaveAttribute(
+        'data-align',
+        'first-line',
+      );
+    });
+
     it('forwards data-testid, id, and aria-* to the item root element', () => {
       render(
         <RadioList label="Preference" value="" onChange={() => {}}>

package/src/RadioList/RadioList.tsx

@@ -31,6 +31,7 @@ import type {InputStatus} from '../Field/types';
 import {useTooltip} from '../Tooltip';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {composeEventHandlers, mergeProps} from '../utils';
+import {joinAriaIDs} from '../utils/inputAria';
 import {
   type FieldInputBaseProps,
   useFieldInputStyling,
@@ -216,6 +217,7 @@ export function RadioList({
   htmlName,
   children,
   onFocus,
+  'aria-labelledby': ariaLabelledByProp,
   'aria-describedby': ariaDescribedByProp,
   ...restProps
 }: RadioListProps) {
@@ -399,7 +401,8 @@ export function RadioList({
           disabledMessageTooltip.ref(el);
         }}
         role="radiogroup"
-        aria-labelledby={labelID}
+        // A caller aria-labelledby names the group together with its label.
+        aria-labelledby={joinAriaIDs(labelID, ariaLabelledByProp)}
         onFocus={composeEventHandlers(handleFocus, onFocus)}
         aria-describedby={
           [

package/src/RadioList/RadioListItem.doc.mjs

@@ -43,6 +43,13 @@ export const docs = {
       description:
         'Secondary content displayed below the label. Links and buttons keep their own click behaviour — the row only delegates clicks from its non-interactive surface to the radio.',
     },
+    {
+      name: 'align',
+      type: "'center' | 'start' | 'first-line'",
+      description:
+        'Vertical alignment of the start and end content against the label, passed through to Item unchanged. `first-line` keeps a small mark (a radio) level with the first line of a wrapped label. See Item.align.',
+      default: "'center'",
+    },
     {
       name: 'isDisabled',
       type: 'boolean',
@@ -117,6 +124,13 @@ export const docsZh = {
       description:
         '显示在标签下方的次要内容。链接和按钮保留自身的点击行为——整行仅将非交互区域的点击委派给单选框。',
     },
+    {
+      name: 'align',
+      type: "'center' | 'start' | 'first-line'",
+      description:
+        '起始和结束内容相对于标签的垂直对齐方式，原样传递给 Item。`first-line` 让小标记（单选按钮）与换行标签的第一行保持水平。参见 Item.align。',
+      default: "'center'",
+    },
     {
       name: 'isDisabled',
       type: 'boolean',
@@ -142,6 +156,8 @@ export const docsDense = {
   displayName: 'Radio List Item',
   description: 'Individual radio item w/ label, description, content slots.',
   propDescriptions: {
+    align:
+      "Start/end content alignment, passed to Item: 'center' (default), 'start', or 'first-line' (centered on the label's first line).",
     label:
       'Primary label. String or ReactNode; nested controls keep their behavior.',
     'aria-label':

package/src/RadioList/RadioListItem.tsx

@@ -29,7 +29,7 @@ import {indicatorScope} from '../Indicator/indicator.markers.stylex';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
 import {usePressFeedback} from '../hooks/usePressFeedback';
 import {useIndicator} from '../Indicator';
-import {Item} from '../Item';
+import {Item, type ItemAlign} from '../Item';
 import {themeProps} from '../utils/themeProps';
 
 // The touch press's paint, declared by the shared overlay styles on the
@@ -156,6 +156,13 @@ const rowStyles = stylex.create({
 
 export interface RadioListItemProps extends BaseProps<HTMLDivElement> {
   ref?: React.Ref<HTMLDivElement>;
+  /**
+   * Vertical alignment of the start and end content against the label,
+   * forwarded to Item. Use `first-line` to keep the radio level with the
+   * first line of a wrapped label.
+   * @default 'center'
+   */
+  align?: ItemAlign;
   /**
    * Primary label for the radio item.
    *
@@ -232,6 +239,7 @@ export function RadioListItem({
   isDisabled: isItemDisabled = false,
   startContent,
   endContent,
+  align,
   xstyle,
   className,
   style,
@@ -366,6 +374,7 @@ export function RadioListItem({
         ) : undefined
       }
       endContent={endContent}
+      align={align}
       xstyle={
         [
           // Hover reaches the radio visual through this ancestor marker rather

package/src/Resizable/useResizable.doc.mjs

@@ -14,6 +14,8 @@ export const docs = {
     'sidebar',
     'divider',
     'splitter',
+    'splitpane',
+    'resizablepanels',
   ],
   params: [
     {