@womp/kookie-ui 0.23.0 → 0.25.0

package/src/components/sheet.tsx

@@ -15,6 +15,7 @@
  * - Sizing: reuses Dialog content prop defs (width/min/max/height/size). Size follows the
  *   Theme size; start/end sheets cap at the size's overlay width unless maxWidth is set.
  * - A11y: provide an accessible name via `Sheet.Title` or `aria-label` on `Sheet.Content`.
+ *   Radix owns the focus trap, initial focus and the return of focus to the trigger.
  *
  * Example
  * <Sheet.Root>
@@ -71,15 +72,12 @@ Root.displayName = 'Sheet.Root';
 /** Element type for `Sheet.Trigger`. */
 type SheetTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;
 /** Props for `Sheet.Trigger` (expects a single element child). */
-interface SheetTriggerProps
-  extends ComponentPropsWithout<typeof DialogPrimitive.Trigger, RemovedProps> {}
-const Trigger = React.forwardRef<SheetTriggerElement, SheetTriggerProps>(
-  ({ children, ...props }, ref) => (
-    <DialogPrimitive.Trigger {...props} ref={ref} asChild>
-      {requireReactElement(children)}
-    </DialogPrimitive.Trigger>
-  ),
-);
+interface SheetTriggerProps extends ComponentPropsWithout<typeof DialogPrimitive.Trigger, RemovedProps> {}
+const Trigger = React.forwardRef<SheetTriggerElement, SheetTriggerProps>(({ children, ...props }, ref) => (
+  <DialogPrimitive.Trigger {...props} ref={ref} asChild>
+    {requireReactElement(children)}
+  </DialogPrimitive.Trigger>
+));
 Trigger.displayName = 'Sheet.Trigger';
 
 // Content
@@ -88,16 +86,16 @@ Trigger.displayName = 'Sheet.Trigger';
 // Built 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 every time a sheet renders.
-const {
-  align: _alignPropDef,
-  ...dialogPropDefsForSheet
-} = dialogContentPropDefs;
+const { align: _alignPropDef, ...dialogPropDefsForSheet } = dialogContentPropDefs;
 const sheetPropDefs = dialogPropDefsForSheet;
 
+/** Counts the Sheet.Title elements mounted inside a Sheet.Content, for the dev-only name check. */
+const SheetTitleCountContext = React.createContext<React.MutableRefObject<number> | null>(null);
+
 type SheetContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 interface SheetContentProps
   extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,
-    DialogContentOwnProps {
+    Omit<DialogContentOwnProps, 'align'> {
   /** Side where the Sheet should appear. `left`/`right` alias to `start`/`end`. */
   side?: SheetSide;
   /** Optional DOM container to portal into. Defaults to `document.body`. */
@@ -109,166 +107,103 @@ interface SheetContentProps
  * forwards dialog sizing props. Provide an accessible name via `Sheet.Title`
  * or `aria-label`.
  */
-const Content = React.forwardRef<SheetContentElement, SheetContentProps>(
-  (allProps, forwardedRef) => {
-    const {
-      side = 'start',
-      forceMount,
-      container,
-      className,
-      ...ownProps
-    } = allProps;
-    const restProps = useThemeSizeProps(ownProps, sheetPropDefs.size);
-    const normalizedSideMap: Record<SheetSide, 'start' | 'end' | 'top' | 'bottom'> = {
-      left: 'start',
-      right: 'end',
-      start: 'start',
-      end: 'end',
-      top: 'top',
-      bottom: 'bottom',
-    };
-    const normalizedSide = normalizedSideMap[side];
-    // Size/width/height class names come from the dialog defs — see `sheetPropDefs`.
-    const { className: extractedClassName, ...contentProps } = extractProps(
-      restProps,
-      sheetPropDefs,
-    );
-
-    // Dev-only a11y guard: ensure label is provided via Title or aria-label
-    if (process.env.NODE_ENV !== 'production') {
-      const children = (contentProps as any).children as React.ReactNode;
-      const hasAriaLabel = typeof (contentProps as any)['aria-label'] === 'string';
-      let hasTitle = false;
-      if (children) {
-        for (const child of React.Children.toArray(children)) {
-          if (React.isValidElement(child) && child.type === Title) {
-            hasTitle = true;
-            break;
-          }
-        }
+const Content = React.forwardRef<SheetContentElement, SheetContentProps>((allProps, forwardedRef) => {
+  const { side = 'start', forceMount, container, className, ...ownProps } = allProps;
+  const restProps = useThemeSizeProps(ownProps, sheetPropDefs.size);
+  const normalizedSideMap: Record<SheetSide, 'start' | 'end' | 'top' | 'bottom'> = {
+    left: 'start',
+    right: 'end',
+    start: 'start',
+    end: 'end',
+    top: 'top',
+    bottom: 'bottom',
+  };
+  const normalizedSide = normalizedSideMap[side];
+  // Size/width/height class names come from the dialog defs — see `sheetPropDefs`.
+  const { className: extractedClassName, ...contentProps } = extractProps(restProps, sheetPropDefs);
+
+  // Dev-only a11y guard: the panel needs a name. A Sheet.Title anywhere inside counts it
+  // in a layout effect, which runs before this ref is attached, so nesting doesn't matter.
+  const titleCountRef = React.useRef(0);
+  const combinedRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
       }
-      if (!hasTitle && !hasAriaLabel) {
-        console.warn(
-          'Sheet.Content: Missing accessible name. Include Sheet.Title as a child or provide aria-label.',
-        );
-      }
-    }
-
-    // Focus management and stuck pointer-events cleanup like Dialog
-    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 as React.MutableRefObject<HTMLDivElement | null>).current = node;
-        }
-      },
-      [forwardedRef],
-    );
-
-    useBodyPointerEventsCleanup();
-
-    React.useEffect(() => {
-      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();
-          }
+      if (process.env.NODE_ENV !== 'production' && node) {
+        const hasName = titleCountRef.current > 0 || Boolean(node.getAttribute('aria-label')) || Boolean(node.getAttribute('aria-labelledby'));
+        if (!hasName) {
+          console.warn('Sheet.Content: Missing accessible name. Include Sheet.Title inside it or provide aria-label.');
         }
-      };
-
-      content.addEventListener('keydown', handleKeyDown);
-      firstElement.focus();
+      }
+    },
+    [forwardedRef],
+  );
 
-      return () => {
-        content.removeEventListener('keydown', handleKeyDown);
-      };
-    }, []);
+  useBodyPointerEventsCleanup();
 
-    return (
-      <DialogPrimitive.Portal container={container} forceMount={forceMount}>
+  return (
+    <DialogPrimitive.Portal container={container} forceMount={forceMount}>
+      <SheetTitleCountContext.Provider value={titleCountRef}>
         <Theme asChild>
           <DialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-DialogOverlay kui-SheetOverlay">
             <DialogPrimitive.Content
               {...contentProps}
               ref={combinedRef}
-              className={classNames(
-                'kui-BaseDialogContent',
-                'kui-SheetContent',
-                className,
-                extractedClassName,
-              )}
+              className={classNames('kui-BaseDialogContent', 'kui-SheetContent', className, extractedClassName)}
               data-side={normalizedSide}
-              tabIndex={-1}
-              role="dialog"
               aria-modal="true"
             />
           </DialogPrimitive.Overlay>
         </Theme>
-      </DialogPrimitive.Portal>
-    );
-  },
-);
+      </SheetTitleCountContext.Provider>
+    </DialogPrimitive.Portal>
+  );
+});
 Content.displayName = 'Sheet.Content';
 
 // Title - renders as Heading with sensible defaults
 type SheetTitleElement = React.ElementRef<typeof Heading>;
 type SheetTitleProps = HeadingProps;
 /** Accessible title for the Sheet. Renders as Heading with sensible defaults. */
-const Title = React.forwardRef<SheetTitleElement, SheetTitleProps>(
-  ({ size = '4', weight = 'medium', ...props }, ref) => (
+const Title = React.forwardRef<SheetTitleElement, SheetTitleProps>(({ size = '4', weight = 'medium', ...props }, ref) => {
+  const titleCountRef = React.useContext(SheetTitleCountContext);
+  React.useLayoutEffect(() => {
+    if (!titleCountRef) return;
+    titleCountRef.current += 1;
+    return () => {
+      titleCountRef.current -= 1;
+    };
+  }, [titleCountRef]);
+  return (
     <DialogPrimitive.Title asChild>
       <Heading ref={ref} size={size} weight={weight} {...props} />
     </DialogPrimitive.Title>
-  ),
-);
+  );
+});
 Title.displayName = 'Sheet.Title';
 
 // Description - renders as Text with sensible defaults
 type SheetDescriptionElement = React.ElementRef<typeof Text>;
 type SheetDescriptionProps = React.ComponentPropsWithoutRef<typeof Text>;
 /** Supplementary description text for Sheet content. Renders as Text with sensible defaults. */
-const Description = React.forwardRef<SheetDescriptionElement, SheetDescriptionProps>(
-  ({ size = '2', emphasis = 'medium', ...rest }, ref) => (
-    <DialogPrimitive.Description asChild>
-      <Text ref={ref} size={size} emphasis={emphasis} {...rest} />
-    </DialogPrimitive.Description>
-  ),
-);
+const Description = React.forwardRef<SheetDescriptionElement, SheetDescriptionProps>(({ size = '2', emphasis = 'medium', ...rest }, ref) => (
+  <DialogPrimitive.Description asChild>
+    <Text ref={ref} size={size} emphasis={emphasis} {...rest} />
+  </DialogPrimitive.Description>
+));
 Description.displayName = 'Sheet.Description';
 
 type SheetCloseElement = React.ElementRef<typeof DialogPrimitive.Close>;
-interface SheetCloseProps
-  extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {}
+interface SheetCloseProps extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {}
 /** Close button for the Sheet. Expects a single element child rendered via `asChild`. */
-const Close = React.forwardRef<SheetCloseElement, SheetCloseProps>(
-  ({ children, ...props }, ref) => (
-    <DialogPrimitive.Close {...props} ref={ref} asChild>
-      {requireReactElement(children)}
-    </DialogPrimitive.Close>
-  ),
-);
+const Close = React.forwardRef<SheetCloseElement, SheetCloseProps>(({ children, ...props }, ref) => (
+  <DialogPrimitive.Close {...props} ref={ref} asChild>
+    {requireReactElement(children)}
+  </DialogPrimitive.Close>
+));
 Close.displayName = 'Sheet.Close';
 
 export { Root, Trigger, Content, Title, Description, Close };