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

package/dist/index.js

@@ -15587,6 +15587,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
   name,
   options = [],
   type = "default",
+  valueDisplay = "text",
   showSearch = false,
   showSelectAll = false,
   allSelectedLabel = "\uC804\uCCB4",
@@ -15619,6 +15620,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
   hint,
   errorMessage,
   width,
+  size = "sm",
   className,
   style
 }, ref) {
@@ -15923,6 +15925,16 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
     }
     return labelByValue.get(selected[0]) ?? valueOptions.get(selected[0])?.label ?? selected[0];
   })();
+  const showChips = valueDisplay === "chip" && multi && selected.length > 0 && !allSelected;
+  const disabledValues = useMemo(
+    () => 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 isPlaceholder = selected.length === 0;
   const showTriggerSpinner = loading2 && !effectiveDisabled;
   const showClear = clearable && !effectiveDisabled && !isPlaceholder;
@@ -15930,6 +15942,12 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
     emit3([]);
     if (rules && rules.length > 0) setRuleError(runRules(multi ? [] : "", rules));
   };
+  const handleRemoveChip = (target) => {
+    const next = selected.filter((v) => v !== target);
+    emit3(next);
+    if (rules && rules.length > 0) setRuleError(runRules(next, rules));
+    triggerRef.current?.focus();
+  };
   const handleSelect = (nextValue, index, extend = false) => {
     if (multi) {
       const anchor = rangeAnchorRef.current;
@@ -16085,6 +16103,8 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
       disabled: effectiveDisabled,
       width,
+      size,
+      multiline: showChips,
       className,
       style,
       children: [
@@ -16102,55 +16122,59 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
             "aria-busy": showTriggerSpinner || void 0,
             onClick: () => requestOpen(!open),
             onKeyDown: handleKeyDown,
-            className: "flex h-full w-full cursor-pointer items-center justify-between gap-[8px] bg-transparent px-[12px] text-left text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
+            className: cn(
+              "flex h-full w-full cursor-pointer items-center justify-between bg-transparent text-left outline-none disabled:cursor-not-allowed",
+              size === "md" ? "typo-body-md-default gap-(--cmp-select-md-gap) px-(--cmp-select-md-paddingX)" : "typo-body-sm-default gap-(--cmp-select-sm-gap) px-(--cmp-select-sm-paddingX)"
+            ),
             style: {
+              // 칩 한 줄이 기본 높이 안에서 세로 가운데에 오는 여백. 줄이 늘면 같은 여백을 유지한 채 트리거가 커진다.
+              // sm 칩은 높이가 라벨 줄높이(typo-body-xs-medium)라 남는 높이가 4px 로 떨어진다.
+              paddingBlock: showChips ? size === "md" ? "calc((var(--cmp-select-md-height) - var(--cmp-select-md-borderWidth) * 2 - var(--cmp-chip-height)) / 2)" : "var(--spacing-sd-4)" : void 0,
               color: effectiveDisabled ? "var(--cmp-select-text-disabled)" : isPlaceholder ? "var(--cmp-select-icon-default)" : "var(--cmp-select-text-default)"
             },
             children: [
-              isHtmlLabel(triggerText) ? /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "truncate",
-                  dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(triggerText) }
-                }
-              ) : /* @__PURE__ */ jsx("span", { className: "truncate", children: triggerText }),
-              /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-[8px]", children: [
-                showClear && /* @__PURE__ */ jsxs(
+              showChips ? (
+                // md 는 SChip 과 같은 모양(높이 --cmp-chip-height)이다. SChip 을 그대로 넣지 않는 것은
+                // SChip 의 × 가 <button> 이라 트리거 button 안에 중첩할 수 없어서다 — 모양만 같은 토큰으로 맞춘다.
+                // sm 은 28px 트리거에 들어가도록 낮춘 칩 — 높이를 주지 않고 라벨 줄높이(typo-body-xs-medium)가 정한다.
+                // 두 크기 모두 패딩·라벨↔× 간격은 chip 토큰 그대로.
+                /* @__PURE__ */ jsx(
                   "span",
                   {
-                    role: "button",
-                    tabIndex: 0,
-                    "aria-label": "\uC120\uD0DD \uC9C0\uC6B0\uAE30",
-                    className: "group/select-clear relative inline-flex shrink-0 cursor-pointer items-center justify-center",
-                    style: {
-                      width: "var(--cmp-ghostButton-xxs-size)",
-                      height: "var(--cmp-ghostButton-xxs-size)",
-                      borderRadius: "var(--cmp-ghostButton-radius-sm)"
-                    },
-                    onClick: (event) => {
-                      event.preventDefault();
-                      event.stopPropagation();
-                      handleClear();
-                    },
-                    onKeyDown: (event) => {
-                      if (event.key !== "Enter" && event.key !== " ") return;
-                      event.preventDefault();
-                      event.stopPropagation();
-                      handleClear();
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          "aria-hidden": true,
-                          className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover/select-clear:opacity-5",
-                          style: { background: "var(--cmp-ghostButton-default-hover-bg)" }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
-                    ]
+                    className: cn(
+                      "flex min-w-0 flex-1 flex-wrap items-center",
+                      size === "md" ? "gap-(--cmp-chipInput-chip-gap)" : "gap-sd-6"
+                    ),
+                    children: chips.map((chip) => /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "box-border inline-flex min-w-0 max-w-full items-center gap-(--cmp-chip-gap) overflow-hidden whitespace-nowrap px-(--cmp-chip-paddingX)",
+                          size === "md" ? "h-(--cmp-chip-height) text-[12px] font-medium leading-[20px]" : "typo-body-xs-medium"
+                        ),
+                        style: {
+                          borderRadius: "var(--cmp-chip-radius)",
+                          background: chip.removable ? "var(--cmp-chip-bg-default)" : "var(--cmp-chip-bg-disabled)",
+                          color: chip.removable ? "var(--cmp-chip-content-default)" : "var(--cmp-chip-content-disabled)"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(TriggerLabel, { label: chip.label }),
+                          chip.removable && /* @__PURE__ */ jsx(
+                            TriggerRemoveButton,
+                            {
+                              ariaLabel: `${isHtmlLabel(chip.label) ? extractText(chip.label) : chip.label} \uC120\uD0DD \uD574\uC81C`,
+                              onRemove: () => handleRemoveChip(chip.value)
+                            }
+                          )
+                        ]
+                      },
+                      chip.value
+                    ))
                   }
-                ),
+                )
+              ) : /* @__PURE__ */ jsx(TriggerLabel, { label: triggerText }),
+              /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-[8px]", children: [
+                showClear && /* @__PURE__ */ jsx(TriggerRemoveButton, { ariaLabel: "\uC120\uD0DD \uC9C0\uC6B0\uAE30", onRemove: handleClear }),
                 showTriggerSpinner ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0", "data-select-trigger-spinner": true, children: /* @__PURE__ */ jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: 12 }) }) : /* @__PURE__ */ jsx(
                   SIcon,
                   {
@@ -16482,6 +16506,47 @@ function ItemList({
     bottomSpacer > 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": true, style: { height: bottomSpacer } })
   ] });
 }
+function TriggerLabel({ label }) {
+  return isHtmlLabel(label) ? /* @__PURE__ */ jsx("span", { className: "truncate", dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(label) } }) : /* @__PURE__ */ jsx("span", { className: "truncate", children: label });
+}
+function TriggerRemoveButton({ ariaLabel, onRemove }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": ariaLabel,
+      className: "group/select-remove relative inline-flex shrink-0 cursor-pointer items-center justify-center",
+      style: {
+        width: "var(--cmp-ghostButton-xxs-size)",
+        height: "var(--cmp-ghostButton-xxs-size)",
+        borderRadius: "var(--cmp-ghostButton-radius-sm)"
+      },
+      onClick: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onRemove();
+      },
+      onKeyDown: (event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        event.stopPropagation();
+        onRemove();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-200 group-hover/select-remove:opacity-5",
+            style: { background: "var(--cmp-ghostButton-default-hover-bg)" }
+          }
+        ),
+        /* @__PURE__ */ jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+      ]
+    }
+  );
+}
 function CheckboxBox({
   state: state2,
   disabled = false,
@@ -22545,71 +22610,76 @@ function SRadioButton({
 }) {
   const s = SIZE_CONFIG2[size];
   const [hoveredValue, setHoveredValue] = useState(null);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "radiogroup",
-      "aria-disabled": disabled,
-      className: cn("inline-flex", className),
-      style,
-      children: options.map((o, i) => {
-        const selected = o.value === value;
-        const od = disabled || o.disabled;
-        const first = i === 0;
-        const last = i === options.length - 1;
-        const tooltip = showTooltip && o.tooltip ? o.tooltip : void 0;
-        const button = /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            role: "radio",
-            name,
-            "aria-checked": selected,
-            disabled: od,
-            onClick: () => !od && !selected && onValueChange?.(o.value),
-            onMouseEnter: tooltip ? () => setHoveredValue(o.value) : void 0,
-            onMouseLeave: tooltip ? () => setHoveredValue(null) : void 0,
-            onFocus: tooltip ? () => setHoveredValue(o.value) : void 0,
-            onBlur: tooltip ? () => setHoveredValue(null) : void 0,
-            className: cn(
-              "relative box-border grow inline-flex items-center justify-center whitespace-nowrap border border-solid font-medium transition-colors",
-              first ? "" : "-ml-px",
-              selected ? "z-10" : "",
-              !od && !selected && "hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10",
-              od ? "cursor-not-allowed" : "cursor-pointer"
-            ),
-            style: {
-              height: `var(--cmp-radioButton-${size}-height)`,
-              padding: `0 var(--cmp-radioButton-${size}-paddingX)`,
-              fontSize: `${s.fontSize}px`,
-              lineHeight: `${s.lineHeight}px`,
-              borderRadius: [
-                first ? s.radius : "0",
-                last ? s.radius : "0",
-                last ? s.radius : "0",
-                first ? s.radius : "0"
-              ].join(" "),
-              background: od ? "var(--cmp-radioButton-bg-disabled)" : "var(--cmp-radioButton-bg-default)",
-              borderColor: od ? "var(--cmp-radioButton-border-disabled)" : selected ? "var(--cmp-radioButton-border-select)" : "var(--cmp-radioButton-border-default)",
-              color: od ? "var(--cmp-radioButton-content-disabled)" : selected ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"
+  return (
+    // isolate: 선택·hover 버튼의 z-10 은 겹친 테두리(-ml-px) 위로 올리기 위한 값이라 그룹 안에서
+    // 끝나야 한다. 빼면 상위 컨텍스트까지 올라가 모달 안 floating 밴드(z-2)를 이겨, 위에서 연
+    // SSelect listbox 위로 선택된 버튼만 뚫고 그려진다.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-disabled": disabled,
+        className: cn("inline-flex isolate", className),
+        style,
+        children: options.map((o, i) => {
+          const selected = o.value === value;
+          const od = disabled || o.disabled;
+          const first = i === 0;
+          const last = i === options.length - 1;
+          const tooltip = showTooltip && o.tooltip ? o.tooltip : void 0;
+          const button = /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              name,
+              "aria-checked": selected,
+              disabled: od,
+              onClick: () => !od && !selected && onValueChange?.(o.value),
+              onMouseEnter: tooltip ? () => setHoveredValue(o.value) : void 0,
+              onMouseLeave: tooltip ? () => setHoveredValue(null) : void 0,
+              onFocus: tooltip ? () => setHoveredValue(o.value) : void 0,
+              onBlur: tooltip ? () => setHoveredValue(null) : void 0,
+              className: cn(
+                "relative box-border grow inline-flex items-center justify-center whitespace-nowrap border border-solid font-medium transition-colors",
+                first ? "" : "-ml-px",
+                selected ? "z-10" : "",
+                !od && !selected && "hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10",
+                od ? "cursor-not-allowed" : "cursor-pointer"
+              ),
+              style: {
+                height: `var(--cmp-radioButton-${size}-height)`,
+                padding: `0 var(--cmp-radioButton-${size}-paddingX)`,
+                fontSize: `${s.fontSize}px`,
+                lineHeight: `${s.lineHeight}px`,
+                borderRadius: [
+                  first ? s.radius : "0",
+                  last ? s.radius : "0",
+                  last ? s.radius : "0",
+                  first ? s.radius : "0"
+                ].join(" "),
+                background: od ? "var(--cmp-radioButton-bg-disabled)" : "var(--cmp-radioButton-bg-default)",
+                borderColor: od ? "var(--cmp-radioButton-border-disabled)" : selected ? "var(--cmp-radioButton-border-select)" : "var(--cmp-radioButton-border-default)",
+                color: od ? "var(--cmp-radioButton-content-disabled)" : selected ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"
+              },
+              children: o.label
             },
-            children: o.label
-          },
-          o.value
-        );
-        return tooltip ? /* @__PURE__ */ jsx(
-          STooltip2,
-          {
-            trigger: "none",
-            open: hoveredValue === o.value,
-            tooltipType: "accent",
-            message: [tooltip],
-            children: button
-          },
-          o.value
-        ) : button;
-      })
-    }
+            o.value
+          );
+          return tooltip ? /* @__PURE__ */ jsx(
+            STooltip2,
+            {
+              trigger: "none",
+              open: hoveredValue === o.value,
+              tooltipType: "accent",
+              message: [tooltip],
+              children: button
+            },
+            o.value
+          ) : button;
+        })
+      }
+    )
   );
 }
 function SRadioCard({