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

package/dist/components/SGuide/README.md

@@ -13,7 +13,7 @@
 | `message?` | `SGuideMessage` | `''` | 팝업 메시지 (배열이면 리스트, 중첩 배열이면 depth 표현) |
 | `url?` | `string` | `''` | notion 타입 클릭 시 이동 URL |
 | `popupTitle?` | `string` | `''` | 팝업 제목 (없으면 type 기본값) |
-| `popupWidth?` | `number` | — | 팝업 너비 (px, 기본 426). 창보다 넓게 줘도 창 폭까지만 벌어진다. |
+| `popupWidth?` | `number \| 'auto'` | `'auto'` | 팝업 너비. 기본 `'auto'` 는 내용 폭에 맞춘다 — 가장 긴 줄이 곧 팝업 폭이다. 숫자(px)를 주면 그 폭으로 고정한다. 어느 쪽이든 창 좌우에 여백을 남기는 선까지만 벌어진다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 

package/dist/components/SGuide/SGuide.d.ts

@@ -13,8 +13,11 @@ export interface SGuideProps {
     url?: string;
     /** 팝업 제목 (없으면 type 기본값) */
     popupTitle?: string;
-    /** 팝업 너비 (px, 기본 426). 창보다 넓게 줘도 창 폭까지만 벌어진다. */
-    popupWidth?: number;
+    /**
+     * 팝업 너비. 기본 `'auto'` 는 내용 폭에 맞춘다 — 가장 긴 줄이 곧 팝업 폭이다.
+     * 숫자(px)를 주면 그 폭으로 고정한다. 어느 쪽이든 창 좌우에 여백을 남기는 선까지만 벌어진다.
+     */
+    popupWidth?: number | 'auto';
     className?: string;
     style?: CSSProperties;
 }

package/dist/index.cjs

@@ -7879,6 +7879,8 @@ var SPopup = /* @__PURE__ */ react.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 }] : [];
@@ -7889,13 +7891,14 @@ function SGuide({
   message = "",
   url = "",
   popupTitle = "",
-  popupWidth,
+  popupWidth = "auto",
   className,
   style
 }) {
   const [open, setOpen] = react.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);
@@ -7935,30 +7938,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__ */ jsxRuntime.jsx("div", { className: "absolute right-[12px] top-[12px]", children: /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { icon: "close", size: "sm", ariaLabel: "close", onClick: () => setOpen(false) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--cmp-guide-contents-title-gap)]", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SIcon,
-              {
-                name: iconName,
-                size: 24,
-                color: isNotion ? "var(--sys-color-fg-primary)" : "var(--cmp-guide-contents-icon)"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "m-0 text-[16px] font-bold leading-[26px] text-[color:var(--cmp-guide-contents-typography-color)]", children: popupTitle || defaultLabel })
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute", style: { top: CLOSE_INSET, right: CLOSE_INSET }, children: /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { icon: "close", size: "sm", ariaLabel: "close", onClick: () => setOpen(false) }) }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  SIcon,
+                  {
+                    name: iconName,
+                    size: 24,
+                    color: isNotion ? "var(--sys-color-fg-primary)" : "var(--cmp-guide-contents-icon)"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
             "li",
             {
@@ -7969,7 +7987,7 @@ function SGuide({
               children: /* @__PURE__ */ jsxRuntime.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) }
                 }
               )