@ncds/ui-admin 1.6.4 → 1.7.0

package/dist/temp/src/components/tab/index.d.ts

@@ -0,0 +1,3 @@
+export * from './HorizontalTab';
+export * from './TabButton';
+export * from './VerticalTab';

package/dist/temp/src/components/tab/index.js

@@ -0,0 +1,3 @@
+export * from './HorizontalTab';
+export * from './TabButton';
+export * from './VerticalTab';

package/dist/temp/src/components/tag/Tag.d.ts

@@ -0,0 +1,17 @@
+import { type MouseEventHandler } from 'react';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
+interface TagProps {
+    size?: Extract<Size, 'sm' | 'md'>;
+    icon?: SideSlotType;
+    text: string;
+    count?: string;
+    close?: boolean;
+    children?: React.ReactNode;
+    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    maxLength?: number;
+}
+type CalculatedPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+declare const Tag: ({ size, icon, text, count, close, onButtonClick, maxLength }: TagProps) => import("react/jsx-runtime").JSX.Element;
+export type { CalculatedPosition };
+export { Tag };

package/dist/temp/src/components/tag/Tag.js

@@ -0,0 +1,110 @@
+var __assign = (this && this.__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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XClose } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { useCallback, useRef, useState } from 'react';
+import { COLOR } from '../../../constant/color';
+import { Dot } from '../dot';
+var MARGIN = 10;
+var DEFAULT_TOOLTIP_WIDTH = 200;
+var DEFAULT_TOOLTIP_HEIGHT = 60;
+// 위치 계산 로직
+var calculateOptimalPosition = function (triggerElement, tooltipElement) {
+    var triggerRect = triggerElement.getBoundingClientRect();
+    var tooltipRect = tooltipElement.getBoundingClientRect();
+    var viewportWidth = window.innerWidth, viewportHeight = window.innerHeight;
+    var tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+    var tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+    var spaces = {
+        top: triggerRect.top,
+        bottom: viewportHeight - triggerRect.bottom,
+        left: triggerRect.left,
+        right: viewportWidth - triggerRect.right,
+    };
+    // 위/아래 공간을 먼저 확인하고 우선순위 결정
+    var hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
+    // 위쪽 공간이 있으면 top 우선, 없으면 bottom 우선
+    var positions = hasTopSpace
+        ? ['top-right', 'top-left', 'bottom-right', 'bottom-left']
+        : ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
+    for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
+        var position = positions_1[_i];
+        var isTop = position.includes('top');
+        var isRight = position.includes('right');
+        var hasVerticalSpace = isTop ? spaces.top >= tooltipHeight + MARGIN : spaces.bottom >= tooltipHeight + MARGIN;
+        var hasHorizontalSpace = isRight
+            ? spaces.right >= tooltipWidth + MARGIN // right 정렬: 툴팁이 오른쪽으로 펼쳐짐
+            : spaces.left >= tooltipWidth + MARGIN; // left 정렬: 툴팁이 왼쪽으로 펼쳐짐
+        if (hasVerticalSpace && hasHorizontalSpace) {
+            return position;
+        }
+    }
+    // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
+    var fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
+    return fallbackPosition;
+};
+var Tag = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, icon = _a.icon, text = _a.text, count = _a.count, close = _a.close, onButtonClick = _a.onButtonClick, _c = _a.maxLength, maxLength = _c === void 0 ? 20 : _c;
+    var _d = useState(false), isTooltipVisible = _d[0], setIsTooltipVisible = _d[1];
+    var _e = useState('top-right'), calculatedPosition = _e[0], setCalculatedPosition = _e[1];
+    var tagRef = useRef(null);
+    var tooltipRef = useRef(null);
+    var iconSize = {
+        sm: 14,
+        md: 16,
+    };
+    // 텍스트 길이 체크 및 말줄임 처리
+    var shouldTruncate = text.length > maxLength;
+    var displayText = shouldTruncate ? "".concat(text.slice(0, maxLength - 2), "...") : text;
+    var handleMouseEnter = useCallback(function () {
+        if (shouldTruncate) {
+            setIsTooltipVisible(true);
+            // 간단한 위치 계산 - 기본값 사용
+            if (tagRef.current && tooltipRef.current) {
+                var optimalPosition = calculateOptimalPosition(tagRef.current, tooltipRef.current);
+                setCalculatedPosition(optimalPosition);
+            }
+            else {
+                // ref가 없으면 다음 렌더링 사이클에서 시도
+                setTimeout(function () {
+                    if (tagRef.current) {
+                        // tooltipRef가 없어도 tagRef만으로 계산
+                        var dummyTooltipElement = document.createElement('div');
+                        dummyTooltipElement.style.width = "".concat(DEFAULT_TOOLTIP_WIDTH, "px");
+                        dummyTooltipElement.style.height = "".concat(DEFAULT_TOOLTIP_HEIGHT, "px");
+                        var optimalPosition = calculateOptimalPosition(tagRef.current, dummyTooltipElement);
+                        setCalculatedPosition(optimalPosition);
+                    }
+                }, 0);
+            }
+        }
+    }, [shouldTruncate]);
+    var handleMouseLeave = useCallback(function () {
+        setIsTooltipVisible(false);
+    }, []);
+    var sideSlotRender = function (slot) {
+        var _a;
+        if (slot.type === 'icon') {
+            var SlotIcon = slot.icon;
+            return _jsx(SlotIcon, { width: iconSize[size], height: iconSize[size], color: slot.color });
+        }
+        if (slot.type === 'dot') {
+            return _jsx(Dot, { color: slot.color, size: (_a = slot.size) !== null && _a !== void 0 ? _a : 'sm' });
+        }
+        return slot.children;
+    };
+    return (_jsxs("span", __assign({ ref: tagRef, className: classNames('ncua-tag', "ncua-tag--".concat(size), {
+            'ncua-tag--truncated': shouldTruncate,
+        }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: [icon && sideSlotRender(icon), _jsx("span", __assign({ className: "ncua-tag__text" }, { children: displayText })), count && _jsx("span", __assign({ className: "ncua-tag__count" }, { children: count })), close && (_jsx("button", __assign({ type: "button", className: "ncua-tag__close", onClick: onButtonClick }, { children: _jsx(XClose, { color: COLOR.gray300, width: iconSize[size], height: iconSize[size] }) }))), shouldTruncate && isTooltipVisible && (_jsx("span", __assign({ ref: tooltipRef, className: classNames('ncua-tag__tooltip', "ncua-tag__tooltip--".concat(calculatedPosition)) }, { children: _jsx("span", __assign({ className: "ncua-tag__tooltip-content" }, { children: text })) })))] })));
+};
+export { Tag };

package/dist/temp/src/components/tag/index.d.ts

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

package/dist/temp/src/components/tag/index.js

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

package/dist/temp/src/components/toggle/Toggle.d.ts

@@ -0,0 +1,10 @@
+import type { ChangeEvent, ComponentPropsWithRef } from 'react';
+export interface ToggleProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
+    size?: 'sm' | 'md';
+    text?: string;
+    supportText?: string;
+    disabled?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+}
+export declare const Toggle: ({ size, text, supportText, disabled, onChange, className, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/temp/src/components/toggle/Toggle.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+export var Toggle = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, _c = _a.text, text = _c === void 0 ? '' : _c, _d = _a.supportText, supportText = _d === void 0 ? '' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, onChange = _a.onChange, className = _a.className, props = __rest(_a, ["size", "text", "supportText", "disabled", "onChange", "className"]);
+    return (_jsxs("label", __assign({ className: classNames('ncua-toggle', "ncua-toggle--".concat(size), {
+            'ncua-toggle--disabled': disabled,
+        }, className) }, { children: [_jsx("input", __assign({ type: "checkbox", className: "ncua-toggle__input", checked: props === null || props === void 0 ? void 0 : props.checked, disabled: disabled, onChange: onChange }, props)), _jsx("span", __assign({ className: "ncua-toggle__switch" }, { children: _jsx("span", { className: "ncua-toggle__slider" }) })), text && (_jsxs("span", __assign({ className: "ncua-toggle__text-wrapper" }, { children: [_jsx("span", __assign({ className: "ncua-toggle__text" }, { children: text })), supportText && _jsx("span", __assign({ className: "ncua-toggle__support-text" }, { children: supportText }))] })))] })));
+};

package/dist/temp/src/components/toggle/index.d.ts

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

package/dist/temp/src/components/toggle/index.js

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

package/dist/temp/src/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,15 @@
+interface TooltipProps {
+    tooltipType?: 'white' | 'black';
+    iconType?: 'stroke' | 'fill';
+    position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'auto';
+    size?: 'sm' | 'md';
+    hideArrow?: boolean;
+    title?: string;
+    content?: React.ReactNode;
+    type?: 'long' | 'short';
+    className?: string;
+    iconColor?: string;
+    iconStyle?: 'help-circle' | 'alert-circle';
+}
+export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, type, iconColor, iconStyle, className, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/temp/src/components/tooltip/Tooltip.js

@@ -0,0 +1,122 @@
+var __assign = (this && this.__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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, AlertCircleFill, HelpCircle, HelpCircleFill } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { ButtonCloseX } from '../button/ButtonCloseX';
+var ICON_SIZE_SM = 14;
+var ICON_SIZE_DEFAULT = 16;
+var MARGIN = 10;
+var DEFAULT_TOOLTIP_WIDTH = 200;
+var DEFAULT_TOOLTIP_HEIGHT = 60;
+var POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
+// 수직 위치(top/bottom)일 때 수평 정렬 보정
+var resolveVerticalAlignment = function (position, triggerRect, tooltipWidth, viewportWidth) {
+    var centerX = triggerRect.left + triggerRect.width / 2;
+    var tooltipHalfWidth = tooltipWidth / 2;
+    if (centerX - tooltipHalfWidth < MARGIN) {
+        return "".concat(position, "-left");
+    }
+    if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
+        return "".concat(position, "-right");
+    }
+    return position;
+};
+// 해당 위치에 툴팁을 배치할 충분한 공간이 있는지 확인
+var hasEnoughSpace = function (position, spaces, tooltipWidth, tooltipHeight) {
+    var isVertical = position === 'bottom' || position === 'top';
+    var requiredSpace = isVertical ? tooltipHeight : tooltipWidth;
+    return spaces[position] >= requiredSpace + MARGIN;
+};
+// 위치 계산 position='auto' 일 때 사용
+var calculateOptimalPosition = function (triggerElement, tooltipElement, preferredPosition) {
+    if (preferredPosition === void 0) { preferredPosition = 'bottom'; }
+    var triggerRect = triggerElement.getBoundingClientRect();
+    var tooltipRect = tooltipElement.getBoundingClientRect();
+    var viewportWidth = window.innerWidth, viewportHeight = window.innerHeight;
+    var spaces = {
+        top: triggerRect.top,
+        bottom: viewportHeight - triggerRect.bottom,
+        left: triggerRect.left,
+        right: viewportWidth - triggerRect.right,
+    };
+    var tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
+    var tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
+    for (var _i = 0, POSITION_PRIORITY_1 = POSITION_PRIORITY; _i < POSITION_PRIORITY_1.length; _i++) {
+        var position = POSITION_PRIORITY_1[_i];
+        if (!hasEnoughSpace(position, spaces, tooltipWidth, tooltipHeight)) {
+            continue;
+        }
+        var isVertical = position === 'bottom' || position === 'top';
+        if (isVertical) {
+            return resolveVerticalAlignment(position, triggerRect, tooltipWidth, viewportWidth);
+        }
+        return position;
+    }
+    return preferredPosition;
+};
+export var Tooltip = function (_a) {
+    var _b = _a.tooltipType, tooltipType = _b === void 0 ? 'black' : _b, _c = _a.iconType, iconType = _c === void 0 ? 'stroke' : _c, _d = _a.position, position = _d === void 0 ? 'auto' : _d, _e = _a.size, size = _e === void 0 ? 'sm' : _e, title = _a.title, content = _a.content, _f = _a.hideArrow, hideArrow = _f === void 0 ? false : _f, _g = _a.type, type = _g === void 0 ? 'short' : _g, _h = _a.iconColor, iconColor = _h === void 0 ? 'var(--gray-300)' : _h, _j = _a.iconStyle, iconStyle = _j === void 0 ? 'help-circle' : _j, className = _a.className;
+    var iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
+    var tooltipRef = useRef(null);
+    var tooltipBgRef = useRef(null);
+    var _k = useState(position === 'auto' ? 'bottom' : position), calculatedPosition = _k[0], setCalculatedPosition = _k[1];
+    var _l = useState(false), isVisible = _l[0], setIsVisible = _l[1];
+    var _m = useState(false), isManuallyClose = _m[0], setIsManuallyClose = _m[1];
+    var _o = useState(false), isMeasuring = _o[0], setIsMeasuring = _o[1];
+    var handleMouseEnter = useCallback(function () {
+        if (isManuallyClose)
+            return;
+        setIsVisible(true);
+        if (position === 'auto' && tooltipRef.current && tooltipBgRef.current) {
+            // 크기 측정을 위해 임시로 measuring 클래스 추가
+            setIsMeasuring(true);
+            // 다음 렌더링 사이클에서 크기 측정
+            setTimeout(function () {
+                if (tooltipRef.current && tooltipBgRef.current) {
+                    var optimalPosition = calculateOptimalPosition(tooltipRef.current, tooltipBgRef.current, 'bottom');
+                    setCalculatedPosition(optimalPosition);
+                    setIsMeasuring(false);
+                }
+            }, 0);
+        }
+    }, [position, isManuallyClose]);
+    var handleMouseLeave = useCallback(function () {
+        if (type === 'short') {
+            setIsVisible(false);
+        }
+        setIsManuallyClose(false);
+    }, [type]);
+    var handleCloseClick = useCallback(function () {
+        setIsVisible(false);
+        setIsManuallyClose(true);
+    }, []);
+    var finalPosition = position === 'auto' ? calculatedPosition : position;
+    var tooltipClassName = useMemo(function () {
+        return classNames('ncua-tooltip', "ncua-tooltip--".concat(size), "ncua-tooltip--".concat(type), {
+            'ncua-tooltip--hidden-arrow': hideArrow,
+            'ncua-tooltip--stroke': iconType === 'stroke',
+            'ncua-tooltip--auto': position === 'auto',
+        }, className);
+    }, [size, type, hideArrow, iconType, position, className]);
+    var tooltipBgClassName = useMemo(function () {
+        return classNames('ncua-tooltip__bg', "ncua-tooltip__bg--".concat(tooltipType), "ncua-tooltip__bg--".concat(finalPosition), {
+            'ncua-tooltip__bg--visible': isVisible,
+            'ncua-tooltip__bg--measuring': isMeasuring,
+            'ncua-tooltip__bg--force-hidden': isManuallyClose,
+        });
+    }, [tooltipType, finalPosition, isVisible, isMeasuring, isManuallyClose]);
+    return (_jsxs("span", __assign({ ref: tooltipRef, className: tooltipClassName, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: [iconStyle === 'help-circle' &&
+                (iconType === 'stroke' ? (_jsx(HelpCircle, { width: iconSize, height: iconSize, color: iconColor })) : (_jsx(HelpCircleFill, { width: iconSize, height: iconSize, color: iconColor }))), iconStyle === 'alert-circle' &&
+                (iconType === 'stroke' ? (_jsx(AlertCircle, { width: iconSize, height: iconSize, color: iconColor })) : (_jsx(AlertCircleFill, { width: iconSize, height: iconSize, color: iconColor }))), _jsxs("span", __assign({ ref: tooltipBgRef, className: tooltipBgClassName }, { children: [title && _jsx("span", __assign({ className: "ncua-tooltip__title" }, { children: title })), content && _jsx("span", __assign({ className: "ncua-tooltip__content" }, { children: content })), type === 'long' && (_jsx(ButtonCloseX, { className: "ncua-tooltip__close-button", size: "xs", theme: tooltipType === 'white' ? 'dark' : 'light', onClick: handleCloseClick, "aria-label": "\uD234\uD301 \uB2EB\uAE30" }))] }))] })));
+};

package/dist/temp/src/components/tooltip/index.d.ts

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

package/dist/temp/src/components/tooltip/index.js

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

package/dist/temp/src/constant/breakpoint.d.ts

@@ -0,0 +1,6 @@
+export declare const BREAKPOINT: {
+    readonly mobile: "768px";
+};
+export declare const MEDIA_QUERY: {
+    readonly mobile: "(max-width: 768px)";
+};

package/dist/temp/src/constant/breakpoint.js

@@ -0,0 +1,6 @@
+export var BREAKPOINT = {
+    mobile: '768px',
+};
+export var MEDIA_QUERY = {
+    mobile: "(max-width: ".concat(BREAKPOINT.mobile, ")"),
+};

package/dist/temp/src/constant/date-picker.d.ts

@@ -0,0 +1,63 @@
+export type PeriodItem = {
+    text: string;
+    period: number;
+    unit: string | null;
+};
+export type PeriodItemMap = Record<string, PeriodItem>;
+export declare const PERIOD_ITEM: {
+    TODAY: {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    YESTERDAY: {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '3DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '7DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1WEEK': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '15DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1MONTHS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '3MONTHS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1YEAR': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    ENTIRE: {
+        text: string;
+        period: number;
+        unit: null;
+    };
+    NONE: {
+        text: string;
+        period: number;
+        unit: null;
+    };
+};

package/dist/temp/src/constant/date-picker.js

@@ -0,0 +1,53 @@
+export var PERIOD_ITEM = {
+    TODAY: {
+        text: '오늘',
+        period: 0,
+        unit: 'days',
+    },
+    YESTERDAY: {
+        text: '어제',
+        period: 1,
+        unit: 'days',
+    },
+    '3DAYS': {
+        text: '3일',
+        period: 3,
+        unit: 'days',
+    },
+    '7DAYS': {
+        text: '7일',
+        period: 7,
+        unit: 'days',
+    },
+    '1WEEK': {
+        text: '1주일',
+        period: 1,
+        unit: 'week',
+    },
+    '15DAYS': {
+        text: '15일',
+        period: 15,
+        unit: 'days',
+    },
+    '1MONTHS': {
+        text: '1개월',
+        period: 1,
+        unit: 'months',
+    },
+    '3MONTHS': {
+        text: '3개월',
+        period: 3,
+        unit: 'months',
+    },
+    '1YEAR': {
+        text: '1년',
+        period: 1,
+        unit: 'years',
+    },
+    ENTIRE: {
+        text: '전체',
+        period: 0,
+        unit: null,
+    },
+    NONE: { text: '', period: 0, unit: null },
+};

package/dist/temp/src/constant/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-picker';
+export * from './size';

package/dist/temp/src/constant/index.js

@@ -0,0 +1,2 @@
+export * from './date-picker';
+export * from './size';

package/dist/temp/src/constant/size.d.ts

@@ -0,0 +1 @@
+export declare const MINIMUM_PC_SIZE = 768;

package/dist/temp/src/constant/size.js

@@ -0,0 +1 @@
+export var MINIMUM_PC_SIZE = 768;

package/dist/temp/src/hooks/dropdown/index.d.ts

@@ -0,0 +1,6 @@
+export { useDropdown } from './useDropdown';
+export { useDropdownKeyboard } from './useDropdownKeyboard';
+export { useDropdownPosition } from './useDropdownPosition';
+export { useOutsideClick } from './useOutsideClick';
+export { useScrollLock } from './useScrollLock';
+export { useWindowResize } from './useWindowResize';

package/dist/temp/src/hooks/dropdown/index.js

@@ -0,0 +1,6 @@
+export { useDropdown } from './useDropdown';
+export { useDropdownKeyboard } from './useDropdownKeyboard';
+export { useDropdownPosition } from './useDropdownPosition';
+export { useOutsideClick } from './useOutsideClick';
+export { useScrollLock } from './useScrollLock';
+export { useWindowResize } from './useWindowResize';

package/dist/temp/src/hooks/dropdown/useDropdown.d.ts

@@ -0,0 +1,29 @@
+import { type RefObject } from 'react';
+interface UseDropdownConfig<T = any> {
+    triggerRef: RefObject<HTMLElement>;
+    dropdownRef?: RefObject<HTMLElement>;
+    maxHeight: number;
+    itemCount: number;
+    optionItems: T[];
+    disabled?: boolean;
+    multiple?: boolean;
+    onSelect: (option: T) => void;
+    onChange?: (isOpen: boolean) => void;
+}
+/**
+ * 드롭다운 기능을 통합한 커스텀 훅
+ */
+export declare const useDropdown: <T = any>(config: UseDropdownConfig<T>) => {
+    isOpen: boolean;
+    direction: import("../../types").DropdownDirection;
+    focusedIndex: number;
+    toggleDropdown: () => void;
+    closeDropdown: () => void;
+    handleOptionSelect: (option: T) => void;
+    handleKeyDown: (e: import("react").KeyboardEvent<HTMLElement>) => void;
+    setFocusedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    handleMouseMove: () => void;
+    isKeyboardNavigation: () => boolean;
+    updatePosition: () => import("../../types").DropdownPositionResult;
+};
+export {};

package/dist/temp/src/hooks/dropdown/useDropdown.js

@@ -0,0 +1,84 @@
+import { useCallback, useState } from 'react';
+import { useDropdownKeyboard } from './useDropdownKeyboard';
+import { useDropdownPosition } from './useDropdownPosition';
+import { useOutsideClick } from './useOutsideClick';
+import { useWindowResize } from './useWindowResize';
+/**
+ * 드롭다운 기능을 통합한 커스텀 훅
+ */
+export var useDropdown = function (config) {
+    var triggerRef = config.triggerRef, dropdownRef = config.dropdownRef, maxHeight = config.maxHeight, itemCount = config.itemCount, optionItems = config.optionItems, _a = config.disabled, disabled = _a === void 0 ? false : _a, _b = config.multiple, multiple = _b === void 0 ? false : _b, onSelect = config.onSelect, onChange = config.onChange;
+    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    var _d = useState(-1), focusedIndex = _d[0], setFocusedIndex = _d[1];
+    // 드롭다운 위치 계산
+    var _e = useDropdownPosition({
+        triggerRef: triggerRef,
+        maxHeight: maxHeight,
+        itemCount: itemCount,
+    }), direction = _e.direction, updatePosition = _e.updatePosition;
+    // 드롭다운 토글
+    var toggleDropdown = useCallback(function () {
+        if (disabled)
+            return;
+        var newIsOpen = !isOpen;
+        if (newIsOpen) {
+            updatePosition();
+            setFocusedIndex(-1);
+        }
+        setIsOpen(newIsOpen);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newIsOpen);
+    }, [disabled, isOpen, updatePosition, onChange]);
+    // 드롭다운 닫기
+    var closeDropdown = useCallback(function () {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        onChange === null || onChange === void 0 ? void 0 : onChange(false);
+    }, [onChange]);
+    // 옵션 선택 처리
+    var handleOptionSelect = useCallback(function (option) {
+        onSelect(option);
+        // multiple 모드가 아니어야 드롭다운을 닫음
+        if (!multiple) {
+            closeDropdown();
+        }
+    }, [onSelect, closeDropdown, multiple]);
+    // 키보드 이벤트 처리
+    var _f = useDropdownKeyboard({
+        isOpen: isOpen,
+        disabled: disabled,
+        focusedIndex: focusedIndex,
+        optionItems: optionItems,
+        onToggle: toggleDropdown,
+        onSelect: handleOptionSelect,
+        onClose: closeDropdown,
+        onFocusChange: setFocusedIndex,
+        triggerRef: triggerRef,
+        dropdownRef: dropdownRef,
+    }), handleKeyDown = _f.handleKeyDown, handleMouseMove = _f.handleMouseMove, isKeyboardNavigation = _f.isKeyboardNavigation;
+    // 외부 클릭 감지
+    var refs = dropdownRef ? [triggerRef, dropdownRef] : [triggerRef];
+    useOutsideClick({
+        isOpen: isOpen,
+        refs: refs,
+        onClose: closeDropdown,
+    });
+    // 윈도우 리사이즈 시 위치 재계산
+    useWindowResize(updatePosition, isOpen, triggerRef.current);
+    return {
+        // 상태
+        isOpen: isOpen,
+        direction: direction,
+        focusedIndex: focusedIndex,
+        // 액션
+        toggleDropdown: toggleDropdown,
+        closeDropdown: closeDropdown,
+        handleOptionSelect: handleOptionSelect,
+        handleKeyDown: handleKeyDown,
+        setFocusedIndex: setFocusedIndex,
+        // 키보드 네비게이션
+        handleMouseMove: handleMouseMove,
+        isKeyboardNavigation: isKeyboardNavigation,
+        // 유틸리티
+        updatePosition: updatePosition,
+    };
+};

package/dist/temp/src/hooks/dropdown/useDropdownKeyboard.d.ts

@@ -0,0 +1,10 @@
+import { type KeyboardEvent } from 'react';
+import type { DropdownKeyboardConfig } from '../../types/dropdown';
+/**
+ * 드롭다운 키보드 네비게이션을 위한 커스텀 훅
+ */
+export declare const useDropdownKeyboard: <T = any>(config: DropdownKeyboardConfig<T>) => {
+    handleKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
+    handleMouseMove: () => void;
+    isKeyboardNavigation: () => boolean;
+};