@sia.soul/sia-react-ui 0.1.15 → 0.1.17

package/dist/select-date-range.cjs

@@ -1789,7 +1789,7 @@ function DateRangePicker({
 })(DatePicker || (DatePicker = {}));
 
 // src/components/Select.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 
 // src/components/Modal.tsx
 var import_react8 = require("react");
@@ -2090,7 +2090,7 @@ function openModal(config) {
   let currentOpen = true;
   let destroyed = false;
   let cleanupTimer;
-  function cleanup() {
+  function cleanup2() {
     if (destroyed) return;
     destroyed = true;
     if (cleanupTimer !== void 0) window.clearTimeout(cleanupTimer);
@@ -2102,7 +2102,7 @@ function openModal(config) {
     if (destroyed || !currentOpen) return;
     currentOpen = false;
     render();
-    cleanupTimer = window.setTimeout(cleanup, MODAL_MOTION_DURATION);
+    cleanupTimer = window.setTimeout(cleanup2, MODAL_MOTION_DURATION);
   }
   function render() {
     root.render(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalRoot, { ...currentConfig, open: currentOpen, onOpenChange: (nextOpen) => {
@@ -2738,13 +2738,388 @@ function OverflowTags({ items, maxCount, className = "", tagClassName, restClass
   ] });
 }
 
+// src/components/FloatingScrollbarProvider.tsx
+var import_react15 = require("react");
+
+// src/components/useScrollbarProximity.ts
+var import_react14 = require("react");
+var users = 0;
+var cleanup;
+function useScrollbarProximity() {
+  (0, import_react14.useEffect)(() => {
+    if (users++ === 0) {
+      let frame = 0;
+      let x = -Infinity;
+      let y = -Infinity;
+      const nearby = /* @__PURE__ */ new Set();
+      const clear = () => {
+        nearby.forEach((track) => track.removeAttribute("data-scrollbar-near"));
+        nearby.clear();
+      };
+      const update = () => {
+        frame = 0;
+        const next = /* @__PURE__ */ new Set();
+        document.querySelectorAll(".sia-scrollbar-track").forEach((track) => {
+          const rect = track.getBoundingClientRect();
+          const proximity = Number.parseFloat(getComputedStyle(track).getPropertyValue("--sia-scrollbar-proximity")) || 16;
+          if (rect.width && rect.height && x >= rect.left - proximity && x <= rect.right + proximity && y >= rect.top - proximity && y <= rect.bottom + proximity) {
+            next.add(track);
+            if (!nearby.has(track)) track.setAttribute("data-scrollbar-near", "true");
+          }
+        });
+        nearby.forEach((track) => {
+          if (!next.has(track)) track.removeAttribute("data-scrollbar-near");
+        });
+        nearby.clear();
+        next.forEach((track) => nearby.add(track));
+      };
+      const move = (event) => {
+        if (event.pointerType === "touch") return;
+        x = event.clientX;
+        y = event.clientY;
+        if (!frame) frame = requestAnimationFrame(update);
+      };
+      const leave = () => {
+        x = y = -Infinity;
+        clear();
+      };
+      document.addEventListener("pointermove", move, { passive: true });
+      document.documentElement.addEventListener("pointerleave", leave);
+      window.addEventListener("blur", leave);
+      cleanup = () => {
+        if (frame) cancelAnimationFrame(frame);
+        document.removeEventListener("pointermove", move);
+        document.documentElement.removeEventListener("pointerleave", leave);
+        window.removeEventListener("blur", leave);
+        clear();
+      };
+    }
+    return () => {
+      if (--users === 0) {
+        cleanup?.();
+        cleanup = void 0;
+      }
+    };
+  }, []);
+}
+
+// src/components/FloatingScrollbarProvider.tsx
+var scrollableOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay"]);
+var clippingOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay", "hidden", "clip"]);
+function isRootScroller(target) {
+  return target === document.scrollingElement || target === document.documentElement;
+}
+function canScroll(target, axis) {
+  if (target.matches(".sia-table__viewport, [data-sia-native-scrollbar]")) return false;
+  if (isRootScroller(target)) {
+    return axis === "horizontal" ? target.scrollWidth > target.clientWidth + 1 : target.scrollHeight > target.clientHeight + 1;
+  }
+  const style = getComputedStyle(target);
+  const overflow = axis === "horizontal" ? style.overflowX : style.overflowY;
+  const hasOverflow = axis === "horizontal" ? target.scrollWidth > target.clientWidth + 1 : target.scrollHeight > target.clientHeight + 1;
+  return hasOverflow && scrollableOverflow.has(overflow);
+}
+function visibleRect(target) {
+  if (isRootScroller(target)) {
+    return { top: 0, right: window.innerWidth, bottom: window.innerHeight, left: 0, width: window.innerWidth, height: window.innerHeight };
+  }
+  const ownRect = target.getBoundingClientRect();
+  let top = Math.max(0, ownRect.top);
+  let right = Math.min(window.innerWidth, ownRect.right);
+  let bottom = Math.min(window.innerHeight, ownRect.bottom);
+  let left = Math.max(0, ownRect.left);
+  let parent = target.parentElement;
+  while (parent && parent !== document.body && parent !== document.documentElement) {
+    const style = getComputedStyle(parent);
+    const clipX = clippingOverflow.has(style.overflowX);
+    const clipY = clippingOverflow.has(style.overflowY);
+    if (clipX || clipY) {
+      const rect = parent.getBoundingClientRect();
+      if (clipX) {
+        left = Math.max(left, rect.left);
+        right = Math.min(right, rect.right);
+      }
+      if (clipY) {
+        top = Math.max(top, rect.top);
+        bottom = Math.min(bottom, rect.bottom);
+      }
+    }
+    parent = parent.parentElement;
+  }
+  return {
+    top,
+    right,
+    bottom,
+    left,
+    width: Math.max(0, right - left),
+    height: Math.max(0, bottom - top)
+  };
+}
+function createTrack(axis) {
+  const track = document.createElement("div");
+  const thumb = document.createElement("div");
+  track.className = `sia-scrollbar-track sia-floating-scrollbar sia-floating-scrollbar--${axis}`;
+  thumb.className = "sia-floating-scrollbar__thumb";
+  track.dataset.axis = axis;
+  track.setAttribute("aria-hidden", "true");
+  track.append(thumb);
+  return { track, thumb };
+}
+function FloatingScrollbarProvider({ disabled = false, targetRef }) {
+  useScrollbarProximity();
+  (0, import_react15.useEffect)(() => {
+    if (disabled) return;
+    const layer = document.createElement("div");
+    layer.className = "sia-floating-scrollbar-layer";
+    layer.setAttribute("aria-hidden", "true");
+    document.body.append(layer);
+    const entries = /* @__PURE__ */ new Map();
+    let scanFrame = 0;
+    let updateFrame = 0;
+    const setEntryVisible = (entry, visible) => {
+      entry.horizontalTrack.classList.toggle("sia-floating-scrollbar--visible", visible);
+      entry.verticalTrack.classList.toggle("sia-floating-scrollbar--visible", visible);
+    };
+    const showEntry = (entry) => {
+      if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
+      entry.hideTimer = null;
+      setEntryVisible(entry, true);
+    };
+    const scheduleHide = (entry, delay = 500) => {
+      if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
+      entry.hideTimer = window.setTimeout(() => {
+        entry.hideTimer = null;
+        if (!entry.hoveringTarget && !entry.hoveringTrack && !entry.dragging) setEntryVisible(entry, false);
+      }, delay);
+    };
+    const updateEntry = (entry) => {
+      const { target, horizontalTrack, horizontalThumb, verticalTrack, verticalThumb } = entry;
+      const hasHorizontal = canScroll(target, "horizontal");
+      const hasVertical = canScroll(target, "vertical");
+      const rect = visibleRect(target);
+      const thickness = 10;
+      horizontalTrack.hidden = !hasHorizontal || rect.width <= thickness || rect.height <= 0;
+      verticalTrack.hidden = !hasVertical || rect.height <= thickness || rect.width <= 0;
+      if (!horizontalTrack.hidden) {
+        const trackWidth = Math.max(0, rect.width - (hasVertical ? thickness : 0));
+        const thumbWidth = Math.max(24, Math.min(trackWidth, trackWidth * target.clientWidth / target.scrollWidth));
+        const travel = Math.max(0, trackWidth - thumbWidth);
+        const maxScroll = Math.max(1, target.scrollWidth - target.clientWidth);
+        horizontalTrack.style.left = `${rect.left}px`;
+        horizontalTrack.style.top = `${rect.bottom - thickness}px`;
+        horizontalTrack.style.width = `${trackWidth}px`;
+        horizontalTrack.style.height = `${thickness}px`;
+        horizontalThumb.style.width = `${thumbWidth}px`;
+        horizontalThumb.style.transform = `translate3d(${travel * target.scrollLeft / maxScroll}px, 0, 0)`;
+      }
+      if (!verticalTrack.hidden) {
+        const trackHeight = Math.max(0, rect.height - (hasHorizontal ? thickness : 0));
+        const thumbHeight = Math.max(24, Math.min(trackHeight, trackHeight * target.clientHeight / target.scrollHeight));
+        const travel = Math.max(0, trackHeight - thumbHeight);
+        const maxScroll = Math.max(1, target.scrollHeight - target.clientHeight);
+        verticalTrack.style.left = `${rect.right - thickness}px`;
+        verticalTrack.style.top = `${rect.top}px`;
+        verticalTrack.style.width = `${thickness}px`;
+        verticalTrack.style.height = `${trackHeight}px`;
+        verticalThumb.style.height = `${thumbHeight}px`;
+        verticalThumb.style.transform = `translate3d(0, ${travel * target.scrollTop / maxScroll}px, 0)`;
+      }
+    };
+    const scheduleUpdateAll = () => {
+      if (updateFrame) return;
+      updateFrame = window.requestAnimationFrame(() => {
+        updateFrame = 0;
+        entries.forEach(updateEntry);
+      });
+    };
+    const bindTrackDrag = (entry, axis, track, thumb) => {
+      const target = entry.target;
+      const onTrackPointerEnter = () => {
+        entry.hoveringTrack = true;
+        showEntry(entry);
+      };
+      const onTrackPointerLeave = () => {
+        entry.hoveringTrack = false;
+        scheduleHide(entry);
+      };
+      const onTrackPointerDown = (event) => {
+        if (event.target === thumb || event.button !== 0) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const trackRect = track.getBoundingClientRect();
+        const thumbRect = thumb.getBoundingClientRect();
+        const trackLength = axis === "vertical" ? trackRect.height : trackRect.width;
+        const thumbLength = axis === "vertical" ? thumbRect.height : thumbRect.width;
+        const pointer = axis === "vertical" ? event.clientY - trackRect.top : event.clientX - trackRect.left;
+        const ratio = Math.max(0, Math.min(1, (pointer - thumbLength / 2) / Math.max(1, trackLength - thumbLength)));
+        if (axis === "vertical") target.scrollTop = ratio * (target.scrollHeight - target.clientHeight);
+        else target.scrollLeft = ratio * (target.scrollWidth - target.clientWidth);
+      };
+      const onThumbPointerDown = (event) => {
+        if (event.button !== 0) return;
+        event.preventDefault();
+        event.stopPropagation();
+        entry.dragging = true;
+        showEntry(entry);
+        thumb.setPointerCapture(event.pointerId);
+        const startPointer = axis === "vertical" ? event.clientY : event.clientX;
+        const startScroll = axis === "vertical" ? target.scrollTop : target.scrollLeft;
+        const trackRect = track.getBoundingClientRect();
+        const thumbRect = thumb.getBoundingClientRect();
+        const trackLength = axis === "vertical" ? trackRect.height : trackRect.width;
+        const thumbLength = axis === "vertical" ? thumbRect.height : thumbRect.width;
+        const maxScroll = axis === "vertical" ? target.scrollHeight - target.clientHeight : target.scrollWidth - target.clientWidth;
+        const travel = Math.max(1, trackLength - thumbLength);
+        const onPointerMove = (moveEvent) => {
+          if (moveEvent.pointerId !== event.pointerId) return;
+          const pointer = axis === "vertical" ? moveEvent.clientY : moveEvent.clientX;
+          const nextScroll = startScroll + (pointer - startPointer) * maxScroll / travel;
+          if (axis === "vertical") target.scrollTop = nextScroll;
+          else target.scrollLeft = nextScroll;
+        };
+        const onPointerUp = (upEvent) => {
+          if (upEvent.pointerId !== event.pointerId) return;
+          entry.dragging = false;
+          thumb.releasePointerCapture(event.pointerId);
+          window.removeEventListener("pointermove", onPointerMove);
+          window.removeEventListener("pointerup", onPointerUp);
+          window.removeEventListener("pointercancel", onPointerUp);
+          scheduleHide(entry);
+        };
+        window.addEventListener("pointermove", onPointerMove);
+        window.addEventListener("pointerup", onPointerUp);
+        window.addEventListener("pointercancel", onPointerUp);
+      };
+      track.addEventListener("pointerenter", onTrackPointerEnter);
+      track.addEventListener("pointerleave", onTrackPointerLeave);
+      track.addEventListener("pointerdown", onTrackPointerDown);
+      thumb.addEventListener("pointerdown", onThumbPointerDown);
+      return () => {
+        track.removeEventListener("pointerenter", onTrackPointerEnter);
+        track.removeEventListener("pointerleave", onTrackPointerLeave);
+        track.removeEventListener("pointerdown", onTrackPointerDown);
+        thumb.removeEventListener("pointerdown", onThumbPointerDown);
+      };
+    };
+    const resizeObserver = new ResizeObserver((observedEntries) => {
+      observedEntries.forEach(({ target }) => {
+        const entry = entries.get(target);
+        if (entry) updateEntry(entry);
+      });
+    });
+    const addTarget = (target) => {
+      if (entries.has(target)) return;
+      const horizontal = createTrack("horizontal");
+      const vertical = createTrack("vertical");
+      layer.append(horizontal.track, vertical.track);
+      const onPointerEnter = () => {
+        const entry2 = entries.get(target);
+        if (!entry2) return;
+        entry2.hoveringTarget = true;
+        showEntry(entry2);
+      };
+      const onPointerLeave = () => {
+        const entry2 = entries.get(target);
+        if (!entry2) return;
+        entry2.hoveringTarget = false;
+        scheduleHide(entry2);
+      };
+      const onScroll = () => {
+        const entry2 = entries.get(target);
+        if (!entry2) return;
+        updateEntry(entry2);
+        showEntry(entry2);
+        scheduleHide(entry2, 700);
+      };
+      target.addEventListener("pointerenter", onPointerEnter);
+      target.addEventListener("pointerleave", onPointerLeave);
+      target.addEventListener("scroll", onScroll, { passive: true });
+      const entry = {
+        target,
+        horizontalTrack: horizontal.track,
+        horizontalThumb: horizontal.thumb,
+        verticalTrack: vertical.track,
+        verticalThumb: vertical.thumb,
+        hideTimer: null,
+        hoveringTarget: target.matches(":hover"),
+        hoveringTrack: false,
+        dragging: false,
+        cleanup: () => void 0
+      };
+      const cleanupHorizontal = bindTrackDrag(entry, "horizontal", horizontal.track, horizontal.thumb);
+      const cleanupVertical = bindTrackDrag(entry, "vertical", vertical.track, vertical.thumb);
+      entry.cleanup = () => {
+        if (entry.hideTimer !== null) window.clearTimeout(entry.hideTimer);
+        cleanupHorizontal();
+        cleanupVertical();
+        target.removeEventListener("pointerenter", onPointerEnter);
+        target.removeEventListener("pointerleave", onPointerLeave);
+        target.removeEventListener("scroll", onScroll);
+        resizeObserver.unobserve(target);
+        target.removeAttribute("data-sia-floating-scrollbar");
+        horizontal.track.remove();
+        vertical.track.remove();
+      };
+      entries.set(target, entry);
+      target.setAttribute("data-sia-floating-scrollbar", "");
+      resizeObserver.observe(target);
+      updateEntry(entry);
+      if (entry.hoveringTarget) showEntry(entry);
+    };
+    const removeTarget = (target) => {
+      const entry = entries.get(target);
+      if (!entry) return;
+      entry.cleanup();
+      entries.delete(target);
+    };
+    const scanTargets = () => {
+      scanFrame = 0;
+      const candidates = (targetRef ? [targetRef.current] : [document.scrollingElement, ...document.querySelectorAll("*")]).filter((target) => target instanceof HTMLElement);
+      const nextTargets = /* @__PURE__ */ new Set();
+      candidates.forEach((target) => {
+        if (canScroll(target, "horizontal") || canScroll(target, "vertical")) {
+          nextTargets.add(target);
+          if (entries.has(target) || !target.hasAttribute("data-sia-floating-scrollbar")) addTarget(target);
+        }
+      });
+      entries.forEach((_entry, target) => {
+        if (!target.isConnected || !nextTargets.has(target)) removeTarget(target);
+        else updateEntry(_entry);
+      });
+    };
+    const scheduleScan = () => {
+      if (scanFrame) return;
+      scanFrame = window.requestAnimationFrame(scanTargets);
+    };
+    const mutationObserver = new MutationObserver((mutations) => {
+      if (mutations.some((mutation) => !layer.contains(mutation.target))) scheduleScan();
+    });
+    mutationObserver.observe(document.documentElement, { subtree: true, childList: true, attributes: true });
+    window.addEventListener("resize", scheduleScan);
+    window.addEventListener("scroll", scheduleUpdateAll, true);
+    scheduleScan();
+    return () => {
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", scheduleScan);
+      window.removeEventListener("scroll", scheduleUpdateAll, true);
+      if (scanFrame) window.cancelAnimationFrame(scanFrame);
+      if (updateFrame) window.cancelAnimationFrame(updateFrame);
+      entries.forEach((entry) => entry.cleanup());
+      entries.clear();
+      layer.remove();
+    };
+  }, [disabled, targetRef]);
+  return null;
+}
+
 // src/components/Select.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function defaultFilterOption(query, option) {
   const keyword = query.toLowerCase();
   return [option.label, option.value].some((value) => String(value).toLowerCase().includes(keyword));
 }
-var Select = (0, import_react14.forwardRef)(function Select2({
+var Select = (0, import_react16.forwardRef)(function Select2({
   options,
   mode = "single",
   popupMode = "dropdown",
@@ -2781,20 +3156,20 @@ var Select = (0, import_react14.forwardRef)(function Select2({
   ...props
 }, forwardedRef) {
   const size = useControlSize(sizeProp);
-  const fallbackId = (0, import_react14.useId)();
+  const fallbackId = (0, import_react16.useId)();
   const selectId = id ?? fallbackId;
   const listboxId = `${selectId}-listbox`;
-  const rootRef = (0, import_react14.useRef)(null);
-  const popupRef = (0, import_react14.useRef)(null);
-  const searchRef = (0, import_react14.useRef)(null);
-  const listRef = (0, import_react14.useRef)(null);
-  const [open, setOpen] = (0, import_react14.useState)(false);
-  const [modalValues, setModalValues] = (0, import_react14.useState)([]);
-  const [selectedOnly, setSelectedOnly] = (0, import_react14.useState)(false);
-  const [query, setQuery] = (0, import_react14.useState)("");
-  const [activeIndex, setActiveIndex] = (0, import_react14.useState)(-1);
-  const [scrollTop, setScrollTop] = (0, import_react14.useState)(0);
-  const deferredQuery = (0, import_react14.useDeferredValue)(query.trim());
+  const rootRef = (0, import_react16.useRef)(null);
+  const popupRef = (0, import_react16.useRef)(null);
+  const searchRef = (0, import_react16.useRef)(null);
+  const listRef = (0, import_react16.useRef)(null);
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  const [modalValues, setModalValues] = (0, import_react16.useState)([]);
+  const [selectedOnly, setSelectedOnly] = (0, import_react16.useState)(false);
+  const [query, setQuery] = (0, import_react16.useState)("");
+  const [activeIndex, setActiveIndex] = (0, import_react16.useState)(-1);
+  const [scrollTop, setScrollTop] = (0, import_react16.useState)(0);
+  const deferredQuery = (0, import_react16.useDeferredValue)(query.trim());
   const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
   const [currentValue, setCurrentValue] = useControllableState({
     value,
@@ -2809,19 +3184,19 @@ var Select = (0, import_react14.forwardRef)(function Select2({
       }
     }
   });
-  const selectedValues = (0, import_react14.useMemo)(() => {
+  const selectedValues = (0, import_react16.useMemo)(() => {
     if (mode === "multiple") return Array.isArray(currentValue) ? currentValue : currentValue === null ? [] : [currentValue];
     return Array.isArray(currentValue) ? currentValue.slice(0, 1) : currentValue === null ? [] : [currentValue];
   }, [currentValue, mode]);
-  const selectedValueSet = (0, import_react14.useMemo)(() => new Set(selectedValues), [selectedValues]);
-  const availableOptions = (0, import_react14.useMemo)(() => {
+  const selectedValueSet = (0, import_react16.useMemo)(() => new Set(selectedValues), [selectedValues]);
+  const availableOptions = (0, import_react16.useMemo)(() => {
     if (!allowInput) return options;
     const optionValueSet = new Set(options.map((option) => option.value));
     const selectedCustomOptions = selectedValues.filter((selectedValue) => !optionValueSet.has(selectedValue)).map((selectedValue) => ({ label: String(selectedValue), value: selectedValue }));
     return selectedCustomOptions.length ? [...selectedCustomOptions, ...options] : options;
   }, [allowInput, options, selectedValues]);
-  const selectedOptions = (0, import_react14.useMemo)(() => selectedValues.map((selectedValue) => availableOptions.find((option) => option.value === selectedValue)).filter((option) => option !== void 0), [availableOptions, selectedValues]);
-  const filteredOptions = (0, import_react14.useMemo)(() => deferredQuery ? availableOptions.filter((option) => filterOption(deferredQuery, option)) : availableOptions, [availableOptions, deferredQuery, filterOption]);
+  const selectedOptions = (0, import_react16.useMemo)(() => selectedValues.map((selectedValue) => availableOptions.find((option) => option.value === selectedValue)).filter((option) => option !== void 0), [availableOptions, selectedValues]);
+  const filteredOptions = (0, import_react16.useMemo)(() => deferredQuery ? availableOptions.filter((option) => filterOption(deferredQuery, option)) : availableOptions, [availableOptions, deferredQuery, filterOption]);
   const inputValue = query.trim();
   const exactInputOption = inputValue ? availableOptions.find((option) => String(option.value).toLowerCase() === inputValue.toLowerCase() || typeof option.label === "string" && option.label.toLowerCase() === inputValue.toLowerCase()) : void 0;
   const canSubmitInput = allowInput && Boolean(inputValue) && !exactInputOption;
@@ -2835,7 +3210,7 @@ var Select = (0, import_react14.forwardRef)(function Select2({
   const renderedOptions = virtualEnabled ? filteredOptions.slice(virtualStart, virtualEnd) : filteredOptions;
   const enabledFilteredOptions = filteredOptions.filter((option) => !option.disabled);
   const allFilteredSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => selectedValueSet.has(option.value));
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!open || popupMode === "modal") return void 0;
     function closeFromOutside(event) {
       const target = event.target;
@@ -2844,10 +3219,10 @@ var Select = (0, import_react14.forwardRef)(function Select2({
     document.addEventListener("mousedown", closeFromOutside);
     return () => document.removeEventListener("mousedown", closeFromOutside);
   }, [open, popupMode]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (open && (showSearch || allowInput)) searchRef.current?.focus();
   }, [allowInput, open, showSearch]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (disabled || loading) closeDropdown();
   }, [disabled, loading]);
   function firstEnabledIndex() {
@@ -3034,6 +3409,7 @@ var Select = (0, import_react14.forwardRef)(function Select2({
     ),
     allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "sia-select__clear", type: "button", "aria-label": "\u6E05\u7A7A\u9009\u62E9", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && popupMode === "dropdown", className: `sia-select__dropdown${filteredOptions.length === 0 && !canSubmitInput ? " sia-select__dropdown--empty" : ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FloatingScrollbarProvider, { targetRef: listRef }),
       showSearch || allowInput ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "sia-select__search", children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "search", size: 15 }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { ref: searchRef, value: query, maxLength: inputMaxLength, onChange: handleSearchChange, onKeyDown: (event) => handleInteractionKeyDown(event, true), placeholder: searchPlaceholder, "aria-label": searchPlaceholder })

package/dist/select-date-range.js

@@ -1,7 +1,7 @@
 import {
   SelectDateRange
-} from "./chunk-25BU7YTB.js";
-import "./chunk-R3TYVU53.js";
+} from "./chunk-G47MREYI.js";
+import "./chunk-VXSG4EAO.js";
 import "./chunk-ALWHRV4L.js";
 import "./chunk-TZGUBGA4.js";
 import "./chunk-3VJ4CZDQ.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",