sellmate-design-system-react 0.1.11 → 0.3.0

package/dist/components/SSelect/SSelect.js

@@ -3069,9 +3069,12 @@ function SGhostButton({
   size = "sm",
   intent = "default",
   ariaLabel = "",
+  ariaPressed,
   tooltipText,
   disabled = false,
   onClick,
+  anchorClassName,
+  anchorStyle,
   className,
   style
 }) {
@@ -3094,6 +3097,8 @@ function SGhostButton({
   };
   const s = SIZE[size];
   const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
+  const text = (tooltipText ?? "").trim();
+  const hasTooltip = text !== "";
   const btn = /* @__PURE__ */ jsxs(
     "button",
     {
@@ -3101,6 +3106,7 @@ function SGhostButton({
       disabled,
       "aria-disabled": disabled ? "true" : void 0,
       "aria-label": ariaLabel.trim() || void 0,
+      "aria-pressed": ariaPressed,
       tabIndex: disabled ? -1 : void 0,
       onClick: (e) => {
         if (disabled) {
@@ -3134,13 +3140,13 @@ function SGhostButton({
       ]
     }
   );
-  const text = (tooltipText ?? "").trim();
-  if (text === "") return btn;
+  if (!hasTooltip) return btn;
   return /* @__PURE__ */ jsxs(RPopover2.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(RPopover2.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
       "span",
       {
-        className: "inline-flex",
+        className: cn("inline-flex", anchorClassName),
+        style: anchorStyle,
         onMouseEnter: openNow,
         onMouseLeave: startHide,
         onFocus: openNow,
@@ -3513,7 +3519,7 @@ function SPortal({
             onCloseAutoFocus,
             onClick: autoClose ? () => onClose?.() : void 0,
             className: cn(
-              "z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) py-4 shadow-normal-sm",
+              "z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm",
               maxHeight != null && "overflow-y-auto",
               fit && "min-w-(--radix-popover-trigger-width)",
               FLOATING_SLIDE_ANIM,
@@ -3863,7 +3869,7 @@ var SSelect = forwardRef(function SSelect2({
               event.preventDefault();
               triggerRef.current?.focus();
             },
-            className: "rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] py-[4px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
+            className: "rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
             style: {
               ...dropdownWidth ? { width: dropdownWidth } : {},
               maxWidth: maxDropdownWidth
@@ -3914,6 +3920,10 @@ var SSelect = forwardRef(function SSelect2({
                       onSelectAll: handleSelectAll,
                       onSelect: handleSelect,
                       onHoverValue: (value2) => {
+                        if (value2 == null) {
+                          setFocusedIndex(-1);
+                          return;
+                        }
                         const index = navigableItems.findIndex(
                           (item) => item.isSelectAll ? value2 === "__select_all__" : item.value === value2
                         );
@@ -3962,6 +3972,7 @@ function ItemList({
         ),
         style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: 12 },
         onMouseEnter: () => onHoverValue("__select_all__"),
+        onMouseLeave: () => onHoverValue(null),
         onClick: onSelectAll,
         children: [
           /* @__PURE__ */ jsx(
@@ -4020,10 +4031,13 @@ function ItemList({
             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)]",
-            activeClass
+            // 비활성 항목은 hover/focus 스타일 대상에서 제외한다.
+            // (:hover 는 disabled 버튼에도 매칭되므로 클래스 자체를 붙이지 않아야 한다)
+            !o.disabled && activeClass
           ),
           style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: padLeft },
           onMouseEnter: () => onHoverValue(o.value),
+          onMouseLeave: () => onHoverValue(null),
           onClick: () => onSelect(o.value),
           children: [
             multi && /* @__PURE__ */ jsx(