@northlight/ui 2.15.2 → 2.15.4
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.
- package/dist/es/northlight.d.ts +5 -18
- package/dist/es/northlight.js +4 -62
- package/dist/es/northlight.js.map +1 -1
- package/dist/umd/northlight.cjs +4 -62
- package/dist/umd/northlight.cjs.map +1 -1
- package/dist/umd/northlight.min.cjs +3 -3
- package/dist/umd/northlight.min.cjs.map +1 -1
- package/package.json +4 -4
package/dist/umd/northlight.cjs
CHANGED
|
@@ -11125,6 +11125,7 @@
|
|
|
11125
11125
|
var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
|
|
11126
11126
|
const WebappSkin = {
|
|
11127
11127
|
colors: __spreadProps$5(__spreadValues$t(__spreadValues$t({}, tokens.WebappSystemTokensSet.st.color), tokens.WebappComponentsTokensSet.color), {
|
|
11128
|
+
text: __spreadValues$t(__spreadValues$t({}, tokens.WebappSystemTokensSet.st.color.text), tokens.WebappComponentsTokensSet.color.text),
|
|
11128
11129
|
border: __spreadValues$t(__spreadValues$t({}, tokens.WebappSystemTokensSet.st.color.border), tokens.WebappComponentsTokensSet.color.border)
|
|
11129
11130
|
}),
|
|
11130
11131
|
sizes: tokens.WebappComponentsTokensSet.sizing,
|
|
@@ -11559,49 +11560,6 @@
|
|
|
11559
11560
|
return value;
|
|
11560
11561
|
};
|
|
11561
11562
|
|
|
11562
|
-
const useAdaptiveMenuPlacement = ({
|
|
11563
|
-
dropdownHeightPx,
|
|
11564
|
-
containerRef
|
|
11565
|
-
}) => {
|
|
11566
|
-
const [menuPlacement, setMenuPlacement] = React.useState("bottom");
|
|
11567
|
-
const selectContainerRef = React.useRef(null);
|
|
11568
|
-
const adjustMenuPlacement = () => {
|
|
11569
|
-
if (ramda.isNil(selectContainerRef.current))
|
|
11570
|
-
return;
|
|
11571
|
-
let node = selectContainerRef.current.parentNode;
|
|
11572
|
-
while (node.parentNode) {
|
|
11573
|
-
const { overflowY, maxHeight, height } = getComputedStyle(node);
|
|
11574
|
-
if (overflowY !== "visible" || maxHeight || height)
|
|
11575
|
-
break;
|
|
11576
|
-
node = node.parentNode;
|
|
11577
|
-
}
|
|
11578
|
-
const selectRect = selectContainerRef.current.getBoundingClientRect();
|
|
11579
|
-
const containerRect = containerRef && containerRef.current ? containerRef.current.getBoundingClientRect() : node.getBoundingClientRect();
|
|
11580
|
-
const pxToContainerBottom = Math.abs(
|
|
11581
|
-
selectRect.bottom - containerRect.bottom
|
|
11582
|
-
);
|
|
11583
|
-
const pxToContainerTop = Math.abs(selectRect.top - containerRect.top);
|
|
11584
|
-
const pxToWindowBottom = Math.abs(selectRect.bottom - window.innerHeight);
|
|
11585
|
-
const shouldBeAtTop = dropdownHeightPx > pxToContainerBottom && pxToContainerTop > pxToContainerBottom || dropdownHeightPx > pxToWindowBottom && selectRect.top > pxToWindowBottom;
|
|
11586
|
-
setMenuPlacement(shouldBeAtTop ? "top" : "bottom");
|
|
11587
|
-
};
|
|
11588
|
-
React.useEffect(() => {
|
|
11589
|
-
adjustMenuPlacement();
|
|
11590
|
-
window.addEventListener("resize", adjustMenuPlacement);
|
|
11591
|
-
window.addEventListener("scroll", adjustMenuPlacement);
|
|
11592
|
-
return () => {
|
|
11593
|
-
window.removeEventListener("resize", adjustMenuPlacement);
|
|
11594
|
-
window.addEventListener("scroll", adjustMenuPlacement);
|
|
11595
|
-
};
|
|
11596
|
-
}, []);
|
|
11597
|
-
return { selectContainerRef, menuPlacement };
|
|
11598
|
-
};
|
|
11599
|
-
|
|
11600
|
-
const DROPDOWN_MAX_HEIGHT = 300;
|
|
11601
|
-
const DROPDOWN_MIN_HEIGHT = 55;
|
|
11602
|
-
const DROPDOWN_OPTION_HEIGHT = 37;
|
|
11603
|
-
const DROPDOWN_PADDING = 30;
|
|
11604
|
-
|
|
11605
11563
|
var __defProp$m = Object.defineProperty;
|
|
11606
11564
|
var __defProps$2 = Object.defineProperties;
|
|
11607
11565
|
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
|
|
@@ -11646,9 +11604,7 @@
|
|
|
11646
11604
|
customOption = null,
|
|
11647
11605
|
customTag = null,
|
|
11648
11606
|
value,
|
|
11649
|
-
icon
|
|
11650
|
-
containerRef,
|
|
11651
|
-
dropdownMinHeightPx = DROPDOWN_MIN_HEIGHT
|
|
11607
|
+
icon
|
|
11652
11608
|
} = _b, rest = __objRest$h(_b, [
|
|
11653
11609
|
"options",
|
|
11654
11610
|
"isMulti",
|
|
@@ -11661,9 +11617,7 @@
|
|
|
11661
11617
|
"customOption",
|
|
11662
11618
|
"customTag",
|
|
11663
11619
|
"value",
|
|
11664
|
-
"icon"
|
|
11665
|
-
"containerRef",
|
|
11666
|
-
"dropdownMinHeightPx"
|
|
11620
|
+
"icon"
|
|
11667
11621
|
]);
|
|
11668
11622
|
const handleChange = useSelectCallbacks({
|
|
11669
11623
|
onChange,
|
|
@@ -11685,18 +11639,7 @@
|
|
|
11685
11639
|
}
|
|
11686
11640
|
return prevOptions.current;
|
|
11687
11641
|
}, [options]);
|
|
11688
|
-
|
|
11689
|
-
Math.min(
|
|
11690
|
-
ramda.length(options || []) * DROPDOWN_OPTION_HEIGHT + DROPDOWN_PADDING,
|
|
11691
|
-
DROPDOWN_MAX_HEIGHT
|
|
11692
|
-
),
|
|
11693
|
-
dropdownMinHeightPx
|
|
11694
|
-
);
|
|
11695
|
-
const { selectContainerRef, menuPlacement } = useAdaptiveMenuPlacement({
|
|
11696
|
-
dropdownHeightPx,
|
|
11697
|
-
containerRef
|
|
11698
|
-
});
|
|
11699
|
-
return /* @__PURE__ */ React.createElement(react.Box, { w: "full", "data-testid": testId, "data-role": "select-container", ref: selectContainerRef }, /* @__PURE__ */ React.createElement(
|
|
11642
|
+
return /* @__PURE__ */ React.createElement(react.Box, { w: "full", "data-testid": testId }, /* @__PURE__ */ React.createElement(
|
|
11700
11643
|
chakraReactSelect.Select,
|
|
11701
11644
|
__spreadValues$m(__spreadProps$2(__spreadValues$m({
|
|
11702
11645
|
isMulti,
|
|
@@ -11714,7 +11657,6 @@
|
|
|
11714
11657
|
customOption,
|
|
11715
11658
|
customTag,
|
|
11716
11659
|
icon,
|
|
11717
|
-
menuPlacement,
|
|
11718
11660
|
components: customComponents,
|
|
11719
11661
|
ref
|
|
11720
11662
|
}), rest)
|