linkedunion-design-kit 1.11.12 → 1.11.13

package/dist/src/components/Dropdown/DropdownMenu/DropdownMenu.js

@@ -25,7 +25,7 @@ import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { ChevronRight, Circle } from "lucide-react";
 import { cn } from "../../../lib/utils";
-import { checkBoxSize, dropdownMenuIconSize, dropDownMenuItemSize, dropdownMenuSize, } from ".";
+import { checkBoxSize, dropdownMenuIconSize, dropDownMenuItemSize, dropdownMenuSize, dropDownSubMenuItemSize, } from ".";
 import { Checkbox } from "../../../components/Checkbox/checkbox";
 import { Reset_BS } from "../../../utils/constants";
 // Provide size from Content to all items
@@ -38,7 +38,7 @@ var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 var DropdownMenuSubTrigger = React.forwardRef(function (_a, ref) {
     var className = _a.className, inset = _a.inset, children = _a.children, props = __rest(_a, ["className", "inset", "children"]);
-    return (_jsxs(DropdownMenuPrimitive.SubTrigger, __assign({ ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm !p-2 outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className) }, props, { children: [children, _jsx(ChevronRight, { className: "ml-auto" })] })));
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, __assign({ ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm !p-2 outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className) }, props, { children: [children, _jsx(ChevronRight, { className: "ml-auto" })] })));
 });
 DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
@@ -47,7 +47,7 @@ var DropdownMenuSubContent = React.forwardRef(function (_a, ref) {
     var className = _a.className, size = _a.size, props = __rest(_a, ["className", "size"]);
     var inheritedSize = React.useContext(DropdownMenuSizeContext);
     var effectiveSize = (_b = size !== null && size !== void 0 ? size : inheritedSize) !== null && _b !== void 0 ? _b : "md";
-    return (_jsx(DropdownMenuPrimitive.SubContent, __assign({ ref: ref, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-sm bg-white text-gray-900 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", className, dropDownMenuItemSize[effectiveSize]) }, props)));
+    return (_jsx(DropdownMenuPrimitive.SubContent, __assign({ ref: ref, className: cn("z-50 h-auto min-w-[8rem] overflow-hidden shadow-backdrop-shadow-lg rounded-sm bg-white text-gray-900 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", className, dropDownSubMenuItemSize[effectiveSize]) }, props)));
 });
 DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;

package/dist/src/components/Dropdown/DropdownMenu/DropdownMenu.stories.js

@@ -268,15 +268,32 @@ export var MasterDropdownMenu = function () {
     var menuItems = [
         { type: "item", label: "Text Label 1" },
         { type: "item", label: "Text Label 2" },
-        { type: "submenu", label: "Text Label 3", subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"] },
-        { type: "submenu", label: "Text Label 4", subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"] },
+        {
+            type: "submenu",
+            label: "Text Label 3",
+            subItems: [
+                "Submenu Item 1",
+                "Submenu Item 2",
+                "Submenu Item 3",
+                "Submenu Item 4",
+            ],
+        },
+        {
+            type: "submenu",
+            label: "Text Label 4",
+            subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"],
+        },
         { type: "item", label: "Text Label 5" },
         { type: "badge", label: "Text Label 6", badge: "09" },
         { type: "avatar", label: "Text Label 7" },
         { type: "item", label: "Text Label 8" },
         // Second column starts after 8 items
         { type: "item", label: "Text Label 9" },
-        { type: "submenu", label: "Text Label 10", subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"] },
+        {
+            type: "submenu",
+            label: "Text Label 10",
+            subItems: ["Submenu Item 1", "Submenu Item 2", "Submenu Item 3"],
+        },
         { type: "item", label: "Text Label 11" },
         { type: "badge", label: "Text Label 12", badge: "09" },
         { type: "avatar", label: "Text Label 13" },
@@ -294,5 +311,9 @@ export var MasterDropdownMenu = function () {
                 return (_jsx(DropdownMenuItem, { onSelect: function () { return alert("".concat(item.label, " selected")); }, children: item.label }, index));
         }
     };
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { shape: "rounded-full", children: "Text Label" }) }), _jsx(DropdownMenuContent, { className: "w-auto", size: "lg", children: _jsxs("div", { className: "grid gap-0 ".concat(menuItems.length > 8 ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1'), children: [_jsxs("div", { className: "flex flex-col", children: [_jsx(DropdownMenuLabel, { className: "mb-1", children: "Group Heading" }), menuItems.slice(0, 8).map(function (item, index) { return renderMenuItem(item, index); })] }), menuItems.length > 8 && (_jsxs("div", { className: "flex flex-col md:pl-2", children: [_jsx(DropdownMenuLabel, { className: "mb-1", children: "Group Heading" }), menuItems.slice(8).map(function (item, index) { return renderMenuItem(item, index + 8); })] }))] }) })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { shape: "rounded-full", children: "Text Label" }) }), _jsx(DropdownMenuContent, { className: "w-auto", size: "lg", children: _jsxs("div", { className: "grid gap-0 ".concat(menuItems.length > 8 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1"), children: [_jsxs("div", { className: "flex flex-col", children: [_jsx(DropdownMenuLabel, { className: "mb-1", children: "Group Heading" }), menuItems
+                                    .slice(0, 8)
+                                    .map(function (item, index) { return renderMenuItem(item, index); })] }), menuItems.length > 8 && (_jsxs("div", { className: "flex flex-col md:pl-2", children: [_jsx(DropdownMenuLabel, { className: "mb-1", children: "Group Heading" }), menuItems
+                                    .slice(8)
+                                    .map(function (item, index) { return renderMenuItem(item, index + 8); })] }))] }) })] }));
 };

package/dist/src/components/Dropdown/DropdownMenu/index.d.ts

@@ -8,6 +8,11 @@ export declare const dropDownMenuItemSize: {
     md: string;
     lg: string;
 };
+export declare const dropDownSubMenuItemSize: {
+    sm: string;
+    md: string;
+    lg: string;
+};
 export declare const dropdownMenuIconSize: {
     sm: string;
     md: string;

package/dist/src/components/Dropdown/DropdownMenu/index.js

@@ -8,6 +8,11 @@ export var dropDownMenuItemSize = {
     md: "h-10 !py-3 !px-4",
     lg: "h-12 !py-3 !px-4",
 };
+export var dropDownSubMenuItemSize = {
+    sm: "!p-3",
+    md: "!py-3 !px-4",
+    lg: "!py-3 !px-4",
+};
 // Map dropdown menu size to icon size
 export var dropdownMenuIconSize = {
     sm: "sm",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.11.12",
+  "version": "1.11.13",
   "private": false,
   "files": [
     "dist",