@ncds/ui-admin 1.8.1 → 1.8.2

package/dist/esm/assets/scripts/utils/unifiedBox/unifiedBoxController.js

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