@octavius2929-personal/design-system 1.5.0 → 1.5.2

package/dist/index.js

@@ -2089,40 +2089,122 @@ import {
   useRef as useRef4,
   useState as useState6
 } from "react";
+import { createPortal } from "react-dom";
+
+// src/hooks/use-floating-position/index.ts
+import { useLayoutEffect } from "react";
+
+// src/hooks/use-floating-position/compute-position.ts
+function computeFloatingPosition({
+  anchorRect,
+  overlaySize,
+  viewport,
+  placement = "bottom",
+  align: align2 = "center",
+  offset = 4,
+  margin = 8
+}) {
+  const spaceBelow = viewport.height - anchorRect.bottom;
+  const spaceAbove = anchorRect.top;
+  const needed = overlaySize.height + offset;
+  const fitsBelow = spaceBelow >= needed;
+  const fitsAbove = spaceAbove >= needed;
+  let resolvedPlacement = placement;
+  if (placement === "bottom" && !fitsBelow && fitsAbove) {
+    resolvedPlacement = "top";
+  } else if (placement === "top" && !fitsAbove && fitsBelow) {
+    resolvedPlacement = "bottom";
+  }
+  const top = resolvedPlacement === "bottom" ? anchorRect.bottom + offset : anchorRect.top - offset - overlaySize.height;
+  let left;
+  if (align2 === "start") {
+    left = anchorRect.left;
+  } else if (align2 === "end") {
+    left = anchorRect.right - overlaySize.width;
+  } else {
+    left = anchorRect.left + anchorRect.width / 2 - overlaySize.width / 2;
+  }
+  const minLeft = margin;
+  const maxLeft = viewport.width - overlaySize.width - margin;
+  left = maxLeft < minLeft ? minLeft : Math.min(Math.max(left, minLeft), maxLeft);
+  return { placement: resolvedPlacement, top, left };
+}
+
+// src/hooks/use-floating-position/index.ts
+function useFloatingPosition(anchorRef, overlayRef, { open, placement, align: align2, offset, margin }) {
+  useLayoutEffect(() => {
+    if (!open) return;
+    const recalc = () => {
+      const anchor = anchorRef.current;
+      const overlay2 = overlayRef.current;
+      if (!anchor || !overlay2) return;
+      const next = computeFloatingPosition({
+        anchorRect: anchor.getBoundingClientRect(),
+        overlaySize: { width: overlay2.offsetWidth, height: overlay2.offsetHeight },
+        viewport: { width: document.documentElement.clientWidth, height: window.innerHeight },
+        placement,
+        align: align2,
+        offset,
+        margin
+      });
+      overlay2.style.top = `${next.top}px`;
+      overlay2.style.left = `${next.left}px`;
+      overlay2.style.visibility = "visible";
+    };
+    recalc();
+    window.addEventListener("scroll", recalc, true);
+    window.addEventListener("resize", recalc);
+    return () => {
+      window.removeEventListener("scroll", recalc, true);
+      window.removeEventListener("resize", recalc);
+    };
+  }, [open, placement, align2, offset, margin, anchorRef, overlayRef]);
+}
 
 // src/components/tooltip/use-styles.ts
 import { useMemo as useMemo23 } from "react";
 
 // src/components/tooltip/use-styles.css.ts
 var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__1qa7atn2";
-var placement = { top: "use-styles_placement_top__h9kvh2", bottom: "use-styles_placement_bottom__h9kvh3" };
 var wrapper = "use-styles_wrapper__h9kvh0";
 
 // src/components/tooltip/use-styles.ts
-function useStyles19({
-  placement: placement2 = "top"
-}) {
+function useStyles19() {
   const { themeClass } = useTheme();
   const wrapper4 = useMemo23(
     () => [themeClass, wrapper].filter(Boolean).join(" "),
     [themeClass]
   );
-  const bubble2 = useMemo23(
-    () => [bubble, placement[placement2]].filter(Boolean).join(" "),
-    [placement2]
-  );
+  const bubble2 = useMemo23(() => [themeClass, bubble].filter(Boolean).join(" "), [themeClass]);
   return { wrapper: wrapper4, bubble: bubble2 };
 }
 
 // src/components/tooltip/index.tsx
 import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 var HIDE_DELAY = 120;
-var Tooltip = forwardRef21(function Tooltip2({ label: label8, children, placement: placement2, testId }, ref) {
+var GAP = 4;
+function assignRef(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+var Tooltip = forwardRef21(function Tooltip2({ label: label8, children, placement = "top", testId }, ref) {
   const [open, setOpen] = useState6(false);
   const tooltipId = useId3();
-  const { wrapper: wrapper4, bubble: bubble2 } = useStyles19({ placement: placement2 });
+  const { wrapper: wrapper4, bubble: bubble2 } = useStyles19();
   const { testId: dataTestId, slot } = useTestId("feedback", testId);
   const hideTimer = useRef4(null);
+  const wrapperRef = useRef4(null);
+  const setWrapperRef = (node) => {
+    wrapperRef.current = node;
+    assignRef(ref, node);
+  };
+  const bubbleRef = useRef4(null);
+  useFloatingPosition(wrapperRef, bubbleRef, {
+    open,
+    placement,
+    align: "center",
+    offset: GAP
+  });
   const clearHide = () => {
     if (hideTimer.current) {
       clearTimeout(hideTimer.current);
@@ -2158,7 +2240,7 @@ var Tooltip = forwardRef21(function Tooltip2({ label: label8, children, placemen
   return /* @__PURE__ */ jsxs19(
     "span",
     {
-      ref,
+      ref: setWrapperRef,
       className: wrapper4,
       "data-testid": dataTestId,
       onMouseEnter: show,
@@ -2168,18 +2250,22 @@ var Tooltip = forwardRef21(function Tooltip2({ label: label8, children, placemen
       onKeyDown: handleKeyDown,
       children: [
         trigger2,
-        open && /* @__PURE__ */ jsx31(
-          "span",
-          {
-            id: tooltipId,
-            role: "tooltip",
-            className: bubble2,
-            "data-testid": slot("bubble"),
-            onMouseEnter: show,
-            onMouseLeave: scheduleHide,
-            children: label8
-          }
-        )
+        open && typeof document !== "undefined" ? createPortal(
+          /* @__PURE__ */ jsx31(
+            "span",
+            {
+              ref: bubbleRef,
+              id: tooltipId,
+              role: "tooltip",
+              className: bubble2,
+              "data-testid": slot("bubble"),
+              onMouseEnter: show,
+              onMouseLeave: scheduleHide,
+              children: label8
+            }
+          ),
+          document.body
+        ) : null
       ]
     }
   );
@@ -2897,11 +2983,12 @@ var Tabs = forwardRef28(function Tabs2({ items, value, onChange, testId, ...rest
 import {
   cloneElement as cloneElement2,
   forwardRef as forwardRef29,
+  useCallback as useCallback2,
   useEffect as useEffect6,
-  useLayoutEffect,
   useRef as useRef7,
   useState as useState9
 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/menu/use-styles.ts
 import { useMemo as useMemo31 } from "react";
@@ -2918,7 +3005,7 @@ function useStyles27() {
   return useMemo31(
     () => ({
       wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
-      list: list2,
+      list: [themeClass, list2].filter(Boolean).join(" "),
       item: item2,
       dangerItem: [item2, danger].join(" ")
     }),
@@ -2929,7 +3016,9 @@ function useStyles27() {
 // src/components/menu/index.tsx
 import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
 var ICON_SIZE4 = 16;
-function assignRef(ref, value) {
+var GAP2 = 4;
+var TYPEAHEAD_RESET_MS = 500;
+function assignRef2(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
@@ -2937,15 +3026,28 @@ var Menu = forwardRef29(function Menu2({ trigger: trigger2, items, testId }, ref
   const { wrapper: wrapper4, list: list3, item: item3, dangerItem } = useStyles27();
   const { testId: rootTestId, slot } = useTestId("menu", testId);
   const [open, setOpen] = useState9(false);
-  const [alignEnd, setAlignEnd] = useState9(false);
   const rootRef = useRef7(null);
   const setRootRef = (node) => {
     rootRef.current = node;
-    assignRef(ref, node);
+    assignRef2(ref, node);
   };
   const listRef = useRef7(null);
   const triggerRef = useRef7(null);
-  const getMenuItems = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
+  const pendingFocusRef = useRef7("first");
+  const typeAheadRef = useRef7({
+    query: "",
+    timeout: null
+  });
+  useFloatingPosition(rootRef, listRef, {
+    open,
+    placement: "bottom",
+    align: "start",
+    offset: GAP2
+  });
+  const getMenuItems = useCallback2(
+    () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []),
+    []
+  );
   const focusItemAt = (index) => {
     const menuItems = getMenuItems();
     if (menuItems.length === 0) return;
@@ -2956,23 +3058,41 @@ var Menu = forwardRef29(function Menu2({ trigger: trigger2, items, testId }, ref
     setOpen(false);
     triggerRef.current?.focus();
   };
-  useLayoutEffect(() => {
-    if (!open) {
-      setAlignEnd(false);
-      return;
+  const resetTypeAhead = useCallback2(() => {
+    if (typeAheadRef.current.timeout) clearTimeout(typeAheadRef.current.timeout);
+    typeAheadRef.current = { query: "", timeout: null };
+  }, []);
+  const handleTypeAhead = (key) => {
+    if (typeAheadRef.current.timeout) clearTimeout(typeAheadRef.current.timeout);
+    const query = typeAheadRef.current.query + key.toLowerCase();
+    typeAheadRef.current.query = query;
+    typeAheadRef.current.timeout = setTimeout(() => {
+      typeAheadRef.current = { query: "", timeout: null };
+    }, TYPEAHEAD_RESET_MS);
+    const menuItems = getMenuItems();
+    if (menuItems.length === 0) return;
+    const current2 = menuItems.indexOf(document.activeElement);
+    const startIndex = current2 === -1 ? 0 : current2 + 1;
+    for (let i = 0; i < menuItems.length; i++) {
+      const candidate = menuItems[(startIndex + i) % menuItems.length];
+      const text2 = candidate?.textContent?.trim().toLowerCase() ?? "";
+      if (text2.startsWith(query)) {
+        candidate?.focus();
+        return;
+      }
     }
-    const listEl = listRef.current;
-    const rootEl = rootRef.current;
-    if (!listEl || !rootEl) return;
-    const rootLeft = rootEl.getBoundingClientRect().left;
-    const viewport = document.documentElement.clientWidth;
-    setAlignEnd(rootLeft + listEl.offsetWidth > viewport);
-  }, [open]);
+  };
   useEffect6(() => {
     if (!open) return;
-    listRef.current?.querySelector('[role="menuitem"]')?.focus();
+    const menuItems = getMenuItems();
+    const index = pendingFocusRef.current === "last" ? menuItems.length - 1 : 0;
+    menuItems[index]?.focus();
+    pendingFocusRef.current = "first";
     const onDocMouseDown = (event) => {
-      if (rootRef.current && !rootRef.current.contains(event.target)) {
+      const target = event.target;
+      const insideTrigger = rootRef.current?.contains(target) ?? false;
+      const insideList = listRef.current?.contains(target) ?? false;
+      if (!insideTrigger && !insideList) {
         setOpen(false);
       }
     };
@@ -2987,8 +3107,9 @@ var Menu = forwardRef29(function Menu2({ trigger: trigger2, items, testId }, ref
     return () => {
       document.removeEventListener("mousedown", onDocMouseDown);
       document.removeEventListener("keydown", onKeyDown);
+      resetTypeAhead();
     };
-  }, [open]);
+  }, [open, getMenuItems, resetTypeAhead]);
   const onMenuKeyDown = (event) => {
     const menuItems = getMenuItems();
     const current2 = menuItems.indexOf(document.activeElement);
@@ -3016,13 +3137,45 @@ var Menu = forwardRef29(function Menu2({ trigger: trigger2, items, testId }, ref
       case "Tab":
         setOpen(false);
         break;
+      case " ":
+        event.preventDefault();
+        if (typeAheadRef.current.query.length > 0) {
+          handleTypeAhead(event.key);
+        } else {
+          menuItems[current2]?.click();
+        }
+        break;
+      default:
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+          event.preventDefault();
+          handleTypeAhead(event.key);
+        }
+        break;
     }
   };
   const triggerProps = trigger2.props;
   const consumerRef = trigger2.ref;
   const mergedTriggerRef = (node) => {
     triggerRef.current = node;
-    assignRef(consumerRef, node);
+    assignRef2(consumerRef, node);
+  };
+  const handleTriggerKeyDown = (event) => {
+    triggerProps.onKeyDown?.(event);
+    if (open) return;
+    switch (event.key) {
+      case "Enter":
+      case " ":
+      case "ArrowDown":
+        event.preventDefault();
+        pendingFocusRef.current = "first";
+        setOpen(true);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        pendingFocusRef.current = "last";
+        setOpen(true);
+        break;
+    }
   };
   const clonedTrigger = cloneElement2(trigger2, {
     ref: mergedTriggerRef,
@@ -3030,8 +3183,12 @@ var Menu = forwardRef29(function Menu2({ trigger: trigger2, items, testId }, ref
     "aria-expanded": open,
     onClick: (event) => {
       triggerProps.onClick?.(event);
-      setOpen((prev) => !prev);
-    }
+      setOpen((prev) => {
+        if (!prev) pendingFocusRef.current = "first";
+        return !prev;
+      });
+    },
+    onKeyDown: handleTriggerKeyDown
   });
   return /* @__PURE__ */ jsxs27(
     "div",
@@ -3042,39 +3199,41 @@ var Menu = forwardRef29(function Menu2({ trigger: trigger2, items, testId }, ref
       "data-state": open ? "open" : "closed",
       children: [
         clonedTrigger,
-        open && /* @__PURE__ */ jsx42(
-          "div",
-          {
-            ref: listRef,
-            role: "menu",
-            className: list3,
-            "data-align": alignEnd ? "end" : "start",
-            "data-testid": slot("list"),
-            onKeyDown: onMenuKeyDown,
-            children: items.map((entry, index) => {
-              const ItemIcon = entry.icon;
-              return /* @__PURE__ */ jsxs27(
-                "button",
-                {
-                  type: "button",
-                  role: "menuitem",
-                  tabIndex: -1,
-                  className: entry.danger ? dangerItem : item3,
-                  "data-testid": slot(`item-${index}`),
-                  onClick: () => {
-                    entry.onClick?.();
-                    setOpen(false);
+        open && typeof document !== "undefined" ? createPortal2(
+          /* @__PURE__ */ jsx42(
+            "div",
+            {
+              ref: listRef,
+              role: "menu",
+              className: list3,
+              "data-testid": slot("list"),
+              onKeyDown: onMenuKeyDown,
+              children: items.map((entry, index) => {
+                const ItemIcon = entry.icon;
+                return /* @__PURE__ */ jsxs27(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    tabIndex: -1,
+                    className: entry.danger ? dangerItem : item3,
+                    "data-testid": slot(`item-${index}`),
+                    onClick: () => {
+                      entry.onClick?.();
+                      setOpen(false);
+                    },
+                    children: [
+                      ItemIcon ? /* @__PURE__ */ jsx42(ItemIcon, { size: ICON_SIZE4 }) : null,
+                      entry.label
+                    ]
                   },
-                  children: [
-                    ItemIcon ? /* @__PURE__ */ jsx42(ItemIcon, { size: ICON_SIZE4 }) : null,
-                    entry.label
-                  ]
-                },
-                index
-              );
-            })
-          }
-        )
+                  index
+                );
+              })
+            }
+          ),
+          document.body
+        ) : null
       ]
     }
   );
@@ -3087,7 +3246,7 @@ import {
   useId as useId6,
   useRef as useRef8
 } from "react";
-import { createPortal } from "react-dom";
+import { createPortal as createPortal3 } from "react-dom";
 
 // src/components/dialog/use-styles.ts
 import { useMemo as useMemo32 } from "react";
@@ -3115,7 +3274,7 @@ function useStyles28() {
 // src/components/dialog/index.tsx
 import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function assignRef2(ref, value) {
+function assignRef3(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
@@ -3125,7 +3284,7 @@ var Dialog = forwardRef30(function Dialog2({ open, onClose, title, actions: acti
   const surfaceRef = useRef8(null);
   const setSurfaceRef = (node) => {
     surfaceRef.current = node;
-    assignRef2(ref, node);
+    assignRef3(ref, node);
   };
   const previouslyFocused = useRef8(null);
   const generatedId = useId6();
@@ -3180,7 +3339,7 @@ var Dialog = forwardRef30(function Dialog2({ open, onClose, title, actions: acti
       first.focus();
     }
   };
-  return createPortal(
+  return createPortal3(
     // biome-ignore lint/a11y/useKeyWithClickEvents: ESC handled by a document keydown listener.
     /* @__PURE__ */ jsx43("div", { className: overlay2, "data-testid": slot("overlay"), onClick: onClose, children: /* @__PURE__ */ jsxs28(
       "div",
@@ -3208,11 +3367,11 @@ var Dialog = forwardRef30(function Dialog2({ open, onClose, title, actions: acti
 // src/components/snackbar/index.tsx
 import {
   forwardRef as forwardRef31,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useEffect as useEffect8,
   useRef as useRef9
 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
+import { createPortal as createPortal4 } from "react-dom";
 
 // src/components/snackbar/use-styles.ts
 import { useMemo as useMemo33 } from "react";
@@ -3259,13 +3418,13 @@ var Snackbar = forwardRef31(function Snackbar2({
   }, [onClose]);
   const interactingRef = useRef9({ hover: false, focus: false });
   const timeoutRef = useRef9();
-  const clearTimer = useCallback2(() => {
+  const clearTimer = useCallback3(() => {
     if (timeoutRef.current !== void 0) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = void 0;
     }
   }, []);
-  const scheduleTimer = useCallback2(() => {
+  const scheduleTimer = useCallback3(() => {
     clearTimer();
     if (!open || duration == null || !onCloseRef.current) return;
     if (interactingRef.current.hover || interactingRef.current.focus) return;
@@ -3298,7 +3457,7 @@ var Snackbar = forwardRef31(function Snackbar2({
     onBlur?.(event);
   };
   if (!open || typeof document === "undefined") return null;
-  return createPortal2(
+  return createPortal4(
     /* @__PURE__ */ jsxs29(
       "div",
       {