sellmate-design-system-react 0.1.11 → 0.3.0

package/dist/components/STable/STable.js

@@ -2953,8 +2953,12 @@ var SCircleProgress = forwardRef(
       "span",
       {
         className: cn(
-          "text-center text-[16px] font-bold leading-[26px]",
-          innerValue && "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+          "text-center text-[16px] font-bold",
+          innerValue ? (
+            // leading-[normal]: 26px leading 은 폰트 content(19px) 위아래로 홀수(7px)만큼 남아
+            // 3px/4px 로 쪼개지고 글자가 링 중심보다 위로 뜬다. (leading-normal 은 1.5 라 동일 문제)
+            "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-[normal]"
+          ) : "leading-[26px]"
         ),
         style: { color: percentColor },
         children: [
@@ -3328,9 +3332,12 @@ function SGhostButton({
   size = "sm",
   intent = "default",
   ariaLabel = "",
+  ariaPressed,
   tooltipText,
   disabled = false,
   onClick,
+  anchorClassName,
+  anchorStyle,
   className,
   style
 }) {
@@ -3353,6 +3360,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",
     {
@@ -3360,6 +3369,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) {
@@ -3393,13 +3403,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,
@@ -3772,7 +3782,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,
@@ -4122,7 +4132,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
@@ -4173,6 +4183,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
                         );
@@ -4221,6 +4235,7 @@ function ItemList({
         ),
         style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: 12 },
         onMouseEnter: () => onHoverValue("__select_all__"),
+        onMouseLeave: () => onHoverValue(null),
         onClick: onSelectAll,
         children: [
           /* @__PURE__ */ jsx(
@@ -4279,10 +4294,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(
@@ -4803,10 +4821,10 @@ var STable = forwardRef(function STable2({
                   "div",
                   {
                     "aria-hidden": true,
-                    className: "pointer-events-none absolute left-0 right-0 top-0 z-[210] h-[var(--cmp-table-header-height)] bg-white/60"
+                    className: "pointer-events-none absolute left-0 right-0 top-0 z-[31] h-[var(--cmp-table-header-height)] bg-white/60"
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 top-[var(--cmp-table-header-height)] z-[200] flex items-center justify-center bg-white/60 text-[12px] text-[color:var(--color-grey-65)]", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
+                /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 right-0 top-[var(--cmp-table-header-height)] z-[30] flex items-center justify-center bg-white/60 text-[12px] text-[color:var(--color-grey-65)]", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[60px] w-full items-center justify-center", children: noDataLabel }) })
               ] }),
               isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-white/60", children: /* @__PURE__ */ jsx(SCircleProgress, { indeterminate: true }) })
             ]