@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/esm/src/components/date-picker/DatePicker.js

@@ -1,522 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { Korean } from 'flatpickr/dist/l10n/ko';
-import moment from 'moment';
-import { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
-import Flatpickr from 'react-flatpickr';
-import { formatDateInput, formatHourInput, formatMinuteInput } from '../../utils/date-picker';
-import { CustomInput } from './CustomInput';
-// ══════════════════════════════════════════
-// 유틸리티 함수
-// ══════════════════════════════════════════
-const isValidDate = dateString => {
-  const date = new Date(dateString);
-  return date instanceof Date && !isNaN(date.getTime());
-};
-/** input의 스크롤 가능한 부모 요소들을 수집 */
-const collectScrollParents = element => {
-  const parents = [];
-  let parentEl = element.parentElement;
-  while (parentEl) {
-    const {
-      overflow,
-      overflowY
-    } = getComputedStyle(parentEl);
-    if (overflow !== 'visible' || overflowY !== 'visible') {
-      parents.push(parentEl);
-    }
-    parentEl = parentEl.parentElement;
-  }
-  return parents;
-};
-/** 현재 열려있는 flatpickr 캘린더 요소를 반환 */
-const getOpenCalendar = (instance, input, isPortal) => {
-  if (isPortal) {
-    return instance.calendarContainer?.classList.contains('open') ? instance.calendarContainer : null;
-  }
-  return input.parentElement?.querySelector('.flatpickr-calendar.open') ?? null;
-};
-/** selectedDate가 유효하지 않으면 이전 날짜로 복원하고 true 반환 */
-const restoreIfInvalidDate = (date, instance) => {
-  if (date && date instanceof Date && !isNaN(date.getTime())) {
-    return false;
-  }
-  const previousDate = instance._previousDateBeforeInput;
-  if (previousDate && previousDate instanceof Date && !isNaN(previousDate.getTime())) {
-    instance.selectedDates = [previousDate];
-    instance.setDate(previousDate, false);
-  } else if (instance.input) {
-    instance.input.value = '';
-    instance.setDate('', false);
-  }
-  return true;
-};
-/** 시간 전용 모드의 기본값 반환 */
-const getTimeOnlyDefault = (hasSeconds, isEndDate) => {
-  const endTime = hasSeconds ? '23:59:59' : '23:59';
-  const startTime = hasSeconds ? '00:00:00' : '00:00';
-  return isEndDate ? endTime : startTime;
-};
-/** 날짜+시간 모드에서 시간이 없는 경우 기본값 부여 */
-const getDateTimeDefault = (currentDate, hasSeconds, isEndDate) => {
-  if (!currentDate) return '';
-  const format = hasSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
-  const momentDate = moment(currentDate);
-  return isEndDate ? momentDate.endOf('day').format(format) : momentDate.startOf('day').format(format);
-};
-// ══════════════════════════════════════════
-// 캘린더 위치 조정 (setup / cleanup)
-// ══════════════════════════════════════════
-/** portal 모드: 캘린더 위치 재조정 및 스크롤 이벤트 연결 */
-const setupPortalPositioning = (instance, input) => {
-  const reposition = () => {
-    if (instance.config) instance._positionCalendar();
-  };
-  instance._reposition = reposition;
-  const scrollParents = collectScrollParents(input);
-  instance._portalScrollParents = scrollParents;
-  instance.config.onOpen.push(() => {
-    scrollParents.forEach(target => {
-      target.addEventListener('scroll', reposition, {
-        passive: true
-      });
-    });
-    window.addEventListener('scroll', reposition, {
-      passive: true
-    });
-  });
-  instance.config.onClose.push(() => {
-    scrollParents.forEach(target => {
-      target.removeEventListener('scroll', reposition);
-    });
-    window.removeEventListener('scroll', reposition);
-  });
-};
-/** 일반 모드: 아래 공간 부족 시 캘린더를 위에 표시하고 스크롤/리사이즈 이벤트 연결 */
-const setupStaticPositioning = (instance, input) => {
-  const adjustPosition = () => {
-    const calendar = instance.calendarContainer;
-    if (!calendar) return;
-    const wrapperEl = input.closest('.ncua-date-picker');
-    const rect = wrapperEl ? wrapperEl.getBoundingClientRect() : input.getBoundingClientRect();
-    const calendarHeight = calendar.offsetHeight;
-    const CALENDAR_GAP = 6;
-    const spaceBelow = window.innerHeight - rect.bottom;
-    calendar.style.top = spaceBelow < calendarHeight + CALENDAR_GAP ? `${-(calendarHeight + CALENDAR_GAP)}px` : '';
-  };
-  const scrollParents = collectScrollParents(input);
-  instance._adjustPosition = adjustPosition;
-  instance._scrollParents = scrollParents;
-  instance.config.onOpen.push(() => {
-    adjustPosition();
-    scrollParents.forEach(target => {
-      target.addEventListener('scroll', adjustPosition, {
-        passive: true
-      });
-    });
-    window.addEventListener('scroll', adjustPosition, {
-      passive: true
-    });
-    window.addEventListener('resize', adjustPosition);
-  });
-  instance.config.onClose.push(() => {
-    scrollParents.forEach(target => {
-      target.removeEventListener('scroll', adjustPosition);
-    });
-    window.removeEventListener('scroll', adjustPosition);
-    window.removeEventListener('resize', adjustPosition);
-  });
-};
-/** scroll/resize 리스너 정리 */
-const cleanupPositioning = instance => {
-  const reposition = instance._reposition;
-  if (reposition) {
-    const portalScrollParents = instance._portalScrollParents || [];
-    portalScrollParents.forEach(target => {
-      target.removeEventListener('scroll', reposition);
-    });
-    window.removeEventListener('scroll', reposition);
-  }
-  const adjustPosition = instance._adjustPosition;
-  if (adjustPosition) {
-    const scrollParents = instance._scrollParents || [];
-    scrollParents.forEach(target => {
-      target.removeEventListener('scroll', adjustPosition);
-    });
-    window.removeEventListener('scroll', adjustPosition);
-    window.removeEventListener('resize', adjustPosition);
-  }
-};
-// ══════════════════════════════════════════
-// 시간 입력 필드 (setup / cleanup)
-// ══════════════════════════════════════════
-/** enableTime 옵션 사용 시 시간 입력 필드 이벤트 설정 */
-const setupTimeInputHandlers = (instance, input, isPortal, onHourInput, onMinuteInput) => {
-  const timeContainer = isPortal ? instance.calendarContainer : input.parentElement;
-  const timeInputWrapper = timeContainer?.querySelector('.flatpickr-time');
-  if (!timeInputWrapper) return;
-  const hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
-  const minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
-  if (!hourInput || !minuteInput) return;
-  hourInput.addEventListener('input', onHourInput);
-  minuteInput.addEventListener('input', onMinuteInput);
-  const handleMouseDown = e => {
-    const flatpickrCalendar = getOpenCalendar(instance, input, isPortal);
-    if (flatpickrCalendar && !flatpickrCalendar.contains(e.target)) {
-      const timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
-      timeInputs.forEach(timeInput => {
-        if (document.activeElement === timeInput) {
-          timeInput.blur();
-        }
-      });
-    }
-  };
-  document.addEventListener('mousedown', handleMouseDown, true);
-  instance._handleMouseDown = handleMouseDown;
-};
-/** 시간 입력 필드 이벤트 리스너 정리 */
-const cleanupTimeInputHandlers = (instance, input, isPortal, onHourInput, onMinuteInput) => {
-  const timeContainer = isPortal ? instance.calendarContainer : input.parentElement;
-  const timeInputWrapper = timeContainer?.querySelector('.flatpickr-time');
-  if (!timeInputWrapper) return;
-  const hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
-  if (hourInput) {
-    hourInput.removeEventListener('input', onHourInput);
-  }
-  const minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
-  if (minuteInput) {
-    minuteInput.removeEventListener('input', onMinuteInput);
-  }
-  const handleMouseDown = instance._handleMouseDown;
-  if (handleMouseDown) {
-    document.removeEventListener('mousedown', handleMouseDown, true);
-  }
-};
-// ══════════════════════════════════════════
-// DatePicker 컴포넌트
-// ══════════════════════════════════════════
-export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    shouldFocus = true,
-    currentDate,
-    size = 'xs',
-    onChangeDate,
-    datePickerOptions,
-    isEndDate = false,
-    onValidationError,
-    className,
-    portal = false,
-    ...attrs
-  } = _ref;
-  const flatpickrInstanceRef = useRef(null);
-  const dateFormatRef = useRef('Y-m-d');
-  const minMaxDateRef = useRef({});
-  /** portal 모드: 캘린더를 담을 persistent 컨테이너 (한 번 생성, 언마운트 시 제거) */
-  const portalContainerRef = useRef(null);
-  const hasTimeOption = datePickerOptions && Object.hasOwn(datePickerOptions, 'enableTime');
-  // 콜백 props를 ref에 저장하여 memoized options에서 최신값 참조
-  const onChangeDateRef = useRef(onChangeDate);
-  onChangeDateRef.current = onChangeDate;
-  const onValidationErrorRef = useRef(onValidationError);
-  onValidationErrorRef.current = onValidationError;
-  /** portal 컨테이너를 lazily 생성 (이미 있으면 재사용), className은 매번 갱신 */
-  const getPortalContainer = () => {
-    if (!portal || typeof document === 'undefined') return undefined;
-    const portalClassName = classNames('ncua-date-picker', 'ncua-date-picker--portal', `ncua-date-picker--${size}`, {
-      'ncua-date-picker--has-time': hasTimeOption
-    });
-    if (portalContainerRef.current) {
-      portalContainerRef.current.className = portalClassName;
-      return portalContainerRef.current;
-    }
-    const el = document.createElement('div');
-    el.className = portalClassName;
-    // ncua-date-picker의 position/width/height가 캘린더 배치를 방해하지 않도록 무력화
-    el.style.cssText = 'position:static;width:auto;height:auto;overflow:visible;';
-    document.body.appendChild(el);
-    portalContainerRef.current = el;
-    return el;
-  };
-  /** 컴포넌트 언마운트 시 포탈 컨테이너 및 스크롤 리스너 정리 */
-  useEffect(() => {
-    return () => {
-      portalContainerRef.current?.remove();
-      portalContainerRef.current = null;
-    };
-  }, []);
-  // ──────────────────────────────────────────────
-  // 날짜 유효성 검사
-  // ──────────────────────────────────────────────
-  /** minDate/maxDate 범위를 벗어났는지 확인 */
-  const checkDateViolations = (date, minDate, maxDate) => {
-    const violations = [];
-    const inputDate = moment(date);
-    if (!inputDate.isValid()) return violations;
-    if (minDate) {
-      const min = moment(minDate);
-      if (min.isValid() && inputDate.isBefore(min, 'day')) {
-        violations.push('minDate');
-      }
-    }
-    if (maxDate) {
-      const max = moment(maxDate);
-      if (max.isValid() && inputDate.isAfter(max, 'day')) {
-        violations.push('maxDate');
-      }
-    }
-    return violations;
-  };
-  // ──────────────────────────────────────────────
-  // 이벤트 핸들러
-  // ──────────────────────────────────────────────
-  /** 유효하지 않은 입력 시 이전 날짜로 복원 */
-  const restorePreviousDate = (target, instance) => {
-    if (instance.selectedDates.length > 0) {
-      const prevDate = instance.selectedDates[0];
-      if (prevDate instanceof Date && !isNaN(prevDate.getTime())) {
-        const momentFormat = dateFormatRef.current.replace(/Y/g, 'YYYY').replace(/m/g, 'MM').replace(/d/g, 'DD');
-        target.value = moment(prevDate).format(momentFormat);
-        instance.setDate(prevDate, false);
-        return;
-      }
-    }
-    target.value = '';
-    instance.setDate('', false);
-  };
-  /** flatpickr에서 날짜가 변경되었을 때 호출 */
-  const onChangeDateHandler = useCallback((dateTimeStamp, dateStr, fpInstance) => {
-    const instance = fpInstance;
-    if (!dateTimeStamp || dateTimeStamp.length === 0) {
-      restorePreviousDate(instance.input, instance);
-      return;
-    }
-    if (restoreIfInvalidDate(dateTimeStamp[0], instance)) return;
-    const selectedDate = dateTimeStamp[0];
-    const minDate = instance.config.minDate;
-    const maxDate = instance.config.maxDate;
-    const violations = checkDateViolations(selectedDate, minDate, maxDate);
-    if (violations.length > 0 && onValidationErrorRef.current) {
-      const prevDate = instance?.selectedDates?.[0];
-      const validPrevDate = prevDate instanceof Date && !isNaN(prevDate.getTime()) ? prevDate : undefined;
-      onValidationErrorRef.current({
-        date: selectedDate,
-        minDate,
-        maxDate,
-        violations,
-        previousDate: validPrevDate
-      });
-      return;
-    }
-    instance._previousDateBeforeInput = selectedDate;
-    const formattedDate = formatDateInput(dateStr);
-    isValidDate(formattedDate) ? onChangeDateRef.current(formattedDate) : onChangeDateRef.current(dateStr);
-  }, []);
-  /** input에 직접 타이핑할 때 날짜 형식 자동 변환 및 유효성 검사 */
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const onInputHandler = useCallback(e => {
-    const target = e.target;
-    const input = target.value;
-    const instance = flatpickrInstanceRef.current;
-    if (!instance) return;
-    if (!input?.trim()) {
-      target.value = '';
-      instance.setDate('', false);
-      onChangeDateRef.current('');
-      return;
-    }
-    if (!/[0-9]/.test(input)) {
-      restorePreviousDate(target, instance);
-      return;
-    }
-    const formattedInput = formatDateInput(input);
-    if (formattedInput !== input) {
-      target.value = formattedInput;
-      return;
-    }
-    if (!formattedInput || formattedInput.length < 10) return;
-    const parsedDate = moment(formattedInput);
-    if (!parsedDate.isValid()) {
-      restorePreviousDate(target, instance);
-      return;
-    }
-    const parsedDateObj = parsedDate.toDate();
-    const violations = checkDateViolations(parsedDateObj, minMaxDateRef.current.minDate, minMaxDateRef.current.maxDate);
-    if (violations.length > 0) {
-      return;
-    }
-  }, []);
-  /** 시간 입력 필드 - 시(hour) 값 포맷팅 (0~23) */
-  const onHourInputHandler = useCallback(e => {
-    const target = e.target;
-    const input = target.value;
-    const formattedInput = formatHourInput(input);
-    if (formattedInput === input) return;
-    target.value = formattedInput;
-  }, []);
-  /** 시간 입력 필드 - 분(minute) 값 포맷팅 (0~59) */
-  const onMinuteInputHandler = useCallback(e => {
-    const target = e.target;
-    const input = target.value;
-    const formattedInput = formatMinuteInput(input);
-    if (formattedInput === input) return;
-    target.value = formattedInput;
-  }, []);
-  const inputId = useId();
-  // ──────────────────────────────────────────────
-  // flatpickr 옵션
-  // ──────────────────────────────────────────────
-  // datePickerOptions는 부모에서 매 렌더 새 객체일 수 있으므로 값 기반 비교
-  // 주의: JSON.stringify는 함수를 무시하고 Date를 문자열로 변환하므로,
-  // datePickerOptions에 함수나 Date 객체를 넘기면 변경 감지가 누락될 수 있음
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const datePickerOptionsKey = JSON.stringify(datePickerOptions);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const options = useMemo(() => ({
-    mode: 'single',
-    static: !portal,
-    ...(portal && {
-      appendTo: getPortalContainer()
-    }),
-    locale: Korean,
-    dateFormat: 'Y-m-d',
-    clickOpens: true,
-    time_24hr: true,
-    /** flatpickr 기본 포맷 대신 moment를 사용하여 한국어 날짜 형식 지원 */
-    formatDate: (date, format, _locale) => {
-      try {
-        if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
-          return '';
-        }
-        const momentDate = moment(date);
-        if (!momentDate.isValid()) {
-          return '';
-        }
-        const momentFormat = format.replace(/Y/g, 'YYYY').replace(/y/g, 'YY').replace(/m/g, 'MM').replace(/d/g, 'DD').replace(/H/g, 'HH').replace(/i/g, 'mm').replace(/S/g, 'ss');
-        return momentDate.format(momentFormat);
-      } catch (_error) {
-        return '';
-      }
-    },
-    onChange: onChangeDateHandler,
-    allowInvalidPreload: true,
-    // ──────────────────────────────────────────────
-    // onReady: flatpickr 인스턴스 초기화 후 실행
-    // ──────────────────────────────────────────────
-    onReady: (_selectedDates, _dateStr, fpInstance) => {
-      const instance = fpInstance;
-      const input = instance.input;
-      if (!input) return;
-      flatpickrInstanceRef.current = instance;
-      dateFormatRef.current = instance.config.dateFormat || 'Y-m-d';
-      minMaxDateRef.current = {
-        minDate: instance.config.minDate,
-        maxDate: instance.config.maxDate
-      };
-      // blur 시 현재 날짜를 저장하여 잘못된 입력 시 복원에 사용
-      const onBlurHandler = _e => {
-        if (instance && instance.selectedDates.length > 0) {
-          instance._previousDateBeforeInput = instance.selectedDates[0];
-        }
-      };
-      input.addEventListener('input', onInputHandler);
-      input.addEventListener('blur', onBlurHandler);
-      if (instance.selectedDates.length > 0) {
-        instance._previousDateBeforeInput = instance.selectedDates[0];
-      }
-      instance._onBlurHandler = onBlurHandler;
-      // 캘린더 위치 조정 및 스크롤/리사이즈 이벤트 연결
-      if (portal) {
-        setupPortalPositioning(instance, input);
-      } else {
-        setupStaticPositioning(instance, input);
-      }
-      // 시간 입력 필드 이벤트 설정
-      setupTimeInputHandlers(instance, input, portal, onHourInputHandler, onMinuteInputHandler);
-    },
-    // ──────────────────────────────────────────────
-    // onDestroy: flatpickr 인스턴스 파괴 시 이벤트 리스너 정리
-    // ──────────────────────────────────────────────
-    onDestroy: (_selectedDates, _dateStr, fpInstance) => {
-      const instance = fpInstance;
-      const input = instance.input;
-      if (!input) return;
-      flatpickrInstanceRef.current = null;
-      input.removeEventListener('input', onInputHandler);
-      const onBlurHandler = instance._onBlurHandler;
-      if (onBlurHandler) {
-        input.removeEventListener('blur', onBlurHandler);
-      }
-      cleanupTimeInputHandlers(instance, input, portal, onHourInputHandler, onMinuteInputHandler);
-      cleanupPositioning(instance);
-    },
-    ...datePickerOptions
-  }), [portal, size, hasTimeOption, datePickerOptionsKey, onChangeDateHandler, onInputHandler, onHourInputHandler, onMinuteInputHandler]);
-  const iconName = hasTimeOption && datePickerOptions && Object.hasOwn(datePickerOptions, 'noCalendar') ? 'clock' : 'calendar';
-  // ──────────────────────────────────────────────
-  // 시간 옵션에 따른 currentDate 전처리
-  // enableTime일 때 시간이 없으면 기본값(00:00 또는 23:59) 부여
-  // ──────────────────────────────────────────────
-  const processedCurrentDate = useMemo(() => {
-    const hasTime = options.enableTime;
-    const isTimeOnly = options.noCalendar;
-    const hasSeconds = options.enableSeconds;
-    if (!hasTime && !isTimeOnly) return currentDate;
-    if (currentDate?.includes(':')) return currentDate;
-    if (isTimeOnly) return getTimeOnlyDefault(hasSeconds, isEndDate);
-    return getDateTimeDefault(currentDate, hasSeconds, isEndDate);
-  }, [currentDate, isEndDate, options.enableSeconds, options.enableTime, options.noCalendar]);
-  // ──────────────────────────────────────────────
-  // 렌더링
-  // ──────────────────────────────────────────────
-  const flatpickrElement = _jsx(Flatpickr, {
-    ...attrs,
-    ref: ref || undefined,
-    className: classNames('ncua-date-picker__input'),
-    options: options,
-    value: processedCurrentDate,
-    render: (_ref2, ref) => {
-      let {
-        defaultValue,
-        value,
-        ...props
-      } = _ref2;
-      // flatpickr 전용 옵션이 input DOM에 전달되지 않도록 제거
-      const {
-        allowInput: _allowInput,
-        dateFormat: _dateFormat,
-        minDate: _minDate,
-        maxDate: _maxDate,
-        enableTime: _enableTime,
-        enableSeconds: _enableSeconds,
-        noCalendar: _noCalendar,
-        render: _render,
-        ...inputProps
-        // biome-ignore lint/suspicious/noExplicitAny: react-flatpickr render 콜백의 props 타입이 불완전하여 정확한 타이핑 불가
-      } = props;
-      return _jsx(CustomInput, {
-        ...inputProps,
-        id: inputId,
-        iconSize: size,
-        disabled: !!attrs.disabled,
-        defaultValue: defaultValue,
-        iconName: iconName,
-        ref: ref,
-        onInput: onInputHandler,
-        placeholder: attrs.placeholder
-      });
-    }
-  });
-  return _jsxs("div", {
-    className: classNames('ncua-date-picker', `ncua-date-picker--${size}`, {
-      'ncua-date-picker--portal': portal,
-      'ncua-date-picker--disabled': attrs.disabled,
-      'ncua-date-picker--has-time': hasTimeOption,
-      'ncua-date-picker--destructive': attrs.destructive
-    }, className),
-    children: [flatpickrElement, attrs.destructive && _jsx("p", {
-      className: "ncua-date-picker__destructive",
-      children: attrs.destructive
-    })]
-  });
-});
-DatePicker.displayName = 'DatePicker';

package/dist/esm/src/components/date-picker/index.js

@@ -1,2 +0,0 @@
-export * from './DatePicker';
-export * from './utils';

package/dist/esm/src/components/dropdown/Dropdown.js

@@ -1,157 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DotsVertical } from '@ncds/ui-admin-icon';
-import { useEffect, useRef, useState } from 'react';
-export const Dropdown = _ref => {
-  let {
-    trigger,
-    align = 'left',
-    header,
-    groups,
-    className,
-    opened = false,
-    closeOnClickItem = true,
-    closeOnClickOutside = true
-  } = _ref;
-  const [isOpen, setIsOpen] = useState(opened);
-  const dropdownRef = useRef(null);
-  const toggleDropdown = () => {
-    setIsOpen(!isOpen);
-  };
-  const handleClickOutside = event => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-      setIsOpen(false);
-    }
-  };
-  const handleClickItem = item => {
-    if (!item.disabled && item.onClick) {
-      item.onClick();
-      if (closeOnClickItem) {
-        setIsOpen(false);
-      }
-    }
-  };
-  useEffect(() => {
-    if (closeOnClickOutside) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }
-  }, [closeOnClickOutside]);
-  const renderTrigger = () => {
-    switch (trigger.type) {
-      case 'custom':
-        return _jsx("button", {
-          className: "ncua-dropdown__trigger",
-          onClick: toggleDropdown,
-          children: trigger.children
-        });
-      case 'icon':
-        {
-          const TriggerIcon = trigger.icon ?? DotsVertical;
-          return _jsx("button", {
-            className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon",
-            onClick: toggleDropdown,
-            children: _jsx(TriggerIcon, {})
-          });
-        }
-      case 'avatar':
-        return _jsx("button", {
-          className: "ncua-dropdown__trigger ncua-dropdown__trigger--avatar",
-          onClick: toggleDropdown,
-          children: _jsx("div", {
-            className: "ncua-dropdown__avatar",
-            children: _jsx("img", {
-              src: trigger.avatar,
-              alt: "avatar"
-            })
-          })
-        });
-      case 'button':
-        return _jsx("button", {
-          className: "ncua-dropdown__trigger ncua-dropdown__trigger--button",
-          onClick: toggleDropdown,
-          children: trigger.text
-        });
-      default:
-        return null;
-    }
-  };
-  const renderHeader = () => {
-    if (!header) return null;
-    if (header.type === 'avatar' && header.avatar) {
-      return _jsx("div", {
-        className: "ncua-dropdown__header",
-        children: _jsxs("div", {
-          className: "ncua-dropdown__header-avatar-group",
-          children: [_jsx("div", {
-            className: "ncua-dropdown__avatar",
-            children: _jsx("img", {
-              src: header.avatar,
-              alt: "avatar"
-            })
-          }), _jsxs("div", {
-            className: "ncua-dropdown__header-text",
-            children: [header.title && _jsx("div", {
-              className: "ncua-dropdown__header-title",
-              children: header.title
-            }), header.subtitle && _jsx("div", {
-              className: "ncua-dropdown__header-subtitle",
-              children: header.subtitle
-            })]
-          })]
-        })
-      });
-    }
-    if (header.type === 'text' && header.title) {
-      return _jsx("div", {
-        className: "ncua-dropdown__header",
-        children: _jsx("div", {
-          className: "ncua-dropdown__header-title",
-          children: header.title
-        })
-      });
-    }
-    return null;
-  };
-  const renderItem = item => {
-    const ItemIcon = item.icon;
-    const itemClasses = ['ncua-dropdown__item', item.disabled ? 'is-disabled' : '', item.type === 'danger' ? 'is-danger' : '', item.className].filter(Boolean).join(' ');
-    return _jsxs("div", {
-      className: itemClasses,
-      children: [_jsx("button", {
-        className: "ncua-dropdown__item-clickable-layer",
-        onClick: () => handleClickItem(item)
-      }), _jsxs("div", {
-        className: "ncua-dropdown__item-content",
-        children: [_jsxs("div", {
-          className: "ncua-dropdown__item-text-group",
-          children: [ItemIcon && _jsx(ItemIcon, {
-            className: "ncua-dropdown__item-icon"
-          }), _jsx("span", {
-            className: "ncua-dropdown__item-text",
-            children: item.text
-          })]
-        }), item.shortcut && _jsx("span", {
-          className: "ncua-dropdown__item-shortcut",
-          children: item.shortcut
-        })]
-      })]
-    }, item.id);
-  };
-  const dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : ''].filter(Boolean).join(' ');
-  return _jsxs("div", {
-    className: dropdownClasses,
-    ref: dropdownRef,
-    children: [renderTrigger(), isOpen && _jsxs("div", {
-      className: "ncua-dropdown__menu",
-      children: [renderHeader(), _jsx("div", {
-        className: "ncua-dropdown__menu-items",
-        children: groups.map(group => _jsx("div", {
-          className: "ncua-dropdown__group",
-          children: group.items.map(renderItem)
-        }, group.items[0]?.id))
-      })]
-    })]
-  });
-};