@bigtablet/design-system 3.19.0 → 3.19.2

package/dist/index.css

@@ -1068,6 +1068,10 @@ body:has(.bottom_nav) {
   border-radius: 12px;
   box-shadow: var(--bt-elevation-level2);
   padding: 4px 0;
+  box-sizing: border-box;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--bt-color-border-hover) transparent;
   will-change: transform, opacity;
 }
 [data-theme=dark] .menu {
@@ -1882,6 +1886,9 @@ body:has(.bottom_nav) {
   box-sizing: border-box;
   min-width: min(200px, 100%);
   max-width: min(320px, 100%);
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--bt-color-border-hover) transparent;
   color: var(--bt-color-text-body);
   font-size: 14px;
   font-weight: 400;
@@ -1929,6 +1936,10 @@ body:has(.bottom_nav) {
 }
 .tooltip {
   display: block;
+  box-sizing: border-box;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--bt-color-border-hover) transparent;
   background: var(--bt-color-accent-strong);
   color: var(--bt-color-accent-on-surface);
   padding: 6px 10px;
@@ -2395,6 +2406,12 @@ body:has(.bottom_nav) {
 .field_label_row .field_label {
   margin-right: auto;
 }
+.field_label_action {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: 18px;
+}
 .field_required {
   margin-left: 2px;
   color: var(--bt-color-status-error-on-surface);
@@ -4777,6 +4794,8 @@ body:has(.bottom_nav) {
   position: fixed;
   z-index: 1000;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   width: max-content;
   background: var(--bt-color-bg-solid);
   border: 1px solid var(--bt-color-border-default);
@@ -4794,6 +4813,7 @@ body:has(.bottom_nav) {
 }
 .combobox_list {
   max-height: 18rem;
+  min-height: 0;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--bt-color-border-hover) transparent;
@@ -5023,6 +5043,8 @@ body:has(.bottom_nav) {
   position: fixed;
   z-index: 1000;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   width: max-content;
   background: var(--bt-color-bg-solid);
   border: 1px solid var(--bt-color-border-default);
@@ -5078,6 +5100,7 @@ body:has(.bottom_nav) {
 }
 .dropdown_options {
   max-height: 18rem;
+  min-height: 0;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--bt-color-border-hover) transparent;

package/dist/index.d.ts

@@ -181,6 +181,11 @@ interface UseListboxPopupResult {
          * 이 값으로 좌표를 잡는데 패널 폭을 트리거 폭으로 두면 오른쪽이 잘린다.
          */
         maxWidth: number;
+        /**
+         * 배치된 방향의 가용 높이 상한(px). 목록이 길고 뷰포트가 낮으면 이걸 안 걸었을 때
+         * 패널이 화면 밖으로 나간다(#621).
+         */
+        maxHeight: number;
         /** 최초 측정 전에는 false - 이때 숨겨 (0,0) 깜빡임을 막는다 */
         ready: boolean;
     };

package/dist/index.js

@@ -254,6 +254,22 @@ var mainAxisStart = (side, anchor, floating, gap) => {
       return anchor.left + anchor.width + gap;
   }
 };
+var mainAxisSpace = (side, anchor, viewport, gap, padding) => {
+  const top = clamp(anchor.top, 0, viewport.height);
+  const bottom = clamp(anchor.top + anchor.height, 0, viewport.height);
+  const left = clamp(anchor.left, 0, viewport.width);
+  const right = clamp(anchor.left + anchor.width, 0, viewport.width);
+  switch (side) {
+    case "top":
+      return top - gap - padding;
+    case "bottom":
+      return viewport.height - bottom - gap - padding;
+    case "left":
+      return left - gap - padding;
+    case "right":
+      return viewport.width - right - gap - padding;
+  }
+};
 var fitsMainAxis = (side, anchor, floating, viewport, gap, padding) => {
   const start = mainAxisStart(side, anchor, floating, gap);
   switch (side) {
@@ -277,9 +293,14 @@ function computeAnchoredPosition(anchor, floating, viewport, options) {
     height: floating.height
   };
   let side = options.placement;
-  if (!fitsMainAxis(side, anchor, sized, viewport, gap, padding) && fitsMainAxis(OPPOSITE[side], anchor, sized, viewport, gap, padding)) {
-    side = OPPOSITE[side];
+  if (!fitsMainAxis(side, anchor, sized, viewport, gap, padding)) {
+    const opposite = OPPOSITE[side];
+    if (fitsMainAxis(opposite, anchor, sized, viewport, gap, padding) || mainAxisSpace(opposite, anchor, viewport, gap, padding) > mainAxisSpace(side, anchor, viewport, gap, padding)) {
+      side = opposite;
+    }
   }
+  const maxHeight = isVertical(side) ? Math.max(mainAxisSpace(side, anchor, viewport, gap, padding), 0) : viewport.height - padding * 2;
+  sized.height = Math.min(sized.height, maxHeight);
   const align = options.align ?? "center";
   let x;
   let y;
@@ -287,12 +308,14 @@ function computeAnchoredPosition(anchor, floating, viewport, options) {
     y = mainAxisStart(side, anchor, sized, gap);
     x = align === "start" ? anchor.left : align === "end" ? anchor.left + anchor.width - sized.width : anchor.left + anchor.width / 2 - sized.width / 2;
     x = clamp(x, padding, viewport.width - padding - sized.width);
+    y = clamp(y, padding, viewport.height - padding - floating.height);
   } else {
     x = mainAxisStart(side, anchor, sized, gap);
     y = align === "start" ? anchor.top : align === "end" ? anchor.top + anchor.height - sized.height : anchor.top + anchor.height / 2 - sized.height / 2;
     y = clamp(y, padding, viewport.height - padding - sized.height);
+    x = clamp(x, padding, viewport.width - padding - floating.width);
   }
-  return { x, y, placement: side, maxWidth };
+  return { x, y, placement: side, maxWidth, maxHeight };
 }
 function useAnchoredPosition({
   open,
@@ -308,6 +331,7 @@ function useAnchoredPosition({
     y: 0,
     placement,
     maxWidth: 0,
+    maxHeight: 0,
     ready: false,
     anchorWidth: 0
   });
@@ -670,6 +694,7 @@ function useListboxPopup({
       y: anchored.y,
       width: anchored.anchorWidth,
       maxWidth: anchored.maxWidth,
+      maxHeight: anchored.maxHeight,
       ready: anchored.ready
     },
     activeIndex,
@@ -1346,6 +1371,9 @@ var Menu = ({ items, trigger, align = "start" }) => {
             position: "fixed",
             left: pos.x,
             top: pos.y,
+            // 배치된 방향에 남은 높이. 항목이 많은 메뉴가 낮은 뷰포트에서 화면 밖으로
+            // 나가지 않게 한다(#621). 넘치는 만큼은 메뉴 안에서 스크롤한다.
+            maxHeight: pos.ready ? pos.maxHeight : void 0,
             visibility: pos.ready ? void 0 : "hidden"
           },
           className: cn("menu", `menu_align_${align}`),
@@ -2016,7 +2044,7 @@ var Popover = ({
               tabIndex: -1,
               "aria-label": ariaLabel,
               "aria-labelledby": ariaLabelledby,
-              style,
+              style: { ...style, maxHeight: pos.ready ? pos.maxHeight : void 0 },
               className: cn("popover", className),
               children: content
             }
@@ -2132,7 +2160,16 @@ var Tooltip = ({
           },
           onMouseEnter: cancelHide,
           onMouseLeave: hide,
-          children: /* @__PURE__ */ jsx(animated.span, { id: tooltipId, role: "tooltip", style, className: "tooltip", children: content })
+          children: /* @__PURE__ */ jsx(
+            animated.span,
+            {
+              id: tooltipId,
+              role: "tooltip",
+              style: { ...style, maxHeight: pos.ready ? pos.maxHeight : void 0 },
+              className: "tooltip",
+              children: content
+            }
+          )
         }
       ),
       document.body
@@ -2879,7 +2916,7 @@ var Field = ({
   return /* @__PURE__ */ jsxs("div", { className: cn("field", !!error && "field_error", className), ...props, children: [
     labelAction ? /* @__PURE__ */ jsxs("div", { className: "field_label_row", children: [
       labelElement,
-      labelAction
+      /* @__PURE__ */ jsx("span", { className: "field_label_action", children: labelAction })
     ] }) : labelElement,
     /* @__PURE__ */ jsx(FieldContext.Provider, { value: control, children }),
     showHelp && /* @__PURE__ */ jsx("div", { id: helpId, className: "field_help", children: help }),
@@ -4303,6 +4340,8 @@ var Combobox = ({
             minWidth: popup.position.width || void 0,
             // 트리거가 뷰포트보다 넓으면 좌표만 줄어들고 패널은 그대로 넘친다.
             maxWidth: popup.position.ready ? popup.position.maxWidth : void 0,
+            // 배치된 방향에 남은 높이 - Dropdown 과 같은 이유(#621).
+            maxHeight: popup.position.ready ? popup.position.maxHeight : void 0,
             visibility: popup.position.ready ? void 0 : "hidden"
           },
           children: !hasList ? /* @__PURE__ */ jsx("p", { className: "combobox_message", role: "status", children: showIdle ? idleMessage : emptyMessage }) : /* @__PURE__ */ jsx(
@@ -4526,6 +4565,9 @@ var Dropdown = (props) => {
             minWidth: position.width || void 0,
             // 트리거가 뷰포트보다 넓으면 좌표만 줄어들고 패널은 그대로 넘친다.
             maxWidth: position.ready ? position.maxWidth : void 0,
+            // 배치된 방향에 남은 높이. 안 걸면 긴 목록이 낮은 뷰포트에서 화면 밖으로
+            // 나간다(#621). 패널이 세로 flex 라 목록이 이 안에서 줄고 스크롤한다.
+            maxHeight: position.ready ? position.maxHeight : void 0,
             // 최초 측정 전에는 숨긴다 - (0,0) 에서 한 프레임 깜빡이는 것을 막는다.
             visibility: position.ready ? void 0 : "hidden"
           },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "3.19.0",
+	"version": "3.19.2",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",