@womp/kookie-ui 0.24.0 → 0.25.1

package/src/components/theme.tsx

@@ -2,11 +2,10 @@
 
 import * as React from 'react';
 import classNames from 'classnames';
-import { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';
-import { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';
+import { Direction, Slot } from 'radix-ui';
 
 import { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';
-import { ThemeSizeContext } from '../helpers/theme-size.js';
+import { ThemeSizeContext } from '../hooks/theme-size.js';
 import { usePropSyncedState } from '../hooks/use-prop-synced-state.js';
 import { themePropDefs } from './theme.props.js';
 
@@ -81,11 +80,9 @@ const Theme = React.forwardRef<ThemeImplElement, ThemeProps>((props, forwardedRe
   const isRoot = context === undefined;
   if (isRoot) {
     return (
-      <TooltipPrimitive.Provider delayDuration={200}>
-        <Direction.Provider dir={dir}>
-          <ThemeRoot {...props} ref={forwardedRef} />
-        </Direction.Provider>
-      </TooltipPrimitive.Provider>
+      <Direction.Provider dir={dir}>
+        <ThemeRoot {...props} ref={forwardedRef} />
+      </Direction.Provider>
     );
   }
   return <ThemeImpl {...props} ref={forwardedRef} />;
@@ -150,15 +147,6 @@ interface ThemeImplPublicProps extends ComponentPropsWithout<'div', RemovedProps
 interface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {
   isRoot?: boolean;
 }
-function getClientOS(): 'windows' | 'macos' | 'linux' | undefined {
-  if (typeof navigator === 'undefined') return undefined;
-  const ua = navigator.userAgent;
-  if (ua.includes('Win')) return 'windows';
-  if (ua.includes('Mac')) return 'macos';
-  if (ua.includes('Linux')) return 'linux';
-  return undefined;
-}
-
 const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, forwardedRef) => {
   const context = React.useContext(ThemeContext);
   const {
@@ -173,14 +161,15 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
     fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,
     headingFontFamily = props.headingFontFamily ?? context?.headingFontFamily,
     size = props.size ?? context?.size ?? themePropDefs.size.default,
-    //
-    onAppearanceChange = noop,
-    onAccentColorChange = noop,
-    onGrayColorChange = noop,
-    onRadiusChange = noop,
-    onFontFamilyChange = noop,
-    onHeadingFontFamilyChange = noop,
-    onSizeChange = noop,
+    // A nested Theme forwards changes to the one above it, so a switcher
+    // inside a portal (Dialog, Popover, menus) still reaches the root.
+    onAppearanceChange = context?.onAppearanceChange ?? noop,
+    onAccentColorChange = context?.onAccentColorChange ?? noop,
+    onGrayColorChange = context?.onGrayColorChange ?? noop,
+    onRadiusChange = context?.onRadiusChange ?? noop,
+    onFontFamilyChange = context?.onFontFamilyChange ?? noop,
+    onHeadingFontFamilyChange = context?.onHeadingFontFamilyChange ?? noop,
+    onSizeChange = context?.onSizeChange ?? noop,
     //
     ...themeProps
   } = props;
@@ -189,25 +178,6 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
   const isExplicitAppearance = props.appearance === 'light' || props.appearance === 'dark';
   const hasBackground = hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;
 
-  // `data-os` can only be resolved on the client. Writing it straight to the
-  // DOM keeps it out of the server markup — so hydration still matches — without
-  // spending a render pass, and a state update here would re-render the whole
-  // application on mount.
-  const rootRef = React.useRef<ThemeImplElement>(null);
-  const composedRef = useComposedRefs(forwardedRef, rootRef);
-  const hasExplicitOS = 'data-os' in themeProps;
-
-  useLayoutEffect(() => {
-    if (!isRoot || hasExplicitOS) return;
-    const node = rootRef.current;
-    if (!node) return;
-
-    const os = getClientOS();
-    if (!os) return;
-    node.setAttribute('data-os', os);
-    return () => node.removeAttribute('data-os');
-  }, [isRoot, hasExplicitOS]);
-
   return (
     <ThemeContext.Provider
       value={React.useMemo(
@@ -261,7 +231,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           data-radius={radius}
           data-font-family={fontFamily}
           data-heading-font-family={headingFontFamily}
-          ref={composedRef}
+          ref={forwardedRef}
           {...themeProps}
           className={classNames(
             'kui-theme',

package/src/components/toolbar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { useLayoutEffect } from 'radix-ui/internal';
 import classNames from 'classnames';
 import { Toolbar as ToolbarPrimitive } from 'radix-ui';
 
@@ -9,7 +10,7 @@ import { Button } from './button.js';
 import * as DropdownMenu from './dropdown-menu.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSize } from '../helpers/theme-size.js';
+import { useThemeSize } from '../hooks/theme-size.js';
 import { layoutPropDefs } from '../props/layout.props.js';
 import { usePaneBandSize } from './_internal/pane-chrome.js';
 
@@ -62,8 +63,6 @@ function useToolbarOverflow(): boolean {
   return React.useContext(InOverflowContext);
 }
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 // ============================================================================
 // Toolbar (root)
 // ============================================================================
@@ -198,6 +197,9 @@ type ToolbarIconButtonProps = Omit<ToolbarButtonBaseProps, 'aria-label' | 'aria-
 
 type ToolbarButtonProps = ToolbarTextButtonProps | ToolbarIconButtonProps;
 
+/** The plain DOM props, besides handlers, ARIA and data attributes, a menu row takes from a ToolbarButton. */
+const OVERFLOW_ITEM_KEYS = new Set(['id', 'className', 'style', 'title']);
+
 function isPressed(value: React.AriaAttributes['aria-pressed']) {
   return value === true || value === 'true';
 }
@@ -232,20 +234,27 @@ const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>((p
   const off = disabled || group?.disabled || undefined;
 
   if (overflow) {
+    // Only what a menu row means comes across: handlers, ARIA, data attributes, id, class and
+    // style. Button's box props (size, loading, tooltip, fullWidth and the rest) would land on the
+    // DOM as unknown attributes. A wrapping menu trigger hands its open handlers (onPointerDown,
+    // onKeyDown), aria-expanded/haspopup/controls and data-state in through these, so it still
+    // opens from the row.
+    const passed: Record<string, unknown> = {};
+    for (const key of Object.keys(rest)) {
+      if (/^on[A-Z]/.test(key) || key.startsWith('aria-') || key.startsWith('data-') || OVERFLOW_ITEM_KEYS.has(key)) {
+        passed[key] = (rest as Record<string, unknown>)[key];
+      }
+    }
+    if (onKeyDown) passed.onKeyDown = onKeyDown;
     return (
       <ToolbarOverflowItem
-        // Only what a menu row means comes across; Button's box props (size, loading,
-        // tooltip, fullWidth and the rest) would land on the DOM as unknown attributes.
-        id={rest.id}
-        className={rest.className}
-        style={rest.style}
-        onClick={rest.onClick as React.MouseEventHandler<HTMLDivElement> | undefined}
-        aria-label={rest['aria-label']}
+        {...(passed as React.ComponentPropsWithoutRef<'div'>)}
         ref={forwardedRef as unknown as React.Ref<HTMLDivElement>}
         asChild={asChild}
         iconOnly={iconOnly}
         disabled={off}
         color={color}
+        pressed={props['aria-pressed'] === undefined ? undefined : isPressed(props['aria-pressed'])}
       >
         {rest.children}
       </ToolbarOverflowItem>
@@ -315,6 +324,8 @@ interface ToolbarOverflowItemProps extends Omit<React.ComponentPropsWithoutRef<'
   iconOnly?: boolean;
   disabled?: boolean;
   color?: ButtonProps['color'];
+  /** A toggle's pressed state. A toggle becomes a checkbox item, so the menu still says whether it is on. */
+  pressed?: boolean;
 }
 
 /**
@@ -323,7 +334,7 @@ interface ToolbarOverflowItemProps extends Omit<React.ComponentPropsWithoutRef<'
  * words. What prices a box (size, variant, emphasis, iconOnly) does not come across.
  */
 const ToolbarOverflowItem = React.forwardRef<HTMLDivElement, ToolbarOverflowItemProps>(
-  ({ asChild, iconOnly, disabled, color, children, 'aria-label': label, ...props }, forwardedRef) => {
+  ({ asChild, iconOnly, disabled, color, pressed, children, 'aria-label': label, ...props }, forwardedRef) => {
     const words = iconOnly ? label : undefined;
     const itemProps = {
       ...props,
@@ -341,6 +352,14 @@ const ToolbarOverflowItem = React.forwardRef<HTMLDivElement, ToolbarOverflowItem
         </DropdownMenu.Item>
       );
     }
+    if (pressed !== undefined) {
+      return (
+        <DropdownMenu.CheckboxItem {...itemProps} ref={forwardedRef} checked={pressed}>
+          {children}
+          {words}
+        </DropdownMenu.CheckboxItem>
+      );
+    }
     return (
       <DropdownMenu.Item {...itemProps} ref={forwardedRef}>
         {children}
@@ -401,11 +420,11 @@ const ToolbarOverflow = React.forwardRef<HTMLDivElement, ToolbarOverflowProps>(
       setMeasuredCount(count);
       setShown(count);
     }
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
       widths.current = [];
     }, [count]);
 
-    useIsomorphicLayoutEffect(() => {
+    useLayoutEffect(() => {
       const root = rootRef.current;
       if (!root) return;
 
@@ -511,6 +530,8 @@ type SlotEntry = { id: string; node: React.ReactNode };
 const EMPTY_ENTRIES: readonly SlotEntry[] = [];
 const slotEntries = new Map<string, readonly SlotEntry[]>();
 const slotListeners = new Set<() => void>();
+/** How many ToolbarSlots of each name are mounted, to warn when one Fill would render twice. */
+const mountedSlots = new Map<string, number>();
 
 function subscribeSlots(listener: () => void) {
   slotListeners.add(listener);
@@ -537,7 +558,10 @@ function removeSlotEntry(name: string, id: string) {
 }
 
 interface ToolbarSlotProps {
-  /** Which `ToolbarFill` renders here. Use one name per slot. Defaults to `default`. */
+  /**
+   * Which `ToolbarFill` renders here. Defaults to `default`. Names are global to the page: mount one
+   * slot per name, or the fill renders in each of them (development builds warn).
+   */
   name?: string;
 }
 
@@ -549,6 +573,18 @@ interface ToolbarSlotProps {
  * the controls take the toolbar's size and join its arrow-key row. It adds no element.
  */
 function ToolbarSlot({ name = 'default' }: ToolbarSlotProps) {
+  useLayoutEffect(() => {
+    const count = (mountedSlots.get(name) ?? 0) + 1;
+    mountedSlots.set(name, count);
+    if (count > 1 && process.env.NODE_ENV !== 'production') {
+      console.warn(`[kookie-ui] ToolbarSlot: ${count} slots named "${name}" are mounted. Each renders the ToolbarFill's controls, so they appear more than once. Give each slot its own name.`);
+    }
+    return () => {
+      const left = (mountedSlots.get(name) ?? 1) - 1;
+      if (left > 0) mountedSlots.set(name, left);
+      else mountedSlots.delete(name);
+    };
+  }, [name]);
   const entries = React.useSyncExternalStore(
     subscribeSlots,
     () => slotEntries.get(name) ?? EMPTY_ENTRIES,
@@ -581,10 +617,10 @@ interface ToolbarFillProps {
  */
 function ToolbarFill({ name = 'default', children }: ToolbarFillProps) {
   const id = React.useId();
-  useIsomorphicLayoutEffect(() => {
+  useLayoutEffect(() => {
     setSlotEntry(name, id, children);
   }, [name, id, children]);
-  useIsomorphicLayoutEffect(() => () => removeSlotEntry(name, id), [name, id]);
+  useLayoutEffect(() => () => removeSlotEntry(name, id), [name, id]);
   return null;
 }
 ToolbarFill.displayName = 'Toolbar.Fill';

package/src/components/tooltip.css

@@ -5,7 +5,7 @@
   border-radius: var(--radius-surface-1);
   z-index: 300; /* Tooltips always on top - above dialogs (100) and menus (200) */
 
-  transform-origin: var(--radix-tooltip-content-transform-origin)
+  transform-origin: var(--radix-tooltip-content-transform-origin);
 }
 
 .kui-TooltipText {
@@ -17,3 +17,10 @@
 .kui-TooltipArrow {
   fill: var(--neutral-12);
 }
+
+/* High contrast mode replaces the background colour, so give the tooltip a real edge. */
+@media (forced-colors: active) {
+  .kui-TooltipContent {
+    border: 1px solid CanvasText;
+  }
+}

package/src/components/tooltip.tsx

@@ -10,6 +10,30 @@ import { tooltipPropDefs } from './tooltip.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
+/** The rest before a tooltip opens, in milliseconds. */
+const TOOLTIP_DELAY = 200;
+
+/** True inside a `TooltipProvider`, so a Tooltip knows it need not bring its own. */
+const TooltipProviderContext = React.createContext(false);
+
+interface TooltipProviderProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider> {}
+
+/**
+ * Groups the tooltips inside it: the first one waits `delayDuration` (200ms), and the next ones
+ * open at once while the pointer moves between them. Put it once near the root of the app.
+ * A Tooltip outside one still works, with the same delay, but each one waits on its own.
+ */
+function TooltipProvider({ delayDuration = TOOLTIP_DELAY, children, ...props }: TooltipProviderProps) {
+  return (
+    <TooltipProviderContext.Provider value={true}>
+      <TooltipPrimitive.Provider delayDuration={delayDuration} {...props}>
+        {children}
+      </TooltipPrimitive.Provider>
+    </TooltipProviderContext.Provider>
+  );
+}
+TooltipProvider.displayName = 'TooltipProvider';
+
 type TooltipElement = React.ElementRef<typeof TooltipPrimitive.Content>;
 type TooltipOwnProps = GetPropDefTypes<typeof tooltipPropDefs>;
 interface TooltipProps
@@ -34,7 +58,8 @@ const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((props, forwarded
     ...tooltipContentProps
   } = extractProps(props, tooltipPropDefs);
   const rootProps = { open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent };
-  return (
+  const hasProvider = React.useContext(TooltipProviderContext);
+  const tooltip = (
     <TooltipPrimitive.Root {...rootProps}>
       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
       <TooltipPrimitive.Portal container={container} forceMount={forceMount}>
@@ -56,8 +81,10 @@ const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((props, forwarded
       </TooltipPrimitive.Portal>
     </TooltipPrimitive.Root>
   );
+  // Radix needs a provider above every tooltip. Outside a TooltipProvider, bring one.
+  return hasProvider ? tooltip : <TooltipPrimitive.Provider delayDuration={TOOLTIP_DELAY}>{tooltip}</TooltipPrimitive.Provider>;
 });
 Tooltip.displayName = 'Tooltip';
 
-export { Tooltip };
-export type { TooltipProps };
+export { Tooltip, TooltipProvider };
+export type { TooltipProps, TooltipProviderProps };

package/src/components/virtual-menu.css

@@ -47,3 +47,83 @@
   /* - cursor, user-select */
   /* - transition */
 }
+
+/*
+ * On its own (in a Popover, a panel), the list is not inside a menu surface, so it sets the
+ * menu row tokens itself at its `size`. The class is only added outside a menu.
+ */
+.kui-VirtualMenuRoot:where(.kui-r-size-1, .kui-r-size-2, .kui-r-size-3, .kui-r-size-4) {
+  --base-menu-item-height: max(24px, calc(var(--base-menu-line-height) + 2 * var(--base-menu-item-padding-y)));
+  --base-menu-item-padding-x: calc(
+    var(--base-menu-item-px) + min(var(--radius-full, 0px), var(--base-menu-item-px-pill) - var(--base-menu-item-px))
+  );
+  --base-menu-item-padding-left: var(--base-menu-item-padding-x);
+  --base-menu-item-padding-right: var(--base-menu-item-padding-x);
+  --base-menu-content-padding: 0px;
+
+  & :where(.kui-BaseMenuItem[data-highlighted]) {
+    background-color: var(--accent-4);
+  }
+
+  @media (prefers-contrast: more) {
+    & :where(.kui-BaseMenuItem[data-highlighted]) {
+      background-color: var(--accent-solid);
+      color: var(--accent-solid-contrast);
+    }
+  }
+
+  @media (forced-colors: active) {
+    & :where(.kui-BaseMenuItem[data-highlighted]) {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+}
+
+.kui-VirtualMenuRoot:where(.kui-r-size-1) {
+  --base-menu-item-padding-y: var(--row-inset-1);
+  --base-menu-item-px: var(--control-px-1);
+  --base-menu-item-px-pill: var(--control-px-pill-1);
+  --base-menu-item-gap: var(--control-gap-1);
+  --base-menu-item-radius: var(--radius-row-1);
+  --base-menu-icon-size: var(--icon-size-1);
+  --base-menu-font-size: var(--font-size-1);
+  --base-menu-line-height: var(--line-height-1);
+  --base-menu-letter-spacing: var(--letter-spacing-1);
+}
+
+.kui-VirtualMenuRoot:where(.kui-r-size-2) {
+  --base-menu-item-padding-y: var(--row-inset-2);
+  --base-menu-item-px: var(--control-px-2);
+  --base-menu-item-px-pill: var(--control-px-pill-2);
+  --base-menu-item-gap: var(--control-gap-2);
+  --base-menu-item-radius: var(--radius-row-2);
+  --base-menu-icon-size: var(--icon-size-2);
+  --base-menu-font-size: var(--font-size-2);
+  --base-menu-line-height: var(--line-height-2);
+  --base-menu-letter-spacing: var(--letter-spacing-2);
+}
+
+.kui-VirtualMenuRoot:where(.kui-r-size-3) {
+  --base-menu-item-padding-y: var(--row-inset-3);
+  --base-menu-item-px: var(--control-px-3);
+  --base-menu-item-px-pill: var(--control-px-pill-3);
+  --base-menu-item-gap: var(--control-gap-3);
+  --base-menu-item-radius: var(--radius-row-3);
+  --base-menu-icon-size: var(--icon-size-3);
+  --base-menu-font-size: var(--font-size-3);
+  --base-menu-line-height: var(--line-height-3);
+  --base-menu-letter-spacing: var(--letter-spacing-3);
+}
+
+.kui-VirtualMenuRoot:where(.kui-r-size-4) {
+  --base-menu-item-padding-y: var(--row-inset-4);
+  --base-menu-item-px: var(--control-px-4);
+  --base-menu-item-px-pill: var(--control-px-pill-4);
+  --base-menu-item-gap: var(--control-gap-4);
+  --base-menu-item-radius: var(--radius-row-4);
+  --base-menu-icon-size: var(--icon-size-4);
+  --base-menu-font-size: var(--font-size-4);
+  --base-menu-line-height: var(--line-height-4);
+  --base-menu-letter-spacing: var(--letter-spacing-4);
+}