linkedunion-design-kit 1.11.6 → 1.11.8

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

@@ -0,0 +1,552 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuLabel, DropdownMenuSubTrigger, DropdownMenuSub, DropdownMenuSubContent, } from "./DropdownMenu";
+import { Button } from "../../../components/Button/Button/Button";
+import LUIcon from "../../../components/Icons/LUIcon";
+import { useState } from "react";
+import { dropdownContentPosition, dropdownMenuSize } from ".";
+import { IconButton } from "../../../components/Button/IconButton/IconButton";
+import { Checkbox } from "../../../components/Checkbox/checkbox";
+import { Label } from "../../../components/Label/Label";
+import { Caption } from "../../../components/Typography/Caption/caption";
+import { Input } from "../../../components/Input";
+import { SelectAllSection } from "./SelectAllSection";
+import { Avatar, AvatarFallback, AvatarImage, } from "../../../components/Avatar/Avatar/Avatar";
+import { Badge } from "../../../components/Badge/Badge";
+export default {
+    title: "Components/Dropdown/DropdownMenu",
+    component: DropdownMenu,
+    tags: ["autodocs"],
+    argTypes: {
+        size: {
+            control: { type: "select" },
+            options: Object.keys(dropdownMenuSize),
+            description: "Dropdown menu size",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "md" },
+            },
+        },
+        disabled: {
+            control: { type: "boolean" },
+            description: "Disable the dropdown menu item",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: false },
+            },
+        },
+        align: {
+            control: { type: "select" },
+            options: Object.keys(dropdownContentPosition),
+            description: "Alignment of the dropdown menu",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "start" },
+            },
+        },
+    },
+};
+var Template = function (args) {
+    var menuItems = [
+        { label: "Option 1" },
+        { label: "Option 2" },
+        { label: "Option 3" },
+    ];
+    var size = args.size, align = args.align, rest = __rest(args, ["size", "align"]);
+    return (<DropdownMenu {...rest}>
+      <DropdownMenuTrigger>
+        <Button>Open Menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent size={size} align={align}>
+        {menuItems.map(function (item, index) { return (<DropdownMenuItem key={index} onSelect={function () { return alert("".concat(item.label, " selected")); }}>
+            {item.label}
+          </DropdownMenuItem>); })}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+export var Default = Template.bind({});
+export var Sizes = function () {
+    var menuItems = [
+        {
+            label: "Home",
+            icon: "chart-simple",
+        },
+        {
+            label: "Profile",
+            icon: "chart-pie",
+        },
+        {
+            label: "Settings",
+            icon: "square-poll-horizontal",
+        },
+        {
+            label: "Logout",
+            icon: "square-poll-vertical",
+        },
+    ];
+    return (<div className="flex flex-row space-x-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button>Small Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent size="sm">
+          {menuItems.map(function (item, index) { return (<DropdownMenuItem key={index} onSelect={function () { return alert("".concat(item.label, " selected")); }}>
+              <LUIcon icon={item.icon} size="sm"/> {item.label}
+            </DropdownMenuItem>); })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button>Medium Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent size="md">
+          {menuItems.map(function (item, index) { return (<DropdownMenuItem key={index} onSelect={function () { return alert("".concat(item.label, " selected")); }}>
+              <LUIcon icon={item.icon} size="md"/> {item.label}
+            </DropdownMenuItem>); })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button>Large Menu</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent size="lg">
+          {menuItems.map(function (item, index) { return (<DropdownMenuItem key={index} onSelect={function () { return alert("".concat(item.label, " selected")); }}>
+              <LUIcon icon={item.icon} size="lg"/> {item.label}
+            </DropdownMenuItem>); })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>);
+};
+export var WithIcons = function () {
+    var menuItems = [
+        {
+            label: "Home",
+            icon: "chart-simple",
+        },
+        {
+            label: "Profile",
+            icon: "chart-pie",
+        },
+        {
+            label: "Settings",
+            icon: "square-poll-horizontal",
+        },
+        {
+            label: "Logout",
+            icon: "square-poll-vertical",
+        },
+    ];
+    return (<DropdownMenu>
+      <DropdownMenuTrigger>
+        <Button>Menu with Icons</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        {menuItems.map(function (item, index) { return (<DropdownMenuItem key={index} onSelect={function () { return alert("".concat(item.label, " selected")); }}>
+            <LUIcon icon={item.icon} size="sm"/> {item.label}
+          </DropdownMenuItem>); })}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+export var DisabledItems = function () { return (<DropdownMenu>
+    <DropdownMenuTrigger>
+      <Button>Menu with Disabled Items</Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem onSelect={function () { return alert("Enabled selected"); }}>
+        Enabled
+      </DropdownMenuItem>
+      <DropdownMenuItem disabled>Disabled</DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem onSelect={function () { return alert("Another enabled selected"); }}>
+        Another Enabled
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>); };
+export var NestedMenu = function () {
+    var menuItems = [
+        { label: "Open conversation details", icon: "eye", items: [] },
+        { label: "View full profile", icon: "user", items: [] },
+        { label: "Start conversation", icon: "address-book", items: [] },
+        {
+            label: "Copy",
+            icon: "copy",
+            items: [
+                { label: "Copy name", icon: "copy" },
+                { label: "Copy email", icon: "copy" },
+                { label: "Copy link", icon: "copy" },
+            ],
+        },
+        { label: "Search in conversation", icon: "magnifying-glass" },
+        { label: "Open in new window", icon: "arrow-right-to-bracket" },
+    ];
+    return (<DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <IconButton variant="outline" icon="plus"/>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="mt-2">
+        {menuItems.map(function (item, index) {
+            if (item.items && item.items.length > 0) {
+                return (<DropdownMenuSub key={index}>
+                <DropdownMenuSubTrigger>
+                  <LUIcon icon={item.icon}/> {item.label}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  {item.items.map(function (subItem, subIndex) { return (<DropdownMenuItem key={subIndex}>
+                      <LUIcon icon={subItem.icon}/> {subItem.label}
+                    </DropdownMenuItem>); })}
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>);
+            }
+            return (<DropdownMenuItem key={index}>
+              <LUIcon icon={item.icon}/> {item.label}
+            </DropdownMenuItem>);
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+export var DropdownMenuWithSelectAll = function () {
+    var tags = ["Sport", "Music", "Food", "Travel", "Tech", "Science", "Art"];
+    var _a = useState([]), selectedTags = _a[0], setSelectedTags = _a[1];
+    var handleTagChange = function (tag, checked) {
+        if (checked) {
+            setSelectedTags(__spreadArray(__spreadArray([], selectedTags, true), [tag], false));
+        }
+        else {
+            setSelectedTags(selectedTags.filter(function (t) { return t !== tag; }));
+        }
+    };
+    var handleSelectAll = function () {
+        var allSelected = selectedTags.length === tags.length;
+        var next = allSelected ? [] : __spreadArray([], tags, true);
+        setSelectedTags(next);
+    };
+    return (<DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Select Tags</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-50" size="lg">
+        <DropdownMenuLabel>Select Tags</DropdownMenuLabel>
+        <div className="flex flex-col gap-1 rounded-sm bg-gray-50 text-gray-800 py-3 px-4">
+          <div className="flex items-center gap-2">
+            <Checkbox id="dm-select-all" checked={selectedTags.length === tags.length} onCheckedChange={function () { return handleSelectAll(); }} onClick={function (e) { return e.stopPropagation(); }} size="md"/>
+            <Label htmlFor="dm-select-all">Select All</Label>
+          </div>
+          <Caption className="text-gray-500">
+            Selected ({selectedTags.length})
+          </Caption>
+        </div>
+        <DropdownMenuSeparator />
+        {tags.map(function (tag) { return (<DropdownMenuCheckboxItem checked={selectedTags.includes(tag)} key={tag} onCheckedChange={function (checked) { return handleTagChange(tag, checked); }} 
+        // Prevent the dropdown menu from closing when the checkbox is clicked
+        onSelect={function (e) { return e.preventDefault(); }}>
+            {tag}
+          </DropdownMenuCheckboxItem>); })}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+export var MultipleSelections = function () {
+    var tags = ["Sport", "Music", "Food", "Travel", "Tech", "Science", "Art"];
+    var _a = useState([
+        tags[0],
+        tags[4],
+    ]), selectedTags = _a[0], setSelectedTags = _a[1];
+    var handleTagChange = function (tag, checked) {
+        if (checked) {
+            setSelectedTags(__spreadArray(__spreadArray([], selectedTags, true), [tag], false));
+        }
+        else {
+            setSelectedTags(selectedTags.filter(function (t) { return t !== tag; }));
+        }
+    };
+    return (<DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Select Tags</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-44" size="lg">
+        <DropdownMenuLabel>Select Tags</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {tags.map(function (tag) { return (<DropdownMenuCheckboxItem checked={selectedTags.includes(tag)} key={tag} onCheckedChange={function (checked) { return handleTagChange(tag, checked); }} 
+        // Prevent the dropdown menu from closing when the checkbox is clicked
+        onSelect={function (e) { return e.preventDefault(); }}>
+            {tag}
+          </DropdownMenuCheckboxItem>); })}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+export var DropdownMenuWithSearch = function () {
+    var menuItems = [
+        { label: "Open conversation details", icon: "eye" },
+        { label: "View full profile", icon: "user" },
+        { label: "Start conversation", icon: "address-book" },
+    ];
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    var _b = useState(""), query = _b[0], setQuery = _b[1];
+    var filteredItems = menuItems.filter(function (item) {
+        return item.label.toLowerCase().includes(query.toLowerCase());
+    });
+    return (<DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Select an Option</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="p-0" size="lg">
+        <div className="p-2">
+          <Input placeholder="Search..." value={query} onChange={function (e) { return setQuery(e.target.value); }} onKeyDownCapture={function (e) { return e.stopPropagation(); }} startIcon="magnifying-glass"/>
+        </div>
+        {filteredItems.length === 0 ? (<div className="py-6 text-center text-sm text-muted-foreground">
+            No results found.
+          </div>) : (filteredItems.map(function (option) { return (<DropdownMenuItem key={option.label} onSelect={function () { return setOpen(false); }}>
+              <LUIcon icon={option.icon}/> {option.label}
+            </DropdownMenuItem>); }))}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+DropdownMenuWithSearch.parameters = {
+    docs: {
+        description: {
+            story: "DropdownMenuWithSearch provides a dropdown menu that includes a search box. Users can type into the box to filter the menu items. For larger dropdowns, a large search input should be used; for medium dropdowns, a medium input; and for small dropdowns, a small input.",
+        },
+    },
+};
+export var DropdownMenuWithSelectAllAndSearch = function () {
+    var tags = ["Sport", "Music", "Food", "Travel", "Tech", "Science", "Art"];
+    var _a = useState([]), selectedTags = _a[0], setSelectedTags = _a[1];
+    var _b = useState(""), query = _b[0], setQuery = _b[1];
+    var toggleTag = function (tag) {
+        setSelectedTags(function (prev) {
+            return prev.includes(tag) ? prev.filter(function (t) { return t !== tag; }) : __spreadArray(__spreadArray([], prev, true), [tag], false);
+        });
+    };
+    var handleSelectAll = function () {
+        var allSelected = selectedTags.length === tags.length;
+        setSelectedTags(allSelected ? [] : __spreadArray([], tags, true));
+    };
+    var filtered = tags.filter(function (t) {
+        return t.toLowerCase().includes(query.toLowerCase());
+    });
+    return (<DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Select Tags</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent size="lg">
+        <div className="mb-2">
+          <Input placeholder="Search..." value={query} onChange={function (e) { return setQuery(e.target.value); }} onKeyDownCapture={function (e) { return e.stopPropagation(); }} size="lg" startIcon="magnifying-glass"/>
+        </div>
+
+        <SelectAllSection checked={selectedTags.length === tags.length && tags.length > 0} onToggleAll={handleSelectAll} selectedCount={selectedTags.length} size="lg"/>
+        <DropdownMenuSeparator />
+        {filtered.length === 0 ? (<div className="py-6 text-center text-sm text-muted-foreground">
+            No results found.
+          </div>) : (filtered.map(function (tag) {
+            var isSelected = selectedTags.includes(tag);
+            return (<DropdownMenuCheckboxItem key={tag} checked={isSelected} 
+            // Prevent DropdownMenu from closing in multi-select scenario
+            onSelect={function (e) { return e.preventDefault(); }} onCheckedChange={function () { return toggleTag(tag); }} className={isSelected ? "bg-blue-50 text-blue-600" : ""}>
+                {tag}
+              </DropdownMenuCheckboxItem>);
+        }))}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+export var WorkSpaceSwitcher = function () {
+    var workspaces = [
+        {
+            id: 1,
+            name: "Workspace 1",
+            createdBy: "abc@example.com",
+        },
+        {
+            id: 2,
+            name: "Workspace 2",
+            createdBy: "def@example.com",
+        },
+        {
+            id: 3,
+            name: "Workspace 3",
+            createdBy: "ghi@example.com",
+        },
+    ];
+    var _a = useState(workspaces[0]), selectedWorkspace = _a[0], setSelectedWorkspace = _a[1];
+    return (<DropdownMenu>
+      <DropdownMenuTrigger className="flex items-center gap-2 bg-accent py-2.5 px-3 rounded-lg">
+        <Avatar>
+          <AvatarImage alt="Avatar" src="/images/avatar.png"/>
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+        <div className="text-start flex flex-col gap-1 leading-none">
+          <span className="text-sm leading-none font-semibold truncate max-w-[17ch]">
+            {selectedWorkspace.name}
+          </span>
+          <span className="text-xs text-muted-foreground truncate max-w-[20ch]">
+            {selectedWorkspace.createdBy}
+          </span>
+        </div>
+        <LUIcon icon="angle-down"/>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
+        {workspaces.map(function (workspace) { return (<DropdownMenuItem key={workspace.id} onClick={function () { return setSelectedWorkspace(workspace); }}>
+            <div className="flex items-center gap-2">
+              <Avatar>
+                <AvatarImage alt="Avatar" src="/images/avatar.png"/>
+                <AvatarFallback>AB</AvatarFallback>
+              </Avatar>
+              <div className="flex flex-col">
+                <span>{workspace.name}</span>
+                <span className="text-xs text-muted-foreground">
+                  {workspace.createdBy}
+                </span>
+              </div>
+            </div>
+            {selectedWorkspace.id === workspace.id && (<LUIcon icon="check" className="ml-auto"/>)}
+          </DropdownMenuItem>); })}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+export var LanguageDropdownMenu = function () {
+    var languages = ["English", "Spanish", "French", "German", "Chinese"];
+    var _a = useState(languages[0]), selectedLanguage = _a[0], setSelectedLanguage = _a[1];
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    return (<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button shape="rounded-full" startIcon="language" endIcon={isOpen ? "angle-up" : "angle-down"}>
+          {selectedLanguage}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-50">
+        {languages.map(function (language) { return (<DropdownMenuItem key={language} onSelect={function () { return setSelectedLanguage(language); }}>
+            {language}
+          </DropdownMenuItem>); })}
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};
+export var Alignments = function () {
+    return (<div className="flex flex-row space-x-4">
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button>Align Start</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem>Option 1</DropdownMenuItem>
+          <DropdownMenuItem>Option 2</DropdownMenuItem>
+          <DropdownMenuItem>Option 3</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button>Align Center</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="center">
+          <DropdownMenuItem>Option 1</DropdownMenuItem>
+          <DropdownMenuItem>Option 2</DropdownMenuItem>
+          <DropdownMenuItem>Option 3</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button>Align End</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem>Option 1</DropdownMenuItem>
+          <DropdownMenuItem>Option 2</DropdownMenuItem>
+          <DropdownMenuItem>Option 3</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>);
+};
+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: "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: "item", label: "Text Label 11" },
+        { type: "badge", label: "Text Label 12", badge: "09" },
+        { type: "avatar", label: "Text Label 13" },
+    ];
+    var renderMenuItem = function (item, index) {
+        var _a;
+        switch (item.type) {
+            case "submenu":
+                return (<DropdownMenuSub key={index}>
+            <DropdownMenuSubTrigger>{item.label}</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              {(_a = item.subItems) === null || _a === void 0 ? void 0 : _a.map(function (subItem, subIndex) { return (<DropdownMenuItem key={subIndex}>{subItem}</DropdownMenuItem>); })}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>);
+            case "badge":
+                return (<DropdownMenuItem key={index} onSelect={function () { return alert("".concat(item.label, " selected")); }}>
+            <div className="flex items-center justify-between w-full">
+              {item.label}
+              <Badge color="light-blue">{item.badge}</Badge>
+            </div>
+          </DropdownMenuItem>);
+            case "avatar":
+                return (<DropdownMenuItem key={index} onSelect={function () { return alert("".concat(item.label, " selected")); }}>
+            <div className="flex items-center gap-2">
+              <Avatar>
+                <AvatarImage alt="Avatar" src="/images/avatar.png"/>
+                <AvatarFallback>AB</AvatarFallback>
+              </Avatar>
+              {item.label}
+            </div>
+          </DropdownMenuItem>);
+            default:
+                return (<DropdownMenuItem key={index} onSelect={function () { return alert("".concat(item.label, " selected")); }}>
+            {item.label}
+          </DropdownMenuItem>);
+        }
+    };
+    return (<DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button shape="rounded-full">Text Label</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-auto" size="lg">
+        <div className={"grid gap-0 ".concat(menuItems.length > 8 ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1')}>
+          {/* First Column */}
+          <div className="flex flex-col">
+            <DropdownMenuLabel className="mb-1">
+              Group Heading
+            </DropdownMenuLabel>
+            {menuItems.slice(0, 8).map(function (item, index) { return renderMenuItem(item, index); })}
+          </div>
+
+          {/* Second Column - Automatically renders if there are more than 8 items */}
+          {menuItems.length > 8 && (<div className="flex flex-col md:pl-2">
+              <DropdownMenuLabel className="mb-1">
+                Group Heading
+              </DropdownMenuLabel>
+              {menuItems.slice(8).map(function (item, index) { return renderMenuItem(item, index + 8); })}
+            </div>)}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>);
+};

package/dist/src/components/Dropdown/DropdownMenu/SelectAllSection.jsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { Checkbox } from "../../../components/Checkbox/checkbox";
+import { Label } from "../../../components/Label/Label";
+import { Caption } from "../../../components/Typography/Caption/caption";
+export var SelectAllSection = function (_a) {
+    var _b = _a.id, id = _b === void 0 ? "dm-select-all" : _b, checked = _a.checked, onToggleAll = _a.onToggleAll, selectedCount = _a.selectedCount, _c = _a.size, size = _c === void 0 ? "md" : _c;
+    var labelVariant = size === "lg" ? "label-lg" : size === "md" ? "label-md" : "label-sm";
+    return (<div className="flex flex-col gap-1 rounded-sm bg-gray-50 text-gray-800 py-3 px-4">
+      <div className="flex items-center gap-2">
+        <Checkbox id={id} checked={checked} onCheckedChange={onToggleAll} onClick={function (e) { return e.stopPropagation(); }} size={size}/>
+        <Label htmlFor={id} variant={labelVariant}>
+          Select All
+        </Label>
+      </div>
+      <Caption className="text-gray-500" variant="sm">
+        Selected ({selectedCount})
+      </Caption>
+    </div>);
+};

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

@@ -18,3 +18,8 @@ export declare const checkBoxSize: {
     readonly md: "md";
     readonly lg: "lg";
 };
+export declare const dropdownContentPosition: {
+    readonly start: "start";
+    readonly center: "center";
+    readonly end: "end";
+};

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

@@ -19,3 +19,8 @@ export var checkBoxSize = {
     md: "md",
     lg: "lg",
 };
+export var dropdownContentPosition = {
+    start: "start",
+    center: "center",
+    end: "end",
+};

package/dist/src/components/Dropdown/Select.stories.d.ts

@@ -1,5 +1,6 @@
 import { Select } from "./select";
 import { SelectColor, SelectShape, SelectSize, SelectType } from ".";
+import React from "react";
 declare const meta: {
     title: string;
     component: typeof Select;
@@ -136,10 +137,10 @@ export declare const Default: (args: {
     color?: SelectColor;
     disabled?: boolean;
     onValueChange?: (value: string) => void;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const Group: () => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
+export declare const Group: () => React.JSX.Element;
 export declare const KeyValue: {
-    (): import("react/jsx-runtime").JSX.Element;
+    (): React.JSX.Element;
     story: {
         parameters: {
             docs: {
@@ -157,6 +158,6 @@ export declare const Disabled: (args: {
     placeholder?: string;
     disabled?: boolean;
     onValueChange?: (value: string) => void;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const LargeDropdown: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithDisabledItem: () => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
+export declare const LargeDropdown: () => React.JSX.Element;
+export declare const WithDisabledItem: () => React.JSX.Element;