@provex/components 1.11.0 → 2.0.0

package/dist/index.cjs

@@ -68,7 +68,7 @@ var CurrencyIcon = ({
       }
     );
   }
-  const zoom = useZoom ? currency.zoom ?? 1.5 : 1;
+  const zoom = useZoom ? currency.zoom : 1;
   const objectFit = "cover";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -253,12 +253,13 @@ function Popover({
   const [position, setPosition] = React.useState(null);
   const [triggerWidth, setTriggerWidth] = React.useState(void 0);
   React.useEffect(() => {
-    if (!isOpen || !triggerRef.current) return;
+    const triggerElement = triggerRef.current;
+    const popoverElement = popoverRef.current;
+    if (!isOpen || !triggerElement || !popoverElement) return;
     const updatePosition = () => {
-      if (!triggerRef.current || !popoverRef.current) return;
-      const rect = triggerRef.current.getBoundingClientRect();
+      const rect = triggerElement.getBoundingClientRect();
       if (fullWidth) setTriggerWidth(rect.width);
-      const popoverRect = popoverRef.current.getBoundingClientRect();
+      const popoverRect = popoverElement.getBoundingClientRect();
       const popoverWidth = popoverRect.width || width || (fullWidth ? rect.width : minWidth);
       const popoverHeight = popoverRect.height || 400;
       let top = 0;
@@ -375,6 +376,11 @@ function PopoverSection({ children }) {
 function PopoverFooter({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { children });
 }
+var HORIZONTAL_AXIS = { offset: "scrollLeft", size: "scrollWidth", client: "clientWidth" };
+var VERTICAL_AXIS = { offset: "scrollTop", size: "scrollHeight", client: "clientHeight" };
+function scrollAxisKeys(isHorizontal) {
+  return isHorizontal ? HORIZONTAL_AXIS : VERTICAL_AXIS;
+}
 var injectedDirections = /* @__PURE__ */ new Set();
 function injectScrollbarStyles(direction) {
   if (typeof document === "undefined") return;
@@ -434,76 +440,45 @@ var ScrollContainer = React.forwardRef(
     const isHorizontal = direction === "horizontal" || direction === "both";
     const isScrollbarLeft = scrollbarPosition === "left";
     injectScrollbarStyles(direction);
+    const axis = scrollAxisKeys(isHorizontal);
     const handleScroll = React.useCallback((e) => {
       onScroll?.(e);
-      if (isUpdatingScroll.current) return;
-      if (onScrollPositionChange) {
-        const target = e.currentTarget;
-        if (isHorizontal) {
-          const maxScroll = target.scrollWidth - target.clientWidth;
-          if (maxScroll > 0) {
-            onScrollPositionChange(target.scrollLeft / maxScroll);
-          }
-        } else {
-          const maxScroll = target.scrollHeight - target.clientHeight;
-          if (maxScroll > 0) {
-            onScrollPositionChange(target.scrollTop / maxScroll);
-          }
-        }
-      }
-    }, [isHorizontal, onScroll, onScrollPositionChange]);
+      if (isUpdatingScroll.current || !onScrollPositionChange) return;
+      const target = e.currentTarget;
+      const maxScroll = target[axis.size] - target[axis.client];
+      if (maxScroll > 0) onScrollPositionChange(target[axis.offset] / maxScroll);
+    }, [axis, onScroll, onScrollPositionChange]);
     React.useEffect(() => {
-      if (scrollPosition === void 0) return;
       const container = scrollRef.current;
-      if (!container) return;
-      if (isHorizontal) {
-        const maxScroll = container.scrollWidth - container.clientWidth;
-        if (maxScroll > 0) {
-          const target = scrollPosition * maxScroll;
-          if (Math.abs(container.scrollLeft - target) > 1) {
-            isUpdatingScroll.current = true;
-            container.scrollLeft = target;
-            requestAnimationFrame(() => {
-              isUpdatingScroll.current = false;
-            });
-          }
-        }
-      } else {
-        const maxScroll = container.scrollHeight - container.clientHeight;
-        if (maxScroll > 0) {
-          const target = scrollPosition * maxScroll;
-          if (Math.abs(container.scrollTop - target) > 1) {
-            isUpdatingScroll.current = true;
-            container.scrollTop = target;
-            requestAnimationFrame(() => {
-              isUpdatingScroll.current = false;
-            });
-          }
-        }
-      }
-    }, [scrollPosition, isHorizontal, scrollRef]);
+      if (scrollPosition === void 0 || !container) return;
+      const maxScroll = container[axis.size] - container[axis.client];
+      if (maxScroll <= 0) return;
+      const target = scrollPosition * maxScroll;
+      if (Math.abs(container[axis.offset] - target) <= 1) return;
+      isUpdatingScroll.current = true;
+      container[axis.offset] = target;
+      requestAnimationFrame(() => {
+        isUpdatingScroll.current = false;
+      });
+    }, [scrollPosition, axis, scrollRef]);
     React.useEffect(() => {
-      if (!scrollToEnd || hasScrolledToEnd.current) return;
       const container = scrollRef.current;
-      if (!container) return;
+      if (!scrollToEnd || hasScrolledToEnd.current || !container) return;
       const timeoutId = setTimeout(() => {
-        if (isHorizontal) {
-          container.scrollLeft = container.scrollWidth;
-        } else {
-          container.scrollTop = container.scrollHeight;
-        }
+        container[axis.offset] = container[axis.size];
         hasScrolledToEnd.current = true;
       }, 100);
       return () => clearTimeout(timeoutId);
-    }, [scrollToEnd, isHorizontal, scrollRef, children]);
+    }, [scrollToEnd, axis, scrollRef, children]);
     const defaultOverflowX = isHorizontal ? "auto" : "hidden";
     const defaultOverflowY = direction === "vertical" || direction === "both" ? "auto" : "hidden";
     const containerStyle = {
-      overflowX: style?.overflowX ?? defaultOverflowX,
-      overflowY: style?.overflowY ?? defaultOverflowY,
-      ...height !== void 0 ? { height } : {},
-      ...maxHeight !== void 0 ? { maxHeight } : {},
-      ...width !== void 0 ? { width } : {},
+      overflowX: defaultOverflowX,
+      // `style` below overrides these defaults
+      overflowY: defaultOverflowY,
+      height,
+      maxHeight,
+      width,
       ...extendToEdges ? { margin: `-${edgePadding}px`, padding: edgePadding } : {},
       ...isScrollbarLeft ? { direction: "rtl" } : {},
       ...style
@@ -540,7 +515,7 @@ function MenuSelect({
 }) {
   const [isOpen, setIsOpen] = React.useState(false);
   const [focusedIndex, setFocusedIndex] = React.useState(-1);
-  const listRef = React.useRef(null);
+  const listboxRef = React.useRef(null);
   const selectedOption = options.find((o) => o.value === value);
   const s = SIZES[size];
   const handleSelect = React.useCallback(
@@ -602,13 +577,8 @@ function MenuSelect({
     [isOpen, focusedIndex, options, handleSelect, handleToggle, findNextEnabled]
   );
   React.useEffect(() => {
-    if (!isOpen || focusedIndex < 0 || !listRef.current) return;
-    const listbox = listRef.current.querySelector("[role=listbox]");
-    if (!listbox) return;
-    const items = listbox.children;
-    if (items[focusedIndex]) {
-      items[focusedIndex].scrollIntoView({ block: "nearest" });
-    }
+    if (!isOpen || focusedIndex < 0) return;
+    listboxRef.current?.children[focusedIndex]?.scrollIntoView({ block: "nearest" });
   }, [isOpen, focusedIndex]);
   const triggerElement = renderTrigger ? /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -703,10 +673,9 @@ function MenuSelect({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         ScrollContainer,
         {
-          ref: listRef,
           direction: "vertical",
           maxHeight: maxDropdownHeight,
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", onKeyDown: handleKeyDown, children: options.map((option, index) => {
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: listboxRef, role: "listbox", onKeyDown: handleKeyDown, children: options.map((option, index) => {
             const isSelected = option.value === value;
             const isFocused = index === focusedIndex;
             const optDisabled = option.isDisabled ?? false;
@@ -769,6 +738,19 @@ function MenuSelect({
     }
   );
 }
+function createItemComparator({
+  getVolumeRank,
+  statsMap,
+  getLabel
+}) {
+  return (a, b) => {
+    const rankDifference = getVolumeRank ? getVolumeRank(a) - getVolumeRank(b) : 0;
+    if (rankDifference !== 0) return rankDifference;
+    const countDifference = (statsMap.get(b) ?? 0) - (statsMap.get(a) ?? 0);
+    if (countDifference !== 0) return countDifference;
+    return getLabel(a).localeCompare(getLabel(b));
+  };
+}
 function MultiSelectFilter({
   allItems,
   selectedItems,
@@ -793,23 +775,11 @@ function MultiSelectFilter({
     () => new Map(itemStats.map((stat) => [stat.item, stat.count])),
     [itemStats]
   );
-  const sortedItems = React.useMemo(() => {
-    return Array.from(allItems).sort((a, b) => {
-      if (getVolumeRank) {
-        const rankA = getVolumeRank(a);
-        const rankB = getVolumeRank(b);
-        if (rankA !== rankB) {
-          return rankA - rankB;
-        }
-      }
-      const countA = statsMap.get(a) ?? 0;
-      const countB = statsMap.get(b) ?? 0;
-      if (countA !== countB) {
-        return countB - countA;
-      }
-      return getLabel(a).localeCompare(getLabel(b));
-    });
-  }, [allItems, getVolumeRank, statsMap, getLabel]);
+  const compareItems = React.useMemo(
+    () => createItemComparator({ getVolumeRank, statsMap, getLabel }),
+    [getVolumeRank, statsMap, getLabel]
+  );
+  const sortedItems = React.useMemo(() => Array.from(allItems).sort(compareItems), [allItems, compareItems]);
   const handleToggle = (item) => {
     const newSelection = new Set(localSelection);
     if (newSelection.has(item)) {
@@ -842,22 +812,8 @@ function MultiSelectFilter({
     if (isShowingAll) {
       return sortedItems;
     }
-    return Array.from(selectedItems).sort((a, b) => {
-      if (getVolumeRank) {
-        const rankA = getVolumeRank(a);
-        const rankB = getVolumeRank(b);
-        if (rankA !== rankB) {
-          return rankA - rankB;
-        }
-      }
-      const countA = statsMap.get(a) ?? 0;
-      const countB = statsMap.get(b) ?? 0;
-      if (countA !== countB) {
-        return countB - countA;
-      }
-      return getLabel(a).localeCompare(getLabel(b));
-    });
-  }, [isShowingAll, sortedItems, selectedItems, getVolumeRank, statsMap, getLabel]);
+    return Array.from(selectedItems).sort(compareItems);
+  }, [isShowingAll, sortedItems, selectedItems, compareItems]);
   const iconItems = itemsToDisplay.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1154,9 +1110,7 @@ function Tooltip({ label, children, isDisabled, placement = "top", display = "in
   React.useEffect(() => {
     if (!visible) return;
     const onOutsidePointerDown = (event) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-        setVisible(false);
-      }
+      if (!wrapperRef.current?.contains(event.target)) setVisible(false);
     };
     const onScroll = () => setVisible(false);
     const onKeyDown = (event) => {
@@ -1214,9 +1168,14 @@ function Tooltip({ label, children, isDisabled, placement = "top", display = "in
     }
   );
 }
+function backgroundForVersion(version, colors) {
+  if (version === "v4") return colors.bgV4 ?? colors.bgV3;
+  if (version === "v3") return colors.bgV3;
+  return colors.bgV2;
+}
 function VersionBadge(props) {
   const { version, colors, style } = props;
-  const bgColor = version === "v4" ? colors.bgV4 ?? colors.bgV3 : version === "v3" ? colors.bgV3 : colors.bgV2;
+  const bgColor = backgroundForVersion(version, colors);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {