sellmate-design-system-react 0.8.3 → 0.9.0

package/dist/index.js

@@ -4147,7 +4147,14 @@ function useBody(content, message = []) {
   if (content != null) return content;
   if (message.length === 0) return null;
   const singleLine = message.length === 1;
-  return /* @__PURE__ */ jsx(Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsx("div", { className: singleLine ? "leading-[24px]" : void 0, children: line }, i)) });
+  return /* @__PURE__ */ jsx(Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: singleLine ? "leading-[24px]" : void 0,
+      dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(line) }
+    },
+    i
+  )) });
 }
 var STooltip = forwardRef(function STooltip2({
   content,
@@ -4205,7 +4212,7 @@ var STooltip = forwardRef(function STooltip2({
   if (disabled || body == null) return /* @__PURE__ */ jsx(Fragment, { children: triggerNode });
   const isHover = trigger === "hover";
   const contentClass = cn(
-    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px]",
+    "z-50 w-fit whitespace-nowrap rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px]",
     FLOATING_SLIDE_ANIM,
     className
   );
@@ -5160,6 +5167,9 @@ var SGnb = forwardRef(function SGnb2({
   onFoldChange,
   onLauncherClick,
   logo,
+  railFooter,
+  menuFooter,
+  foldedFooter,
   ariaLabel = "global navigation",
   className,
   style,
@@ -5313,7 +5323,7 @@ var SGnb = forwardRef(function SGnb2({
                   className: "shrink-0"
                 }
               ),
-              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap flex flex-no-wrap items-center", children: [
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap flex items-center", children: [
                 depth > 1 && iconBranch ? /* @__PURE__ */ jsx(
                   "div",
                   {
@@ -5524,42 +5534,77 @@ var SGnb = forwardRef(function SGnb2({
               transition: `transform ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(folded)}`
             },
             children: [
-              useRail && // 레일도 내비게이션 landmark — nav 로 세워야 aria-label(레일)이 스크린리더에 노출된다
-              // (role 없는 ul 의 aria-label 은 영역명으로 읽히지 않는다). 메뉴 nav 와는 레이블로 구분된다.
-              /* @__PURE__ */ jsx(
-                "nav",
+              useRail && // 레일 컬럼 — 스크롤되는 아이템 목록(nav)과 하단 고정 footer 를 한 컬럼에 담는다.
+              // footer 는 내비게이션이 아니므로 nav(landmark) 밖에 두고, 컬럼 폭·구분선·배경은 이 래퍼가
+              // 전체 높이에 걸쳐 책임진다(그래야 footer 자리까지 배경·오른쪽 선이 이어진다).
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  "aria-label": `${ariaLabel} rail`,
-                  className: "flex shrink-0 flex-col overflow-y-auto",
+                  className: "flex shrink-0 flex-col overflow-hidden",
                   style: {
                     width: GNB_RAIL_WIDTH,
-                    padding: GNB_RAIL.padding,
                     borderRight: `1px solid ${C.topBorder}`,
                     backgroundColor: C.panelBg,
                     pointerEvents: "auto"
                   },
-                  children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", style: { gap: GNB_RAIL.gap }, children: railItems.map(renderRailItem) })
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "nav",
+                      {
+                        "aria-label": `${ariaLabel} rail`,
+                        className: cn(
+                          "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto",
+                          SCROLLBAR_CLASS
+                        ),
+                        style: { padding: GNB_RAIL.padding },
+                        children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", style: { gap: GNB_RAIL.gap }, children: railItems.map(renderRailItem) })
+                      }
+                    ),
+                    railFooter && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: railFooter })
+                  ]
                 }
               ),
-              showMenu && /* @__PURE__ */ jsx(
-                "nav",
+              showMenu && /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  "aria-label": ariaLabel,
-                  className: "flex shrink-0 flex-col overflow-y-auto",
+                  className: "flex shrink-0 flex-col overflow-hidden",
                   style: {
                     width: GNB_MENU_WIDTH,
-                    paddingTop: M.bodyPaddingY,
-                    paddingBottom: M.bodyPaddingY,
                     backgroundColor: C.panelBg,
                     // full 은 상단바가 전폭이라 루트가 오른쪽 선을 못 그린다 → 메뉴 오른쪽(페이지 경계)이 대신 그린다.
                     borderRight: header === "full" ? rightBorder : void 0,
                     pointerEvents: "auto"
                   },
-                  children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item) => renderItem(item, 1)) })
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "nav",
+                      {
+                        "aria-label": ariaLabel,
+                        className: cn(
+                          "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto",
+                          SCROLLBAR_CLASS
+                        ),
+                        style: {
+                          paddingTop: M.bodyPaddingY,
+                          paddingBottom: M.bodyPaddingY
+                        },
+                        children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item) => renderItem(item, 1)) })
+                      }
+                    ),
+                    menuFooter && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: menuFooter })
+                  ]
                 }
               )
             ]
           }
+        ),
+        railFolded && foldedFooter && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex shrink-0 items-center justify-center mb-[24px]",
+            style: { pointerEvents: "auto" },
+            children: foldedFooter
+          }
         )
       ]
     }
@@ -6288,6 +6333,16 @@ function flattenOptions(options, depth = 1) {
   return out;
 }
 var selectableOptions = (flat) => flat.filter((o) => !o.isGroup && !o.disabled);
+function collectGroupLeafValues(flat, groupIndex) {
+  const group = flat[groupIndex];
+  if (group == null || !group.isGroup) return [];
+  const values = [];
+  for (let i = groupIndex + 1; i < flat.length; i++) {
+    if (flat[i].depth <= group.depth) break;
+    if (!flat[i].isGroup && !flat[i].disabled) values.push(flat[i].value);
+  }
+  return values;
+}
 var isHtmlLabel = (label) => /<[a-z][\s\S]*>/i.test(label);
 var extractText = (html) => html.replace(/<[^>]*>/g, "");
 var SEARCH_THRESHOLD = 11;
@@ -6413,16 +6468,31 @@ var SSelect = forwardRef(function SSelect2({
   const allValues = selectable.map((o) => o.value);
   const allSelected = allValues.length > 0 && allValues.every((v) => selected.includes(v));
   const hasItems = filtered.some((o) => !o.isGroup);
+  const groupLeafValues = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    filtered.forEach((o, i) => {
+      if (o.isGroup) map.set(i, collectGroupLeafValues(filtered, i));
+    });
+    return map;
+  }, [filtered]);
   const navigableItems = useMemo(() => {
     const items = [];
     if (multi && useSelectAll && allValues.length > 0) {
-      items.push({ value: "__select_all__", isSelectAll: true });
+      items.push({ key: "__select_all__", isSelectAll: true });
     }
-    filtered.forEach((o) => {
-      if (!o.isGroup && !o.disabled) items.push({ value: o.value });
+    filtered.forEach((o, i) => {
+      if (o.disabled) return;
+      if (o.isGroup) {
+        if (!multi) return;
+        const leafValues = groupLeafValues.get(i) ?? [];
+        if (leafValues.length === 0) return;
+        items.push({ key: `__group_${i}__`, isGroup: true, leafValues });
+      } else {
+        items.push({ key: o.value, value: o.value });
+      }
     });
     return items;
-  }, [allValues.length, filtered, multi, useSelectAll]);
+  }, [allValues.length, filtered, groupLeafValues, multi, useSelectAll]);
   const triggerText = (() => {
     if (selected.length === 0) return placeholder;
     if (multi) {
@@ -6444,6 +6514,17 @@ var SSelect = forwardRef(function SSelect2({
   const handleSelectAll = () => {
     emit2(allSelected ? [] : allValues);
   };
+  const handleToggleGroup = (leafValues) => {
+    if (leafValues.length === 0) return;
+    const selectedSet = new Set(selected);
+    const allSelectedInGroup = leafValues.every((v) => selectedSet.has(v));
+    if (allSelectedInGroup) {
+      const remove = new Set(leafValues);
+      emit2(selected.filter((v) => !remove.has(v)));
+    } else {
+      emit2([...selected, ...leafValues.filter((v) => !selectedSet.has(v))]);
+    }
+  };
   useEffect(() => {
     if (!open) {
       setFocusedIndex(-1);
@@ -6484,6 +6565,10 @@ var SSelect = forwardRef(function SSelect2({
       handleSelectAll();
       return;
     }
+    if (focused.isGroup) {
+      handleToggleGroup(focused.leafValues ?? []);
+      return;
+    }
     handleSelect(focused.value);
   };
   const handleKeyDown = (event) => {
@@ -6647,20 +6732,20 @@ var SSelect = forwardRef(function SSelect2({
                       items: filtered,
                       multi,
                       selected,
-                      focusedValue: navigableItems[focusedIndex]?.isSelectAll ? "__select_all__" : navigableItems[focusedIndex]?.value,
+                      groupLeafValues,
+                      focusedValue: navigableItems[focusedIndex]?.key,
                       showSelectAll: multi && useSelectAll && allValues.length > 0,
                       selectAllLabel: allSelectedLabel,
                       selectAllSelected: allSelected,
                       onSelectAll: handleSelectAll,
                       onSelect: handleSelect,
-                      onHoverValue: (value2) => {
-                        if (value2 == null) {
+                      onToggleGroup: handleToggleGroup,
+                      onHoverValue: (key) => {
+                        if (key == null) {
                           setFocusedIndex(-1);
                           return;
                         }
-                        const index = navigableItems.findIndex(
-                          (item) => item.isSelectAll ? value2 === "__select_all__" : item.value === value2
-                        );
+                        const index = navigableItems.findIndex((item) => item.key === key);
                         if (index >= 0) setFocusedIndex(index);
                       }
                     }
@@ -6679,20 +6764,23 @@ function ItemList({
   items,
   multi,
   selected,
+  groupLeafValues,
   focusedValue,
   showSelectAll,
   selectAllLabel,
   selectAllSelected,
   onSelectAll,
   onSelect,
+  onToggleGroup,
   onHoverValue
 }) {
+  const selectedSet = useMemo(() => new Set(selected), [selected]);
   const itemBase = cn(
     "group flex w-full cursor-pointer select-none items-center gap-[8px] border-none bg-transparent text-left text-[12px] leading-[20px] outline-none",
     "text-[color:var(--cmp-listItem-content-default)]",
     "disabled:cursor-not-allowed disabled:text-[color:var(--cmp-listItem-content-disabled)]"
   );
-  const activeClass = "hover:bg-[var(--cmp-listItem-bg-hover)] hover:text-[color:var(--cmp-listItem-content-hover)] focus:bg-[var(--cmp-listItem-bg-hover)] focus:text-[color:var(--cmp-listItem-content-hover)]";
+  const activeClass = "hover:bg-[var(--cmp-listItem-bg-hover)] hover:text-[color:var(--cmp-listItem-content-hover)] focus-visible:bg-[var(--cmp-listItem-bg-hover)] focus-visible:text-[color:var(--cmp-listItem-content-hover)]";
   return /* @__PURE__ */ jsxs("div", { role: "listbox", "aria-multiselectable": multi || void 0, children: [
     showSelectAll && /* @__PURE__ */ jsxs(
       "button",
@@ -6709,23 +6797,7 @@ function ItemList({
         onMouseLeave: () => onHoverValue(null),
         onClick: onSelectAll,
         children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
-                selectAllSelected ? focusedValue === "__select_all__" ? "border-[color:var(--cmp-checkbox-checked-border-inverse)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-[var(--cmp-checkbox-unchecked-bg-default)]"
-              ),
-              children: selectAllSelected && /* @__PURE__ */ jsx(
-                SIcon,
-                {
-                  name: "checkboxCheck",
-                  size: 12,
-                  color: "var(--cmp-checkbox-checked-icon-default)"
-                }
-              )
-            }
-          ),
+          /* @__PURE__ */ jsx(CheckboxBox, { state: selectAllSelected, focused: focusedValue === "__select_all__" }),
           /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: selectAllLabel })
         ]
       }
@@ -6735,12 +6807,71 @@ function ItemList({
       const rowKey = `${o.value}-${idx}`;
       if (o.isGroup) {
         const isDepth1 = o.depth === 1;
+        const groupTone = isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium";
+        if (multi) {
+          const leafValues = groupLeafValues.get(idx) ?? [];
+          const total = leafValues.length;
+          const selectedCount = leafValues.reduce((n, v) => selectedSet.has(v) ? n + 1 : n, 0);
+          const groupState = total === 0 || selectedCount === 0 ? false : selectedCount === total ? true : null;
+          const groupDisabled = o.disabled || total === 0;
+          const groupFocused = focusedValue === `__group_${idx}__`;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": groupState === true,
+              disabled: groupDisabled,
+              "data-select-focused": groupFocused ? "true" : void 0,
+              "data-select-active": groupFocused ? "true" : void 0,
+              className: cn(
+                "flex w-full select-none items-center gap-[8px] border-none py-[4px] pr-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
+                groupTone,
+                groupDisabled ? "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]" : "cursor-pointer",
+                groupDisabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]",
+                // 포커스 하이라이트는 depth 배경보다 뒤에 둬 tailwind-merge 로 이기게 한다.
+                groupFocused && !groupDisabled && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]"
+              ),
+              style: { paddingLeft: padLeft },
+              onMouseEnter: () => onHoverValue(`__group_${idx}__`),
+              onMouseLeave: () => onHoverValue(null),
+              onClick: () => onToggleGroup(leafValues),
+              children: [
+                /* @__PURE__ */ jsx(CheckboxBox, { state: groupState, disabled: groupDisabled, focused: groupFocused }),
+                isHtmlLabel(o.label) ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "min-w-0 truncate",
+                    dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(o.label) }
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: o.label }),
+                total > 0 && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "shrink-0 font-medium",
+                      groupFocused ? "text-white" : "text-[color:var(--cmp-listItem-content-disabled)]"
+                    ),
+                    children: [
+                      "(",
+                      selectedCount,
+                      "/",
+                      total,
+                      ")"
+                    ]
+                  }
+                )
+              ]
+            },
+            rowKey
+          );
+        }
         return /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
               "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
-              isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium",
+              groupTone,
               // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
               // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
               o.disabled && "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]",
@@ -6776,25 +6907,11 @@ function ItemList({
           onClick: () => onSelect(o.value),
           children: [
             multi && /* @__PURE__ */ jsx(
-              "span",
+              CheckboxBox,
               {
-                className: cn(
-                  "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
-                  o.disabled ? (
-                    // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
-                    "cursor-not-allowed border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
-                  ) : cn(
-                    isSelected ? focusedValue === o.value ? "border-[color:var(--cmp-checkbox-checked-border-inverse)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-[var(--cmp-checkbox-unchecked-bg-default)]"
-                  )
-                ),
-                children: isSelected && /* @__PURE__ */ jsx(
-                  SIcon,
-                  {
-                    name: "checkboxCheck",
-                    size: 12,
-                    color: o.disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
-                  }
-                )
+                state: isSelected,
+                disabled: o.disabled,
+                focused: focusedValue === o.value
               }
             ),
             isHtmlLabel(o.label) ? /* @__PURE__ */ jsx(
@@ -6811,6 +6928,33 @@ function ItemList({
     })
   ] });
 }
+function CheckboxBox({
+  state: state2,
+  disabled = false,
+  focused = false
+}) {
+  const filled = state2 === true || state2 === null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
+        disabled ? (
+          // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
+          "cursor-not-allowed border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
+        ) : filled ? focused ? "border-[color:var(--cmp-checkbox-checked-border-inverse)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-[var(--cmp-checkbox-unchecked-bg-default)]"
+      ),
+      children: filled && /* @__PURE__ */ jsx(
+        SIcon,
+        {
+          name: state2 === null ? "checkboxIndeterminate" : "checkboxCheck",
+          size: 12,
+          color: disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
+        }
+      )
+    }
+  );
+}
 var DEFAULT_ROW_HEIGHT = 44;
 var DENSE_ROW_HEIGHT = 32;
 var SELECTABLE_COLUMN_WIDTH = 48;