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

package/dist/index.js

@@ -10410,6 +10410,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
   allSelectedLabel = "\uC804\uCCB4",
   placeholder = "\uC120\uD0DD",
   disabled = false,
+  clearable = false,
   error = false,
   rules,
   labelTooltipProps,
@@ -10565,6 +10566,11 @@ var SSelectImpl = /* @__PURE__ */ 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];
@@ -10707,15 +10713,53 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
                   dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(triggerText) }
                 }
               ) : /* @__PURE__ */ jsx("span", { className: "truncate", children: triggerText }),
-              /* @__PURE__ */ 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__ */ jsxs("span", { className: "flex shrink-0 items-center gap-[8px]", children: [
+                showClear && /* @__PURE__ */ 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__ */ 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)" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ 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")
+                  }
+                )
+              ] })
             ]
           }
         ),