@blueshift-gg/ui-components 0.1.50 → 0.1.52

package/dist/Dropdown.js

@@ -1,613 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Button = require('./Button');
-var react = require('react');
-var react$1 = require('motion/react');
-var classNames = require('classnames');
-var easings = require('./utils/easings');
-var Checkbox = require('./Checkbox');
-var Divider = require('./Divider');
-var Icon = require('./Icon');
-var usehooksTs = require('usehooks-ts');
-var CrossHair = require('./CrossHair');
-
-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,
-  handleChange,
-  multiple = false,
-  menuClassName,
-  size = "md",
-  isOpen,
-  onItemClick,
-  isScrollable = false,
-  animationOrigin = "top-left",
-  search,
-  onClearSearch,
-  showSelectAll = true,
-  showSafeTriangle = false,
-  subMenuClassName
-}) => {
-  const [isAtBottom, setIsAtBottom] = react.useState(false);
-  const scrollContainerRef = react.useRef(null);
-  const filteredItems = (() => {
-    if (search) {
-      return items.filter(
-        (item) => item.label.toLowerCase().includes(search.toLowerCase())
-      );
-    }
-    return items;
-  })();
-  const handleScroll = react.useCallback(() => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
-    const { scrollTop, scrollHeight, clientHeight } = container;
-    const threshold = 5;
-    const isNearBottom = scrollTop + clientHeight >= scrollHeight - threshold;
-    setIsAtBottom(isNearBottom);
-  }, []);
-  react.useEffect(() => {
-    if (isOpen) {
-      setIsAtBottom(false);
-    }
-  }, [isOpen, filteredItems.length]);
-  react.useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (!container || !isOpen) return;
-    const { scrollHeight, clientHeight } = container;
-    const hasScrollbar = scrollHeight > clientHeight;
-    if (!hasScrollbar) {
-      setIsAtBottom(true);
-    }
-  }, [isOpen, filteredItems.length]);
-  const isItemSelected = (value) => {
-    if (multiple) {
-      return Array.isArray(selectedItem) && selectedItem.length > 0 && selectedItem.includes(value);
-    }
-    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 : [];
-      if (isAllSelected()) {
-        handleChange([value]);
-      } else if (currentSelection.includes(value)) {
-        handleChange(currentSelection.filter((item) => item !== value));
-      } else {
-        handleChange([...currentSelection, value]);
-      }
-    } else {
-      if (selectedItem === value) {
-        handleChange(void 0);
-      } else {
-        handleChange(value);
-      }
-      onItemClick?.(value);
-    }
-  };
-  const handleSelectAll = () => {
-    const currentSelection = Array.isArray(selectedItem) ? selectedItem : [];
-    const allValues = flattenSelectable(filteredItems).filter((item) => !item.disabled).map((item) => item.value);
-    if (currentSelection.length === allValues.length) {
-      handleChange([]);
-    } else {
-      handleChange(allValues);
-    }
-  };
-  const isAllSelected = () => {
-    if (!Array.isArray(selectedItem) || selectedItem.length === 0) return false;
-    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(
-    react$1.motion.div,
-    {
-      initial: { opacity: 0, scale: 0.8, y: -15 },
-      animate: { opacity: 1, scale: 1, y: 0 },
-      transition: { duration: 0.1, ease: easings.swift },
-      exit: { opacity: 0, scale: 0.8, y: -5 },
-      className: classNames__default.default(
-        "z-50 absolute top-[calc(100%+6px)] p-1 bg-card-foreground border border-border-light",
-        (size === "lg" || size === "md") && "min-w-[200px]",
-        animationOrigin === "top-left" && "origin-top-left",
-        animationOrigin === "top-center" && "origin-top-center",
-        animationOrigin === "top-right" && "origin-top-right",
-        menuClassName
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref: scrollContainerRef,
-          onScroll: handleScroll,
-          className: classNames__default.default(
-            "flex flex-col gap-y-1",
-            isScrollable && [
-              "max-h-[250px] overflow-y-auto",
-              !isAtBottom && "[mask-image:linear-gradient(180deg,black,black_85%,transparent_100%)]"
-            ]
-          ),
-          children: [
-            multiple && showSelectAll && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group flex flex-col gap-y-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  onClick: handleSelectAll,
-                  className: classNames__default.default(
-                    "py-3 pl-2.5 pr-3 flex items-center gap-x-2.5 outline-none bg-transparent transition-colors duration-100 ease-crisp hover:bg-border-light/50"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Checkbox.Checkbox, { checked: isAllSelected() }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-shade-primary font-medium", children: "Select All" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { direction: "horizontal" })
-            ] }),
-            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,
-                  onClick: () => handleItemClick(item.value),
-                  disabled: item.disabled,
-                  isSelected: isItemSelected(item.value),
-                  size
-                },
-                item.value
-              )
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => {
-                  if (onClearSearch) {
-                    onClearSearch();
-                  }
-                },
-                className: "py-3 pl-2.5 pr-3 text-sm font-mono text-shade-tertiary hover:bg-border-light/50 transition-colors duration-100 ease-crisp w-full text-center",
-                children: "No options found"
-              }
-            )
-          ]
-        }
-      )
-    }
-  ) });
-};
-const Dropdown = ({
-  className,
-  items,
-  selectedItem,
-  handleChange,
-  label = "View All",
-  multiSelectLabel,
-  disabled,
-  buttonClassName,
-  menuClassName,
-  multiple = false,
-  menuIcon,
-  size = "md",
-  isScrollable = false,
-  search,
-  onClearSearch,
-  showSelectAll,
-  showClear = true,
-  subMenuClassName,
-  showSelectedItem = true
-}) => {
-  const [isOpen, setIsOpen] = react.useState(false);
-  const handleItemClick = (value) => {
-    if (!multiple) {
-      if (selectedItem === value) {
-        handleChange(void 0);
-      } else {
-        handleChange(value);
-      }
-      setIsOpen(false);
-    }
-  };
-  const ref = react.useRef(null);
-  const handleClickOutside = () => {
-    setIsOpen(false);
-  };
-  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 leaves.filter((item) => selectedValues.includes(item.value));
-    }
-    const selected = leaves.find((item) => item.value === selectedItem);
-    return selected ? [selected] : [];
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref,
-      className: classNames__default.default(
-        "relative flex flex-col gap-y-1.5 items-start",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DropdownButton,
-          {
-            label,
-            multiSelectLabel,
-            disabled,
-            className: buttonClassName,
-            onClick: () => setIsOpen(!isOpen),
-            selectedItems: getSelectedItems(),
-            multiple,
-            count: getSelectedItems().length,
-            menuIcon,
-            size,
-            onClear: () => handleChange(multiple ? [] : void 0),
-            showClear,
-            showSelectedItem
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DropdownMenu,
-          {
-            items,
-            selectedItem,
-            handleChange,
-            multiple,
-            menuClassName,
-            size,
-            isOpen,
-            onItemClick: handleItemClick,
-            isScrollable,
-            search,
-            onClearSearch,
-            showSelectAll,
-            subMenuClassName
-          }
-        )
-      ]
-    }
-  );
-};
-const DropdownButton = ({
-  label,
-  multiSelectLabel,
-  disabled,
-  className,
-  onClick,
-  selectedItems = [],
-  multiple = false,
-  count = 0,
-  menuIcon,
-  size,
-  onClear,
-  showClear,
-  showSelectedItem
-}) => {
-  const [isHovered, setIsHovered] = react.useState(false);
-  const hasSelection = selectedItems.length > 0;
-  const isSingleSelection = selectedItems.length === 1;
-  const isMultipleSelection = selectedItems.length > 1;
-  let buttonIcon;
-  let buttonLabel;
-  if (hasSelection && isSingleSelection) {
-    const selectedItem = selectedItems[0];
-    buttonIcon = selectedItem.icon ? react.isValidElement(selectedItem.icon) ? selectedItem.icon : {
-      name: selectedItem.icon.name,
-      className: selectedItem.icon.className || "",
-      size: selectedItem.icon.size || 18
-    } : menuIcon;
-    buttonLabel = typeof label === "function" ? label(selectedItem.label) : selectedItem.label;
-  } else if (isMultipleSelection && multiple && multiSelectLabel) {
-    buttonIcon = menuIcon ? react.isValidElement(menuIcon) ? menuIcon : {
-      name: menuIcon.name,
-      className: menuIcon.className || "",
-      size: menuIcon.size || 18
-    } : void 0;
-    buttonLabel = `${count} ${multiSelectLabel}`;
-  } else {
-    buttonIcon = menuIcon;
-    buttonLabel = typeof label === "function" ? label("") : label;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Button.Button,
-    {
-      icon: buttonIcon,
-      label: showSelectedItem ? buttonLabel : void 0,
-      disabled,
-      size,
-      variant: "secondary",
-      className: classNames__default.default(
-        "!origin-bottom-left !justify-start w-full",
-        (size === "md" || size === "lg") && "!pr-[18px] !pl-[12px]",
-        size === "sm" && "!pr-4 !pl-3",
-        showClear && "!pr-[48px]",
-        className
-      ),
-      useDecryptAnimation: false,
-      useHoverEffect: false,
-      crosshairProps: {
-        variant: "corners",
-        corners: ["bottom-right"],
-        spacingX: !isHovered ? -6 : -4,
-        spacingY: !isHovered ? -6 : -4,
-        animationDuration: 0.5,
-        animationDelay: 0,
-        className: "text-shade-mute group-hover:text-shade-primary"
-      },
-      onClick,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      children: hasSelection && showClear && /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "order-last top-1/2 -translate-y-1/2 right-2 absolute 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 })
-        }
-      )
-    }
-  );
-};
-const DropdownItem = ({
-  label,
-  icon,
-  onClick,
-  disabled,
-  isSelected = false,
-  size
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      onClick,
-      disabled,
-      className: classNames__default.default(
-        "hover:bg-border-light/50 relative group/item disabled:opacity-40 flex items-center gap-x-2.5 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",
-        isSelected && "bg-background/50"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-0 group-hover/item:!opacity-100 absolute inset-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
-          CrossHair.CrosshairCorners,
-          {
-            size: 6,
-            variant: "corners",
-            corners: ["bottom-right"],
-            className: "text-shade-mute",
-            animationDelay: 0,
-            animationDuration: 0.5
-          }
-        ) }),
-        icon && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: react.isValidElement(icon) ? icon : /* @__PURE__ */ jsxRuntime.jsx(
-          Icon.Icon,
-          {
-            name: icon.name,
-            className: classNames__default.default(
-              "flex-shrink-0",
-              icon.className
-            ),
-            size: icon.size || 18
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: classNames__default.default(" text-shade-primary font-medium leading-[100%]"),
-            children: label
-          }
-        )
-      ]
-    }
-  );
-};
-const DropdownSubmenuItem = ({
-  item,
-  size = "md",
-  subMenuClassName,
-  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: classNames__default.default("relative", subMenuClassName),
-      onMouseEnter: () => setHoverParent(true),
-      onMouseLeave: () => setHoverParent(false),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            className: classNames__default.default(
-              "hover:bg-border-light/50 relative h-max 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 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: react.isValidElement(item.icon) ? item.icon : /* @__PURE__ */ jsxRuntime.jsx(
-                  Icon.Icon,
-                  {
-                    name: item.icon.name,
-                    className: classNames__default.default(
-                      "flex-shrink-0",
-                      item.icon.className
-                    ),
-                    size: item.icon.size || 18
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-shade-primary font-medium leading-[100%]", children: item.label })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "ChevronRight", size: 12, 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,
-                    onClick: () => onLeafClick(child.value),
-                    disabled: child.disabled,
-                    isSelected: isLeafSelected(child.value),
-                    size
-                  },
-                  child.value
-                )
-              ) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-exports.Dropdown = Dropdown;
-exports.DropdownButton = DropdownButton;
-exports.DropdownItem = DropdownItem;
-exports.DropdownMenu = DropdownMenu;
-//# sourceMappingURL=Dropdown.js.map
-//# sourceMappingURL=Dropdown.js.map