@ncds/ui-admin 1.3.0 → 1.5.0

package/dist/cjs/assets/scripts/utils/selectbox/SelectBoxController.js

@@ -0,0 +1,681 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectBoxController = void 0;
+var __assign = void 0 && (void 0).__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);
+};
+/**
+ * SelectBox 통합 컨트롤러
+ * 이벤트 처리, UI 상태 제어, 사용자 인터랙션 담당
+ */
+var SelectBoxController = exports.SelectBoxController = /** @class */function () {
+  function SelectBoxController(config) {
+    this.isOpen = false;
+    this.focusedIndex = -1;
+    this.isKeyboardNavigation = false;
+    this.scrollLockHandlers = null;
+    // DOM 요소들
+    this.optionElements = [];
+    this.scrollPosition = 0;
+    this.mouseMoveHandlerAttached = false;
+    this.lastFilteredOptionsCount = 0; // 이전 필터링된 옵션 개수 (성능 최적화)
+    this.lastFilteredOptionsHash = ''; // 이전 필터링된 옵션 해시 (성능 최적화)
+    this.lastScrollBottomTime = 0;
+    this.config = config;
+    this.setupEventHandlers();
+    this.config.model.addListener(this);
+  }
+  /**
+   * 상태 변경 리스너 (Observer Pattern)
+   */
+  SelectBoxController.prototype.onStateChange = function (newState, changedFields) {
+    var _a, _b;
+    // 드롭다운 열기/닫기 상태 동기화
+    if (changedFields.includes('isOpen')) {
+      this.isOpen = newState.isOpen;
+      this.updateDropdownVisibility(newState.isOpen);
+    }
+    // 포커스 상태 동기화
+    if (changedFields.includes('focusedIndex')) {
+      this.focusedIndex = newState.focusedIndex;
+      this.updateFocusedOption(newState.focusedIndex);
+    }
+    // 옵션 리스트 업데이트
+    if (this.shouldUpdateOptions(changedFields)) {
+      this.updateOptionsDisplay(newState);
+    }
+    // 선택 상태 변경 알림
+    if (changedFields.includes('selectedValues')) {
+      (_b = (_a = this.config).onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(_a, newState.selectedValues);
+    }
+    // 검색어 변경 알림은 UnifiedSelectBox에서 디바운싱 적용 후 처리하므로 여기서는 호출하지 않음
+    // (디바운싱이 적용되지 않은 즉시 호출을 방지하기 위해)
+  };
+  /**
+   * 이벤트 핸들러 설정
+   */
+  SelectBoxController.prototype.setupEventHandlers = function () {
+    var _this = this;
+    // 외부 클릭 핸들러
+    this.outsideClickHandler = function (e) {
+      var target = e.target;
+      var isInsideTrigger = _this.config.triggerElement.contains(target);
+      var isInsideDropdown = _this.config.dropdownElement.contains(target);
+      if (isInsideTrigger || isInsideDropdown) {
+        return;
+      }
+      _this.close();
+    };
+    // 키보드 핸들러
+    this.keyDownHandler = function (e) {
+      _this.handleKeyDown(e);
+    };
+    if (this.config.type !== 'combobox') {
+      this.config.triggerElement.addEventListener('click', function () {
+        var _a, _b;
+        if (!_this.config.disabled && ((_b = (_a = _this.config).canToggle) === null || _b === void 0 ? void 0 : _b.call(_a)) !== false) {
+          _this.toggle();
+        }
+      });
+    }
+    // 키보드 이벤트
+    this.config.triggerElement.addEventListener('keydown', this.keyDownHandler);
+  };
+  /**
+   * 드롭다운 열기
+   */
+  SelectBoxController.prototype.open = function () {
+    var _a, _b;
+    if (this.config.disabled || this.isOpen) return;
+    this.config.model.setOpen(true);
+    this.adjustDropdownPosition();
+    this.enableOutsideClick();
+    this.enableScrollLock();
+    this.enableScrollBottomDetection(); // 스크롤 감지 활성화
+    (_b = (_a = this.config).onOpen) === null || _b === void 0 ? void 0 : _b.call(_a);
+  };
+  /**
+   * 드롭다운 닫기
+   */
+  SelectBoxController.prototype.close = function () {
+    var _a, _b;
+    if (!this.isOpen) return;
+    this.config.model.setOpen(false);
+    this.disableOutsideClick();
+    this.disableScrollLock();
+    this.disableScrollBottomDetection(); // 스크롤 감지 비활성화
+    this.isKeyboardNavigation = false;
+    (_b = (_a = this.config).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+  };
+  /**
+   * 드롭다운 토글
+   */
+  SelectBoxController.prototype.toggle = function () {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  };
+  /**
+   * 키보드 입력 처리
+   */
+  SelectBoxController.prototype.handleKeyDown = function (event) {
+    var state = this.config.model.getState();
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.isKeyboardNavigation = true;
+        if (!state.isOpen) {
+          this.open();
+        } else {
+          this.config.model.setFocusedIndex(state.focusedIndex + 1);
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.isKeyboardNavigation = true;
+        if (state.isOpen) {
+          this.config.model.setFocusedIndex(state.focusedIndex - 1);
+        }
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (state.isOpen && state.focusedIndex >= 0 && state.focusedIndex < state.filteredOptions.length) {
+          var focusedOption = state.filteredOptions[state.focusedIndex];
+          this.config.model.toggleOption(focusedOption.id);
+        }
+        break;
+      case 'Escape':
+        event.preventDefault();
+        if (state.isOpen) {
+          this.close();
+        }
+        break;
+      default:
+        // 문자 입력으로 옵션 검색
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+          this.searchOption(event.key);
+        }
+        break;
+    }
+  };
+  /**
+   * 옵션 검색
+   */
+  SelectBoxController.prototype.searchOption = function (char) {
+    var state = this.config.model.getState();
+    var options = state.filteredOptions;
+    var startIndex = this.focusedIndex >= 0 ? this.focusedIndex + 1 : 0;
+    for (var i = 0; i < options.length; i++) {
+      var index = (startIndex + i) % options.length;
+      var option = options[index];
+      // option.label이 존재하고 문자열인지 확인
+      if (option && option.label && typeof option.label === 'string') {
+        if (option.label.toLowerCase().startsWith(char.toLowerCase())) {
+          this.config.model.setFocusedIndex(index);
+          break;
+        }
+      }
+    }
+  };
+  /**
+   * 드롭다운 표시/숨김 업데이트
+   */
+  SelectBoxController.prototype.updateDropdownVisibility = function (isOpen) {
+    this.config.dropdownElement.style.display = isOpen ? 'block' : 'none';
+  };
+  /**
+   * 옵션 표시 업데이트
+   */
+  SelectBoxController.prototype.updateOptionsDisplay = function (state) {
+    var hasFilteredOptions = state.filteredOptions.length > 0;
+    var countChanged = this.lastFilteredOptionsCount !== state.filteredOptions.length;
+    // 빈 옵션일 때 해시 초기화 및 전체 렌더링
+    if (!hasFilteredOptions) {
+      this.lastFilteredOptionsHash = '';
+      this.lastFilteredOptionsCount = 0;
+    } else {
+      // 옵션 개수가 변경되었는지 먼저 확인 (빠른 체크)
+      var optionsChanged = countChanged;
+      // 개수가 변경되지 않았을 때만 해시 계산 (O(n) 연산 최소화)
+      if (!optionsChanged) {
+        var currentHash = state.filteredOptions.map(function (opt) {
+          return opt.id;
+        }).join(',');
+        optionsChanged = this.lastFilteredOptionsHash !== currentHash;
+        if (optionsChanged) {
+          this.lastFilteredOptionsHash = currentHash;
+        }
+      } else {
+        // 개수가 변경되었으면 해시도 재계산
+        this.lastFilteredOptionsHash = state.filteredOptions.map(function (opt) {
+          return opt.id;
+        }).join(',');
+      }
+      // 옵션이 변경되지 않았고 선택 상태만 변경된 경우 DOM 조작만 수행
+      if (!optionsChanged) {
+        // 선택 상태만 업데이트 (전체 재렌더링 방지)
+        this.optionElements.forEach(function (element, index) {
+          var _a;
+          var optionId = (_a = state.filteredOptions[index]) === null || _a === void 0 ? void 0 : _a.id;
+          if (!optionId) return;
+          var isSelected = state.selectedValues.includes(optionId);
+          var isFocused = index === state.focusedIndex;
+          // 선택 상태 업데이트
+          if (isSelected) {
+            element.classList.add('ncua-select-dropdown__option--selected');
+            element.setAttribute('aria-selected', 'true');
+          } else {
+            element.classList.remove('ncua-select-dropdown__option--selected');
+            element.setAttribute('aria-selected', 'false');
+          }
+          // 포커스 상태 업데이트
+          if (isFocused) {
+            element.classList.add('ncua-select-dropdown__option--focused');
+          } else {
+            element.classList.remove('ncua-select-dropdown__option--focused');
+          }
+        });
+        return; // 전체 재렌더링 불필요
+      }
+    }
+    // 옵션이 변경되었거나 빈 경우에만 전체 렌더링
+    var renderableOptions = state.filteredOptions.map(function (option, index) {
+      return __assign(__assign({}, option), {
+        selected: state.selectedValues.includes(option.id),
+        focused: index === state.focusedIndex
+      });
+    });
+    var showNoResults = state.filteredOptions.length === 0 && (state.showAllItems || state.searchValue.length > 0);
+    var optionsList = this.config.dropdownElement.querySelector('.ncua-select-dropdown__options');
+    if (optionsList) {
+      this.optionElements = this.config.renderer.updateOptionsList(optionsList, renderableOptions, this.config.renderConfig, showNoResults);
+      // 옵션 클릭 이벤트 등록
+      this.attachOptionEventHandlers();
+      // 캐시 업데이트 (이미 위에서 업데이트했으면 다시 업데이트하지 않음)
+      if (!this.lastFilteredOptionsHash) {
+        this.lastFilteredOptionsHash = state.filteredOptions.map(function (opt) {
+          return opt.id;
+        }).join(',');
+      }
+      this.lastFilteredOptionsCount = state.filteredOptions.length;
+    }
+  };
+  /**
+   * 포커스된 옵션 업데이트
+   */
+  SelectBoxController.prototype.updateFocusedOption = function (focusedIndex) {
+    this.optionElements.forEach(function (element, index) {
+      if (index === focusedIndex) {
+        element.classList.add('ncua-select-dropdown__option--focused');
+        element.scrollIntoView({
+          block: 'nearest'
+        });
+      } else {
+        element.classList.remove('ncua-select-dropdown__option--focused');
+      }
+    });
+  };
+  /**
+   * 옵션 클릭 이벤트 핸들러 등록
+   */
+  SelectBoxController.prototype.attachOptionEventHandlers = function () {
+    var _this = this;
+    // 기존 이벤트 리스너 제거
+    this.removeOptionEventHandlers();
+    this.optionElements.forEach(function (element, index) {
+      var optionId = element.getAttribute('data-value');
+      // data-value가 없거나 빈 문자열인 경우에도 처리
+      if (optionId === null) return;
+      // 클릭 이벤트 핸들러 생성 및 저장
+      var clickHandler = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        _this.config.model.toggleOption(optionId);
+        // 단일 선택 모드에서는 선택 후 드롭다운 닫기
+        if (!_this.config.model.isMultiple()) {
+          setTimeout(function () {
+            return _this.close();
+          }, 100);
+        }
+      };
+      var hoverHandler = function () {
+        if (!_this.isKeyboardNavigation) {
+          _this.config.model.setFocusedIndex(index);
+        }
+      };
+      // 이벤트 리스너 등록
+      element.addEventListener('click', clickHandler);
+      element.addEventListener('mouseenter', hoverHandler);
+      // 나중에 제거할 수 있도록 핸들러 저장
+      element._clickHandler = clickHandler;
+      element._hoverHandler = hoverHandler;
+    });
+    // 마우스 이동 감지 (한 번만 등록)
+    if (!this.mouseMoveHandlerAttached) {
+      this.config.dropdownElement.addEventListener('mousemove', function () {
+        _this.isKeyboardNavigation = false;
+      });
+      this.mouseMoveHandlerAttached = true;
+    }
+  };
+  /**
+   * 옵션 이벤트 핸들러 제거
+   */
+  SelectBoxController.prototype.removeOptionEventHandlers = function () {
+    this.optionElements.forEach(function (element) {
+      var clickHandler = element._clickHandler;
+      var hoverHandler = element._hoverHandler;
+      if (clickHandler) {
+        element.removeEventListener('click', clickHandler);
+        delete element._clickHandler;
+      }
+      if (hoverHandler) {
+        element.removeEventListener('mouseenter', hoverHandler);
+        delete element._hoverHandler;
+      }
+    });
+  };
+  /**
+   * 옵션 업데이트가 필요한지 판단
+   */
+  SelectBoxController.prototype.shouldUpdateOptions = function (changedFields) {
+    return changedFields.some(function (field) {
+      return ['options', 'filteredOptions', 'selectedValues', 'showAllItems'].includes(field);
+    });
+  };
+  /**
+   * 외부 클릭 감지 활성화
+   */
+  SelectBoxController.prototype.enableOutsideClick = function () {
+    document.addEventListener('mousedown', this.outsideClickHandler);
+  };
+  /**
+   * 외부 클릭 감지 비활성화
+   */
+  SelectBoxController.prototype.disableOutsideClick = function () {
+    document.removeEventListener('mousedown', this.outsideClickHandler);
+  };
+  /**
+   * 스크롤 잠금 활성화 (드롭다운 내부 스크롤은 허용)
+   * ComboBox 또는 multiple 모드에서는 스크롤 잠금 비활성화
+   */
+  SelectBoxController.prototype.enableScrollLock = function () {
+    var _this = this;
+    // ComboBox 또는 multiple 모드에서는 스크롤 잠금 비활성화
+    if (this.config.type === 'combobox' || this.config.model.isMultiple()) {
+      return;
+    }
+    this.scrollPosition = window.pageYOffset;
+    this.scrollLockHandlers = {
+      wheel: function (e) {
+        // 드롭다운 내부에서 발생한 이벤트 처리
+        if (_this.config.dropdownElement && _this.config.dropdownElement.contains(e.target)) {
+          // 드롭다운 내부의 스크롤 가능한 요소 찾기
+          var scrollableElement = _this.findScrollableParent(e.target, _this.config.dropdownElement);
+          if (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();
+              return;
+            }
+            // 드롭다운 내부 스크롤 허용
+            return;
+          }
+        }
+        // 드롭다운 외부의 모든 스크롤 방지
+        e.preventDefault();
+      },
+      touchmove: function (e) {
+        // 드롭다운 내부에서의 터치 스크롤 처리
+        if (_this.config.dropdownElement && _this.config.dropdownElement.contains(e.target)) {
+          var scrollableElement = _this.findScrollableParent(e.target, _this.config.dropdownElement);
+          if (scrollableElement) {
+            // 터치 스크롤은 브라우저가 자동으로 처리하도록 허용
+            return;
+          }
+        }
+        // 드롭다운 외부의 터치 스크롤 방지
+        e.preventDefault();
+      },
+      keydown: function (e) {
+        // 페이지 스크롤 키만 막기 (화살표 키는 드롭다운 네비게이션에서 처리)
+        var keys = ['PageUp', 'PageDown', 'Home', 'End', 'Space'];
+        if (keys.includes(e.key) || e.key === ' ') {
+          e.preventDefault();
+        }
+      }
+    };
+    document.addEventListener('wheel', this.scrollLockHandlers.wheel, {
+      passive: false
+    });
+    document.addEventListener('touchmove', this.scrollLockHandlers.touchmove, {
+      passive: false
+    });
+    document.addEventListener('keydown', this.scrollLockHandlers.keydown);
+  };
+  /**
+   * 스크롤 가능한 부모 요소 찾기
+   */
+  SelectBoxController.prototype.findScrollableParent = function (element, boundary) {
+    var current = element;
+    while (current && current !== boundary && boundary.contains(current)) {
+      var computedStyle = window.getComputedStyle(current);
+      var overflowY = computedStyle.overflowY;
+      if (overflowY === 'auto' || overflowY === 'scroll') {
+        var scrollHeight = current.scrollHeight,
+          clientHeight = current.clientHeight;
+        if (scrollHeight > clientHeight) {
+          return current;
+        }
+      }
+      current = current.parentElement;
+    }
+    return null;
+  };
+  /**
+   * 스크롤 잠금 해제
+   */
+  SelectBoxController.prototype.disableScrollLock = function () {
+    if (this.scrollLockHandlers) {
+      document.removeEventListener('wheel', this.scrollLockHandlers.wheel);
+      document.removeEventListener('touchmove', this.scrollLockHandlers.touchmove);
+      document.removeEventListener('keydown', this.scrollLockHandlers.keydown);
+      this.scrollLockHandlers = null;
+    }
+  };
+  /**
+   * 마우스 호버 처리 (외부에서 호출용)
+   */
+  SelectBoxController.prototype.handleMouseHover = function (index) {
+    if (!this.isKeyboardNavigation) {
+      this.config.model.setFocusedIndex(index);
+    }
+  };
+  /**
+   * 옵션 배열 업데이트
+   */
+  SelectBoxController.prototype.updateOptions = function (options) {
+    var _this = this;
+    this.config.model.updateOptions(options);
+    // 스크롤 리스너는 이미 등록되어 있으므로 제거/재등록 불필요
+    // DOM이 완전히 교체되는 경우에만 재등록 필요 (현재는 updateContainerChildren에서 요소 재사용)
+    // 옵션 업데이트 후 스크롤 감지가 필요한 경우에만 확인
+    if (this.isOpen && this.config.onScrollBottom && !this.scrollBottomHandler) {
+      // 스크롤 리스너가 없을 때만 등록 (드롭다운이 열려있고 리스너가 없는 경우)
+      requestAnimationFrame(function () {
+        _this.enableScrollBottomDetection();
+      });
+    }
+  };
+  SelectBoxController.prototype.getIsOpen = function () {
+    return this.config.model.getState().isOpen;
+  };
+  SelectBoxController.prototype.setFocus = function (index) {
+    this.config.model.setFocusedIndex(index);
+  };
+  SelectBoxController.prototype.getFocusedIndex = function () {
+    return this.config.model.getState().focusedIndex;
+  };
+  /**
+   * DropdownUtils 호환을 위한 정적 팩토리 메서드
+   */
+  SelectBoxController.createFromDropdownConfig = function (config) {
+    // DropdownModel 생성
+    var model = new (require('./DropdownModel').DropdownModel)(config.options || [], false);
+    // DOMRenderer 생성
+    var renderer = new (require('./DOMRenderer').DOMRenderer)();
+    // SelectBoxController 생성
+    var controllerConfig = {
+      triggerElement: config.triggerElement,
+      dropdownElement: config.dropdownElement,
+      model: model,
+      renderer: renderer,
+      renderConfig: {
+        listboxId: 'dropdown-utils',
+        multiple: false,
+        maxHeight: 275,
+        size: 'md'
+      },
+      onOpen: config.onOpen,
+      onClose: config.onClose,
+      onSelectionChange: function (values) {
+        var _a, _b, _c;
+        var index = (_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.findIndex(function (opt) {
+          return opt.id === values[0];
+        })) !== null && _b !== void 0 ? _b : -1;
+        if (index >= 0) (_c = config.onOptionSelect) === null || _c === void 0 ? void 0 : _c.call(config, index);
+      }
+    };
+    return new SelectBoxController(controllerConfig);
+  };
+  /**
+   * 드롭다운 위치 조정 (화면 크기에 따라 up/down 방향 결정)
+   * 단일 선택 모드에서만 적용
+   */
+  SelectBoxController.prototype.adjustDropdownPosition = function () {
+    if (!this.config.dropdownElement || !this.config.triggerElement) return;
+    // ComboBox 또는 multiple 모드에서는 위치 조정 비활성화
+    if (this.config.type === 'combobox' || this.config.model.isMultiple()) {
+      return;
+    }
+    // 일시적으로 드롭다운을 보이게 해서 크기 측정
+    var dropdown = this.config.dropdownElement;
+    var originalDisplay = dropdown.style.display;
+    var originalVisibility = dropdown.style.visibility;
+    dropdown.style.display = 'block';
+    dropdown.style.visibility = 'hidden';
+    var result = this.calculateDropdownPosition();
+    // 방향에 따른 클래스 설정
+    dropdown.classList.remove('ncua-select-dropdown--up', 'ncua-select-dropdown--down');
+    dropdown.classList.add("ncua-select-dropdown--".concat(result.direction));
+    // 미세 위치 조정
+    this.adjustDropdownPositionDetails(dropdown);
+    // 원래 상태로 복원
+    dropdown.style.display = originalDisplay;
+    dropdown.style.visibility = originalVisibility;
+  };
+  /**
+   * 드롭다운 위치 계산 (React dropdownUtils.ts 로직 참고)
+   */
+  SelectBoxController.prototype.calculateDropdownPosition = function () {
+    if (!this.config.triggerElement || !this.config.dropdownElement) {
+      return {
+        direction: 'down',
+        maxHeight: this.config.renderConfig.maxHeight
+      };
+    }
+    var triggerRect = this.config.triggerElement.getBoundingClientRect();
+    var viewportHeight = window.innerHeight;
+    var dropdownHeight = Math.min(this.config.renderConfig.maxHeight, this.estimateDropdownHeight());
+    var offset = 20; // 여유 공간
+    // 아래쪽 공간이 충분한지 확인
+    var spaceBelow = viewportHeight - triggerRect.bottom;
+    if (spaceBelow < dropdownHeight + offset) {
+      return {
+        direction: 'up',
+        maxHeight: this.config.renderConfig.maxHeight
+      };
+    } else {
+      return {
+        direction: 'down',
+        maxHeight: this.config.renderConfig.maxHeight
+      };
+    }
+  };
+  /**
+   * 드롭다운 예상 높이 계산
+   */
+  SelectBoxController.prototype.estimateDropdownHeight = function () {
+    var itemHeight = 40; // 대략적인 옵션 항목 높이
+    var itemCount = this.config.model.getState().filteredOptions.length || this.config.model.getState().options.length;
+    return Math.min(itemCount * itemHeight, this.config.renderConfig.maxHeight);
+  };
+  /**
+   * 드롭다운 세부 위치 조정 (뷰포트 경계 처리)
+   */
+  SelectBoxController.prototype.adjustDropdownPositionDetails = function (dropdownElement) {
+    var dropdownRect = dropdownElement.getBoundingClientRect();
+    var viewportWidth = window.innerWidth;
+    var viewportHeight = window.innerHeight;
+    // 좌우 위치 조정
+    if (dropdownRect.right > viewportWidth) {
+      var overflow = dropdownRect.right - viewportWidth;
+      var currentLeft = parseInt(dropdownElement.style.left || '0');
+      dropdownElement.style.left = "".concat(currentLeft - overflow - 10, "px");
+    }
+    if (dropdownRect.left < 0) {
+      dropdownElement.style.left = '10px';
+    }
+    // 상하 위치 조정 (이미 up/down 방향이 결정된 후 미세 조정)
+    if (dropdownRect.bottom > viewportHeight) {
+      var overflow = dropdownRect.bottom - viewportHeight;
+      var currentMaxHeight = parseInt(dropdownElement.style.maxHeight || String(this.config.renderConfig.maxHeight));
+      dropdownElement.style.maxHeight = "".concat(currentMaxHeight - overflow - 10, "px");
+    }
+  };
+  /**
+   * 스크롤 바닥 감지 활성화
+   */
+  SelectBoxController.prototype.enableScrollBottomDetection = function () {
+    var _this = this;
+    if (!this.config.onScrollBottom) return;
+    // 이미 리스너가 등록되어 있으면 중복 등록 방지
+    if (this.scrollBottomHandler) return;
+    var optionsList = this.config.dropdownElement.querySelector('.ncua-select-dropdown__options');
+    if (!optionsList) return;
+    this.scrollBottomHandler = function (e) {
+      var _a, _b;
+      var target = e.target;
+      var scrollTop = target.scrollTop;
+      var scrollHeight = target.scrollHeight;
+      var clientHeight = target.clientHeight;
+      // 바닥에서 10px 이내에 도달했을 때
+      var threshold = 10;
+      var isAtBottom = scrollTop + clientHeight >= scrollHeight - threshold;
+      if (isAtBottom) {
+        var now = Date.now();
+        // 500ms 디바운스 (중복 호출 방지)
+        if (now - _this.lastScrollBottomTime > 100) {
+          _this.lastScrollBottomTime = now;
+          (_b = (_a = _this.config).onScrollBottom) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+      }
+    };
+    optionsList.addEventListener('scroll', this.scrollBottomHandler);
+  };
+  /**
+   * 스크롤 바닥 감지 비활성화
+   */
+  SelectBoxController.prototype.disableScrollBottomDetection = function () {
+    if (this.scrollBottomHandler) {
+      var optionsList = this.config.dropdownElement.querySelector('.ncua-select-dropdown__options');
+      if (optionsList) {
+        optionsList.removeEventListener('scroll', this.scrollBottomHandler);
+      }
+      this.scrollBottomHandler = undefined;
+    }
+  };
+  /**
+   * disabled 상태 설정
+   */
+  SelectBoxController.prototype.setDisabled = function (disabled) {
+    this.config.disabled = disabled;
+    // disabled로 설정될 때 드롭다운이 열려있으면 닫기
+    if (disabled && this.isOpen) {
+      this.close();
+    }
+  };
+  /**
+   * 정리
+   */
+  SelectBoxController.prototype.destroy = function () {
+    this.config.model.removeListener(this);
+    this.disableOutsideClick();
+    this.disableScrollLock();
+    this.removeOptionEventHandlers();
+    this.disableScrollBottomDetection(); // 스크롤 감지 정리
+    this.config.triggerElement.removeEventListener('keydown', this.keyDownHandler);
+  };
+  return SelectBoxController;
+}();