@womp/kookie-ui 0.22.1 → 0.24.0

package/src/components/dialog.tsx

@@ -12,196 +12,95 @@ import { requireReactElement } from '../helpers/require-react-element.js';
 import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
 import type { DialogContentOwnProps } from './dialog.props.js';
-import type {
-  ComponentPropsWithout,
-  RemovedProps,
-  ComponentPropsAs,
-} from '../helpers/component-props.js';
+import type { ComponentPropsWithout, RemovedProps, ComponentPropsAs } from '../helpers/component-props.js';
 
 interface DialogRootProps extends ComponentPropsWithout<typeof DialogPrimitive.Root, 'modal'> {}
 const DialogRoot: React.FC<DialogRootProps> = (props) => <DialogPrimitive.Root {...props} modal />;
 DialogRoot.displayName = 'Dialog.Root';
 
 type DialogTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;
-interface DialogTriggerProps
-  extends ComponentPropsWithout<typeof DialogPrimitive.Trigger, RemovedProps> {}
-const DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <DialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>
-      {requireReactElement(children)}
-    </DialogPrimitive.Trigger>
-  ),
-);
+interface DialogTriggerProps extends ComponentPropsWithout<typeof DialogPrimitive.Trigger, RemovedProps> {}
+const DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>(({ children, ...props }, forwardedRef) => (
+  <DialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>
+    {requireReactElement(children)}
+  </DialogPrimitive.Trigger>
+));
 DialogTrigger.displayName = 'Dialog.Trigger';
 
 // Split once at module scope. `extractProps` memoises on the identity of the
 // prop def objects it is handed, so rebuilding these per render would recompile
 // them on every render.
-const {
-  align: alignPropDef,
-  ...contentPropDefs
-} = dialogContentPropDefs;
+const { align: alignPropDef, ...contentPropDefs } = dialogContentPropDefs;
 const alignPropDefs = { align: alignPropDef };
 
 type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
-interface DialogContentProps
-  extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,
-    DialogContentOwnProps {
+interface DialogContentProps extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>, DialogContentOwnProps {
   container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>['container'];
 }
-const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
-  ({ align, ...ownProps }, forwardedRef) => {
-    const props = useThemeSizeProps(ownProps, contentPropDefs.size);
-    const { className: alignClassName } = extractProps({ align }, alignPropDefs);
-
-    const {
-      className,
-      forceMount,
-      container,
-      ...contentProps
-    } = extractProps(props, contentPropDefs);
-
-    // Focus management
-    const contentRef = React.useRef<HTMLDivElement>(null);
-    const combinedRef = React.useMemo(
-      () => (node: HTMLDivElement | null) => {
-        contentRef.current = node;
-        if (typeof forwardedRef === 'function') {
-          forwardedRef(node);
-        } else if (forwardedRef) {
-          forwardedRef.current = node;
-        }
-      },
-      [forwardedRef],
-    );
-
-    // Cleanup stuck pointer-events on body
-    useBodyPointerEventsCleanup();
-
-    // Focus trap effect
-    React.useEffect(() => {
-      // SSR safety - only run on client
-      if (typeof window === 'undefined') return;
-
-      const content = contentRef.current;
-      if (!content) return;
-
-      const focusableElements = content.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
-      );
-
-      if (focusableElements.length === 0) return;
-
-      const firstElement = focusableElements[0] as HTMLElement;
-      const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
-
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key === 'Tab') {
-          if (event.shiftKey) {
-            if (document.activeElement === firstElement) {
-              event.preventDefault();
-              lastElement.focus();
-            }
-          } else {
-            if (document.activeElement === lastElement) {
-              event.preventDefault();
-              firstElement.focus();
-            }
-          }
-        }
-      };
-
-      content.addEventListener('keydown', handleKeyDown);
-
-      // Focus first element when dialog opens
-      firstElement.focus();
-
-      return () => {
-        content.removeEventListener('keydown', handleKeyDown);
-      };
-    }, []);
-
-    return (
-      <DialogPrimitive.Portal container={container} forceMount={forceMount}>
-        <Theme asChild>
-          <DialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-DialogOverlay">
-            <div className="kui-BaseDialogScroll kui-DialogScroll">
-              <div
-                className={`kui-BaseDialogScrollPadding kui-DialogScrollPadding ${alignClassName}`}
-              >
-                <DialogPrimitive.Content
-                  {...contentProps}
-                  ref={combinedRef}
-                  className={classNames('kui-BaseDialogContent', 'kui-DialogContent', className)}
-                  tabIndex={-1}
-                  role="dialog"
-                  aria-modal="true"
-                  onCloseAutoFocus={(event) => {
-                    // Prevent default focus behavior
-                    event.preventDefault();
-                    // Restore pointer-events to body (Radix UI fix for issue #1241)
-                    document.body.style.pointerEvents = '';
-                  }}
-                />
-                {/* ARIA live region for screen reader announcements */}
-                <div
-                  aria-live="polite"
-                  aria-atomic="true"
-                  className="kui-sr-only"
-                  id="dialog-announcement"
-                />
-              </div>
+const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(({ align, ...ownProps }, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, contentPropDefs.size);
+  const { className: alignClassName } = extractProps({ align }, alignPropDefs);
+
+  const { className, forceMount, container, onCloseAutoFocus, ...contentProps } = extractProps(props, contentPropDefs);
+
+  // Cleanup stuck pointer-events on body
+  useBodyPointerEventsCleanup();
+
+  return (
+    <DialogPrimitive.Portal container={container} forceMount={forceMount}>
+      <Theme asChild>
+        <DialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-DialogOverlay">
+          <div className="kui-BaseDialogScroll kui-DialogScroll">
+            <div className={`kui-BaseDialogScrollPadding kui-DialogScrollPadding ${alignClassName}`}>
+              <DialogPrimitive.Content
+                {...contentProps}
+                ref={forwardedRef}
+                className={classNames('kui-BaseDialogContent', 'kui-DialogContent', className)}
+                aria-modal="true"
+                onCloseAutoFocus={(event) => {
+                  // Radix returns focus to the trigger unless the caller prevents it.
+                  onCloseAutoFocus?.(event);
+                  // Restore pointer-events to body (Radix UI fix for issue #1241)
+                  document.body.style.pointerEvents = '';
+                }}
+              />
             </div>
-          </DialogPrimitive.Overlay>
-        </Theme>
-      </DialogPrimitive.Portal>
-    );
-  },
-);
+          </div>
+        </DialogPrimitive.Overlay>
+      </Theme>
+    </DialogPrimitive.Portal>
+  );
+});
 DialogContent.displayName = 'Dialog.Content';
 
 type DialogTitleElement = React.ElementRef<typeof Heading>;
 type DialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;
-const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(
-  (props, forwardedRef) => (
-    <DialogPrimitive.Title asChild>
-      <Heading size="5" trim="start" {...props} asChild={false} ref={forwardedRef} />
-    </DialogPrimitive.Title>
-  ),
-);
+const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>((props, forwardedRef) => (
+  <DialogPrimitive.Title asChild>
+    <Heading size="5" trim="start" {...props} asChild={false} ref={forwardedRef} />
+  </DialogPrimitive.Title>
+));
 DialogTitle.displayName = 'Dialog.Title';
 
 type DialogDescriptionElement = HTMLParagraphElement;
 type DialogDescriptionProps = ComponentPropsAs<typeof Text, 'p'>;
-const DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>(
-  (props, forwardedRef) => (
-    <DialogPrimitive.Description asChild>
-      <Text as="p" size="3" {...props} asChild={false} ref={forwardedRef} />
-    </DialogPrimitive.Description>
-  ),
-);
+const DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>((props, forwardedRef) => (
+  <DialogPrimitive.Description asChild>
+    <Text as="p" size="3" {...props} asChild={false} ref={forwardedRef} />
+  </DialogPrimitive.Description>
+));
 DialogDescription.displayName = 'Dialog.Description';
 
 type DialogCloseElement = React.ElementRef<typeof DialogPrimitive.Close>;
-interface DialogCloseProps
-  extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {}
-const DialogClose = React.forwardRef<DialogCloseElement, DialogCloseProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <DialogPrimitive.Close {...props} ref={forwardedRef} asChild>
-      {requireReactElement(children)}
-    </DialogPrimitive.Close>
-  ),
-);
+interface DialogCloseProps extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {}
+const DialogClose = React.forwardRef<DialogCloseElement, DialogCloseProps>(({ children, ...props }, forwardedRef) => (
+  <DialogPrimitive.Close {...props} ref={forwardedRef} asChild>
+    {requireReactElement(children)}
+  </DialogPrimitive.Close>
+));
 DialogClose.displayName = 'Dialog.Close';
 
-export {
-  DialogRoot as Root,
-  DialogTrigger as Trigger,
-  DialogContent as Content,
-  DialogTitle as Title,
-  DialogDescription as Description,
-  DialogClose as Close,
-};
+export { DialogRoot as Root, DialogTrigger as Trigger, DialogContent as Content, DialogTitle as Title, DialogDescription as Description, DialogClose as Close };
 
 export type {
   DialogRootProps as RootProps,

package/src/components/dropdown-menu.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import { VirtualMenu } from './virtual-menu.js';
 import classNames from 'classnames';
@@ -30,7 +29,7 @@ import {
   useStackEntry,
   useSubContext,
 } from './_internal/dropdown-menu-drill-down.js';
-import { MenuProvider } from './_internal/menu-context.js';
+import { MenuCloseProvider, MenuProvider } from './_internal/menu-context.js';
 import {
   MenuShortcut,
   getMenuAlignOffset,
@@ -66,9 +65,13 @@ const DropdownMenuRoot: React.FC<DropdownMenuRootProps> = (props) => {
     [handleOpenChangeProp],
   );
 
+  const close = React.useCallback(() => handleOpenChange(false), [handleOpenChange]);
+
   return (
     <DropdownMenuOpenContext.Provider value={open}>
-      <DropdownMenuPrimitive.Root {...props} onOpenChange={handleOpenChange} />
+      <MenuCloseProvider value={close}>
+        <DropdownMenuPrimitive.Root {...props} open={open} onOpenChange={handleOpenChange} />
+      </MenuCloseProvider>
     </DropdownMenuOpenContext.Provider>
   );
 };
@@ -338,7 +341,7 @@ const DropdownMenuRadioItem = React.forwardRef<
         className,
       )}
     >
-      {children}
+      <Slot.Slottable>{children}</Slot.Slottable>
       <DropdownMenuPrimitive.ItemIndicator className="kui-BaseMenuItemIndicator kui-DropdownMenuItemIndicator">
         <ThickDotIcon className="kui-BaseMenuItemIndicatorIcon kui-DropdownMenuItemIndicatorIcon" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -379,7 +382,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
         className,
       )}
     >
-      {children}
+      <Slot.Slottable>{children}</Slot.Slottable>
       <DropdownMenuPrimitive.ItemIndicator className="kui-BaseMenuItemIndicator kui-DropdownMenuItemIndicator">
         <ThickCheckIcon className="kui-BaseMenuItemIndicatorIcon kui-DropdownMenuItemIndicatorIcon" />
       </DropdownMenuPrimitive.ItemIndicator>

package/src/components/icons.tsx

@@ -146,4 +146,14 @@ const FileTextIcon = React.forwardRef<IconElement, IconProps>((_props, _forwarde
 });
 FileTextIcon.displayName = 'FileTextIcon';
 
-export { CloseIcon, PaperclipIcon, FileIcon, FileTextIcon };
+/** The tick a button shows in place of its icon while `done`. Drawn on the 24 grid at the icon set's stroke. */
+const TickIcon = React.forwardRef<IconElement, IconProps>((props, forwardedRef) => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} ref={forwardedRef}>
+      <path d="M5 12.75L9.5 17.25L19 7.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+});
+TickIcon.displayName = 'TickIcon';
+
+export { CloseIcon, PaperclipIcon, FileIcon, FileTextIcon, TickIcon };

package/src/components/image.css

@@ -0,0 +1,33 @@
+/*
+ * Image: one <img>. It fills its box by `fit`, takes the theme's corner, rests on a quiet
+ * neutral fill until it has loaded, so the box holds its place and a failed image keeps it.
+ * No fade-in: v1 has had no motion since 0.15. The fill clears once loaded so a transparent
+ * picture shows what is behind it.
+ */
+.kui-Image {
+  display: block;
+  max-width: 100%;
+  object-fit: var(--image-object-fit, cover);
+  border-radius: var(--radius-2);
+  background-color: var(--neutral-a3);
+}
+
+.kui-Image:where([data-status='loaded']) {
+  background-color: transparent;
+}
+
+.kui-Image:where(.kui-r-fit-cover) {
+  --image-object-fit: cover;
+}
+.kui-Image:where(.kui-r-fit-contain) {
+  --image-object-fit: contain;
+}
+.kui-Image:where(.kui-r-fit-fill) {
+  --image-object-fit: fill;
+}
+.kui-Image:where(.kui-r-fit-scale-down) {
+  --image-object-fit: scale-down;
+}
+.kui-Image:where(.kui-r-fit-none) {
+  --image-object-fit: none;
+}

package/src/components/image.props.ts

@@ -0,0 +1,18 @@
+import { radiusPropDef } from '../props/radius.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const objectFitValues = ['cover', 'contain', 'fill', 'scale-down', 'none'] as const;
+
+const imagePropDefs = {
+  ...radiusPropDef,
+  /**
+   * How the picture fills its box, as CSS `object-fit`.
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
+   */
+  fit: { type: 'enum', className: 'kui-r-fit', values: objectFitValues, default: 'cover' },
+} satisfies {
+  fit: PropDef<(typeof objectFitValues)[number]>;
+};
+
+export { imagePropDefs };

package/src/components/image.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';
+
+import { imagePropDefs } from './image.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { widthPropDefs } from '../props/width.props.js';
+import { heightPropDefs } from '../props/height.props.js';
+
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { WidthProps } from '../props/width.props.js';
+import type { HeightProps } from '../props/height.props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type ImageElement = React.ElementRef<'img'>;
+type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs>;
+type ImageStatus = 'loading' | 'loaded' | 'error';
+
+interface ImageProps extends ComponentPropsWithout<'img', RemovedProps | 'width' | 'height' | 'src' | 'alt'>, WidthProps, HeightProps, ImageOwnProps {
+  src: string;
+  /** Required. Pass `""` for a decorative picture. */
+  alt: string;
+}
+
+/**
+ * A plain `<img>` that loads lazily, fills its box by `fit` and takes the theme's corner.
+ * One element and no wrapper: `width`, `height`, `className` and `style` all land on the
+ * `<img>` itself.
+ *
+ * Until it loads it rests on a quiet neutral fill, which is also what stays if it fails.
+ */
+const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {
+  const { className, alt, radius, loading = 'lazy', decoding = 'async', onLoad, onError, ...imageProps } = extractProps(props, imagePropDefs, widthPropDefs, heightPropDefs);
+
+  const [status, setStatus] = React.useState<ImageStatus>('loading');
+  const ref = React.useRef<HTMLImageElement>(null);
+
+  // A cached image, or one that finished before hydration, never fires onLoad for us.
+  useLayoutEffect(() => {
+    const img = ref.current;
+    if (img?.complete) setStatus(img.naturalWidth > 0 ? 'loaded' : 'error');
+    else setStatus('loading');
+  }, [props.src]);
+
+  const setRefs = useComposedRefs(ref, forwardedRef);
+
+  return (
+    <img
+      {...imageProps}
+      ref={setRefs}
+      alt={alt}
+      loading={loading}
+      decoding={decoding}
+      data-radius={radius}
+      data-status={status}
+      className={classNames('kui-Image', className)}
+      onLoad={(event) => {
+        setStatus('loaded');
+        onLoad?.(event);
+      }}
+      onError={(event) => {
+        setStatus('error');
+        onError?.(event);
+      }}
+    />
+  );
+});
+Image.displayName = 'Image';
+
+export { Image };
+export type { ImageProps };

package/src/components/index.css

@@ -20,6 +20,7 @@
 @import './dropdown-menu.css';
 @import './combobox.css';
 @import './heading.css';
+@import './image.css';
 @import './kbd.css';
 @import './link.css';
 @import './navbar.css';

package/src/components/index.tsx

@@ -24,6 +24,7 @@ export {
   ThickChevronRightIcon,
   ThickDividerHorizontalIcon,
 } from './icons.js';
+export { Image, type ImageProps } from './image.js';
 export { Kbd, type KbdProps } from './kbd.js';
 export { Link, type LinkProps } from './link.js';
 export * as Navbar from './navbar.js';
@@ -54,11 +55,18 @@ export {
   ToolbarButton,
   ToolbarSeparator,
   ToolbarTitle,
+  ToolbarOverflow,
+  ToolbarSlot,
+  ToolbarFill,
+  useToolbarOverflow,
   type ToolbarProps,
   type ToolbarGroupProps,
   type ToolbarButtonProps,
   type ToolbarSeparatorProps,
   type ToolbarTitleProps,
+  type ToolbarOverflowProps,
+  type ToolbarSlotProps,
+  type ToolbarFillProps,
 } from './toolbar.js';
 export { Tooltip, type TooltipProps } from './tooltip.js';
 export { VirtualMenu, type VirtualMenuProps, type VirtualMenuItemProps, type VirtualMenuRenderItemProps } from './virtual-menu.js';

package/src/components/message-scroller.tsx

@@ -144,32 +144,54 @@ type ButtonProps = Omit<KuiButtonProps, 'aria-label' | 'aria-labelledby' | 'vari
  * Place it inside `Root`, after the viewport. It sits over the viewport's bottom edge.
  */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ direction = 'end', behavior, className, children, size, variant = 'surface', emphasis, color = 'gray', radius = 'full', 'aria-label': label, ...props }, forwardedRef) => (
-    <Primitive.Button
-      direction={direction}
-      {...(behavior ? { behavior } : {})}
-      render={
-        <KuiButton
-          iconOnly
-          {...props}
-          ref={forwardedRef}
-          size={size}
-          {...(emphasis ? { emphasis } : { variant })}
-          color={color}
-          radius={radius}
-          aria-label={label ?? (direction === 'end' ? 'Jump to the latest' : 'Jump to the first')}
-          className={classNames('kui-MessageScrollerButton', className)}
-          data-direction={direction}
-        >
-          {children ?? (
-            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden style={direction === 'start' ? { transform: 'rotate(180deg)' } : undefined}>
-              <path d="M7.5 2.5v10M3.5 8.5l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-          )}
-        </KuiButton>
-      }
-    />
-  ),
+  (
+    { direction = 'end', behavior = 'smooth', className, children, size, variant = 'surface', emphasis, color = 'gray', radius = 'full', 'aria-label': label, onClick, ...props },
+    forwardedRef,
+  ) => {
+    const { scrollToEnd, scrollToStart } = useMessageScroller();
+
+    // The primitive blurs the button on click, which drops keyboard focus to the page. Kookie
+    // jumps itself and moves focus to the viewport instead, since the button hides at the end.
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      const viewport = event.currentTarget
+        .closest('.kui-MessageScrollerRoot')
+        ?.querySelector<HTMLElement>('.kui-MessageScrollerViewport');
+      viewport?.focus({ preventScroll: true });
+      if (direction === 'start') scrollToStart({ behavior });
+      else scrollToEnd({ behavior });
+    };
+
+    return (
+      <Primitive.Button
+        direction={direction}
+        behavior={behavior}
+        onClick={handleClick}
+        render={
+          <KuiButton
+            iconOnly
+            {...props}
+            ref={forwardedRef}
+            size={size}
+            {...(emphasis ? { emphasis } : { variant })}
+            color={color}
+            radius={radius}
+            aria-label={label ?? (direction === 'end' ? 'Jump to the latest' : 'Jump to the first')}
+            className={classNames('kui-MessageScrollerButton', className)}
+            data-direction={direction}
+          >
+            {children ?? (
+              <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden style={direction === 'start' ? { transform: 'rotate(180deg)' } : undefined}>
+                <path d="M7.5 2.5v10M3.5 8.5l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            )}
+          </KuiButton>
+        }
+      />
+    );
+  },
 );
 Button.displayName = 'MessageScroller.Button';