sellmate-design-system-react 9.0.0-beta.42 → 9.0.0-beta.43

package/dist/index.js

@@ -7851,6 +7851,8 @@ var SPopup = /* @__PURE__ */ forwardRef(function SPopup2({
 });
 var DEFAULT_LABEL = { tip: "\uD65C\uC6A9 TIP", notion: "\uC0AC\uC6A9\uBC95 \uC548\uB0B4" };
 var ICON = { tip: "helpOutline", notion: "notion" };
+var VIEWPORT_GUTTER = 24;
+var CLOSE_INSET = 12;
 function flattenMessages(message, depth = 0) {
   if (Array.isArray(message)) return message.flatMap((m) => flattenMessages(m, depth + 1));
   return message !== "" ? [{ text: message, depth }] : [];
@@ -7861,13 +7863,14 @@ function SGuide({
   message = "",
   url = "",
   popupTitle = "",
-  popupWidth,
+  popupWidth = "auto",
   className,
   style
 }) {
   const [open, setOpen] = useState(false);
   const portalContainer = usePortalContainer();
   const isNotion = type === "notion";
+  const isAutoWidth = popupWidth === "auto";
   const defaultLabel = DEFAULT_LABEL[type];
   const iconName = ICON[type];
   const messages = flattenMessages(message);
@@ -7907,30 +7910,45 @@ function SGuide({
         side: "bottom",
         align: "start",
         sideOffset: 4,
+        collisionPadding: VIEWPORT_GUTTER,
         className: cn(
           "relative z-50 rounded-[var(--cmp-guide-contents-radius)] bg-[var(--color-white)]",
-          // popupWidth(기본 426px)가 창보다 넓으면 창 폭에 맞춘다 — max-width 가 width 를 이긴다.
-          "max-w-[var(--radix-popover-content-available-width)]",
           FLOATING_SLIDE_ANIM
         ),
         style: {
-          width: popupWidth != null ? popupWidth : 426,
+          width: isAutoWidth ? "max-content" : popupWidth,
+          // 유일한 폭 상한. auto 든 고정 폭이든 창 좌우 여백을 먹고 들어가지 않는다.
+          // 트리거 위치가 아니라 창 기준이라, 오른쪽 끝 트리거에서도 폭이 깎이지 않는다
+          // (넘치면 Radix 가 왼쪽으로 민다). 100vw 는 세로 스크롤바를 포함하지만
+          // 여백이 그보다 넉넉해 화면 밖으로 나가지 않는다.
+          maxWidth: `calc(100vw - ${VIEWPORT_GUTTER * 2}px)`,
           padding: "var(--cmp-guide-contents-paddingY) var(--cmp-guide-contents-paddingX)",
           boxShadow: "4px 4px 24px 4px rgba(0,0,0,0.1)"
         },
         children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute right-[12px] top-[12px]", children: /* @__PURE__ */ jsx(SGhostButton, { icon: "close", size: "sm", ariaLabel: "close", onClick: () => setOpen(false) }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--cmp-guide-contents-title-gap)]", children: [
-            /* @__PURE__ */ jsx(
-              SIcon,
-              {
-                name: iconName,
-                size: 24,
-                color: isNotion ? "var(--sys-color-fg-primary)" : "var(--cmp-guide-contents-icon)"
-              }
-            ),
-            /* @__PURE__ */ jsx("h3", { className: "m-0 text-[16px] font-bold leading-[26px] text-[color:var(--cmp-guide-contents-typography-color)]", children: popupTitle || defaultLabel })
-          ] }),
+          /* @__PURE__ */ jsx("div", { className: "absolute", style: { top: CLOSE_INSET, right: CLOSE_INSET }, children: /* @__PURE__ */ jsx(SGhostButton, { icon: "close", size: "sm", ariaLabel: "close", onClick: () => setOpen(false) }) }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-[var(--cmp-guide-contents-title-gap)]",
+              style: {
+                // 닫기 버튼은 absolute 라 폭 계산에 안 들어간다. 폭이 내용에 붙는 auto 에서 제목이
+                // 버튼 밑으로 들어가지 않도록, 버튼이 콘텐츠 영역을 침범하는 만큼을 미리 비운다.
+                paddingRight: `max(0px, calc(var(--cmp-ghostButton-sm-size) + ${CLOSE_INSET}px + var(--cmp-guide-contents-title-gap) - var(--cmp-guide-contents-paddingX)))`
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  SIcon,
+                  {
+                    name: iconName,
+                    size: 24,
+                    color: isNotion ? "var(--sys-color-fg-primary)" : "var(--cmp-guide-contents-icon)"
+                  }
+                ),
+                /* @__PURE__ */ jsx("h3", { className: "m-0 break-keep text-[16px] font-bold leading-[26px] text-[color:var(--cmp-guide-contents-typography-color)]", children: popupTitle || defaultLabel })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx("ul", { className: "m-0 mt-[var(--cmp-guide-contents-gap)] flex w-full list-none flex-col gap-[var(--cmp-guide-contents-body-gap)] p-0 text-[12px] leading-[20px] text-[color:var(--cmp-guide-contents-typography-color)]", children: messages.map((m, i) => /* @__PURE__ */ jsx(
             "li",
             {
@@ -7941,7 +7959,7 @@ function SGuide({
               children: /* @__PURE__ */ jsx(
                 "p",
                 {
-                  className: "m-0 w-full min-w-0 break-words",
+                  className: "m-0 w-full min-w-0 break-keep break-words text-pretty",
                   dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(m.text) }
                 }
               )