@once-ui-system/core 1.4.32 → 1.5.0

package/dist/modules/navigation/MegaMenu.js

@@ -1,38 +1,82 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { usePathname } from "next/navigation";
 import { Flex, Row, Column, Text, Icon, ToggleButton } from "../../";
 import styles from "./MegaMenu.module.scss";
 export const MegaMenu = ({ menuGroups, className, ...rest }) => {
     const pathname = usePathname();
     const [activeDropdown, setActiveDropdown] = useState(null);
-    const [dropdownPosition, setDropdownPosition] = useState({ left: 0, width: 0 });
+    const [dropdownPosition, setDropdownPosition] = useState({ left: 0, width: 0, height: 0 });
     const [isFirstAppearance, setIsFirstAppearance] = useState(true);
+    const previousDropdownRef = useRef(null);
     const dropdownRef = useRef(null);
     const buttonRefs = useRef({});
     const contentRefs = useRef({});
+    const measureTimeoutRef = useRef(undefined);
+    const closeTimeoutRef = useRef(undefined);
     useEffect(() => {
         if (activeDropdown && buttonRefs.current[activeDropdown]) {
             const buttonElement = buttonRefs.current[activeDropdown];
             if (buttonElement) {
                 const rect = buttonElement.getBoundingClientRect();
                 const parentRect = buttonElement.parentElement?.getBoundingClientRect() || { left: 0 };
-                // Set initial position
+                // Set initial position immediately
                 setDropdownPosition({
                     left: rect.left - parentRect.left,
-                    width: 300, // Default width that will be updated
+                    width: 300,
+                    height: 200, // Default height
                 });
-                // Measure content after render
+                // Measure content dimensions after render - use double RAF for layout completion
                 requestAnimationFrame(() => {
-                    const contentElement = contentRefs.current[activeDropdown];
-                    if (contentElement) {
-                        const contentWidth = contentElement.scrollWidth;
-                        setDropdownPosition((prev) => ({
-                            ...prev,
-                            width: contentWidth + 40, // Add padding
-                        }));
-                    }
+                    requestAnimationFrame(() => {
+                        if (dropdownRef.current) {
+                            const dropdown = dropdownRef.current;
+                            // Find the active content row
+                            const activeContent = contentRefs.current[activeDropdown];
+                            if (activeContent) {
+                                // Find all fillWidth buttons and temporarily override their width
+                                const fillWidthButtons = activeContent.querySelectorAll('[class*="fill-width"]');
+                                const originalWidths = [];
+                                fillWidthButtons.forEach((button, index) => {
+                                    originalWidths[index] = button.style.width;
+                                    button.style.width = 'max-content';
+                                });
+                                // Temporarily remove constraints to measure natural size
+                                const originalHeight = dropdown.style.height;
+                                const originalWidth = dropdown.style.width;
+                                const originalOverflow = dropdown.style.overflow;
+                                dropdown.style.height = 'auto';
+                                dropdown.style.width = 'max-content';
+                                dropdown.style.overflow = 'visible';
+                                // Force reflow
+                                dropdown.offsetHeight;
+                                // Measure the active content
+                                const contentWidth = activeContent.scrollWidth; // Use scrollWidth for full content
+                                const contentHeight = activeContent.offsetHeight;
+                                console.log('Content measurements:', {
+                                    activeDropdown,
+                                    contentWidth,
+                                    contentHeight,
+                                    offsetWidth: activeContent.offsetWidth,
+                                });
+                                // Restore button widths
+                                fillWidthButtons.forEach((button, index) => {
+                                    button.style.width = originalWidths[index];
+                                });
+                                // Restore original dimensions
+                                dropdown.style.height = originalHeight;
+                                dropdown.style.width = originalWidth;
+                                dropdown.style.overflow = originalOverflow;
+                                // Add padding for the wrapper (12px on each side) + paddingTop (8px) + border (1px each side)
+                                setDropdownPosition({
+                                    left: rect.left - parentRect.left,
+                                    width: contentWidth + 26, // Add wrapper padding (24) + border (2)
+                                    height: contentHeight + 34, // Add wrapper padding (24) + paddingTop (8) + border (2)
+                                });
+                            }
+                        }
+                    });
                 });
             }
         }
@@ -40,6 +84,11 @@ export const MegaMenu = ({ menuGroups, className, ...rest }) => {
             // Reset first appearance flag when dropdown is closed
             setIsFirstAppearance(true);
         }
+        return () => {
+            if (measureTimeoutRef.current) {
+                clearTimeout(measureTimeoutRef.current);
+            }
+        };
     }, [activeDropdown]);
     // Reset animation flag after animation completes
     useEffect(() => {
@@ -55,51 +104,79 @@ export const MegaMenu = ({ menuGroups, className, ...rest }) => {
         setActiveDropdown(null);
     }, [pathname]);
     // Check if a menu item should be selected based on the current path
-    const isSelected = (href) => {
+    const isSelected = useCallback((href) => {
         if (!href || !pathname)
             return false;
         return pathname.startsWith(href);
-    };
-    // Filter groups to only show those with sections in the dropdown
-    const dropdownGroups = menuGroups.filter((group) => group.sections);
+    }, [pathname]);
+    // Filter groups to only show those with sections or custom content in the dropdown
+    const dropdownGroups = useMemo(() => menuGroups.filter((group) => group.sections || group.content), [menuGroups]);
     // Add click handler to close dropdown when clicking on links
-    const handleLinkClick = (href) => {
+    const handleLinkClick = useCallback(() => {
         setActiveDropdown(null);
-        // Let the default navigation happen
-    };
-    return (_jsxs(Flex, { gap: "8", flex: 1, className: className, ...rest, children: [menuGroups.map((group, index) => (_jsx(Row, { ref: (el) => {
+    }, []);
+    return (_jsxs(Flex, { fitHeight: true, className: className, ...rest, children: [menuGroups.map((group, index) => (_jsx(Row, { ref: (el) => {
                     buttonRefs.current[group.id] = el;
-                }, onMouseEnter: () => group.sections && setActiveDropdown(group.id), onMouseLeave: (e) => {
-                    // Check if we're not hovering over the dropdown
-                    const dropdownElement = dropdownRef.current;
-                    if (dropdownElement) {
-                        const rect = dropdownElement.getBoundingClientRect();
-                        if (e.clientX >= rect.left &&
-                            e.clientX <= rect.right &&
-                            e.clientY >= rect.top &&
-                            e.clientY <= rect.bottom) {
-                            // We're hovering over the dropdown, don't hide it
-                            return;
-                        }
+                }, paddingRight: "8", onMouseEnter: () => {
+                    // Cancel any pending close
+                    if (closeTimeoutRef.current) {
+                        clearTimeout(closeTimeoutRef.current);
+                    }
+                    if (group.sections || group.content) {
+                        // Use requestAnimationFrame to ensure this runs after any pending close
+                        requestAnimationFrame(() => {
+                            setActiveDropdown(group.id);
+                        });
                     }
-                    // Only hide if activeDropdown is this group
-                    if (activeDropdown === group.id) {
+                    else {
+                        // Close dropdown if hovering over item without dropdown content
                         setActiveDropdown(null);
                     }
-                }, children: _jsxs(ToggleButton, { selected: group.selected !== undefined ? group.selected : isSelected(group.href), href: group.href, children: [group.label, group.sections && group.suffixIcon && (_jsx(Icon, { marginLeft: "8", name: group.suffixIcon, size: "xs" }))] }) }, `menu-group-${index}`))), activeDropdown && (_jsx(Row, { paddingTop: "8", ref: dropdownRef, position: "absolute", pointerEvents: "auto", opacity: 100, top: "32", className: isFirstAppearance ? styles.dropdown : "", style: {
+                }, onMouseLeave: () => {
+                    // Start a timer to close the dropdown
+                    closeTimeoutRef.current = setTimeout(() => {
+                        setActiveDropdown(null);
+                    }, 100);
+                }, children: _jsxs(ToggleButton, { selected: group.selected !== undefined ? group.selected : isSelected(group.href), href: group.href, children: [group.label, (group.sections || group.content) && group.suffixIcon && (_jsx(Icon, { marginLeft: "8", name: group.suffixIcon, size: "xs" }))] }) }, `menu-group-${index}`))), activeDropdown && (_jsx(Row, { paddingTop: "8", ref: dropdownRef, position: "absolute", pointerEvents: "auto", opacity: 100, overflow: "hidden", top: "32", className: isFirstAppearance ? styles.dropdown : "", style: {
                     left: `${dropdownPosition.left}px`,
                     width: `${dropdownPosition.width}px`,
-                    transition: "left 0.3s ease, width 0.3s ease",
+                    height: `${dropdownPosition.height}px`,
+                    transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
                     visibility: "visible",
                 }, onMouseEnter: () => {
-                    // Keep the current active dropdown when hovering over it
+                    // Cancel the close timer if we re-enter
+                    if (closeTimeoutRef.current) {
+                        clearTimeout(closeTimeoutRef.current);
+                    }
                 }, onMouseLeave: () => {
-                    // Hide dropdown when mouse leaves it
-                    setActiveDropdown(null);
-                }, children: _jsx(Row, { background: "surface", radius: "l", border: "neutral-alpha-weak", shadow: "xl", padding: "12", gap: "32", children: dropdownGroups.map((group, groupIndex) => activeDropdown === group.id &&
-                        group.sections && (_jsx(Row, { gap: "16", ref: (el) => {
-                            contentRefs.current[group.id] = el;
-                        }, children: group.sections.map((section, sectionIndex) => (_jsxs(Column, { minWidth: 10, gap: "4", children: [section.title && (_jsx(Text, { marginLeft: "16", marginBottom: "12", marginTop: "12", onBackground: "neutral-weak", variant: "label-default-s", children: section.title })), section.links.map((link, linkIndex) => (_jsx(ToggleButton, { className: "fit-height p-4 pr-12", style: { height: "auto" }, fillWidth: true, horizontal: "start", href: link.href, onClick: () => handleLinkClick(link.href), children: link.description ? (_jsxs(Row, { gap: "12", children: [link.icon && (_jsx(Icon, { name: link.icon, size: "s", padding: "8", radius: "s", border: "neutral-alpha-weak" })), _jsxs(Column, { gap: "4", children: [_jsx(Text, { onBackground: "neutral-strong", variant: "label-strong-s", children: link.label }), _jsx(Text, { onBackground: "neutral-weak", children: link.description })] })] })) : (link.label) }, `link-${linkIndex}`)))] }, `section-${sectionIndex}`))) }, `dropdown-content-${groupIndex}`))) }) }))] }));
+                    // Start a timer to close the dropdown
+                    closeTimeoutRef.current = setTimeout(() => {
+                        setActiveDropdown(null);
+                    }, 100);
+                }, children: _jsx(Row, { background: "surface", radius: "l", border: "neutral-alpha-weak", shadow: "xl", padding: "12", gap: "32", "data-dropdown-wrapper": true, style: {
+                        transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                    }, children: dropdownGroups.map((group, groupIndex) => {
+                        const isActive = activeDropdown === group.id;
+                        const wasActive = previousDropdownRef.current === group.id;
+                        // Animate when switching between dropdowns (not when first opening or returning to same)
+                        const shouldAnimate = isActive && !wasActive && previousDropdownRef.current !== null;
+                        // Update previous ref when active changes
+                        if (isActive && !wasActive) {
+                            previousDropdownRef.current = group.id;
+                        }
+                        else if (!activeDropdown) {
+                            previousDropdownRef.current = null;
+                        }
+                        return (_jsx(Row, { gap: "16", position: isActive ? "relative" : "absolute", "data-dropdown-content": true, ref: (el) => {
+                                contentRefs.current[group.id] = el;
+                            }, style: {
+                                transform: isActive ? "scale(1)" : "scale(0.9)",
+                                opacity: isActive ? 1 : 0,
+                                pointerEvents: isActive ? "auto" : "none",
+                                transition: shouldAnimate ? "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)" : "opacity 0.2s ease-in",
+                                visibility: isActive ? "visible" : "hidden",
+                            }, children: group.content ? (group.content) : (group.sections?.map((section, sectionIndex) => (_jsxs(Column, { minWidth: 12, gap: "4", children: [section.title && (_jsx(Text, { marginLeft: "8", marginBottom: "12", marginTop: "12", onBackground: "neutral-weak", variant: "label-default-s", children: section.title })), section.links.map((link, linkIndex) => (_jsx(ToggleButton, { style: { height: "auto", minHeight: "fit-content", paddingLeft: "var(--static-space-0)", paddingTop: "var(--static-space-4)", paddingBottom: "var(--static-space-4)", paddingRight: "var(--static-space-12)" }, fillWidth: true, horizontal: "start", href: link.href, onClick: handleLinkClick, children: _jsxs(Row, { gap: "12", children: [link.icon && (_jsx(Icon, { name: link.icon, size: "s", padding: "8", radius: "s", border: "neutral-alpha-weak" })), _jsxs(Column, { gap: "4", children: [link.label && (_jsx(Text, { onBackground: "neutral-strong", variant: "label-strong-s", children: link.label })), link.description && (_jsx(Text, { onBackground: "neutral-weak", truncate: true, children: link.description }))] })] }) }, `link-${linkIndex}`)))] }, `section-${sectionIndex}`)))) }, `dropdown-content-${groupIndex}`));
+                    }) }) }))] }));
 };
 MegaMenu.displayName = "MegaMenu";
 //# sourceMappingURL=MegaMenu.js.map

package/dist/modules/navigation/MegaMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"MegaMenu.js","sourceRoot":"","sources":["../../../src/modules/navigation/MegaMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MegaMenu.js","sourceRoot":"","sources":["../../../src/modules/navigation/MegaMenu.tsx"],"names":[],"mappings":"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"}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@once-ui-system/core",
-  "version": "1.4.32",
+  "version": "1.5.0",
   "description": "Once UI for Next.js NPM package",
   "keywords": [
     "once-ui",
@@ -13,6 +13,15 @@
   ],
   "author": "Once UI",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/once-ui-system/core.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/once-ui-system/core/issues"
+  },
+  "homepage": "https://docs.once-ui.com",
   "main": "dist/index.js",
   "exports": {
     ".": {

package/dist/styles/border.scss

@@ -95,6 +95,11 @@
     border-top-left-radius: var(--radius-xl);
 }
 
+.radius-full-top {
+    border-top-left-radius: var(--radius-full);
+    border-top-right-radius: var(--radius-full);
+}
+
 .radius-xs-right {
     border-bottom-right-radius: var(--radius-xs);
     border-top-right-radius: var(--radius-xs);
@@ -120,6 +125,11 @@
     border-top-right-radius: var(--radius-xl);
 }
 
+.radius-full-right {
+    border-bottom-right-radius: var(--radius-full);
+    border-top-right-radius: var(--radius-full);
+}
+
 .radius-xs-bottom {
     border-bottom-right-radius: var(--radius-xs);
     border-bottom-left-radius: var(--radius-xs);
@@ -145,6 +155,11 @@
     border-bottom-left-radius: var(--radius-xl);
 }
 
+.radius-full-bottom {
+    border-bottom-left-radius: var(--radius-full);
+    border-bottom-right-radius: var(--radius-full);
+}
+
 .radius-xs-left {
     border-bottom-left-radius: var(--radius-xs);
     border-top-left-radius: var(--radius-xs);
@@ -170,6 +185,11 @@
     border-top-left-radius: var(--radius-xl);
 }
 
+.radius-full-left {
+    border-bottom-left-radius: var(--radius-full);
+    border-top-left-radius: var(--radius-full);
+}
+
 .radius-xs-top-left {
     border-top-left-radius: var(--radius-xs);
 }
@@ -190,6 +210,10 @@
     border-top-left-radius: var(--radius-xl);
 }
 
+.radius-full-top-left {
+    border-top-left-radius: var(--radius-full);
+}
+
 .radius-xs-top-right {
     border-top-right-radius: var(--radius-xs);
 }
@@ -210,6 +234,10 @@
     border-top-right-radius: var(--radius-xl);
 }
 
+.radius-full-top-right {
+    border-top-right-radius: var(--radius-full);
+}
+
 .radius-xs-bottom-right {
     border-bottom-right-radius: var(--radius-xs);
 }
@@ -230,6 +258,10 @@
     border-bottom-right-radius: var(--radius-xl);
 }
 
+.radius-full-bottom-right {
+    border-bottom-right-radius: var(--radius-full);
+}
+
 .radius-xs-bottom-left {
     border-bottom-left-radius: var(--radius-xs);
 }
@@ -250,6 +282,10 @@
     border-bottom-left-radius: var(--radius-xl);
 }
 
+.radius-full-bottom-left {
+    border-bottom-left-radius: var(--radius-full);
+}
+
 
 
   /****************************/

package/dist/styles/breakpoints.scss

@@ -1,7 +1,14 @@
+$breakpoint-xs: 480px;
 $breakpoint-s: 768px;
 $breakpoint-m: 1024px;
 $breakpoint-l: 1440px;
 
+@mixin xs {
+  @media (max-width: #{$breakpoint-xs}) {
+    @content;
+  }
+}
+
 @mixin s {
   @media (max-width: #{$breakpoint-s}) {
     @content;

package/dist/styles/display.scss

@@ -36,6 +36,32 @@
   overflow-y: hidden;
 }
 
+.scrollbar-minimal {
+  &::-webkit-scrollbar {
+      background: var(--static-transparent);
+      width: var(--static-space-4);
+      height: var(--static-space-4);
+  }
+
+  &::-webkit-scrollbar-track {
+      background: var(--static-transparent);
+  }
+
+  &::-webkit-scrollbar-thumb {
+      background: var(--neutral-alpha-medium);
+      transition: var(--transition-micro-medium);
+      border-radius: var(--radius-full);
+
+      &:hover {
+          background: var(--neutral-alpha-strong);
+      }
+  }
+
+  &::-webkit-scrollbar-corner {
+      background-color: var(--static-transparent);
+  }
+}
+
 @include breakpoints.l {
   .l-overflow-auto {
     overflow: auto;
@@ -150,6 +176,44 @@
   }
 }
 
+@include breakpoints.xs {
+  .xs-overflow-auto {
+    overflow: auto;
+  }
+
+  .xs-overflow-x-scroll{
+    overflow-x: scroll;
+  }
+
+  .xs-overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .xs-overflow-y-auto{
+    overflow-y: auto;
+  }
+
+  .xs-overflow-y-scroll{
+    overflow-y: scroll;
+  }
+
+  .xs-overflow-hidden {
+    overflow: hidden;
+  }
+
+  .xs-overflow-scroll{
+    overflow: scroll;
+  }
+
+  .xs-overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .xs-overflow-y-hidden{
+    overflow-y: hidden;
+  }
+}
+
 .opacity-0 {
   opacity: 0;
 }

package/dist/styles/flex.scss

@@ -428,4 +428,91 @@
     align-items: center;
     justify-content: center;
   }
+}
+
+@include breakpoints.xs {
+    .xs-flex-hide {
+        display: none;
+    }
+
+    .xs-flex-show {
+        display: flex;
+    }
+
+    .xs-flex-column {
+        flex-direction: column;
+    }
+
+    .xs-flex-row {
+        flex-direction: row;
+    }
+
+    .xs-flex-column-reverse {
+        flex-direction: column-reverse;
+    }
+
+    .xs-flex-row-reverse {
+        flex-direction: row-reverse;
+    }
+
+    .xs-justify-start {
+        justify-content: flex-start;
+    }
+
+    .xs-justify-center {
+        justify-content: center;
+    }
+
+    .xs-justify-end {
+        justify-content: flex-end;
+    }
+
+    .xs-justify-between {
+        justify-content: space-between;
+    }
+
+    .xs-justify-around {
+        justify-content: space-around;
+    }
+
+    .xs-justify-even {
+        justify-content: space-evenly;
+    }
+
+    .xs-justify-stretch {
+        justify-content: stretch;
+    }
+
+    .xs-align-start {
+        align-items: flex-start;
+    }
+
+    .xs-align-center {
+        align-items: center;
+    }
+
+    .xs-align-end {
+        align-items: flex-end;
+    }
+
+    .xs-align-between {
+        align-items: space-between;
+    }
+
+    .xs-align-around {
+        align-items: space-around;
+    }
+
+    .xs-align-even {
+        align-items: space-evenly;
+    }
+
+    .xs-align-stretch {
+        align-items: stretch;
+    }
+
+    .xs-center {
+        align-items: center;
+        justify-content: center;
+    }
 }

package/dist/styles/global.scss

@@ -1,5 +1,8 @@
 * {
     box-sizing: border-box;
+}
+
+html {
     scroll-behavior: smooth;
 }
 
@@ -30,28 +33,4 @@ a:not(.button) {
         text-decoration: none;
         color: var(--brand-on-background-strong);
     }
-}
-
-/* SCROLLBAR */
-::-webkit-scrollbar {
-    background: var(--static-transparent);
-    width: var(--static-space-8);
-    height: var(--static-space-8);
-}
-
-::-webkit-scrollbar-track {
-    background: var(--static-transparent);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--neutral-alpha-medium);
-    transition: var(--transition-micro-medium);
-
-    &:hover {
-        background: var(--neutral-alpha-strong);
-    }
-}
-
-::-webkit-scrollbar-corner {
-    background-color: var(--static-transparent);
 }

package/dist/styles/grid.scss

@@ -232,4 +232,62 @@
   .s-grid-show {
     display: grid;
   }
+}
+
+@include breakpoints.xs {
+    .xs-columns-1 {
+        grid-template-columns: 1fr;
+    }
+
+    .xs-columns-2 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .xs-columns-3 {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .xs-columns-4 {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .xs-columns-5 {
+        grid-template-columns: repeat(5, 1fr);
+    }
+
+    .xs-columns-6 {
+        grid-template-columns: repeat(6, 1fr);
+    }
+
+    .xs-columns-7 {
+        grid-template-columns: repeat(7, 1fr);
+    }
+
+    .xs-columns-8 {
+        grid-template-columns: repeat(8, 1fr);
+    }
+
+    .xs-columns-9 {
+        grid-template-columns: repeat(9, 1fr);
+    }
+
+    .xs-columns-10 {
+        grid-template-columns: repeat(10, 1fr);
+    }
+
+    .xs-columns-11 {
+        grid-template-columns: repeat(11, 1fr);
+    }
+
+    .xs-columns-12 {
+        grid-template-columns: repeat(12, 1fr);
+    }
+
+    .xs-grid-hide {
+        display: none;
+    }
+
+    .xs-grid-show {
+        display: grid;
+    }
 }