sellmate-design-system-react 9.0.0-beta.44 → 9.0.0-beta.45

package/dist/index.cjs

@@ -3717,14 +3717,14 @@ function SFooter({
             ]
           }
         ),
-        hasButton && /* @__PURE__ */ jsxRuntime.jsx(
+        hasButton && // 스프레드를 먼저 두고 기본값을 뒤에 덮는다 — 순서를 뒤집으면 `{ color: undefined }`
+        // 처럼 값 없이 넘어온 키가 footer 기본값을 지우고 SButton 기본값으로 떨어진다.
+        /* @__PURE__ */ jsxRuntime.jsx(
           SButton,
           {
+            ...button,
+            size: "md",
             color: button.color ?? "primary",
-            outline: button.outline,
-            size: button.size ?? "md",
-            disabled: button.disabled,
-            onClick: () => button.onClick?.(),
             label: button.label ?? "\uD655\uC778"
           }
         )
@@ -12752,6 +12752,130 @@ function collectGroupLeafValues(flat, groupIndex) {
 }
 var isHtmlLabel = (label) => /<[a-z][\s\S]*>/i.test(label);
 var extractText = (html) => html.replace(/<[^>]*>/g, "");
+var OPTION_ROW_HEIGHT = 28;
+var DEFAULT_VIRTUAL_BUFFER = 10;
+var DEFAULT_REACH_END_THRESHOLD = 10;
+var DEFAULT_SEARCH_DEBOUNCE = 300;
+
+// src/components/SSelect/row-metrics.ts
+function createRowMetrics(count, estimate) {
+  const safeCount = Math.max(0, Math.floor(count));
+  const safeEstimate = Math.max(1, estimate);
+  const metrics = {
+    sizes: new Array(safeCount).fill(safeEstimate),
+    measured: new Array(safeCount).fill(false),
+    offsets: [],
+    estimate: safeEstimate,
+    measuredCount: 0,
+    measuredTotal: 0,
+    dirtyFrom: 0
+  };
+  rebuildOffsets(metrics);
+  return metrics;
+}
+function resizeRowMetrics(metrics, count) {
+  const next = Math.max(0, Math.floor(count));
+  const prev = metrics.sizes.length;
+  if (next === prev) return;
+  if (next < prev) {
+    for (let i = next; i < prev; i++) {
+      if (metrics.measured[i]) {
+        metrics.measuredCount--;
+        metrics.measuredTotal -= metrics.sizes[i];
+      }
+    }
+    metrics.sizes.length = next;
+    metrics.measured.length = next;
+  } else {
+    for (let i = prev; i < next; i++) {
+      metrics.sizes.push(metrics.estimate);
+      metrics.measured.push(false);
+    }
+  }
+  markDirty(metrics, Math.min(prev, next));
+}
+function resetRowMetrics(metrics, count) {
+  const fresh = createRowMetrics(count, metrics.estimate);
+  metrics.sizes = fresh.sizes;
+  metrics.measured = fresh.measured;
+  metrics.offsets = fresh.offsets;
+  metrics.measuredCount = 0;
+  metrics.measuredTotal = 0;
+  metrics.dirtyFrom = Infinity;
+}
+function setRowSize(metrics, index, size) {
+  if (index < 0 || index >= metrics.sizes.length) return false;
+  const next = Math.max(1, Math.round(size));
+  const wasMeasured = metrics.measured[index];
+  const prev = metrics.sizes[index];
+  if (wasMeasured && prev === next) return false;
+  if (wasMeasured) {
+    metrics.measuredTotal += next - prev;
+  } else {
+    metrics.measured[index] = true;
+    metrics.measuredCount++;
+    metrics.measuredTotal += next;
+  }
+  metrics.sizes[index] = next;
+  let changedFrom = prev === next ? Infinity : index;
+  const average = Math.max(1, Math.round(metrics.measuredTotal / metrics.measuredCount));
+  if (average !== metrics.estimate) {
+    metrics.estimate = average;
+    for (let i = 0; i < metrics.sizes.length; i++) {
+      if (metrics.measured[i] || metrics.sizes[i] === average) continue;
+      metrics.sizes[i] = average;
+      if (i < changedFrom) changedFrom = i;
+    }
+  }
+  if (changedFrom === Infinity) return false;
+  markDirty(metrics, changedFrom);
+  return true;
+}
+function markDirty(metrics, from) {
+  metrics.dirtyFrom = Math.min(metrics.dirtyFrom, Math.max(0, from));
+}
+function rebuildOffsets(metrics) {
+  const count = metrics.sizes.length;
+  const stale = metrics.offsets.length !== count + 1;
+  if (!stale && metrics.dirtyFrom === Infinity) return;
+  const start = stale ? 0 : Math.min(metrics.dirtyFrom, count);
+  const acc0 = start === 0 ? 0 : metrics.offsets[start] ?? 0;
+  metrics.offsets.length = count + 1;
+  let acc = acc0;
+  for (let i = start; i < count; i++) {
+    metrics.offsets[i] = acc;
+    acc += metrics.sizes[i];
+  }
+  metrics.offsets[count] = acc;
+  metrics.dirtyFrom = Infinity;
+}
+function totalSize(metrics) {
+  rebuildOffsets(metrics);
+  return metrics.offsets[metrics.sizes.length] ?? 0;
+}
+function offsetOf(metrics, index) {
+  rebuildOffsets(metrics);
+  const clamped = Math.max(0, Math.min(Math.floor(index), metrics.sizes.length));
+  return metrics.offsets[clamped] ?? 0;
+}
+function sizeOf(metrics, index) {
+  if (index < 0 || index >= metrics.sizes.length) return metrics.estimate;
+  return metrics.sizes[index];
+}
+function indexAtOffset(metrics, y) {
+  rebuildOffsets(metrics);
+  const count = metrics.sizes.length;
+  if (count === 0) return 0;
+  const target = Math.max(0, y);
+  let lo = 0;
+  let hi = count - 1;
+  while (lo < hi) {
+    const mid = lo + hi + 1 >> 1;
+    if (metrics.offsets[mid] <= target) lo = mid;
+    else hi = mid - 1;
+  }
+  return lo;
+}
 var SEARCH_THRESHOLD = 11;
 var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   value,
@@ -12773,6 +12897,14 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   dropdownHeight = "640px",
   dropdownWidth,
   maxDropdownWidth = "640px",
+  virtualBuffer = DEFAULT_VIRTUAL_BUFFER,
+  onReachEnd,
+  reachEndThreshold = DEFAULT_REACH_END_THRESHOLD,
+  hasMore = false,
+  loading: loading2 = false,
+  serverSearch = false,
+  onSearchChange,
+  searchDebounce = DEFAULT_SEARCH_DEBOUNCE,
   label,
   labelWidth,
   icon,
@@ -12787,6 +12919,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   style
 }, ref) {
   const multi = type === "multi" || type === "multi_depth";
+  const isDepth = type === "default_depth" || type === "multi_depth";
+  const pagingEnabled = onReachEnd != null;
+  const partialOptions = pagingEnabled || serverSearch;
   const portalContainer = usePortalContainer();
   const insideModal = useInsideModal();
   const [search, setSearch] = react.useState("");
@@ -12794,6 +12929,15 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const [open, setOpen] = react.useState(false);
   const [pendingOpen, setPendingOpen] = react.useState(false);
   const [focusedIndex, setFocusedIndex] = react.useState(-1);
+  const [win, setWin] = react.useState({ start: 0, end: 0, top: 0, bottom: 0 });
+  const winRef = react.useRef(win);
+  winRef.current = win;
+  const metricsRef = react.useRef(null);
+  metricsRef.current ?? (metricsRef.current = createRowMetrics(0, OPTION_ROW_HEIGHT));
+  const [searchBarHeight, setSearchBarHeight] = react.useState(0);
+  const [selectAllHeight, setSelectAllHeight] = react.useState(0);
+  const measuredKeyRef = react.useRef("");
+  const lastReachEndCountRef = react.useRef(-1);
   const triggerRef = react.useRef(null);
   const searchInputRef = react.useRef(null);
   const searchBarRef = react.useRef(null);
@@ -12808,7 +12952,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const hasLeaf = react.useMemo(() => flat.some((o) => !o.isGroup), [flat]);
   const allOptionsDisabled = hasLeaf && selectable.length === 0;
   const effectiveDisabled = disabled || allOptionsDisabled;
-  const searchVisible = showSearch && selectable.length >= SEARCH_THRESHOLD;
+  const searchVisible = showSearch && (partialOptions || selectable.length >= SEARCH_THRESHOLD);
   const labelByValue = react.useMemo(() => new Map(flat.map((o) => [o.value, o.label])), [flat]);
   const rawByValue = react.useMemo(() => new Map(flat.map((o) => [o.value, o.raw])), [flat]);
   const optionByValue = react.useMemo(
@@ -12820,12 +12964,26 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     const arr = Array.isArray(value) ? value : [value];
     return arr.map((v) => v != null && typeof v === "object" ? v.value : v).filter((v) => v != null && v !== "").map(String);
   }, [value]);
+  const valueOptions = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (value == null) return map;
+    for (const v of Array.isArray(value) ? value : [value]) {
+      if (v != null && typeof v === "object") {
+        map.set(String(v.value), { value: v.value, label: v.label });
+      }
+    }
+    return map;
+  }, [value]);
   const selectedRef = react.useRef(selected);
   selectedRef.current = selected;
+  const selectedSet = react.useMemo(() => new Set(selected), [selected]);
+  const cbRef = react.useRef({ onReachEnd, onSearchChange });
+  cbRef.current = { onReachEnd, onSearchChange };
+  const emittedQueryRef = react.useRef("");
   const emit3 = (next) => {
     if (!onValueChange) return;
     const mapped = next.map(
-      (v) => valueAsPrimitive ? rawByValue.get(v) ?? v : optionByValue.get(v) ?? { value: v, label: v }
+      (v) => valueAsPrimitive ? rawByValue.get(v) ?? valueOptions.get(v)?.value ?? v : optionByValue.get(v) ?? valueOptions.get(v) ?? { value: v, label: v }
     );
     onValueChange(multi ? mapped : mapped[0] ?? (valueAsPrimitive ? "" : null));
   };
@@ -12874,14 +13032,15 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     resetValidation: () => setRuleError("")
   });
   const filtered = react.useMemo(() => {
-    if (!searchVisible || search.trim() === "") return flat;
+    if (serverSearch || !searchVisible || search.trim() === "") return flat;
     const q = search.trim().toLowerCase();
     return flat.filter(
       (o) => o.isGroup || (isHtmlLabel(o.label) ? extractText(o.label) : o.label).toLowerCase().includes(q)
     );
-  }, [flat, search, searchVisible]);
+  }, [flat, search, searchVisible, serverSearch]);
   const allValues = selectable.map((o) => o.value);
-  const allSelected = allValues.length > 0 && allValues.every((v) => selected.includes(v));
+  const allSelected = !partialOptions && allValues.length > 0 && allValues.every((v) => selectedSet.has(v));
+  const selectAllVisible = multi && showSelectAll && !partialOptions && allValues.length > 0;
   const hasItems = filtered.some((o) => !o.isGroup);
   const groupLeafValues = react.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
@@ -12892,7 +13051,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   }, [filtered]);
   const navigableItems = react.useMemo(() => {
     const items = [];
-    if (multi && showSelectAll && allValues.length > 0) {
+    if (selectAllVisible) {
       items.push({ key: "__select_all__", isSelectAll: true });
     }
     filtered.forEach((o, i) => {
@@ -12907,20 +13066,129 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       }
     });
     return items;
-  }, [allValues.length, filtered, groupLeafValues, multi, showSelectAll]);
+  }, [filtered, groupLeafValues, multi, selectAllVisible]);
   const selectedAnchorIndex = react.useMemo(() => {
-    if (selected.length === 0) return -1;
-    const selectedSet = new Set(selected);
+    if (selectedSet.size === 0) return -1;
     return navigableItems.findIndex((item4) => item4.value != null && selectedSet.has(item4.value));
-  }, [navigableItems, selected]);
+  }, [navigableItems, selectedSet]);
   selectedAnchorRef.current = selectedAnchorIndex;
+  const navigableItemsRef = react.useRef(navigableItems);
+  navigableItemsRef.current = navigableItems;
+  const rowCount = filtered.length;
+  const metrics = metricsRef.current;
+  const lastSearchRef = react.useRef(search);
+  if (lastSearchRef.current !== search) {
+    lastSearchRef.current = search;
+    resetRowMetrics(metrics, rowCount);
+    measuredKeyRef.current = "";
+  } else {
+    resizeRowMetrics(metrics, rowCount);
+  }
+  const rowsOffset = searchBarHeight + selectAllHeight;
+  const syncScrollState = react.useCallback(() => {
+    if (!listEl) return;
+    const m = metricsRef.current;
+    if (m == null) return;
+    const buffer = Math.max(0, Math.floor(virtualBuffer));
+    const viewTop = Math.max(0, listEl.scrollTop - rowsOffset);
+    const viewBottom = viewTop + Math.max(0, listEl.clientHeight);
+    const start = Math.max(0, indexAtOffset(m, viewTop) - buffer);
+    const end = Math.min(rowCount, indexAtOffset(m, viewBottom) + 1 + buffer);
+    const top = offsetOf(m, start);
+    const bottom = Math.max(0, totalSize(m) - offsetOf(m, end));
+    setWin(
+      (prev) => prev.start === start && prev.end === end && prev.top === top && prev.bottom === bottom ? prev : { start, end, top, bottom }
+    );
+    if (!pagingEnabled || !hasMore || loading2) return;
+    const contentHeight = rowsOffset + totalSize(m);
+    const remaining = contentHeight - listEl.scrollTop - listEl.clientHeight;
+    if (remaining > Math.max(1, reachEndThreshold) * m.estimate) return;
+    if (lastReachEndCountRef.current === rowCount) return;
+    lastReachEndCountRef.current = rowCount;
+    cbRef.current.onReachEnd?.();
+  }, [
+    hasMore,
+    listEl,
+    loading2,
+    pagingEnabled,
+    reachEndThreshold,
+    rowCount,
+    rowsOffset,
+    virtualBuffer
+  ]);
+  const syncScrollStateRef = react.useRef(syncScrollState);
+  syncScrollStateRef.current = syncScrollState;
+  react.useLayoutEffect(() => {
+    if (!open) return;
+    syncScrollState();
+  }, [open, syncScrollState]);
+  react.useLayoutEffect(() => {
+    if (!open || !listEl) {
+      setSearchBarHeight(0);
+      setSelectAllHeight(0);
+      return;
+    }
+    const nextBar = searchVisible ? searchBarRef.current?.offsetHeight ?? 0 : 0;
+    setSearchBarHeight((prev) => prev === nextBar ? prev : nextBar);
+    const nextSelectAll = selectAllVisible ? listEl.querySelector("[data-select-all-row]")?.offsetHeight ?? 0 : 0;
+    setSelectAllHeight((prev) => prev === nextSelectAll ? prev : nextSelectAll);
+  }, [listEl, open, searchVisible, selectAllVisible]);
+  react.useLayoutEffect(() => {
+    if (!open || !listEl) return;
+    const m = metricsRef.current;
+    if (m == null) return;
+    const key = `${winRef.current.start}:${winRef.current.end}:${rowCount}`;
+    if (measuredKeyRef.current === key) return;
+    measuredKeyRef.current = key;
+    const anchor = winRef.current.start;
+    const anchorBefore = offsetOf(m, anchor);
+    let changed = false;
+    for (const row of listEl.querySelectorAll("[data-select-row]")) {
+      const index = Number(row.dataset.index);
+      if (!Number.isInteger(index)) continue;
+      if (setRowSize(m, index, row.offsetHeight)) changed = true;
+    }
+    if (!changed) return;
+    const delta = offsetOf(m, anchor) - anchorBefore;
+    if (delta !== 0 && listEl.scrollTop > 0) listEl.scrollTop += delta;
+    syncScrollStateRef.current();
+  });
+  react.useEffect(() => {
+    if (cbRef.current.onSearchChange == null) return;
+    if (search === emittedQueryRef.current) return;
+    if (!serverSearch) {
+      emittedQueryRef.current = search;
+      cbRef.current.onSearchChange(search);
+      return;
+    }
+    const timer = setTimeout(
+      () => {
+        emittedQueryRef.current = search;
+        cbRef.current.onSearchChange?.(search);
+      },
+      Math.max(0, searchDebounce)
+    );
+    return () => clearTimeout(timer);
+  }, [search, searchDebounce, serverSearch]);
+  const selectAllMisuse = multi && showSelectAll && partialOptions;
+  react.useEffect(() => {
+    if (!isDev()) return;
+    if (selectAllMisuse) {
+      console.warn(
+        '[SSelect] onReachEnd\xB7serverSearch \uC640 \uD568\uAED8 \uC900 showSelectAll \uC744 \uBB34\uC2DC\uD569\uB2C8\uB2E4. options \uAC00 \uBAA9\uB85D\uC758 \uC870\uAC01\uC77C \uBFD0\uC774\uB77C \uC544\uC9C1 \uBC1B\uC9C0 \uC54A\uC740 \uC635\uC158\uC740 \uACE0\uB97C \uC218 \uC5C6\uACE0, \uBC1B\uC544 \uC628 \uB9CC\uD07C\uB9CC \uACE0\uB978 \uC0C1\uD0DC\uB97C "\uC804\uCCB4"\uB77C\uACE0 \uD45C\uC2DC\uD558\uBA74 \uAC70\uC9D3\uC774 \uB429\uB2C8\uB2E4.'
+      );
+    }
+  }, [selectAllMisuse]);
+  const windowStart = Math.min(win.start, rowCount);
+  const windowEnd = Math.max(windowStart, Math.min(win.end, rowCount));
+  const visibleItems = filtered.slice(windowStart, windowEnd);
   const triggerText = (() => {
     if (selected.length === 0) return placeholder;
     if (multi) {
       if (allSelected) return allSelectedLabel;
-      return selected.map((v) => labelByValue.get(v) ?? v).filter(Boolean).join(", ");
+      return selected.map((v) => labelByValue.get(v) ?? valueOptions.get(v)?.label ?? v).filter(Boolean).join(", ");
     }
-    return labelByValue.get(selected[0]) ?? selected[0];
+    return labelByValue.get(selected[0]) ?? valueOptions.get(selected[0])?.label ?? selected[0];
   })();
   const isPlaceholder = selected.length === 0;
   const showClear = clearable && !effectiveDisabled && !isPlaceholder;
@@ -12933,7 +13201,6 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       const anchor = rangeAnchorRef.current;
       if (extend && anchor != null && anchor !== index && filtered[anchor]?.isGroup === false) {
         const [from, to] = anchor < index ? [anchor, index] : [index, anchor];
-        const selectedSet = new Set(selected);
         const shouldSelect = selectedSet.has(filtered[anchor].value);
         const rangeValues = filtered.slice(from, to + 1).filter((o) => !o.isGroup && !o.disabled).map((o) => o.value);
         const inRange = new Set(rangeValues);
@@ -12958,7 +13225,6 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const handleToggleGroup = (leafValues) => {
     if (leafValues.length === 0) return;
     rangeAnchorRef.current = null;
-    const selectedSet = new Set(selected);
     const allSelectedInGroup = leafValues.every((v) => selectedSet.has(v));
     if (allSelectedInGroup) {
       const remove = new Set(leafValues);
@@ -12967,35 +13233,51 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       emit3([...selected, ...leafValues.filter((v) => !selectedSet.has(v))]);
     }
   };
+  const hasNavigableItems = navigableItems.length > 0;
   react.useEffect(() => {
-    if (!open || navigableItems.length === 0) {
+    if (!open || !hasNavigableItems) {
       setFocusedIndex(-1);
       return;
     }
     const anchor = alignSelectedTopRef.current ? selectedAnchorRef.current : -1;
     setFocusedIndex(anchor >= 0 ? anchor : 0);
-  }, [open, search, navigableItems.length]);
+  }, [open, search, hasNavigableItems]);
+  const lastResetSearchRef = react.useRef(search);
+  react.useLayoutEffect(() => {
+    if (lastResetSearchRef.current === search) return;
+    lastResetSearchRef.current = search;
+    if (!open || !listEl) return;
+    listEl.scrollTop = 0;
+    syncScrollStateRef.current();
+  }, [listEl, open, search]);
   react.useEffect(() => {
     rangeAnchorRef.current = null;
+    lastReachEndCountRef.current = -1;
   }, [open, search]);
   react.useLayoutEffect(() => {
     if (!open || focusedIndex < 0 || !listEl) return;
-    const focusedEl = listEl.querySelector('[data-select-focused="true"]');
-    if (!focusedEl) return;
-    const listRect = listEl.getBoundingClientRect();
-    const itemRect = focusedEl.getBoundingClientRect();
-    if (alignSelectedTopRef.current) {
+    const m = metricsRef.current;
+    if (m == null) return;
+    const stickyOffset = searchBarRef.current?.offsetHeight ?? 0;
+    const rowIndex = navigableItemsRef.current[focusedIndex]?.index;
+    if (rowIndex == null) {
       alignSelectedTopRef.current = false;
-      const stickyOffset = searchBarRef.current?.offsetHeight ?? 0;
-      listEl.scrollTop += itemRect.top - listRect.top - stickyOffset;
+      listEl.scrollTop = 0;
+      syncScrollStateRef.current();
       return;
     }
-    if (itemRect.top < listRect.top) {
-      listEl.scrollTop += itemRect.top - listRect.top;
-    } else if (itemRect.bottom > listRect.bottom) {
-      listEl.scrollTop += itemRect.bottom - listRect.bottom;
-    }
-  }, [focusedIndex, open, listEl]);
+    const top = rowsOffset + offsetOf(m, rowIndex);
+    const height = sizeOf(m, rowIndex);
+    if (alignSelectedTopRef.current) {
+      alignSelectedTopRef.current = false;
+      listEl.scrollTop = top - stickyOffset;
+    } else if (top < listEl.scrollTop + stickyOffset) {
+      listEl.scrollTop = top - stickyOffset;
+    } else if (top + height > listEl.scrollTop + listEl.clientHeight) {
+      listEl.scrollTop = top + height - listEl.clientHeight;
+    }
+    syncScrollStateRef.current();
+  }, [focusedIndex, listEl, open, rowsOffset]);
   const moveFocusedIndex = (direction) => {
     if (!open || navigableItems.length === 0) return;
     setFocusedIndex((current) => {
@@ -13185,6 +13467,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                   SCROLLBAR_TRACK_BORDER_CLASS
                 ),
                 style: { maxHeight: clampToAvailableHeight(dropdownHeight, POPOVER_AVAILABLE_HEIGHT) },
+                onScroll: syncScrollState,
                 onMouseLeave: () => setFocusedIndex(-1),
                 children: [
                   searchVisible && /* @__PURE__ */ jsxRuntime.jsx(
@@ -13208,12 +13491,16 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                   hasItems ? /* @__PURE__ */ jsxRuntime.jsx(
                     ItemList,
                     {
-                      items: filtered,
+                      items: visibleItems,
+                      indexOffset: windowStart,
+                      topSpacer: win.top,
+                      bottomSpacer: win.bottom,
+                      setSize: isDepth ? void 0 : rowCount,
                       multi,
                       selected,
                       groupLeafValues,
                       focusedValue: navigableItems[focusedIndex]?.key,
-                      showSelectAll: multi && showSelectAll && allValues.length > 0,
+                      showSelectAll: selectAllVisible,
                       selectAllLabel: allSelectedLabel,
                       selectAllSelected: allSelected,
                       onSelectAll: handleSelectAll,
@@ -13228,7 +13515,18 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                         if (index >= 0) setFocusedIndex(index);
                       }
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                  ) : loading2 ? null : (
+                    // 첫 페이지를 받는 중에는 "없다"고 단정하지 않는다 — 아래 로딩 표시가 대신 나온다.
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                  ),
+                  loading2 && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      role: "status",
+                      className: "px-[12px] py-[12px] text-center text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]",
+                      children: "\uBD88\uB7EC\uC624\uB294 \uC911..."
+                    }
+                  )
                 ]
               }
             )
@@ -13241,6 +13539,10 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
 var SSelect2 = /* @__PURE__ */ withDisplayName(SSelectImpl, "SSelect");
 function ItemList({
   items,
+  indexOffset,
+  topSpacer,
+  bottomSpacer,
+  setSize,
   multi,
   selected,
   groupLeafValues,
@@ -13265,6 +13567,7 @@ function ItemList({
       "button",
       {
         type: "button",
+        "data-select-all-row": true,
         "data-select-focused": focusedValue === "__select_all__" ? "true" : void 0,
         "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
         className: cn(
@@ -13281,7 +13584,9 @@ function ItemList({
         ]
       }
     ),
-    items.map((o, idx) => {
+    topSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: { height: topSpacer } }),
+    items.map((o, windowIndex) => {
+      const idx = windowIndex + indexOffset;
       const padLeft = o.depth === 1 ? 12 : o.depth === 2 ? 20 : 28;
       const rowKey = `${o.value}-${idx}`;
       if (o.isGroup) {
@@ -13298,6 +13603,8 @@ function ItemList({
             "button",
             {
               type: "button",
+              "data-select-row": true,
+              "data-index": idx,
               role: "option",
               "aria-selected": groupState === true,
               disabled: groupDisabled,
@@ -13348,6 +13655,8 @@ function ItemList({
         return /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
+            "data-select-row": true,
+            "data-index": idx,
             className: cn(
               "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-default)]",
               groupTone,
@@ -13367,9 +13676,13 @@ function ItemList({
         "button",
         {
           type: "button",
+          "data-select-row": true,
+          "data-index": idx,
           disabled: o.disabled,
           role: "option",
           "aria-selected": isSelected,
+          "aria-setsize": setSize,
+          "aria-posinset": setSize != null ? idx + 1 : void 0,
           "data-select-focused": focusedValue === o.value ? "true" : void 0,
           "data-select-active": focusedValue === o.value ? "true" : void 0,
           className: cn(
@@ -13404,7 +13717,8 @@ function ItemList({
         },
         rowKey
       );
-    })
+    }),
+    bottomSpacer > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: { height: bottomSpacer } })
   ] });
 }
 function CheckboxBox({
@@ -14565,12 +14879,29 @@ var SInput = /* @__PURE__ */ react.forwardRef(function SInput2({
     }
   );
 });
-var PAD2 = { fontSize: 12, paddingX: 12, paddingY: 4 };
+var TEXTAREA_SIZE = {
+  sm: {
+    fontSize: 12,
+    lineHeight: 20,
+    paddingX: "var(--cmp-textinput-sm-paddingX)",
+    paddingY: "var(--cmp-textinput-sm-paddingY)"
+  },
+  md: {
+    fontSize: 14,
+    lineHeight: 24,
+    paddingX: "var(--cmp-textinput-md-paddingX)",
+    paddingY: "var(--cmp-textinput-md-paddingY)"
+  }
+};
+var MIN_ROWS = 2;
 var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
   value,
   onValueChange,
   onChange,
-  rows = 3,
+  size = "sm",
+  rows = MIN_ROWS,
+  autogrow = false,
+  maxRows,
   rules,
   status,
   focused,
@@ -14597,8 +14928,30 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
   style,
   ...rest
 }, ref) {
-  const p = PAD2;
+  const p = TEXTAREA_SIZE[size];
+  const heightForRows = (n) => `calc(${p.lineHeight * n}px + ${p.paddingY} * 2)`;
+  const minHeight = heightForRows(MIN_ROWS);
+  const maxHeight = autogrow && maxRows != null ? heightForRows(maxRows) : void 0;
   const [ruleError, setRuleError] = react.useState("");
+  const innerRef = react.useRef(null);
+  const setRefs2 = react.useCallback(
+    (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  react.useLayoutEffect(() => {
+    const el = innerRef.current;
+    if (el == null) return;
+    if (!autogrow) {
+      el.style.height = "";
+      return;
+    }
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [autogrow, maxHeight, minHeight, rows, value]);
   useFormField({
     name: rest.name,
     validate: () => {
@@ -14623,6 +14976,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
       addonLabel,
       addonAlign,
       hint,
+      size,
       error: resolvedError,
       status: resolvedStatus,
       focused,
@@ -14637,7 +14991,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
-          ref,
+          ref: setRefs2,
           value: value ?? "",
           rows,
           disabled,
@@ -14653,15 +15007,21 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
             if (rules && rules.length > 0) setRuleError(runRules(e.target.value, rules));
           },
           className: cn(
-            "w-full resize-y border-0 bg-transparent outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed",
+            "w-full border-0 bg-transparent outline-none placeholder:text-[color:var(--sys-color-field-text-placeholder)] disabled:cursor-not-allowed",
+            // autogrow 와 끌어서 늘리기는 같은 높이를 두고 다투므로 함께 두지 않는다
+            autogrow ? "resize-none" : "resize-y",
             AUTOFILL_RESET_CLASS,
             textareaClassName
           ),
           style: {
-            minHeight: 100,
-            padding: `${p.paddingY}px ${p.paddingX}px`,
+            minHeight,
+            maxHeight,
+            // 상한이 있으면 거기 닿았을 때 안에서 스크롤한다. 상한이 없으면 높이가 늘 내용과
+            // 같으므로 스크롤바가 나올 일이 없고, 반올림으로 1px 이 넘쳐 깜빡이는 것만 막는다.
+            overflowY: autogrow ? maxRows != null ? "auto" : "hidden" : void 0,
+            padding: `${p.paddingY} ${p.paddingX}`,
             fontSize: p.fontSize,
-            lineHeight: "20px",
+            lineHeight: `${p.lineHeight}px`,
             color: disabled ? "var(--cmp-textinput-text-disabled)" : "var(--sys-color-field-text-default)",
             ...textareaStyle
           },
@@ -14671,7 +15031,7 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
     }
   );
 });
-var PAD3 = {
+var PAD2 = {
   sm: { fontSize: 12, lineHeight: 20, stepper: 20, icon: 12 },
   md: { fontSize: 14, lineHeight: 24, stepper: 24, icon: 14 }
 };
@@ -14774,7 +15134,7 @@ var SNumberInput = /* @__PURE__ */ react.forwardRef(function SNumberInput2({
   className,
   style
 }, ref) {
-  const p = PAD3[size];
+  const p = PAD2[size];
   const padX = `var(--cmp-numberInput-${size}-paddingX)`;
   const decimalLimit = getDecimalLimit(allowDecimal, maxDecimalLength);
   const numValue = applyDecimalLimit(toNumber(value), decimalLimit);