@blueshift-gg/ui-components 0.1.7 → 0.1.9

package/dist/Dropdown.d.mts

@@ -1,15 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as IconProps } from './Icon-CTxwWbdC.mjs';
+import { a as IconProps } from './Icon-BlNfHVtM.mjs';
 import './utils/colours.mjs';
 
+type DropdownOption = {
+    label: string;
+    icon?: IconProps;
+    value: string;
+    disabled?: boolean;
+    children?: DropdownOption[];
+};
 type DropdownProps = {
     className?: string;
-    items: {
-        label: string;
-        icon?: IconProps;
-        value: string;
-        disabled?: boolean;
-    }[];
+    items: DropdownOption[];
     selectedItem?: string | string[] | undefined;
     handleChange: (item: string | string[] | undefined) => void;
     multiple?: boolean;
@@ -24,6 +26,7 @@ type DropdownProps = {
     animationOrigin?: "top-left" | "top-center" | "top-right";
     search?: string;
     onClearSearch?: () => void;
+    showSelectAll?: boolean;
 };
 type DropdownButtonProps = {
     label: string;
@@ -37,6 +40,7 @@ type DropdownButtonProps = {
     count?: number;
     menuIcon?: IconProps;
     size?: "sm" | "md" | "lg";
+    onClear?: () => void;
 };
 type DropdownItemProps = {
     label: string;
@@ -47,12 +51,7 @@ type DropdownItemProps = {
     size?: "sm" | "md" | "lg";
 };
 type DropdownMenuProps = {
-    items: {
-        label: string;
-        icon?: IconProps;
-        value: string;
-        disabled?: boolean;
-    }[];
+    items: DropdownOption[];
     selectedItem?: string | string[] | undefined;
     handleChange: (item: string | string[] | undefined) => void;
     multiple?: boolean;
@@ -64,10 +63,12 @@ type DropdownMenuProps = {
     animationOrigin?: "top-left" | "top-center" | "top-right";
     search?: string;
     onClearSearch?: () => void;
+    showSelectAll?: boolean;
+    showSafeTriangle?: boolean;
 };
-declare const DropdownMenu: ({ items, selectedItem, handleChange, multiple, menuClassName, size, isOpen, onItemClick, isScrollable, animationOrigin, search, onClearSearch, }: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
-declare const Dropdown: ({ className, items, selectedItem, handleChange, label, multiSelectLabel, disabled, buttonClassName, menuClassName, multiple, menuIcon, size, isScrollable, search, onClearSearch, }: DropdownProps) => react_jsx_runtime.JSX.Element;
-declare const DropdownButton: ({ label, multiSelectLabel, disabled, className, onClick, selectedItems, multiple, count, menuIcon, size, }: DropdownButtonProps) => react_jsx_runtime.JSX.Element;
+declare const DropdownMenu: ({ items, selectedItem, handleChange, multiple, menuClassName, size, isOpen, onItemClick, isScrollable, animationOrigin, search, onClearSearch, showSelectAll, showSafeTriangle, }: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
+declare const Dropdown: ({ className, items, selectedItem, handleChange, label, multiSelectLabel, disabled, buttonClassName, menuClassName, multiple, menuIcon, size, isScrollable, search, onClearSearch, showSelectAll, }: DropdownProps) => react_jsx_runtime.JSX.Element;
+declare const DropdownButton: ({ label, multiSelectLabel, disabled, className, onClick, selectedItems, multiple, count, menuIcon, size, onClear, }: DropdownButtonProps) => react_jsx_runtime.JSX.Element;
 declare const DropdownItem: ({ label, icon, onClick, disabled, isSelected, size, }: DropdownItemProps) => react_jsx_runtime.JSX.Element;
 
-export { Dropdown, DropdownButton, type DropdownButtonProps, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps };
+export { Dropdown, DropdownButton, type DropdownButtonProps, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownOption, type DropdownProps };

package/dist/Dropdown.d.ts

@@ -1,15 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as IconProps } from './Icon-llWd6yMa.js';
+import { a as IconProps } from './Icon-CyRhTGIG.js';
 import './utils/colours.js';
 
+type DropdownOption = {
+    label: string;
+    icon?: IconProps;
+    value: string;
+    disabled?: boolean;
+    children?: DropdownOption[];
+};
 type DropdownProps = {
     className?: string;
-    items: {
-        label: string;
-        icon?: IconProps;
-        value: string;
-        disabled?: boolean;
-    }[];
+    items: DropdownOption[];
     selectedItem?: string | string[] | undefined;
     handleChange: (item: string | string[] | undefined) => void;
     multiple?: boolean;
@@ -24,6 +26,7 @@ type DropdownProps = {
     animationOrigin?: "top-left" | "top-center" | "top-right";
     search?: string;
     onClearSearch?: () => void;
+    showSelectAll?: boolean;
 };
 type DropdownButtonProps = {
     label: string;
@@ -37,6 +40,7 @@ type DropdownButtonProps = {
     count?: number;
     menuIcon?: IconProps;
     size?: "sm" | "md" | "lg";
+    onClear?: () => void;
 };
 type DropdownItemProps = {
     label: string;
@@ -47,12 +51,7 @@ type DropdownItemProps = {
     size?: "sm" | "md" | "lg";
 };
 type DropdownMenuProps = {
-    items: {
-        label: string;
-        icon?: IconProps;
-        value: string;
-        disabled?: boolean;
-    }[];
+    items: DropdownOption[];
     selectedItem?: string | string[] | undefined;
     handleChange: (item: string | string[] | undefined) => void;
     multiple?: boolean;
@@ -64,10 +63,12 @@ type DropdownMenuProps = {
     animationOrigin?: "top-left" | "top-center" | "top-right";
     search?: string;
     onClearSearch?: () => void;
+    showSelectAll?: boolean;
+    showSafeTriangle?: boolean;
 };
-declare const DropdownMenu: ({ items, selectedItem, handleChange, multiple, menuClassName, size, isOpen, onItemClick, isScrollable, animationOrigin, search, onClearSearch, }: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
-declare const Dropdown: ({ className, items, selectedItem, handleChange, label, multiSelectLabel, disabled, buttonClassName, menuClassName, multiple, menuIcon, size, isScrollable, search, onClearSearch, }: DropdownProps) => react_jsx_runtime.JSX.Element;
-declare const DropdownButton: ({ label, multiSelectLabel, disabled, className, onClick, selectedItems, multiple, count, menuIcon, size, }: DropdownButtonProps) => react_jsx_runtime.JSX.Element;
+declare const DropdownMenu: ({ items, selectedItem, handleChange, multiple, menuClassName, size, isOpen, onItemClick, isScrollable, animationOrigin, search, onClearSearch, showSelectAll, showSafeTriangle, }: DropdownMenuProps) => react_jsx_runtime.JSX.Element;
+declare const Dropdown: ({ className, items, selectedItem, handleChange, label, multiSelectLabel, disabled, buttonClassName, menuClassName, multiple, menuIcon, size, isScrollable, search, onClearSearch, showSelectAll, }: DropdownProps) => react_jsx_runtime.JSX.Element;
+declare const DropdownButton: ({ label, multiSelectLabel, disabled, className, onClick, selectedItems, multiple, count, menuIcon, size, onClear, }: DropdownButtonProps) => react_jsx_runtime.JSX.Element;
 declare const DropdownItem: ({ label, icon, onClick, disabled, isSelected, size, }: DropdownItemProps) => react_jsx_runtime.JSX.Element;
 
-export { Dropdown, DropdownButton, type DropdownButtonProps, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps };
+export { Dropdown, DropdownButton, type DropdownButtonProps, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownOption, type DropdownProps };

package/dist/Dropdown.js

@@ -16,6 +16,59 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
+const useMousePosition = () => {
+  const [mousePosition, setMousePosition] = react.useState([0, 0]);
+  const updateMousePosition = react.useCallback((ev) => {
+    setMousePosition([ev.clientX, ev.clientY]);
+  }, []);
+  react.useEffect(() => {
+    const throttledUpdate = (ev) => {
+      requestAnimationFrame(() => updateMousePosition(ev));
+    };
+    window.addEventListener("mousemove", throttledUpdate);
+    return () => window.removeEventListener("mousemove", throttledUpdate);
+  }, [updateMousePosition]);
+  return mousePosition;
+};
+const MouseSafeArea = ({
+  parentRef,
+  submenuRef,
+  onEnter,
+  onLeave,
+  debug = false
+}) => {
+  const {
+    x = 0,
+    y = 0,
+    height: h = 0,
+    width: w = 0
+  } = submenuRef.current?.getBoundingClientRect() || {};
+  const [mouseX, mouseY] = useMousePosition();
+  const positions = { x, y, h, w, mouseX, mouseY };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: getLeft(positions),
+        right: getRight(positions),
+        top: 0,
+        width: getWidth(positions),
+        height: h,
+        clipPath: getClipPath(positions),
+        pointerEvents: "auto",
+        zIndex: 9999,
+        backgroundColor: debug ? "rgba(0, 179, 179, 0.25)" : "transparent"
+      },
+      onMouseEnter: onEnter,
+      onMouseLeave: onLeave
+    }
+  );
+};
+const getLeft = ({ x, mouseX }) => mouseX > x ? void 0 : -Math.max(x - mouseX, 10) + "px";
+const getRight = ({ x, w, mouseX }) => mouseX > x ? -Math.max(mouseX - (x + w), 10) + "px" : void 0;
+const getWidth = ({ x, w, mouseX }) => mouseX > x ? Math.max(mouseX - (x + w), 10) + "px" : Math.max(x - mouseX, 10) + "px";
+const getClipPath = ({ x, y, h, mouseX, mouseY }) => mouseX < x ? `polygon(100% 0%, 0% ${100 * (mouseY - y) / h}%, 100% 100%)` : `polygon(0% 0%, 0% 100%, 100% ${100 * (mouseY - y) / h}%)`;
 const DropdownMenu = ({
   items,
   selectedItem,
@@ -28,7 +81,9 @@ const DropdownMenu = ({
   isScrollable = false,
   animationOrigin = "top-left",
   search,
-  onClearSearch
+  onClearSearch,
+  showSelectAll = true,
+  showSafeTriangle = false
 }) => {
   const [isAtBottom, setIsAtBottom] = react.useState(false);
   const scrollContainerRef = react.useRef(null);
@@ -68,6 +123,20 @@ const DropdownMenu = ({
     }
     return !!selectedItem && selectedItem === value;
   };
+  const flattenSelectable = (options) => {
+    const out = [];
+    const walk = (nodes) => {
+      nodes.forEach((n) => {
+        if (n.children && n.children.length > 0) {
+          walk(n.children);
+        } else {
+          out.push(n);
+        }
+      });
+    };
+    walk(options);
+    return out;
+  };
   const handleItemClick = (value) => {
     if (multiple) {
       const currentSelection = Array.isArray(selectedItem) ? selectedItem : [];
@@ -89,7 +158,7 @@ const DropdownMenu = ({
   };
   const handleSelectAll = () => {
     const currentSelection = Array.isArray(selectedItem) ? selectedItem : [];
-    const allValues = filteredItems.filter((item) => !item.disabled).map((item) => item.value);
+    const allValues = flattenSelectable(filteredItems).filter((item) => !item.disabled).map((item) => item.value);
     if (currentSelection.length === allValues.length) {
       handleChange([]);
     } else {
@@ -98,7 +167,9 @@ const DropdownMenu = ({
   };
   const isAllSelected = () => {
     if (!Array.isArray(selectedItem) || selectedItem.length === 0) return false;
-    const selectableItems = filteredItems.filter((item) => !item.disabled);
+    const selectableItems = flattenSelectable(filteredItems).filter(
+      (item) => !item.disabled
+    );
     return selectableItems.length > 0 && selectedItem.length === selectableItems.length && selectableItems.every((item) => selectedItem.includes(item.value));
   };
   return /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
@@ -109,7 +180,7 @@ const DropdownMenu = ({
       transition: { duration: 0.1, ease: easings.swift },
       exit: { opacity: 0, scale: 0.8, y: -5 },
       className: classNames__default.default(
-        "absolute top-[calc(100%+6px)] p-1 bg-card-foreground gradient-border before:bg-card-border",
+        "z-50 absolute top-[calc(100%+6px)] p-1 bg-card-foreground gradient-border before:bg-card-border",
         (size === "lg" || size === "md") && "min-w-[200px]",
         animationOrigin === "top-left" && "origin-top-left",
         animationOrigin === "top-center" && "origin-top-center",
@@ -129,7 +200,7 @@ const DropdownMenu = ({
             ]
           ),
           children: [
-            multiple && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group flex flex-col gap-y-1", children: [
+            multiple && showSelectAll && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group flex flex-col gap-y-1", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
@@ -145,23 +216,34 @@ const DropdownMenu = ({
               ),
               /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { direction: "horizontal" })
             ] }),
-            filteredItems.length > 0 ? filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-              DropdownItem,
-              {
-                label: item.label,
-                icon: item.icon?.name ? {
-                  name: item.icon.name,
-                  className: item.icon.className,
-                  size: item.icon.size,
-                  difficulties: item.icon.difficulties
-                } : void 0,
-                onClick: () => handleItemClick(item.value),
-                disabled: item.disabled,
-                isSelected: isItemSelected(item.value),
-                size
-              },
-              item.value
-            )) : /* @__PURE__ */ jsxRuntime.jsx(
+            filteredItems.length > 0 ? filteredItems.map(
+              (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                DropdownSubmenuItem,
+                {
+                  item,
+                  size,
+                  onLeafClick: handleItemClick,
+                  isLeafSelected: isItemSelected
+                },
+                item.value
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                DropdownItem,
+                {
+                  label: item.label,
+                  icon: item.icon?.name ? {
+                    name: item.icon.name,
+                    className: item.icon.className,
+                    size: item.icon.size,
+                    difficulties: item.icon.difficulties
+                  } : void 0,
+                  onClick: () => handleItemClick(item.value),
+                  disabled: item.disabled,
+                  isSelected: isItemSelected(item.value),
+                  size
+                },
+                item.value
+              )
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 onClick: () => {
@@ -194,7 +276,8 @@ const Dropdown = ({
   size = "md",
   isScrollable = false,
   search,
-  onClearSearch
+  onClearSearch,
+  showSelectAll
 }) => {
   const [isOpen, setIsOpen] = react.useState(false);
   const handleItemClick = (value) => {
@@ -213,13 +296,27 @@ const Dropdown = ({
   };
   usehooksTs.useOnClickOutside(ref, handleClickOutside);
   const getSelectedItems = () => {
+    const flatten = (options) => {
+      const out = [];
+      const walk = (nodes) => {
+        nodes.forEach((n) => {
+          if (n.children && n.children.length > 0) {
+            walk(n.children);
+          } else {
+            out.push(n);
+          }
+        });
+      };
+      walk(options);
+      return out;
+    };
+    const leaves = flatten(items);
     if (multiple) {
       const selectedValues = Array.isArray(selectedItem) ? selectedItem : [];
-      return items.filter((item) => selectedValues.includes(item.value));
-    } else {
-      const selected = items.find((item) => item.value === selectedItem);
-      return selected ? [selected] : [];
+      return leaves.filter((item) => selectedValues.includes(item.value));
     }
+    const selected = leaves.find((item) => item.value === selectedItem);
+    return selected ? [selected] : [];
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -242,7 +339,8 @@ const Dropdown = ({
             multiple,
             count: getSelectedItems().length,
             menuIcon,
-            size
+            size,
+            onClear: () => handleChange(multiple ? [] : void 0)
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -258,7 +356,8 @@ const Dropdown = ({
             onItemClick: handleItemClick,
             isScrollable,
             search,
-            onClearSearch
+            onClearSearch,
+            showSelectAll
           }
         )
       ]
@@ -275,7 +374,8 @@ const DropdownButton = ({
   multiple = false,
   count = 0,
   menuIcon,
-  size
+  size,
+  onClear
 }) => {
   const [isHovered, setIsHovered] = react.useState(false);
   const hasSelection = selectedItems.length > 0;
@@ -319,6 +419,7 @@ const DropdownButton = ({
         size === "sm" && "!pr-4 !pl-3",
         className
       ),
+      useDecryptAnimation: false,
       useHoverEffect: false,
       crosshairProps: {
         variant: "corners",
@@ -331,7 +432,18 @@ const DropdownButton = ({
       },
       onClick,
       onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false)
+      onMouseLeave: () => setIsHovered(false),
+      children: hasSelection && multiple && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute right-2 top-1/2 -translate-y-1/2 h-[24px] w-[24px] flex items-center justify-center hover:bg-background/40 transition duration-100 ease-crisp cursor-pointer",
+          onClick: (e) => {
+            e.stopPropagation();
+            onClear?.();
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "Close", size: 12 })
+        }
+      )
     }
   );
 };
@@ -387,6 +499,109 @@ const DropdownItem = ({
     }
   );
 };
+const DropdownSubmenuItem = ({
+  item,
+  size = "md",
+  onLeafClick,
+  isLeafSelected
+}) => {
+  const parentRef = react.useRef(null);
+  const submenuRef = react.useRef(null);
+  const [hoverParent, setHoverParent] = react.useState(false);
+  const [hoverSubmenu, setHoverSubmenu] = react.useState(false);
+  const [hoverSafe, setHoverSafe] = react.useState(false);
+  const open = hoverParent || hoverSubmenu || hoverSafe;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: parentRef,
+      className: "relative",
+      onMouseEnter: () => setHoverParent(true),
+      onMouseLeave: () => setHoverParent(false),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: classNames__default.default(
+              "hover:bg-border-light/50 relative group/item disabled:opacity-40 flex items-center justify-between gap-x-2.5 w-full outline-none transition-colors duration-100 ease-crisp",
+              size === "lg" && "py-4 pl-3 pr-3 text-base",
+              size === "md" && "py-3 pl-2.5 pr-3 text-sm",
+              size === "sm" && "py-2 pl-2.5 pr-3 h-[36px] text-sm",
+              open && "bg-border-light/50"
+            ),
+            disabled: item.disabled,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-x-2.5", children: [
+                item.icon?.name && /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon.Icon,
+                  {
+                    name: item.icon.name,
+                    className: classNames__default.default("flex-shrink-0", item.icon.className),
+                    size: item.icon.size || 18,
+                    difficulties: item.icon.difficulties
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-shade-primary font-medium leading-[100%]", children: item.label })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "ChevronRight", size: 14, className: "text-shade-tertiary" })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: submenuRef,
+            onMouseEnter: () => setHoverSubmenu(true),
+            onMouseLeave: () => setHoverSubmenu(false),
+            className: classNames__default.default(
+              "z-[60] absolute top-0 left-[calc(100%+6px)] p-1 bg-card-foreground gradient-border before:bg-card-border min-w-[180px]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                MouseSafeArea,
+                {
+                  parentRef,
+                  submenuRef,
+                  onEnter: () => setHoverSafe(true),
+                  onLeave: () => setHoverSafe(false)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-y-1", children: (item.children || []).map(
+                (child) => child.children && child.children.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                  DropdownSubmenuItem,
+                  {
+                    item: child,
+                    size,
+                    onLeafClick,
+                    isLeafSelected
+                  },
+                  child.value
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  DropdownItem,
+                  {
+                    label: child.label,
+                    icon: child.icon?.name ? {
+                      name: child.icon.name,
+                      className: child.icon.className,
+                      size: child.icon.size,
+                      difficulties: child.icon.difficulties
+                    } : void 0,
+                    onClick: () => onLeafClick(child.value),
+                    disabled: child.disabled,
+                    isSelected: isLeafSelected(child.value),
+                    size
+                  },
+                  child.value
+                )
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 
 exports.Dropdown = Dropdown;
 exports.DropdownButton = DropdownButton;