@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -1,30 +1,2 @@
-export * from './src/components/badge';
-export * from './src/components/breadcrumb';
-export * from './src/components/button';
-export * from './src/components/carousel';
-export * from './src/components/checkbox';
-export * from './src/components/date-picker';
-export * from './src/components/divider';
-export * from './src/components/dropdown';
-export * from './src/components/empty-state';
-export * from './src/components/featured-icon';
-export * from './src/components/input';
-export * from './src/components/modal';
-export * from './src/components/notification';
-export * from './src/components/pagination';
-export * from './src/components/progress-bar';
-export * from './src/components/progress-circle';
-export * from './src/components/radio';
-export * from './src/components/select';
-export * from './src/components/shared/hintText';
-export * from './src/components/shared/label';
-export * from './src/components/shared';
-export * from './src/components/slider';
-export * from './src/components/spinner';
-export * from './src/components/tab';
-export * from './src/components/tag';
-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/index.d.ts

@@ -1,3 +1 @@
 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/badge-group/BadgeGroup.d.ts

@@ -0,0 +1,18 @@
+import type { ColorTone } from '../../../constant/color';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
+import { type BadgeProps } from '../badge';
+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;
+    size?: BadgeGroupSize;
+    color?: BadgeGroupColor;
+    href?: string;
+    target?: string;
+};
+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-group/index.d.ts

@@ -0,0 +1 @@
+export * from './BadgeGroup';

package/dist/types/src/components/bread-crumb/BreadCrumb.d.ts

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

package/dist/types/src/components/bread-crumb/index.d.ts

@@ -0,0 +1 @@
+export * from './BreadCrumb';

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 };

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

@@ -1,4 +1,4 @@
-import { Size } from '../../../constant/size';
+import type { Size } from '../../../constant/size';
 export type ButtonStepperProps = {
     size: Extract<Size, 'xs' | 'sm'>;
     direction: 'up' | 'down';
@@ -7,4 +7,3 @@ export type ButtonStepperProps = {
     className?: string;
 };
 export declare const ButtonStepper: ({ size, direction, disabled, onClick, className }: ButtonStepperProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ButtonStepper.d.ts.map

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

@@ -1,5 +1,3 @@
 export * from './Button';
 export * from './ButtonCloseX';
-export * from './ButtonGroup';
 export * from './ButtonStepper';
-//# sourceMappingURL=index.d.ts.map