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

package/dist/components/SGuide/README.md

@@ -13,7 +13,7 @@
 | `message?` | `SGuideMessage` | `''` | 팝업 메시지 (배열이면 리스트, 중첩 배열이면 depth 표현) |
 | `url?` | `string` | `''` | notion 타입 클릭 시 이동 URL |
 | `popupTitle?` | `string` | `''` | 팝업 제목 (없으면 type 기본값) |
-| `popupWidth?` | `number` | — | 팝업 너비 (px, 기본 426). 창보다 넓게 줘도 창 폭까지만 벌어진다. |
+| `popupWidth?` | `number \| 'auto'` | `'auto'` | 팝업 너비. 기본 `'auto'` 는 내용 폭에 맞춘다 — 가장 긴 줄이 곧 팝업 폭이다. 숫자(px)를 주면 그 폭으로 고정한다. 어느 쪽이든 창 좌우에 여백을 남기는 선까지만 벌어진다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 

package/dist/components/SGuide/SGuide.d.ts

@@ -13,8 +13,11 @@ export interface SGuideProps {
     url?: string;
     /** 팝업 제목 (없으면 type 기본값) */
     popupTitle?: string;
-    /** 팝업 너비 (px, 기본 426). 창보다 넓게 줘도 창 폭까지만 벌어진다. */
-    popupWidth?: number;
+    /**
+     * 팝업 너비. 기본 `'auto'` 는 내용 폭에 맞춘다 — 가장 긴 줄이 곧 팝업 폭이다.
+     * 숫자(px)를 주면 그 폭으로 고정한다. 어느 쪽이든 창 좌우에 여백을 남기는 선까지만 벌어진다.
+     */
+    popupWidth?: number | 'auto';
     className?: string;
     style?: CSSProperties;
 }

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
       ]
     }
@@ -7875,6 +7879,8 @@ var SPopup = /* @__PURE__ */ react.forwardRef(function SPopup2({
 });
 var DEFAULT_LABEL = { tip: "\uD65C\uC6A9 TIP", notion: "\uC0AC\uC6A9\uBC95 \uC548\uB0B4" };
 var ICON = { tip: "helpOutline", notion: "notion" };
+var VIEWPORT_GUTTER = 24;
+var CLOSE_INSET = 12;
 function flattenMessages(message, depth = 0) {
   if (Array.isArray(message)) return message.flatMap((m) => flattenMessages(m, depth + 1));
   return message !== "" ? [{ text: message, depth }] : [];
@@ -7885,13 +7891,14 @@ function SGuide({
   message = "",
   url = "",
   popupTitle = "",
-  popupWidth,
+  popupWidth = "auto",
   className,
   style
 }) {
   const [open, setOpen] = react.useState(false);
   const portalContainer = usePortalContainer();
   const isNotion = type === "notion";
+  const isAutoWidth = popupWidth === "auto";
   const defaultLabel = DEFAULT_LABEL[type];
   const iconName = ICON[type];
   const messages = flattenMessages(message);
@@ -7931,30 +7938,45 @@ function SGuide({
         side: "bottom",
         align: "start",
         sideOffset: 4,
+        collisionPadding: VIEWPORT_GUTTER,
         className: cn(
           "relative z-50 rounded-[var(--cmp-guide-contents-radius)] bg-[var(--color-white)]",
-          // popupWidth(기본 426px)가 창보다 넓으면 창 폭에 맞춘다 — max-width 가 width 를 이긴다.
-          "max-w-[var(--radix-popover-content-available-width)]",
           FLOATING_SLIDE_ANIM
         ),
         style: {
-          width: popupWidth != null ? popupWidth : 426,
+          width: isAutoWidth ? "max-content" : popupWidth,
+          // 유일한 폭 상한. auto 든 고정 폭이든 창 좌우 여백을 먹고 들어가지 않는다.
+          // 트리거 위치가 아니라 창 기준이라, 오른쪽 끝 트리거에서도 폭이 깎이지 않는다
+          // (넘치면 Radix 가 왼쪽으로 민다). 100vw 는 세로 스크롤바를 포함하지만
+          // 여백이 그보다 넉넉해 화면 밖으로 나가지 않는다.
+          maxWidth: `calc(100vw - ${VIEWPORT_GUTTER * 2}px)`,
           padding: "var(--cmp-guide-contents-paddingY) var(--cmp-guide-contents-paddingX)",
           boxShadow: "4px 4px 24px 4px rgba(0,0,0,0.1)"
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-[12px] top-[12px]", children: /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { icon: "close", size: "sm", ariaLabel: "close", onClick: () => setOpen(false) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--cmp-guide-contents-title-gap)]", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SIcon,
-              {
-                name: iconName,
-                size: 24,
-                color: isNotion ? "var(--sys-color-fg-primary)" : "var(--cmp-guide-contents-icon)"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "m-0 text-[16px] font-bold leading-[26px] text-[color:var(--cmp-guide-contents-typography-color)]", children: popupTitle || defaultLabel })
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute", style: { top: CLOSE_INSET, right: CLOSE_INSET }, children: /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { icon: "close", size: "sm", ariaLabel: "close", onClick: () => setOpen(false) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex items-center gap-[var(--cmp-guide-contents-title-gap)]",
+              style: {
+                // 닫기 버튼은 absolute 라 폭 계산에 안 들어간다. 폭이 내용에 붙는 auto 에서 제목이
+                // 버튼 밑으로 들어가지 않도록, 버튼이 콘텐츠 영역을 침범하는 만큼을 미리 비운다.
+                paddingRight: `max(0px, calc(var(--cmp-ghostButton-sm-size) + ${CLOSE_INSET}px + var(--cmp-guide-contents-title-gap) - var(--cmp-guide-contents-paddingX)))`
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SIcon,
+                  {
+                    name: iconName,
+                    size: 24,
+                    color: isNotion ? "var(--sys-color-fg-primary)" : "var(--cmp-guide-contents-icon)"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "m-0 break-keep text-[16px] font-bold leading-[26px] text-[color:var(--cmp-guide-contents-typography-color)]", children: popupTitle || defaultLabel })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 mt-[var(--cmp-guide-contents-gap)] flex w-full list-none flex-col gap-[var(--cmp-guide-contents-body-gap)] p-0 text-[12px] leading-[20px] text-[color:var(--cmp-guide-contents-typography-color)]", children: messages.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
             "li",
             {
@@ -7965,7 +7987,7 @@ function SGuide({
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
-                  className: "m-0 w-full min-w-0 break-words",
+                  className: "m-0 w-full min-w-0 break-keep break-words text-pretty",
                   dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(m.text) }
                 }
               )
@@ -12764,6 +12786,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 +12887,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 +12912,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 +12959,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 +12989,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 +13000,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 +13022,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 +13367,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 +13547,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 +13730,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 +13762,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 +13771,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 +14145,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) => {