@astryxdesign/core 0.1.4-canary.fd7ab46 → 0.1.4

package/src/Switch/Switch.test.tsx

@@ -470,84 +470,11 @@ describe('Switch', () => {
       expect(screen.getByRole('switch')).toBeDisabled();
     });
   });
-  describe('labelSpacing', () => {
-    const getField = (container: HTMLElement) =>
-      container.querySelector<HTMLElement>('.astryx-switch-field')!;
-
-    it('omits the data attribute for the default hug spacing', () => {
-      const {container} = render(
-        <Switch label="Notify" value={false} onChange={() => {}} />,
-      );
-      expect(getField(container)).not.toHaveAttribute('data-label-spacing');
-    });
-
-    it('reflects spread spacing as a data attribute and variant class', () => {
-      const {container} = render(
-        <Switch
-          label="Notify"
-          value={false}
-          onChange={() => {}}
-          labelSpacing="spread"
-        />,
-      );
-      expect(getField(container)).toHaveAttribute(
-        'data-label-spacing',
-        'spread',
-      );
-      expect(getField(container).className).toContain('spread');
-    });
-
-    it('renders explicit hug the same as the default', () => {
-      const {container: implicit} = render(
-        <Switch label="Notify" value={false} onChange={() => {}} />,
-      );
-      const {container: explicit} = render(
-        <Switch
-          label="Notify"
-          value={false}
-          onChange={() => {}}
-          labelSpacing="hug"
-        />,
-      );
-      expect(getField(explicit)).not.toHaveAttribute('data-label-spacing');
-      expect(getField(explicit).className).toBe(getField(implicit).className);
-    });
-
-    it("treats the deprecated 'default' value as an alias for hug", () => {
-      const {container: hug} = render(
-        <Switch
-          label="Notify"
-          value={false}
-          onChange={() => {}}
-          labelSpacing="hug"
-        />,
-      );
-      const {container: deprecated} = render(
-        <Switch
-          label="Notify"
-          value={false}
-          onChange={() => {}}
-          labelSpacing="default"
-        />,
-      );
-      expect(getField(deprecated)).not.toHaveAttribute('data-label-spacing');
-      expect(getField(deprecated).className).toBe(getField(hug).className);
-      // The switch row keeps the hug layout, not the spread justification.
-      expect(getField(deprecated).firstElementChild?.className).toBe(
-        getField(hug).firstElementChild?.className,
-      );
-    });
-  });
   describe('form participation', () => {
     it('submits under htmlName when on', () => {
       const {container} = render(
         <form>
-          <Switch
-            label="Notify"
-            htmlName="notify"
-            value={true}
-            onChange={() => {}}
-          />
+          <Switch label="Notify" htmlName="notify" value={true} onChange={() => {}} />
         </form>,
       );
       const data = new FormData(container.querySelector('form')!);
@@ -567,20 +494,13 @@ describe('Switch', () => {
           />
         </form>,
       );
-      expect([
-        ...new FormData(container.querySelector('form')!).keys(),
-      ]).toEqual([]);
+      expect([...new FormData(container.querySelector('form')!).keys()]).toEqual([]);
     });
 
     it('submits nothing when off or when htmlName is omitted', () => {
       const {container} = render(
         <form>
-          <Switch
-            label="Off"
-            htmlName="off"
-            value={false}
-            onChange={() => {}}
-          />
+          <Switch label="Off" htmlName="off" value={false} onChange={() => {}} />
           <Switch label="Unnamed" value={true} onChange={() => {}} />
         </form>,
       );
@@ -588,23 +508,4 @@ describe('Switch', () => {
       expect([...data.keys()]).toEqual([]);
     });
   });
-
-  describe('rest forwarding', () => {
-    it('forwards data-testid, id, and aria-* to the root element', () => {
-      const {container} = render(
-        <Switch
-          label="Notifications"
-          value={false}
-          onChange={() => {}}
-          data-testid="my-switch"
-          id="switch-1"
-          aria-label="Toggle notifications"
-        />,
-      );
-      const root = container.querySelector('[data-testid="my-switch"]');
-      expect(root).not.toBeNull();
-      expect(root).toHaveAttribute('id', 'switch-1');
-      expect(root).toHaveAttribute('aria-label', 'Toggle notifications');
-    });
-  });
 });

package/src/Switch/Switch.tsx

@@ -185,11 +185,7 @@ const styles = stylex.create({
 
 export type SwitchLabelPosition = 'start' | 'end';
 
-export type SwitchLabelSpacing =
-  | 'hug'
-  | 'spread'
-  /** @deprecated Use `'hug'` instead. */
-  | 'default';
+export type SwitchLabelSpacing = 'default' | 'spread';
 
 export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
   /** Ref forwarded to the root element */
@@ -301,11 +297,9 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
   labelPosition?: SwitchLabelPosition;
   /**
    * Spacing behavior between label and switch.
-   * - 'hug': Label and switch are positioned next to each other
+   * - 'default': Label and switch are positioned next to each other
    * - 'spread': Label and switch are pushed to opposite ends
-   *
-   * 'default' is a deprecated alias for 'hug'.
-   * @default 'hug'
+   * @default 'default'
    */
   labelSpacing?: SwitchLabelSpacing;
   /**
@@ -356,14 +350,13 @@ export function Switch({
   labelIcon,
   labelTooltip,
   labelPosition = 'end',
-  labelSpacing = 'hug',
+  labelSpacing = 'default',
   status,
   width,
   xstyle,
   className,
   style,
   ref,
-  ...rest
 }: SwitchProps) {
   const id = useId();
   const descriptionID = useId();
@@ -375,10 +368,6 @@ export function Switch({
 
   const isOn = optimisticValue === true;
 
-  // 'default' is a deprecated alias for 'hug' (#2889).
-  const resolvedLabelSpacing: SwitchLabelSpacing =
-    labelSpacing === 'default' ? 'hug' : labelSpacing;
-
   // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
   // tooltip listeners attach to the switch row (which already exists) and the
   // native checkbox stays perceivable via aria-disabled instead of the disabled
@@ -498,14 +487,12 @@ export function Switch({
       {...mergeProps(
         themeProps('switch-field', {
           labelPosition: labelPosition !== 'end' ? labelPosition : undefined,
-          labelSpacing:
-            resolvedLabelSpacing !== 'hug' ? resolvedLabelSpacing : undefined,
+          labelSpacing: labelSpacing !== 'default' ? labelSpacing : undefined,
         }),
         stylex.props(width != null && dynamicWidthStyles.width(width), xstyle),
         className,
         style,
-      )}
-      {...rest}>
+      )}>
       <div
         ref={el => {
           // Interaction (hover/focus) listeners for the disabled-message
@@ -518,7 +505,7 @@ export function Switch({
         }}
         {...stylex.props(
           styles.container,
-          resolvedLabelSpacing === 'spread' && styles.containerSpread,
+          labelSpacing === 'spread' && styles.containerSpread,
           !isDisabled && switchScope,
         )}>
         {' '}

package/src/TabList/TabList.test.tsx

@@ -10,7 +10,7 @@
  */
 
 import {describe, it, expect, vi, beforeAll, afterAll} from 'vitest';
-import {render, screen, fireEvent} from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {TabList} from './TabList';
 import {Tab} from './Tab';
@@ -702,187 +702,3 @@ describe('TabMenu', () => {
     expect(reportsItem).not.toHaveAttribute('aria-current');
   });
 });
-
-describe('TabMenu keyboard navigation (roving tabindex)', () => {
-  const menuOptions = [
-    {value: 'analytics', label: 'Analytics'},
-    {value: 'reports', label: 'Reports'},
-  ];
-
-  it('exposes the overflow menu as a single Tab stop (one item tabbable, rest -1)', async () => {
-    const user = userEvent.setup();
-    render(
-      <TabList value="home" onChange={() => {}}>
-        <Tab value="home" label="Home" />
-        <TabMenu label="More" options={menuOptions} />
-      </TabList>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /More/}));
-
-    const analytics = screen.getByRole('menuitem', {
-      name: 'Analytics',
-      hidden: true,
-    });
-    const reports = screen.getByRole('menuitem', {
-      name: 'Reports',
-      hidden: true,
-    });
-
-    // Exactly one menu item is in the Tab sequence; arrow keys reach the rest.
-    expect(analytics).toHaveAttribute('tabindex', '0');
-    expect(reports).toHaveAttribute('tabindex', '-1');
-
-    const tabbable = [analytics, reports].filter(
-      el => el.getAttribute('tabindex') === '0',
-    );
-    expect(tabbable).toHaveLength(1);
-  });
-
-  it('moves focus between items with ArrowDown and ArrowUp', async () => {
-    const user = userEvent.setup();
-    render(
-      <TabList value="home" onChange={() => {}}>
-        <Tab value="home" label="Home" />
-        <TabMenu label="More" options={menuOptions} />
-      </TabList>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /More/}));
-    const menu = screen.getByRole('menu', {hidden: true});
-    const analytics = screen.getByRole('menuitem', {
-      name: 'Analytics',
-      hidden: true,
-    });
-    const reports = screen.getByRole('menuitem', {
-      name: 'Reports',
-      hidden: true,
-    });
-
-    fireEvent.keyDown(menu, {key: 'ArrowDown'});
-    expect(analytics).toHaveFocus();
-
-    fireEvent.keyDown(menu, {key: 'ArrowDown'});
-    expect(reports).toHaveFocus();
-
-    fireEvent.keyDown(menu, {key: 'ArrowUp'});
-    expect(analytics).toHaveFocus();
-  });
-
-  it('moves the roving tab stop with arrow navigation', async () => {
-    const user = userEvent.setup();
-    render(
-      <TabList value="home" onChange={() => {}}>
-        <Tab value="home" label="Home" />
-        <TabMenu label="More" options={menuOptions} />
-      </TabList>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /More/}));
-    const menu = screen.getByRole('menu', {hidden: true});
-    const analytics = screen.getByRole('menuitem', {
-      name: 'Analytics',
-      hidden: true,
-    });
-    const reports = screen.getByRole('menuitem', {
-      name: 'Reports',
-      hidden: true,
-    });
-
-    fireEvent.keyDown(menu, {key: 'ArrowDown'}); // focus analytics
-    fireEvent.keyDown(menu, {key: 'ArrowDown'}); // focus reports
-
-    // The tab stop follows focus, so it is still a single stop after moving.
-    expect(reports).toHaveAttribute('tabindex', '0');
-    expect(analytics).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('jumps to first and last item with Home and End', async () => {
-    const user = userEvent.setup();
-    const options = [
-      {value: 'analytics', label: 'Analytics'},
-      {value: 'reports', label: 'Reports'},
-      {value: 'exports', label: 'Exports'},
-    ];
-    render(
-      <TabList value="home" onChange={() => {}}>
-        <Tab value="home" label="Home" />
-        <TabMenu label="More" options={options} />
-      </TabList>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /More/}));
-    const menu = screen.getByRole('menu', {hidden: true});
-    const analytics = screen.getByRole('menuitem', {
-      name: 'Analytics',
-      hidden: true,
-    });
-    const exports = screen.getByRole('menuitem', {
-      name: 'Exports',
-      hidden: true,
-    });
-
-    fireEvent.keyDown(menu, {key: 'End'});
-    expect(exports).toHaveFocus();
-
-    fireEvent.keyDown(menu, {key: 'Home'});
-    expect(analytics).toHaveFocus();
-  });
-
-  it('selects an item with Enter and calls onChange', async () => {
-    const user = userEvent.setup();
-    const handleChange = vi.fn();
-    render(
-      <TabList value="home" onChange={handleChange}>
-        <Tab value="home" label="Home" />
-        <TabMenu label="More" options={menuOptions} />
-      </TabList>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /More/}));
-    const analytics = screen.getByRole('menuitem', {
-      name: 'Analytics',
-      hidden: true,
-    });
-    analytics.focus();
-    fireEvent.keyDown(analytics, {key: 'Enter'});
-
-    expect(handleChange).toHaveBeenCalledWith('analytics');
-  });
-
-  it('closes the menu when Tab is pressed inside it (APG menu-button)', async () => {
-    const user = userEvent.setup();
-    render(
-      <TabList value="home" onChange={() => {}}>
-        <Tab value="home" label="Home" />
-        <TabMenu label="More" options={menuOptions} />
-      </TabList>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /More/}));
-    const menu = screen.getByRole('menu', {hidden: true});
-
-    const hidePopover = vi.mocked(HTMLElement.prototype.hidePopover);
-    hidePopover.mockClear();
-    fireEvent.keyDown(menu, {key: 'Tab'});
-    expect(hidePopover).toHaveBeenCalled();
-  });
-
-  it('closes the menu when Escape is pressed', async () => {
-    const user = userEvent.setup();
-    render(
-      <TabList value="home" onChange={() => {}}>
-        <Tab value="home" label="Home" />
-        <TabMenu label="More" options={menuOptions} />
-      </TabList>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /More/}));
-    const menu = screen.getByRole('menu', {hidden: true});
-
-    const hidePopover = vi.mocked(HTMLElement.prototype.hidePopover);
-    hidePopover.mockClear();
-    fireEvent.keyDown(menu, {key: 'Escape'});
-    expect(hidePopover).toHaveBeenCalled();
-  });
-});

package/src/TabList/TabMenu.tsx

@@ -16,7 +16,7 @@
  * - /packages/cli/templates/blocks/components/TabList/ (showcase blocks)
  */
 
-import React, {useCallback, useId, useRef, type ReactNode} from 'react';
+import React, {useCallback, useId, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Icon} from '../Icon';
 import {renderIconSlot, type IconType} from '../Icon';
@@ -262,7 +262,6 @@ export function TabMenu({
 }: TabMenuProps) {
   const tabListCtx = useTabListContext();
   const menuId = useId();
-  const buttonRef = useRef<HTMLButtonElement>(null);
 
   const popover = usePopover({
     hasLightDismiss: true,
@@ -271,50 +270,20 @@ export function TabMenu({
     // The popup's own role="menu" is the exposed semantics; a modal dialog
     // wrapper would announce an unnamed dialog around the menu.
     role: 'none',
-    // Return focus to the trigger when the menu closes (Escape, Tab, select,
-    // or light dismiss) so keyboard focus is never dropped to <body>.
-    onHide: useCallback(() => {
-      buttonRef.current?.focus();
-    }, []),
   });
 
-  // The overflow menu is a composite widget: a single roving tab stop with
-  // arrow-key navigation between items, per the APG menu pattern. The hook owns
-  // item tabindex — items render tabIndex={-1} and exactly one is promoted to 0.
-  const {
-    listRef,
-    handleKeyDown: handleListKeyDown,
-    handleFocus,
-    focusFirst,
-  } = useListFocus<HTMLDivElement>({
-    hasRovingTabIndex: true,
-    onEscape: () => popover.hide(),
-  });
+  const {listRef, handleKeyDown: handleListKeyDown} =
+    useListFocus<HTMLDivElement>({
+      onEscape: () => popover.hide(),
+    });
 
   const handleToggle = useCallback(() => {
     if (popover.isOpen) {
       popover.hide();
     } else {
       popover.show();
-      // Move focus into the menu on open so arrow navigation works and the
-      // roving tab stop lands on a real item (APG menu-button focus-on-open).
-      requestAnimationFrame(() => focusFirst());
     }
-  }, [popover, focusFirst]);
-
-  const handleMenuKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      // APG menu-button: Tab leaves the menu rather than walking its items.
-      // Close and let onHide return focus to the trigger, from which the
-      // browser's default Tab continues to the next element.
-      if (e.key === 'Tab') {
-        popover.hide();
-        return;
-      }
-      handleListKeyDown(e);
-    },
-    [handleListKeyDown, popover],
-  );
+  }, [popover]);
 
   const selectedOption = options.find(o => o.value === tabListCtx.value);
   const triggerLabel = selectedOption?.label ?? label;
@@ -330,11 +299,7 @@ export function TabMenu({
     [tabListCtx, popover],
   );
 
-  const setButtonRef = mergeRefs<HTMLButtonElement>(
-    popover.triggerRef,
-    buttonRef,
-    ref,
-  );
+  const setButtonRef = mergeRefs<HTMLButtonElement>(popover.triggerRef, ref);
 
   return (
     <>
@@ -392,8 +357,7 @@ export function TabMenu({
           id={menuId}
           role="menu"
           aria-label={label}
-          onKeyDown={handleMenuKeyDown}
-          onFocus={handleFocus}
+          onKeyDown={handleListKeyDown}
           {...mergeProps(
             themeProps('tab-menu-dropdown'),
             stylex.props(styles.dropdown),
@@ -407,7 +371,7 @@ export function TabMenu({
               <div
                 key={option.value}
                 role="menuitem"
-                tabIndex={-1}
+                tabIndex={0}
                 aria-current={isSelected ? 'true' : undefined}
                 onClick={() => handleSelect(option.value)}
                 onKeyDown={e => {

package/src/Table/BaseTable.tsx

@@ -279,18 +279,11 @@ function areRowPropsEqual<T extends Record<string, unknown>>(
     return true;
   }
 
-  // Different object reference - compare values. This is intentionally a
-  // one-level shallow compare: nested fields rely on reference identity.
+  // Different object reference - compare values
   const prevItem = prevProps.item;
   const nextItem = nextProps.item;
   const keys = Object.keys(nextItem);
 
-  // A key deleted from nextItem would never be visited by the loop below,
-  // and the row would keep rendering the removed field's stale value.
-  if (Object.keys(prevItem).length !== keys.length) {
-    return false;
-  }
-
   for (const key of keys) {
     if (prevItem[key] !== nextItem[key]) {
       return false;
@@ -372,13 +365,9 @@ function BaseTableInner<T extends Record<string, unknown>>({
   const headerCells = resolvedColumns.map((col, columnIndex) => {
     const headerContent = col.header ?? col.key;
 
-    // Build initial htmlProps with column alignment if specified.
-    // `scope: 'col'` is the default so every column header associates its
-    // data cells with the correct column for screen readers; a plugin's
-    // transformHeaderCell can override it via htmlProps.scope.
+    // Build initial htmlProps with column alignment if specified
     const initialHeaderHtmlProps: Record<string, unknown> = {
       'data-column-key': col.key,
-      scope: 'col',
     };
     if (col.align) {
       initialHeaderHtmlProps.style = {textAlign: col.align};

package/src/Table/Table.test.tsx

@@ -15,9 +15,6 @@ import {BaseTable} from './BaseTable';
 import {Table} from './Table';
 import {TableRow} from './TableRow';
 import {TableCell} from './TableCell';
-import {TableHeader} from './TableHeader';
-import {TableBody} from './TableBody';
-import {TableFooter} from './TableFooter';
 import {
   proportional,
   pixel,
@@ -232,34 +229,6 @@ describe('BaseTable', () => {
     expect(headers[2]).toHaveTextContent('Email');
   });
 
-  it('renders every column header with scope="col"', () => {
-    render(<BaseTable data={users} columns={columns} />);
-    const headers = screen.getAllByRole('columnheader');
-    expect(headers).toHaveLength(3);
-    for (const header of headers) {
-      expect(header).toHaveAttribute('scope', 'col');
-    }
-  });
-
-  it('lets a consumer override scope via header html props', () => {
-    // A `<th scope="row">` maps to the `rowheader` role, so query the DOM
-    // directly to assert the attribute regardless of the resolved ARIA role.
-    const plugin: TablePlugin<User> = {
-      transformHeaderCell: (props, column) =>
-        column.key === 'name'
-          ? {...props, htmlProps: {...props.htmlProps, scope: 'row'}}
-          : props,
-    };
-    const {container} = render(
-      <BaseTable data={users} columns={columns} plugins={[plugin]} />,
-    );
-    const headerCells = container.querySelectorAll('thead th');
-    // columns fixture order: name, age, email — plugin overrides name → 'row'
-    expect(headerCells[0]).toHaveAttribute('scope', 'row');
-    expect(headerCells[1]).toHaveAttribute('scope', 'col');
-    expect(headerCells[2]).toHaveAttribute('scope', 'col');
-  });
-
   it('renders data cells', () => {
     render(<BaseTable data={users} columns={columns} />);
     const cells = screen.getAllByRole('cell');
@@ -648,29 +617,6 @@ describe('BaseTable', () => {
 // =============================================================================
 
 describe('Table', () => {
-  it('clears a cell when the field is removed from the row object (#3595)', () => {
-    const cols: TableColumn<Record<string, unknown>>[] = [
-      {key: 'name', header: 'Name'},
-      {key: 'status', header: 'Status'},
-    ];
-    const {rerender} = render(
-      <Table
-        data={[{id: '1', name: 'Alice', status: 'active'}]}
-        columns={cols}
-        idKey="id"
-      />,
-    );
-    expect(screen.getByText('active')).toBeInTheDocument();
-
-    // Clearing a field by omitting it (optimistic update / server response)
-    // must re-render the row — the memo previously only compared the keys of
-    // the NEW item, so the deleted field's stale value kept rendering.
-    rerender(
-      <Table data={[{id: '1', name: 'Alice'}]} columns={cols} idKey="id" />,
-    );
-    expect(screen.queryByText('active')).not.toBeInTheDocument();
-  });
-
   it('renders a table with correct structure', () => {
     render(<Table data={users} columns={columns} />);
     expect(screen.getByRole('table')).toBeInTheDocument();
@@ -1286,37 +1232,4 @@ describe('emptyState', () => {
     expect(screen.getByText('Name')).toBeInTheDocument();
     expect(screen.getByText('Age')).toBeInTheDocument();
   });
-
-  describe('table section rest forwarding', () => {
-    it('forwards data-testid and id to the tbody, thead, and tfoot', () => {
-      const {container} = render(
-        <table>
-          <TableHeader data-testid="thead" id="head-1">
-            <tr>
-              <th>H</th>
-            </tr>
-          </TableHeader>
-          <TableBody data-testid="tbody" id="body-1">
-            <tr>
-              <td>B</td>
-            </tr>
-          </TableBody>
-          <TableFooter data-testid="tfoot" id="foot-1">
-            <tr>
-              <td>F</td>
-            </tr>
-          </TableFooter>
-        </table>,
-      );
-      const thead = container.querySelector('thead')!;
-      const tbody = container.querySelector('tbody')!;
-      const tfoot = container.querySelector('tfoot')!;
-      expect(thead).toHaveAttribute('data-testid', 'thead');
-      expect(thead).toHaveAttribute('id', 'head-1');
-      expect(tbody).toHaveAttribute('data-testid', 'tbody');
-      expect(tbody).toHaveAttribute('id', 'body-1');
-      expect(tfoot).toHaveAttribute('data-testid', 'tfoot');
-      expect(tfoot).toHaveAttribute('id', 'foot-1');
-    });
-  });
 });

package/src/Table/TableBody.tsx

@@ -13,24 +13,11 @@ export interface TableBodyProps extends BaseProps<HTMLTableSectionElement> {
   children: ReactNode;
 }
 
-export function TableBody({
-  ref,
-  children,
-  xstyle,
-  className,
-  style,
-  ...rest
-}: TableBodyProps) {
+export function TableBody({ref, children, xstyle}: TableBodyProps) {
   return (
     <tbody
       ref={ref}
-      {...mergeProps(
-        themeProps('table-body'),
-        stylex.props(xstyle),
-        className,
-        style,
-      )}
-      {...rest}>
+      {...mergeProps(themeProps('table-body'), stylex.props(xstyle))}>
       {children}
     </tbody>
   );