analytica-frontend-lib 1.0.53 → 1.0.54

package/dist/index.mjs

@@ -3094,7 +3094,7 @@ var MenuLabel = forwardRef9(({ className, inset, store: _store, ...props }, ref)
   );
 });
 MenuLabel.displayName = "MenuLabel";
-var MenuContent = forwardRef9(
+var DropdownMenuContent = forwardRef9(
   ({
     className,
     align = "start",
@@ -3147,7 +3147,7 @@ var MenuContent = forwardRef9(
     );
   }
 );
-MenuContent.displayName = "MenuContent";
+DropdownMenuContent.displayName = "DropdownMenuContent";
 var DropdownMenuItem = forwardRef9(
   ({
     className,
@@ -3676,7 +3676,7 @@ var useMenuStore = (externalStore) => {
 };
 var VARIANT_CLASSES5 = {
   menu: "bg-background shadow-soft-shadow-1",
-  menu2: "overflow-x-auto scroll-smooth",
+  menu2: "",
   breadcrumb: ""
 };
 var Menu = forwardRef11(
@@ -3699,10 +3699,10 @@ var Menu = forwardRef11(
     useEffect5(() => {
       onValueChange?.(value);
     }, [value, onValueChange]);
-    const baseClasses = "w-full flex flex-row items-center gap-2 py-2 px-6";
+    const baseClasses = "w-full py-2 px-6 flex flex-row items-center justify-center";
     const variantClasses = VARIANT_CLASSES5[variant];
     return /* @__PURE__ */ jsx25(
-      "ul",
+      "div",
       {
         ref,
         className: `
@@ -3710,7 +3710,6 @@ var Menu = forwardRef11(
           ${variantClasses}
           ${className ?? ""}
         `,
-        style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
         ...props,
         children: injectStore3(children, store)
       }
@@ -3718,6 +3717,27 @@ var Menu = forwardRef11(
   }
 );
 Menu.displayName = "Menu";
+var MenuContent = forwardRef11(
+  ({ className, children, variant = "menu", ...props }, ref) => {
+    const baseClasses = "w-full flex flex-row items-center gap-2";
+    const variantClasses = variant === "menu2" ? "overflow-x-auto scroll-smooth" : "";
+    return /* @__PURE__ */ jsx25(
+      "ul",
+      {
+        ref,
+        className: `
+          ${baseClasses}
+          ${variantClasses}
+          ${className ?? ""}
+        `,
+        style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuContent.displayName = "MenuContent";
 var MenuItem = forwardRef11(
   ({
     className,
@@ -3818,6 +3838,90 @@ var MenuSeparator = forwardRef11(
   )
 );
 MenuSeparator.displayName = "MenuSeparator";
+var internalScroll = (container, direction) => {
+  if (!container) return;
+  container.scrollBy({
+    left: direction === "left" ? -150 : 150,
+    behavior: "smooth"
+  });
+};
+var internalCheckScroll = (container, setShowLeftArrow, setShowRightArrow) => {
+  if (!container) return;
+  const { scrollLeft, scrollWidth, clientWidth } = container;
+  setShowLeftArrow(scrollLeft > 0);
+  setShowRightArrow(scrollLeft + clientWidth < scrollWidth);
+};
+var MenuOverflow = ({
+  children,
+  className,
+  defaultValue,
+  value,
+  onValueChange,
+  ...props
+}) => {
+  const containerRef = useRef4(null);
+  const [showLeftArrow, setShowLeftArrow] = useState7(false);
+  const [showRightArrow, setShowRightArrow] = useState7(false);
+  useEffect5(() => {
+    const checkScroll = () => internalCheckScroll(
+      containerRef.current,
+      setShowLeftArrow,
+      setShowRightArrow
+    );
+    checkScroll();
+    const container = containerRef.current;
+    container?.addEventListener("scroll", checkScroll);
+    window.addEventListener("resize", checkScroll);
+    return () => {
+      container?.removeEventListener("scroll", checkScroll);
+      window.removeEventListener("resize", checkScroll);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      "data-testid": "menu-overflow-wrapper",
+      className: `relative w-full overflow-hidden ${className ?? ""}`,
+      children: [
+        showLeftArrow && /* @__PURE__ */ jsxs20(
+          "button",
+          {
+            onClick: () => internalScroll(containerRef.current, "left"),
+            className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
+            "data-testid": "scroll-left-button",
+            children: [
+              /* @__PURE__ */ jsx25(CaretLeft, { size: 16 }),
+              /* @__PURE__ */ jsx25("span", { className: "sr-only", children: "Scroll left" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx25(
+          Menu,
+          {
+            defaultValue,
+            onValueChange,
+            value,
+            variant: "menu2",
+            ...props,
+            children: /* @__PURE__ */ jsx25(MenuContent, { ref: containerRef, variant: "menu2", children })
+          }
+        ),
+        showRightArrow && /* @__PURE__ */ jsxs20(
+          "button",
+          {
+            onClick: () => internalScroll(containerRef.current, "right"),
+            className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
+            "data-testid": "scroll-right-button",
+            children: [
+              /* @__PURE__ */ jsx25(CaretRight, { size: 16 }),
+              /* @__PURE__ */ jsx25("span", { className: "sr-only", children: "Scroll right" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 var injectStore3 = (children, store) => Children3.map(children, (child) => {
   if (!isValidElement3(child)) return child;
   const typedChild = child;
@@ -4371,6 +4475,7 @@ export {
   Chips_default as Chips,
   Divider_default as Divider,
   DropdownMenu_default as DropdownMenu,
+  DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
@@ -4381,6 +4486,7 @@ export {
   MenuContent,
   MenuItem,
   MenuLabel,
+  MenuOverflow,
   MenuSeparator,
   Modal_default as Modal,
   NavButton_default as NavButton,