analytica-frontend-lib 1.0.53 → 1.0.55

package/dist/index.d.ts

@@ -21,9 +21,9 @@ export { default as ProgressCircle } from './ProgressCircle/index.js';
 export { default as Stepper } from './Stepper/index.js';
 export { default as Calendar } from './Calendar/index.js';
 export { default as Modal } from './Modal/index.js';
-export { default as DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuContent, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger } from './DropdownMenu/index.js';
+export { default as DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger } from './DropdownMenu/index.js';
 export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.js';
-export { default as Menu, MenuItem, MenuSeparator } from './Menu/index.js';
+export { default as Menu, MenuContent, MenuItem, MenuOverflow, MenuSeparator } from './Menu/index.js';
 export { CardActivesResults, CardPerformance, CardProgress, CardQuestions, CardResults, CardStatus, CardTopic } from './Card/index.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/index.js

@@ -35,6 +35,7 @@ __export(src_exports, {
   Chips: () => Chips_default,
   Divider: () => Divider_default,
   DropdownMenu: () => DropdownMenu_default,
+  DropdownMenuContent: () => DropdownMenuContent,
   DropdownMenuItem: () => DropdownMenuItem,
   DropdownMenuSeparator: () => DropdownMenuSeparator,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
@@ -45,6 +46,7 @@ __export(src_exports, {
   MenuContent: () => MenuContent,
   MenuItem: () => MenuItem,
   MenuLabel: () => MenuLabel,
+  MenuOverflow: () => MenuOverflow,
   MenuSeparator: () => MenuSeparator,
   Modal: () => Modal_default,
   NavButton: () => NavButton_default,
@@ -3137,7 +3139,7 @@ var MenuLabel = (0, import_react11.forwardRef)(({ className, inset, store: _stor
   );
 });
 MenuLabel.displayName = "MenuLabel";
-var MenuContent = (0, import_react11.forwardRef)(
+var DropdownMenuContent = (0, import_react11.forwardRef)(
   ({
     className,
     align = "start",
@@ -3190,7 +3192,7 @@ var MenuContent = (0, import_react11.forwardRef)(
     );
   }
 );
-MenuContent.displayName = "MenuContent";
+DropdownMenuContent.displayName = "DropdownMenuContent";
 var DropdownMenuItem = (0, import_react11.forwardRef)(
   ({
     className,
@@ -3703,7 +3705,7 @@ var useMenuStore = (externalStore) => {
 };
 var VARIANT_CLASSES5 = {
   menu: "bg-background shadow-soft-shadow-1",
-  menu2: "overflow-x-auto scroll-smooth",
+  menu2: "",
   breadcrumb: ""
 };
 var Menu = (0, import_react13.forwardRef)(
@@ -3726,10 +3728,10 @@ var Menu = (0, import_react13.forwardRef)(
     (0, import_react13.useEffect)(() => {
       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__ */ (0, import_jsx_runtime25.jsx)(
-      "ul",
+      "div",
       {
         ref,
         className: `
@@ -3737,7 +3739,6 @@ var Menu = (0, import_react13.forwardRef)(
           ${variantClasses}
           ${className ?? ""}
         `,
-        style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
         ...props,
         children: injectStore3(children, store)
       }
@@ -3745,6 +3746,27 @@ var Menu = (0, import_react13.forwardRef)(
   }
 );
 Menu.displayName = "Menu";
+var MenuContent = (0, import_react13.forwardRef)(
+  ({ 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__ */ (0, import_jsx_runtime25.jsx)(
+      "ul",
+      {
+        ref,
+        className: `
+          ${baseClasses}
+          ${variantClasses}
+          ${className ?? ""}
+        `,
+        style: variant === "menu2" ? { scrollbarWidth: "none", msOverflowStyle: "none" } : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuContent.displayName = "MenuContent";
 var MenuItem = (0, import_react13.forwardRef)(
   ({
     className,
@@ -3845,6 +3867,90 @@ var MenuSeparator = (0, import_react13.forwardRef)(
   )
 );
 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 = (0, import_react13.useRef)(null);
+  const [showLeftArrow, setShowLeftArrow] = (0, import_react13.useState)(false);
+  const [showRightArrow, setShowRightArrow] = (0, import_react13.useState)(false);
+  (0, import_react13.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime25.jsxs)(
+    "div",
+    {
+      "data-testid": "menu-overflow-wrapper",
+      className: `relative w-full overflow-hidden ${className ?? ""}`,
+      children: [
+        showLeftArrow && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+          "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__ */ (0, import_jsx_runtime25.jsx)(import_phosphor_react12.CaretLeft, { size: 16 }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Scroll left" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          Menu,
+          {
+            defaultValue,
+            onValueChange,
+            value,
+            variant: "menu2",
+            ...props,
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MenuContent, { ref: containerRef, variant: "menu2", children })
+          }
+        ),
+        showRightArrow && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+          "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__ */ (0, import_jsx_runtime25.jsx)(import_phosphor_react12.CaretRight, { size: 16 }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Scroll right" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 var injectStore3 = (children, store) => import_react13.Children.map(children, (child) => {
   if (!(0, import_react13.isValidElement)(child)) return child;
   const typedChild = child;
@@ -3904,7 +4010,7 @@ var CardActivesResults = (0, import_react14.forwardRef)(
       "div",
       {
         ref,
-        className: `w-full flex flex-col border border-border-50 bg-background rounded-xl ${className}`,
+        className: `w-full flex flex-col border border-border-50  bg-background rounded-xl ${className}`,
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
@@ -4038,7 +4144,7 @@ var CardProgress = (0, import_react14.forwardRef)(
       {
         ref,
         className: `
-          w-full flex border border-border-50 rounded-xl
+          w-full flex border border-border-50 bg-background rounded-xl
           ${isHorizontal ? "flex-row h-20" : "flex-col"}
           ${className}
         `,
@@ -4088,7 +4194,7 @@ var CardTopic = (0, import_react14.forwardRef)(
       "div",
       {
         ref,
-        className: `w-full py-2 px-4 flex flex-col justify-center gap-2 border border-border-50 rounded-xl min-h-20 ${className}`,
+        className: `w-full py-2 px-4 flex flex-col justify-center gap-2 bg-background border border-border-50 rounded-xl min-h-20 ${className}`,
         ...props,
         children: [
           subHead && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-text-600 text-2xs flex flex-row gap-1", children: subHead.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react14.Fragment, { children: [
@@ -4165,7 +4271,7 @@ var CardResults = (0, import_react14.forwardRef)(
       {
         ref,
         className: `
-          w-full flex border border-border-50 rounded-xl min-h-20 flex-row items-center pr-4
+          w-full flex border border-border-50 bg-background rounded-xl min-h-20 flex-row items-center pr-4
           ${className}
         `,
         ...props,
@@ -4235,7 +4341,7 @@ var CardStatus = (0, import_react14.forwardRef)(
       {
         ref,
         className: `
-          w-full flex border border-border-50 rounded-xl min-h-20 flex-row items-center pr-4
+          w-full flex border border-border-50 bg-background rounded-xl min-h-20 flex-row items-center pr-4
           ${className}
         `,
         ...props,
@@ -4394,6 +4500,7 @@ var CardForum = (0, import_react14.forwardRef)(
   Chips,
   Divider,
   DropdownMenu,
+  DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
@@ -4404,6 +4511,7 @@ var CardForum = (0, import_react14.forwardRef)(
   MenuContent,
   MenuItem,
   MenuLabel,
+  MenuOverflow,
   MenuSeparator,
   Modal,
   NavButton,