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

package/dist/types/assets/scripts/utils/unifiedBox/domRenderer.d.ts

@@ -0,0 +1,107 @@
+export interface RenderableOption {
+    id: string | number;
+    label: string;
+    disabled?: boolean;
+    selected?: boolean;
+    focused?: boolean;
+}
+export interface DropdownRenderConfig {
+    maxHeight: number;
+    size: 'xs' | 'sm' | 'md';
+    listboxId: string;
+    noResultsText?: string;
+}
+export interface OptionElementData {
+    element: HTMLLIElement;
+    option: RenderableOption;
+    index: number;
+}
+export declare class DOMRenderer {
+    private optionElementCache;
+    /**
+     * 드롭다운 컨테이너 생성 (구조만)
+     */
+    createDropdownStructure(config: DropdownRenderConfig): {
+        dropdown: HTMLDivElement;
+        content: HTMLDivElement;
+        optionsList: HTMLUListElement;
+    };
+    /**
+     * 단일 옵션 엘리먼트 생성 (재사용 가능)
+     */
+    createOptionElement(option: RenderableOption, index: number, config: DropdownRenderConfig): HTMLLIElement;
+    /**
+     * 옵션 엘리먼트 상태 업데이트 (DOM 조작 최소화)
+     */
+    updateOptionElement(element: HTMLLIElement, option: RenderableOption, index: number, config: DropdownRenderConfig): void;
+    /**
+     * "결과 없음" 엘리먼트 생성
+     */
+    createNoResultsElement(text?: string): HTMLLIElement;
+    /**
+     * 옵션 리스트 효율적 업데이트 (Differential Rendering)
+     */
+    updateOptionsList(container: HTMLUListElement, newOptions: RenderableOption[], config: DropdownRenderConfig, showNoResults?: boolean): HTMLLIElement[];
+    /**
+     * 컨테이너 자식 엘리먼트 효율적 업데이트
+     */
+    private updateContainerChildren;
+    /**
+     * 클래스 토글 (변경이 필요한 경우에만)
+     */
+    private toggleClass;
+    /**
+     * 입력 필드 생성 (InputFieldUtils에서 이동)
+     */
+    createInputField(config: {
+        placeholder?: string;
+        disabled?: boolean;
+        size?: 'xs' | 'sm' | 'md';
+        showSearchIcon?: boolean;
+        onInput?: (value: string) => void;
+        onClick?: () => void;
+        onShowAll?: () => void;
+        onClear?: () => void;
+    }): {
+        container: HTMLElement;
+        input: HTMLInputElement;
+        setValue: (value: string) => void;
+        focus: () => void;
+        blur: () => void;
+    };
+    /**
+     * 캐시 정리
+     */
+    clearCache(): void;
+    /**
+     * 특정 옵션 캐시 제거
+     */
+    removeCachedOption(optionId: string | number): void;
+    /**
+     * 공통 DOM 생성 유틸리티
+     */
+    static createElementWithClass(tagName: string, className: string, textContent?: string): HTMLElement;
+    /**
+     * 버튼 엘리먼트 생성
+     */
+    static createButton(className: string, textContent: string, onClick?: (e: Event) => void): HTMLButtonElement;
+    /**
+     * SVG 아이콘 생성
+     */
+    static createSvgIcon(iconName: string, size?: number): SVGElement;
+    /**
+     * 푸터 생성
+     */
+    createFooter(config: {
+        multiple?: boolean;
+        showFooterButtons?: boolean;
+        onSelectAll?: () => void;
+        onEdit?: () => void;
+        onComplete?: () => void;
+        selectAllButtonText?: string;
+    }): HTMLElement;
+    /**
+     * 전체 선택 버튼 텍스트 업데이트
+     */
+    updateSelectAllButtonText(footerElement: HTMLElement, text: string): void;
+}

package/dist/types/assets/scripts/utils/unifiedBox/dropdownModel.d.ts

@@ -0,0 +1,142 @@
+export interface DropdownOption {
+    id: string | number;
+    label: string;
+    disabled?: boolean;
+    originalValue?: string;
+}
+export interface DropdownState {
+    isOpen: boolean;
+    focusedIndex: number;
+    selectedValues: (string | number)[];
+    searchValue: string;
+    showAllItems: boolean;
+    options: DropdownOption[];
+    filteredOptions: DropdownOption[];
+}
+export interface StateChangeListener {
+    onStateChange(newState: DropdownState, changedFields: string[]): void;
+}
+/**
+ * 드롭다운 상태 관리 모델
+ * Observer Pattern을 통한 상태 변경 알림
+ */
+export type FilterStrategy = (options: DropdownOption[], searchValue: string, showAllItems: boolean) => DropdownOption[];
+export declare class DropdownModel {
+    private state;
+    private listeners;
+    protected multiple: boolean;
+    private filterStrategy;
+    constructor(initialOptions: DropdownOption[], multiple?: boolean, filterStrategy?: FilterStrategy);
+    /** SelectBox 기본 전략: 항상 모든 옵션 표시 */
+    static defaultFilterStrategy: FilterStrategy;
+    /** ComboBox 전략: 검색어/전체보기 기반 필터링 */
+    static comboBoxFilterStrategy: FilterStrategy;
+    /**
+     * 상태 변경 리스너 등록
+     */
+    addListener(listener: StateChangeListener): void;
+    /**
+     * 상태 변경 리스너 제거
+     */
+    removeListener(listener: StateChangeListener): void;
+    /**
+     * 상태 변경 알림
+     */
+    private notifyListeners;
+    /**
+     * 드롭다운 열기/닫기
+     */
+    setOpen(isOpen: boolean): void;
+    /**
+     * 포커스 인덱스 설정
+     */
+    setFocusedIndex(index: number): void;
+    /**
+     * 검색어 설정 및 필터링
+     */
+    setSearchValue(searchValue: string): void;
+    /**
+     * 전체 보기 토글
+     */
+    setShowAllItems(showAll: boolean): void;
+    /**
+     * 선택된 값들을 직접 설정 (protected)
+     */
+    protected setSelectedValues(values: (string | number)[]): void;
+    /**
+     * 옵션 선택/해제
+     */
+    toggleOption(optionId: string | number): void;
+    /**
+     * 옵션 업데이트
+     */
+    updateOptions(newOptions: DropdownOption[]): void;
+    /**
+     * 필터링된 옵션 업데이트
+     */
+    private updateFilteredOptions;
+    /**
+     * 현재 상태 반환 (읽기 전용)
+     */
+    getState(): Readonly<DropdownState>;
+    /**
+     * 다중 선택 모드 여부 반환
+     */
+    isMultiple(): boolean;
+    /**
+     * 선택된 옵션들 반환
+     */
+    getSelectedOptions(): DropdownOption[];
+    /**
+     * 옵션이 선택되었는지 확인
+     */
+    isOptionSelected(optionId: string | number): boolean;
+    /**
+     * 상태 리셋
+     */
+    reset(): void;
+    /**
+     * 전체 선택/해제 토글 (MultiSelectUtils에서 이동)
+     */
+    toggleSelectAll(): void;
+    /**
+     * 전체 선택 버튼 텍스트 반환 (MultiSelectUtils에서 이동)
+     */
+    getSelectAllButtonText(): string;
+    /**
+     * 모든 항목이 선택되었는지 확인 (MultiSelectUtils에서 이동)
+     */
+    isAllItemsSelected(): boolean;
+    /**
+     * 검색 및 필터링 업데이트 (SearchFilterUtils에서 이동)
+     */
+    updateSearchAndFilter(searchValue: string, showAllItems?: boolean): void;
+    /**
+     * 검색어만 업데이트 (필터링 없이, API 모드용)
+     */
+    updateSearchValue(searchValue: string): void;
+    /**
+     * 드롭다운이 열릴 수 있는지 확인 (ComboBox용)
+     */
+    canOpenDropdown(): boolean;
+    /**
+     * 검색 결과가 없는지 확인
+     */
+    hasNoResults(): boolean;
+    /**
+     * 값 설정 (API 호환성)
+     */
+    setValue(value: string | number | (string | number)[]): void;
+    /**
+     * 값 가져오기 (API 호환성)
+     */
+    getValue(): string | number | (string | number)[];
+    /**
+     * 입력 초기화 (ComboBox용)
+     */
+    clearInput(): void;
+    /**
+     * 디버그 정보 (개발용)
+     */
+    getDebugInfo(): any;
+}

package/dist/types/assets/scripts/utils/unifiedBox/unifiedBoxController.d.ts

@@ -0,0 +1,156 @@
+import { DOMRenderer, DropdownRenderConfig } from './domRenderer';
+import { DropdownModel, DropdownState, StateChangeListener } from './dropdownModel';
+export interface UnifiedBoxControllerConfig {
+    triggerElement: HTMLElement;
+    dropdownElement: HTMLElement;
+    model: DropdownModel;
+    renderer: DOMRenderer;
+    renderConfig: DropdownRenderConfig;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onSelectionChange?: (selectedValues: (string | number)[]) => void;
+    onSearch?: (searchValue: string) => void;
+    onScrollBottom?: () => void;
+    disabled?: boolean;
+    canToggle?: () => boolean;
+    type?: 'selectbox' | 'combobox';
+}
+/**
+ * SelectBox 통합 컨트롤러
+ * 이벤트 처리, UI 상태 제어, 사용자 인터랙션 담당
+ */
+export declare class UnifiedBoxController implements StateChangeListener {
+    private config;
+    private isOpen;
+    private focusedIndex;
+    private isKeyboardNavigation;
+    private outsideClickHandler;
+    private keyDownHandler;
+    private scrollLockHandlers;
+    private optionElements;
+    private handlerMap;
+    private scrollPosition;
+    private mouseMoveHandlerAttached;
+    private lastFilteredOptionsCount;
+    private lastFilteredOptionsHash;
+    private scrollBottomHandler?;
+    private lastScrollBottomTime;
+    constructor(config: UnifiedBoxControllerConfig);
+    /**
+     * 상태 변경 리스너 (Observer Pattern)
+     */
+    onStateChange(newState: DropdownState, changedFields: string[]): void;
+    /**
+     * 이벤트 핸들러 설정
+     */
+    private setupEventHandlers;
+    /**
+     * 드롭다운 열기
+     */
+    open(): void;
+    /**
+     * 드롭다운 닫기
+     */
+    close(): void;
+    /**
+     * 드롭다운 토글
+     */
+    toggle(): void;
+    /**
+     * 키보드 입력 처리
+     */
+    private handleKeyDown;
+    /**
+     * 옵션 검색
+     */
+    private searchOption;
+    /**
+     * 드롭다운 표시/숨김 업데이트
+     */
+    private updateDropdownVisibility;
+    /**
+     * 옵션 표시 업데이트
+     */
+    private updateOptionsDisplay;
+    /**
+     * 포커스된 옵션 업데이트
+     */
+    private updateFocusedOption;
+    /**
+     * 옵션 클릭 이벤트 핸들러 등록
+     */
+    private attachOptionEventHandlers;
+    /**
+     * 옵션 이벤트 핸들러 제거
+     */
+    private removeOptionEventHandlers;
+    /**
+     * 옵션 업데이트가 필요한지 판단
+     */
+    private shouldUpdateOptions;
+    /**
+     * 외부 클릭 감지 활성화
+     */
+    private enableOutsideClick;
+    /**
+     * 외부 클릭 감지 비활성화
+     */
+    private disableOutsideClick;
+    /**
+     * 스크롤 잠금 활성화 (드롭다운 내부 스크롤은 허용)
+     * ComboBox 또는 multiple 모드에서는 스크롤 잠금 비활성화
+     */
+    private enableScrollLock;
+    /**
+     * 스크롤 가능한 부모 요소 찾기
+     */
+    private findScrollableParent;
+    /**
+     * 스크롤 잠금 해제
+     */
+    private disableScrollLock;
+    /**
+     * 마우스 호버 처리 (외부에서 호출용)
+     */
+    handleMouseHover(index: number): void;
+    /**
+     * 옵션 배열 업데이트
+     */
+    updateOptions(options: any[]): void;
+    getIsOpen(): boolean;
+    setFocus(index: number): void;
+    getFocusedIndex(): number;
+    /**
+     * 드롭다운 위치 조정 (화면 크기에 따라 up/down 방향 결정)
+     * 단일 선택 모드에서만 적용
+     */
+    private adjustDropdownPosition;
+    /**
+     * 드롭다운 위치 계산 (React dropdownUtils.ts 로직 참고)
+     */
+    private calculateDropdownPosition;
+    /**
+     * 드롭다운 예상 높이 계산
+     */
+    private estimateDropdownHeight;
+    /**
+     * 드롭다운 세부 위치 조정 (뷰포트 경계 처리)
+     */
+    private adjustDropdownPositionDetails;
+    /**
+     * 스크롤 바닥 감지 활성화
+     */
+    private enableScrollBottomDetection;
+    /**
+     * 스크롤 바닥 감지 비활성화
+     */
+    private disableScrollBottomDetection;
+    /**
+     * disabled 상태 설정
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 정리
+     */
+    destroy(): void;
+}

package/dist/types/assets/scripts/utils/unifiedBox/unifiedBoxManager.d.ts

@@ -0,0 +1,95 @@
+import { OptionValue } from '../../../../src/types';
+import { DropdownOption } from './dropdownModel';
+export interface UnifiedBoxManagerConfig {
+    options?: DropdownOption[];
+    placeholder?: string;
+    value?: OptionValue;
+    onChange?: (value: OptionValue) => void;
+    onSearch?: (searchValue: string) => void | Promise<void>;
+    onEdit?: () => void;
+    onSelectAll?: () => void;
+    onSearchAll?: () => void;
+    onComplete?: () => void;
+    onScrollBottom?: () => void;
+    searchDebounceMs?: number;
+    maxHeight?: number;
+    disabled?: boolean;
+    size?: 'xs' | 'sm' | 'md';
+    multiple?: boolean;
+    showFooterButtons?: boolean;
+    label?: string;
+    required?: boolean;
+    type?: 'selectbox' | 'combobox';
+}
+/**
+ * 통합된 UnifiedBox 클래스
+ * SelectBox와 ComboBox의 기능을 모두 포함
+ */
+export declare class UnifiedBoxManager {
+    private element;
+    private config;
+    private model;
+    private renderer;
+    private controller;
+    private inputField?;
+    private debouncedSearch;
+    private lastSearchValue;
+    private hasInitialOptions;
+    private isComboBox;
+    private baseClass;
+    private dropdownElement?;
+    private triggerElement?;
+    private footerElement?;
+    private arrowElement?;
+    constructor(element: HTMLElement, config?: UnifiedBoxManagerConfig);
+    private initialize;
+    private setupElementClasses;
+    private createUI;
+    private createComboBoxUI;
+    private createSelectBoxUI;
+    private createDropdown;
+    private setupController;
+    private handleInput;
+    private handleInputClick;
+    private handleClearInput;
+    private handleShowAll;
+    private handleSelectionChange;
+    private updateSelectBoxValue;
+    private canToggleDropdown;
+    private handleSelectAll;
+    private handleComplete;
+    private updateSelectAllButtonText;
+    getValues(): DropdownOption[];
+    getOptions(): DropdownOption[];
+    setValues(value: DropdownOption[]): void;
+    updateOptions(newOptions: DropdownOption[]): void;
+    setDisabled(disabled: boolean): void;
+    open(): void;
+    close(): void;
+    focus(): void;
+    destroy(): void;
+    selectAll(): void;
+    deselectAll(): void;
+    isMultiple(): boolean;
+    toggleSelectAll(): void;
+    getDebugInfo(): {
+        config: UnifiedBoxManagerConfig;
+        modelState: any;
+        isOpen: boolean;
+    };
+    /**
+     * 드롭다운을 스크롤의 바닥으로 이동
+     * 전체 선택 시 추가 데이터 로드를 트리거하기 위해 사용
+     */
+    scrollToBottom(): void;
+    /**
+     * 전체 선택 버튼의 텍스트를 외부에서 변경
+     * @param text 버튼에 표시할 텍스트
+     */
+    setSelectAllButtonText(text: string): void;
+    /**
+     * 특정 인덱스의 옵션으로 포커스 이동
+     * @param index 포커스를 이동할 옵션의 인덱스
+     */
+    setFocusIndex(index: number): void;
+}

package/dist/types/constant/color.d.ts

@@ -34,4 +34,3 @@ export declare const COLOR: {
 };
 export type ColorKeyType = keyof typeof COLOR;
 export type ColorTone = 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled' | 'info';
-//# sourceMappingURL=color.d.ts.map

package/dist/types/constant/size.d.ts

@@ -1,2 +1 @@
 export type Size = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-//# sourceMappingURL=size.d.ts.map

package/dist/types/index.d.ts

@@ -27,4 +27,3 @@ export * from './src/components/toggle';
 export * from './src/components/tooltip';
 export * from './src/components';
 export * from './src/hooks';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/badge/Badge.d.ts

@@ -1,10 +1,10 @@
-import { ColorTone } from '../../../constant/color';
-import { Size } from '../../../constant/size';
-import { SideSlotType } from '../../types/side-slot';
-export type BadgeType = 'pill-outline' | 'pill-dark-color';
-export type BadgeColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
-export type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md'>;
-export type BadgeProps = {
+import type { ColorTone } from '../../../constant/color';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
+type BadgeType = 'pill-outline' | 'pill-dark-color';
+type BadgeColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
+type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md'>;
+type BadgeProps = {
     label: string;
     type?: BadgeType;
     color?: BadgeColor;
@@ -13,5 +13,6 @@ export type BadgeProps = {
     trailingIcon?: SideSlotType;
     size?: BadgeSize;
 };
-export declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Badge.d.ts.map
+declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export { Badge };
+export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };

package/dist/types/src/components/badge/BadgeGroup.d.ts

@@ -1,10 +1,10 @@
-import { type BadgeProps } from '.';
 import type { ColorTone } from '../../../constant/color';
 import type { Size } from '../../../constant/size';
 import type { SideSlotType } from '../../types/side-slot';
-export type BadgeGroupSize = Extract<Size, 'xs' | 'sm'>;
-export type BadgeGroupColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success'>;
-export type BadgeGroupProps = Omit<BadgeProps, 'type' | 'size' | 'color'> & {
+import { type BadgeProps } from '.';
+type BadgeGroupSize = Extract<Size, 'xs' | 'sm'>;
+type BadgeGroupColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success'>;
+type BadgeGroupProps = Omit<BadgeProps, 'type' | 'size' | 'color'> & {
     groupLabel: string;
     groupIcon?: SideSlotType;
     groupClassName?: string;
@@ -13,5 +13,6 @@ export type BadgeGroupProps = Omit<BadgeProps, 'type' | 'size' | 'color'> & {
     href?: string;
     target?: string;
 };
-export declare const BadgeGroup: ({ groupLabel, groupIcon, groupClassName, color, size, href, target, ...props }: BadgeGroupProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=BadgeGroup.d.ts.map
+declare const BadgeGroup: ({ groupLabel, groupIcon, groupClassName, color, size, href, target, ...props }: BadgeGroupProps) => import("react/jsx-runtime").JSX.Element;
+export { BadgeGroup };
+export type { BadgeGroupSize, BadgeGroupColor, BadgeGroupProps };

package/dist/types/src/components/badge/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Badge';
 export * from './BadgeGroup';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/badge/utils.d.ts

@@ -1,7 +1,8 @@
 import type { SideSlotType } from '../../types/side-slot';
-export type SideSlotRenderProps = {
+type SideSlotRenderProps = {
     slot: SideSlotType;
     defaultIconSize: number;
 };
-export declare const sideSlotRender: ({ slot, defaultIconSize }: SideSlotRenderProps) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-//# sourceMappingURL=utils.d.ts.map
+declare const sideSlotRender: ({ slot, defaultIconSize }: SideSlotRenderProps) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export { sideSlotRender };
+export type { SideSlotRenderProps };

package/dist/types/src/components/breadcrumb/BreadCrumb.d.ts

@@ -1,10 +1,11 @@
-export interface BreadcrumbItemProps {
+interface BreadcrumbItemProps {
     href?: string;
     label: string;
 }
-export interface BreadcrumbProps {
+interface BreadcrumbProps {
     items: BreadcrumbItemProps[];
     className?: string;
 }
-export declare const BreadCrumb: ({ items, className }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=BreadCrumb.d.ts.map
+declare const BreadCrumb: ({ items, className }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
+export { BreadCrumb };
+export type { BreadcrumbItemProps, BreadcrumbProps };

package/dist/types/src/components/breadcrumb/index.d.ts

@@ -1,2 +1 @@
 export * from './BreadCrumb';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/button/Button.d.ts

@@ -7,6 +7,7 @@ export type ButtonProps = Omit<ComponentProps<'button'>, 'ref'> & {
     className?: string;
     hierarchy?: ButtonTheme;
     disabled?: boolean;
+    loading?: boolean;
     leadingIcon?: SideSlotType;
     trailingIcon?: SideSlotType;
     onlyIcon?: boolean;
@@ -24,6 +25,7 @@ export declare const Button: import("react").ForwardRefExoticComponent<Omit<impo
     className?: string | undefined;
     hierarchy?: ButtonTheme | undefined;
     disabled?: boolean | undefined;
+    loading?: boolean | undefined;
     leadingIcon?: SideSlotType | undefined;
     trailingIcon?: SideSlotType | undefined;
     onlyIcon?: boolean | undefined;
@@ -31,4 +33,3 @@ export declare const Button: import("react").ForwardRefExoticComponent<Omit<impo
     children?: ReactNode;
     underline?: boolean | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=Button.d.ts.map

package/dist/types/src/components/button/ButtonCloseX.d.ts

@@ -1,9 +1,10 @@
 import type { Size } from '../../../constant/size';
-export type ButtonCloseXProps = {
+type ButtonCloseXProps = {
     size: Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
     theme?: 'dark' | 'light';
     onClick?: () => void;
     className?: string;
 };
-export declare const ButtonCloseX: ({ size, theme, className, onClick }: ButtonCloseXProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ButtonCloseX.d.ts.map
+declare const ButtonCloseX: ({ size, theme, className, onClick }: ButtonCloseXProps) => import("react/jsx-runtime").JSX.Element;
+export { ButtonCloseX };
+export type { ButtonCloseXProps };