@bigtablet/design-system 3.19.1 → 3.19.3

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;
@@ -4783,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);
@@ -4800,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;
@@ -5029,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);
@@ -5084,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,12 +331,16 @@ function useAnchoredPosition({
     y: 0,
     placement,
     maxWidth: 0,
+    maxHeight: 0,
     ready: false,
-    anchorWidth: 0
+    anchorWidth: 0,
+    anchorHidden: false
   });
   useSafeLayoutEffect(() => {
     if (!open) {
-      setState((prev) => prev.ready ? { ...prev, ready: false } : prev);
+      setState(
+        (prev) => prev.ready || prev.anchorHidden ? { ...prev, ready: false, anchorHidden: false } : prev
+      );
       return;
     }
     const anchor = anchorRef.current;
@@ -328,10 +355,12 @@ function useAnchoredPosition({
         { width: window.innerWidth, height: window.innerHeight },
         { placement, align, gap, padding }
       );
+      const anchorHidden = a.width > 0 && a.height > 0 && (a.bottom <= 0 || a.top >= window.innerHeight || a.right <= 0 || a.left >= window.innerWidth);
       setState({
         ...result,
         ready: true,
-        anchorWidth: Math.min(a.width, result.maxWidth)
+        anchorWidth: Math.min(a.width, result.maxWidth),
+        anchorHidden
       });
     };
     let frame = 0;
@@ -661,6 +690,12 @@ function useListboxPopup({
     gap: LIST_GAP,
     padding: LIST_PADDING
   });
+  useEffect(() => {
+    if (!isOpen || !anchored.ready || !anchored.anchorHidden) return;
+    const focusInPanel = !!panelRef.current?.contains(document.activeElement);
+    setIsOpen(false);
+    if (focusInPanel && returnFocusOnClose) triggerRef.current?.focus({ preventScroll: true });
+  }, [isOpen, anchored.ready, anchored.anchorHidden, returnFocusOnClose]);
   return {
     isOpen,
     setIsOpen,
@@ -670,6 +705,7 @@ function useListboxPopup({
       y: anchored.y,
       width: anchored.anchorWidth,
       maxWidth: anchored.maxWidth,
+      maxHeight: anchored.maxHeight,
       ready: anchored.ready
     },
     activeIndex,
@@ -1255,6 +1291,14 @@ var Menu = ({ items, trigger, align = "start" }) => {
     gap: MENU_GAP,
     padding: 8
   });
+  React11.useEffect(() => {
+    if (!open || !pos.ready || !pos.anchorHidden) return;
+    const focusInMenu = !!menuRef.current?.contains(document.activeElement);
+    setOpen(false);
+    if (focusInMenu) {
+      wrapperRef.current?.querySelector("[aria-haspopup]")?.focus({ preventScroll: true });
+    }
+  }, [open, pos.ready, pos.anchorHidden]);
   const style = useSpringPresence({
     visible: open,
     from: pos.placement === "top" ? `translateY(${MENU_GAP}px)` : `translateY(-${MENU_GAP}px)`
@@ -1346,6 +1390,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 +2063,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
             }
@@ -2073,6 +2120,9 @@ var Tooltip = ({
     gap: TOOLTIP_GAP,
     padding: 8
   });
+  React11.useEffect(() => {
+    if (open && pos.ready && pos.anchorHidden) hideNow();
+  }, [open, pos.ready, pos.anchorHidden, hideNow]);
   const fromTransform = (() => {
     switch (pos.placement) {
       case "top":
@@ -2132,7 +2182,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
@@ -4303,6 +4362,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 +4587,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.1",
+	"version": "3.19.3",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",
@@ -125,17 +125,18 @@
 	"size-limit": [
 		{
 			"path": "dist/index.js",
-			"limit": "60 kB",
-			"message": "Raised 50 kB -> 60 kB on 2026-08-05: baseline was 49.34 kB, leaving 0.66 kB (1.3%) under the old 50 kB limit. The current limit leaves 10.66 kB. Re-measure before raising again."
+			"limit": "70 kB",
+			"message": "Raised 60 kB -> 70 kB on 2026-09-10: baseline was 59.82 kB on develop (59.91 kB with PR #625), leaving 0.09-0.18 kB (0.3%) under the old 60 kB limit. Of that baseline, 18.48 kB is @react-spring/web (a runtime dependency, so size-limit bundles it) and 40.55 kB is this package - measure `dist/index.js` alone before blaming the dependency. The current limit leaves 10.09 kB. Re-measure before raising again."
 		},
 		{
 			"path": "dist/vanilla/bigtablet.min.js",
-			"limit": "7 kB",
-			"message": "Raised 5 kB -> 7 kB on 2026-08-06: Dropdown multiple/searchable pushed the baseline from 4.13 kB to 5.6 kB, 0.6 kB over the old limit. The current limit leaves 1.4 kB. Re-measure before raising again."
+			"limit": "8 kB",
+			"message": "Raised 7 kB -> 8 kB on 2026-09-10: baseline was 6.83 kB, leaving 0.17 kB (2.4%) under the old 7 kB limit. The current limit leaves 1.17 kB. Re-measure before raising again."
 		},
 		{
 			"path": "dist/index.css",
-			"limit": "130 kB"
+			"limit": "18 kB",
+			"message": "Lowered 130 kB -> 18 kB on 2026-09-10: baseline is 14.56 kB brotlied, so the old limit sat 9x above reality and could never fire. The current limit leaves 3.44 kB. Raise it with a measurement, not to make a build pass."
 		}
 	],
 	"dependencies": {