@womp/kookie-ui 0.7.0 → 0.8.1

package/src/components/shell.types.ts

@@ -18,24 +18,38 @@ export type PaneSizePersistence = {
   save?: (size: number) => void | Promise<void>;
 };
 
+/**
+ * Why a pane's open state changed. Since 0.8.0 only a user action is reported:
+ * `toggle` for a Trigger, a handle double-click or a drag past
+ * `collapseThreshold`, and `dismiss` for Escape or a press on the scrim.
+ * `init`, `responsive`, `panel` and `left` are kept in the types for
+ * compatibility and are never sent.
+ */
+export type PaneOpenChangeReason = 'toggle' | 'dismiss' | 'init' | 'responsive';
+
 export interface PaneBaseProps extends React.ComponentPropsWithoutRef<'div'> {
   presentation?: ResponsivePresentation;
   expandedSize?: number;
   minSize?: number;
   maxSize?: number;
-  height?: string | number;
   resizable?: boolean;
   collapsible?: boolean;
+  /** @deprecated Use `onOpenChange`. Still called when a user's toggle or a controlled prop changes whether the pane is shown; never on mount or when the window crosses a breakpoint. */
   onExpand?: () => void;
+  /** @deprecated Use `onOpenChange`. Still called when a user's toggle or a controlled prop changes whether the pane is shown; never on mount or when the window crosses a breakpoint. */
   onCollapse?: () => void;
   onResize?: (size: number) => void;
-  resizer?: React.ReactNode;
   onResizeStart?: (size: number) => void;
   onResizeEnd?: (size: number) => void;
+  /** @deprecated Removed in 1.0. Snap in your own `onSizeChange` and pass `size`. */
   snapPoints?: number[];
+  /** @deprecated Removed in 1.0, with `snapPoints`. */
   snapTolerance?: number;
+  /** @deprecated Removed in 1.0. Close the pane from your own `onResizeEnd`. */
   collapseThreshold?: number;
+  /** @deprecated Removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`. */
   paneId?: string;
+  /** @deprecated Removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`. */
   persistence?: PaneSizePersistence;
 }
 
@@ -49,8 +63,14 @@ export const _BREAKPOINTS = {
 
 export type Breakpoint = 'initial' | keyof typeof _BREAKPOINTS;
 
+/** Every breakpoint, smallest first. The stylesheet's @media blocks follow this order. */
+export const SHELL_BREAKPOINTS: readonly Breakpoint[] = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'];
+
 export type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';
 
+/** The panes a Trigger can drive. `left` is the deprecated name for `rail`. */
+export type PaneName = Exclude<PaneTarget, 'left'>;
+
 /**
  * CSS custom property key type for type-safe style objects.
  * Allows any string prefixed with '--'.

package/src/components/sidebar.tsx

@@ -211,11 +211,12 @@ const SidebarSeparator = React.forwardRef<React.ComponentRef<typeof Separator>,
 ));
 SidebarSeparator.displayName = 'Sidebar.Separator';
 
-// Menu components - reusing dropdown menu structure
+// Menu components - styled like dropdown menus, but semantically a navigation list.
+// No menu/menuitem roles: those promise an application menu, which a list of links is not.
 interface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}
 
 const SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(({ className, ...props }, forwardedRef) => (
-  <ul {...props} ref={forwardedRef} role="menu" className={classNames('rt-SidebarMenu', className)} />
+  <ul {...props} ref={forwardedRef} className={classNames('rt-SidebarMenu', className)} />
 ));
 SidebarMenu.displayName = 'Sidebar.Menu';
 
@@ -282,33 +283,25 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
 
     const Comp = asChild ? Slot : 'button';
 
-    const { onClick } = props;
+    // Enter and Space are left to the native button or link. Arrow keys move between
+    // the visible buttons of the same sidebar, as a convenience on top of Tab.
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent<HTMLButtonElement>) => {
-        switch (event.key) {
-          case 'Enter':
-          case ' ':
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+          const scope = event.currentTarget.closest('.rt-SidebarContent, .rt-SidebarSearchPopover');
+          const buttons = scope
+            ? Array.from(scope.querySelectorAll<HTMLElement>('.rt-SidebarMenuButton')).filter((el) => el.offsetParent !== null)
+            : [];
+          const index = buttons.indexOf(event.currentTarget);
+          const next = buttons[index + (event.key === 'ArrowDown' ? 1 : -1)];
+          if (index !== -1 && next) {
             event.preventDefault();
-            if (onClick) onClick(event as any);
-            break;
-          case 'ArrowDown': {
-            event.preventDefault();
-            // Focus next menu item
-            const nextItem = (event.currentTarget as HTMLElement).nextElementSibling?.querySelector('[role="menuitem"]') as HTMLElement;
-            if (nextItem) nextItem.focus();
-            break;
-          }
-          case 'ArrowUp': {
-            event.preventDefault();
-            // Focus previous menu item
-            const prevItem = (event.currentTarget as HTMLElement).previousElementSibling?.querySelector('[role="menuitem"]') as HTMLElement;
-            if (prevItem) prevItem.focus();
-            break;
+            next.focus();
           }
         }
         onKeyDown?.(event);
       },
-      [onClick, onKeyDown],
+      [onKeyDown],
     );
 
     // Memoize child processing to avoid re-traversal on every render
@@ -361,7 +354,6 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
       <Comp
         {...props}
         ref={forwardedRef}
-        role="menuitem"
         aria-current={isActive ? 'page' : undefined}
         className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', className)}
         data-active={isActive || undefined}
@@ -458,7 +450,6 @@ const SidebarMenuSubTrigger = React.forwardRef<React.ElementRef<typeof Accordion
             {...(props as any)}
             ref={forwardedRef as any}
             type="button"
-            role="menuitem"
             aria-haspopup="menu"
             className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', 'rt-SidebarMenuSubTrigger', className)}
           >
@@ -475,8 +466,6 @@ const SidebarMenuSubTrigger = React.forwardRef<React.ElementRef<typeof Accordion
             {...props}
             ref={forwardedRef}
             asChild={asChild}
-            role="menuitem"
-            aria-haspopup="true"
             className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', 'rt-SidebarMenuSubTrigger', className)}
           >
             {asChild ? (
@@ -554,7 +543,7 @@ const SidebarMenuSubContent = React.forwardRef<React.ElementRef<typeof Accordion
 });
 SidebarMenuSubContent.displayName = 'Sidebar.MenuSubContent';
 
-// Group components
+// Group components. The label is plain text: no role, so it isn't announced as an empty group.
 interface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}
 
 const SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(({ className, ...props }, forwardedRef) => (
@@ -569,7 +558,7 @@ interface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {
 const SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(({ asChild = false, className, ...props }, forwardedRef) => {
   const Comp = asChild ? Slot : 'div';
 
-  return <Comp {...props} ref={forwardedRef} role="group" className={classNames('rt-BaseMenuLabel', 'rt-SidebarGroupLabel', className)} />;
+  return <Comp {...props} ref={forwardedRef} className={classNames('rt-BaseMenuLabel', 'rt-SidebarGroupLabel', className)} />;
 });
 SidebarGroupLabel.displayName = 'Sidebar.GroupLabel';
 

package/src/hooks/use-breakpoint.ts

@@ -84,6 +84,15 @@ function getServerSnapshot(): Breakpoint {
   return 'initial';
 }
 
+/**
+ * The breakpoint right now, outside React's render. For an effect that needs
+ * the answer at the moment it runs rather than the one its render saw.
+ */
+export function readBreakpoint(): Breakpoint {
+  if (typeof window === 'undefined') return 'initial';
+  return computeBreakpoint();
+}
+
 const getReadySnapshot = () => true;
 const getReadyServerSnapshot = () => false;