@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

package/src/SegmentedControl/SegmentedControl.test.tsx

@@ -259,56 +259,6 @@ describe('SegmentedControl', () => {
 });
 
 describe('SegmentedControl keyboard navigation', () => {
-  describe('tab-through is a pure focus move (#3597)', () => {
-    it('does not fire onChange when tabbing in with an unmatched value', async () => {
-      const user = userEvent.setup();
-      const onChange = vi.fn();
-      render(
-        <>
-          <button type="button">before</button>
-          <SegmentedControl label="View" value="archived" onChange={onChange}>
-            <SegmentedControlItem value="grid" label="Grid" />
-            <SegmentedControlItem value="list" label="List" />
-          </SegmentedControl>
-        </>,
-      );
-      screen.getByText('before').focus();
-      await user.tab();
-      expect(onChange).not.toHaveBeenCalled();
-    });
-
-    it('does not fire onChange when tabbing in while the selected item is disabled', async () => {
-      const user = userEvent.setup();
-      const onChange = vi.fn();
-      render(
-        <>
-          <button type="button">before</button>
-          <SegmentedControl label="View" value="list" onChange={onChange}>
-            <SegmentedControlItem value="grid" label="Grid" />
-            <SegmentedControlItem value="list" label="List" isDisabled />
-          </SegmentedControl>
-        </>,
-      );
-      screen.getByText('before').focus();
-      await user.tab();
-      expect(onChange).not.toHaveBeenCalled();
-    });
-
-    it('still selects on arrow-key navigation within the group', async () => {
-      const user = userEvent.setup();
-      const onChange = vi.fn();
-      render(
-        <SegmentedControl label="View" value="grid" onChange={onChange}>
-          <SegmentedControlItem value="grid" label="Grid" />
-          <SegmentedControlItem value="list" label="List" />
-        </SegmentedControl>,
-      );
-      screen.getByRole('radio', {name: 'Grid'}).focus();
-      await user.keyboard('{ArrowRight}');
-      expect(onChange).toHaveBeenCalledWith('list');
-    });
-  });
-
   it('navigates with ArrowRight and selects', async () => {
     const user = userEvent.setup();
     const handleChange = vi.fn();
@@ -638,145 +588,3 @@ describe('SegmentedControl disabled state', () => {
     });
   });
 });
-
-describe('SegmentedControl data-testid forwarding', () => {
-  it('forwards data-testid to the radiogroup', () => {
-    render(
-      <SegmentedControl
-        value="grid"
-        onChange={() => {}}
-        label="View mode"
-        data-testid="view-toggle">
-        <SegmentedControlItem value="grid" label="Grid" />
-        <SegmentedControlItem value="list" label="List" />
-      </SegmentedControl>,
-    );
-
-    expect(screen.getByTestId('view-toggle')).toBe(
-      screen.getByRole('radiogroup'),
-    );
-  });
-
-  it('forwards data-testid to an individual item button', () => {
-    render(
-      <SegmentedControl value="grid" onChange={() => {}} label="View mode">
-        <SegmentedControlItem
-          value="grid"
-          label="Grid"
-          data-testid="opt-grid"
-        />
-        <SegmentedControlItem
-          value="list"
-          label="List"
-          data-testid="opt-list"
-        />
-      </SegmentedControl>,
-    );
-
-    expect(screen.getByTestId('opt-grid')).toBe(
-      screen.getByRole('radio', {name: 'Grid'}),
-    );
-    expect(screen.getByTestId('opt-list')).toBe(
-      screen.getByRole('radio', {name: 'List'}),
-    );
-  });
-
-  it('does not let a forwarded prop override the computed role', () => {
-    render(
-      // A consumer-supplied role must not clobber the component's own
-      // radiogroup role (the computed role is applied after {...rest}).
-      <SegmentedControl
-        value="grid"
-        onChange={() => {}}
-        label="View mode"
-        role="tablist"
-        data-testid="view-toggle">
-        <SegmentedControlItem value="grid" label="Grid" />
-      </SegmentedControl>,
-    );
-
-    expect(screen.getByTestId('view-toggle')).toHaveAttribute(
-      'role',
-      'radiogroup',
-    );
-  });
-});
-
-describe('SegmentedControlItem onClick composition', () => {
-  it('calls a consumer onClick in addition to selecting the item', () => {
-    const onChange = vi.fn();
-    const onClick = vi.fn();
-    render(
-      <SegmentedControl value="grid" onChange={onChange} label="View mode">
-        <SegmentedControlItem value="list" label="List" onClick={onClick} />
-      </SegmentedControl>,
-    );
-
-    fireEvent.click(screen.getByRole('radio', {name: 'List'}));
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith('list');
-  });
-
-  it('lets a consumer onClick opt out of selection via preventDefault', () => {
-    const onChange = vi.fn();
-    render(
-      <SegmentedControl value="grid" onChange={onChange} label="View mode">
-        <SegmentedControlItem
-          value="list"
-          label="List"
-          onClick={e => e.preventDefault()}
-        />
-      </SegmentedControl>,
-    );
-
-    fireEvent.click(screen.getByRole('radio', {name: 'List'}));
-
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});
-
-describe('SegmentedControl container handler forwarding', () => {
-  it('forwards a consumer onKeyDown while keeping arrow-key navigation', async () => {
-    const user = userEvent.setup();
-    const onKeyDown = vi.fn();
-    const onChange = vi.fn();
-    render(
-      <SegmentedControl
-        value="grid"
-        onChange={onChange}
-        label="View mode"
-        onKeyDown={onKeyDown}>
-        <SegmentedControlItem value="grid" label="Grid" />
-        <SegmentedControlItem value="list" label="List" />
-      </SegmentedControl>,
-    );
-
-    screen.getByRole('radio', {name: 'Grid'}).focus();
-    await user.keyboard('{ArrowRight}');
-
-    expect(onKeyDown).toHaveBeenCalled();
-    // Built-in navigation still ran.
-    expect(onChange).toHaveBeenCalledWith('list');
-  });
-
-  it('lets a consumer onKeyDown opt out of built-in navigation via preventDefault', async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    render(
-      <SegmentedControl
-        value="grid"
-        onChange={onChange}
-        label="View mode"
-        onKeyDown={e => e.preventDefault()}>
-        <SegmentedControlItem value="grid" label="Grid" />
-        <SegmentedControlItem value="list" label="List" />
-      </SegmentedControl>,
-    );
-
-    screen.getByRole('radio', {name: 'Grid'}).focus();
-    await user.keyboard('{ArrowRight}');
-
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});

package/src/SegmentedControl/SegmentedControl.tsx

@@ -26,7 +26,7 @@ import type {
   SegmentedControlSize,
   SegmentedControlLayout,
 } from './SegmentedControlContext';
-import {mergeProps, mergeRefs, composeEventHandlers} from '../utils';
+import {mergeProps, mergeRefs} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
@@ -152,10 +152,6 @@ export function SegmentedControl({
   xstyle,
   className,
   style,
-  onKeyDown: onKeyDownProp,
-  onFocus: onFocusProp,
-  onBlur: onBlurProp,
-  ...rest
 }: SegmentedControlProps) {
   const size = useSize(sizeProp, 'md');
 
@@ -192,14 +188,10 @@ export function SegmentedControl({
 
   const handleContainerKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>) => {
-      onKeyDownProp?.(e);
-      if (e.defaultPrevented) {
-        return;
-      }
       hint.onKeyDown(e);
       handleKeyDown(e);
     },
-    [onKeyDownProp, hint, handleKeyDown],
+    [hint, handleKeyDown],
   );
 
   // Selection-follows-focus (APG radiogroup): useListFocus only *moves* focus,
@@ -210,25 +202,12 @@ export function SegmentedControl({
   // and the already-selected value is skipped so an initial Tab-in (or a click
   // on the current segment) is a no-op, matching click behavior.
   const handleContainerFocus = useCallback(
-    (e: React.FocusEvent<HTMLDivElement>) => {
-      onFocusProp?.(e);
-      if (e.defaultPrevented) {
-        return;
-      }
+    (e: React.FocusEvent) => {
       hint.onFocus(e);
       handleFocus(e);
       if (isDisabled) {
         return;
       }
-      // Only select when focus moved WITHIN the group (arrow/Home/End — APG
-      // selection-follows-focus). When focus is entering from outside, Tab
-      // must stay a pure focus move: with an unmatched or disabled-selected
-      // value the roving tab stop falls back to the first enabled radio, and
-      // selecting it here would rewrite the form value on mere traversal.
-      // Clicks are unaffected: the item's own handleClick selects.
-      if (!e.currentTarget.contains(e.relatedTarget)) {
-        return;
-      }
       const focused = (e.target as HTMLElement | null)?.closest<HTMLElement>(
         '[role="radio"][data-value]',
       );
@@ -240,7 +219,7 @@ export function SegmentedControl({
         onChange(nextValue);
       }
     },
-    [onFocusProp, hint, handleFocus, isDisabled, onChange, value],
+    [hint, handleFocus, isDisabled, onChange, value],
   );
 
   const contextValue = useMemo(
@@ -259,7 +238,6 @@ export function SegmentedControl({
     <SegmentedControlContext value={contextValue}>
       <div
         ref={mergeRefs(ref, listRef, disabledMessageTooltip.ref)}
-        {...rest}
         role="radiogroup"
         aria-label={label}
         aria-disabled={isDisabled || undefined}
@@ -268,7 +246,7 @@ export function SegmentedControl({
         }
         onKeyDown={handleContainerKeyDown}
         onFocus={handleContainerFocus}
-        onBlur={composeEventHandlers(onBlurProp, hint.onBlur)}
+        onBlur={hint.onBlur}
         {...mergeProps(
           themeProps('segmented-control', {size}),
           stylex.props(

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -15,7 +15,7 @@
  * - /packages/cli/templates/blocks/components/SegmentedControl/ (showcase blocks)
  */
 
-import React, {type ReactNode} from 'react';
+import React, {useCallback, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
@@ -29,7 +29,7 @@ import {
 } from '../theme/tokens.stylex';
 import {useSegmentedControlContext} from './SegmentedControlContext';
 import type {SegmentedControlSize} from './SegmentedControlContext';
-import {mergeProps, composeEventHandlers} from '../utils';
+import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 
@@ -168,8 +168,6 @@ export function SegmentedControlItem({
   isLabelHidden = false,
   icon,
   isDisabled = false,
-  onClick: onClickProp,
-  ...rest
 }: SegmentedControlItemProps) {
   const ctx = useSegmentedControlContext();
 
@@ -184,13 +182,11 @@ export function SegmentedControlItem({
   const size: SegmentedControlSize = ctx.size;
   const isFill = ctx.layout === 'fill';
 
-  // Consumer-first: a consumer onClick can call preventDefault() to opt out of
-  // selection; otherwise selection proceeds when enabled and not selected.
-  const handleClick = composeEventHandlers(onClickProp, () => {
+  const handleClick = useCallback(() => {
     if (!isItemDisabled && !isSelected) {
       ctx.onChange(value);
     }
-  });
+  }, [ctx, value, isItemDisabled, isSelected]);
 
   const iconElement = icon ? (
     <span {...stylex.props(styles.icon, iconSizeStyles[size])}>{icon}</span>
@@ -199,7 +195,6 @@ export function SegmentedControlItem({
   return (
     <button
       ref={ref}
-      {...rest}
       type="button"
       role="radio"
       aria-checked={isSelected}

package/src/SelectableCard/SelectableCard.doc.mjs

@@ -34,7 +34,7 @@ export const docs = {
   ],
   theming: {
     container: true,
-    targets: [{className: 'astryx-selectable-card', visualProps: ['selected', 'variant']}],
+    targets: [{className: 'astryx-selectable-card', visualProps: ['selected']}],
   },
   playground: {
     defaults: {

package/src/Selector/Selector.test.tsx

@@ -186,33 +186,7 @@ describe('Selector', () => {
       .getByRole('listbox', {hidden: true})
       .closest('[popover]');
     expect(popover?.getAttribute('style')).toContain(
-      'position-area: self-block-start span-self-inline-end',
-    );
-  });
-
-  it('emits the direction-independent logical mapping under an RTL ancestor (#3389)', async () => {
-    // The self-* position-area keywords resolve against the popover's own
-    // inherited direction in the browser, so RTL emits the same string as
-    // LTR and the mirroring is pure CSS — jsdom can only assert the string.
-    const user = userEvent.setup();
-    render(
-      <div style={{direction: 'rtl'}}>
-        <Selector
-          label="Fruit"
-          options={OPTIONS}
-          value="Banana"
-          onChange={() => {}}
-        />
-      </div>,
-    );
-
-    await user.click(screen.getByRole('combobox'));
-
-    const popover = screen
-      .getByRole('listbox', {hidden: true})
-      .closest('[popover]');
-    expect(popover?.getAttribute('style')).toContain(
-      'position-area: self-block-end span-self-inline-end',
+      'position-area: top span-right',
     );
   });
 

package/src/SideNav/SideNav.doc.mjs

@@ -21,7 +21,7 @@ export const docs = {
     targets: [
       {className: 'astryx-side-nav', visualProps: ['mode']},
       {className: 'astryx-side-nav-heading'},
-      {className: 'astryx-side-nav-item', visualProps: ['size'], states: ['selected']},
+      {className: 'astryx-side-nav-item'},
       {className: 'astryx-side-nav-section'},
     ],
   },
@@ -102,12 +102,6 @@ export const docs = {
       description: 'Enables collapse behavior. true for uncontrolled with default toggle button, or an object for controlled mode and advanced config (defaultIsCollapsed, isCollapsed + onCollapsedChange, hasButton, buttonLabel).',
       default: 'false',
     },
-    {
-      name: 'resizable',
-      type: 'boolean | { defaultWidth?: number; minWidth?: number; maxWidth?: number; autoSaveId?: string; onWidthChange?: (width: number) => void }',
-      description: 'Enables a resize handle at the inline-end edge. true for defaults (260px initial, 180-480px range), or a ResizableConfig object (defaultWidth, minWidth, maxWidth, autoSaveId for localStorage persistence, onWidthChange). The handle is hidden while collapsed.',
-      default: 'false',
-    },
     {
       name: 'handleRef',
       type: 'Ref<SideNavImperativeCollapseHandle>',

package/src/SideNav/SideNav.test.tsx

@@ -162,61 +162,6 @@ describe('SideNav', () => {
       screen.getByRole('button', {name: 'Expand sidebar'}),
     ).toBeInTheDocument();
   });
-
-  it('does not render an empty footer container when collapsible.hasButton is false', () => {
-    render(
-      <SideNav data-testid="nav" collapsible={{hasButton: false}}>
-        Content
-      </SideNav>,
-    );
-
-    // The built-in collapse button is opted out (consumers render their own
-    // SideNavCollapseButton in the header), so it must not appear...
-    expect(
-      screen.queryByRole('button', {name: 'Collapse sidebar'}),
-    ).not.toBeInTheDocument();
-
-    // ...and no empty sticky-bottom container should be left behind. With no
-    // footer/footerIcons and no built-in button, the scrollable content region
-    // is the nav's only child.
-    const nav = screen.getByTestId('nav');
-    expect(nav.children).toHaveLength(1);
-  });
-
-  it('fires a consumer onClick on the collapse button in addition to toggling', async () => {
-    const user = userEvent.setup();
-    const onClick = vi.fn();
-
-    function Example() {
-      const [isCollapsed, setIsCollapsed] = useState(false);
-      const handleRef = useRef<SideNavImperativeCollapseHandle>(null);
-      return (
-        <>
-          <SideNavCollapseButton handleRef={handleRef} onClick={onClick} />
-          <SideNav
-            handleRef={handleRef}
-            collapsible={{
-              isCollapsed,
-              onCollapsedChange: setIsCollapsed,
-              hasButton: false,
-            }}>
-            <SideNavSection title="Main">
-              <SideNavItem label="Dashboard" icon={StubIcon} />
-            </SideNavSection>
-          </SideNav>
-        </>
-      );
-    }
-
-    render(<Example />);
-    await user.click(screen.getByRole('button', {name: 'Collapse sidebar'}));
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-    // Toggle still ran: the label flipped to "Expand sidebar".
-    expect(
-      screen.getByRole('button', {name: 'Expand sidebar'}),
-    ).toBeInTheDocument();
-  });
 });
 
 // =============================================================================
@@ -789,17 +734,6 @@ describe('SideNavSection', () => {
     const group = screen.getByRole('group');
     expect(group.style.marginTop).toBe('16px');
   });
-
-  it('forwards arbitrary pass-through attributes (id, aria-*) to root element', () => {
-    render(
-      <SideNavSection title="Main" id="section-1" aria-describedby="hint">
-        <SideNavItem label="Dashboard" />
-      </SideNavSection>,
-    );
-    const group = screen.getByRole('group');
-    expect(group).toHaveAttribute('id', 'section-1');
-    expect(group).toHaveAttribute('aria-describedby', 'hint');
-  });
 });
 
 // =============================================================================

package/src/SideNav/SideNav.tsx

@@ -490,10 +490,6 @@ export function SideNav({
   // =========================================================================
   const hasStickyTop = !!(header || topContent);
   const hasStickyBottom = !!(footer || footerIcons);
-  // The built-in collapse button only renders when collapse is enabled and it
-  // hasn't been opted out via `collapsible.hasButton: false` (e.g. when the
-  // consumer places a SideNavCollapseButton in the header instead).
-  const showCollapseButton = isCollapsible && hasCollapseButton;
 
   // When resizable, override the nav width via inline style
   const resizableNavStyle: React.CSSProperties | undefined = isResizable
@@ -536,7 +532,7 @@ export function SideNav({
         )}>
         {children}
       </div>
-      {(hasStickyBottom || showCollapseButton) && (
+      {(hasStickyBottom || isCollapsible) && (
         <div
           {...stylex.props(
             styles.stickyBottom,
@@ -548,7 +544,7 @@ export function SideNav({
               styles.footerRow,
               collapsed && styles.footerRowCollapsed,
             )}>
-            {showCollapseButton && <SideNavCollapseButton />}
+            {isCollapsible && hasCollapseButton && <SideNavCollapseButton />}
             {footerIcons}
           </div>
         </div>

package/src/SideNav/SideNavCollapseButton.tsx

@@ -23,7 +23,6 @@ import {durationVars, easeVars} from '../theme/tokens.stylex';
 import {getIcon} from '../Icon/globalIconRegistry';
 import {Button} from '../Button';
 import type {BaseProps} from '../BaseProps';
-import {composeEventHandlers} from '../utils';
 import {
   useSideNavCollapse,
   type SideNavCollapseState,
@@ -102,7 +101,6 @@ export function SideNavCollapseButton({
   handleRef,
   label,
   children,
-  onClick: onClickProp,
   ...props
 }: SideNavCollapseButtonProps) {
   const {isCollapsed, toggle, isCollapsible} =
@@ -121,7 +119,7 @@ export function SideNavCollapseButton({
       label={label ?? (isCollapsed ? 'Expand sidebar' : 'Collapse sidebar')}
       variant="ghost"
       {...props}
-      onClick={composeEventHandlers(onClickProp, toggle)}
+      onClick={toggle}
       icon={
         children ?? (
           <span
@@ -142,7 +140,8 @@ SideNavCollapseButton.displayName = 'SideNavCollapseButton';
 
 function useSideNavCollapseState(
   handleRef:
-    React.RefObject<SideNavImperativeCollapseHandle | null> | undefined,
+    | React.RefObject<SideNavImperativeCollapseHandle | null>
+    | undefined,
 ): SideNavCollapseState {
   const contextCollapseState = useSideNavCollapse();
 

package/src/SideNav/SideNavSection.tsx

@@ -145,7 +145,6 @@ export function SideNavSection({
   className,
   style,
   'data-testid': testId,
-  ...rest
 }: SideNavSectionProps) {
   const {isCollapsed} = useSideNavCollapse();
   const id = useId();
@@ -184,16 +183,15 @@ export function SideNavSection({
   return (
     <div
       ref={ref}
+      role="group"
+      aria-labelledby={titleId}
+      data-testid={testId}
       {...mergeProps(
         themeProps('side-nav-section'),
         stylex.props(styles.root, xstyle),
         className,
         style,
-      )}
-      {...rest}
-      role="group"
-      aria-labelledby={titleId}
-      data-testid={testId}>
+      )}>
       <div
         {...mergeProps(stylex.props(styles.header), {
           style: shouldHideHeader ? visuallyHiddenStyle : undefined,

package/src/Switch/Switch.doc.mjs

@@ -124,10 +124,10 @@ export const docs = {
     },
     {
       name: 'labelSpacing',
-      type: "'hug' | 'spread'",
+      type: "'default' | 'spread'",
       description:
-        'Spacing behavior between label and switch. "hug" places them next to each other; "spread" pushes them to opposite ends of the container (full width). "default" is a deprecated alias for "hug".',
-      default: "'hug'",
+        'Spacing behavior between label and switch. "spread" pushes them to opposite ends of the container (full width).',
+      default: "'default'",
     },
   ],
   theming: {
@@ -270,10 +270,10 @@ export const docsZh = {
     },
     {
       name: 'labelSpacing',
-      type: "'hug' | 'spread'",
+      type: "'default' | 'spread'",
       description:
-        '标签和开关之间的间距行为。"hug" 将它们并排放置；"spread" 将它们推到容器的两端（全宽）。"default" 是 "hug" 的已弃用别名。',
-      default: "'hug'",
+        '标签和开关之间的间距行为。"spread" 将它们推到容器的两端（全宽）。',
+      default: "'default'",
     },
   ],
   theming: {
@@ -329,6 +329,6 @@ export const docsDense = {
     labelIcon: 'Icon before label text.',
     labelTooltip: 'Tooltip text in info icon at label end.',
     labelPosition: 'Which side label appears; "start" places before switch.',
-    labelSpacing: 'Spacing behavior; "hug" places next to each other, "spread" pushes to opposite ends (full width). "default" is deprecated alias for "hug".',
+    labelSpacing: 'Spacing behavior; "spread" pushes to opposite ends (full width).',
   },
 };