sellmate-design-system-react 2.1.0 → 2.1.2

package/dist/components/SSelect/SSelect.js

@@ -3679,7 +3679,7 @@ var SSelect = forwardRef(function SSelect2({
     );
     onValueChange(multi ? mapped : mapped[0] ?? (emitValue ? "" : null));
   };
-  const commitOpen = (next) => {
+  const commitOpen = (next, valueForRules) => {
     setOpen(next);
     onOpenChange?.(next);
     if (next) {
@@ -3688,7 +3688,8 @@ var SSelect = forwardRef(function SSelect2({
       setPendingOpen(false);
       setSearch("");
       if (rules && rules.length > 0) {
-        setRuleError(runRules(multi ? selectedRef.current : selectedRef.current[0] ?? "", rules));
+        const current = valueForRules ?? selectedRef.current;
+        setRuleError(runRules(multi ? current : current[0] ?? "", rules));
       }
     }
   };
@@ -3772,7 +3773,7 @@ var SSelect = forwardRef(function SSelect2({
       return;
     }
     emit([nextValue]);
-    commitOpen(false);
+    commitOpen(false, [nextValue]);
   };
   const handleSelectAll = () => {
     emit(allSelected ? [] : allValues);
@@ -4012,7 +4013,7 @@ var SSelect = forwardRef(function SSelect2({
                         if (index >= 0) setFocusedIndex(index);
                       }
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                  ) : /* @__PURE__ */ jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
                 ]
               }
             )
@@ -4040,10 +4041,10 @@ function ItemList({
   const selectedSet = useMemo(() => new Set(selected), [selected]);
   const itemBase = cn(
     "group/select-item 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)]"
+    "text-[color:var(--cmp-listBoxItem-content-default)]",
+    "disabled:cursor-not-allowed disabled:text-[color:var(--cmp-listBoxItem-content-disabled)]"
   );
-  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)]";
+  const activeClass = "hover:bg-[var(--cmp-listBoxItem-bg-hover)] hover:text-[color:var(--cmp-listBoxItem-content-hover)] focus-visible:bg-[var(--cmp-listBoxItem-bg-hover)] focus-visible:text-[color:var(--cmp-listBoxItem-content-hover)]";
   return /* @__PURE__ */ jsxs("div", { role: "listbox", "aria-multiselectable": multi || void 0, children: [
     showSelectAll && /* @__PURE__ */ jsxs(
       "button",
@@ -4053,7 +4054,7 @@ function ItemList({
         "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
         className: cn(
           itemBase,
-          focusedValue === "__select_all__" && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]"
+          focusedValue === "__select_all__" && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
         ),
         style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: 12 },
         onMouseEnter: () => onHoverValue("__select_all__"),
@@ -4070,7 +4071,7 @@ function ItemList({
       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";
+        const groupTone = isDepth1 ? "border-t border-solid border-[color:var(--cmp-listBoxItem-depth1-border-color)] bg-[var(--cmp-listBoxItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listBoxItem-depth2-middle-bg)] font-medium";
         if (multi) {
           const leafValues = groupLeafValues.get(idx) ?? [];
           const total = leafValues.length;
@@ -4088,12 +4089,12 @@ function ItemList({
               "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)]",
+                "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-listBoxItem-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)]",
+                groupDisabled ? "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]" : "cursor-pointer",
+                groupDisabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]",
                 // 포커스 하이라이트는 depth 배경보다 뒤에 둬 tailwind-merge 로 이기게 한다.
-                groupFocused && !groupDisabled && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]"
+                groupFocused && !groupDisabled && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]"
               ),
               style: { paddingLeft: padLeft },
               onMouseEnter: () => onHoverValue(`__group_${idx}__`),
@@ -4113,7 +4114,7 @@ function ItemList({
                   {
                     className: cn(
                       "shrink-0 font-medium",
-                      groupFocused ? "text-white" : "text-[color:var(--cmp-listItem-content-disabled)]"
+                      groupFocused ? "text-white" : "text-[color:var(--cmp-listBoxItem-content-disabled)]"
                     ),
                     children: [
                       "(",
@@ -4133,12 +4134,12 @@ function ItemList({
           "div",
           {
             className: cn(
-              "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
+              "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-default)]",
               groupTone,
               // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
               // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
-              o.disabled && "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]",
-              o.disabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]"
+              o.disabled && "cursor-not-allowed text-[color:var(--cmp-listBoxItem-content-disabled)]",
+              o.disabled && isDepth1 && "bg-[var(--cmp-listBoxItem-depth1-bg-disabled)]"
             ),
             style: { paddingLeft: padLeft },
             children: o.label
@@ -4158,8 +4159,8 @@ function ItemList({
           "data-select-active": focusedValue === o.value ? "true" : void 0,
           className: cn(
             itemBase,
-            isSelected && !multi && "font-bold text-[color:var(--cmp-listItem-content-selected)]",
-            focusedValue === o.value && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]",
+            isSelected && !multi && "font-bold text-[color:var(--cmp-listBoxItem-content-selected)]",
+            focusedValue === o.value && "bg-[var(--cmp-listBoxItem-bg-hover)] text-[color:var(--cmp-listBoxItem-content-hover)]",
             // 비활성 항목은 hover/focus 스타일 대상에서 제외한다.
             // (:hover 는 disabled 버튼에도 매칭되므로 클래스 자체를 붙이지 않아야 한다)
             !o.disabled && activeClass