@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/esm/src/components/tooltip/Tooltip.js

@@ -1,139 +1,124 @@
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircle, AlertCircleFill, HelpCircle, HelpCircleFill } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { useRef, useState, useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { ButtonCloseX } from '../button/ButtonCloseX';
-var MARGIN = 10;
-var DEFAULT_TOOLTIP_WIDTH = 200;
-var DEFAULT_TOOLTIP_HEIGHT = 60;
-var POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
-// 위치 계산 position='auto' 일 때 사용
-var calculateOptimalPosition = function (triggerElement, tooltipElement, preferredPosition) {
-  if (preferredPosition === void 0) {
-    preferredPosition = 'bottom';
+const ICON_SIZE_SM = 14;
+const ICON_SIZE_DEFAULT = 16;
+const MARGIN = 10;
+const DEFAULT_TOOLTIP_WIDTH = 200;
+const DEFAULT_TOOLTIP_HEIGHT = 60;
+const POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
+// 수직 위치(top/bottom)일 때 수평 정렬 보정
+const resolveVerticalAlignment = (position, triggerRect, tooltipWidth, viewportWidth) => {
+  const centerX = triggerRect.left + triggerRect.width / 2;
+  const tooltipHalfWidth = tooltipWidth / 2;
+  if (centerX - tooltipHalfWidth < MARGIN) {
+    return `${position}-left`;
+  }
+  if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
+    return `${position}-right`;
   }
-  var triggerRect = triggerElement.getBoundingClientRect();
-  var tooltipRect = tooltipElement.getBoundingClientRect();
-  var viewportWidth = window.innerWidth,
-    viewportHeight = window.innerHeight;
-  var spaces = {
+  return position;
+};
+// 해당 위치에 툴팁을 배치할 충분한 공간이 있는지 확인
+const hasEnoughSpace = (position, spaces, tooltipWidth, tooltipHeight) => {
+  const isVertical = position === 'bottom' || position === 'top';
+  const requiredSpace = isVertical ? tooltipHeight : tooltipWidth;
+  return spaces[position] >= requiredSpace + MARGIN;
+};
+// 위치 계산 position='auto' 일 때 사용
+const calculateOptimalPosition = function (triggerElement, tooltipElement) {
+  let preferredPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'bottom';
+  const triggerRect = triggerElement.getBoundingClientRect();
+  const tooltipRect = tooltipElement.getBoundingClientRect();
+  const {
+    innerWidth: viewportWidth,
+    innerHeight: viewportHeight
+  } = window;
+  const spaces = {
     top: triggerRect.top,
     bottom: viewportHeight - triggerRect.bottom,
     left: triggerRect.left,
     right: viewportWidth - triggerRect.right
   };
-  var tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
-  var tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
-  for (var _i = 0, POSITION_PRIORITY_1 = POSITION_PRIORITY; _i < POSITION_PRIORITY_1.length; _i++) {
-    var position = POSITION_PRIORITY_1[_i];
-    var hasSpace = position === 'bottom' || position === 'top' ? spaces[position] >= tooltipHeight + MARGIN : spaces[position] >= tooltipWidth + MARGIN;
-    if (hasSpace) {
-      if (position === 'bottom' || position === 'top') {
-        var centerX = triggerRect.left + triggerRect.width / 2;
-        var tooltipHalfWidth = tooltipWidth / 2;
-        if (centerX - tooltipHalfWidth < MARGIN) {
-          return "".concat(position, "-left");
-        } else if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
-          return "".concat(position, "-right");
-        }
-      }
-      return position;
+  const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+  const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+  for (const position of POSITION_PRIORITY) {
+    if (!hasEnoughSpace(position, spaces, tooltipWidth, tooltipHeight)) {
+      continue;
+    }
+    const isVertical = position === 'bottom' || position === 'top';
+    if (isVertical) {
+      return resolveVerticalAlignment(position, triggerRect, tooltipWidth, viewportWidth);
     }
+    return position;
   }
   return preferredPosition;
 };
-export var Tooltip = function (_a) {
-  var _b = _a.tooltipType,
-    tooltipType = _b === void 0 ? 'black' : _b,
-    _c = _a.iconType,
-    iconType = _c === void 0 ? 'stroke' : _c,
-    _d = _a.position,
-    position = _d === void 0 ? 'auto' : _d,
-    _e = _a.size,
-    size = _e === void 0 ? 'sm' : _e,
-    title = _a.title,
-    content = _a.content,
-    _f = _a.hideArrow,
-    hideArrow = _f === void 0 ? false : _f,
-    _g = _a.type,
-    type = _g === void 0 ? 'short' : _g,
-    _h = _a.iconColor,
-    iconColor = _h === void 0 ? 'var(--gray-300)' : _h,
-    _j = _a.iconStyle,
-    iconStyle = _j === void 0 ? 'help-circle' : _j,
-    className = _a.className;
-  var iconSize = size === 'sm' ? 14 : 16;
-  var tooltipRef = useRef(null);
-  var tooltipBgRef = useRef(null);
-  var _k = useState(position === 'auto' ? 'bottom' : position),
-    calculatedPosition = _k[0],
-    setCalculatedPosition = _k[1];
-  var _l = useState(false),
-    isVisible = _l[0],
-    setIsVisible = _l[1];
-  var _m = useState(false),
-    isManuallyClose = _m[0],
-    setIsManuallyClose = _m[1];
-  var _o = useState(false),
-    isMeasuring = _o[0],
-    setIsMeasuring = _o[1];
-  var handleMouseEnter = useCallback(function () {
+export const Tooltip = _ref => {
+  let {
+    tooltipType = 'white',
+    iconType = 'stroke',
+    position = 'auto',
+    size = 'sm',
+    title,
+    content,
+    hideArrow = false,
+    type = 'short',
+    iconColor = 'var(--gray-300)',
+    iconStyle = 'help-circle',
+    className
+  } = _ref;
+  const iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
+  const tooltipRef = useRef(null);
+  const tooltipBgRef = useRef(null);
+  const [calculatedPosition, setCalculatedPosition] = useState(position === 'auto' ? 'bottom' : position);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isManuallyClose, setIsManuallyClose] = useState(false);
+  const [isMeasuring, setIsMeasuring] = useState(false);
+  const handleMouseEnter = useCallback(() => {
     if (isManuallyClose) return;
     setIsVisible(true);
     if (position === 'auto' && tooltipRef.current && tooltipBgRef.current) {
       // 크기 측정을 위해 임시로 measuring 클래스 추가
       setIsMeasuring(true);
       // 다음 렌더링 사이클에서 크기 측정
-      setTimeout(function () {
+      setTimeout(() => {
         if (tooltipRef.current && tooltipBgRef.current) {
-          var optimalPosition = calculateOptimalPosition(tooltipRef.current, tooltipBgRef.current, 'bottom');
+          const optimalPosition = calculateOptimalPosition(tooltipRef.current, tooltipBgRef.current, 'bottom');
           setCalculatedPosition(optimalPosition);
           setIsMeasuring(false);
         }
       }, 0);
     }
   }, [position, isManuallyClose]);
-  var handleMouseLeave = useCallback(function () {
+  const handleMouseLeave = useCallback(() => {
     if (type === 'short') {
       setIsVisible(false);
     }
     setIsManuallyClose(false);
   }, [type]);
-  var handleCloseClick = useCallback(function () {
+  const handleCloseClick = useCallback(() => {
     setIsVisible(false);
     setIsManuallyClose(true);
   }, []);
-  var finalPosition = position === 'auto' ? calculatedPosition : position;
-  var tooltipClassName = useMemo(function () {
-    return classNames('ncua-tooltip', "ncua-tooltip--".concat(size), "ncua-tooltip--".concat(type), {
-      'ncua-tooltip--hidden-arrow': hideArrow,
-      'ncua-tooltip--stroke': iconType === 'stroke',
-      'ncua-tooltip--auto': position === 'auto'
-    }, className);
-  }, [size, type, hideArrow, iconType, position, className]);
-  var tooltipBgClassName = useMemo(function () {
-    return classNames('ncua-tooltip__bg', "ncua-tooltip__bg--".concat(tooltipType), "ncua-tooltip__bg--".concat(finalPosition), {
-      'ncua-tooltip__bg--visible': isVisible,
-      'ncua-tooltip__bg--measuring': isMeasuring,
-      'ncua-tooltip__bg--force-hidden': isManuallyClose
-    });
-  }, [tooltipType, finalPosition, isVisible, isMeasuring, isManuallyClose]);
-  return _jsxs("span", __assign({
+  const finalPosition = position === 'auto' ? calculatedPosition : position;
+  const tooltipClassName = useMemo(() => classNames('ncua-tooltip', `ncua-tooltip--${size}`, `ncua-tooltip--${type}`, {
+    'ncua-tooltip--hidden-arrow': hideArrow,
+    'ncua-tooltip--stroke': iconType === 'stroke',
+    'ncua-tooltip--auto': position === 'auto'
+  }, className), [size, type, hideArrow, iconType, position, className]);
+  const tooltipBgClassName = useMemo(() => classNames('ncua-tooltip__bg', `ncua-tooltip__bg--${tooltipType}`, `ncua-tooltip__bg--${finalPosition}`, {
+    'ncua-tooltip__bg--visible': isVisible,
+    'ncua-tooltip__bg--measuring': isMeasuring,
+    'ncua-tooltip__bg--force-hidden': isManuallyClose
+  }), [tooltipType, finalPosition, isVisible, isMeasuring, isManuallyClose]);
+  return _jsxs("span", {
     ref: tooltipRef,
     className: tooltipClassName,
     onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, {
+    onMouseLeave: handleMouseLeave,
     children: [iconStyle === 'help-circle' && (iconType === 'stroke' ? _jsx(HelpCircle, {
       width: iconSize,
       height: iconSize,
@@ -150,25 +135,22 @@ export var Tooltip = function (_a) {
       width: iconSize,
       height: iconSize,
       color: iconColor
-    })), _jsxs("span", __assign({
+    })), _jsxs("span", {
       ref: tooltipBgRef,
-      className: tooltipBgClassName
-    }, {
-      children: [title && _jsx("span", __assign({
-        className: "ncua-tooltip__title"
-      }, {
+      className: tooltipBgClassName,
+      children: [title && _jsx("span", {
+        className: "ncua-tooltip__title",
         children: title
-      })), content && _jsx("span", __assign({
-        className: "ncua-tooltip__content"
-      }, {
+      }), content && _jsx("span", {
+        className: "ncua-tooltip__content",
         children: content
-      })), type === 'long' && _jsx(ButtonCloseX, {
+      }), type === 'long' && _jsx(ButtonCloseX, {
         className: "ncua-tooltip__close-button",
         size: "xs",
         theme: tooltipType === 'white' ? 'dark' : 'light',
         onClick: handleCloseClick,
         "aria-label": "\uD234\uD301 \uB2EB\uAE30"
       })]
-    }))]
-  }));
+    })]
+  });
 };

package/dist/esm/src/components/vertical-tab/VerticalTab.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Select } from '../select/Select';
+import { TabButton } from '../tab/TabButton';
+export const VerticalTab = _ref => {
+  let {
+    type = 'button-primary',
+    breakPoint = 'pc',
+    activeTab,
+    menus,
+    onSelect
+  } = _ref;
+  const handleSelectChange = e => {
+    onSelect?.(e.target.value);
+  };
+  const optionItems = menus?.map(menu => ({
+    id: menu.id || '',
+    label: menu.label || ''
+  })) || [];
+  if (breakPoint === 'mobile') {
+    return _jsx(Select, {
+      value: activeTab,
+      onChange: handleSelectChange,
+      optionItems: optionItems,
+      size: "md"
+    });
+  }
+  return _jsx("div", {
+    className: classNames('ncua-vertical-tab', `ncua-vertical-tab--${type}`),
+    children: menus?.map(menu => {
+      const isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
+      return _jsx(TabButton, {
+        ...menu,
+        isActive: isActive,
+        tabButtonType: type,
+        size: "md"
+      }, menu.id);
+    })
+  });
+};

package/dist/esm/src/components/vertical-tab/index.js

@@ -0,0 +1 @@
+export * from './VerticalTab';

package/dist/esm/src/constant/breakpoint.js

@@ -1,6 +1,6 @@
-export var BREAKPOINT = {
+export const BREAKPOINT = {
   mobile: '768px'
 };
-export var MEDIA_QUERY = {
-  mobile: "(max-width: ".concat(BREAKPOINT.mobile, ")")
+export const MEDIA_QUERY = {
+  mobile: `(max-width: ${BREAKPOINT.mobile})`
 };

package/dist/esm/src/constant/date-picker.js

@@ -1,4 +1,4 @@
-export var PERIOD_ITEM = {
+export const PERIOD_ITEM = {
   TODAY: {
     text: '오늘',
     period: 0,

package/dist/esm/src/constant/index.js

@@ -1,2 +1,2 @@
-export * from './size';
-export * from './date-picker';
+export * from './date-picker';
+export * from './size';

package/dist/esm/src/constant/size.js

@@ -1 +1 @@
-export var MINIMUM_PC_SIZE = 768;
+export const MINIMUM_PC_SIZE = 768;

package/dist/esm/src/hooks/dropdown/useDropdown.js

@@ -6,51 +6,48 @@ import { useWindowResize } from './useWindowResize';
 /**
  * 드롭다운 기능을 통합한 커스텀 훅
  */
-export var useDropdown = function (config) {
-  var triggerRef = config.triggerRef,
-    dropdownRef = config.dropdownRef,
-    maxHeight = config.maxHeight,
-    itemCount = config.itemCount,
-    optionItems = config.optionItems,
-    _a = config.disabled,
-    disabled = _a === void 0 ? false : _a,
-    _b = config.multiple,
-    multiple = _b === void 0 ? false : _b,
-    onSelect = config.onSelect,
-    onChange = config.onChange;
-  var _c = useState(false),
-    isOpen = _c[0],
-    setIsOpen = _c[1];
-  var _d = useState(-1),
-    focusedIndex = _d[0],
-    setFocusedIndex = _d[1];
+export const useDropdown = config => {
+  const {
+    triggerRef,
+    dropdownRef,
+    maxHeight,
+    itemCount,
+    optionItems,
+    disabled = false,
+    multiple = false,
+    onSelect,
+    onChange
+  } = config;
+  const [isOpen, setIsOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
   // 드롭다운 위치 계산
-  var _e = useDropdownPosition({
-      triggerRef: triggerRef,
-      maxHeight: maxHeight,
-      itemCount: itemCount
-    }),
-    direction = _e.direction,
-    updatePosition = _e.updatePosition;
+  const {
+    direction,
+    updatePosition
+  } = useDropdownPosition({
+    triggerRef,
+    maxHeight,
+    itemCount
+  });
   // 드롭다운 토글
-  var toggleDropdown = useCallback(function () {
+  const toggleDropdown = useCallback(() => {
     if (disabled) return;
-    var newIsOpen = !isOpen;
+    const newIsOpen = !isOpen;
     if (newIsOpen) {
       updatePosition();
       setFocusedIndex(-1);
     }
     setIsOpen(newIsOpen);
-    onChange === null || onChange === void 0 ? void 0 : onChange(newIsOpen);
+    onChange?.(newIsOpen);
   }, [disabled, isOpen, updatePosition, onChange]);
   // 드롭다운 닫기
-  var closeDropdown = useCallback(function () {
+  const closeDropdown = useCallback(() => {
     setIsOpen(false);
     setFocusedIndex(-1);
-    onChange === null || onChange === void 0 ? void 0 : onChange(false);
+    onChange?.(false);
   }, [onChange]);
   // 옵션 선택 처리
-  var handleOptionSelect = useCallback(function (option) {
+  const handleOptionSelect = useCallback(option => {
     onSelect(option);
     // multiple 모드가 아니어야 드롭다운을 닫음
     if (!multiple) {
@@ -58,45 +55,46 @@ export var useDropdown = function (config) {
     }
   }, [onSelect, closeDropdown, multiple]);
   // 키보드 이벤트 처리
-  var _f = useDropdownKeyboard({
-      isOpen: isOpen,
-      disabled: disabled,
-      focusedIndex: focusedIndex,
-      optionItems: optionItems,
-      onToggle: toggleDropdown,
-      onSelect: handleOptionSelect,
-      onClose: closeDropdown,
-      onFocusChange: setFocusedIndex,
-      triggerRef: triggerRef,
-      dropdownRef: dropdownRef
-    }),
-    handleKeyDown = _f.handleKeyDown,
-    handleMouseMove = _f.handleMouseMove,
-    isKeyboardNavigation = _f.isKeyboardNavigation;
+  const {
+    handleKeyDown,
+    handleMouseMove,
+    isKeyboardNavigation
+  } = useDropdownKeyboard({
+    isOpen,
+    disabled,
+    focusedIndex,
+    optionItems,
+    onToggle: toggleDropdown,
+    onSelect: handleOptionSelect,
+    onClose: closeDropdown,
+    onFocusChange: setFocusedIndex,
+    triggerRef,
+    dropdownRef
+  });
   // 외부 클릭 감지
-  var refs = dropdownRef ? [triggerRef, dropdownRef] : [triggerRef];
+  const refs = dropdownRef ? [triggerRef, dropdownRef] : [triggerRef];
   useOutsideClick({
-    isOpen: isOpen,
-    refs: refs,
+    isOpen,
+    refs,
     onClose: closeDropdown
   });
   // 윈도우 리사이즈 시 위치 재계산
   useWindowResize(updatePosition, isOpen, triggerRef.current);
   return {
     // 상태
-    isOpen: isOpen,
-    direction: direction,
-    focusedIndex: focusedIndex,
+    isOpen,
+    direction,
+    focusedIndex,
     // 액션
-    toggleDropdown: toggleDropdown,
-    closeDropdown: closeDropdown,
-    handleOptionSelect: handleOptionSelect,
-    handleKeyDown: handleKeyDown,
-    setFocusedIndex: setFocusedIndex,
+    toggleDropdown,
+    closeDropdown,
+    handleOptionSelect,
+    handleKeyDown,
+    setFocusedIndex,
     // 키보드 네비게이션
-    handleMouseMove: handleMouseMove,
-    isKeyboardNavigation: isKeyboardNavigation,
+    handleMouseMove,
+    isKeyboardNavigation,
     // 유틸리티
-    updatePosition: updatePosition
+    updatePosition
   };
 };