@ncds/ui-admin 1.8.3 → 1.8.5

package/dist/cjs/assets/scripts/shared/ButtonCloseX.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonCloseX = ButtonCloseX;
+exports.X_CLOSE_SVG = exports.SVG_SIZE = void 0;
+// 공통 X버튼 로직 (React ButtonCloseX 컴포넌트와 동일한 구조)
+// React ButtonCloseX와 동일한 SVG 사이즈 매핑
+const SVG_SIZE = exports.SVG_SIZE = {
+  xs: 16,
+  sm: 20,
+  md: 20,
+  lg: 24
+};
+// X버튼 SVG 아이콘
+const X_CLOSE_SVG = size => `<svg width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+  </svg>`;
+// X버튼 렌더링 유틸리티 (React ButtonCloseX와 동일한 인터페이스)
+exports.X_CLOSE_SVG = X_CLOSE_SVG;
+function ButtonCloseX(size) {
+  let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'light';
+  let additionalClasses = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  let ariaLabel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '닫기';
+  let onClick = arguments.length > 4 ? arguments[4] : undefined;
+  const svgSize = SVG_SIZE[size];
+  const buttonId = `close-btn-${Math.random().toString(36).substr(2, 9)}`;
+  const buttonHTML = `
+    <button type="button" id="${buttonId}" class="ncua-button-close-x ncua-button-close-x--${size} ncua-button-close-x--${theme} ${additionalClasses}" aria-label="${ariaLabel}">
+      ${X_CLOSE_SVG(svgSize.toString())}
+    </button>
+  `;
+  // onClick이 제공된 경우 이벤트 바인딩
+  if (onClick) {
+    // DOM에 추가된 후 이벤트 바인딩을 위해 setTimeout 사용
+    setTimeout(() => {
+      const button = document.getElementById(buttonId);
+      if (button) {
+        button.addEventListener('click', onClick);
+      }
+    }, 0);
+  }
+  return buttonHTML;
+}

package/dist/cjs/assets/scripts/utils/sanitize.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sanitizeHtml = sanitizeHtml;
+exports.setSafeInnerHTML = setSafeInnerHTML;
+var _dompurify = _interopRequireDefault(require("dompurify"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * HTML 문자열을 DOMPurify 기본 설정으로 sanitize한다.
+ *
+ * 제거되는 항목 (기본 설정):
+ * - `<script>`, `<iframe>`, `<object>` 등 실행 위험 태그
+ * - `onclick`, `onerror` 등 inline 이벤트 핸들러 속성
+ * - `href="javascript:..."` 같은 javascript: URL
+ *
+ * 유지되는 항목:
+ * - `<svg>`, `<button>`, `<div>`, `<span>`, `<input>` 등 일반 HTML/SVG 태그
+ * - `class`, `style`, `role`, `aria-*`, `data-*` 등 표현용 속성
+ * - SVG 표현 속성 (`viewBox`, `stroke`, `fill` 등)
+ *
+ * 이벤트 바인딩은 addEventListener로 별도 처리할 것.
+ */
+function sanitizeHtml(dirty) {
+  return _dompurify.default.sanitize(dirty);
+}
+/**
+ * 엘리먼트에 콘텐츠를 안전하게 설정한다.
+ * - string: sanitize 후 innerHTML 교체
+ * - HTMLElement: 기존 자식 제거 후 appendChild
+ */
+function setSafeInnerHTML(element, content) {
+  if (content instanceof HTMLElement) {
+    element.replaceChildren(content);
+    return;
+  }
+  element.innerHTML = sanitizeHtml(content);
+}

package/dist/cjs/src/components/data-display/data-grid/DataGrid.js

@@ -80,7 +80,9 @@ const DataGridTable = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     fixedHeader,
     maxHeight,
     hoverable,
-    selectable
+    selectable,
+    horizontalScroll,
+    minWidth
   } = _ref5;
   return (0, _jsxRuntime.jsx)("div", {
     ref: ref,
@@ -92,6 +94,8 @@ const DataGridTable = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
       maxHeight: maxHeight,
       hoverable: hoverable,
       selectable: selectable,
+      horizontalScroll: horizontalScroll,
+      minWidth: minWidth,
       children: children
     })
   });

package/dist/cjs/src/components/data-display/table/Table.js

@@ -8,13 +8,19 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
+var _FloatingContext = require("../../../contexts/FloatingContext");
+var _useTableScrollbars = require("./useTableScrollbars");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// ──────────────────────────────────────────────
-// $table-header-height 와 동기화 — sticky thead가 차지하는 높이를 maxHeight에 보상
-const TABLE_HEADER_HEIGHT = 40;
-// 스크롤바 트랙 상하 여백 합계 (top 8px + bottom 8px) — SCSS &--fixed-header &__scrollbar 오프셋과 동기화
-const SCROLLBAR_TRACK_OFFSET = 16;
-const SCROLLBAR_THUMB_MIN_HEIGHT = 40;
+// 가로 스크롤 디자인 기준 폭 — 14인치 모니터 + LNB 고려한 디자인 권장 너비
+const DEFAULT_HORIZONTAL_SCROLL_MIN_WIDTH = 1140;
+const FLOATING_PORTAL_VALUE = {
+  preferPortal: true
+};
+// TABLE_HEADER_HEIGHT·DEFAULT_HORIZONTAL_SCROLL_MIN_WIDTH를 CSS 커스텀 프로퍼티로 주입 — SCSS fallback 단일 소스
+const WRAPPER_STYLE = {
+  '--ncua-table-header-height': `${_useTableScrollbars.TABLE_HEADER_HEIGHT}px`,
+  '--ncua-table-default-min-width': `${DEFAULT_HORIZONTAL_SCROLL_MIN_WIDTH}px`
+};
 // Sort Icons (@ncds/ui-admin-icon)
 // ──────────────────────────────────────────────
 const SORT_ICONS = {
@@ -79,6 +85,7 @@ const HeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     sortDirection,
     onSort,
     width,
+    minWidth,
     style,
     ...rest
   } = _ref4;
@@ -91,7 +98,8 @@ const HeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     }),
     style: {
       ...style,
-      width
+      width,
+      minWidth
     },
     "aria-sort": isSortable ? ARIA_SORT_MAP[sortDirection] : undefined,
     onClick: isSortable ? onSort : undefined,
@@ -160,10 +168,11 @@ const Pagination = _ref7 => {
 Pagination.displayName = 'Table.Pagination';
 const ColGroup = _ref8 => {
   let {
-    widths
+    widths,
+    minWidths
   } = _ref8;
   const resolveColWidth = width => {
-    if (width === 'auto') return undefined;
+    if (width === undefined || width === 'auto') return undefined;
     if (typeof width === 'number') return `${width}px`;
     return width;
   };
@@ -172,7 +181,8 @@ const ColGroup = _ref8 => {
     // biome-ignore lint/suspicious/noArrayIndexKey: colgroup columns never reorder or change
     (0, _jsxRuntime.jsx)("col", {
       style: {
-        width: resolveColWidth(width)
+        width: resolveColWidth(width),
+        minWidth: resolveColWidth(minWidths?.[index])
       }
     }, index))
   });
@@ -234,6 +244,8 @@ const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref0, ref) => {
     maxHeight,
     hoverable = true,
     selectable = false,
+    horizontalScroll = false,
+    minWidth,
     children,
     className,
     ...rest
@@ -253,90 +265,104 @@ const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref0, ref) => {
     paginationContent
   } = sortChildren(children);
   const scrollStyle = fixedHeader && maxHeight ? {
-    maxHeight: typeof maxHeight === 'number' ? `${maxHeight + TABLE_HEADER_HEIGHT}px` : `calc(${maxHeight} + ${TABLE_HEADER_HEIGHT}px)`
+    maxHeight: typeof maxHeight === 'number' ? `${maxHeight + _useTableScrollbars.TABLE_HEADER_HEIGHT}px` : `calc(${maxHeight} + ${_useTableScrollbars.TABLE_HEADER_HEIGHT}px)`
   } : undefined;
   // Custom scrollbar refs (used only in fixed-header mode)
   const scrollContainerRef = (0, _react.useRef)(null);
   const scrollAreaRef = (0, _react.useRef)(null);
+  const scrollbarRef = (0, _react.useRef)(null);
   const thumbRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (!fixedHeader || !maxHeight) return;
-    const scrollEl = scrollContainerRef.current;
-    const thumbEl = thumbRef.current;
-    if (!scrollEl || !thumbEl) return;
-    const update = () => {
-      const {
-        scrollTop,
-        scrollHeight,
-        clientHeight
-      } = scrollEl;
-      if (scrollHeight <= clientHeight) {
-        thumbEl.style.height = '0';
-        return;
-      }
-      const trackHeight = (scrollAreaRef.current?.clientHeight ?? clientHeight) - TABLE_HEADER_HEIGHT - SCROLLBAR_TRACK_OFFSET;
-      const thumbHeight = Math.max(SCROLLBAR_THUMB_MIN_HEIGHT, clientHeight / scrollHeight * trackHeight);
-      const thumbTop = scrollTop / (scrollHeight - clientHeight) * (trackHeight - thumbHeight);
-      thumbEl.style.height = `${thumbHeight}px`;
-      thumbEl.style.transform = `translateY(${thumbTop}px)`;
-    };
-    scrollEl.addEventListener('scroll', update, {
-      passive: true
-    });
-    const observer = new ResizeObserver(update);
-    observer.observe(scrollEl);
-    update();
-    return () => {
-      scrollEl.removeEventListener('scroll', update);
-      observer.disconnect();
-    };
-  }, [fixedHeader, maxHeight]);
-  const handleThumbMouseDown = e => {
-    e.preventDefault();
-    const scrollEl = scrollContainerRef.current;
-    const thumbEl = thumbRef.current;
-    const areaEl = scrollAreaRef.current;
-    if (!scrollEl || !thumbEl) return;
-    areaEl?.setAttribute('data-dragging', '');
-    const startY = e.clientY;
-    const startScrollTop = scrollEl.scrollTop;
-    const {
-      scrollHeight,
-      clientHeight
-    } = scrollEl;
-    const thumbHeight = thumbEl.offsetHeight;
-    const scrollRatio = (scrollHeight - clientHeight) / (clientHeight - thumbHeight);
-    const onMove = ev => {
-      scrollEl.scrollTop = startScrollTop + (ev.clientY - startY) * scrollRatio;
-    };
-    const onUp = () => {
-      areaEl?.removeAttribute('data-dragging');
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-    };
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
+  // 가로 스크롤바 refs (horizontalScroll 모드)
+  const hScrollContainerRef = (0, _react.useRef)(null);
+  const hScrollbarRef = (0, _react.useRef)(null);
+  const hThumbRef = (0, _react.useRef)(null);
+  const fixedScrollEnabled = !!(fixedHeader && maxHeight);
+  const {
+    handleThumbMouseDown
+  } = (0, _useTableScrollbars.useTableVerticalScrollbar)({
+    enabled: fixedScrollEnabled,
+    scrollContainerRef,
+    scrollAreaRef,
+    thumbRef
+  });
+  const {
+    handleHThumbMouseDown
+  } = (0, _useTableScrollbars.useTableHorizontalScrollbar)({
+    enabled: horizontalScroll,
+    hScrollContainerRef,
+    hScrollbarRef,
+    hThumbRef
+  });
+  // <colgroup> + <thead> + <tbody> 묶음 — fixed-header 분기와 horizontalScroll 분기 모두에서 재사용
+  const renderTable = () => (0, _jsxRuntime.jsxs)("table", {
+    className: "ncua-table__table",
+    role: "table",
+    children: [colGroupContent, headerContent, tableContent]
+  });
+  // fixed-header 시 scroll-area + scrollbar 래핑, 아니면 <table> 그대로.
+  // withScrollbar=false 이면 scrollbar를 제외 — horizontalScroll 분기에서 scrollbar를
+  // h-scroll-container 형제 위치에 별도 렌더해 가로 스크롤 시 viewport 우측에 자연 고정.
+  const renderScrollableArea = function () {
+    let includeVerticalScrollbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    return fixedScrollEnabled ? (0, _jsxRuntime.jsxs)("div", {
+      ref: scrollAreaRef,
+      className: "ncua-table__scroll-area",
+      children: [(0, _jsxRuntime.jsx)("div", {
+        ref: scrollContainerRef,
+        className: "ncua-table__scroll-container",
+        style: scrollStyle,
+        children: renderTable()
+      }), includeVerticalScrollbar && (0, _jsxRuntime.jsx)("div", {
+        ref: scrollbarRef,
+        className: "ncua-table__scrollbar",
+        "aria-hidden": "true",
+        children: (0, _jsxRuntime.jsx)("div", {
+          ref: thumbRef,
+          className: "ncua-table__scrollbar-thumb",
+          onMouseDown: handleThumbMouseDown
+        })
+      })]
+    }) : renderTable();
   };
-  if (fixedHeader && maxHeight) {
-    return (0, _jsxRuntime.jsxs)("div", {
-      ref: ref,
-      className: "ncua-table-wrapper",
-      children: [(0, _jsxRuntime.jsxs)("div", {
-        className: tableClasses,
-        ...rest,
+  // horizontalScroll=true 시 외곽 wrapper + FloatingProvider 부착.
+  // 핵심 — __h-scroll-container 는 <table>(또는 scroll-area) 만 감싸고, footer/pagination 은
+  // 그 바깥에서 항상 고정 위치. 세로 스크롤바는 h-scroll-container 형제로 배치되어
+  // 가로 스크롤에 영향받지 않고 .ncua-table 우측에 absolute 고정된다.
+  if (horizontalScroll) {
+    const resolvedMinWidth = minWidth ?? DEFAULT_HORIZONTAL_SCROLL_MIN_WIDTH;
+    // CSS 변수로 전달 — SCSS 에서 max(100%, var(--ncua-table-min-width)) 로 부모 너비를 항상 보장한다.
+    // (inline min-width 를 직접 주면 부모보다 작은 값에서 wrapper 가 좁아져 콘텐츠가 깨짐)
+    const innerStyle = {
+      '--ncua-table-min-width': typeof resolvedMinWidth === 'number' ? `${resolvedMinWidth}px` : resolvedMinWidth
+    };
+    return (0, _jsxRuntime.jsx)(_FloatingContext.FloatingProvider, {
+      value: FLOATING_PORTAL_VALUE,
+      children: (0, _jsxRuntime.jsxs)("div", {
+        ref: ref,
+        className: "ncua-table-wrapper",
+        style: WRAPPER_STYLE,
         children: [(0, _jsxRuntime.jsxs)("div", {
-          ref: scrollAreaRef,
-          className: "ncua-table__scroll-area",
-          children: [(0, _jsxRuntime.jsx)("div", {
-            ref: scrollContainerRef,
-            className: "ncua-table__scroll-container",
-            style: scrollStyle,
-            children: (0, _jsxRuntime.jsxs)("table", {
-              className: "ncua-table__table",
-              role: "table",
-              children: [colGroupContent, headerContent, tableContent]
-            })
-          }), (0, _jsxRuntime.jsx)("div", {
+          className: tableClasses,
+          ...rest,
+          children: [(0, _jsxRuntime.jsxs)("div", {
+            ref: hScrollContainerRef,
+            className: "ncua-table__h-scroll-container",
+            children: [(0, _jsxRuntime.jsx)("div", {
+              className: "ncua-table__h-scroll-inner",
+              style: innerStyle,
+              children: renderScrollableArea(false)
+            }), (0, _jsxRuntime.jsx)("div", {
+              ref: hScrollbarRef,
+              className: "ncua-table__h-scrollbar",
+              "aria-hidden": "true",
+              children: (0, _jsxRuntime.jsx)("div", {
+                ref: hThumbRef,
+                className: "ncua-table__h-scrollbar-thumb",
+                onMouseDown: handleHThumbMouseDown
+              })
+            })]
+          }), fixedScrollEnabled && (0, _jsxRuntime.jsx)("div", {
+            ref: scrollbarRef,
             className: "ncua-table__scrollbar",
             "aria-hidden": "true",
             children: (0, _jsxRuntime.jsx)("div", {
@@ -344,23 +370,19 @@ const TableComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref0, ref) => {
               className: "ncua-table__scrollbar-thumb",
               onMouseDown: handleThumbMouseDown
             })
-          })]
-        }), footerContent]
-      }), paginationContent]
+          }), footerContent]
+        }), paginationContent]
+      })
     });
   }
-  const tableElement = (0, _jsxRuntime.jsxs)("table", {
-    className: "ncua-table__table",
-    role: "table",
-    children: [colGroupContent, headerContent, tableContent]
-  });
   return (0, _jsxRuntime.jsxs)("div", {
     ref: ref,
     className: "ncua-table-wrapper",
+    style: WRAPPER_STYLE,
     children: [(0, _jsxRuntime.jsxs)("div", {
       className: tableClasses,
       ...rest,
-      children: [tableElement, footerContent]
+      children: [renderScrollableArea(), footerContent]
     }), paginationContent]
   });
 });

package/dist/cjs/src/components/data-display/table/useTableScrollbars.js

@@ -0,0 +1,187 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableVerticalScrollbar = exports.useTableHorizontalScrollbar = exports.TABLE_HEADER_HEIGHT = exports.SCROLLBAR_TRACK_OFFSET = exports.SCROLLBAR_THUMB_MIN_HEIGHT = exports.H_SCROLLBAR_THUMB_MIN_WIDTH = exports.H_SCROLLBAR_SIDE_GAP = void 0;
+var _react = require("react");
+// ──────────────────────────────────────────────
+// 상수 — Table.tsx 와 _table.scss 양쪽에서 동기화 필요
+// ──────────────────────────────────────────────
+// $table-header-height
+const TABLE_HEADER_HEIGHT = exports.TABLE_HEADER_HEIGHT = 40;
+// 세로/가로 thumb 최소 크기
+const SCROLLBAR_THUMB_MIN_HEIGHT = exports.SCROLLBAR_THUMB_MIN_HEIGHT = 40;
+const H_SCROLLBAR_THUMB_MIN_WIDTH = exports.H_SCROLLBAR_THUMB_MIN_WIDTH = 40;
+// SCSS .ncua-table__h-scrollbar { left/right: var(--spacing-s) = 8px } 와 동기화
+const H_SCROLLBAR_SIDE_GAP = exports.H_SCROLLBAR_SIDE_GAP = 8;
+// 세로 트랙 상하 여백 합계 — top 8 + bottom 8 = 16 (header 회피분 40 은 별도 처리)
+// biome-ignore lint/style/useExportsLast: 상수는 문서 주석과 함께 상단에 정의
+const SCROLLBAR_TRACK_OFFSET = exports.SCROLLBAR_TRACK_OFFSET = 16;
+const startDrag = (e, options) => {
+  e.preventDefault();
+  const {
+    axis,
+    scrollEl,
+    thumbEl,
+    draggingTarget = scrollEl,
+    sideGap = 0
+  } = options;
+  draggingTarget.setAttribute('data-dragging', '');
+  if (axis === 'y') {
+    const startY = e.clientY;
+    const startScrollTop = scrollEl.scrollTop;
+    const {
+      scrollHeight,
+      clientHeight
+    } = scrollEl;
+    const thumbHeight = thumbEl.offsetHeight;
+    const ratio = (scrollHeight - clientHeight) / (clientHeight - thumbHeight);
+    const onMove = ev => {
+      scrollEl.scrollTop = startScrollTop + (ev.clientY - startY) * ratio;
+    };
+    const onUp = () => {
+      draggingTarget.removeAttribute('data-dragging');
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+    return;
+  }
+  const startX = e.clientX;
+  const startScrollLeft = scrollEl.scrollLeft;
+  const {
+    scrollWidth,
+    clientWidth
+  } = scrollEl;
+  const thumbWidth = thumbEl.offsetWidth;
+  const trackWidth = clientWidth - sideGap * 2;
+  const ratio = (scrollWidth - clientWidth) / (trackWidth - thumbWidth);
+  const onMove = ev => {
+    scrollEl.scrollLeft = startScrollLeft + (ev.clientX - startX) * ratio;
+  };
+  const onUp = () => {
+    draggingTarget.removeAttribute('data-dragging');
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+  };
+  document.addEventListener('mousemove', onMove);
+  document.addEventListener('mouseup', onUp);
+};
+const useTableVerticalScrollbar = _ref => {
+  let {
+    enabled,
+    scrollContainerRef,
+    scrollAreaRef,
+    thumbRef
+  } = _ref;
+  (0, _react.useEffect)(() => {
+    if (!enabled) return;
+    const scrollEl = scrollContainerRef.current;
+    const thumbEl = thumbRef.current;
+    if (!scrollEl || !thumbEl) return;
+    const update = () => {
+      const {
+        scrollTop,
+        scrollHeight,
+        clientHeight
+      } = scrollEl;
+      if (scrollHeight <= clientHeight) {
+        thumbEl.style.height = '0';
+        return;
+      }
+      const trackHeight = (scrollAreaRef.current?.clientHeight ?? clientHeight) - TABLE_HEADER_HEIGHT - SCROLLBAR_TRACK_OFFSET;
+      const thumbHeight = Math.max(SCROLLBAR_THUMB_MIN_HEIGHT, clientHeight / scrollHeight * trackHeight);
+      const thumbTop = scrollTop / (scrollHeight - clientHeight) * (trackHeight - thumbHeight);
+      thumbEl.style.height = `${thumbHeight}px`;
+      thumbEl.style.transform = `translateY(${thumbTop}px)`;
+    };
+    scrollEl.addEventListener('scroll', update, {
+      passive: true
+    });
+    const observer = new ResizeObserver(update);
+    observer.observe(scrollEl);
+    if (scrollAreaRef.current) observer.observe(scrollAreaRef.current);
+    update();
+    return () => {
+      scrollEl.removeEventListener('scroll', update);
+      observer.disconnect();
+    };
+  }, [enabled, scrollContainerRef, scrollAreaRef, thumbRef]);
+  const handleThumbMouseDown = e => {
+    const scrollEl = scrollContainerRef.current;
+    const thumbEl = thumbRef.current;
+    const areaEl = scrollAreaRef.current;
+    if (!scrollEl || !thumbEl) return;
+    startDrag(e, {
+      axis: 'y',
+      scrollEl,
+      thumbEl,
+      draggingTarget: areaEl ?? scrollEl
+    });
+  };
+  return {
+    handleThumbMouseDown
+  };
+};
+exports.useTableVerticalScrollbar = useTableVerticalScrollbar;
+const useTableHorizontalScrollbar = _ref2 => {
+  let {
+    enabled,
+    hScrollContainerRef,
+    hScrollbarRef,
+    hThumbRef
+  } = _ref2;
+  (0, _react.useEffect)(() => {
+    if (!enabled) return;
+    const hScrollEl = hScrollContainerRef.current;
+    const hScrollbarEl = hScrollbarRef.current;
+    const hThumbEl = hThumbRef.current;
+    if (!hScrollEl || !hScrollbarEl || !hThumbEl) return;
+    const update = () => {
+      const {
+        scrollLeft,
+        scrollWidth,
+        clientWidth
+      } = hScrollEl;
+      if (scrollWidth <= clientWidth) {
+        hThumbEl.style.width = '0';
+        return;
+      }
+      // transform으로 스크롤 오프셋 보정 — reflow 없이 compositor-only 이동
+      hScrollbarEl.style.transform = `translateX(${scrollLeft}px)`;
+      hScrollbarEl.style.width = `${clientWidth - H_SCROLLBAR_SIDE_GAP * 2}px`;
+      const trackWidth = clientWidth - H_SCROLLBAR_SIDE_GAP * 2;
+      const thumbWidth = Math.max(H_SCROLLBAR_THUMB_MIN_WIDTH, clientWidth / scrollWidth * trackWidth);
+      const thumbLeft = scrollLeft / (scrollWidth - clientWidth) * (trackWidth - thumbWidth);
+      hThumbEl.style.width = `${thumbWidth}px`;
+      hThumbEl.style.transform = `translateX(${thumbLeft}px)`;
+    };
+    hScrollEl.addEventListener('scroll', update, {
+      passive: true
+    });
+    const ro = new ResizeObserver(update);
+    ro.observe(hScrollEl);
+    update();
+    return () => {
+      hScrollEl.removeEventListener('scroll', update);
+      ro.disconnect();
+    };
+  }, [enabled, hScrollContainerRef, hScrollbarRef, hThumbRef]);
+  const handleHThumbMouseDown = e => {
+    const hScrollEl = hScrollContainerRef.current;
+    const hThumbEl = hThumbRef.current;
+    if (!hScrollEl || !hThumbEl) return;
+    startDrag(e, {
+      axis: 'x',
+      scrollEl: hScrollEl,
+      thumbEl: hThumbEl,
+      sideGap: H_SCROLLBAR_SIDE_GAP
+    });
+  };
+  return {
+    handleHThumbMouseDown
+  };
+};
+exports.useTableHorizontalScrollbar = useTableHorizontalScrollbar;

package/dist/cjs/src/components/forms-and-input/combo-box/ComboBox.js

@@ -17,13 +17,6 @@ var _HintText = require("../../shared/hintText/HintText");
 var _InputBase = require("../input-base/InputBase");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const defaultMaxHeight = exports.defaultMaxHeight = 275;
-const toggleMultiSelectValue = (currentValue, optionId) => {
-  const currentValues = Array.isArray(currentValue) ? currentValue : [];
-  if (currentValues.includes(optionId)) {
-    return currentValues.filter(v => v !== optionId);
-  }
-  return [...currentValues, optionId];
-};
 const notifyFormChange = (register, multiple, newValue) => {
   if (register?.onChange) {
     register.onChange({
@@ -55,6 +48,7 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
     required = false,
     multiple = false,
     showFooterButtons = false,
+    maxSelection,
     onEdit,
     ...props
   } = _ref;
@@ -67,7 +61,8 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   const handleOptionSelect = option => {
     if (disabled) return;
     if (multiple) {
-      const newValue = toggleMultiSelectValue(value ?? [], option.id);
+      const newValue = tryToggle(option.id, Array.isArray(value) ? value : []);
+      if (newValue === null) return;
       onChange?.(newValue);
       notifyFormChange(register, multiple, newValue);
       return;
@@ -144,6 +139,7 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
     // 나머지는 useDropdown 훅에서 처리
     dropdownHandleKeyDown(e);
   };
+  // biome-ignore lint/style/noNonNullAssertion: forwardRef 패턴에서 internalRef는 첫 렌더 후 항상 존재
   (0, _react.useImperativeHandle)(ref, () => internalRef.current, []);
   const trailingElement = {
     type: 'custom',
@@ -173,8 +169,12 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
     buttonText: selectAllButtonText,
     toggleSelectAll,
     getSelectedTagsData,
-    removeTag
-  } = (0, _multiSelect.useMultiSelect)(currentSelectedValues, optionItems);
+    removeTag,
+    isMaxSelectionActive,
+    tryToggle
+  } = (0, _multiSelect.useMultiSelect)(currentSelectedValues, optionItems, {
+    maxSelection
+  });
   const handleSelectAll = () => {
     if (!multiple || !onChange) return;
     const newSelectedValues = toggleSelectAll();
@@ -260,6 +260,7 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
           multiple: multiple,
           showFooterButtons: showFooter,
           selectAllButtonText: selectAllButtonText,
+          showSelectAllAction: !isMaxSelectionActive,
           onSelectAll: handleSelectAll,
           onEdit: handleEdit,
           onComplete: handleComplete,

package/dist/cjs/src/components/forms-and-input/image-file-input/ImageFileInput.js

@@ -139,9 +139,12 @@ const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardR
           onClick: handleBrowseClick,
           disabled: disabled,
           label: imagePreviewTooltipLabel
-        }), isButtonHovered && !disabled && (0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+        }), (0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
           content: imagePreviewTooltipLabel,
-          position: "bottom"
+          position: "bottom",
+          tooltipType: "black",
+          forceVisible: isButtonHovered && !disabled,
+          disablePortal: true
         })]
       })]
     });