sellmate-design-system-react 9.0.0-beta.79 → 9.0.0-beta.80

package/dist/index.d.ts

@@ -66,6 +66,7 @@ export * from './components/SLineChart';
 export * from './components/SPieChart';
 export * from './components/SDonutChart';
 export * from './components/SToast';
+export * from './components/SSkeleton';
 export * from './components/SForm';
 export * from './components/SField';
 export * from './components/SCheckbox';

package/dist/index.js

@@ -5661,6 +5661,8 @@ var SChatSystemMessageImpl = /* @__PURE__ */ forwardRef(
     const notices = message ?? [];
     return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col items-center gap-sd-8", className), ...rest, children: notices.map((notice, i) => (
       // 알약은 문구 길이만큼만 차지하고, 길면 줄바꿈해 여러 줄로 선다.
+      // inline-flex 로 두면 안의 글자와 <b> 같은 인라인 태그가 각각 flex 아이템이 되어 그 사이 띄어쓰기가
+      // 사라진다(`상담사 <b>김셀메</b>가` → 상담사김셀메가). 글 흐름 그대로 두려고 inline-block 이다.
       // 안내는 HTML 문자열을 허용하되 sanitizeInlineHtml 로 살균 후 innerHTML 렌더 (XSS 방어)
       /* @__PURE__ */ jsx(
         "span",
@@ -5669,7 +5671,7 @@ var SChatSystemMessageImpl = /* @__PURE__ */ forwardRef(
             // 라운드는 말풍선과 같은 토큰을 쓴다 — 여러 줄이 돼도 모서리가 상자 높이를 따라
             // 부풀지 않는다. 제 몫인 chatSystemMessage.radius 는 pill(9999px)이라 쓰지 않는다.
             // 두 줄부터 좌우가 커다란 반원이 되어 첫 글자가 안으로 밀리기 때문이다.
-            "inline-flex max-w-full rounded-(--cmp-chatBubble-radius) border",
+            "inline-block max-w-full rounded-(--cmp-chatBubble-radius) border",
             "border-(--cmp-chatSystemMessage-border-color) bg-(--cmp-chatSystemMessage-bg)",
             "typo-body-sm-medium text-(--cmp-chatSystemMessage-color)",
             "px-(--cmp-chatSystemMessage-paddingX) py-(--cmp-chatSystemMessage-paddingY) text-center",
@@ -6823,17 +6825,26 @@ var SListItemImpl = /* @__PURE__ */ forwardRef(function SListItem({
   );
 });
 var SListItem2 = /* @__PURE__ */ withDisplayName(SListItemImpl, "SListItem");
+var SExpansionListDepthContext = /* @__PURE__ */ createContext(null);
+var MAX_DEPTH = 3;
 function isExpansionItemElement(node) {
   return isValidElement(node) && node.type === SExpansionItem;
 }
 function isListItemElement(node) {
   return isValidElement(node) && node.type === SListItem2;
 }
-function getInitialOpenKeys(children) {
+function isExpansionListElement(node) {
+  return isValidElement(node) && node.type === SExpansionList2;
+}
+function isLevelBody(children) {
+  const nodes = Children.toArray(children);
+  return nodes.length > 0 && nodes.every((node) => isListItemElement(node) || isExpansionItemElement(node));
+}
+function getInitialOpenKeys(children, levelDepth) {
   const openKeys = {};
   Children.forEach(children, (child, index) => {
     if (!isExpansionItemElement(child)) return;
-    const depth = child.props.depth ?? 1;
+    const depth = child.props.depth ?? levelDepth;
     if (openKeys[depth] != null) return;
     if (child.props.expanded === true || child.props.defaultExpanded === true) {
       openKeys[depth] = String(child.key ?? index);
@@ -6842,15 +6853,28 @@ function getInitialOpenKeys(children) {
   return openKeys;
 }
 var SExpansionListImpl = /* @__PURE__ */ forwardRef(function SExpansionList({ children, ...rest }, ref) {
-  const [openKeys, setOpenKeys] = useState(() => getInitialOpenKeys(children));
+  const parentDepth = useContext(SExpansionListDepthContext);
+  const levelDepth = parentDepth == null ? 1 : Math.min(parentDepth + 1, MAX_DEPTH);
+  const [openKeys, setOpenKeys] = useState(
+    () => getInitialOpenKeys(children, levelDepth)
+  );
   const listChildren = Children.map(children, (child, index) => {
     if (isListItemElement(child)) {
-      return cloneElement(child, { clickable: child.props.clickable ?? true });
+      return cloneElement(child, {
+        clickable: child.props.clickable ?? true,
+        depth: child.props.depth ?? levelDepth
+      });
     }
     if (!isExpansionItemElement(child)) return child;
-    const depth = child.props.depth ?? 1;
+    const depth = child.props.depth ?? levelDepth;
     const itemKey = String(child.key ?? index);
+    const body = child.props.children;
+    const bodyIsList = isExpansionListElement(body);
+    const wrapBody = !bodyIsList && isLevelBody(body);
     return cloneElement(child, {
+      depth,
+      bodyPadding: child.props.bodyPadding ?? (bodyIsList || wrapBody ? false : void 0),
+      ...wrapBody && { children: /* @__PURE__ */ jsx(SExpansionListImpl, { children: body }) },
       expanded: openKeys[depth] === itemKey,
       onToggle: (next, event) => {
         setOpenKeys((current) => ({
@@ -6861,7 +6885,7 @@ var SExpansionListImpl = /* @__PURE__ */ forwardRef(function SExpansionList({ ch
       }
     });
   });
-  return /* @__PURE__ */ jsx(SList2, { ref, ...rest, children: listChildren });
+  return /* @__PURE__ */ jsx(SExpansionListDepthContext.Provider, { value: levelDepth, children: /* @__PURE__ */ jsx(SList2, { ref, ...rest, children: listChildren }) });
 });
 var SExpansionList2 = /* @__PURE__ */ withDisplayName(SExpansionListImpl, "SExpansionList");
 
@@ -14066,6 +14090,22 @@ function groupAdjacentItems(items) {
     []
   );
 }
+function scrollItemIntoContainer(item4) {
+  const view = item4.ownerDocument.defaultView;
+  if (!view) return;
+  let container = item4.parentElement;
+  while (container) {
+    const { overflowY } = view.getComputedStyle(container);
+    if ((overflowY === "auto" || overflowY === "scroll") && container.scrollHeight > container.clientHeight)
+      break;
+    container = container.parentElement;
+  }
+  if (!container) return;
+  const box3 = container.getBoundingClientRect();
+  const rect = item4.getBoundingClientRect();
+  if (rect.top < box3.top) container.scrollTop -= box3.top - rect.top;
+  else if (rect.bottom > box3.bottom) container.scrollTop += rect.bottom - box3.bottom;
+}
 var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
   items,
   value,
@@ -14099,10 +14139,16 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
   const resolvedClickableIndex = lastCompletedIndex + 1;
   const [visitedMaxIndex, setVisitedMaxIndex] = useState(activeIndex);
   const firstErrorIndex = items.findIndex((item4) => item4.error === true);
+  const firstErrorIndexRef = useRef(firstErrorIndex);
+  firstErrorIndexRef.current = firstErrorIndex;
   useImperativeHandle(
     ref,
     () => ({
-      showItemTooltip: () => setCustomTooltipOpen(true),
+      showItemTooltip: () => {
+        const errorItem = verticalItemRefs.current[firstErrorIndexRef.current];
+        if (errorItem) scrollItemIntoContainer(errorItem);
+        setCustomTooltipOpen(true);
+      },
       hideItemTooltip: () => setCustomTooltipOpen(false)
     }),
     []
@@ -14126,6 +14172,11 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
       transform: `translateY(${activeItem.offsetTop}px)`
     });
   }, [activeIndex, vertical, items]);
+  useLayoutEffect(() => {
+    if (!vertical) return;
+    const activeItem = verticalItemRefs.current[activeIndex];
+    if (activeItem) scrollItemIntoContainer(activeItem);
+  }, [activeIndex, vertical]);
   const getState = (item4, index) => {
     if (index === activeIndex) return "active";
     if (item4.completed != null) return item4.completed ? "completed" : "default";
@@ -14246,6 +14297,9 @@ var SStepper = /* @__PURE__ */ forwardRef(function SStepper2({
         className: cn("relative inline-flex flex-col items-start", className),
         style: {
           width: STEPPER_VERTICAL_LAYOUT.width,
+          // 폭은 토큰이 정하되 부모보다 넓어지지 않는다 — 부모가 세로 스크롤바만큼 좁아지면 따라 줄어
+          // 가로 넘침(가로 스크롤바)이 생기지 않는다
+          maxWidth: "100%",
           fontSize: config.fontSize,
           lineHeight: config.lineHeight,
           ...style
@@ -22553,6 +22607,113 @@ var SToastContainer = /* @__PURE__ */ forwardRef(
     );
   }
 );
+
+// src/components/SSkeleton/skeleton.config.ts
+var SKELETON_TYPES = [
+  "rect",
+  "circle",
+  "text",
+  "button",
+  "input",
+  "tag",
+  "checkbox",
+  "radio",
+  "switch"
+];
+var SKELETON_ANIMATIONS = ["wave", "pulse", "fade", "none"];
+var SKELETON_TYPE_CONFIG = {
+  rect: { radius: "var(--sys-radius-control-sm)" },
+  circle: { width: "48px", height: "48px", radius: "50%" },
+  text: { radius: "var(--sys-radius-control-sm)" },
+  button: {
+    width: "90px",
+    height: "var(--cmp-button-sm-height)",
+    radius: "var(--cmp-button-radius-sm)"
+  },
+  input: { height: "var(--cmp-textinput-sm-height)", radius: "var(--cmp-textinput-sm-radius)" },
+  tag: { width: "70px", height: "var(--cmp-tag-sm-height)", radius: "var(--cmp-tag-sm-radius)" },
+  checkbox: {
+    width: "var(--cmp-checkbox-size)",
+    height: "var(--cmp-checkbox-size)",
+    radius: "var(--cmp-checkbox-radius)"
+  },
+  radio: {
+    width: "var(--cmp-radio-size)",
+    height: "var(--cmp-radio-size)",
+    radius: "var(--cmp-radio-radius)"
+  },
+  switch: {
+    width: "var(--cmp-switch-width)",
+    height: "var(--cmp-switch-height)",
+    radius: "var(--cmp-switch-radius)"
+  }
+};
+var SKELETON_COLORS = {
+  /** Quasar rgba(0,0,0,.12) ≈ 흰 바탕 위 #E1E1E1 */
+  bg: "var(--sys-color-disabled-bg)",
+  /** Quasar rgba(0,0,0,.05) 테두리 — 배경보다 한 단계 짙게 */
+  border: "color-mix(in srgb, var(--sys-color-border-strong) 25%, transparent)",
+  /** Quasar rgba(255,255,255,.5) 하이라이트 띠 */
+  wave: "linear-gradient(90deg, transparent, color-mix(in srgb, var(--sys-color-bg-frame) 50%, transparent), transparent)"
+};
+var ANIMATION_CLASS = {
+  pulse: "animate-skeleton-pulse",
+  fade: "animate-skeleton-fade"
+};
+var toCss = (v) => typeof v === "number" ? `${v}px` : v;
+var SSkeleton = /* @__PURE__ */ forwardRef(function SSkeleton2({
+  type = "rect",
+  animation = "wave",
+  animationSpeed = 1500,
+  square = false,
+  bordered = false,
+  size,
+  width,
+  height,
+  className,
+  style,
+  ...props
+}, ref) {
+  const t = SKELETON_TYPE_CONFIG[type];
+  const duration = `${animationSpeed}ms`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      ...props,
+      className: cn(
+        "box-border cursor-wait select-none",
+        // text 는 transform 이 아니라 scale 속성으로 줄여서 pulse 의 transform 애니메이션과 겹치지 않는다
+        type === "text" && "scale-y-50",
+        bordered && "border border-solid",
+        animation === "wave" && "relative overflow-hidden",
+        animation !== "wave" && animation !== "none" && ANIMATION_CLASS[animation],
+        "motion-reduce:animate-none",
+        className
+      ),
+      style: {
+        width: toCss(width ?? size) ?? t.width,
+        height: toCss(height ?? size) ?? t.height,
+        borderRadius: square ? 0 : t.radius,
+        background: SKELETON_COLORS.bg,
+        borderColor: bordered ? SKELETON_COLORS.border : void 0,
+        animationDuration: animation === "pulse" || animation === "fade" ? duration : void 0,
+        ...style
+      },
+      children: [
+        "\xA0",
+        animation === "wave" && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute inset-0 animate-skeleton-wave motion-reduce:hidden",
+            style: { background: SKELETON_COLORS.wave, animationDuration: duration }
+          }
+        )
+      ]
+    }
+  );
+});
 var SForm = /* @__PURE__ */ forwardRef(function SForm2({ formClassName, onSubmit, onValidationError, children, className, style }, ref) {
   const formRef = useRef(null);
   const fieldsRef = useRef(/* @__PURE__ */ new Set());
@@ -28294,6 +28455,6 @@ function STimeRangePicker({
   );
 }
 
-export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_CONSOLE_HEIGHT, LAUNCHER_LIST_BOX_CONSOLE_ICON, LAUNCHER_LIST_BOX_CONSOLE_LABEL, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_DIRECTIONS, LOGO_MODES, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, PAGE_PADDINGS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SContextAlert, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable2 as STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
+export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_CONSOLE_HEIGHT, LAUNCHER_LIST_BOX_CONSOLE_ICON, LAUNCHER_LIST_BOX_CONSOLE_LABEL, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_DIRECTIONS, LOGO_MODES, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, PAGE_PADDINGS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SContextAlert, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKELETON_ANIMATIONS, SKELETON_TYPES, SKELETON_TYPE_CONFIG, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSkeleton, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable2 as STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map