sellmate-design-system-react 0.1.8 → 0.1.10

package/dist/components/SSelect/SSelect.js

@@ -3068,7 +3068,8 @@ var HIDE_DELAY_MS = 100;
 function useBody(content, message = []) {
   if (content != null) return content;
   if (message.length === 0) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsx("div", { children: line }, i)) });
+  const singleLine = message.length === 1;
+  return /* @__PURE__ */ jsx(Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsx("div", { className: singleLine ? "leading-[24px]" : void 0, children: line }, i)) });
 }
 var STooltip = forwardRef(function STooltip2({
   content,
@@ -3171,11 +3172,17 @@ var STooltip = forwardRef(function STooltip2({
           /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[12px]", children: [
             /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: body }),
             useClose && /* @__PURE__ */ jsx(
-              RPopover2.Close,
+              SGhostButton,
               {
-                "aria-label": "\uB2EB\uAE30",
-                className: "shrink-0 cursor-pointer opacity-70 hover:opacity-100",
-                children: /* @__PURE__ */ jsx(SIcon, { name: "close", size: 16, color: fg })
+                icon: "close",
+                size: "xs",
+                intent: tooltipType === "default" ? "inverse" : "default",
+                ariaLabel: "\uB2EB\uAE30",
+                className: "shrink-0",
+                onClick: () => {
+                  cancelHide();
+                  setOpen(false);
+                }
               }
             )
           ] }),
@@ -3213,8 +3220,8 @@ function useFormField(field) {
   }, [ctx, name]);
 }
 var FIELD_SIZE = {
-  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 12 },
-  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 12 }
+  sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 16 },
+  md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 16 }
 };
 var ALIGN = {
   start: "flex-start",
@@ -3229,6 +3236,7 @@ var SField = forwardRef(function SField2({
   labelTooltip = "",
   labelTooltipProps,
   labelWidth,
+  labelHeight,
   size = "sm",
   addonLabel = "",
   addonAlign = "start",
@@ -3243,6 +3251,7 @@ var SField = forwardRef(function SField2({
   readOnly = false,
   width,
   multiline = false,
+  borderless = false,
   children,
   className,
   style,
@@ -3276,8 +3285,8 @@ var SField = forwardRef(function SField2({
   const resolvedSuccess = status === "pass";
   const showError = resolvedError && errorMessage !== "";
   const interactive = !disabled && !readOnly;
-  const borderColor = disabled ? "var(--color-grey-45)" : interactive && focused ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)";
-  const bgColor = disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
+  const borderColor = borderless ? "transparent" : disabled ? "var(--color-grey-45)" : interactive && focused ? "var(--sys-color-field-border-focus)" : resolvedSuccess ? "var(--sys-color-field-border-success)" : resolvedError ? "var(--sys-color-field-border-danger)" : "var(--sys-color-field-border-default)";
+  const bgColor = borderless ? "transparent" : disabled ? "var(--color-grey-30)" : readOnly ? "var(--sys-color-field-bg-readOnly)" : "var(--sys-color-field-bg-default)";
   const textColor = disabled ? "var(--color-grey-65)" : readOnly ? "var(--sys-color-field-text-readOnly)" : "var(--sys-color-field-text-default)";
   return /* @__PURE__ */ jsx(
     "div",
@@ -3294,7 +3303,7 @@ var SField = forwardRef(function SField2({
           {
             className: "flex shrink-0 items-center font-bold text-(--sys-color-field-text-default)",
             style: {
-              height: s.height,
+              height: cssLen(labelHeight) ?? s.height,
               marginRight: s.fieldGap,
               width: cssLen(labelWidth),
               fontSize: s.fontSize,
@@ -3320,14 +3329,14 @@ var SField = forwardRef(function SField2({
             {
               className: cn(
                 "relative box-border flex min-w-0 items-stretch overflow-hidden border border-solid border-(--field-bc)",
-                interactive && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
+                interactive && !borderless && "hover:border-(--sys-color-field-border-focus) hover:shadow-[0px_0px_4px_0px_#0071ff66] focus-within:border-(--sys-color-field-border-focus) focus-within:shadow-[0px_0px_4px_0px_#0071ff66]",
                 disabled && "cursor-not-allowed"
               ),
               style: {
                 // @ts-expect-error CSS 변수
                 "--field-bc": borderColor,
                 // focused/hovered prop이 명시된 경우 강조를 즉시 반영
-                ...interactive && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
+                ...interactive && !borderless && focused ? { boxShadow: "0px 0px 4px 0px #0071ff66" } : {},
                 ...multiline ? { minHeight: s.height } : { height: s.height },
                 "width": cssLen(width),
                 "borderRadius": s.radius,
@@ -3372,15 +3381,28 @@ function flattenOptions(options, depth = 1) {
   const out = [];
   for (const o of options) {
     const hasChildren = Array.isArray(o.children) && o.children.length > 0;
-    out.push({
-      value: String(o.value),
-      label: o.label,
-      disabled: !!o.disabled,
-      depth,
-      isGroup: hasChildren,
-      raw: o.value
-    });
-    if (hasChildren) out.push(...flattenOptions(o.children, depth + 1));
+    if (hasChildren) {
+      const childFlat = flattenOptions(o.children, depth + 1);
+      const allChildrenDisabled = childFlat.every((c) => c.disabled);
+      out.push({
+        value: String(o.value),
+        label: o.label,
+        disabled: !!o.disabled || allChildrenDisabled,
+        depth,
+        isGroup: true,
+        raw: o.value
+      });
+      out.push(...childFlat);
+    } else {
+      out.push({
+        value: String(o.value),
+        label: o.label,
+        disabled: !!o.disabled,
+        depth,
+        isGroup: false,
+        raw: o.value
+      });
+    }
   }
   return out;
 }
@@ -3504,6 +3526,9 @@ var SSelect = forwardRef(function SSelect2({
   );
   const flat = useMemo(() => flattenOptions(options), [options]);
   const selectable = useMemo(() => selectableOptions(flat), [flat]);
+  const hasLeaf = useMemo(() => flat.some((o) => !o.isGroup), [flat]);
+  const allOptionsDisabled = hasLeaf && selectable.length === 0;
+  const effectiveDisabled = disabled || allOptionsDisabled;
   const showSearch = useSearch && selectable.length >= SEARCH_THRESHOLD;
   const labelByValue = useMemo(() => new Map(flat.map((o) => [o.value, o.label])), [flat]);
   const rawByValue = useMemo(() => new Map(flat.map((o) => [o.value, o.raw])), [flat]);
@@ -3570,10 +3595,10 @@ var SSelect = forwardRef(function SSelect2({
           Ariakit.Select,
           {
             ref: triggerRef,
-            disabled,
+            disabled: effectiveDisabled,
             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",
             style: {
-              color: disabled ? "var(--cmp-select-text-disabled)" : isPlaceholder ? "var(--cmp-select-icon-default)" : "var(--cmp-select-text-default)"
+              color: effectiveDisabled ? "var(--cmp-select-text-disabled)" : isPlaceholder ? "var(--cmp-select-icon-default)" : "var(--cmp-select-text-default)"
             },
             children: [
               isHtmlLabel(triggerText) ? /* @__PURE__ */ jsx(
@@ -3588,7 +3613,7 @@ var SSelect = forwardRef(function SSelect2({
                 {
                   name: "chevronDown",
                   size: 12,
-                  color: disabled ? "var(--cmp-select-icon-disabled)" : "var(--cmp-select-icon-default)",
+                  color: effectiveDisabled ? "var(--cmp-select-icon-disabled)" : "var(--cmp-select-icon-default)",
                   className: cn("shrink-0 transition-transform duration-200", open && "rotate-180")
                 }
               )
@@ -3602,7 +3627,7 @@ var SSelect = forwardRef(function SSelect2({
             portalElement: portalContainer,
             gutter: 4,
             sameWidth: !dropdownWidth,
-            className: "z-50 overflow-auto rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] py-[4px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)] data-[enter]:animate-floating-in-bottom data-[leave]:animate-floating-out-bottom",
+            className: "z-50 overflow-auto rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)] data-[enter]:animate-floating-in-bottom data-[leave]:animate-floating-out-bottom",
             style: {
               maxHeight: dropdownHeight,
               ...dropdownWidth ? { width: dropdownWidth } : {},
@@ -3643,7 +3668,7 @@ var SSelect = forwardRef(function SSelect2({
               ),
               hasItems ? /* @__PURE__ */ jsx(ItemList, { items: filtered, multi, selected, useSearch: showSearch }) : (
                 // 원본 sd-select-listbox__empty (표시할 항목이 없을 때)
-                /* @__PURE__ */ jsx("div", { className: "px-[12px] py-[12px] text-center 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-listItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
               )
             ]
           }
@@ -3666,7 +3691,7 @@ var SSelect = forwardRef(function SSelect2({
       error: error || ruleError !== "",
       status: rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0,
       errorMessage: ruleError !== "" ? ruleError : errorMessage,
-      disabled,
+      disabled: effectiveDisabled,
       width,
       className,
       style,
@@ -3701,7 +3726,11 @@ function ItemList({
         {
           className: cn(
             "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
-            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"
+            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",
+            // 하위가 전부 비활성이면(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)]"
           ),
           style: { paddingLeft: padLeft },
           children: o.label
@@ -3715,10 +3744,14 @@ function ItemList({
       {
         value: o.value,
         disabled: o.disabled,
+        accessibleWhenDisabled: true,
         className: cn(
           itemBase,
           isSelected && !multi && "font-bold text-[color:var(--cmp-listItem-content-selected)]",
-          activeClass
+          // Ariakit은 disabled 항목도 hover 시 active(data-active-item) 처리하므로,
+          // 비활성 항목에는 hover 하이라이트를 적용하지 않아 회색 비활성 스타일을 유지한다.
+          // (원본 Stencil의 `--focused...:not(--disabled)` 규칙과 동일한 의도)
+          !o.disabled && activeClass
         ),
         style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: padLeft },
         render: useSearch ? /* @__PURE__ */ jsx(Ariakit.ComboboxItem, {}) : void 0,
@@ -3728,15 +3761,21 @@ function ItemList({
             "span",
             {
               className: cn(
-                "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid group-data-[active-item]:border-[color:var(--cmp-checkbox-checked-border-inverse)]",
-                isSelected ? "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)] group-data-[active-item]:bg-transparent" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-transparent"
+                "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
+                o.disabled ? (
+                  // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
+                  "cursor-not-allowed border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
+                ) : cn(
+                  "group-data-[active-item]:border-[color:var(--cmp-checkbox-checked-border-inverse)]",
+                  isSelected ? "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)] group-data-[active-item]:bg-transparent" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-transparent"
+                )
               ),
               children: isSelected && /* @__PURE__ */ jsx(
                 SIcon,
                 {
                   name: "checkboxCheck",
                   size: 12,
-                  color: "var(--cmp-checkbox-checked-icon-default)"
+                  color: o.disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
                 }
               )
             }