@ncds/ui-admin 1.8.1 → 1.8.3

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

@@ -1,529 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatePicker = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _ko = require("flatpickr/dist/l10n/ko");
-var _moment = _interopRequireDefault(require("moment"));
-var _react = require("react");
-var _reactFlatpickr = _interopRequireDefault(require("react-flatpickr"));
-var _datePicker = require("../../utils/date-picker");
-var _CustomInput = require("./CustomInput");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// ══════════════════════════════════════════
-// 유틸리티 함수
-// ══════════════════════════════════════════
-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 = (0, _moment.default)(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 컴포넌트
-// ══════════════════════════════════════════
-const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    shouldFocus = true,
-    currentDate,
-    size = 'xs',
-    onChangeDate,
-    datePickerOptions,
-    isEndDate = false,
-    onValidationError,
-    className,
-    portal = false,
-    ...attrs
-  } = _ref;
-  const flatpickrInstanceRef = (0, _react.useRef)(null);
-  const dateFormatRef = (0, _react.useRef)('Y-m-d');
-  const minMaxDateRef = (0, _react.useRef)({});
-  /** portal 모드: 캘린더를 담을 persistent 컨테이너 (한 번 생성, 언마운트 시 제거) */
-  const portalContainerRef = (0, _react.useRef)(null);
-  const hasTimeOption = datePickerOptions && Object.hasOwn(datePickerOptions, 'enableTime');
-  // 콜백 props를 ref에 저장하여 memoized options에서 최신값 참조
-  const onChangeDateRef = (0, _react.useRef)(onChangeDate);
-  onChangeDateRef.current = onChangeDate;
-  const onValidationErrorRef = (0, _react.useRef)(onValidationError);
-  onValidationErrorRef.current = onValidationError;
-  /** portal 컨테이너를 lazily 생성 (이미 있으면 재사용), className은 매번 갱신 */
-  const getPortalContainer = () => {
-    if (!portal || typeof document === 'undefined') return undefined;
-    const portalClassName = (0, _classnames.default)('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;
-  };
-  /** 컴포넌트 언마운트 시 포탈 컨테이너 및 스크롤 리스너 정리 */
-  (0, _react.useEffect)(() => {
-    return () => {
-      portalContainerRef.current?.remove();
-      portalContainerRef.current = null;
-    };
-  }, []);
-  // ──────────────────────────────────────────────
-  // 날짜 유효성 검사
-  // ──────────────────────────────────────────────
-  /** minDate/maxDate 범위를 벗어났는지 확인 */
-  const checkDateViolations = (date, minDate, maxDate) => {
-    const violations = [];
-    const inputDate = (0, _moment.default)(date);
-    if (!inputDate.isValid()) return violations;
-    if (minDate) {
-      const min = (0, _moment.default)(minDate);
-      if (min.isValid() && inputDate.isBefore(min, 'day')) {
-        violations.push('minDate');
-      }
-    }
-    if (maxDate) {
-      const max = (0, _moment.default)(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 = (0, _moment.default)(prevDate).format(momentFormat);
-        instance.setDate(prevDate, false);
-        return;
-      }
-    }
-    target.value = '';
-    instance.setDate('', false);
-  };
-  /** flatpickr에서 날짜가 변경되었을 때 호출 */
-  const onChangeDateHandler = (0, _react.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 = (0, _datePicker.formatDateInput)(dateStr);
-    isValidDate(formattedDate) ? onChangeDateRef.current(formattedDate) : onChangeDateRef.current(dateStr);
-  }, []);
-  /** input에 직접 타이핑할 때 날짜 형식 자동 변환 및 유효성 검사 */
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const onInputHandler = (0, _react.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 = (0, _datePicker.formatDateInput)(input);
-    if (formattedInput !== input) {
-      target.value = formattedInput;
-      return;
-    }
-    if (!formattedInput || formattedInput.length < 10) return;
-    const parsedDate = (0, _moment.default)(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 = (0, _react.useCallback)(e => {
-    const target = e.target;
-    const input = target.value;
-    const formattedInput = (0, _datePicker.formatHourInput)(input);
-    if (formattedInput === input) return;
-    target.value = formattedInput;
-  }, []);
-  /** 시간 입력 필드 - 분(minute) 값 포맷팅 (0~59) */
-  const onMinuteInputHandler = (0, _react.useCallback)(e => {
-    const target = e.target;
-    const input = target.value;
-    const formattedInput = (0, _datePicker.formatMinuteInput)(input);
-    if (formattedInput === input) return;
-    target.value = formattedInput;
-  }, []);
-  const inputId = (0, _react.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 = (0, _react.useMemo)(() => ({
-    mode: 'single',
-    static: !portal,
-    ...(portal && {
-      appendTo: getPortalContainer()
-    }),
-    locale: _ko.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 = (0, _moment.default)(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 = (0, _react.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 = (0, _jsxRuntime.jsx)(_reactFlatpickr.default, {
-    ...attrs,
-    ref: ref || undefined,
-    className: (0, _classnames.default)('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 (0, _jsxRuntime.jsx)(_CustomInput.CustomInput, {
-        ...inputProps,
-        id: inputId,
-        iconSize: size,
-        disabled: !!attrs.disabled,
-        defaultValue: defaultValue,
-        iconName: iconName,
-        ref: ref,
-        onInput: onInputHandler,
-        placeholder: attrs.placeholder
-      });
-    }
-  });
-  return (0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames.default)('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 && (0, _jsxRuntime.jsx)("p", {
-      className: "ncua-date-picker__destructive",
-      children: attrs.destructive
-    })]
-  });
-});
-DatePicker.displayName = 'DatePicker';

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

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _DatePicker = require("./DatePicker");
-Object.keys(_DatePicker).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _DatePicker[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _DatePicker[key];
-    }
-  });
-});
-var _utils = require("./utils");
-Object.keys(_utils).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _utils[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _utils[key];
-    }
-  });
-});