sellmate-design-system-react 0.8.2 → 0.8.4

package/dist/components/SSelect/SSelect.cjs

@@ -3202,7 +3202,14 @@ function useBody(content, message = []) {
   if (content != null) return content;
   if (message.length === 0) return null;
   const singleLine = message.length === 1;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: singleLine ? "leading-[24px]" : void 0, children: line }, i)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: singleLine ? "leading-[24px]" : void 0,
+      dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(line) }
+    },
+    i
+  )) });
 }
 var STooltip = react.forwardRef(function STooltip2({
   content,
@@ -3260,7 +3267,7 @@ var STooltip = react.forwardRef(function STooltip2({
   if (disabled || body == null) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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
   );
@@ -3611,6 +3618,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;
@@ -3736,16 +3753,31 @@ var SSelect = react.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 = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    filtered.forEach((o, i) => {
+      if (o.isGroup) map.set(i, collectGroupLeafValues(filtered, i));
+    });
+    return map;
+  }, [filtered]);
   const navigableItems = react.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) {
@@ -3767,6 +3799,17 @@ var SSelect = react.forwardRef(function SSelect2({
   const handleSelectAll = () => {
     emit(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);
+      emit(selected.filter((v) => !remove.has(v)));
+    } else {
+      emit([...selected, ...leafValues.filter((v) => !selectedSet.has(v))]);
+    }
+  };
   react.useEffect(() => {
     if (!open) {
       setFocusedIndex(-1);
@@ -3807,6 +3850,10 @@ var SSelect = react.forwardRef(function SSelect2({
       handleSelectAll();
       return;
     }
+    if (focused.isGroup) {
+      handleToggleGroup(focused.leafValues ?? []);
+      return;
+    }
     handleSelect(focused.value);
   };
   const handleKeyDown = (event) => {
@@ -3970,20 +4017,20 @@ var SSelect = react.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);
                       }
                     }
@@ -4002,20 +4049,23 @@ function ItemList({
   items,
   multi,
   selected,
+  groupLeafValues,
   focusedValue,
   showSelectAll,
   selectAllLabel,
   selectAllSelected,
   onSelectAll,
   onSelect,
+  onToggleGroup,
   onHoverValue
 }) {
+  const selectedSet = react.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__ */ jsxRuntime.jsxs("div", { role: "listbox", "aria-multiselectable": multi || void 0, children: [
     showSelectAll && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -4032,37 +4082,81 @@ function ItemList({
         onMouseLeave: () => onHoverValue(null),
         onClick: onSelectAll,
         children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                SIcon,
-                {
-                  name: "checkboxCheck",
-                  size: 12,
-                  color: "var(--cmp-checkbox-checked-icon-default)"
-                }
-              )
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsx(CheckboxBox, { state: selectAllSelected, focused: focusedValue === "__select_all__" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: selectAllLabel })
         ]
       }
     ),
-    items.map((o) => {
+    items.map((o, idx) => {
       const padLeft = o.depth === 1 ? 12 : o.depth === 2 ? 20 : 28;
+      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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CheckboxBox, { state: groupState, disabled: groupDisabled, focused: groupFocused }),
+                isHtmlLabel(o.label) ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "min-w-0 truncate",
+                    dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(o.label) }
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: o.label }),
+                total > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "shrink-0 font-medium",
+                      groupFocused ? "text-white" : "text-[color:var(--cmp-listItem-content-disabled)]"
+                    ),
+                    children: [
+                      "(",
+                      selectedCount,
+                      "/",
+                      total,
+                      ")"
+                    ]
+                  }
+                )
+              ]
+            },
+            rowKey
+          );
+        }
         return /* @__PURE__ */ jsxRuntime.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)]",
@@ -4071,7 +4165,7 @@ function ItemList({
             style: { paddingLeft: padLeft },
             children: o.label
           },
-          o.value
+          rowKey
         );
       }
       const isSelected = selected.includes(o.value);
@@ -4098,25 +4192,11 @@ function ItemList({
           onClick: () => onSelect(o.value),
           children: [
             multi && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -4128,11 +4208,38 @@ function ItemList({
             ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: o.label })
           ]
         },
-        o.value
+        rowKey
       );
     })
   ] });
 }
+function CheckboxBox({
+  state,
+  disabled = false,
+  focused = false
+}) {
+  const filled = state === true || state === null;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        SIcon,
+        {
+          name: state === null ? "checkboxIndeterminate" : "checkboxCheck",
+          size: 12,
+          color: disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
+        }
+      )
+    }
+  );
+}
 
 exports.SSelect = SSelect;
 //# sourceMappingURL=SSelect.cjs.map