sellmate-design-system-react 9.0.0-beta.41 → 9.0.0-beta.42

package/dist/index.cjs

@@ -5103,7 +5103,11 @@ var STag = /* @__PURE__ */ react.forwardRef(function STag2({
       ...rest,
       children: [
         icon && iconLeft && iconNode,
-        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-0 items-center justify-center", children: label }),
+        label && // leading-none: 태그는 min-height 로 높이가 정해지고 flex 가 세로 중앙 정렬하므로
+        // 레이블에 line-height 가 필요 없다. 오히려 line-height 를 주면 브라우저가
+        // 폰트 ascent/descent 를 정수 px 로 반올림한 뒤 남는 half-leading 을 내림 처리해
+        // 베이스라인이 최대 1px 위로 밀린다(xs 에서 특히 눈에 띈다).
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-0 items-center justify-center leading-none", children: label }),
         icon && !iconLeft && iconNode
       ]
     }
@@ -12764,6 +12768,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const dismissedByPointerRef = react.useRef(false);
   const alignSelectedTopRef = react.useRef(false);
   const selectedAnchorRef = react.useRef(-1);
+  const rangeAnchorRef = react.useRef(null);
   const flat = react.useMemo(() => flattenOptions(options), [options]);
   const selectable = react.useMemo(() => selectableOptions(flat), [flat]);
   const hasLeaf = react.useMemo(() => flat.some((o) => !o.isGroup), [flat]);
@@ -12864,7 +12869,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
         if (leafValues.length === 0) return;
         items.push({ key: `__group_${i}__`, isGroup: true, leafValues });
       } else {
-        items.push({ key: o.value, value: o.value });
+        items.push({ key: o.value, value: o.value, index: i });
       }
     });
     return items;
@@ -12889,20 +12894,36 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     emit3([]);
     if (rules && rules.length > 0) setRuleError(runRules(multi ? [] : "", rules));
   };
-  const handleSelect = (nextValue) => {
+  const handleSelect = (nextValue, index, extend = false) => {
     if (multi) {
-      const next = selected.includes(nextValue) ? selected.filter((v) => v !== nextValue) : [...selected, nextValue];
-      emit3(next);
+      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);
+        emit3(
+          shouldSelect ? [...selected, ...rangeValues.filter((v) => !selectedSet.has(v))] : selected.filter((v) => !inRange.has(v))
+        );
+        return;
+      }
+      rangeAnchorRef.current = index;
+      emit3(
+        selected.includes(nextValue) ? selected.filter((v) => v !== nextValue) : [...selected, nextValue]
+      );
       return;
     }
     emit3([nextValue]);
     commitOpen(false, [nextValue]);
   };
   const handleSelectAll = () => {
+    rangeAnchorRef.current = null;
     emit3(allSelected ? [] : allValues);
   };
   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) {
@@ -12920,6 +12941,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     const anchor = alignSelectedTopRef.current ? selectedAnchorRef.current : -1;
     setFocusedIndex(anchor >= 0 ? anchor : 0);
   }, [open, search, navigableItems.length]);
+  react.useEffect(() => {
+    rangeAnchorRef.current = null;
+  }, [open, search]);
   react.useLayoutEffect(() => {
     if (!open || focusedIndex < 0 || !listEl) return;
     const focusedEl = listEl.querySelector('[data-select-focused="true"]');
@@ -12947,7 +12971,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       return current <= 0 ? navigableItems.length - 1 : current - 1;
     });
   };
-  const selectFocusedItem = () => {
+  const selectFocusedItem = (extend = false) => {
     if (focusedIndex < 0 || focusedIndex >= navigableItems.length) return;
     const focused = navigableItems[focusedIndex];
     if (focused.isSelectAll) {
@@ -12958,7 +12982,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
       handleToggleGroup(focused.leafValues ?? []);
       return;
     }
-    handleSelect(focused.value);
+    handleSelect(focused.value, focused.index, extend);
   };
   const handleKeyDown = (event) => {
     if (!open) {
@@ -12980,7 +13004,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     }
     if (event.key === "Enter") {
       event.preventDefault();
-      selectFocusedItem();
+      selectFocusedItem(event.shiftKey);
       return;
     }
     if (event.key === "Escape") {
@@ -13325,7 +13349,7 @@ function ItemList({
           style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: padLeft },
           onMouseEnter: () => onHoverValue(o.value),
           onMouseLeave: () => onHoverValue(null),
-          onClick: () => onSelect(o.value),
+          onClick: (event) => onSelect(o.value, idx, event.shiftKey),
           children: [
             multi && /* @__PURE__ */ jsxRuntime.jsx(
               CheckboxBox,
@@ -13505,6 +13529,8 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     setColumnWidths(visibleCols.map(colWidthFromDef));
   }, [colSignature]);
   const selectedKeys = react.useMemo(() => new Set(selected.map((r) => r[rowKey])), [selected, rowKey]);
+  const rangeAnchorRef = react.useRef(null);
+  const shiftPressedRef = react.useRef(false);
   const isRowSelected = react.useCallback(
     (row) => selectedKeys.has(row[rowKey]),
     [selectedKeys, rowKey]
@@ -13686,18 +13712,24 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   let bodyRows = rows;
   let topSpacer = 0;
   let bottomSpacer = 0;
+  let rowOffset = 0;
   if (virtualScroll) {
     bodyRows = rows.slice(vsRange.start, vsRange.end);
+    rowOffset = vsRange.start;
     topSpacer = vsRange.start * effectiveRowHeight;
     bottomSpacer = Math.max(0, (rowCount - vsRange.end) * effectiveRowHeight);
   } else if (pageInfo) {
     bodyRows = rows.slice(pageInfo.startIndex, pageInfo.endIndex);
+    rowOffset = pageInfo.startIndex;
   }
   const isNoData = rowCount === 0 && !loading2;
   const showNoDataSlot = isNoData && emptySlot != null;
   const showPagination = !virtualScroll && (pagination != null || internalPagination);
   const lastPage = internalPagination ? Math.max(1, Math.ceil(rowCount / (innerRowsPerPage || 1))) : pagination?.lastPage ?? Math.max(1, Math.ceil(rowCount / (pagination?.rowsPerPage ?? 10)));
   const displayPage = internalPagination ? currentPage : pagination?.page ?? 1;
+  react.useEffect(() => {
+    rangeAnchorRef.current = null;
+  }, [displayPage]);
   const changePage = (p) => {
     if (internalPagination) setCurrentPage(p);
     onPageChange?.(p);
@@ -13712,6 +13744,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   };
   const headerCheck = getIsAllChecked(bodyRows);
   const toggleAll = () => {
+    rangeAnchorRef.current = null;
     if (headerCheck === true) {
       const pageKeys = new Set(bodyRows.map((r) => r[rowKey]));
       onSelectedChange?.(selected.filter((r) => !pageKeys.has(r[rowKey])));
@@ -13720,7 +13753,23 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
       onSelectedChange?.([...selected, ...add]);
     }
   };
-  const toggleRow = (row) => {
+  const toggleRow = (row, index) => {
+    const anchor = rangeAnchorRef.current;
+    const anchorAlive = anchor != null && anchor.index !== index && rows[anchor.index]?.[rowKey] === anchor.key;
+    if (shiftPressedRef.current && anchor != null && anchorAlive) {
+      const [from, to] = anchor.index < index ? [anchor.index, index] : [index, anchor.index];
+      const shouldSelect = selectedKeys.has(anchor.key);
+      const range = rows.slice(from, to + 1);
+      if (shouldSelect) {
+        const add = range.filter((r) => !selectedKeys.has(r[rowKey]));
+        onSelectedChange?.([...selected, ...add]);
+      } else {
+        const keys = new Set(range.map((r) => r[rowKey]));
+        onSelectedChange?.(selected.filter((r) => !keys.has(r[rowKey])));
+      }
+      return;
+    }
+    rangeAnchorRef.current = { index, key: row[rowKey] };
     if (selectedKeys.has(row[rowKey]))
       onSelectedChange?.(selected.filter((r) => r[rowKey] !== row[rowKey]));
     else onSelectedChange?.([...selected, row]);
@@ -14078,7 +14127,17 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
                                           maxWidth: SELECTABLE_COLUMN_WIDTH
                                         },
                                         onClick: (e) => e.stopPropagation(),
-                                        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: isSel, onValueChange: () => toggleRow(row) }) })
+                                        onClickCapture: (e) => {
+                                          shiftPressedRef.current = e.shiftKey;
+                                          if (e.shiftKey) window.getSelection()?.removeAllRanges();
+                                        },
+                                        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex select-none items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                          SCheckbox,
+                                          {
+                                            value: isSel,
+                                            onValueChange: () => toggleRow(row, rowOffset + ri)
+                                          }
+                                        ) })
                                       }
                                     ),
                                     visibleCols.map((col, i) => {