@ncds/ui-admin 1.6.4-alpha.1 → 1.7.0

package/dist/esm/src/components/toggle/Toggle.js

@@ -16,11 +16,11 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 export var Toggle = function (_a) {
   var _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
+    size = _b === void 0 ? 'sm' : _b,
     _c = _a.text,
     text = _c === void 0 ? '' : _c,
     _d = _a.supportText,
@@ -47,20 +47,18 @@ export var Toggle = function (_a) {
       children: _jsx("span", {
         className: "ncua-toggle__slider"
       })
-    })), text && _jsx(_Fragment, {
-      children: _jsxs("span", __assign({
-        className: "ncua-toggle__text-wrapper"
+    })), text && _jsxs("span", __assign({
+      className: "ncua-toggle__text-wrapper"
+    }, {
+      children: [_jsx("span", __assign({
+        className: "ncua-toggle__text"
+      }, {
+        children: text
+      })), supportText && _jsx("span", __assign({
+        className: "ncua-toggle__support-text"
       }, {
-        children: [_jsx("span", __assign({
-          className: "ncua-toggle__text"
-        }, {
-          children: text
-        })), supportText && _jsx("span", __assign({
-          className: "ncua-toggle__support-text"
-        }, {
-          children: supportText
-        }))]
-      }))
-    })]
+        children: supportText
+      }))]
+    }))]
   }));
 };

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

@@ -11,12 +11,32 @@ var __assign = this && this.__assign || function () {
 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 ICON_SIZE_SM = 14;
+var ICON_SIZE_DEFAULT = 16;
 var MARGIN = 10;
 var DEFAULT_TOOLTIP_WIDTH = 200;
 var DEFAULT_TOOLTIP_HEIGHT = 60;
 var POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
+// 수직 위치(top/bottom)일 때 수평 정렬 보정
+var resolveVerticalAlignment = function (position, triggerRect, tooltipWidth, viewportWidth) {
+  var centerX = triggerRect.left + triggerRect.width / 2;
+  var tooltipHalfWidth = tooltipWidth / 2;
+  if (centerX - tooltipHalfWidth < MARGIN) {
+    return "".concat(position, "-left");
+  }
+  if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
+    return "".concat(position, "-right");
+  }
+  return position;
+};
+// 해당 위치에 툴팁을 배치할 충분한 공간이 있는지 확인
+var hasEnoughSpace = function (position, spaces, tooltipWidth, tooltipHeight) {
+  var isVertical = position === 'bottom' || position === 'top';
+  var requiredSpace = isVertical ? tooltipHeight : tooltipWidth;
+  return spaces[position] >= requiredSpace + MARGIN;
+};
 // 위치 계산 position='auto' 일 때 사용
 var calculateOptimalPosition = function (triggerElement, tooltipElement, preferredPosition) {
   if (preferredPosition === void 0) {
@@ -36,19 +56,14 @@ var calculateOptimalPosition = function (triggerElement, tooltipElement, preferr
   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;
+    if (!hasEnoughSpace(position, spaces, tooltipWidth, tooltipHeight)) {
+      continue;
+    }
+    var isVertical = position === 'bottom' || position === 'top';
+    if (isVertical) {
+      return resolveVerticalAlignment(position, triggerRect, tooltipWidth, viewportWidth);
     }
+    return position;
   }
   return preferredPosition;
 };
@@ -72,7 +87,7 @@ export var Tooltip = function (_a) {
     _j = _a.iconStyle,
     iconStyle = _j === void 0 ? 'help-circle' : _j,
     className = _a.className;
-  var iconSize = size === 'sm' ? 14 : 16;
+  var iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
   var tooltipRef = useRef(null);
   var tooltipBgRef = useRef(null);
   var _k = useState(position === 'auto' ? 'bottom' : position),

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/hooks/dropdown/useDropdownKeyboard.js

@@ -1,5 +1,6 @@
 import { useCallback, useRef } from 'react';
 import { calculateNextFocusIndex } from '../../utils/dropdown';
+var SCROLL_DELAY_MS = 100;
 /**
  * 드롭다운 키보드 네비게이션을 위한 커스텀 훅
  */
@@ -35,79 +36,69 @@ export var useDropdownKeyboard = function (config) {
       optionsList.scrollTop = focusedOption.offsetTop + focusedOption.offsetHeight - optionsList.clientHeight;
     }
   }, [dropdownRef]);
-  var handleKeyDown = useCallback(function (e) {
+  var handleEnterOrSpace = useCallback(function (e) {
+    e.preventDefault();
+    if (!isOpen) {
+      onToggle();
+    } else if (focusedIndex >= 0 && optionItems[focusedIndex]) {
+      onSelect(optionItems[focusedIndex]);
+    }
+  }, [isOpen, focusedIndex, optionItems, onToggle, onSelect]);
+  var handleEscape = useCallback(function (e) {
     var _a;
+    if (isOpen) {
+      e.preventDefault();
+      onClose();
+      (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }, [isOpen, onClose, triggerRef]);
+  var handleArrowNavigation = useCallback(function (e, direction) {
+    e.preventDefault();
+    isKeyboardNavigationRef.current = true;
+    if (isOpen) {
+      var nextIndex_1 = calculateNextFocusIndex(focusedIndex, direction, optionItems.length);
+      onFocusChange(nextIndex_1);
+      setTimeout(function () {
+        return scrollToFocusedOption(nextIndex_1);
+      }, SCROLL_DELAY_MS);
+    } else {
+      onToggle();
+    }
+  }, [isOpen, focusedIndex, optionItems.length, onFocusChange, onToggle, scrollToFocusedOption]);
+  var handleHomeEnd = useCallback(function (e, targetIndex) {
+    if (isOpen) {
+      e.preventDefault();
+      isKeyboardNavigationRef.current = true;
+      onFocusChange(targetIndex);
+      setTimeout(function () {
+        return scrollToFocusedOption(targetIndex);
+      }, 0);
+    }
+  }, [isOpen, onFocusChange, scrollToFocusedOption]);
+  var handleKeyDown = useCallback(function (e) {
     if (disabled) return;
     switch (e.key) {
       case 'Enter':
       case ' ':
-        e.preventDefault();
-        if (!isOpen) {
-          onToggle();
-        } else if (focusedIndex >= 0 && optionItems[focusedIndex]) {
-          onSelect(optionItems[focusedIndex]);
-        }
+        handleEnterOrSpace(e);
         break;
       case 'Escape':
-        if (isOpen) {
-          e.preventDefault();
-          onClose();
-          (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
+        handleEscape(e);
         break;
       case 'ArrowDown':
-        e.preventDefault();
-        isKeyboardNavigationRef.current = true; // 키보드 네비게이션 시작
-        if (!isOpen) {
-          onToggle();
-        } else {
-          var nextIndex_1 = calculateNextFocusIndex(focusedIndex, 'down', optionItems.length);
-          onFocusChange(nextIndex_1);
-          // 포커스 변경 후 스크롤 조정
-          setTimeout(function () {
-            return scrollToFocusedOption(nextIndex_1);
-          }, 100);
-        }
+        handleArrowNavigation(e, 'down');
         break;
       case 'ArrowUp':
-        e.preventDefault();
-        isKeyboardNavigationRef.current = true; // 키보드 네비게이션 시작
-        if (!isOpen) {
-          onToggle();
-        } else {
-          var nextIndex_2 = calculateNextFocusIndex(focusedIndex, 'up', optionItems.length);
-          onFocusChange(nextIndex_2);
-          // 포커스 변경 후 스크롤 조정
-          setTimeout(function () {
-            return scrollToFocusedOption(nextIndex_2);
-          }, 100);
-        }
+        handleArrowNavigation(e, 'up');
         break;
       case 'Home':
-        if (isOpen) {
-          e.preventDefault();
-          isKeyboardNavigationRef.current = true; // 키보드 네비게이션 시작
-          onFocusChange(0);
-          // 포커스 변경 후 스크롤 조정
-          setTimeout(function () {
-            return scrollToFocusedOption(0);
-          }, 0);
-        }
+        handleHomeEnd(e, 0);
         break;
       case 'End':
-        if (isOpen) {
-          e.preventDefault();
-          isKeyboardNavigationRef.current = true; // 키보드 네비게이션 시작
-          var lastIndex_1 = optionItems.length - 1;
-          onFocusChange(lastIndex_1);
-          // 포커스 변경 후 스크롤 조정
-          setTimeout(function () {
-            return scrollToFocusedOption(lastIndex_1);
-          }, 0);
-        }
+        handleHomeEnd(e, optionItems.length - 1);
         break;
     }
-  }, [disabled, isOpen, focusedIndex, optionItems, onToggle, onSelect, onClose, onFocusChange, triggerRef, scrollToFocusedOption]);
+  }, [disabled, optionItems.length, handleEnterOrSpace, handleEscape, handleArrowNavigation, handleHomeEnd]);
   // 마우스 움직임 감지 함수
   var handleMouseMove = useCallback(function () {
     isKeyboardNavigationRef.current = false;

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

@@ -1,5 +1,26 @@
 import { useEffect, useRef } from 'react';
 import { findScrollableParent } from '../../utils';
+var SCROLL_KEYS = ['PageUp', 'PageDown', 'Home', 'End', ' '];
+/** 이벤트 대상이 드롭다운 내부에 있는지 확인 */
+function isInsideDropdown(target, dropdownRef) {
+  return !!(dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) && dropdownRef.current.contains(target);
+}
+/** 스크롤 가능한 요소의 경계에 도달했는지 확인하고, 도달했으면 이벤트 차단 */
+function preventScrollBeyondBounds(e, scrollableElement) {
+  var deltaY = e.deltaY;
+  var scrollTop = scrollableElement.scrollTop,
+    scrollHeight = scrollableElement.scrollHeight,
+    clientHeight = scrollableElement.clientHeight;
+  // 스크롤이 위쪽 끝에 도달했고 위로 스크롤하려는 경우
+  if (scrollTop === 0 && deltaY < 0) {
+    e.preventDefault();
+    return;
+  }
+  // 스크롤이 아래쪽 끝에 도달했고 아래로 스크롤하려는 경우
+  if (scrollTop + clientHeight >= scrollHeight && deltaY > 0) {
+    e.preventDefault();
+  }
+}
 /**
  * 페이지 스크롤을 잠그는 커스텀 훅 (드롭다운 내부 스크롤은 허용)
  */
@@ -12,27 +33,15 @@ export var useScrollLock = function (isLocked, dropdownRef) {
       // 스크롤 방지 함수 (드롭다운 내부는 스크롤 체이닝 방지)
       var preventScroll_1 = function (e) {
         // 드롭다운 내부에서 발생하지 않은 이벤트는 차단
-        if (!(dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) || !dropdownRef.current.contains(e.target)) {
+        if (!isInsideDropdown(e.target, dropdownRef)) {
           e.preventDefault();
           return;
         }
         // 드롭다운 내부의 스크롤 가능한 요소 찾기
         var scrollableElement = findScrollableParent(e.target, dropdownRef.current);
         if (scrollableElement && e instanceof WheelEvent) {
-          var deltaY = e.deltaY;
-          var scrollTop = scrollableElement.scrollTop,
-            scrollHeight = scrollableElement.scrollHeight,
-            clientHeight = scrollableElement.clientHeight;
-          // 스크롤이 위쪽 끝에 도달했고 위로 스크롤하려는 경우
-          if (scrollTop === 0 && deltaY < 0) {
-            e.preventDefault();
-            return;
-          }
-          // 스크롤이 아래쪽 끝에 도달했고 아래로 스크롤하려는 경우
-          if (scrollTop + clientHeight >= scrollHeight && deltaY > 0) {
-            e.preventDefault();
-            return;
-          }
+          preventScrollBeyondBounds(e, scrollableElement);
+          return;
         }
         // 드롭다운 내부에 스크롤 가능한 요소가 없으면 차단
         if (!scrollableElement) {
@@ -41,12 +50,10 @@ export var useScrollLock = function (isLocked, dropdownRef) {
       };
       // 키보드 스크롤 방지 함수 (드롭다운 내부는 제외)
       var preventKeyboardScroll_1 = function (e) {
-        // 드롭다운 내부에서 발생한 이벤트는 허용
-        if ((dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) && dropdownRef.current.contains(e.target)) {
+        if (isInsideDropdown(e.target, dropdownRef)) {
           return;
         }
-        var scrollKeys = ['PageUp', 'PageDown', 'Home', 'End', ' '];
-        if (scrollKeys.includes(e.key)) {
+        if (SCROLL_KEYS.includes(e.key)) {
           e.preventDefault();
         }
       };

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

@@ -1,6 +1,6 @@
 // 기존 공통 hooks
+// 드롭다운 관련 hooks
+export * from './dropdown';
 export { useCallbackRef } from './useCallbackRef';
 export { useMediaQuery } from './useMediaQuery';
-export { useMergeRefs } from './useMergeRefs';
-// 드롭다운 관련 hooks
-export * from './dropdown';
+export { useMergeRefs } from './useMergeRefs';

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

@@ -1,4 +1,11 @@
 import moment from 'moment';
+var YEAR_LENGTH = 4;
+var MONTH_START = 4;
+var MONTH_END = 6;
+var DAY_START = 6;
+var DAY_END = 8;
+var MAX_HOUR = 23;
+var MAX_MINUTE = 59;
 export function getDateFormat(date) {
   if (date === void 0) {
     date = getToday();
@@ -19,9 +26,9 @@ export var formatDateInput = function (input) {
   var dateRegex = /^(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[0-1])$/;
   if (dateRegex.test(input)) {
     // 20231112 -> 2023-11-12 형식으로 변환
-    var year = input.substring(0, 4);
-    var month = input.substring(4, 6);
-    var day = input.substring(6, 8);
+    var year = input.substring(0, YEAR_LENGTH);
+    var month = input.substring(MONTH_START, MONTH_END);
+    var day = input.substring(DAY_START, DAY_END);
     return "".concat(year, "-").concat(month, "-").concat(day);
   }
   return input;
@@ -29,8 +36,8 @@ export var formatDateInput = function (input) {
 export var formatHourInput = function (input) {
   var numbers = input.replace(/\D/g, '');
   var hourStr = numbers.substring(0, 2);
-  var hourNum = parseInt(hourStr, 10);
-  if (hourNum >= 0 && hourNum <= 23) {
+  var hourNum = Number.parseInt(hourStr, 10);
+  if (hourNum >= 0 && hourNum <= MAX_HOUR) {
     return hourStr;
   }
   return input;
@@ -40,9 +47,9 @@ export var formatMinuteInput = function (input) {
   var numbers = input.replace(/\D/g, '');
   // 2자리 숫자로 제한
   var minuteStr = numbers.substring(0, 2);
-  var minuteNum = parseInt(minuteStr, 10);
+  var minuteNum = Number.parseInt(minuteStr, 10);
   // 00-59 범위 체크
-  if (minuteNum >= 0 && minuteNum <= 59) {
+  if (minuteNum >= 0 && minuteNum <= MAX_MINUTE) {
     return minuteStr; // 2자리로 패딩
   }
   return input;

package/dist/esm/src/utils/dropdown/dropdownUtils.js

@@ -25,12 +25,11 @@ export var calculateDropdownPosition = function (_a) {
       direction: 'up',
       maxHeight: maxHeight
     };
-  } else {
-    return {
-      direction: 'down',
-      maxHeight: maxHeight
-    };
   }
+  return {
+    direction: 'down',
+    maxHeight: maxHeight
+  };
 };
 /**
  * 키보드 네비게이션을 위한 포커스 인덱스 계산
@@ -39,14 +38,13 @@ export var calculateNextFocusIndex = function (currentIndex, direction, validOpt
   if (validOptionsLength === 0) return -1;
   if (direction === 'down') {
     return currentIndex < validOptionsLength - 1 ? currentIndex + 1 : 0;
-  } else {
-    return currentIndex > 0 ? currentIndex - 1 : validOptionsLength - 1;
   }
+  return currentIndex > 0 ? currentIndex - 1 : validOptionsLength - 1;
 };
 /**
  * 드롭다운이 뷰포트를 벗어나지 않도록 위치 조정
  */
-export var adjustDropdownPosition = function (dropdownElement, triggerElement) {
+export var adjustDropdownPosition = function (dropdownElement) {
   var dropdownRect = dropdownElement.getBoundingClientRect();
   var viewportWidth = window.innerWidth;
   var viewportHeight = window.innerHeight;

package/dist/temp/assets/scripts/baseBox.d.ts

@@ -0,0 +1,55 @@
+import { OptionValue } from '../../src/types';
+import { DropdownOption } from './utils/unifiedBox/dropdownModel';
+import { UnifiedBoxManager } from './utils/unifiedBox/unifiedBoxManager';
+/**
+ * SelectBox와 ComboBox의 공통 기능을 담는 베이스 클래스
+ */
+export declare abstract class BaseBox {
+    protected element: HTMLElement;
+    protected unifiedSelectBox: UnifiedBoxManager;
+    protected targetSelect: HTMLSelectElement | null;
+    protected isInitializing: boolean;
+    protected lastValue: OptionValue;
+    /** 서브클래스에서 기본 placeholder를 지정 */
+    protected abstract get defaultPlaceholder(): string;
+    constructor(element: HTMLElement);
+    /** 초기화 완료 처리 (서브클래스 생성자 마지막에 호출) */
+    protected completeInitialization(): void;
+    /**
+     * 타겟 select 요소 찾기
+     */
+    protected findTargetSelect(element: HTMLElement): HTMLSelectElement | null;
+    /**
+     * HTML에서 속성 파싱
+     */
+    protected parseAttributesFromHTML(): {
+        placeholder?: string;
+        value?: string;
+        disabled?: boolean;
+        size?: 'xs' | 'sm' | 'md';
+    };
+    /**
+     * 값 변환 훅 - SelectBox에서 originalValue 매핑을 위해 오버라이드
+     * 기본 동작: 그대로 문자열 변환
+     */
+    protected resolveValue(value: string | number): string;
+    /**
+     * 타겟 select와 동기화 (Single 모드)
+     */
+    protected syncWithTargetSelect(value: string | number): void;
+    /**
+     * 타겟 select와 동기화 (Multiple 모드)
+     */
+    protected syncWithTargetSelectMultiple(values: (string | number)[]): void;
+    getOptions(): DropdownOption[];
+    updateOptions(newOptions: DropdownOption[]): void;
+    setDisabled(disabled: boolean): void;
+    open(): void;
+    close(): void;
+    focus(): void;
+    destroy(): void;
+    selectAll(): void;
+    deselectAll(): void;
+    isMultiple(): boolean;
+    toggleSelectAll(): void;
+}

package/dist/temp/assets/scripts/baseBox.js

@@ -0,0 +1,144 @@
+/**
+ * SelectBox와 ComboBox의 공통 기능을 담는 베이스 클래스
+ */
+var BaseBox = /** @class */ (function () {
+    function BaseBox(element) {
+        this.targetSelect = null;
+        this.isInitializing = true;
+        this.lastValue = '';
+        this.element = element;
+        this.targetSelect = this.findTargetSelect(element);
+    }
+    /** 초기화 완료 처리 (서브클래스 생성자 마지막에 호출) */
+    BaseBox.prototype.completeInitialization = function () {
+        var _this = this;
+        setTimeout(function () {
+            _this.isInitializing = false;
+        }, 0);
+    };
+    /**
+     * 타겟 select 요소 찾기
+     */
+    BaseBox.prototype.findTargetSelect = function (element) {
+        // 1. 직접 select 태그인 경우
+        if (element.tagName === 'SELECT') {
+            return element;
+        }
+        // 2. 자식으로 select 태그가 있는 경우
+        var selectChild = element.querySelector('select');
+        if (selectChild) {
+            return selectChild;
+        }
+        // 3. data-target 속성으로 지정된 경우
+        var targetId = element.getAttribute('data-target');
+        if (targetId) {
+            var targetElement = document.getElementById(targetId);
+            if (targetElement && targetElement.tagName === 'SELECT') {
+                return targetElement;
+            }
+        }
+        return null;
+    };
+    /**
+     * HTML에서 속성 파싱
+     */
+    BaseBox.prototype.parseAttributesFromHTML = function () {
+        var attributes = {};
+        if (this.targetSelect) {
+            // select 요소의 속성들
+            if (this.targetSelect.disabled)
+                attributes.disabled = true;
+            if (this.targetSelect.value)
+                attributes.value = this.targetSelect.value;
+            // placeholder는 첫 번째 빈 option에서 가져오기
+            var firstOption = this.targetSelect.querySelector('option[value=""], option:not([value])');
+            if (firstOption) {
+                attributes.placeholder = firstOption.textContent || this.defaultPlaceholder;
+            }
+        }
+        // 컨테이너 요소의 data 속성들
+        var containerAttributes = this.element.dataset;
+        if (containerAttributes.placeholder)
+            attributes.placeholder = containerAttributes.placeholder;
+        if (containerAttributes.size)
+            attributes.size = containerAttributes.size;
+        if (containerAttributes.disabled === 'true')
+            attributes.disabled = true;
+        return attributes;
+    };
+    /**
+     * 값 변환 훅 - SelectBox에서 originalValue 매핑을 위해 오버라이드
+     * 기본 동작: 그대로 문자열 변환
+     */
+    BaseBox.prototype.resolveValue = function (value) {
+        return String(value);
+    };
+    /**
+     * 타겟 select와 동기화 (Single 모드)
+     */
+    BaseBox.prototype.syncWithTargetSelect = function (value) {
+        if (this.targetSelect) {
+            this.targetSelect.value = this.resolveValue(value);
+            var event_1 = new Event('change', { bubbles: true });
+            this.targetSelect.dispatchEvent(event_1);
+        }
+    };
+    /**
+     * 타겟 select와 동기화 (Multiple 모드)
+     */
+    BaseBox.prototype.syncWithTargetSelectMultiple = function (values) {
+        var _this = this;
+        if (this.targetSelect && this.targetSelect.multiple) {
+            // 모든 옵션 선택 해제
+            Array.from(this.targetSelect.options).forEach(function (option) {
+                option.selected = false;
+            });
+            // 선택된 값들에 해당하는 옵션들 선택
+            values.forEach(function (value) {
+                var resolved = _this.resolveValue(value);
+                var option = _this.targetSelect.querySelector("option[value=\"".concat(resolved, "\"]"));
+                if (option) {
+                    option.selected = true;
+                }
+            });
+            var event_2 = new Event('change', { bubbles: true });
+            this.targetSelect.dispatchEvent(event_2);
+        }
+    };
+    // UnifiedBoxManager 위임 메서드들
+    BaseBox.prototype.getOptions = function () {
+        return this.unifiedSelectBox.getOptions();
+    };
+    BaseBox.prototype.updateOptions = function (newOptions) {
+        this.unifiedSelectBox.updateOptions(newOptions);
+    };
+    BaseBox.prototype.setDisabled = function (disabled) {
+        this.unifiedSelectBox.setDisabled(disabled);
+    };
+    BaseBox.prototype.open = function () {
+        this.unifiedSelectBox.open();
+    };
+    BaseBox.prototype.close = function () {
+        this.unifiedSelectBox.close();
+    };
+    BaseBox.prototype.focus = function () {
+        this.unifiedSelectBox.focus();
+    };
+    BaseBox.prototype.destroy = function () {
+        this.unifiedSelectBox.destroy();
+    };
+    BaseBox.prototype.selectAll = function () {
+        this.unifiedSelectBox.selectAll();
+    };
+    BaseBox.prototype.deselectAll = function () {
+        this.unifiedSelectBox.deselectAll();
+    };
+    BaseBox.prototype.isMultiple = function () {
+        return this.unifiedSelectBox.isMultiple();
+    };
+    BaseBox.prototype.toggleSelectAll = function () {
+        this.unifiedSelectBox.toggleSelectAll();
+    };
+    return BaseBox;
+}());
+export { BaseBox };