sellmate-design-system-react 9.0.0-beta.70 → 9.0.0-beta.71

package/AGENTS.md

@@ -255,7 +255,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- |
 | 페이지/섹션 제목 | `typo-heading-lg`(18px) · `typo-heading-md`(16px) · `typo-heading-sm`(14px) · `typo-heading-xs`(12px) |
 | 카드·아이템 안의 메인 수치 데이터 | `typo-heading-xl`(24px) — 제목에 쓰지 않는다 |
-| 본문 | `typo-body-lg-*` (16px) · `typo-body-md-*`(14px) · `typo-body-sm-*`(12px) · `typo-body-xs-default`(11px) — `*` = `default`/`medium`/`semibold`/`bold` |
+| 본문 | `typo-body-lg-*` (16px) · `typo-body-md-*`(14px) · `typo-body-sm-*`(12px) · `typo-body-xs-*`(11px) — `*` = `default`/`medium`/`semibold`/`bold` |
 | 테이블 | `typo-table-header` · `typo-table-body` · `typo-table-accent` |
 | 컨트롤·필드·피드백·내비 | `typo-control-*` `typo-field-*` `typo-feedback-*` `typo-navigation-*` (컴포넌트 내부용 — 직접 쓸 일은 드묾) |
 

package/dist/index.cjs

@@ -15062,6 +15062,14 @@ var DEFAULT_VIRTUAL_BUFFER = 10;
 var DEFAULT_REACH_END_THRESHOLD = 10;
 var DEFAULT_SEARCH_DEBOUNCE = 300;
 var SEARCH_THRESHOLD = 11;
+function isListSized(el) {
+  return el.clientHeight > 0 && getComputedStyle(el).maxHeight !== "none";
+}
+function fallbackListHeight(dropdownHeight) {
+  const viewport = window.innerHeight;
+  const px = typeof dropdownHeight === "number" ? dropdownHeight : Number(/^\s*(\d+(?:\.\d+)?)px\s*$/.exec(dropdownHeight ?? "")?.[1] ?? Number.NaN);
+  return Number.isFinite(px) ? Math.min(px, viewport) : viewport;
+}
 var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   value,
   onValueChange,
@@ -15132,6 +15140,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const searchBarRef = react.useRef(null);
   const [listEl, setListEl] = react.useState(null);
   const setListRef = react.useCallback((node) => setListEl(node), []);
+  const [listSized, setListSized] = react.useState(false);
   const dismissedByPointerRef = react.useRef(false);
   const alignSelectedTopRef = react.useRef(false);
   const selectedAnchorRef = react.useRef(-1);
@@ -15252,7 +15261,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
         if (!multi) return;
         const leafValues = groupLeafValues.get(i) ?? [];
         if (leafValues.length === 0) return;
-        items.push({ key: `__group_${i}__`, isGroup: true, leafValues });
+        items.push({ key: `__group_${i}__`, isGroup: true, index: i, leafValues });
       } else {
         items.push({ key: o.value, value: o.value, index: i });
       }
@@ -15282,8 +15291,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     const m = metricsRef.current;
     if (m == null) return;
     const buffer = Math.max(0, Math.floor(virtualBuffer));
+    const listHeight = listSized ? Math.max(0, listEl.clientHeight) : fallbackListHeight(dropdownHeight);
     const viewTop = Math.max(0, listEl.scrollTop - rowsOffset);
-    const viewBottom = viewTop + Math.max(0, listEl.clientHeight);
+    const viewBottom = viewTop + listHeight;
     const start = Math.max(0, indexAtOffset(m, viewTop) - buffer);
     const end = Math.min(rowCount, indexAtOffset(m, viewBottom) + 1 + buffer);
     const top = offsetOf(m, start);
@@ -15293,14 +15303,16 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     );
     if (!pagingEnabled || !hasMore || loading2) return;
     const contentHeight = rowsOffset + totalSize(m);
-    const remaining = contentHeight - listEl.scrollTop - listEl.clientHeight;
+    const remaining = contentHeight - listEl.scrollTop - listHeight;
     if (remaining > Math.max(1, reachEndThreshold) * m.estimate) return;
     if (lastReachEndCountRef.current === rowCount) return;
     lastReachEndCountRef.current = rowCount;
     cbRef.current.onReachEnd?.();
   }, [
+    dropdownHeight,
     hasMore,
     listEl,
+    listSized,
     loading2,
     pagingEnabled,
     reachEndThreshold,
@@ -15314,6 +15326,23 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     if (!open) return;
     syncScrollState();
   }, [open, syncScrollState]);
+  react.useLayoutEffect(() => {
+    if (!open || !listEl) {
+      setListSized(false);
+      return;
+    }
+    if (isListSized(listEl)) {
+      setListSized(true);
+    }
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      if (!isListSized(listEl)) return;
+      reactDom.flushSync(() => setListSized(true));
+      syncScrollStateRef.current();
+    });
+    observer.observe(listEl);
+    return () => observer.disconnect();
+  }, [listEl, open]);
   react.useLayoutEffect(() => {
     if (!open || !listEl) {
       setSearchBarHeight(0);
@@ -15458,6 +15487,10 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       syncScrollStateRef.current();
       return;
     }
+    if (!listSized) {
+      syncScrollStateRef.current();
+      return;
+    }
     const top = rowsOffset + offsetOf(m, rowIndex);
     const height = sizeOf(m, rowIndex);
     if (alignSelectedTopRef.current) {
@@ -15469,7 +15502,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       listEl.scrollTop = top + height - listEl.clientHeight;
     }
     syncScrollStateRef.current();
-  }, [focusedIndex, listEl, open, rowsOffset]);
+  }, [focusedIndex, listEl, listSized, open, rowsOffset]);
   const moveFocusedIndex = (direction) => {
     if (!open || navigableItems.length === 0) return;
     setFocusedIndex((current) => {