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

package/dist/core.cjs

@@ -2295,7 +2295,7 @@ function useFloatingPlaceholder({ mode, placeholder, filled, active = false }) {
 }
 
 // src/components/Select.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 
 // src/components/Modal.tsx
 var import_react14 = require("react");
@@ -2458,7 +2458,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);
@@ -2470,7 +2470,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_runtime15.jsx)(ModalRoot, { ...currentConfig, open: currentOpen, onOpenChange: (nextOpen) => {
@@ -2840,13 +2840,388 @@ function OverflowTags({ items, maxCount: maxCount2, className = "", tagClassName
   ] });
 }
 
+// src/components/FloatingScrollbarProvider.tsx
+var import_react19 = require("react");
+
+// src/components/useScrollbarProximity.ts
+var import_react18 = require("react");
+var users = 0;
+var cleanup;
+function useScrollbarProximity() {
+  (0, import_react18.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_react19.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_runtime19 = 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_react18.forwardRef)(function Select2({
+var Select = (0, import_react20.forwardRef)(function Select2({
   options,
   mode = "single",
   popupMode = "dropdown",
@@ -2883,20 +3258,20 @@ var Select = (0, import_react18.forwardRef)(function Select2({
   ...props
 }, forwardedRef) {
   const size = useControlSize(sizeProp);
-  const fallbackId = (0, import_react18.useId)();
+  const fallbackId = (0, import_react20.useId)();
   const selectId = id ?? fallbackId;
   const listboxId = `${selectId}-listbox`;
-  const rootRef = (0, import_react18.useRef)(null);
-  const popupRef = (0, import_react18.useRef)(null);
-  const searchRef = (0, import_react18.useRef)(null);
-  const listRef = (0, import_react18.useRef)(null);
-  const [open, setOpen] = (0, import_react18.useState)(false);
-  const [modalValues, setModalValues] = (0, import_react18.useState)([]);
-  const [selectedOnly, setSelectedOnly] = (0, import_react18.useState)(false);
-  const [query, setQuery] = (0, import_react18.useState)("");
-  const [activeIndex, setActiveIndex] = (0, import_react18.useState)(-1);
-  const [scrollTop, setScrollTop] = (0, import_react18.useState)(0);
-  const deferredQuery = (0, import_react18.useDeferredValue)(query.trim());
+  const rootRef = (0, import_react20.useRef)(null);
+  const popupRef = (0, import_react20.useRef)(null);
+  const searchRef = (0, import_react20.useRef)(null);
+  const listRef = (0, import_react20.useRef)(null);
+  const [open, setOpen] = (0, import_react20.useState)(false);
+  const [modalValues, setModalValues] = (0, import_react20.useState)([]);
+  const [selectedOnly, setSelectedOnly] = (0, import_react20.useState)(false);
+  const [query, setQuery] = (0, import_react20.useState)("");
+  const [activeIndex, setActiveIndex] = (0, import_react20.useState)(-1);
+  const [scrollTop, setScrollTop] = (0, import_react20.useState)(0);
+  const deferredQuery = (0, import_react20.useDeferredValue)(query.trim());
   const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
   const [currentValue, setCurrentValue] = useControllableState({
     value,
@@ -2911,19 +3286,19 @@ var Select = (0, import_react18.forwardRef)(function Select2({
       }
     }
   });
-  const selectedValues = (0, import_react18.useMemo)(() => {
+  const selectedValues = (0, import_react20.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_react18.useMemo)(() => new Set(selectedValues), [selectedValues]);
-  const availableOptions = (0, import_react18.useMemo)(() => {
+  const selectedValueSet = (0, import_react20.useMemo)(() => new Set(selectedValues), [selectedValues]);
+  const availableOptions = (0, import_react20.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_react18.useMemo)(() => selectedValues.map((selectedValue) => availableOptions.find((option) => option.value === selectedValue)).filter((option) => option !== void 0), [availableOptions, selectedValues]);
-  const filteredOptions = (0, import_react18.useMemo)(() => deferredQuery ? availableOptions.filter((option) => filterOption(deferredQuery, option)) : availableOptions, [availableOptions, deferredQuery, filterOption]);
+  const selectedOptions = (0, import_react20.useMemo)(() => selectedValues.map((selectedValue) => availableOptions.find((option) => option.value === selectedValue)).filter((option) => option !== void 0), [availableOptions, selectedValues]);
+  const filteredOptions = (0, import_react20.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;
@@ -2937,7 +3312,7 @@ var Select = (0, import_react18.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_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!open || popupMode === "modal") return void 0;
     function closeFromOutside(event) {
       const target = event.target;
@@ -2946,10 +3321,10 @@ var Select = (0, import_react18.forwardRef)(function Select2({
     document.addEventListener("mousedown", closeFromOutside);
     return () => document.removeEventListener("mousedown", closeFromOutside);
   }, [open, popupMode]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (open && (showSearch || allowInput)) searchRef.current?.focus();
   }, [allowInput, open, showSearch]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (disabled || loading) closeDropdown();
   }, [disabled, loading]);
   function firstEnabledIndex() {
@@ -3136,6 +3511,7 @@ var Select = (0, import_react18.forwardRef)(function Select2({
     ),
     allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "sia-select__clear", type: "button", "aria-label": "\u6E05\u7A7A\u9009\u62E9", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.jsx)(FloatingScrollbarProvider, { targetRef: listRef }),
       showSearch || allowInput ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "sia-select__search", children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "search", size: 15 }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { ref: searchRef, value: query, maxLength: inputMaxLength, onChange: handleSearchChange, onKeyDown: (event) => handleInteractionKeyDown(event, true), placeholder: searchPlaceholder, "aria-label": searchPlaceholder })
@@ -3266,7 +3642,7 @@ var Select = (0, import_react18.forwardRef)(function Select2({
 });
 
 // src/components/Upload.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var LIST_IGNORE = /* @__PURE__ */ Symbol("SIA_UPLOAD_LIST_IGNORE");
 function UploadRoot({
@@ -3289,9 +3665,9 @@ function UploadRoot({
   onDrop,
   ...props
 }) {
-  const inputRef = (0, import_react19.useRef)(null);
-  const filesRef = (0, import_react19.useRef)(fileList ?? defaultFileList);
-  const id = (0, import_react19.useId)();
+  const inputRef = (0, import_react21.useRef)(null);
+  const filesRef = (0, import_react21.useRef)(fileList ?? defaultFileList);
+  const id = (0, import_react21.useId)();
   const [files, setFiles] = useControllableState({ value: fileList, defaultValue: defaultFileList });
   filesRef.current = files;
   function emit(file, nextList) {
@@ -3514,12 +3890,12 @@ function Breadcrumb({ items, separator = "/", itemRender, className = "", ...pro
 }
 
 // src/components/Typography.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 
 // src/components/TextArea.tsx
-var import_react20 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var TextArea = (0, import_react20.forwardRef)(function TextArea2({
+var TextArea = (0, import_react22.forwardRef)(function TextArea2({
   label,
   hint,
   status = "default",
@@ -3537,9 +3913,9 @@ var TextArea = (0, import_react20.forwardRef)(function TextArea2({
   ...props
 }, ref) {
   const size = useControlSize(sizeProp);
-  const fallbackId = (0, import_react20.useId)();
+  const fallbackId = (0, import_react22.useId)();
   const textAreaId = id ?? fallbackId;
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react20.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react22.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
   const currentText = value !== void 0 ? String(value) : uncontrolledValue;
   const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: currentText.length > 0 });
   const hintId = `${textAreaId}-hint`;
@@ -3600,26 +3976,26 @@ function TypographyContent({
   className = "",
   ...props
 }) {
-  const contentRef = (0, import_react21.useRef)(null);
-  const editRef = (0, import_react21.useRef)(null);
-  const timer = (0, import_react21.useRef)();
-  const [localText, setLocalText] = (0, import_react21.useState)();
-  const [draft, setDraft] = (0, import_react21.useState)("");
-  const [editing, setEditing] = (0, import_react21.useState)(false);
-  const [copied, setCopied] = (0, import_react21.useState)(false);
-  const [copyError, setCopyError] = (0, import_react21.useState)(false);
-  const [expanded, setExpanded] = (0, import_react21.useState)(false);
-  const [overflow, setOverflow] = (0, import_react21.useState)(false);
+  const contentRef = (0, import_react23.useRef)(null);
+  const editRef = (0, import_react23.useRef)(null);
+  const timer = (0, import_react23.useRef)();
+  const [localText, setLocalText] = (0, import_react23.useState)();
+  const [draft, setDraft] = (0, import_react23.useState)("");
+  const [editing, setEditing] = (0, import_react23.useState)(false);
+  const [copied, setCopied] = (0, import_react23.useState)(false);
+  const [copyError, setCopyError] = (0, import_react23.useState)(false);
+  const [expanded, setExpanded] = (0, import_react23.useState)(false);
+  const [overflow, setOverflow] = (0, import_react23.useState)(false);
   const editConfig = typeof editable === "object" ? editable : void 0;
   const content = editConfig?.text ?? localText ?? children;
   const requestedRows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
   const rows = Number.isFinite(requestedRows) ? Math.max(1, Math.floor(requestedRows)) : 1;
   const expandable = typeof ellipsis === "object" && ellipsis.expandable;
-  (0, import_react21.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     setLocalText(void 0);
   }, [children]);
-  (0, import_react21.useEffect)(() => () => clearTimeout(timer.current), []);
-  (0, import_react21.useLayoutEffect)(() => {
+  (0, import_react23.useEffect)(() => () => clearTimeout(timer.current), []);
+  (0, import_react23.useLayoutEffect)(() => {
     const element = contentRef.current;
     if (!element || !ellipsis || editing || expanded) return;
     const measure = () => setOverflow(element.scrollHeight > element.clientHeight + 1 || element.scrollWidth > element.clientWidth + 1);
@@ -3728,10 +4104,10 @@ function TypographyRoot({ className = "", ...props }) {
 var Typography = Object.assign(TypographyRoot, { Title, Text, Paragraph, Link });
 
 // src/components/FloatButton.tsx
-var import_react22 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var GroupShape = (0, import_react22.createContext)(void 0);
-var FloatButtonRoot = (0, import_react22.forwardRef)(function FloatButton({
+var GroupShape = (0, import_react24.createContext)(void 0);
+var FloatButtonRoot = (0, import_react24.forwardRef)(function FloatButton({
   icon,
   description,
   tooltip,
@@ -3744,7 +4120,7 @@ var FloatButtonRoot = (0, import_react22.forwardRef)(function FloatButton({
   children,
   ...props
 }, ref) {
-  const groupShape = (0, import_react22.useContext)(GroupShape);
+  const groupShape = (0, import_react24.useContext)(GroupShape);
   const label = props["aria-label"] ?? (typeof tooltip === "string" ? tooltip : typeof description === "string" ? description : "\u60AC\u6D6E\u64CD\u4F5C");
   const button = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "button",
@@ -3782,10 +4158,10 @@ function FloatButtonGroup({
   ...props
 }) {
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
-  const rootRef = (0, import_react22.useRef)(null);
-  const triggerRef = (0, import_react22.useRef)(null);
-  const id = (0, import_react22.useId)();
-  (0, import_react22.useEffect)(() => {
+  const rootRef = (0, import_react24.useRef)(null);
+  const triggerRef = (0, import_react24.useRef)(null);
+  const id = (0, import_react24.useId)();
+  (0, import_react24.useEffect)(() => {
     if (!trigger || !visible) return;
     const close = (event) => {
       if (!rootRef.current?.contains(event.target)) setVisible(false);
@@ -3839,8 +4215,8 @@ function FloatButtonGroup({
   ) });
 }
 function FloatButtonBackTop({ target, visibilityHeight = 400, behavior = "smooth", onClick, icon, tooltip = "\u8FD4\u56DE\u9876\u90E8", ...props }) {
-  const [visible, setVisible] = (0, import_react22.useState)(false);
-  (0, import_react22.useEffect)(() => {
+  const [visible, setVisible] = (0, import_react24.useState)(false);
+  (0, import_react24.useEffect)(() => {
     const element = target ? target() : window;
     if (!element) return;
     const update = () => setVisible((element === window ? window.scrollY : element.scrollTop) >= visibilityHeight);

package/dist/core.css

@@ -1788,7 +1788,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   display: flex;
   flex-direction: column;
   width: max-content;
-  min-width: 90px;
+  min-width: min(max(90px, var(--sia-popup-anchor-width, 0px)), calc(100vw - 16px));
   padding: 4px;
   background: var(--sia-color-surface);
   border: 1px solid var(--sia-color-border);
@@ -4868,6 +4868,9 @@ fieldset:disabled .sia-input-number__floating-placeholder {
     transition: none;
   }
 }
+.sia-table-settings__loading {
+  min-height: 160px;
+}
 
 /* src/components-extra.css */
 .sia-flex {