@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.
@@ -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
- const dropdownHeightPx = Math.max(
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)