@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.29

package/dist/components/Menu/MenuContent.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { forwardRef, useRef, useState, useId, isValidElement, useImperativeHandle, cloneElement, useCallback, useEffect, useMemo } from "react";
 import { Popup } from "../Popup/index.js";
@@ -9,175 +9,229 @@ import { searchChildren, getListItem } from "./helpers.js";
 import { useMenu, DisclosureContext } from "./MenuProvider.js";
 import { menu, menuList, menuContent, menuSearchInput, menuFooter, heightAvailableSpace, heightMenu } from "./styles.css.js";
 const SPACE_DISCLOSURE_POPUP = 24;
-const Menu = forwardRef(({
-  id,
-  ariaLabel = "Menu",
-  children,
-  disclosure,
-  hasArrow = false,
-  placement = "bottom",
-  className,
-  "data-testid": dataTestId,
-  maxHeight,
-  portalTarget = document.body,
-  triggerMethod = "click",
-  dynamicDomRendering,
-  align,
-  searchable = false,
-  footer,
-  noShrink = false,
-  style
-}, ref) => {
-  const {
-    isVisible,
-    setIsVisible,
-    isNested,
-    disclosureRef,
-    menuRef,
-    setShouldBeVisible,
-    shouldBeVisible
-  } = useMenu();
-  const searchInputRef = useRef(null);
-  const [localChild, setLocalChild] = useState(null);
-  const [popupMaxHeight, setPopupMaxHeight] = useState(maxHeight ?? "30rem");
-  const contentRef = useRef(null);
-  const tempId = useId();
-  const finalId = `menu-${id ?? tempId}`;
-  const target = isValidElement(disclosure) ? disclosure : disclosure({
-    visible: isVisible
-  });
-  const innerRef = useRef(target);
-  useImperativeHandle(ref, () => innerRef.current);
-  const finalDisclosure = cloneElement(target, {
-    "aria-expanded": isVisible,
-    "aria-haspopup": "dialog",
-    onClick: (event) => {
-      target.props.onClick?.(event);
-      setIsVisible(!isVisible);
-    },
-    // @ts-expect-error not sure how to fix this
-    ref: disclosureRef
-  });
-  const onSearch = useCallback((value) => {
-    if (typeof children === "object") {
-      setLocalChild(searchChildren(children, value));
-    }
-  }, [children]);
-  useEffect(() => {
-    let timeout;
-    if (isVisible && searchable) {
-      timeout = setTimeout(() => {
-        searchInputRef.current?.focus();
-      }, 50);
-    }
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [isVisible, searchable]);
-  useEffect(() => {
-    if (disclosureRef.current && triggerMethod === "hover") {
-      const handler = (value) => {
-        setShouldBeVisible(value);
-      };
-      disclosureRef.current.addEventListener("focus", () => handler(true));
-      disclosureRef.current.addEventListener("mouseenter", () => handler(true));
-      disclosureRef.current.addEventListener("mouseleave", () => handler(false));
-      disclosureRef.current.addEventListener("keydown", (event) => {
-        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-          handler(false);
+const Menu = forwardRef(
+  ({
+    id,
+    ariaLabel = "Menu",
+    children,
+    disclosure,
+    hasArrow = false,
+    placement = "auto-bottom",
+    className,
+    "data-testid": dataTestId,
+    maxHeight,
+    portalTarget = document.body,
+    triggerMethod = "click",
+    dynamicDomRendering,
+    align,
+    searchable = false,
+    footer,
+    shrink,
+    style
+  }, ref) => {
+    const {
+      isVisible,
+      setIsVisible,
+      isNested,
+      disclosureRef,
+      menuRef,
+      setShouldBeVisible,
+      shouldBeVisible
+    } = useMenu();
+    const searchInputRef = useRef(null);
+    const [localChild, setLocalChild] = useState(null);
+    const [popupMaxHeight, setPopupMaxHeight] = useState(
+      maxHeight ?? "30rem"
+    );
+    const contentRef = useRef(null);
+    const tempId = useId();
+    const finalId = `menu-${id ?? tempId}`;
+    const target = isValidElement(
+      disclosure
+    ) ? disclosure : disclosure({ visible: isVisible });
+    const innerRef = useRef(target);
+    useImperativeHandle(ref, () => innerRef.current);
+    const finalDisclosure = cloneElement(target, {
+      "aria-expanded": isVisible,
+      "aria-haspopup": "dialog",
+      onClick: (event) => {
+        target.props.onClick?.(event);
+        setIsVisible(!isVisible);
+      },
+      // @ts-expect-error not sure how to fix this
+      ref: disclosureRef
+    });
+    const onSearch = useCallback(
+      (value) => {
+        if (typeof children === "object") {
+          setLocalChild(searchChildren(children, value));
         }
-      });
+      },
+      [children]
+    );
+    useEffect(() => {
+      let timeout;
+      if (isVisible && searchable) {
+        timeout = setTimeout(() => {
+          searchInputRef.current?.focus();
+        }, 50);
+      }
       return () => {
-        window.removeEventListener("focus", () => handler(void 0));
-        window.removeEventListener("mouseenter", () => handler(void 0));
-        window.removeEventListener("mouseleave", () => handler(void 0));
-        window.removeEventListener("keydown", () => handler(void 0));
+        if (timeout) {
+          clearTimeout(timeout);
+        }
       };
-    }
-    return void 0;
-  }, [setShouldBeVisible, disclosureRef, triggerMethod]);
-  const finalChild = useMemo(() => {
-    if (typeof children === "function") {
-      return children({
-        toggle: () => setIsVisible(!isVisible)
-      });
-    }
-    if (searchable && localChild) {
-      return localChild;
-    }
-    return children;
-  }, [children, isVisible, localChild, searchable, setIsVisible]);
-  const handleTabOpen = (event) => {
-    if (contentRef.current) {
-      const listItem = getListItem([...contentRef.current.children]);
-      if (listItem && isVisible && ["Tab", "ArrowDown"].includes(event.key)) {
-        event?.preventDefault();
-        listItem[0]?.focus();
+    }, [isVisible, searchable]);
+    useEffect(() => {
+      if (disclosureRef.current && triggerMethod === "hover") {
+        const handler = (value) => {
+          setShouldBeVisible(value);
+        };
+        disclosureRef.current.addEventListener("focus", () => handler(true));
+        disclosureRef.current.addEventListener(
+          "mouseenter",
+          () => handler(true)
+        );
+        disclosureRef.current.addEventListener(
+          "mouseleave",
+          () => handler(false)
+        );
+        disclosureRef.current.addEventListener("keydown", (event) => {
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            handler(false);
+          }
+        });
+        return () => {
+          window.removeEventListener("focus", () => handler(void 0));
+          window.removeEventListener("mouseenter", () => handler(void 0));
+          window.removeEventListener("mouseleave", () => handler(void 0));
+          window.removeEventListener("keydown", () => handler(void 0));
+        };
       }
-    }
-  };
-  const handleKeyDown = (event) => {
-    if (contentRef.current) {
-      const listItem = getListItem([...contentRef.current.children]);
-      if (listItem) {
-        const currentElement = listItem.find((item) => item === document.activeElement);
-        if (currentElement) {
-          if (event.key === "ArrowDown") {
-            event.preventDefault();
-            const indexOfCurrent = listItem.indexOf(currentElement);
-            if (indexOfCurrent < listItem.length - 1) {
-              listItem[indexOfCurrent + 1].focus();
-            } else {
-              listItem[0].focus();
-            }
-          } else if (event.key === "ArrowUp") {
-            event.preventDefault();
-            const indexOfCurrent = listItem.indexOf(currentElement);
-            if (indexOfCurrent > 0) {
-              listItem[indexOfCurrent - 1].focus();
-            } else {
-              listItem[listItem.length - 1].focus();
+      return void 0;
+    }, [setShouldBeVisible, disclosureRef, triggerMethod]);
+    const finalChild = useMemo(() => {
+      if (typeof children === "function") {
+        return children({ toggle: () => setIsVisible(!isVisible) });
+      }
+      if (searchable && localChild) {
+        return localChild;
+      }
+      return children;
+    }, [children, isVisible, localChild, searchable, setIsVisible]);
+    const handleTabOpen = (event) => {
+      if (contentRef.current) {
+        const listItem = getListItem([...contentRef.current.children]);
+        if (listItem && isVisible && ["Tab", "ArrowDown"].includes(event.key)) {
+          event?.preventDefault();
+          listItem[0]?.focus();
+        }
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (contentRef.current) {
+        const listItem = getListItem([...contentRef.current.children]);
+        if (listItem) {
+          const currentElement = listItem.find(
+            (item) => item === document.activeElement
+          );
+          if (currentElement) {
+            if (event.key === "ArrowDown") {
+              event.preventDefault();
+              const indexOfCurrent = listItem.indexOf(currentElement);
+              if (indexOfCurrent < listItem.length - 1) {
+                listItem[indexOfCurrent + 1].focus();
+              } else {
+                listItem[0].focus();
+              }
+            } else if (event.key === "ArrowUp") {
+              event.preventDefault();
+              const indexOfCurrent = listItem.indexOf(currentElement);
+              if (indexOfCurrent > 0) {
+                listItem[indexOfCurrent - 1].focus();
+              } else {
+                listItem.at(-1)?.focus();
+              }
+            } else if (event.key === "ArrowLeft" && triggerMethod === "hover") {
+              disclosureRef.current?.focus();
+              setShouldBeVisible(void 0);
             }
-          } else if (event.key === "ArrowLeft" && triggerMethod === "hover") {
-            disclosureRef.current?.focus();
-            setShouldBeVisible(void 0);
           }
         }
       }
-    }
-  };
-  useEffect(() => {
-    if (disclosureRef.current && placement === "bottom" && !noShrink) {
-      const disclosureRect = disclosureRef.current.getBoundingClientRect();
-      const disclosureBottom = disclosureRect.bottom;
-      const targetSize = portalTarget.getBoundingClientRect().bottom;
-      const availableSpace = targetSize - disclosureBottom - SPACE_DISCLOSURE_POPUP;
-      setPopupMaxHeight(`${availableSpace}px`);
-    }
-  }, [isVisible, portalTarget, disclosureRef, placement, noShrink]);
-  return /* @__PURE__ */ jsx(Popup, { align, "aria-label": ariaLabel, className: `${className ? `${className} ` : ""}${menu({
-    arrow: hasArrow,
-    searchable
-  })}`, debounceDelay: triggerMethod === "hover" ? 250 : 0, dynamicDomRendering, hasArrow, hideOnClickOutside: true, id: finalId, maxHeight: maxHeight ?? "fit-content", onClose: () => {
-    setIsVisible(false);
-    setLocalChild(null);
-    if (triggerMethod === "click") {
-      disclosureRef.current?.focus();
-    }
-    setShouldBeVisible(void 0);
-  }, onKeyDown: handleTabOpen, placement: isNested ? "nested-menu" : placement, portalTarget, ref: menuRef, role: "dialog", style, tabIndex: -1, text: /* @__PURE__ */ jsxs(Stack, { className: `${className ? `${className} ` : ""}${menuList}`, "data-testid": dataTestId, onKeyDown: handleKeyDown, onMouseEnter: () => setShouldBeVisible(true), onMouseLeave: () => setShouldBeVisible(false), role: "menu", style: assignInlineVars({
-    [heightMenu]: maxHeight ?? "30rem",
-    [heightAvailableSpace]: popupMaxHeight
-  }), children: [
-    /* @__PURE__ */ jsxs(Stack, { className: menuContent, ref: contentRef, children: [
-      searchable && typeof children !== "function" ? /* @__PURE__ */ jsx(SearchInput, { className: menuSearchInput, onSearch, ref: searchInputRef, size: "small" }) : null,
-      finalChild
-    ] }),
-    footer ? /* @__PURE__ */ jsx(Stack, { className: menuFooter, children: footer }) : null
-  ] }), visible: triggerMethod === "click" ? isVisible : shouldBeVisible, children: /* @__PURE__ */ jsx(DisclosureContext.Provider, { value: true, children: finalDisclosure }) });
-});
+    };
+    useEffect(() => {
+      if (disclosureRef.current && placement === "bottom" && shrink) {
+        const disclosureRect = disclosureRef.current.getBoundingClientRect();
+        const disclosureBottom = disclosureRect.bottom;
+        const targetSize = portalTarget.getBoundingClientRect().bottom;
+        const availableSpace = targetSize - disclosureBottom - SPACE_DISCLOSURE_POPUP;
+        setPopupMaxHeight(`${availableSpace}px`);
+      }
+    }, [isVisible, portalTarget, disclosureRef, placement, shrink]);
+    return /* @__PURE__ */ jsx(
+      Popup,
+      {
+        align,
+        "aria-label": ariaLabel,
+        className: `${className ? `${className} ` : ""}${menu({ arrow: hasArrow, searchable })}`,
+        debounceDelay: triggerMethod === "hover" ? 250 : 0,
+        dynamicDomRendering,
+        hasArrow,
+        hideOnClickOutside: true,
+        id: finalId,
+        maxHeight: maxHeight ?? "fit-content",
+        onClose: () => {
+          setIsVisible(false);
+          setLocalChild(null);
+          if (triggerMethod === "click") {
+            disclosureRef.current?.focus();
+          }
+          setShouldBeVisible(void 0);
+        },
+        onKeyDown: handleTabOpen,
+        placement: isNested ? "nested-menu" : placement,
+        portalTarget,
+        ref: menuRef,
+        role: "dialog",
+        style,
+        tabIndex: -1,
+        text: /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            className: `${className ? `${className} ` : ""}${menuList}`,
+            "data-testid": dataTestId,
+            onKeyDown: handleKeyDown,
+            onMouseEnter: () => setShouldBeVisible(true),
+            onMouseLeave: () => setShouldBeVisible(false),
+            role: "menu",
+            style: assignInlineVars({
+              [heightMenu]: maxHeight ?? "30rem",
+              [heightAvailableSpace]: popupMaxHeight
+            }),
+            children: [
+              /* @__PURE__ */ jsxs(Stack, { className: menuContent, ref: contentRef, children: [
+                searchable && typeof children !== "function" ? /* @__PURE__ */ jsx(
+                  SearchInput,
+                  {
+                    className: menuSearchInput,
+                    onSearch,
+                    ref: searchInputRef,
+                    size: "small"
+                  }
+                ) : null,
+                finalChild
+              ] }),
+              footer ? /* @__PURE__ */ jsx(Stack, { className: menuFooter, children: footer }) : null
+            ]
+          }
+        ),
+        visible: triggerMethod === "click" ? isVisible : shouldBeVisible,
+        children: /* @__PURE__ */ jsx(DisclosureContext.Provider, { value: true, children: finalDisclosure })
+      }
+    );
+  }
+);
 export {
   Menu
 };

package/dist/components/Menu/MenuProvider.d.ts

@@ -18,7 +18,7 @@ type MenuProviderProps = {
     parentDisclosureRef?: RefObject<HTMLButtonElement | null>;
     triggerMethod?: 'hover' | 'click';
 };
-export declare const MenuProvider: ({ hideOnClickItem, children, visible, parentDisclosureRef, }: MenuProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MenuProvider: ({ hideOnClickItem, children, visible, parentDisclosureRef, }: MenuProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DisclosureContext: import("react").Context<boolean>;
 export declare const useDisclosureContext: () => boolean;
 export {};

package/dist/components/Menu/MenuProvider.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useContext, useState, useRef, createContext, useMemo } from "react";
 const MenuContext = createContext(void 0);
 const useMenu = () => {
@@ -16,22 +16,35 @@ const MenuProvider = ({
   parentDisclosureRef
 }) => {
   const [isVisible, setIsVisible] = useState(visible);
-  const [shouldBeVisible, setShouldBeVisible] = useState(void 0);
+  const [shouldBeVisible, setShouldBeVisible] = useState(
+    void 0
+  );
   const disclosureRef = useRef(null);
   const menuRef = useRef(null);
   const parentMenu = useContext(MenuContext);
   const isNested = !!parentMenu;
-  const values = useMemo(() => ({
-    disclosureRef,
-    hideOnClickItem,
-    isNested,
-    isVisible,
-    menuRef,
-    parentDisclosureRef: parentDisclosureRef ?? parentMenu?.disclosureRef,
-    setIsVisible,
-    setShouldBeVisible,
-    shouldBeVisible
-  }), [hideOnClickItem, isVisible, isNested, parentDisclosureRef, parentMenu?.disclosureRef, shouldBeVisible, setShouldBeVisible]);
+  const values = useMemo(
+    () => ({
+      disclosureRef,
+      hideOnClickItem,
+      isNested,
+      isVisible,
+      menuRef,
+      parentDisclosureRef: parentDisclosureRef ?? parentMenu?.disclosureRef,
+      setIsVisible,
+      setShouldBeVisible,
+      shouldBeVisible
+    }),
+    [
+      hideOnClickItem,
+      isVisible,
+      isNested,
+      parentDisclosureRef,
+      parentMenu?.disclosureRef,
+      shouldBeVisible,
+      setShouldBeVisible
+    ]
+  );
   return /* @__PURE__ */ jsx(MenuContext.Provider, { value: values, children });
 };
 const DisclosureContext = createContext(false);

package/dist/components/Menu/components/Group.d.ts

@@ -9,5 +9,5 @@ type GroupProps = {
     emptyState?: ReactNode;
     style?: CSSProperties;
 };
-export declare const Group: ({ label, children, labelDescription, emptyState, style, }: GroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Group: ({ label, children, labelDescription, emptyState, style, }: GroupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Menu/components/Group.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Children } from "react";
 import { Stack } from "../../Stack/index.js";
 import { Text } from "../../Text/index.js";
@@ -14,7 +14,16 @@ const Group = ({
   const isChildrenEmpty = Children.count(children) === 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: menuGroup, style, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-      /* @__PURE__ */ jsx(Text, { as: "span", prominence: "weak", sentiment: "neutral", variant: "captionStrong", children: label }),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          prominence: "weak",
+          sentiment: "neutral",
+          variant: "captionStrong",
+          children: label
+        }
+      ),
       labelDescription || null
     ] }) }),
     isChildrenEmpty && emptyState ? emptyState : children