bj-web-components 0.2.27 → 0.2.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (90) hide show
  1. package/dist/index.js +51 -1
  2. package/dist/index.mjs +49 -49
  3. package/dist/style.css +3744 -1
  4. package/dist/web/BasicInput/BInput.js +208 -1
  5. package/dist/web/BasicInput/BInput.mjs +164 -132
  6. package/dist/web/BasicInput/utils.js +47 -1
  7. package/dist/web/BasicInput/utils.mjs +38 -28
  8. package/dist/web/CategoryDropdown/CategoryDropdown.js +307 -1
  9. package/dist/web/CategoryDropdown/CategoryDropdown.mjs +218 -170
  10. package/dist/web/CheckBox/BCheckBox.js +116 -1
  11. package/dist/web/CheckBox/BCheckBox.mjs +86 -70
  12. package/dist/web/CheckBox/Group.js +73 -1
  13. package/dist/web/CheckBox/Group.mjs +63 -56
  14. package/dist/web/CheckBox/context.js +5 -1
  15. package/dist/web/CheckBox/context.mjs +3 -3
  16. package/dist/web/CheckBox/index.js +8 -1
  17. package/dist/web/CheckBox/index.mjs +6 -6
  18. package/dist/web/Dropdown/BDropdown.js +186 -1
  19. package/dist/web/Dropdown/BDropdown.mjs +132 -106
  20. package/dist/web/EmptyInputBox/EmptyInputBox.js +77 -1
  21. package/dist/web/EmptyInputBox/EmptyInputBox.mjs +52 -48
  22. package/dist/web/FileCard/FileCard.js +157 -1
  23. package/dist/web/FileCard/FileCard.mjs +112 -82
  24. package/dist/web/Icon/Icon.js +9 -1
  25. package/dist/web/Icon/Icon.mjs +6 -6
  26. package/dist/web/Input/Input.js +181 -1
  27. package/dist/web/Input/Input.mjs +122 -113
  28. package/dist/web/InputNumber/BInputNumber.js +311 -1
  29. package/dist/web/InputNumber/BInputNumber.mjs +275 -167
  30. package/dist/web/InputNumber/StepHandler.js +69 -1
  31. package/dist/web/InputNumber/StepHandler.mjs +38 -32
  32. package/dist/web/InputNumber/hooks/useCursor.js +40 -1
  33. package/dist/web/InputNumber/hooks/useCursor.mjs +35 -33
  34. package/dist/web/InputNumber/hooks/useFrame.js +12 -1
  35. package/dist/web/InputNumber/hooks/useFrame.mjs +9 -6
  36. package/dist/web/InputNumber/utils/decimal.js +147 -1
  37. package/dist/web/InputNumber/utils/decimal.mjs +109 -81
  38. package/dist/web/Modal/Modal.js +84 -1
  39. package/dist/web/Modal/Modal.mjs +52 -49
  40. package/dist/web/OverlayScrollbar/BOverlayScrollbar.js +232 -1
  41. package/dist/web/OverlayScrollbar/BOverlayScrollbar.mjs +206 -125
  42. package/dist/web/Pagination/Pagination.js +328 -1
  43. package/dist/web/Pagination/Pagination.mjs +254 -178
  44. package/dist/web/ProductField/ProductField.js +272 -1
  45. package/dist/web/ProductField/ProductField.mjs +190 -143
  46. package/dist/web/ProductField/arrow-up.svg.js +3 -1
  47. package/dist/web/ProductField/arrow-up.svg.mjs +2 -2
  48. package/dist/web/ProductField/checkbox-no.svg.js +3 -1
  49. package/dist/web/ProductField/checkbox-no.svg.mjs +2 -2
  50. package/dist/web/ProductField/checkbox-ok.svg.js +3 -1
  51. package/dist/web/ProductField/checkbox-ok.svg.mjs +2 -2
  52. package/dist/web/ProductField/no_data_light.svg.js +3 -1
  53. package/dist/web/ProductField/no_data_light.svg.mjs +2 -2
  54. package/dist/web/ProductField/search.svg.js +3 -1
  55. package/dist/web/ProductField/search.svg.mjs +2 -2
  56. package/dist/web/ProductField/sort.svg.js +3 -1
  57. package/dist/web/ProductField/sort.svg.mjs +2 -2
  58. package/dist/web/SkuInputCard/SkuInputCard.js +276 -1
  59. package/dist/web/SkuInputCard/SkuInputCard.mjs +188 -149
  60. package/dist/web/SkuInputCard/spin_loading_red.gif.js +3 -1
  61. package/dist/web/SkuInputCard/spin_loading_red.gif.mjs +2 -2
  62. package/dist/web/Switch/Switch.js +70 -1
  63. package/dist/web/Switch/Switch.mjs +47 -37
  64. package/dist/web/Table/BTable.js +950 -1
  65. package/dist/web/Table/BTable.mjs +771 -519
  66. package/dist/web/Table/Column.js +5 -1
  67. package/dist/web/Table/Column.mjs +2 -2
  68. package/dist/web/Table/ColumnGroup.js +5 -1
  69. package/dist/web/Table/ColumnGroup.mjs +2 -2
  70. package/dist/web/Table/utils/columns.js +48 -1
  71. package/dist/web/Table/utils/columns.mjs +35 -30
  72. package/dist/web/Table/utils/sortFilter.js +84 -1
  73. package/dist/web/Table/utils/sortFilter.mjs +73 -52
  74. package/dist/web/Tabs/BTabs.js +150 -1
  75. package/dist/web/Tabs/BTabs.mjs +118 -98
  76. package/dist/web/Tabs/TabPane.js +8 -1
  77. package/dist/web/Tabs/TabPane.mjs +4 -4
  78. package/dist/web/Tooltip/ConfirmTooltip.js +26 -1
  79. package/dist/web/Tooltip/ConfirmTooltip.mjs +20 -19
  80. package/dist/web/Tooltip/ContentTooltip.js +94 -1
  81. package/dist/web/Tooltip/ContentTooltip.mjs +72 -62
  82. package/dist/web/Tooltip/ProgressTooltip.js +36 -1
  83. package/dist/web/Tooltip/ProgressTooltip.mjs +22 -20
  84. package/dist/web/Tooltip/TooltipWrapper.js +12 -1
  85. package/dist/web/Tooltip/TooltipWrapper.mjs +8 -8
  86. package/dist/web/Tooltip/useAutoPlacement.js +41 -1
  87. package/dist/web/Tooltip/useAutoPlacement.mjs +34 -25
  88. package/dist/web.js +51 -1
  89. package/dist/web.mjs +49 -49
  90. package/package.json +1 -1
@@ -1,37 +1,47 @@
1
- function i(e) {
2
- return !!(e.addonBefore || e.addonAfter);
1
+ function hasAddon(props) {
2
+ return Boolean(props.addonBefore || props.addonAfter);
3
3
  }
4
- function l(e) {
5
- return !!(e.prefix || e.suffix || e.allowClear);
4
+ function hasPrefixSuffix(props) {
5
+ return Boolean(props.prefix || props.suffix || props.allowClear);
6
6
  }
7
- function t(e, n, r) {
8
- const c = n.cloneNode(!0), u = Object.create(e, {
9
- target: { value: c },
10
- currentTarget: { value: c }
7
+ function cloneEvent(event, target, value) {
8
+ const currentTarget = target.cloneNode(true);
9
+ const nextEvent = Object.create(event, {
10
+ target: { value: currentTarget },
11
+ currentTarget: { value: currentTarget }
11
12
  });
12
- return c.value = r, typeof n.selectionStart == "number" && typeof n.selectionEnd == "number" && (c.selectionStart = n.selectionStart, c.selectionEnd = n.selectionEnd), c.setSelectionRange = (...f) => n.setSelectionRange(...f), u;
13
+ currentTarget.value = value;
14
+ if (typeof target.selectionStart === "number" && typeof target.selectionEnd === "number") {
15
+ currentTarget.selectionStart = target.selectionStart;
16
+ currentTarget.selectionEnd = target.selectionEnd;
17
+ }
18
+ currentTarget.setSelectionRange = (...argumentsList) => target.setSelectionRange(...argumentsList);
19
+ return nextEvent;
13
20
  }
14
- function s(e, n, r, c) {
15
- if (r) {
16
- if (n.type === "click") {
17
- r(t(n, e, ""));
18
- return;
19
- }
20
- if (e.type !== "file" && c !== void 0) {
21
- r(t(n, e, c));
22
- return;
23
- }
24
- r(n);
21
+ function resolveOnChange(target, event, onChange, targetValue) {
22
+ if (!onChange) return;
23
+ if (event.type === "click") {
24
+ onChange(cloneEvent(event, target, ""));
25
+ return;
26
+ }
27
+ if (target.type !== "file" && targetValue !== void 0) {
28
+ onChange(cloneEvent(event, target, targetValue));
29
+ return;
25
30
  }
31
+ onChange(event);
26
32
  }
27
- function o(e, n) {
28
- if (!e || (e.focus(n), !(n != null && n.cursor))) return;
29
- const r = e.value.length;
30
- n.cursor === "start" ? e.setSelectionRange(0, 0) : n.cursor === "end" ? e.setSelectionRange(r, r) : e.setSelectionRange(0, r);
33
+ function triggerFocus(element, option) {
34
+ if (!element) return;
35
+ element.focus(option);
36
+ if (!(option == null ? void 0 : option.cursor)) return;
37
+ const length = element.value.length;
38
+ if (option.cursor === "start") element.setSelectionRange(0, 0);
39
+ else if (option.cursor === "end") element.setSelectionRange(length, length);
40
+ else element.setSelectionRange(0, length);
31
41
  }
32
42
  export {
33
- i as hasAddon,
34
- l as hasPrefixSuffix,
35
- s as resolveOnChange,
36
- o as triggerFocus
43
+ hasAddon,
44
+ hasPrefixSuffix,
45
+ resolveOnChange,
46
+ triggerFocus
37
47
  };
@@ -1 +1,307 @@
1
- "use strict";const n=require("react/jsx-runtime"),i=require("react"),V=require("react-dom");;/* empty css */;/* empty css */const I=require("../Tooltip/ContentTooltip.js"),J=require("../Tooltip/TooltipWrapper.js");function z({text:d,spanClassName:p,wrapperStyle:u,placement:g="top",getPopupContainer:h,trailing:f}){const[a,y]=i.useState(!1),j=i.useRef(null),E=i.useRef(null),[o,b]=i.useState(null);function m(){var w;const _=E.current;_&&_.scrollWidth>_.offsetWidth&&(b(((w=j.current)==null?void 0:w.getBoundingClientRect())??null),y(!0))}return n.jsxs(J,{ref:j,style:u,children:[n.jsx("span",{ref:E,className:p,onMouseEnter:m,onMouseLeave:()=>y(!1),children:d}),f,a&&o&&V.createPortal(n.jsx("span",{style:{position:"fixed",top:o.top,left:o.left,width:o.width,height:o.height,display:"block",pointerEvents:"none",zIndex:9999999999},children:n.jsx(I,{content:d,placement:g,className:"bu-category-dropdown__tooltip"})}),(h==null?void 0:h())??document.body)]})}function K(){return n.jsx("svg",{viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:n.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 P(){return n.jsx("svg",{class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"55697",children:n.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 Q(d,p){var h;const u=[d];let g=d;for(let f=0;f<p.length;f++){const a=g.find(y=>y.value===p[f]);if((h=a==null?void 0:a.children)!=null&&h.length)u.push(a.children),g=a.children;else break}return u}function O(d,p){const u=[];let g=d;for(const h of p){const f=g.find(a=>a.value===h);if(!f)break;u.push(f),g=f.children??[]}return u}function U({data:d,value:p=[],onChange:u,placeholder:g="请选择分类",disabled:h=!1,maxVisible:f=6,className:a,style:y,getPopupContainer:j,dropdownStyle:E}){const[o,b]=i.useState(!1),[m,_]=i.useState(p),w=i.useRef(null),T=i.useRef(null),R=i.useRef(null),W=i.useRef(!1),[$,A]=i.useState({}),[S,H]=i.useState(),L=i.useCallback(()=>{var v;if(!w.current)return;const r=w.current.getBoundingClientRect();let e=0,t=w.current.parentElement;for(;t&&t!==document.documentElement;){const N=parseInt(window.getComputedStyle(t).zIndex,10);if(!isNaN(N)&&N>e&&(e=N),t.parentElement)for(const x of t.parentElement.children){if(x===t||!(x instanceof HTMLElement))continue;const M=parseInt(window.getComputedStyle(x).zIndex,10);!isNaN(M)&&M>e&&(e=M)}t=t.parentElement}const s=((v=R.current)==null?void 0:v.offsetHeight)??0,l=window.innerHeight-r.bottom,c=r.top,C=s>0&&l<s+4&&c>l;A({position:"fixed",top:C?r.top-s-4:r.bottom+4,left:r.left,zIndex:e>0?e+10:1100,...E})},[E]);i.useLayoutEffect(()=>{o&&L()},[o,m,L]),i.useLayoutEffect(()=>{const r=o&&!W.current;if(W.current=o,!o||!R.current)return;const e=R.current.querySelectorAll(".bu-category-dropdown__col");e.forEach(l=>{l.style.width=""});let t=0;e.forEach(l=>{l.offsetWidth>t&&(t=l.offsetWidth)});const s=r?t:Math.max(S??0,t);e.forEach(l=>{l.style.width=s?`${s}px`:""}),s!==S&&H(s||void 0)},[o,m]),i.useEffect(()=>{if(!o)return;function r(t){var l,c;const s=t.target;(l=w.current)!=null&&l.contains(s)||(c=T.current)!=null&&c.contains(s)||b(!1)}function e(){b(!1)}return document.addEventListener("mousedown",r),document.addEventListener("scroll",e,!0),window.addEventListener("resize",L),()=>{document.removeEventListener("mousedown",r),document.removeEventListener("scroll",e,!0),window.removeEventListener("resize",L)}},[o,L]);const k=O(d,p),B=k.length>0,Z=B?k.map(r=>r.label).join(" / "):null,q=Q(d,m);function D(r,e){var s;if(e.disabled)return;const t=m.slice(0,r+1);if(t[r]=e.value,_(t),!((s=e.children)!=null&&s.length)){const l=O(d,t);u==null||u(t,l),b(!1)}}function F(){_(p),b(!0)}const G=["bu-category-dropdown__trigger",o?"bu-category-dropdown__trigger--open":"",B?"bu-category-dropdown__trigger--has-value":""].filter(Boolean).join(" ");return n.jsxs("div",{ref:w,className:`bu-category-dropdown${a?` ${a}`:""}`,style:y,children:[n.jsx("button",{type:"button",className:G,disabled:h,onClick:()=>o?b(!1):F(),children:n.jsx(z,{text:Z??g,spanClassName:`bu-category-dropdown__trigger-label${B?"":" bu-category-dropdown__trigger-label--placeholder"}`,wrapperStyle:{flex:1,minWidth:0,display:"flex",alignItems:"center",gap:8},getPopupContainer:j,trailing:n.jsx("span",{className:`bu-category-dropdown__trigger-chevron${o?" bu-category-dropdown__trigger-chevron--open":""}`,children:n.jsx(K,{})})})}),o&&V.createPortal(n.jsx("div",{ref:T,style:$,className:"bu-category-dropdown__portal",children:n.jsx("div",{className:"bu-category-dropdown__panel",ref:R,children:q.map((r,e)=>{const t=r.length>f,s=e===q.length-1,l=["bu-category-dropdown__col",e>0?"bu-category-dropdown__col--indent":"",t?"bu-category-dropdown__col--scrollable":"",s&&e>0?"bu-category-dropdown__col--last":""].filter(Boolean).join(" ");return n.jsxs("div",{style:{display:"contents"},children:[e>0&&n.jsx("div",{className:"bu-category-dropdown__divider"}),n.jsx("div",{className:l,style:S?{width:S}:void 0,onMouseEnter:t?c=>c.currentTarget.classList.add("bu-category-dropdown__col--scrollbar-visible"):void 0,onMouseLeave:t?c=>c.currentTarget.classList.remove("bu-category-dropdown__col--scrollbar-visible"):void 0,children:r.map(c=>{var x;const C=m[e]===c.value,v=!!((x=c.children)!=null&&x.length),N=["bu-category-dropdown__item",C&&v?"bu-category-dropdown__item--selected-branch":"",C&&!v?"bu-category-dropdown__item--selected-leaf":"",c.disabled?"bu-category-dropdown__item--disabled":""].filter(Boolean).join(" ");return n.jsxs("button",{type:"button",className:N,disabled:c.disabled,onClick:()=>D(e,c),children:[n.jsx(z,{text:c.label,spanClassName:"bu-category-dropdown__item-label",wrapperStyle:{flex:1,minWidth:0,display:"block"},getPopupContainer:j}),v&&n.jsx("span",{className:"bu-category-dropdown__item-arrow",children:n.jsx(P,{})})]},c.value)})})]},e)})})}),document.body)]})}module.exports=U;
1
+ "use strict";
2
+ const jsxRuntime = require("react/jsx-runtime");
3
+ const react = require("react");
4
+ const reactDom = require("react-dom");
5
+ ;/* empty css */
6
+ ;/* empty css */
7
+ const ContentTooltip = require("../Tooltip/ContentTooltip.js");
8
+ const TooltipWrapper = require("../Tooltip/TooltipWrapper.js");
9
+ function TruncatedTooltip({
10
+ text,
11
+ spanClassName,
12
+ wrapperStyle,
13
+ placement = "top",
14
+ getPopupContainer,
15
+ trailing
16
+ }) {
17
+ const [visible, setVisible] = react.useState(false);
18
+ const wrapperRef = react.useRef(null);
19
+ const spanRef = react.useRef(null);
20
+ const [anchorRect, setAnchorRect] = react.useState(null);
21
+ function handleMouseEnter() {
22
+ var _a;
23
+ const el = spanRef.current;
24
+ if (el && el.scrollWidth > el.offsetWidth) {
25
+ setAnchorRect(((_a = wrapperRef.current) == null ? void 0 : _a.getBoundingClientRect()) ?? null);
26
+ setVisible(true);
27
+ }
28
+ }
29
+ return /* @__PURE__ */ jsxRuntime.jsxs(TooltipWrapper, { ref: wrapperRef, style: wrapperStyle, children: [
30
+ /* @__PURE__ */ jsxRuntime.jsx(
31
+ "span",
32
+ {
33
+ ref: spanRef,
34
+ className: spanClassName,
35
+ onMouseEnter: handleMouseEnter,
36
+ onMouseLeave: () => setVisible(false),
37
+ children: text
38
+ }
39
+ ),
40
+ trailing,
41
+ visible && anchorRect && reactDom.createPortal(
42
+ /* @__PURE__ */ jsxRuntime.jsx(
43
+ "span",
44
+ {
45
+ style: {
46
+ position: "fixed",
47
+ top: anchorRect.top,
48
+ left: anchorRect.left,
49
+ width: anchorRect.width,
50
+ height: anchorRect.height,
51
+ display: "block",
52
+ pointerEvents: "none",
53
+ zIndex: 9999999999
54
+ },
55
+ children: /* @__PURE__ */ jsxRuntime.jsx(ContentTooltip, { content: text, placement, className: "bu-category-dropdown__tooltip" })
56
+ }
57
+ ),
58
+ (getPopupContainer == null ? void 0 : getPopupContainer()) ?? document.body
59
+ )
60
+ ] });
61
+ }
62
+ function ChevronDown() {
63
+ 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" }) });
64
+ }
65
+ function ChevronRight() {
66
+ return (
67
+ // <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
68
+ // <path d="M6 3.5L10.5 8L6 12.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
69
+ // </svg>
70
+ /* @__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" }) })
71
+ );
72
+ }
73
+ function buildColumns(data, value) {
74
+ var _a;
75
+ const cols = [data];
76
+ let current = data;
77
+ for (let i = 0; i < value.length; i++) {
78
+ const selected = current.find((item) => item.value === value[i]);
79
+ if ((_a = selected == null ? void 0 : selected.children) == null ? void 0 : _a.length) {
80
+ cols.push(selected.children);
81
+ current = selected.children;
82
+ } else {
83
+ break;
84
+ }
85
+ }
86
+ return cols;
87
+ }
88
+ function buildPath(data, value) {
89
+ const path = [];
90
+ let items = data;
91
+ for (const v of value) {
92
+ const found = items.find((x) => x.value === v);
93
+ if (!found) break;
94
+ path.push(found);
95
+ items = found.children ?? [];
96
+ }
97
+ return path;
98
+ }
99
+ function BuCategoryDropdown({
100
+ data,
101
+ value = [],
102
+ onChange,
103
+ placeholder = "请选择分类",
104
+ disabled = false,
105
+ maxVisible = 6,
106
+ className,
107
+ style,
108
+ getPopupContainer,
109
+ dropdownStyle: customDropdownStyle
110
+ }) {
111
+ const [open, setOpen] = react.useState(false);
112
+ const [navValue, setNavValue] = react.useState(value);
113
+ const rootRef = react.useRef(null);
114
+ const dropdownRef = react.useRef(null);
115
+ const panelRef = react.useRef(null);
116
+ const wasOpenRef = react.useRef(false);
117
+ const [dropdownStyle, setDropdownStyle] = react.useState({});
118
+ const [colWidth, setColWidth] = react.useState();
119
+ const updatePosition = react.useCallback(() => {
120
+ var _a;
121
+ if (!rootRef.current) return;
122
+ const rect = rootRef.current.getBoundingClientRect();
123
+ let maxZ = 0;
124
+ let el = rootRef.current.parentElement;
125
+ while (el && el !== document.documentElement) {
126
+ const selfZ = parseInt(window.getComputedStyle(el).zIndex, 10);
127
+ if (!isNaN(selfZ) && selfZ > maxZ) maxZ = selfZ;
128
+ if (el.parentElement) {
129
+ for (const sibling of el.parentElement.children) {
130
+ if (sibling === el || !(sibling instanceof HTMLElement)) continue;
131
+ const sibZ = parseInt(window.getComputedStyle(sibling).zIndex, 10);
132
+ if (!isNaN(sibZ) && sibZ > maxZ) maxZ = sibZ;
133
+ }
134
+ }
135
+ el = el.parentElement;
136
+ }
137
+ const panelHeight = ((_a = panelRef.current) == null ? void 0 : _a.offsetHeight) ?? 0;
138
+ const spaceBelow = window.innerHeight - rect.bottom;
139
+ const spaceAbove = rect.top;
140
+ const flipToTop = panelHeight > 0 && spaceBelow < panelHeight + 4 && spaceAbove > spaceBelow;
141
+ setDropdownStyle({
142
+ position: "fixed",
143
+ top: flipToTop ? rect.top - panelHeight - 4 : rect.bottom + 4,
144
+ left: rect.left,
145
+ zIndex: maxZ > 0 ? maxZ + 10 : 1100,
146
+ ...customDropdownStyle
147
+ });
148
+ }, [customDropdownStyle]);
149
+ react.useLayoutEffect(() => {
150
+ if (open) {
151
+ updatePosition();
152
+ }
153
+ }, [open, navValue, updatePosition]);
154
+ react.useLayoutEffect(() => {
155
+ const justOpened = open && !wasOpenRef.current;
156
+ wasOpenRef.current = open;
157
+ if (!open || !panelRef.current) return;
158
+ const cols = panelRef.current.querySelectorAll(".bu-category-dropdown__col");
159
+ cols.forEach((col) => {
160
+ col.style.width = "";
161
+ });
162
+ let max = 0;
163
+ cols.forEach((col) => {
164
+ if (col.offsetWidth > max) max = col.offsetWidth;
165
+ });
166
+ const next = justOpened ? max : Math.max(colWidth ?? 0, max);
167
+ cols.forEach((col) => {
168
+ col.style.width = next ? `${next}px` : "";
169
+ });
170
+ if (next !== colWidth) setColWidth(next || void 0);
171
+ }, [open, navValue]);
172
+ react.useEffect(() => {
173
+ if (!open) return;
174
+ function handleClickOutside(e) {
175
+ var _a, _b;
176
+ const target = e.target;
177
+ if (((_a = rootRef.current) == null ? void 0 : _a.contains(target)) || ((_b = dropdownRef.current) == null ? void 0 : _b.contains(target))) {
178
+ return;
179
+ }
180
+ setOpen(false);
181
+ }
182
+ function handleScroll() {
183
+ setOpen(false);
184
+ }
185
+ document.addEventListener("mousedown", handleClickOutside);
186
+ document.addEventListener("scroll", handleScroll, true);
187
+ window.addEventListener("resize", updatePosition);
188
+ return () => {
189
+ document.removeEventListener("mousedown", handleClickOutside);
190
+ document.removeEventListener("scroll", handleScroll, true);
191
+ window.removeEventListener("resize", updatePosition);
192
+ };
193
+ }, [open, updatePosition]);
194
+ const path = buildPath(data, value);
195
+ const hasValue = path.length > 0;
196
+ const triggerLabel = hasValue ? path.map((item) => item.label).join(" / ") : null;
197
+ const columns = buildColumns(data, navValue);
198
+ function handleSelect(colIndex, item) {
199
+ var _a;
200
+ if (item.disabled) return;
201
+ const newNavValue = navValue.slice(0, colIndex + 1);
202
+ newNavValue[colIndex] = item.value;
203
+ setNavValue(newNavValue);
204
+ if (!((_a = item.children) == null ? void 0 : _a.length)) {
205
+ const newPath = buildPath(data, newNavValue);
206
+ onChange == null ? void 0 : onChange(newNavValue, newPath);
207
+ setOpen(false);
208
+ }
209
+ }
210
+ function handleOpen() {
211
+ setNavValue(value);
212
+ setOpen(true);
213
+ }
214
+ const triggerClass = [
215
+ "bu-category-dropdown__trigger",
216
+ open ? "bu-category-dropdown__trigger--open" : "",
217
+ hasValue ? "bu-category-dropdown__trigger--has-value" : ""
218
+ ].filter(Boolean).join(" ");
219
+ return /* @__PURE__ */ jsxRuntime.jsxs(
220
+ "div",
221
+ {
222
+ ref: rootRef,
223
+ className: `bu-category-dropdown${className ? ` ${className}` : ""}`,
224
+ style,
225
+ children: [
226
+ /* @__PURE__ */ jsxRuntime.jsx(
227
+ "button",
228
+ {
229
+ type: "button",
230
+ className: triggerClass,
231
+ disabled,
232
+ onClick: () => open ? setOpen(false) : handleOpen(),
233
+ children: /* @__PURE__ */ jsxRuntime.jsx(
234
+ TruncatedTooltip,
235
+ {
236
+ text: triggerLabel ?? placeholder,
237
+ spanClassName: `bu-category-dropdown__trigger-label${!hasValue ? " bu-category-dropdown__trigger-label--placeholder" : ""}`,
238
+ wrapperStyle: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: 8 },
239
+ getPopupContainer,
240
+ trailing: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `bu-category-dropdown__trigger-chevron${open ? " bu-category-dropdown__trigger-chevron--open" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {}) })
241
+ }
242
+ )
243
+ }
244
+ ),
245
+ open && reactDom.createPortal(
246
+ /* @__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) => {
247
+ const isScrollable = col.length > maxVisible;
248
+ const isLast = colIndex === columns.length - 1;
249
+ const colClass = [
250
+ "bu-category-dropdown__col",
251
+ colIndex > 0 ? "bu-category-dropdown__col--indent" : "",
252
+ isScrollable ? "bu-category-dropdown__col--scrollable" : "",
253
+ isLast && colIndex > 0 ? "bu-category-dropdown__col--last" : ""
254
+ ].filter(Boolean).join(" ");
255
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "contents" }, children: [
256
+ colIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-category-dropdown__divider" }),
257
+ /* @__PURE__ */ jsxRuntime.jsx(
258
+ "div",
259
+ {
260
+ className: colClass,
261
+ style: colWidth ? { width: colWidth } : void 0,
262
+ onMouseEnter: isScrollable ? (e) => e.currentTarget.classList.add("bu-category-dropdown__col--scrollbar-visible") : void 0,
263
+ onMouseLeave: isScrollable ? (e) => e.currentTarget.classList.remove("bu-category-dropdown__col--scrollbar-visible") : void 0,
264
+ children: col.map((item) => {
265
+ var _a;
266
+ const isSelected = navValue[colIndex] === item.value;
267
+ const hasBranch = !!((_a = item.children) == null ? void 0 : _a.length);
268
+ const itemClass = [
269
+ "bu-category-dropdown__item",
270
+ isSelected && hasBranch ? "bu-category-dropdown__item--selected-branch" : "",
271
+ isSelected && !hasBranch ? "bu-category-dropdown__item--selected-leaf" : "",
272
+ item.disabled ? "bu-category-dropdown__item--disabled" : ""
273
+ ].filter(Boolean).join(" ");
274
+ return /* @__PURE__ */ jsxRuntime.jsxs(
275
+ "button",
276
+ {
277
+ type: "button",
278
+ className: itemClass,
279
+ disabled: item.disabled,
280
+ onClick: () => handleSelect(colIndex, item),
281
+ children: [
282
+ /* @__PURE__ */ jsxRuntime.jsx(
283
+ TruncatedTooltip,
284
+ {
285
+ text: item.label,
286
+ spanClassName: "bu-category-dropdown__item-label",
287
+ wrapperStyle: { flex: 1, minWidth: 0, display: "block" },
288
+ getPopupContainer
289
+ }
290
+ ),
291
+ hasBranch && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bu-category-dropdown__item-arrow", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {}) })
292
+ ]
293
+ },
294
+ item.value
295
+ );
296
+ })
297
+ }
298
+ )
299
+ ] }, colIndex);
300
+ }) }) }),
301
+ document.body
302
+ )
303
+ ]
304
+ }
305
+ );
306
+ }
307
+ module.exports = BuCategoryDropdown;