@ncds/ui-admin 1.8.3 → 1.8.5

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

@@ -1,13 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronSelectorVertical, ChevronUp } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { Children, forwardRef, useEffect, useRef } from 'react';
-// ──────────────────────────────────────────────
-// $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;
+import { Children, forwardRef, useRef } from 'react';
+import { FloatingProvider } from '../../../contexts/FloatingContext';
+import { TABLE_HEADER_HEIGHT, useTableHorizontalScrollbar, useTableVerticalScrollbar } from './useTableScrollbars';
+// 가로 스크롤 디자인 기준 폭 — 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': `${TABLE_HEADER_HEIGHT}px`,
+  '--ncua-table-default-min-width': `${DEFAULT_HORIZONTAL_SCROLL_MIN_WIDTH}px`
+};
 // Sort Icons (@ncds/ui-admin-icon)
 // ──────────────────────────────────────────────
 const SORT_ICONS = {
@@ -72,6 +78,7 @@ const HeaderCell = /*#__PURE__*/forwardRef((_ref4, ref) => {
     sortDirection,
     onSort,
     width,
+    minWidth,
     style,
     ...rest
   } = _ref4;
@@ -84,7 +91,8 @@ const HeaderCell = /*#__PURE__*/forwardRef((_ref4, ref) => {
     }),
     style: {
       ...style,
-      width
+      width,
+      minWidth
     },
     "aria-sort": isSortable ? ARIA_SORT_MAP[sortDirection] : undefined,
     onClick: isSortable ? onSort : undefined,
@@ -153,10 +161,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;
   };
@@ -165,7 +174,8 @@ const ColGroup = _ref8 => {
     // biome-ignore lint/suspicious/noArrayIndexKey: colgroup columns never reorder or change
     _jsx("col", {
       style: {
-        width: resolveColWidth(width)
+        width: resolveColWidth(width),
+        minWidth: resolveColWidth(minWidths?.[index])
       }
     }, index))
   });
@@ -227,6 +237,8 @@ const TableComponent = /*#__PURE__*/forwardRef((_ref0, ref) => {
     maxHeight,
     hoverable = true,
     selectable = false,
+    horizontalScroll = false,
+    minWidth,
     children,
     className,
     ...rest
@@ -251,85 +263,99 @@ const TableComponent = /*#__PURE__*/forwardRef((_ref0, ref) => {
   // Custom scrollbar refs (used only in fixed-header mode)
   const scrollContainerRef = useRef(null);
   const scrollAreaRef = useRef(null);
+  const scrollbarRef = useRef(null);
   const thumbRef = useRef(null);
-  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 = useRef(null);
+  const hScrollbarRef = useRef(null);
+  const hThumbRef = useRef(null);
+  const fixedScrollEnabled = !!(fixedHeader && maxHeight);
+  const {
+    handleThumbMouseDown
+  } = useTableVerticalScrollbar({
+    enabled: fixedScrollEnabled,
+    scrollContainerRef,
+    scrollAreaRef,
+    thumbRef
+  });
+  const {
+    handleHThumbMouseDown
+  } = useTableHorizontalScrollbar({
+    enabled: horizontalScroll,
+    hScrollContainerRef,
+    hScrollbarRef,
+    hThumbRef
+  });
+  // <colgroup> + <thead> + <tbody> 묶음 — fixed-header 분기와 horizontalScroll 분기 모두에서 재사용
+  const renderTable = () => _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 ? _jsxs("div", {
+      ref: scrollAreaRef,
+      className: "ncua-table__scroll-area",
+      children: [_jsx("div", {
+        ref: scrollContainerRef,
+        className: "ncua-table__scroll-container",
+        style: scrollStyle,
+        children: renderTable()
+      }), includeVerticalScrollbar && _jsx("div", {
+        ref: scrollbarRef,
+        className: "ncua-table__scrollbar",
+        "aria-hidden": "true",
+        children: _jsx("div", {
+          ref: thumbRef,
+          className: "ncua-table__scrollbar-thumb",
+          onMouseDown: handleThumbMouseDown
+        })
+      })]
+    }) : renderTable();
   };
-  if (fixedHeader && maxHeight) {
-    return _jsxs("div", {
-      ref: ref,
-      className: "ncua-table-wrapper",
-      children: [_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 _jsx(FloatingProvider, {
+      value: FLOATING_PORTAL_VALUE,
+      children: _jsxs("div", {
+        ref: ref,
+        className: "ncua-table-wrapper",
+        style: WRAPPER_STYLE,
         children: [_jsxs("div", {
-          ref: scrollAreaRef,
-          className: "ncua-table__scroll-area",
-          children: [_jsx("div", {
-            ref: scrollContainerRef,
-            className: "ncua-table__scroll-container",
-            style: scrollStyle,
-            children: _jsxs("table", {
-              className: "ncua-table__table",
-              role: "table",
-              children: [colGroupContent, headerContent, tableContent]
-            })
-          }), _jsx("div", {
+          className: tableClasses,
+          ...rest,
+          children: [_jsxs("div", {
+            ref: hScrollContainerRef,
+            className: "ncua-table__h-scroll-container",
+            children: [_jsx("div", {
+              className: "ncua-table__h-scroll-inner",
+              style: innerStyle,
+              children: renderScrollableArea(false)
+            }), _jsx("div", {
+              ref: hScrollbarRef,
+              className: "ncua-table__h-scrollbar",
+              "aria-hidden": "true",
+              children: _jsx("div", {
+                ref: hThumbRef,
+                className: "ncua-table__h-scrollbar-thumb",
+                onMouseDown: handleHThumbMouseDown
+              })
+            })]
+          }), fixedScrollEnabled && _jsx("div", {
+            ref: scrollbarRef,
             className: "ncua-table__scrollbar",
             "aria-hidden": "true",
             children: _jsx("div", {
@@ -337,23 +363,19 @@ const TableComponent = /*#__PURE__*/forwardRef((_ref0, ref) => {
               className: "ncua-table__scrollbar-thumb",
               onMouseDown: handleThumbMouseDown
             })
-          })]
-        }), footerContent]
-      }), paginationContent]
+          }), footerContent]
+        }), paginationContent]
+      })
     });
   }
-  const tableElement = _jsxs("table", {
-    className: "ncua-table__table",
-    role: "table",
-    children: [colGroupContent, headerContent, tableContent]
-  });
   return _jsxs("div", {
     ref: ref,
     className: "ncua-table-wrapper",
+    style: WRAPPER_STYLE,
     children: [_jsxs("div", {
       className: tableClasses,
       ...rest,
-      children: [tableElement, footerContent]
+      children: [renderScrollableArea(), footerContent]
     }), paginationContent]
   });
 });

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

@@ -0,0 +1,179 @@
+import { useEffect } from 'react';
+// ──────────────────────────────────────────────
+// 상수 — Table.tsx 와 _table.scss 양쪽에서 동기화 필요
+// ──────────────────────────────────────────────
+// $table-header-height
+export const TABLE_HEADER_HEIGHT = 40;
+// 세로/가로 thumb 최소 크기
+export const SCROLLBAR_THUMB_MIN_HEIGHT = 40;
+export const H_SCROLLBAR_THUMB_MIN_WIDTH = 40;
+// SCSS .ncua-table__h-scrollbar { left/right: var(--spacing-s) = 8px } 와 동기화
+export const H_SCROLLBAR_SIDE_GAP = 8;
+// 세로 트랙 상하 여백 합계 — top 8 + bottom 8 = 16 (header 회피분 40 은 별도 처리)
+// biome-ignore lint/style/useExportsLast: 상수는 문서 주석과 함께 상단에 정의
+export const 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);
+};
+export const useTableVerticalScrollbar = _ref => {
+  let {
+    enabled,
+    scrollContainerRef,
+    scrollAreaRef,
+    thumbRef
+  } = _ref;
+  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
+  };
+};
+export const useTableHorizontalScrollbar = _ref2 => {
+  let {
+    enabled,
+    hScrollContainerRef,
+    hScrollbarRef,
+    hThumbRef
+  } = _ref2;
+  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
+  };
+};

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

@@ -10,13 +10,6 @@ import { SelectDropdown } from '../../select-dropdown';
 import { HintText } from '../../shared/hintText/HintText';
 import { InputBase } from '../input-base/InputBase';
 const 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({
@@ -48,6 +41,7 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     required = false,
     multiple = false,
     showFooterButtons = false,
+    maxSelection,
     onEdit,
     ...props
   } = _ref;
@@ -60,7 +54,8 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   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;
@@ -137,6 +132,7 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     // 나머지는 useDropdown 훅에서 처리
     dropdownHandleKeyDown(e);
   };
+  // biome-ignore lint/style/noNonNullAssertion: forwardRef 패턴에서 internalRef는 첫 렌더 후 항상 존재
   useImperativeHandle(ref, () => internalRef.current, []);
   const trailingElement = {
     type: 'custom',
@@ -166,8 +162,12 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     buttonText: selectAllButtonText,
     toggleSelectAll,
     getSelectedTagsData,
-    removeTag
-  } = useMultiSelect(currentSelectedValues, optionItems);
+    removeTag,
+    isMaxSelectionActive,
+    tryToggle
+  } = useMultiSelect(currentSelectedValues, optionItems, {
+    maxSelection
+  });
   const handleSelectAll = () => {
     if (!multiple || !onChange) return;
     const newSelectedValues = toggleSelectAll();
@@ -253,6 +253,7 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
           multiple: multiple,
           showFooterButtons: showFooter,
           selectAllButtonText: selectAllButtonText,
+          showSelectAllAction: !isMaxSelectionActive,
           onSelectAll: handleSelectAll,
           onEdit: handleEdit,
           onComplete: handleComplete,

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

@@ -132,9 +132,12 @@ export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
           onClick: handleBrowseClick,
           disabled: disabled,
           label: imagePreviewTooltipLabel
-        }), isButtonHovered && !disabled && _jsx(Tooltip, {
+        }), _jsx(Tooltip, {
           content: imagePreviewTooltipLabel,
-          position: "bottom"
+          position: "bottom",
+          tooltipType: "black",
+          forceVisible: isButtonHovered && !disabled,
+          disablePortal: true
         })]
       })]
     });