@astryxdesign/core 0.1.7-canary.fb9c68c → 0.1.7

package/src/DropdownMenu/DropdownMenuRadioItem.tsx

@@ -1,232 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file DropdownMenuRadioItem.tsx
- * @input React, stylex, Item + Icon + DropdownMenu context + tokens from core
- * @output DropdownMenuRadioItem — a single option in a radio group.
- * @position Sub-component; must be used inside a DropdownMenuRadioGroup.
- *
- * A menu item representing one option in a single-select group
- * (role="menuitemradio"). The row owns the role and aria-checked; there is no
- * nested native <input> (per the WAI-ARIA menuitemradio pattern). Selection
- * state + onChange come from DropdownMenuRadioGroupContext. Keyboard nav +
- * Enter/Space activation come from the parent DropdownMenu.
- *
- * The round radio visual (circle + center dot) is decorative (aria-hidden) —
- * the row owns the checked state. Its size is derived from the menu's item size
- * and it swaps to the inline-end of the row on coarse-pointer (touch) devices
- * via CSS `order`. The dot is a shaped element, not an icon (a filled circle
- * has no registry glyph).
- */
-
-import {useCallback, type ReactNode} from 'react';
-import * as stylex from '@stylexjs/stylex';
-import {renderIconSlot, type IconType} from '../Icon';
-import {Item} from '../Item';
-import {useDropdownMenuContext} from './DropdownMenuContext';
-import {
-  colorVars,
-  spacingVars,
-  durationVars,
-  easeVars,
-  borderVars,
-} from '../theme/tokens.stylex';
-import {mergeProps, themeProps} from '../utils';
-import type {BaseProps} from '../BaseProps';
-import {useDropdownMenuRadioGroupContext} from './DropdownMenuContext';
-
-const styles = stylex.create({
-  root: {
-    width: '100%',
-    borderRadius: `max(0px, calc(var(--_dropdown-menu-radius, ${spacingVars['--spacing-2']}) - var(--_dropdown-menu-padding, ${spacingVars['--spacing-1']})))`,
-    color: colorVars['--color-text-primary'],
-    backgroundColor: {
-      default: 'transparent',
-      ':focus': colorVars['--color-overlay-hover'],
-      ':hover': colorVars['--color-overlay-hover'],
-    },
-    cursor: 'pointer',
-    outline: 'none',
-  },
-  disabled: {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-  },
-  // Rendered in Item's `marker` slot as a raw flex child. On touch it moves to
-  // the inline-end of the row via `order`.
-  circle: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    boxSizing: 'border-box',
-    borderWidth: borderVars['--border-width'],
-    borderStyle: 'solid',
-    borderRadius: '50%',
-    transitionProperty: 'background-color, border-color',
-    transitionDuration: {
-      default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
-    },
-    transitionTimingFunction: easeVars['--ease-standard'],
-    order: {
-      default: 0,
-      '@media (pointer: coarse)': 1,
-    },
-    marginInlineStart: {
-      default: 0,
-      '@media (pointer: coarse)': 'auto',
-    },
-  },
-  unchecked: {
-    borderColor: colorVars['--color-border-emphasized'],
-    backgroundColor: colorVars['--color-background-surface'],
-  },
-  checked: {
-    borderColor: colorVars['--color-accent'],
-    backgroundColor: colorVars['--color-accent'],
-  },
-  dot: {
-    borderRadius: '50%',
-    backgroundColor: colorVars['--color-on-accent'],
-  },
-});
-
-const circleSizeStyles = stylex.create({
-  sm: {width: 18, height: 18},
-  md: {width: 22, height: 22},
-});
-
-const dotSizeStyles = stylex.create({
-  sm: {width: 6, height: 6},
-  md: {width: 8, height: 8},
-});
-
-export interface DropdownMenuRadioItemProps extends Omit<
-  BaseProps,
-  'role' | 'aria-checked' | 'tabIndex'
-> {
-  /**
-   * The value this item represents within its group. The group's `value`
-   * matches against this to determine the checked state.
-   */
-  value: string;
-  /**
-   * Primary label text identifying the option.
-   */
-  label: ReactNode;
-  /**
-   * Secondary description text displayed below the label.
-   */
-  description?: ReactNode;
-  /**
-   * Icon to display before the label. Accepts a semantic icon name (see
-   * `npx astryx docs icons`) or a rendered node.
-   */
-  icon?: ReactNode | IconType;
-  /**
-   * Whether this individual radio item is disabled. Disabled items stay
-   * focusable (via `aria-disabled`) so they remain discoverable by keyboard
-   * and assistive technology, but selection is blocked.
-   * @default false
-   */
-  isDisabled?: boolean;
-  /**
-   * Content to render after the label and description, such as a badge or
-   * metadata.
-   */
-  endContent?: ReactNode;
-}
-
-/**
- * A single option in a DropdownMenuRadioGroup (role="menuitemradio").
- *
- * @example
- * ```
- * <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
- *   <DropdownMenuRadioItem value="newest" label="Newest" />
- *   <DropdownMenuRadioItem value="oldest" label="Oldest" icon="clock" />
- * </DropdownMenuRadioGroup>
- * ```
- */
-export function DropdownMenuRadioItem({
-  value,
-  label,
-  description,
-  icon,
-  isDisabled = false,
-  endContent,
-  xstyle,
-  className,
-  style,
-  ...rest
-}: DropdownMenuRadioItemProps) {
-  const menuCtx = useDropdownMenuContext();
-  const groupCtx = useDropdownMenuRadioGroupContext();
-  if (!groupCtx) {
-    throw new Error(
-      'DropdownMenuRadioItem must be used within a DropdownMenuRadioGroup',
-    );
-  }
-  const menuSize = menuCtx?.menuSize ?? 'md';
-  const controlSize = menuSize === 'sm' ? 'sm' : 'md';
-  const isChecked = groupCtx.value === value;
-
-  const handleClick = useCallback(() => {
-    if (isDisabled) {
-      return;
-    }
-    groupCtx.onChange(value);
-    if (groupCtx.hasCloseOnSelect) {
-      menuCtx?.closeMenu();
-    }
-  }, [isDisabled, groupCtx, value, menuCtx]);
-
-  return (
-    <Item
-      {...rest}
-      role="menuitemradio"
-      aria-checked={isChecked}
-      tabIndex={isDisabled ? undefined : -1}
-      marker={
-        <span
-          aria-hidden="true"
-          {...mergeProps(
-            themeProps('dropdown-menu-radio', {
-              size: controlSize,
-              checked: isChecked ? 'checked' : null,
-              disabled: isDisabled ? 'disabled' : null,
-            }),
-            stylex.props(
-              styles.circle,
-              circleSizeStyles[controlSize],
-              isChecked ? styles.checked : styles.unchecked,
-            ),
-          )}>
-          {isChecked && (
-            <span {...stylex.props(styles.dot, dotSizeStyles[controlSize])} />
-          )}
-        </span>
-      }
-      startContent={
-        icon
-          ? renderIconSlot(icon, {size: 'sm', color: 'secondary'})
-          : undefined
-      }
-      label={label}
-      description={description}
-      endContent={endContent}
-      onClick={handleClick}
-      isDisabled={isDisabled}
-      xstyle={[styles.root, isDisabled && styles.disabled, xstyle]}
-      {...mergeProps(themeProps('dropdown-menu-item', {size: menuSize}), {
-        className,
-        style,
-      })}
-    />
-  );
-}
-
-DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';

package/src/DropdownMenu/DropdownMenuSelectable.test.tsx

@@ -1,163 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file DropdownMenuSelectable.test.tsx
- * @input vitest, @testing-library/react, DropdownMenu + selectable items
- * @output Unit tests for DropdownMenuCheckboxItem / RadioGroup / RadioItem (#3829)
- */
-
-import {describe, it, expect, vi, beforeEach} from 'vitest';
-import {render, screen} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {DropdownMenu} from './DropdownMenu';
-import {DropdownMenuCheckboxItem} from './DropdownMenuCheckboxItem';
-import {DropdownMenuRadioGroup} from './DropdownMenuRadioGroup';
-import {DropdownMenuRadioItem} from './DropdownMenuRadioItem';
-
-beforeEach(() => {
-  HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
-    this.setAttribute('popover-open', '');
-    const event = new Event('toggle', {bubbles: false});
-    Object.defineProperty(event, 'newState', {value: 'open'});
-    this.dispatchEvent(event);
-  });
-  HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
-    this.removeAttribute('popover-open');
-    const event = new Event('toggle', {bubbles: false});
-    Object.defineProperty(event, 'newState', {value: 'closed'});
-    this.dispatchEvent(event);
-  });
-  const originalMatches = HTMLElement.prototype.matches;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (HTMLElement.prototype as any).matches = function (
-    selector: string,
-  ): boolean {
-    if (selector === ':popover-open') {
-      return this.hasAttribute('popover-open');
-    }
-    return originalMatches.call(this, selector);
-  };
-});
-
-describe('DropdownMenuCheckboxItem', () => {
-  it('renders role menuitemcheckbox and reflects checked state', async () => {
-    const user = userEvent.setup();
-    render(
-      <DropdownMenu button={{label: 'View'}}>
-        <DropdownMenuCheckboxItem label="Show archived" value={true} />
-      </DropdownMenu>,
-    );
-    await user.click(screen.getByRole('button', {name: /View/}));
-    expect(
-      screen.getByRole('menuitemcheckbox', {
-        name: /Show archived/,
-        hidden: true,
-      }),
-    ).toHaveAttribute('aria-checked', 'true');
-  });
-
-  it('calls onChange with the toggled value on click', async () => {
-    const user = userEvent.setup();
-    const onChangeSpy = vi.fn();
-    render(
-      <DropdownMenu button={{label: 'View'}}>
-        <DropdownMenuCheckboxItem
-          label="Show archived"
-          value={false}
-          onChange={onChangeSpy}
-        />
-      </DropdownMenu>,
-    );
-    await user.click(screen.getByRole('button', {name: /View/}));
-    await user.click(
-      screen.getByRole('menuitemcheckbox', {
-        name: /Show archived/,
-        hidden: true,
-      }),
-    );
-    expect(onChangeSpy).toHaveBeenCalledWith(true);
-  });
-
-  it('does not toggle when disabled', async () => {
-    const user = userEvent.setup();
-    const onChangeSpy = vi.fn();
-    render(
-      <DropdownMenu button={{label: 'View'}}>
-        <DropdownMenuCheckboxItem
-          label="Show archived"
-          value={false}
-          onChange={onChangeSpy}
-          isDisabled
-        />
-      </DropdownMenu>,
-    );
-    await user.click(screen.getByRole('button', {name: /View/}));
-    const item = screen.getByRole('menuitemcheckbox', {
-      name: /Show archived/,
-      hidden: true,
-    });
-    expect(item).toHaveAttribute('aria-disabled', 'true');
-    await user.click(item);
-    expect(onChangeSpy).not.toHaveBeenCalled();
-  });
-});
-
-describe('DropdownMenuRadioGroup / RadioItem', () => {
-  it('renders a named group with radios reflecting the selected value', async () => {
-    const user = userEvent.setup();
-    render(
-      <DropdownMenu button={{label: 'Sort'}}>
-        <DropdownMenuRadioGroup
-          value="newest"
-          onChange={() => {}}
-          aria-label="Sort by">
-          <DropdownMenuRadioItem value="newest" label="Newest" />
-          <DropdownMenuRadioItem value="oldest" label="Oldest" />
-        </DropdownMenuRadioGroup>
-      </DropdownMenu>,
-    );
-    await user.click(screen.getByRole('button', {name: /Sort/}));
-    expect(
-      screen.getByRole('menuitemradio', {name: 'Newest', hidden: true}),
-    ).toHaveAttribute('aria-checked', 'true');
-    expect(
-      screen.getByRole('menuitemradio', {name: 'Oldest', hidden: true}),
-    ).toHaveAttribute('aria-checked', 'false');
-    expect(
-      screen.getByRole('group', {name: 'Sort by', hidden: true}),
-    ).toBeInTheDocument();
-  });
-
-  it('calls onChange with the selected value', async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    render(
-      <DropdownMenu button={{label: 'Sort'}}>
-        <DropdownMenuRadioGroup
-          value="newest"
-          onChange={onChange}
-          aria-label="Sort by">
-          <DropdownMenuRadioItem value="newest" label="Newest" />
-          <DropdownMenuRadioItem value="oldest" label="Oldest" />
-        </DropdownMenuRadioGroup>
-      </DropdownMenu>,
-    );
-    await user.click(screen.getByRole('button', {name: /Sort/}));
-    await user.click(
-      screen.getByRole('menuitemradio', {name: 'Oldest', hidden: true}),
-    );
-    expect(onChange).toHaveBeenCalledWith('oldest');
-  });
-
-  it('throws when a radio item is used outside a group', () => {
-    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
-    expect(() =>
-      render(
-        <DropdownMenu button={{label: 'Sort'}}>
-          <DropdownMenuRadioItem value="x" label="X" />
-        </DropdownMenu>,
-      ),
-    ).toThrow(/DropdownMenuRadioGroup/);
-    spy.mockRestore();
-  });
-});

package/src/DropdownMenu/menuItemRoles.ts

@@ -1,22 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file menuItemRoles.ts
- * @output Shared menu-item role set + focus selector.
- * @position Internal; used by DropdownMenu and ContextMenu so their
- *   roving-focus, typeahead, and Enter/Space activation stay in sync.
- *
- * Includes the selectable items (menuitemradio/menuitemcheckbox) alongside
- * plain menuitem so checkbox/radio rows are reachable by arrow keys, typeahead,
- * and Enter/Space — not just role="menuitem".
- */
-
-export const MENU_ITEM_ROLES: ReadonlySet<string> = new Set([
-  'menuitem',
-  'menuitemradio',
-  'menuitemcheckbox',
-]);
-
-export const MENU_ITEM_SELECTOR: string = [...MENU_ITEM_ROLES]
-  .map(role => `[role="${role}"]:not([aria-disabled="true"])`)
-  .join(',');

package/src/Table/plugins/tree/index.ts

@@ -1,12 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-export {useTableTreeData} from './useTableTreeData';
-export type {
-  TableTreeRowMeta,
-  UseTableTreeDataConfig,
-} from './useTableTreeData';
-export {useTableTreeState} from './useTableTreeState';
-export type {
-  UseTableTreeStateConfig,
-  UseTableTreeStateResult,
-} from './useTableTreeState';

package/src/Table/plugins/tree/useTableTreeData-perf.test.tsx

@@ -1,163 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file useTableTreeData-perf.test.tsx
- * @input Table, useTableTreeData, useTableTreeState, React testing utilities
- * @output Performance tests for tree plugin render behavior
- * @position Test file; validates toggle render efficiency and DOM cost
- *
- * The tree plugin uses an external store so a toggle re-renders only the
- * affected cells — not the whole table body. Note: expanding inserts rows,
- * which shifts the rowIndex of every row *after* the insertion point (the
- * row memo comparator includes rowIndex by design), so the guarantee is
- * scoped to rows before the toggled row.
- */
-
-import {describe, it, expect} from 'vitest';
-import {render, screen, act} from '@testing-library/react';
-import {useMemo} from 'react';
-import userEvent from '@testing-library/user-event';
-import {Table} from '../../Table';
-import type {TableColumn} from '../../types';
-import {useTableTreeData} from './useTableTreeData';
-import {useTableTreeState} from './useTableTreeState';
-
-interface TreeRow extends Record<string, unknown> {
-  id: string;
-  name: string;
-  children?: TreeRow[];
-}
-
-/** 5 roots; the last root has 2 children. */
-const roots: TreeRow[] = [
-  ...Array.from({length: 4}, (_, i) => ({
-    id: `root-${i}`,
-    name: `Root ${i}`,
-  })),
-  {
-    id: 'root-4',
-    name: 'Root 4',
-    children: [
-      {id: 'child-0', name: 'Child 0'},
-      {id: 'child-1', name: 'Child 1'},
-    ],
-  },
-];
-
-function TreeRenderCountTable({
-  renderCounts,
-}: {
-  renderCounts: Record<string, number>;
-}) {
-  const columns = useMemo<TableColumn<TreeRow>[]>(
-    () => [
-      {
-        key: 'name',
-        header: 'Name',
-        renderCell: (item: TreeRow) => {
-          renderCounts[item.id] = (renderCounts[item.id] ?? 0) + 1;
-          return item.name;
-        },
-      },
-    ],
-    [renderCounts],
-  );
-
-  const {visibleData, treeConfig} = useTableTreeState<TreeRow>({
-    data: roots,
-    idKey: 'id',
-  });
-  const tree = useTableTreeData(treeConfig);
-
-  return (
-    <Table data={visibleData} columns={columns} idKey="id" plugins={{tree}} />
-  );
-}
-
-describe('Tree plugin render performance', () => {
-  it('expanding the last root does not re-render preceding rows', async () => {
-    const user = userEvent.setup();
-    const renderCounts: Record<string, number> = {};
-
-    render(<TreeRenderCountTable renderCounts={renderCounts} />);
-
-    const initialCounts = {...renderCounts};
-    expect(Object.keys(initialCounts)).toHaveLength(5);
-
-    await act(async () => {
-      await user.click(screen.getByRole('button', {name: 'Expand row'}));
-    });
-
-    for (let i = 0; i < 4; i++) {
-      expect(renderCounts[`root-${i}`]).toBe(initialCounts[`root-${i}`]);
-    }
-    // The children mounted exactly once.
-    expect(renderCounts['child-0']).toBe(1);
-    expect(renderCounts['child-1']).toBe(1);
-  });
-
-  it('collapsing unmounts the subtree rows entirely', async () => {
-    const user = userEvent.setup();
-    const renderCounts: Record<string, number> = {};
-
-    render(<TreeRenderCountTable renderCounts={renderCounts} />);
-
-    await act(async () => {
-      await user.click(screen.getByRole('button', {name: 'Expand row'}));
-    });
-    expect(screen.getAllByRole('row')).toHaveLength(8); // header + 5 roots + 2 children
-
-    await act(async () => {
-      await user.click(screen.getByRole('button', {name: 'Collapse row'}));
-    });
-    expect(screen.getAllByRole('row')).toHaveLength(6); // header + 5 roots
-  });
-
-  it('adds at most one wrapper, one expander/spacer to the tree column and zero DOM to other columns', () => {
-    const {container} = render(
-      <Table
-        data={
-          [{id: 'a', name: 'a', children: [{id: 'b', name: 'b'}]}] as TreeRow[]
-        }
-        columns={[
-          {key: 'name', header: 'Name'},
-          {key: 'id', header: 'Id'},
-        ]}
-        idKey="id"
-        plugins={{}}
-      />,
-    );
-    const plainSecondCellHTML =
-      container.querySelectorAll('tbody td')[1].innerHTML;
-
-    function DomBudgetTable() {
-      const {visibleData, treeConfig} = useTableTreeState<TreeRow>({
-        data: [{id: 'a', name: 'a', children: [{id: 'b', name: 'b'}]}],
-        idKey: 'id',
-      });
-      const tree = useTableTreeData(treeConfig);
-      return (
-        <Table
-          data={visibleData}
-          columns={[
-            {key: 'name', header: 'Name'},
-            {key: 'id', header: 'Id'},
-          ]}
-          idKey="id"
-          plugins={{tree}}
-        />
-      );
-    }
-    const {container: treeContainer} = render(<DomBudgetTable />);
-    const cells = treeContainer.querySelectorAll('tbody td');
-
-    // Tree column: one flex wrapper containing one expander button + text.
-    const wrapper = cells[0].firstElementChild as HTMLElement;
-    expect(wrapper.tagName).toBe('DIV');
-    expect(wrapper.children).toHaveLength(1);
-    expect(wrapper.querySelector('button')).not.toBeNull();
-
-    // Other columns: byte-identical to the plugin-free render.
-    expect(cells[1].innerHTML).toBe(plainSecondCellHTML);
-  });
-});