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

package/dist/components/SSelect/README.md

@@ -13,7 +13,7 @@
 | `name?` | `string` | — | 폼 연동용 name 속성 |
 | `options?` | `SSelectOption[]` | `[]` | 옵션 목록 (children으로 계층 표현) |
 | `type?` | `SSelectType` | `'default'` | 타입: default | multi | default_depth | multi_depth |
-| `valueDisplay?` | `SSelectValueDisplay` | `'text'` | 트리거에 선택값을 보여주는 방식. - `text`: 선택 라벨을 쉼표로 이어 한 줄로 보여준다. 넘치면 말줄임한다. - `chip`: 선택값마다 칩을 낸다. 칩의 × 를 누르면 그 값만 선택에서 빠지고, 드롭다운은 열리지 않는다. 칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다. `chip` 은 `multi`·`multi_depth` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다. 전체 선택이면 칩 대신 `allSelectedLabel` 을 보여준다. 비활성(select 자체나 해당 옵션)인 칩에는 × 를 내지 않는다. |
+| `valueDisplay?` | `SSelectValueDisplay` | `'text'` | 트리거에 선택값을 보여주는 방식. - `text`: 선택 라벨을 쉼표로 이어 한 줄로 보여준다. 넘치면 말줄임한다. - `chip`: 선택값마다 칩을 낸다. 칩의 × 를 누르면 그 값만 선택에서 빠지고, 드롭다운은 열리지 않는다. 칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다. `chip` 은 `multi`·`multi_depth` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다. 전체 선택이면 칩 대신 `allSelectedLabel` 을 보여준다. `multi_depth` 에서 그룹의 하위 리프를 전부 고르면 리프 칩 대신 그룹명 칩 하나로 묶고, 그 칩의 × 는 그룹의 리프를 한꺼번에 뺀다. 비활성(select 자체나 해당 옵션)인 칩에는 × 를 내지 않는다. |
 | `showSearch?` | `boolean` | `false` | 검색 입력 사용 |
 | `showSelectAll?` | `boolean` | `false` | 전체선택 옵션 사용 (multi 전용) |
 | `allSelectedLabel?` | `string` | `'전체'` | 전체선택 레이블 |

package/dist/components/SSelect/SSelect.d.ts

@@ -52,6 +52,8 @@ export interface SSelectProps<TValue extends SSelectChangeValue = SSelectChangeV
      *
      * `chip` 은 `multi`·`multi_depth` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다.
      * 전체 선택이면 칩 대신 `allSelectedLabel` 을 보여준다.
+     * `multi_depth` 에서 그룹의 하위 리프를 전부 고르면 리프 칩 대신 그룹명 칩 하나로 묶고,
+     * 그 칩의 × 는 그룹의 리프를 한꺼번에 뺀다.
      * 비활성(select 자체나 해당 옵션)인 칩에는 × 를 내지 않는다.
      */
     valueDisplay?: SSelectValueDisplay;

package/dist/index.cjs

@@ -15958,11 +15958,46 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     () => new Set(flat.filter((o) => !o.isGroup && o.disabled).map((o) => o.value)),
     [flat]
   );
-  const chips = showChips ? selected.map((v) => ({
-    value: v,
-    label: labelByValue.get(v) ?? valueOptions.get(v)?.label ?? v,
-    removable: !effectiveDisabled && !disabledValues.has(v)
-  })) : [];
+  const fullGroupByLeaf = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (!showChips || type !== "multi_depth") return map;
+    flat.forEach((o, i) => {
+      if (!o.isGroup) return;
+      const leafValues = collectGroupLeafValues(flat, i);
+      if (leafValues.length === 0 || leafValues.some((v) => !selectedSet.has(v))) return;
+      if (map.has(leafValues[0])) return;
+      const group = { value: o.value, label: o.label, leafValues };
+      for (let j = i + 1; j < flat.length && flat[j].depth > o.depth; j++) {
+        if (!flat[j].isGroup && selectedSet.has(flat[j].value)) map.set(flat[j].value, group);
+      }
+    });
+    return map;
+  }, [flat, selectedSet, showChips, type]);
+  const chips = [];
+  if (showChips) {
+    const placedGroups = /* @__PURE__ */ new Set();
+    for (const v of selected) {
+      const group = fullGroupByLeaf.get(v);
+      if (group != null) {
+        if (placedGroups.has(group.value)) continue;
+        placedGroups.add(group.value);
+        chips.push({
+          // 그룹 value 와 리프 value 가 겹쳐도 key 가 부딪히지 않게 구분한다.
+          key: `__group_${group.value}__`,
+          label: group.label,
+          values: group.leafValues,
+          removable: !effectiveDisabled
+        });
+        continue;
+      }
+      chips.push({
+        key: v,
+        label: labelByValue.get(v) ?? valueOptions.get(v)?.label ?? v,
+        values: [v],
+        removable: !effectiveDisabled && !disabledValues.has(v)
+      });
+    }
+  }
   const isPlaceholder = selected.length === 0;
   const showTriggerSpinner = loading2 && !effectiveDisabled;
   const showClear = clearable && !effectiveDisabled && !isPlaceholder;
@@ -15970,8 +16005,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     emit3([]);
     if (rules && rules.length > 0) setRuleError(runRules(multi ? [] : "", rules));
   };
-  const handleRemoveChip = (target) => {
-    const next = selected.filter((v) => v !== target);
+  const handleRemoveChip = (targets) => {
+    const remove = new Set(targets);
+    const next = selected.filter((v) => !remove.has(v));
     emit3(next);
     if (rules && rules.length > 0) setRuleError(runRules(next, rules));
     triggerRef.current?.focus();
@@ -16191,12 +16227,12 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                             TriggerRemoveButton,
                             {
                               ariaLabel: `${isHtmlLabel(chip.label) ? extractText(chip.label) : chip.label} \uC120\uD0DD \uD574\uC81C`,
-                              onRemove: () => handleRemoveChip(chip.value)
+                              onRemove: () => handleRemoveChip(chip.values)
                             }
                           )
                         ]
                       },
-                      chip.value
+                      chip.key
                     ))
                   }
                 )