sellmate-design-system-react 9.0.0-beta.16 → 9.0.0-beta.17

package/dist/components/SSelect/README.md

@@ -18,6 +18,7 @@
 | `allSelectedLabel?` | `string` | `'전체'` | 전체선택 레이블 |
 | `placeholder?` | `string` | `'선택'` | placeholder |
 | `disabled?` | `boolean` | `false` | 비활성 |
+| `clearable?` | `boolean` | `false` | 선택값 지우기(×) 버튼 노출. 선택값이 있고 비활성이 아닐 때만 나타나며, 누르면 드롭다운을 열지 않고 값만 비운다. |
 | `error?` | `boolean` | `false` | 에러 상태 |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — 닫힐 때 자동 검증 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |

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

@@ -38,6 +38,11 @@ export interface SSelectProps {
     placeholder?: string;
     /** 비활성 */
     disabled?: boolean;
+    /**
+     * 선택값 지우기(×) 버튼 노출. 선택값이 있고 비활성이 아닐 때만 나타나며,
+     * 누르면 드롭다운을 열지 않고 값만 비운다.
+     */
+    clearable?: boolean;
     /** 에러 상태 */
     error?: boolean;
     /** 유효성 규칙 — 닫힐 때 자동 검증 */

package/dist/index.cjs

@@ -10438,6 +10438,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   allSelectedLabel = "\uC804\uCCB4",
   placeholder = "\uC120\uD0DD",
   disabled = false,
+  clearable = false,
   error = false,
   rules,
   labelTooltipProps,
@@ -10593,6 +10594,11 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     return labelByValue.get(selected[0]) ?? selected[0];
   })();
   const isPlaceholder = selected.length === 0;
+  const showClear = clearable && !effectiveDisabled && !isPlaceholder;
+  const handleClear = () => {
+    emit3([]);
+    if (rules && rules.length > 0) setRuleError(runRules(multi ? [] : "", rules));
+  };
   const handleSelect = (nextValue) => {
     if (multi) {
       const next = selected.includes(nextValue) ? selected.filter((v) => v !== nextValue) : [...selected, nextValue];
@@ -10735,15 +10741,53 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                   dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(triggerText) }
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: triggerText }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SIcon,
-                {
-                  name: "chevronDown",
-                  size: 12,
-                  color: effectiveDisabled ? "var(--cmp-select-icon-disabled)" : "var(--cmp-select-icon-default)",
-                  className: cn("shrink-0 transition-transform duration-200", open && "rotate-180")
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-[8px]", children: [
+                showClear && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 12, color: "var(--cmp-ghostButton-default-content)" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SIcon,
+                  {
+                    name: "chevronDown",
+                    size: 12,
+                    color: effectiveDisabled ? "var(--cmp-select-icon-disabled)" : "var(--cmp-select-icon-default)",
+                    className: cn("shrink-0 transition-transform duration-200", open && "rotate-180")
+                  }
+                )
+              ] })
             ]
           }
         ),