@ncds/ui-admin 1.3.0 → 1.5.0

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

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Resize Observer를 사용하여 요소의 크기 변화를 감지하는 커스텀 훅
+ * @param callback 크기 변화 시 실행될 콜백 함수
+ * @param isActive 옵저버 활성화 여부
+ * @param target 관찰할 대상 요소 (기본값: document.body)
+ */
+export var useWindowResize = function (callback, isActive, target) {
+  if (isActive === void 0) {
+    isActive = true;
+  }
+  var resizeObserverRef = useRef(null);
+  useEffect(function () {
+    if (!isActive) return;
+    // Resize Observer 지원 여부 확인
+    if (!window.ResizeObserver) {
+      // Resize Observer를 지원하지 않는 브라우저의 경우 기존 방식 사용
+      var handleResize_1 = function () {
+        callback();
+      };
+      window.addEventListener('resize', handleResize_1);
+      return function () {
+        window.removeEventListener('resize', handleResize_1);
+      };
+    }
+    // Resize Observer 생성
+    resizeObserverRef.current = new ResizeObserver(function (entries) {
+      // entries가 비어있지 않을 때만 콜백 실행
+      if (entries.length > 0) {
+        callback();
+      }
+    });
+    // 관찰할 대상 요소 결정
+    var targetElement = target || document.body;
+    if (targetElement) {
+      resizeObserverRef.current.observe(targetElement);
+    }
+    return function () {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+    };
+  }, [callback, isActive, target]);
+};

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

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

package/dist/esm/src/types/dropdown/dropdown.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/types/dropdown/index.js

@@ -0,0 +1,2 @@
+export * from './dropdown';
+export * from './option';

package/dist/esm/src/types/dropdown/option.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+// 드롭다운 관련 types
+export * from './dropdown';

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

@@ -14,4 +14,36 @@ export function getSubtractDate(_a) {
     period = _a.period,
     unit = _a.unit;
   return moment(date).subtract(period, unit).toDate();
-}
+}
+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);
+    return "".concat(year, "-").concat(month, "-").concat(day);
+  }
+  return 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) {
+    return hourStr;
+  }
+  return input;
+};
+export var formatMinuteInput = function (input) {
+  // 숫자만 추출
+  var numbers = input.replace(/\D/g, '');
+  // 2자리 숫자로 제한
+  var minuteStr = numbers.substring(0, 2);
+  var minuteNum = parseInt(minuteStr, 10);
+  // 00-59 범위 체크
+  if (minuteNum >= 0 && minuteNum <= 59) {
+    return minuteStr; // 2자리로 패딩
+  }
+  return input;
+};

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

@@ -0,0 +1,97 @@
+/**
+ * 드롭다운 위치를 계산하는 유틸리티 함수
+ */
+export var calculateDropdownPosition = function (_a) {
+  var triggerRef = _a.triggerRef,
+    maxHeight = _a.maxHeight,
+    itemCount = _a.itemCount,
+    _b = _a.itemHeight,
+    itemHeight = _b === void 0 ? 40 : _b,
+    _c = _a.offset,
+    offset = _c === void 0 ? 20 : _c;
+  if (!(triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
+    return {
+      direction: 'down',
+      maxHeight: maxHeight
+    };
+  }
+  var rect = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current.getBoundingClientRect();
+  var viewportHeight = window.innerHeight;
+  var dropdownHeight = Math.min(maxHeight, itemCount * itemHeight);
+  // 아래쪽 공간이 충분한지 확인
+  var spaceBelow = viewportHeight - rect.bottom;
+  if (spaceBelow < dropdownHeight + offset) {
+    return {
+      direction: 'up',
+      maxHeight: maxHeight
+    };
+  } else {
+    return {
+      direction: 'down',
+      maxHeight: maxHeight
+    };
+  }
+};
+/**
+ * 키보드 네비게이션을 위한 포커스 인덱스 계산
+ */
+export var calculateNextFocusIndex = function (currentIndex, direction, validOptionsLength) {
+  if (validOptionsLength === 0) return -1;
+  if (direction === 'down') {
+    return currentIndex < validOptionsLength - 1 ? currentIndex + 1 : 0;
+  } else {
+    return currentIndex > 0 ? currentIndex - 1 : validOptionsLength - 1;
+  }
+};
+/**
+ * 드롭다운이 뷰포트를 벗어나지 않도록 위치 조정
+ */
+export var adjustDropdownPosition = function (dropdownElement, triggerElement) {
+  var dropdownRect = dropdownElement.getBoundingClientRect();
+  var viewportWidth = window.innerWidth;
+  var viewportHeight = window.innerHeight;
+  // 좌우 위치 조정
+  if (dropdownRect.right > viewportWidth) {
+    var overflow = dropdownRect.right - viewportWidth;
+    dropdownElement.style.left = "".concat(-overflow - 10, "px");
+  }
+  if (dropdownRect.left < 0) {
+    dropdownElement.style.left = '10px';
+  }
+  // 상하 위치 조정 (이미 up/down 방향이 결정된 후 미세 조정)
+  if (dropdownRect.bottom > viewportHeight) {
+    var overflow = dropdownRect.bottom - viewportHeight;
+    dropdownElement.style.maxHeight = "".concat(dropdownRect.height - overflow - 10, "px");
+  }
+};
+/**
+ * 스크롤 가능한 부모 요소를 찾는 유틸리티 함수
+ */
+export var findScrollableParent = function (element, boundary) {
+  var current = element;
+  while (current && current !== boundary && current !== document.body) {
+    var style = window.getComputedStyle(current);
+    var overflowY = style.overflowY;
+    if (overflowY === 'scroll' || overflowY === 'auto') {
+      var scrollHeight = current.scrollHeight,
+        clientHeight = current.clientHeight;
+      if (scrollHeight > clientHeight) {
+        return current;
+      }
+    }
+    current = current.parentElement;
+  }
+  // boundary 자체가 스크롤 가능한지 확인
+  if (current === boundary) {
+    var style = window.getComputedStyle(boundary);
+    var overflowY = style.overflowY;
+    if (overflowY === 'scroll' || overflowY === 'auto') {
+      var scrollHeight = boundary.scrollHeight,
+        clientHeight = boundary.clientHeight;
+      if (scrollHeight > clientHeight) {
+        return boundary;
+      }
+    }
+  }
+  return null;
+};

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

@@ -0,0 +1,2 @@
+export * from './dropdownUtils';
+export * from './multiSelect';

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

@@ -0,0 +1,88 @@
+/**
+ * 전체 선택 상태를 확인하는 유틸 함수
+ */
+export var isAllItemsSelected = function (selectedValues, options) {
+  if (options.length === 0) return false;
+  var validOptionIds = options.filter(function (option) {
+    return !option.disabled;
+  }).map(function (option) {
+    return option.id;
+  });
+  return validOptionIds.length > 0 && validOptionIds.every(function (id) {
+    return selectedValues.includes(id);
+  });
+};
+/**
+ * 전체 선택 버튼 텍스트를 반환하는 유틸 함수
+ */
+export var getSelectAllButtonText = function (selectedValues, options, selectText, deselectText) {
+  if (selectText === void 0) {
+    selectText = '전체 선택';
+  }
+  if (deselectText === void 0) {
+    deselectText = '전체 해제';
+  }
+  return isAllItemsSelected(selectedValues, options) ? deselectText : selectText;
+};
+/**
+ * 전체 선택/해제를 처리하는 유틸 함수
+ */
+export var handleSelectAllItems = function (selectedValues, options) {
+  if (isAllItemsSelected(selectedValues, options)) {
+    // 전체 해제: 빈 배열 반환
+    return [];
+  }
+  // 전체 선택: 비활성화되지 않은 모든 옵션 ID 반환
+  return options.filter(function (option) {
+    return !option.disabled;
+  }).map(function (option) {
+    return option.id;
+  });
+};
+/**
+ * 선택된 항목들을 태그 데이터로 변환하는 유틸 함수
+ */
+export var getSelectedTags = function (selectedValues, options) {
+  return selectedValues.map(function (value) {
+    var option = options.find(function (opt) {
+      return opt.id === value;
+    });
+    return option ? {
+      id: option.id,
+      label: option.label || String(option.id)
+    } : null;
+  }).filter(function (tag) {
+    return tag !== null;
+  });
+};
+/**
+ * 태그 제거 시 선택값에서 해당 ID를 제거하는 유틸 함수
+ */
+export var removeTagFromSelected = function (selectedValues, tagIdToRemove) {
+  return selectedValues.filter(function (id) {
+    return id !== tagIdToRemove;
+  });
+};
+/**
+ * 전체 선택 관련 로직을 한 번에 처리하는 커스텀 훅
+ */
+export var useMultiSelect = function (selectedValues, options, selectText, deselectText) {
+  var isAllSelected = isAllItemsSelected(selectedValues, options);
+  var buttonText = getSelectAllButtonText(selectedValues, options, selectText, deselectText);
+  var toggleSelectAll = function () {
+    return handleSelectAllItems(selectedValues, options);
+  };
+  var getSelectedTagsData = function () {
+    return getSelectedTags(selectedValues, options);
+  };
+  var removeTag = function (tagId) {
+    return removeTagFromSelected(selectedValues, tagId);
+  };
+  return {
+    isAllSelected: isAllSelected,
+    buttonText: buttonText,
+    toggleSelectAll: toggleSelectAll,
+    getSelectedTagsData: getSelectedTagsData,
+    removeTag: removeTag
+  };
+};

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

@@ -0,0 +1,4 @@
+// 날짜 관련 utils
+export * from './date-picker';
+// 드롭다운 관련 utils
+export * from './dropdown';

package/dist/types/assets/scripts/comboBox.d.ts

@@ -0,0 +1,91 @@
+import { Size } from '@ncds/ui-admin/constant/size';
+import { OptionValue } from '../../src/types';
+import { DropdownOption } from './utils/selectbox/DropdownModel';
+import { UnifiedSelectBoxConfig } from './utils/selectbox/UnifiedSelectBox';
+export interface ComboBoxOptionType {
+    id: string | number;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboBoxConfig {
+    options?: ComboBoxOptionType[];
+    placeholder?: string;
+    value?: OptionValue;
+    onChange?: (value: OptionValue) => void;
+    onSearch?: (searchValue: string) => void;
+    onEdit?: () => void;
+    onSelectAll?: () => void;
+    onSearchAll?: () => void;
+    onComplete?: () => void;
+    onTagRemove?: (tagId: string | number) => void;
+    onScrollBottom?: () => void;
+    searchDebounceMs?: number;
+    maxHeight?: number;
+    disabled?: boolean;
+    size?: Extract<Size, 'xs' | 'sm'>;
+    multiple?: boolean;
+    showFooterButtons?: boolean;
+    label?: string;
+    required?: boolean;
+}
+export declare class ComboBox {
+    private element;
+    private unifiedSelectBox;
+    private targetSelect;
+    private isInitializing;
+    private lastValue;
+    constructor(element: HTMLElement, config?: ComboBoxConfig);
+    /**
+     * 타겟 select 요소 찾기
+     */
+    private findTargetSelect;
+    /**
+     * HTML select에서 옵션 파싱
+     */
+    private parseOptionsFromHTML;
+    /**
+     * HTML에서 속성 파싱
+     */
+    private parseAttributesFromHTML;
+    /**
+     * 타겟 select와 동기화 (Single 모드)
+     */
+    private syncWithTargetSelect;
+    /**
+     * 타겟 select와 동기화 (Multiple 모드)
+     */
+    private syncWithTargetSelectMultiple;
+    getValues(): DropdownOption[];
+    getOptions(): DropdownOption[];
+    setValues(value: DropdownOption[]): void;
+    updateOptions(newOptions: DropdownOption[]): void;
+    setDisabled(disabled: boolean): void;
+    open(): void;
+    close(): void;
+    focus(): void;
+    destroy(): void;
+    clearInput(): void;
+    getDebugInfo(): {
+        config: UnifiedSelectBoxConfig;
+        modelState: any;
+        isOpen: boolean;
+    };
+    selectAll(): void;
+    deselectAll(): void;
+    getSelectedCount(): number;
+    isMultiple(): boolean;
+    toggleSelectAll(): void;
+    /**
+     * 드롭다운을 스크롤의 바닥으로 이동
+     */
+    scrollToBottom(): void;
+    /**
+     * 전체 선택 버튼의 텍스트를 외부에서 변경
+     */
+    setSelectAllButtonText(text: string): void;
+    /**
+     * 특정 인덱스의 옵션으로 포커스 이동
+     */
+    setFocusIndex(index: number): void;
+}
+//# sourceMappingURL=comboBox.d.ts.map

package/dist/types/assets/scripts/datePicker.d.ts

@@ -1,22 +1,16 @@
+import { Options as FlatpickrOptions } from 'flatpickr/dist/types/options';
 export type DatePickerSize = 'xs' | 'sm';
 interface Options {
     buttons?: DatePickerButton[];
     size: DatePickerSize;
+    autoComplete?: 'on' | 'off';
     datePickerOptions: DatePickerOptionWrapper[];
 }
 interface DatePickerOptionWrapper {
     element: string;
-    options: DatePickerOption;
-}
-interface DatePickerOption {
-    defaultDate?: string | Date | Date[];
-    enableTime?: boolean;
-    dateFormat?: string;
-    locale?: string;
-    mode?: 'single' | 'range' | 'multiple';
-    maxDate?: string | Date;
-    minDate?: string | Date;
-    onChange?: (selectedDates: Date[], dateStr: string, instance: any) => void;
+    attrName?: string;
+    placeholder?: string;
+    options: FlatpickrOptions;
 }
 interface DatePickerButton {
     text: string;
@@ -25,13 +19,20 @@ interface DatePickerButton {
     isCurrent: boolean;
 }
 export declare class DatePicker {
-    private readonly element;
+    private static instanceCounter;
+    private static usedWrappers;
+    private readonly contentWrapper;
     private readonly datePickerOptions;
     private readonly size;
+    private readonly instanceId;
+    private separator;
+    private autoComplete;
     private buttons;
     private flatpickrInstances;
     private currentButton;
+    private dateFormat;
     constructor(wrapper: HTMLElement, options: Options);
+    private validateWrapper;
     private init;
     private validationDependencies;
     private initializeWrapper;
@@ -42,8 +43,11 @@ export declare class DatePicker {
     private initializeFlatpickr;
     private updateDateWithButton;
     private setMultipleDates;
+    private updateButtonsByPeriod;
+    private calculateDatesFromButton;
     setDate(dates: string[]): void;
-    getDates(): Date[];
+    private convertFlatpickrFormatToMoment;
+    getDates(): string[];
 }
 export {};
 //# sourceMappingURL=datePicker.d.ts.map

package/dist/types/assets/scripts/featuredIcon.d.ts

@@ -0,0 +1,23 @@
+export type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
+export type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';
+export type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface FeaturedIconOptions {
+    svgString: string;
+    theme?: FeaturedIconTheme;
+    color?: FeaturedIconColor;
+    size?: FeaturedIconSize;
+    className?: string;
+}
+export declare class FeaturedIcon {
+    private element;
+    private options;
+    constructor(options: FeaturedIconOptions);
+    private createElement;
+    private addSizeToSvg;
+    getElement(): HTMLElement;
+    updateColor(color: FeaturedIconColor): void;
+    updateSize(size: FeaturedIconSize): void;
+    destroy(): void;
+    static create(options: FeaturedIconOptions): FeaturedIcon;
+}
+//# sourceMappingURL=featuredIcon.d.ts.map

package/dist/types/assets/scripts/fileInput/FileInput.d.ts

@@ -0,0 +1,67 @@
+import { BaseFileInputOptions, UploadedFile } from './const/types';
+export declare class FileInput {
+    private model;
+    private view;
+    constructor(options: BaseFileInputOptions);
+    /**
+     * 컨테이너에 요소 추가
+     */
+    private appendToContainer;
+    /**
+     * 이벤트 리스너 설정
+     */
+    private setupEventListeners;
+    /**
+     * 파일 선택 버튼 클릭 핸들러
+     */
+    private handleBrowseClick;
+    /**
+     * 파일 변경 핸들러
+     */
+    private handleFileChange;
+    /**
+     * 파일 제거 핸들러
+     * 주의: 이 메서드는 renderFileTags에서 사용되지만,
+     * 파일 선택 시 자동 렌더링이 비활성화되어 있으므로 수동으로 호출해야 함
+     */
+    private handleRemoveFile;
+    /**
+     * 변경 알림 (onChange/onFileSelect 호출)
+     * 주의: 이 메서드는 setFiles 등 내부적으로 파일 목록이 변경될 때만 사용됨
+     */
+    private notifyChange;
+    /**
+     * 뷰 렌더링 (내부용)
+     */
+    private render;
+    /**
+     * 파일 태그를 수동으로 렌더링
+     * 사용자가 콜백에서 직접 호출하여 태그를 렌더링할 수 있음
+     */
+    renderFileTags(): void;
+    /**
+     * DOM 요소 반환
+     */
+    getElement(): HTMLDivElement;
+    /**
+     * 현재 파일 목록 반환
+     */
+    getFiles(): File[];
+    /**
+     * 초기 업로드된 파일 목록 설정
+     */
+    setFiles(uploadedFiles: UploadedFile[]): void;
+    /**
+     * 모든 파일 제거
+     */
+    clearFiles(): void;
+    /**
+     * disabled 상태 설정
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 리소스 정리
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=FileInput.d.ts.map

package/dist/types/assets/scripts/fileInput/FileInputModel.d.ts

@@ -0,0 +1,70 @@
+import { BaseFileInputOptions, InvalidFile, RequiredFileInputProps, UploadedFile } from './const/types';
+export declare class FileInputModel {
+    private options;
+    private internalFiles;
+    private initialFiles;
+    private newlyAddedFiles;
+    private deletedInitialFiles;
+    constructor(options: BaseFileInputOptions);
+    /**
+     * 옵션 반환
+     */
+    getOptions(): RequiredFileInputProps;
+    /**
+     * 현재 파일 목록 반환 (초기 파일 + 새로 추가된 파일, 삭제 표시된 파일 제외)
+     */
+    getFiles(): File[];
+    /**
+     * 파일명에서 MIME 타입 추론
+     */
+    private getMimeTypeFromFileName;
+    /**
+     * 초기 업로드된 파일 목록 설정 (UploadedFile[] 타입만 허용)
+     */
+    setFiles(uploadedFiles: UploadedFile[]): void;
+    /**
+     * 파일 추가
+     */
+    addFiles(files: File[]): void;
+    /**
+     * 특정 인덱스의 파일 제거
+     */
+    removeFile(index: number): void;
+    /**
+     * 모든 파일 제거
+     */
+    clearFiles(): void;
+    /**
+     * 파일 유효성 검사
+     */
+    validateFiles(fileList: File[]): {
+        validFiles: File[];
+        invalidFiles: InvalidFile[];
+    };
+    /**
+     * disabled 상태 설정
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * disabled 상태 반환
+     */
+    isDisabled(): boolean;
+    /**
+     * Controlled mode 여부 확인
+     * onChange가 있으면 Controlled mode로 판단
+     */
+    isControlled(): boolean;
+    /**
+     * 파일이 초기 파일인지 확인 (UploadedFile로 설정된 기존 파일)
+     */
+    isInitialFile(file: File): boolean;
+    /**
+     * 파일이 새로 추가된 파일인지 확인
+     */
+    isNewlyAddedFile(file: File): boolean;
+    /**
+     * 파일이 삭제 표시된 초기 파일인지 확인
+     */
+    isDeletedInitialFile(file: File): boolean;
+}
+//# sourceMappingURL=FileInputModel.d.ts.map