sellmate-design-system-react 9.0.0-beta.32 → 9.0.0-beta.33

package/dist/index.js

@@ -9242,9 +9242,9 @@ var GNB_RAIL = {
 var GNB_RAIL_WIDTH = 68;
 var GNB_FOLD_MS = 200;
 var GNB_EXPAND_MS = 200;
-var GNB_MENU_WIDTH = 240;
+var GNB_MENU_WIDTH = 214;
 var GNB_MENU_MIN_WIDTH = 200;
-var GNB_MENU_MAX_WIDTH = 300;
+var GNB_MENU_MAX_WIDTH = 240;
 var GNB_MENU_RESIZE_KEY_STEP = { normal: 10, large: 50 };
 var clampGnbMenuWidth = (width) => Math.min(GNB_MENU_MAX_WIDTH, Math.max(GNB_MENU_MIN_WIDTH, Math.round(width)));
 var GNB_FULL_LOGO_WIDTH = 140;
@@ -9802,8 +9802,15 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
     "topContent"
   ) : null;
   const systemMenuContext = useMemo(
-    () => ({ color, folded: false, placement: "panel", active: !railFolded }),
-    [color, railFolded]
+    // 기본 폭보다 줄여 놓은 메뉴 컬럼이면 판에 알린다 — 알림 개수가 점 배지로 줄어든다.
+    () => ({
+      color,
+      folded: false,
+      placement: "panel",
+      active: !railFolded,
+      narrow: menuWidth < GNB_MENU_WIDTH
+    }),
+    [color, railFolded, menuWidth]
   );
   const systemFoldedContext = useMemo(
     () => ({ color, folded: true, placement: "panel", active: true }),
@@ -10070,7 +10077,7 @@ var GNB_SYSTEM_SETTING_LABEL = "\uC124\uC815";
 function TokenIcon3({ name, size }) {
   return /* @__PURE__ */ jsx(SIcon, { name, size: "100%", style: { width: size, height: size } });
 }
-function SystemButton({
+var SystemButton = /* @__PURE__ */ forwardRef(function SystemButton2({
   color,
   icon,
   label,
@@ -10082,21 +10089,22 @@ function SystemButton({
   dot,
   accentColor,
   stretch,
-  buttonRef,
   hasPopup,
   expanded,
-  onClick
-}) {
+  onClick,
+  onMouseLeave
+}, ref) {
   const c = SYSTEM_ACTION_BUTTON_COLOR_CONFIG[color];
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      ref: buttonRef,
+      ref,
       type: "button",
       "aria-label": label ? void 0 : ariaLabel,
       "aria-haspopup": hasPopup ? "dialog" : void 0,
       "aria-expanded": hasPopup ? expanded : void 0,
       onClick,
+      onMouseLeave,
       className: cn(
         "group box-border flex cursor-pointer items-center border-none bg-(--gsb-bg) text-(--gsb-text) transition-colors hover:bg-(--gsb-bg-hover)",
         stretch ? "min-w-0 flex-1" : "shrink-0",
@@ -10147,7 +10155,7 @@ function SystemButton({
       ]
     }
   );
-}
+});
 var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
   color: colorProp,
   folded: foldedProp,
@@ -10166,6 +10174,7 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
   const isTop = placement === "top";
   const folded = !isTop && (foldedProp ?? gnb2?.folded ?? false);
   const active = gnb2?.active ?? true;
+  const narrow = !isTop && !folded && (gnb2?.narrow ?? false);
   const c = GNB_SYSTEM_COLOR_CONFIG[color];
   const t = GNB_SYSTEM_TOP_COLOR_CONFIG[color];
   const itemColor = isTop ? t.item : color;
@@ -10184,13 +10193,39 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
     setAccountOpen(next);
     account?.onOpenChange?.(next);
   };
+  const alertButtonRef = useRef(null);
+  const [alertListOpen, setAlertListOpen] = useState(false);
+  const hasAlertList = alert2?.listBox != null;
+  const commitAlertListOpen = (next) => {
+    setAlertListOpen(next);
+    alert2?.onOpenChange?.(next);
+  };
   useEffect(() => {
     if (active || !accountOpen) return;
     setAccountOpen(false);
     account?.onOpenChange?.(false);
   }, [active, accountOpen, account]);
+  useEffect(() => {
+    if (active || !alertListOpen) return;
+    setAlertListOpen(false);
+    alert2?.onOpenChange?.(false);
+  }, [active, alertListOpen, alert2]);
   const alertCount = alert2?.count ?? 0;
   const notified = alertCount > 0;
+  const alertTooltip = (alert2?.tooltip ?? []).filter((line) => line.trim() !== "");
+  const hasAlertTooltip = alertTooltip.length > 0;
+  const [alertTooltipDismissed, setAlertTooltipDismissed] = useState(false);
+  const hadAlertTooltip = useRef(hasAlertTooltip);
+  if (hadAlertTooltip.current !== hasAlertTooltip) {
+    hadAlertTooltip.current = hasAlertTooltip;
+    if (hasAlertTooltip && alertTooltipDismissed) setAlertTooltipDismissed(false);
+  }
+  const alertTooltipOpen = hasAlertTooltip && active && !alertTooltipDismissed;
+  const dismissAlertTooltip = () => {
+    if (!alertTooltipOpen) return;
+    setAlertTooltipDismissed(true);
+    alert2?.onTooltipDismiss?.();
+  };
   const alertLabel = alert2?.label ?? GNB_SYSTEM_ALERT_LABEL;
   const settingLabel = setting?.label ?? GNB_SYSTEM_SETTING_LABEL;
   const alertButton = alert2 && /* @__PURE__ */ jsx(
@@ -10203,13 +10238,51 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
       paddingX: GNB_SYSTEM_LAYOUT.alertPaddingX,
       iconColor: notified ? alertIconColor : void 0,
       hoverBg: notified ? alertHoverBg : void 0,
-      count: folded ? void 0 : alertCount,
-      dot: folded && notified,
+      count: folded || narrow ? void 0 : alertCount,
+      dot: (folded || narrow) && notified,
       accentColor: alertCountColor,
       stretch: !folded && !isTop,
-      onClick: alert2.onClick
+      ref: alertButtonRef,
+      hasPopup: hasAlertList,
+      expanded: alertListOpen,
+      onClick: () => {
+        dismissAlertTooltip();
+        alert2.onClick?.();
+        if (hasAlertList) commitAlertListOpen(!alertListOpen);
+      },
+      onMouseLeave: hasAlertTooltip ? dismissAlertTooltip : void 0
     }
   );
+  const alertListBox = alert2 && hasAlertList && /* @__PURE__ */ jsx(
+    SPortal,
+    {
+      open: alertListOpen && active,
+      onClose: () => commitAlertListOpen(false),
+      anchorRef: alertButtonRef,
+      placement: isTop ? "bottom" : "right",
+      align: "end",
+      offset: 8,
+      viewportPadding: 8,
+      ariaLabel: alert2.label ?? GNB_SYSTEM_ALERT_LABEL,
+      onOpenAutoFocus: (event) => event.preventDefault(),
+      className: "rounded-(--radius-8)",
+      children: alert2.listBox
+    }
+  );
+  const alertNode = alertButton && /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasAlertTooltip ? /* @__PURE__ */ jsx(
+      STooltip2,
+      {
+        trigger: "none",
+        open: alertTooltipOpen,
+        message: alertTooltip,
+        tooltipType: color === "light" ? "default" : "accent",
+        placement: isTop ? "bottom" : "right",
+        children: alertButton
+      }
+    ) : alertButton,
+    alertListBox
+  ] });
   const settingButton = setting && /* @__PURE__ */ jsx(
     SystemButton,
     {
@@ -10265,7 +10338,7 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
         )
       })
     );
-    if (alertButton) segments.push({ key: "alert", node: alertButton });
+    if (alertNode) segments.push({ key: "alert", node: alertNode });
     if (settingButton) segments.push({ key: "setting", node: settingButton });
     if (domainTag || accountButton) {
       segments.push({
@@ -10323,7 +10396,7 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
         "data-folded": "",
         ...rest,
         children: [
-          alertButton,
+          alertNode,
           account && /* @__PURE__ */ jsx(
             SystemButton,
             {
@@ -10331,7 +10404,7 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
               icon: "user",
               ariaLabel: account.label ?? "account",
               paddingX: GNB_SYSTEM_LAYOUT.alertPaddingX,
-              buttonRef: foldedAccountRef,
+              ref: foldedAccountRef,
               hasPopup: true,
               expanded: accountOpen,
               onClick: () => {
@@ -10377,7 +10450,7 @@ var SGnbSystem = /* @__PURE__ */ forwardRef(function SGnbSystem2({
         domainTag,
         hasUserBlock && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
           (alert2 || setting) && /* @__PURE__ */ jsxs("div", { className: "flex items-center", style: { gap: GNB_SYSTEM_LAYOUT.gap }, children: [
-            alertButton,
+            alertNode,
             alert2 && setting && /* @__PURE__ */ jsx(
               "span",
               {