@astryxdesign/core 0.4.1 → 0.4.2-canary.356d2f9

package/src/SideNav/SideNavItem.tsx

@@ -4,12 +4,17 @@
 
 /**
  * @file SideNavItem.tsx
- * @input Uses React, ReactNode, StyleX, Icon, IconType
+ * @input Uses React, ReactNode, StyleX, Icon, IconType, useMenuHover
  * @output Exports SideNavItem component and SideNavItemProps
  * @position Core implementation; used inside SideNav children
  *
  * Navigation item with icon, selected state, and nesting.
  *
+ * Collapsed items with children open their submenu flyout through
+ * `useMenuHover`, the shared hover-intent hook (same one `SideNavHeading` and
+ * `TopNavMenu` use). Hover is a progressive enhancement over the popover's
+ * click behavior and is inert on coarse pointers.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/SideNav/SideNav.doc.mjs
  * - /packages/core/src/SideNav/SideNav.test.tsx
@@ -35,17 +40,18 @@ import {
   typeScaleVars,
   durationVars,
   easeVars,
-  borderVars,
   radiusVars,
 } from '../theme/tokens.stylex';
 import {Icon, renderIconSlot, type IconType} from '../Icon';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
 import {usePopover} from '../Popover/usePopover';
+import {useMenuHover} from '../hooks/useMenuHover';
 import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {Tooltip} from '../Tooltip';
 import {navItemStyles, type NavItemSize} from '../NavItem/navItemStyles.stylex';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {
   useSideNavCollapse,
   SideNavCollapseContext,
@@ -91,7 +97,10 @@ const styles = stylex.create({
     display: 'grid',
     gridTemplateRows: '1fr',
     transitionProperty: 'grid-template-rows',
-    transitionDuration: durationVars['--duration-medium'],
+    transitionDuration: {
+      default: durationVars['--duration-medium'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
     transitionTimingFunction: easeVars['--ease-standard'],
   },
   childrenCollapsed: {
@@ -114,7 +123,10 @@ const styles = stylex.create({
     // target, not the glyph size, so keep the glyph on the inherited size.
     fontSize: 'inherit',
     transitionProperty: 'transform',
-    transitionDuration: durationVars['--duration-fast'],
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
     transitionTimingFunction: easeVars['--ease-standard'],
     flexShrink: 0,
   },
@@ -146,10 +158,14 @@ const styles = stylex.create({
   },
   // Primary action element inside the split-action row (link or button).
   // Flex:1 so it fills remaining space, giving a wide click target.
+  // `alignSelf: stretch` makes it fill the row's height too — without it the
+  // element collapses to its line box (20px), under the 24px WCAG 2.5.8
+  // target-size floor even though the row it sits in is 32px tall.
   // Resets both link and button appearance so it blends into the row.
   splitAction: {
     display: 'flex',
     alignItems: 'center',
+    alignSelf: 'stretch',
     gap: spacingVars['--spacing-2'],
     flex: 1,
     minWidth: 0,
@@ -167,16 +183,23 @@ const styles = stylex.create({
     textAlign: 'start',
     cursor: 'pointer',
   },
-  // Popover surface for collapsed items with children
+  // No border and no background: `usePopover` paints the panel this renders
+  // into. Drawing a second surface here put square corners inside its rounded
+  // ones. The radius matches so a theme retargeting `--radius-container`
+  // keeps the two in step.
   popoverSurface: {
-    borderWidth: borderVars['--border-width'],
-    borderStyle: 'solid',
-    borderColor: colorVars['--color-border'],
+    borderRadius: radiusVars['--radius-container'],
     paddingBlock: spacingVars['--spacing-1'],
     paddingInline: spacingVars['--spacing-1'],
-    marginInlineStart: spacingVars['--spacing-1'],
     minWidth: 180,
   },
+  // The gap from the rail belongs on the positioned layer, where
+  // `DropdownMenu` keeps it. On the content div it insets the content instead,
+  // leaving the panel flush against the rail.
+  popoverGap: {
+    marginInlineStart: spacingVars['--spacing-1'],
+    marginInlineEnd: spacingVars['--spacing-1'],
+  },
   popoverHeader: {
     paddingInline: spacingVars['--spacing-2'],
     paddingBlock: spacingVars['--spacing-1'],
@@ -361,6 +384,7 @@ export function SideNavItem({
   'data-testid': testId,
   ref,
   xstyle,
+  ...rest
 }: SideNavItemProps) {
   const t = useTranslator();
   const {isCollapsed} = useSideNavCollapse();
@@ -376,7 +400,7 @@ export function SideNavItem({
     hasLightDismiss: true,
     hasAutoFocus: true,
     hasCloseButton: false,
-    dialogLabel: `${label} submenu`,
+    dialogLabel: t('@astryx.sideNavItem.submenuLabel', {label}),
   });
 
   // Collapse state for items with children
@@ -434,42 +458,22 @@ export function SideNavItem({
     toggleItemCollapse();
   };
 
-  // Hover handlers for collapsed popover (mirrors TopNavMenu pattern)
-  const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const clearPopoverTimeouts = useCallback(() => {
-    if (showTimeoutRef.current) {
-      clearTimeout(showTimeoutRef.current);
-      showTimeoutRef.current = null;
-    }
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current);
-      hideTimeoutRef.current = null;
-    }
-  }, []);
-
-  const schedulePopoverShow = useCallback(() => {
-    clearPopoverTimeouts();
-    showTimeoutRef.current = setTimeout(() => {
-      popover.show({skipAutoFocus: true});
-    }, 150);
-  }, [clearPopoverTimeouts, popover]);
-
-  const schedulePopoverHide = useCallback(() => {
-    clearPopoverTimeouts();
-    hideTimeoutRef.current = setTimeout(() => {
-      popover.hide();
-    }, 200);
-  }, [clearPopoverTimeouts, popover]);
-
-  const handlePopoverMouseEnter = useCallback(() => {
-    schedulePopoverShow();
-  }, [schedulePopoverShow]);
-
-  const handlePopoverMouseLeave = useCallback(() => {
-    schedulePopoverHide();
-  }, [schedulePopoverHide]);
+  // Pointer half only. The hook's `onKeyDown`/`menuRef` drive a `useListFocus`
+  // over `[role="menuitem"]`, and this flyout is a focus-trapped dialog of
+  // links — wiring them would swallow arrow keys rather than navigate with
+  // them. Keyboard stays with `usePopover`'s trap, as in DropdownMenuSubMenu.
+  const {triggerProps: hoverTriggerProps, contentProps: hoverContentProps} =
+    useMenuHover({
+      show: popover.show,
+      hide: popover.hide,
+      isOpen: popover.isOpen,
+      isEnabled: isCollapsed && hasChildren,
+      // Standard popover toggling: the flyout opens beside the rail, not over
+      // the icon, so the click after a hover-open is a deliberate dismissal
+      // rather than the #3121 confirmation the nav menus need.
+      clickGuardMs: 0,
+      ownsFocus: false,
+    });
 
   // In collapsed mode: hide items without icons
   if (isCollapsed && !icon) {
@@ -484,16 +488,21 @@ export function SideNavItem({
       displayIcon &&
       renderIconSlot(displayIcon, {
         size: 'sm',
-        color: isSelected ? 'primary' : isDisabled ? 'disabled' : 'secondary',
+        // `inherit` so a selected row's icon follows the row to HighlightText
+        // under forced colors. Identical to `primary` otherwise: both token
+        // families are emitted from one expression.
+        color: isSelected ? 'inherit' : isDisabled ? 'disabled' : 'secondary',
       });
 
-    // Shared collapsed item styles — used by trigger, link, and button
+    // Shared collapsed item styles — used by trigger, link, and button.
+    // All three render a focusable element, so each draws the shared ring.
     const collapsedItemStyles = mergeProps(
       themeProps('side-nav-item', {
         size,
         selected: isSelected ? 'selected' : null,
+        disabled: isDisabled ? 'disabled' : null,
       }),
-      stylex.props(
+      focusOutlineProps.focusVisible(
         navItemStyles.item,
         navItemStyles[size],
         styles.itemCollapsed,
@@ -511,9 +520,8 @@ export function SideNavItem({
           <button
             ref={mergeRefs(ref, popover.triggerRef)}
             type="button"
-            onClick={popover.toggle}
-            onMouseEnter={handlePopoverMouseEnter}
-            onMouseLeave={handlePopoverMouseLeave}
+            {...rest}
+            {...hoverTriggerProps}
             aria-label={label}
             data-testid={testId}
             {...popover.triggerProps}
@@ -523,15 +531,15 @@ export function SideNavItem({
           {popover.render(
             <div
               {...stylex.props(styles.popoverSurface)}
-              onMouseEnter={handlePopoverMouseEnter}
-              onMouseLeave={handlePopoverMouseLeave}
+              onMouseEnter={hoverContentProps.onMouseEnter}
+              onMouseLeave={hoverContentProps.onMouseLeave}
               onClick={() => popover.hide()}>
               <div {...stylex.props(styles.popoverHeader)}>{label}</div>
               <SideNavCollapseContext value={EXPANDED_COLLAPSE_STATE}>
                 {children}
               </SideNavCollapseContext>
             </div>,
-            {placement: 'end', alignment: 'start'},
+            {placement: 'end', alignment: 'start', xstyle: styles.popoverGap},
           )}
         </div>
       );
@@ -552,6 +560,7 @@ export function SideNavItem({
         as={as}
         isDisabled={isDisabled}
         onClick={handleClick}
+        {...rest}
         {...collapsedAriaProps}
         {...collapsedItemStyles}>
         {collapsedIcon}
@@ -571,7 +580,8 @@ export function SideNavItem({
       {displayIcon &&
         renderIconSlot(displayIcon, {
           size: 'sm',
-          color: isSelected ? 'primary' : isDisabled ? 'disabled' : 'secondary',
+          // `inherit` — see the collapsed path above.
+          color: isSelected ? 'inherit' : isDisabled ? 'disabled' : 'secondary',
         })}
       {!isCollapsed && <span {...stylex.props(styles.label)}>{label}</span>}
       {!isCollapsed && endContent && (
@@ -591,45 +601,47 @@ export function SideNavItem({
     </>
   );
 
-  const navItemStyleProps = mergeProps(
-    themeProps('side-nav-item', {
-      size,
-      selected: isSelected ? 'selected' : null,
-    }),
-    stylex.props(
-      navItemStyles.item,
-      navItemStyles[size],
-      isSelected && navItemStyles.selected,
-      isDisabled && navItemStyles.disabled,
-    ),
-  );
-
-  // ── Split-action path: <div> row with <a> + <button> as siblings ──
-  //
-  // When both collapsible and href are set, we can't nest a <button>
-  // inside an <a>. Instead we use a <div> as the flex row container,
-  // an <a display:contents> for the link (with ::before covering the row),
-  // and a <button> sibling lifted above the overlay via z-index.
+  const itemThemeProps = themeProps('side-nav-item', {
+    size,
+    selected: isSelected ? 'selected' : null,
+    disabled: isDisabled ? 'disabled' : null,
+  });
 
-  // ── Split-action path: primary element + toggle button as siblings ──
-  //
-  // When collapsible and a primary action (href or onClick) are both set,
-  // we render a <div> row with the primary element and chevron toggle as
-  // siblings. This avoids nesting interactive elements (<button> inside <a>).
+  const itemStyleArgs = [
+    navItemStyles.item,
+    navItemStyles[size],
+    isSelected && navItemStyles.selected,
+    isDisabled && navItemStyles.disabled,
+  ] as const;
+
+  // Two shapes of the same row appearance:
+  // - `rowProps` for the split-action path, where the row is a plain <div>
+  //   container and its children take focus (so the ring belongs on them);
+  // - `focusableRowProps` for every other path, where the row element is
+  //   itself the focusable control.
+  const rowProps = mergeProps(itemThemeProps, stylex.props(...itemStyleArgs));
+  const focusableRowProps = mergeProps(
+    itemThemeProps,
+    focusOutlineProps.focusVisible(...itemStyleArgs),
+  );
 
+  // Split-action path: collapsible plus a primary action renders the primary
+  // element and the chevron toggle as siblings in a <div> row, since a
+  // <button> cannot nest inside an <a>.
   let itemElement;
 
   if (hasIndependentToggle) {
     itemElement = (
-      <div data-testid={testId} {...navItemStyleProps}>
+      <div data-testid={testId} {...rowProps}>
         <NavItemElement
           ref={ref}
           href={href}
           as={as}
           isDisabled={isDisabled}
           onClick={handleClick}
+          {...rest}
           aria-current={isSelected ? ('page' as const) : undefined}
-          {...stylex.props(styles.splitAction)}>
+          {...focusOutlineProps.focusVisible(styles.splitAction)}>
           {itemContent}
         </NavItemElement>
         <button
@@ -642,7 +654,7 @@ export function SideNavItem({
           }
           aria-expanded={!isItemCollapsed}
           aria-controls={`${id}-children`}
-          {...stylex.props(styles.expandToggle)}>
+          {...focusOutlineProps.focusVisible(styles.expandToggle)}>
           <Icon
             icon="chevronDown"
             size="lg"
@@ -671,8 +683,9 @@ export function SideNavItem({
         as={as}
         isDisabled={isDisabled}
         onClick={handleClick}
+        {...rest}
         {...ariaProps}
-        {...navItemStyleProps}>
+        {...focusableRowProps}>
         {itemContent}
       </NavItemElement>
     );

package/src/SideNav/SideNavSection.tsx

@@ -29,6 +29,7 @@ import {
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {useSideNavCollapse} from './SideNavCollapseContext';
+import {VisuallyHidden} from '../VisuallyHidden';
 import {themeProps} from '../utils/themeProps';
 // =============================================================================
 // Styles
@@ -167,20 +168,6 @@ export function SideNavSection({
 
   const shouldHideHeader = isHeaderHidden || isCollapsed;
 
-  const visuallyHiddenStyle: React.CSSProperties = shouldHideHeader
-    ? {
-        position: 'absolute',
-        width: 1,
-        height: 1,
-        padding: 0,
-        margin: -1,
-        overflow: 'hidden',
-        clip: 'rect(0, 0, 0, 0)',
-        whiteSpace: 'nowrap',
-        borderWidth: 0,
-      }
-    : {};
-
   return (
     <div
       ref={ref}
@@ -194,12 +181,11 @@ export function SideNavSection({
       role="group"
       aria-labelledby={titleId}
       data-testid={testId}>
-      <div
-        {...mergeProps(stylex.props(styles.header), {
-          style: shouldHideHeader ? visuallyHiddenStyle : undefined,
-        })}>
-        {headerContent}
-      </div>
+      {shouldHideHeader ? (
+        <VisuallyHidden as="div">{headerContent}</VisuallyHidden>
+      ) : (
+        <div {...stylex.props(styles.header)}>{headerContent}</div>
+      )}
       <div {...stylex.props(styles.items)}>{children}</div>
     </div>
   );

package/src/SideNav/index.ts

@@ -29,6 +29,8 @@ export type {SideNavCollapseButtonProps} from './SideNavCollapseButton';
 export {useSideNavCollapse} from './SideNavCollapseContext';
 export type {
   SideNavCollapseState,
+  SideNavCollapsibleConfig,
+  SideNavControlledCollapsible,
   SideNavImperativeCollapseHandle,
 } from './SideNavCollapseContext';
 

package/src/Slider/Slider.test.tsx

@@ -81,8 +81,8 @@ describe('Slider', () => {
   });
 
   it.each([
-    {value: 150, expectedValue: 100, expectedPosition: '100%'},
-    {value: -50, expectedValue: 0, expectedPosition: '0%'},
+    {value: 150, expectedValue: 100, expectedPosition: 'calc(100% - 10px)'},
+    {value: -50, expectedValue: 0, expectedPosition: 'calc(0% + 10px)'},
   ])(
     'clamps a controlled value of $value to $expectedValue',
     ({value, expectedValue, expectedPosition}) => {
@@ -90,11 +90,47 @@ describe('Slider', () => {
       const slider = screen.getByRole('slider');
       expect(slider).toHaveAttribute('aria-valuenow', String(expectedValue));
       // Thumb positions via the logical `inset-inline-start` so it mirrors
-      // under RTL (see RTL Phase 4). In LTR this resolves to the left edge.
+      // under RTL (see RTL Phase 4), offset by half a thumb so the extremes
+      // stay inside the component box.
       expect(slider).toHaveStyle({insetInlineStart: expectedPosition});
     },
   );
 
+  // Regression: #5050 — at min/max the thumb centred on the container edge,
+  // so half of it (10px of a 20px thumb) hung outside the component.
+  it.each([
+    {value: 0, position: 'calc(0% + 10px)'},
+    {value: 50, position: 'calc(50% + 0px)'},
+    {value: 100, position: 'calc(100% - 10px)'},
+  ])(
+    'insets the thumb at value $value so it stays in bounds',
+    ({value, position}) => {
+      render(<Slider label="Volume" value={value} min={0} max={100} />);
+      expect(screen.getByRole('slider')).toHaveStyle({
+        insetInlineStart: position,
+      });
+    },
+  );
+
+  it.each([
+    {value: 0, position: 'calc(0% + 10px)'},
+    {value: 100, position: 'calc(100% - 10px)'},
+  ])(
+    'insets a vertical thumb at value $value so it stays in bounds',
+    ({value, position}) => {
+      render(
+        <Slider
+          label="Volume"
+          value={value}
+          min={0}
+          max={100}
+          orientation="vertical"
+        />,
+      );
+      expect(screen.getByRole('slider')).toHaveStyle({bottom: position});
+    },
+  );
+
   it('range mode sets correct aria values on both thumbs', () => {
     render(
       <Slider
@@ -580,22 +616,23 @@ describe('Slider', () => {
       />,
     );
     const track = screen.getByRole('slider').parentElement!;
-    track.getBoundingClientRect = () =>
-      ({
-        left: 0,
-        top: 0,
-        right: 200,
-        bottom: 20,
-        width: 200,
-        height: 20,
-        x: 0,
-        y: 0,
-        toJSON: () => {},
-      });
+    track.getBoundingClientRect = () => ({
+      left: 0,
+      top: 0,
+      right: 200,
+      bottom: 20,
+      width: 200,
+      height: 20,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    });
 
-    // Click at 25% of the track from the left (x=50 of 200) → value 25 in LTR.
+    // Click at x=50 of a 200px track. The thumb's travel is the track minus
+    // half a thumb at each end (180px from x=10), so the fraction is
+    // (50 - 10) / 180 → value 22.
     fireEvent.pointerDown(track, {clientX: 50, clientY: 10, pointerId: 1});
-    expect(handleChange).toHaveBeenLastCalledWith(25);
+    expect(handleChange).toHaveBeenLastCalledWith(22);
   });
 
   it('mirrors a track click to the RTL value when the track is rtl', () => {
@@ -611,18 +648,17 @@ describe('Slider', () => {
       />,
     );
     const track = screen.getByRole('slider').parentElement!;
-    track.getBoundingClientRect = () =>
-      ({
-        left: 0,
-        top: 0,
-        right: 200,
-        bottom: 20,
-        width: 200,
-        height: 20,
-        x: 0,
-        y: 0,
-        toJSON: () => {},
-      });
+    track.getBoundingClientRect = () => ({
+      left: 0,
+      top: 0,
+      right: 200,
+      bottom: 20,
+      width: 200,
+      height: 20,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    });
 
     // Force the track's computed direction to rtl (isRtlElement reads this).
     const realGetComputedStyle = window.getComputedStyle;
@@ -635,11 +671,11 @@ describe('Slider', () => {
         return realGetComputedStyle(el, pseudo ?? undefined);
       });
 
-    // Same physical click at 25% from the left (x=50). Under RTL the inline
-    // start is the right edge, so fraction = (right - x)/width = 150/200 = 0.75
-    // → value 75 (the mirror of the LTR value 25).
+    // Same physical click at x=50. Under RTL the inline start is the right
+    // edge, so the fraction is (right - 10 - x) / 180 = 140/180 → value 78
+    // (the mirror of the LTR value 22).
     fireEvent.pointerDown(track, {clientX: 50, clientY: 10, pointerId: 1});
-    expect(handleChange).toHaveBeenLastCalledWith(75);
+    expect(handleChange).toHaveBeenLastCalledWith(78);
 
     gcsSpy.mockRestore();
   });