bj-web-components 0.2.26 → 0.2.28

package/dist/web/CategoryDropdown/CategoryDropdown.js

@@ -0,0 +1,307 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactDom = require("react-dom");
+;/* empty css                       */
+;/* empty css                       */
+const ContentTooltip = require("../Tooltip/ContentTooltip.js");
+const TooltipWrapper = require("../Tooltip/TooltipWrapper.js");
+function TruncatedTooltip({
+  text,
+  spanClassName,
+  wrapperStyle,
+  placement = "top",
+  getPopupContainer,
+  trailing
+}) {
+  const [visible, setVisible] = react.useState(false);
+  const wrapperRef = react.useRef(null);
+  const spanRef = react.useRef(null);
+  const [anchorRect, setAnchorRect] = react.useState(null);
+  function handleMouseEnter() {
+    var _a;
+    const el = spanRef.current;
+    if (el && el.scrollWidth > el.offsetWidth) {
+      setAnchorRect(((_a = wrapperRef.current) == null ? void 0 : _a.getBoundingClientRect()) ?? null);
+      setVisible(true);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(TooltipWrapper, { ref: wrapperRef, style: wrapperStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref: spanRef,
+        className: spanClassName,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: () => setVisible(false),
+        children: text
+      }
+    ),
+    trailing,
+    visible && anchorRect && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          style: {
+            position: "fixed",
+            top: anchorRect.top,
+            left: anchorRect.left,
+            width: anchorRect.width,
+            height: anchorRect.height,
+            display: "block",
+            pointerEvents: "none",
+            zIndex: 9999999999
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(ContentTooltip, { content: text, placement, className: "bu-category-dropdown__tooltip" })
+        }
+      ),
+      (getPopupContainer == null ? void 0 : getPopupContainer()) ?? document.body
+    )
+  ] });
+}
+function ChevronDown() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.57345 8.828C5.41074 8.66528 5.41074 8.40152 5.57345 8.2388C5.73617 8.07608 5.99993 8.07608 6.16265 8.2388L10.0323 12.1084L13.8349 8.24124C13.9963 8.0772 14.26 8.07503 14.4241 8.23636C14.5881 8.39771 14.5903 8.66149 14.429 8.82555L10.5282 12.7924C10.2576 13.0675 9.81477 13.0694 9.54196 12.7966L5.57345 8.828Z", fill: "#333333" }) });
+}
+function ChevronRight() {
+  return (
+    // <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    //   <path d="M6 3.5L10.5 8L6 12.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    // </svg>
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { class: "icon", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "p-id": "55697", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M451.854222 285.361778A21.333333 21.333333 0 1 0 421.688889 315.52l198.115555 198.122667-197.994666 194.702222a21.333333 21.333333 0 0 0 29.916444 30.414222l203.107556-199.722667a35.555556 35.555556 0 0 0 0.213333-50.488888L451.854222 285.354667z", "p-id": "55698" }) })
+  );
+}
+function buildColumns(data, value) {
+  var _a;
+  const cols = [data];
+  let current = data;
+  for (let i = 0; i < value.length; i++) {
+    const selected = current.find((item) => item.value === value[i]);
+    if ((_a = selected == null ? void 0 : selected.children) == null ? void 0 : _a.length) {
+      cols.push(selected.children);
+      current = selected.children;
+    } else {
+      break;
+    }
+  }
+  return cols;
+}
+function buildPath(data, value) {
+  const path = [];
+  let items = data;
+  for (const v of value) {
+    const found = items.find((x) => x.value === v);
+    if (!found) break;
+    path.push(found);
+    items = found.children ?? [];
+  }
+  return path;
+}
+function BuCategoryDropdown({
+  data,
+  value = [],
+  onChange,
+  placeholder = "请选择分类",
+  disabled = false,
+  maxVisible = 6,
+  className,
+  style,
+  getPopupContainer,
+  dropdownStyle: customDropdownStyle
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [navValue, setNavValue] = react.useState(value);
+  const rootRef = react.useRef(null);
+  const dropdownRef = react.useRef(null);
+  const panelRef = react.useRef(null);
+  const wasOpenRef = react.useRef(false);
+  const [dropdownStyle, setDropdownStyle] = react.useState({});
+  const [colWidth, setColWidth] = react.useState();
+  const updatePosition = react.useCallback(() => {
+    var _a;
+    if (!rootRef.current) return;
+    const rect = rootRef.current.getBoundingClientRect();
+    let maxZ = 0;
+    let el = rootRef.current.parentElement;
+    while (el && el !== document.documentElement) {
+      const selfZ = parseInt(window.getComputedStyle(el).zIndex, 10);
+      if (!isNaN(selfZ) && selfZ > maxZ) maxZ = selfZ;
+      if (el.parentElement) {
+        for (const sibling of el.parentElement.children) {
+          if (sibling === el || !(sibling instanceof HTMLElement)) continue;
+          const sibZ = parseInt(window.getComputedStyle(sibling).zIndex, 10);
+          if (!isNaN(sibZ) && sibZ > maxZ) maxZ = sibZ;
+        }
+      }
+      el = el.parentElement;
+    }
+    const panelHeight = ((_a = panelRef.current) == null ? void 0 : _a.offsetHeight) ?? 0;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const flipToTop = panelHeight > 0 && spaceBelow < panelHeight + 4 && spaceAbove > spaceBelow;
+    setDropdownStyle({
+      position: "fixed",
+      top: flipToTop ? rect.top - panelHeight - 4 : rect.bottom + 4,
+      left: rect.left,
+      zIndex: maxZ > 0 ? maxZ + 10 : 1100,
+      ...customDropdownStyle
+    });
+  }, [customDropdownStyle]);
+  react.useLayoutEffect(() => {
+    if (open) {
+      updatePosition();
+    }
+  }, [open, navValue, updatePosition]);
+  react.useLayoutEffect(() => {
+    const justOpened = open && !wasOpenRef.current;
+    wasOpenRef.current = open;
+    if (!open || !panelRef.current) return;
+    const cols = panelRef.current.querySelectorAll(".bu-category-dropdown__col");
+    cols.forEach((col) => {
+      col.style.width = "";
+    });
+    let max = 0;
+    cols.forEach((col) => {
+      if (col.offsetWidth > max) max = col.offsetWidth;
+    });
+    const next = justOpened ? max : Math.max(colWidth ?? 0, max);
+    cols.forEach((col) => {
+      col.style.width = next ? `${next}px` : "";
+    });
+    if (next !== colWidth) setColWidth(next || void 0);
+  }, [open, navValue]);
+  react.useEffect(() => {
+    if (!open) return;
+    function handleClickOutside(e) {
+      var _a, _b;
+      const target = e.target;
+      if (((_a = rootRef.current) == null ? void 0 : _a.contains(target)) || ((_b = dropdownRef.current) == null ? void 0 : _b.contains(target))) {
+        return;
+      }
+      setOpen(false);
+    }
+    function handleScroll() {
+      setOpen(false);
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [open, updatePosition]);
+  const path = buildPath(data, value);
+  const hasValue = path.length > 0;
+  const triggerLabel = hasValue ? path.map((item) => item.label).join(" / ") : null;
+  const columns = buildColumns(data, navValue);
+  function handleSelect(colIndex, item) {
+    var _a;
+    if (item.disabled) return;
+    const newNavValue = navValue.slice(0, colIndex + 1);
+    newNavValue[colIndex] = item.value;
+    setNavValue(newNavValue);
+    if (!((_a = item.children) == null ? void 0 : _a.length)) {
+      const newPath = buildPath(data, newNavValue);
+      onChange == null ? void 0 : onChange(newNavValue, newPath);
+      setOpen(false);
+    }
+  }
+  function handleOpen() {
+    setNavValue(value);
+    setOpen(true);
+  }
+  const triggerClass = [
+    "bu-category-dropdown__trigger",
+    open ? "bu-category-dropdown__trigger--open" : "",
+    hasValue ? "bu-category-dropdown__trigger--has-value" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bu-category-dropdown${className ? ` ${className}` : ""}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: triggerClass,
+            disabled,
+            onClick: () => open ? setOpen(false) : handleOpen(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              TruncatedTooltip,
+              {
+                text: triggerLabel ?? placeholder,
+                spanClassName: `bu-category-dropdown__trigger-label${!hasValue ? " bu-category-dropdown__trigger-label--placeholder" : ""}`,
+                wrapperStyle: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: 8 },
+                getPopupContainer,
+                trailing: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `bu-category-dropdown__trigger-chevron${open ? " bu-category-dropdown__trigger-chevron--open" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {}) })
+              }
+            )
+          }
+        ),
+        open && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: dropdownRef, style: dropdownStyle, className: "bu-category-dropdown__portal", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-category-dropdown__panel", ref: panelRef, children: columns.map((col, colIndex) => {
+            const isScrollable = col.length > maxVisible;
+            const isLast = colIndex === columns.length - 1;
+            const colClass = [
+              "bu-category-dropdown__col",
+              colIndex > 0 ? "bu-category-dropdown__col--indent" : "",
+              isScrollable ? "bu-category-dropdown__col--scrollable" : "",
+              isLast && colIndex > 0 ? "bu-category-dropdown__col--last" : ""
+            ].filter(Boolean).join(" ");
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "contents" }, children: [
+              colIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-category-dropdown__divider" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: colClass,
+                  style: colWidth ? { width: colWidth } : void 0,
+                  onMouseEnter: isScrollable ? (e) => e.currentTarget.classList.add("bu-category-dropdown__col--scrollbar-visible") : void 0,
+                  onMouseLeave: isScrollable ? (e) => e.currentTarget.classList.remove("bu-category-dropdown__col--scrollbar-visible") : void 0,
+                  children: col.map((item) => {
+                    var _a;
+                    const isSelected = navValue[colIndex] === item.value;
+                    const hasBranch = !!((_a = item.children) == null ? void 0 : _a.length);
+                    const itemClass = [
+                      "bu-category-dropdown__item",
+                      isSelected && hasBranch ? "bu-category-dropdown__item--selected-branch" : "",
+                      isSelected && !hasBranch ? "bu-category-dropdown__item--selected-leaf" : "",
+                      item.disabled ? "bu-category-dropdown__item--disabled" : ""
+                    ].filter(Boolean).join(" ");
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: itemClass,
+                        disabled: item.disabled,
+                        onClick: () => handleSelect(colIndex, item),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            TruncatedTooltip,
+                            {
+                              text: item.label,
+                              spanClassName: "bu-category-dropdown__item-label",
+                              wrapperStyle: { flex: 1, minWidth: 0, display: "block" },
+                              getPopupContainer
+                            }
+                          ),
+                          hasBranch && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-category-dropdown__item-arrow", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {}) })
+                        ]
+                      },
+                      item.value
+                    );
+                  })
+                }
+              )
+            ] }, colIndex);
+          }) }) }),
+          document.body
+        )
+      ]
+    }
+  );
+}
+module.exports = BuCategoryDropdown;

package/dist/web/CategoryDropdown/CategoryDropdown.mjs

@@ -0,0 +1,308 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useLayoutEffect, useEffect } from "react";
+import { createPortal } from "react-dom";
+/* empty css                       */
+/* empty css                       */
+import BTooltip from "../Tooltip/ContentTooltip.mjs";
+import TooltipWrapper from "../Tooltip/TooltipWrapper.mjs";
+function TruncatedTooltip({
+  text,
+  spanClassName,
+  wrapperStyle,
+  placement = "top",
+  getPopupContainer,
+  trailing
+}) {
+  const [visible, setVisible] = useState(false);
+  const wrapperRef = useRef(null);
+  const spanRef = useRef(null);
+  const [anchorRect, setAnchorRect] = useState(null);
+  function handleMouseEnter() {
+    var _a;
+    const el = spanRef.current;
+    if (el && el.scrollWidth > el.offsetWidth) {
+      setAnchorRect(((_a = wrapperRef.current) == null ? void 0 : _a.getBoundingClientRect()) ?? null);
+      setVisible(true);
+    }
+  }
+  return /* @__PURE__ */ jsxs(TooltipWrapper, { ref: wrapperRef, style: wrapperStyle, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: spanRef,
+        className: spanClassName,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: () => setVisible(false),
+        children: text
+      }
+    ),
+    trailing,
+    visible && anchorRect && createPortal(
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            position: "fixed",
+            top: anchorRect.top,
+            left: anchorRect.left,
+            width: anchorRect.width,
+            height: anchorRect.height,
+            display: "block",
+            pointerEvents: "none",
+            zIndex: 9999999999
+          },
+          children: /* @__PURE__ */ jsx(BTooltip, { content: text, placement, className: "bu-category-dropdown__tooltip" })
+        }
+      ),
+      (getPopupContainer == null ? void 0 : getPopupContainer()) ?? document.body
+    )
+  ] });
+}
+function ChevronDown() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M5.57345 8.828C5.41074 8.66528 5.41074 8.40152 5.57345 8.2388C5.73617 8.07608 5.99993 8.07608 6.16265 8.2388L10.0323 12.1084L13.8349 8.24124C13.9963 8.0772 14.26 8.07503 14.4241 8.23636C14.5881 8.39771 14.5903 8.66149 14.429 8.82555L10.5282 12.7924C10.2576 13.0675 9.81477 13.0694 9.54196 12.7966L5.57345 8.828Z", fill: "#333333" }) });
+}
+function ChevronRight() {
+  return (
+    // <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    //   <path d="M6 3.5L10.5 8L6 12.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    // </svg>
+    /* @__PURE__ */ jsx("svg", { class: "icon", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "p-id": "55697", children: /* @__PURE__ */ jsx("path", { d: "M451.854222 285.361778A21.333333 21.333333 0 1 0 421.688889 315.52l198.115555 198.122667-197.994666 194.702222a21.333333 21.333333 0 0 0 29.916444 30.414222l203.107556-199.722667a35.555556 35.555556 0 0 0 0.213333-50.488888L451.854222 285.354667z", "p-id": "55698" }) })
+  );
+}
+function buildColumns(data, value) {
+  var _a;
+  const cols = [data];
+  let current = data;
+  for (let i = 0; i < value.length; i++) {
+    const selected = current.find((item) => item.value === value[i]);
+    if ((_a = selected == null ? void 0 : selected.children) == null ? void 0 : _a.length) {
+      cols.push(selected.children);
+      current = selected.children;
+    } else {
+      break;
+    }
+  }
+  return cols;
+}
+function buildPath(data, value) {
+  const path = [];
+  let items = data;
+  for (const v of value) {
+    const found = items.find((x) => x.value === v);
+    if (!found) break;
+    path.push(found);
+    items = found.children ?? [];
+  }
+  return path;
+}
+function BuCategoryDropdown({
+  data,
+  value = [],
+  onChange,
+  placeholder = "请选择分类",
+  disabled = false,
+  maxVisible = 6,
+  className,
+  style,
+  getPopupContainer,
+  dropdownStyle: customDropdownStyle
+}) {
+  const [open, setOpen] = useState(false);
+  const [navValue, setNavValue] = useState(value);
+  const rootRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const panelRef = useRef(null);
+  const wasOpenRef = useRef(false);
+  const [dropdownStyle, setDropdownStyle] = useState({});
+  const [colWidth, setColWidth] = useState();
+  const updatePosition = useCallback(() => {
+    var _a;
+    if (!rootRef.current) return;
+    const rect = rootRef.current.getBoundingClientRect();
+    let maxZ = 0;
+    let el = rootRef.current.parentElement;
+    while (el && el !== document.documentElement) {
+      const selfZ = parseInt(window.getComputedStyle(el).zIndex, 10);
+      if (!isNaN(selfZ) && selfZ > maxZ) maxZ = selfZ;
+      if (el.parentElement) {
+        for (const sibling of el.parentElement.children) {
+          if (sibling === el || !(sibling instanceof HTMLElement)) continue;
+          const sibZ = parseInt(window.getComputedStyle(sibling).zIndex, 10);
+          if (!isNaN(sibZ) && sibZ > maxZ) maxZ = sibZ;
+        }
+      }
+      el = el.parentElement;
+    }
+    const panelHeight = ((_a = panelRef.current) == null ? void 0 : _a.offsetHeight) ?? 0;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const flipToTop = panelHeight > 0 && spaceBelow < panelHeight + 4 && spaceAbove > spaceBelow;
+    setDropdownStyle({
+      position: "fixed",
+      top: flipToTop ? rect.top - panelHeight - 4 : rect.bottom + 4,
+      left: rect.left,
+      zIndex: maxZ > 0 ? maxZ + 10 : 1100,
+      ...customDropdownStyle
+    });
+  }, [customDropdownStyle]);
+  useLayoutEffect(() => {
+    if (open) {
+      updatePosition();
+    }
+  }, [open, navValue, updatePosition]);
+  useLayoutEffect(() => {
+    const justOpened = open && !wasOpenRef.current;
+    wasOpenRef.current = open;
+    if (!open || !panelRef.current) return;
+    const cols = panelRef.current.querySelectorAll(".bu-category-dropdown__col");
+    cols.forEach((col) => {
+      col.style.width = "";
+    });
+    let max = 0;
+    cols.forEach((col) => {
+      if (col.offsetWidth > max) max = col.offsetWidth;
+    });
+    const next = justOpened ? max : Math.max(colWidth ?? 0, max);
+    cols.forEach((col) => {
+      col.style.width = next ? `${next}px` : "";
+    });
+    if (next !== colWidth) setColWidth(next || void 0);
+  }, [open, navValue]);
+  useEffect(() => {
+    if (!open) return;
+    function handleClickOutside(e) {
+      var _a, _b;
+      const target = e.target;
+      if (((_a = rootRef.current) == null ? void 0 : _a.contains(target)) || ((_b = dropdownRef.current) == null ? void 0 : _b.contains(target))) {
+        return;
+      }
+      setOpen(false);
+    }
+    function handleScroll() {
+      setOpen(false);
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [open, updatePosition]);
+  const path = buildPath(data, value);
+  const hasValue = path.length > 0;
+  const triggerLabel = hasValue ? path.map((item) => item.label).join(" / ") : null;
+  const columns = buildColumns(data, navValue);
+  function handleSelect(colIndex, item) {
+    var _a;
+    if (item.disabled) return;
+    const newNavValue = navValue.slice(0, colIndex + 1);
+    newNavValue[colIndex] = item.value;
+    setNavValue(newNavValue);
+    if (!((_a = item.children) == null ? void 0 : _a.length)) {
+      const newPath = buildPath(data, newNavValue);
+      onChange == null ? void 0 : onChange(newNavValue, newPath);
+      setOpen(false);
+    }
+  }
+  function handleOpen() {
+    setNavValue(value);
+    setOpen(true);
+  }
+  const triggerClass = [
+    "bu-category-dropdown__trigger",
+    open ? "bu-category-dropdown__trigger--open" : "",
+    hasValue ? "bu-category-dropdown__trigger--has-value" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bu-category-dropdown${className ? ` ${className}` : ""}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: triggerClass,
+            disabled,
+            onClick: () => open ? setOpen(false) : handleOpen(),
+            children: /* @__PURE__ */ jsx(
+              TruncatedTooltip,
+              {
+                text: triggerLabel ?? placeholder,
+                spanClassName: `bu-category-dropdown__trigger-label${!hasValue ? " bu-category-dropdown__trigger-label--placeholder" : ""}`,
+                wrapperStyle: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: 8 },
+                getPopupContainer,
+                trailing: /* @__PURE__ */ jsx("span", { className: `bu-category-dropdown__trigger-chevron${open ? " bu-category-dropdown__trigger-chevron--open" : ""}`, children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+              }
+            )
+          }
+        ),
+        open && createPortal(
+          /* @__PURE__ */ jsx("div", { ref: dropdownRef, style: dropdownStyle, className: "bu-category-dropdown__portal", children: /* @__PURE__ */ jsx("div", { className: "bu-category-dropdown__panel", ref: panelRef, children: columns.map((col, colIndex) => {
+            const isScrollable = col.length > maxVisible;
+            const isLast = colIndex === columns.length - 1;
+            const colClass = [
+              "bu-category-dropdown__col",
+              colIndex > 0 ? "bu-category-dropdown__col--indent" : "",
+              isScrollable ? "bu-category-dropdown__col--scrollable" : "",
+              isLast && colIndex > 0 ? "bu-category-dropdown__col--last" : ""
+            ].filter(Boolean).join(" ");
+            return /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
+              colIndex > 0 && /* @__PURE__ */ jsx("div", { className: "bu-category-dropdown__divider" }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: colClass,
+                  style: colWidth ? { width: colWidth } : void 0,
+                  onMouseEnter: isScrollable ? (e) => e.currentTarget.classList.add("bu-category-dropdown__col--scrollbar-visible") : void 0,
+                  onMouseLeave: isScrollable ? (e) => e.currentTarget.classList.remove("bu-category-dropdown__col--scrollbar-visible") : void 0,
+                  children: col.map((item) => {
+                    var _a;
+                    const isSelected = navValue[colIndex] === item.value;
+                    const hasBranch = !!((_a = item.children) == null ? void 0 : _a.length);
+                    const itemClass = [
+                      "bu-category-dropdown__item",
+                      isSelected && hasBranch ? "bu-category-dropdown__item--selected-branch" : "",
+                      isSelected && !hasBranch ? "bu-category-dropdown__item--selected-leaf" : "",
+                      item.disabled ? "bu-category-dropdown__item--disabled" : ""
+                    ].filter(Boolean).join(" ");
+                    return /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: itemClass,
+                        disabled: item.disabled,
+                        onClick: () => handleSelect(colIndex, item),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            TruncatedTooltip,
+                            {
+                              text: item.label,
+                              spanClassName: "bu-category-dropdown__item-label",
+                              wrapperStyle: { flex: 1, minWidth: 0, display: "block" },
+                              getPopupContainer
+                            }
+                          ),
+                          hasBranch && /* @__PURE__ */ jsx("span", { className: "bu-category-dropdown__item-arrow", children: /* @__PURE__ */ jsx(ChevronRight, {}) })
+                        ]
+                      },
+                      item.value
+                    );
+                  })
+                }
+              )
+            ] }, colIndex);
+          }) }) }),
+          document.body
+        )
+      ]
+    }
+  );
+}
+export {
+  BuCategoryDropdown as default
+};