@ncds/ui-admin 1.6.4 → 1.7.0

package/dist/esm/src/components/combobox/ComboBox.js

@@ -36,8 +36,27 @@ import { InputBase } from '../input/InputBase';
 import { SelectDropdown } from '../select-dropdown';
 import { HintText } from '../shared/hintText/HintText';
 import { Tag } from '../tag';
-export var defaultMaxHeight = 275;
-export var ComboBox = /*#__PURE__*/forwardRef(function (_a, ref) {
+var defaultMaxHeight = 275;
+var toggleMultiSelectValue = function (currentValue, optionId) {
+  var currentValues = Array.isArray(currentValue) ? currentValue : [];
+  if (currentValues.includes(optionId)) {
+    return currentValues.filter(function (v) {
+      return v !== optionId;
+    });
+  }
+  return __spreadArray(__spreadArray([], currentValues, true), [optionId], false);
+};
+var notifyFormChange = function (register, multiple, newValue) {
+  if (register === null || register === void 0 ? void 0 : register.onChange) {
+    register.onChange({
+      target: {
+        value: multiple ? JSON.stringify(newValue) : newValue,
+        name: register.name
+      }
+    });
+  }
+};
+var ComboBox = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.placeholder,
     placeholder = _b === void 0 ? '검색하세요' : _b,
     id = _a.id,
@@ -83,34 +102,20 @@ export var ComboBox = /*#__PURE__*/forwardRef(function (_a, ref) {
     setSelectedTags = _p[1];
   var handleOptionSelect = function (option) {
     if (disabled) return;
-    var newValue;
     if (multiple) {
-      var currentValues = Array.isArray(value) ? value : [];
-      if (currentValues.includes(option.id)) {
-        newValue = currentValues.filter(function (v) {
-          return v !== option.id;
-        });
-      } else {
-        newValue = __spreadArray(__spreadArray([], currentValues, true), [option.id], false);
-      }
-    } else {
-      newValue = option.id;
-      var tag = {
-        id: option.id,
-        label: option.label
-      };
-      setSelectedTags([tag]);
+      var newValue_1 = toggleMultiSelectValue(value !== null && value !== void 0 ? value : [], option.id);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue_1);
+      notifyFormChange(register, multiple, newValue_1);
+      return;
     }
+    var newValue = option.id;
+    var tag = {
+      id: option.id,
+      label: option.label
+    };
+    setSelectedTags([tag]);
     onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-    // react-hook-form 지원
-    if (register === null || register === void 0 ? void 0 : register.onChange) {
-      register.onChange({
-        target: {
-          value: multiple ? JSON.stringify(newValue) : newValue,
-          name: register.name
-        }
-      });
-    }
+    notifyFormChange(register, multiple, newValue);
   };
   var handleInputChange = function (e) {
     var newValue = e.target.value;
@@ -152,14 +157,13 @@ export var ComboBox = /*#__PURE__*/forwardRef(function (_a, ref) {
     isKeyboardNavigation = _q.isKeyboardNavigation;
   var showAllItem = function () {
     var _a;
-    if (!disabled) {
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      setInputValue('');
-      onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
-      setShowAllItems(true);
-      if (!isOpen) {
-        toggleDropdown();
-      }
+    if (disabled) return;
+    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    setInputValue('');
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
+    setShowAllItems(true);
+    if (!isOpen) {
+      toggleDropdown();
     }
   };
   var closeDropdown = function () {
@@ -234,11 +238,18 @@ export var ComboBox = /*#__PURE__*/forwardRef(function (_a, ref) {
           return tag.id !== tagId;
         });
       });
-    } else {
-      onChange('');
-      setSelectedTags([]);
+      return;
     }
+    onChange('');
+    setSelectedTags([]);
   };
+  var comboboxId = "combobox-options-".concat(id || 'default');
+  var hasVisibleOptions = showAllItems || inputValue;
+  var displayedOptions = hasVisibleOptions ? optionItems : [];
+  var showNoResults = !hasVisibleOptions || optionItems.length === 0;
+  var showFooter = multiple || showFooterButtons;
+  var hiddenInputValue = multiple ? JSON.stringify(value || []) : String(value || '');
+  var hasTags = selectedTags.length > 0;
   return _jsxs(_Fragment, {
     children: [_jsxs("div", __assign({
       ref: internalRef,
@@ -268,7 +279,7 @@ export var ComboBox = /*#__PURE__*/forwardRef(function (_a, ref) {
           role: "combobox",
           "aria-expanded": isOpen,
           "aria-haspopup": "listbox",
-          "aria-controls": "combobox-options-".concat(id || 'default'),
+          "aria-controls": comboboxId,
           "aria-disabled": disabled,
           autoComplete: "off",
           clearText: !!inputValue,
@@ -281,23 +292,23 @@ export var ComboBox = /*#__PURE__*/forwardRef(function (_a, ref) {
           isOpen: isOpen,
           direction: dropdownDirection,
           size: size,
-          options: showAllItems || inputValue ? optionItems : [],
+          options: displayedOptions,
           value: value,
           focusedIndex: focusedIndex,
           maxHeight: maxHeight,
-          listboxId: "combobox-options-".concat(id || 'default'),
+          listboxId: comboboxId,
           onOptionSelect: handleDropdownSelect,
           onMouseMove: handleMouseMove,
           isKeyboardNavigation: isKeyboardNavigation,
           multiple: multiple,
-          showFooterButtons: multiple || showFooterButtons,
+          showFooterButtons: showFooter,
           selectAllButtonText: selectAllButtonText,
           onSelectAll: handleSelectAll,
           onEdit: handleEdit,
           onComplete: handleComplete,
           componentType: "combobox"
         }, {
-          children: [!showAllItems && !inputValue || optionItems.length === 0 ? _jsx("li", __assign({
+          children: [showNoResults ? _jsx("li", __assign({
             className: "ncua-select-dropdown__no-results"
           }, {
             children: "\uC77C\uCE58\uD558\uB294 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
@@ -306,13 +317,13 @@ export var ComboBox = /*#__PURE__*/forwardRef(function (_a, ref) {
       })), register && _jsx("input", __assign({
         type: "hidden"
       }, register, {
-        value: multiple ? JSON.stringify(value || []) : String(value || '')
+        value: hiddenInputValue
       })), hintText && _jsx(HintText, __assign({
         destructive: destructive
       }, {
         children: hintText
       }))]
-    })), selectedTags.length > 0 && _jsx("div", __assign({
+    })), hasTags && _jsx("div", __assign({
       className: "ncua-combobox__tags"
     }, {
       children: selectedTags.map(function (tag) {
@@ -328,4 +339,5 @@ export var ComboBox = /*#__PURE__*/forwardRef(function (_a, ref) {
     }))]
   });
 });
-ComboBox.displayName = 'ComboBox';
+ComboBox.displayName = 'ComboBox';
+export { defaultMaxHeight, ComboBox };

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

@@ -19,12 +19,14 @@ var __rest = this && this.__rest || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Calendar, Clock } from '@ncds/ui-admin-icon';
 import { forwardRef } from 'react';
-export var CustomInput = /*#__PURE__*/forwardRef(function (_a, ref) {
+var SVG_SIZE_XS = 14;
+var SVG_SIZE_SM = 16;
+var CustomInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var disabled = _a.disabled,
     iconSize = _a.iconSize,
     iconName = _a.iconName,
     props = __rest(_a, ["disabled", "iconSize", "iconName"]);
-  var svgSize = iconSize === 'xs' ? 14 : 16;
+  var svgSize = iconSize === 'xs' ? SVG_SIZE_XS : SVG_SIZE_SM;
   return _jsxs(_Fragment, {
     children: [_jsx("input", __assign({
       ref: ref,
@@ -44,4 +46,5 @@ export var CustomInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     }))]
   });
 });
-CustomInput.displayName = 'CustomInput';
+CustomInput.displayName = 'CustomInput';
+export { CustomInput };

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

@@ -29,7 +29,26 @@ var isValidDate = function (dateString) {
   var date = new Date(dateString);
   return date instanceof Date && !isNaN(date.getTime());
 };
-export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
+var getTimeOnlyValue = function (hasSeconds, isEndDate) {
+  var endTime = hasSeconds ? '23:59:59' : '23:59';
+  var startTime = hasSeconds ? '00:00:00' : '00:00';
+  return isEndDate ? endTime : startTime;
+};
+var getDateTimeValue = function (currentDate, hasSeconds, isEndDate) {
+  var format = hasSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
+  var momentDate = moment(currentDate);
+  return isEndDate ? momentDate.endOf('day').format(format) : momentDate.startOf('day').format(format);
+};
+var processDate = function (currentDate, isEndDate, enableTime, noCalendar, enableSeconds) {
+  if (!enableTime && !noCalendar) return currentDate;
+  if (currentDate === null || currentDate === void 0 ? void 0 : currentDate.includes(':')) return currentDate;
+  if (noCalendar) {
+    return getTimeOnlyValue(enableSeconds, isEndDate);
+  }
+  if (!currentDate) return '';
+  return getDateTimeValue(currentDate, enableSeconds, isEndDate);
+};
+var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.shouldFocus,
     shouldFocus = _b === void 0 ? true : _b,
     currentDate = _a.currentDate,
@@ -63,42 +82,52 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
     return violations;
   };
-  var onChangeDateHandler = function (dateTimeStamp, dateStr, instance) {
+  var isValidDateInstance = function (date) {
+    return date instanceof Date && !isNaN(date.getTime());
+  };
+  var handleInvalidSelectedDate = function (instance) {
+    var previousDate = instance === null || instance === void 0 ? void 0 : instance._previousDateBeforeInput;
+    if (isValidDateInstance(previousDate)) {
+      // 이전 값이 있으면 이전 값으로 복원
+      instance.selectedDates = [previousDate];
+      instance.setDate(previousDate, false);
+    } else {
+      // 이전 값이 없으면 빈 값으로 처리
+      restorePreviousDate(instance.input, instance);
+    }
+    return true;
+  };
+  var handleDateViolations = function (selectedDate, instance) {
     var _a;
+    var minDate = options.minDate,
+      maxDate = options.maxDate;
+    var violations = checkDateViolations(selectedDate, minDate, maxDate);
+    if (violations.length > 0 && onValidationError) {
+      var prevDate = (_a = instance === null || instance === void 0 ? void 0 : instance.selectedDates) === null || _a === void 0 ? void 0 : _a[0];
+      onValidationError({
+        date: selectedDate,
+        minDate: minDate,
+        maxDate: maxDate,
+        violations: violations,
+        previousDate: isValidDateInstance(prevDate) ? prevDate : undefined
+      });
+      return true; // onValidationError가 있으면 날짜 변경 안 함
+    }
+    return false;
+  };
+  var onChangeDateHandler = function (dateTimeStamp, dateStr, instance) {
     if (!dateTimeStamp || dateTimeStamp.length === 0) {
       restorePreviousDate(instance.input, instance);
       return;
     }
     var selectedDate = dateTimeStamp[0];
-    if (!selectedDate || !(selectedDate instanceof Date) || isNaN(selectedDate.getTime())) {
+    if (!isValidDateInstance(selectedDate)) {
       // 유효하지 않은 날짜 - 이전 값으로 복원하거나 빈 값으로 처리
-      var previousDate = instance === null || instance === void 0 ? void 0 : instance._previousDateBeforeInput;
-      if (previousDate && previousDate instanceof Date && !isNaN(previousDate.getTime())) {
-        // 이전 값이 있으면 이전 값으로 복원
-        instance.selectedDates = [previousDate];
-        instance.setDate(previousDate, false);
-      } else {
-        // 이전 값이 없으면 빈 값으로 처리
-        restorePreviousDate(instance.input, instance);
-      }
+      handleInvalidSelectedDate(instance);
       return;
     }
-    var minDate = options.minDate,
-      maxDate = options.maxDate;
-    var violations = checkDateViolations(selectedDate, minDate, maxDate);
-    if (violations.length > 0) {
-      var prevDate = (_a = instance === null || instance === void 0 ? void 0 : instance.selectedDates) === null || _a === void 0 ? void 0 : _a[0];
-      if (onValidationError) {
-        onValidationError({
-          date: selectedDate,
-          minDate: minDate,
-          maxDate: maxDate,
-          violations: violations,
-          previousDate: prevDate instanceof Date && !isNaN(prevDate.getTime()) ? prevDate : undefined
-        });
-        return; // onValidationError가 있으면 날짜 변경 안 함
-      }
-      // onValidationError가 없으면 범위를 벗어난 날짜도 허용 (계속 진행)
+    if (handleDateViolations(selectedDate, instance)) {
+      return;
     }
     // 유효한 날짜인 경우 이전 날짜로 저장
     instance._previousDateBeforeInput = selectedDate;
@@ -118,15 +147,31 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     target.value = '';
     instance.setDate('', false);
   };
+  var handleEmptyInput = function (target, instance) {
+    target.value = '';
+    instance.setDate('', false);
+    onChangeDate('');
+    return true;
+  };
+  var validateFormattedDate = function (formattedInput, target, instance) {
+    var parsedDate = moment(formattedInput);
+    if (!parsedDate.isValid()) {
+      restorePreviousDate(target, instance);
+      return false;
+    }
+    var parsedDateObj = parsedDate.toDate();
+    var violations = checkDateViolations(parsedDateObj, minMaxDateRef.current.minDate, minMaxDateRef.current.maxDate);
+    // onInputHandler에서는 onValidationError를 호출하지 않음
+    // validation은 onChangeDateHandler에서만 처리
+    return violations.length === 0;
+  };
   var onInputHandler = function (e) {
     var target = e.target;
     var input = target.value;
     var instance = flatpickrInstanceRef.current;
     if (!instance) return;
     if (!input || input.trim() === '') {
-      target.value = '';
-      instance.setDate('', false);
-      onChangeDate('');
+      handleEmptyInput(target, instance);
       return;
     }
     // 숫자가 최소 하나는 포함되어야 함 (하이픈만 있는 경우 방지)
@@ -139,20 +184,8 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       target.value = formattedInput;
       return;
     }
-    if (formattedInput && formattedInput.length >= 10) {
-      var parsedDate = moment(formattedInput);
-      if (!parsedDate.isValid()) {
-        restorePreviousDate(target, instance);
-        return;
-      }
-      var parsedDateObj = parsedDate.toDate();
-      var violations = checkDateViolations(parsedDateObj, minMaxDateRef.current.minDate, minMaxDateRef.current.maxDate);
-      if (violations.length > 0) {
-        // onInputHandler에서는 onValidationError를 호출하지 않음
-        // validation은 onChangeDateHandler에서만 처리
-        // onValidationError가 없으면 아무것도 하지 않음 (범위를 벗어난 날짜도 허용)
-        return;
-      }
+    if (formattedInput && formattedInput.length >= 10 && !validateFormattedDate(formattedInput, target, instance)) {
+      return;
     }
   };
   var onHourInputHandler = function (e) {
@@ -177,7 +210,7 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     dateFormat: 'Y-m-d',
     clickOpens: true,
     time_24hr: true,
-    formatDate: function (date, format, locale) {
+    formatDate: function (date, format, _locale) {
       try {
         // 유효한 날짜인지 확인
         if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
@@ -198,7 +231,7 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     },
     onChange: onChangeDateHandler,
     allowInvalidPreload: true,
-    onReady: function (selectedDates, dateStr, instance) {
+    onReady: function (_selectedDates, _dateStr, instance) {
       var _a;
       var input = instance.input;
       if (!input) return;
@@ -209,7 +242,7 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
         maxDate: (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.maxDate) || options.maxDate
       };
       // blur 시점에 현재 selectedDates를 저장 (입력 전 상태)
-      var onBlurHandler = function (e) {
+      var onBlurHandler = function (_e) {
         if (instance && instance.selectedDates.length > 0) {
           // 이전 날짜를 별도로 저장 (onChange에서 사용)
           instance._previousDateBeforeInput = instance.selectedDates[0];
@@ -244,7 +277,7 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       instance._handleMouseDown = handleMouseDown;
       instance._onBlurHandler = onBlurHandler;
     },
-    onDestroy: function (selectedDates, dateStr, instance) {
+    onDestroy: function (_selectedDates, _dateStr, instance) {
       var _a;
       var input = instance.input;
       if (!input) return;
@@ -274,23 +307,10 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       }
     }
   }, datePickerOptions);
-  var hasTimeOption = datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.hasOwnProperty('enableTime');
-  var iconName = hasTimeOption && (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.hasOwnProperty('noCalendar')) ? 'clock' : 'calendar';
+  var hasTimeOption = datePickerOptions ? Object.hasOwn(datePickerOptions, 'enableTime') : false;
+  var iconName = hasTimeOption && datePickerOptions && Object.hasOwn(datePickerOptions, 'noCalendar') ? 'clock' : 'calendar';
   var processedCurrentDate = useMemo(function () {
-    var hasTime = options.enableTime;
-    var isTimeOnly = options.noCalendar;
-    var hasSeconds = options.enableSeconds;
-    if (!hasTime && !isTimeOnly) return currentDate;
-    if (currentDate === null || currentDate === void 0 ? void 0 : currentDate.includes(':')) return currentDate;
-    if (isTimeOnly) {
-      var endTime = hasSeconds ? '23:59:59' : '23:59';
-      var startTime = hasSeconds ? '00:00:00' : '00:00';
-      return isEndDate ? endTime : startTime;
-    }
-    if (!currentDate) return '';
-    var format = hasSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
-    var momentDate = moment(currentDate);
-    return isEndDate ? momentDate.endOf('day').format(format) : momentDate.startOf('day').format(format);
+    return processDate(currentDate, isEndDate, options.enableTime, options.noCalendar, options.enableSeconds);
   }, [currentDate, isEndDate, options.enableSeconds, options.enableTime, options.noCalendar]);
   return _jsxs("div", __assign({
     className: classNames('ncua-date-picker', "ncua-date-picker--".concat(size), {
@@ -306,7 +326,7 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       value: processedCurrentDate,
       render: function (_a, ref) {
         var defaultValue = _a.defaultValue,
-          value = _a.value,
+          _value = _a.value,
           props = __rest(_a, ["defaultValue", "value"]);
         // input에 반영 되면 안되는 attribute 제외
         var _b = props,
@@ -337,4 +357,5 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     }))]
   }));
 });
-DatePicker.displayName = 'DatePicker';
+DatePicker.displayName = 'DatePicker';
+export { DatePicker };

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

@@ -13,55 +13,64 @@ import moment from 'moment';
 import { forwardRef, useCallback, useEffect } from 'react';
 import { DatePicker } from './DatePicker';
 import { getDateFormat } from './utils';
-export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
+var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
   var startDateOptions = _a.startDateOptions,
     endDateOptions = _a.endDateOptions,
     validationOption = _a.validationOption,
     onDateValidation = _a.onDateValidation,
     _b = _a.size,
     size = _b === void 0 ? 'xs' : _b;
+  var getOverlapResult = useCallback(function (type) {
+    if (type === 'start' && moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
+      return {
+        newDate: endDateOptions.currentDate,
+        currentDate: startDateOptions.currentDate
+      };
+    }
+    if (type === 'end' && moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
+      return {
+        newDate: startDateOptions.currentDate,
+        currentDate: endDateOptions.currentDate
+      };
+    }
+    return null;
+  }, [startDateOptions.currentDate, endDateOptions.currentDate]);
+  var getSettingNewDate = useCallback(function (type, isOverPeriod, unit, period) {
+    if (type === 'start') {
+      if (isOverPeriod) {
+        return getDateFormat(moment(endDateOptions.currentDate).subtract(period, unit).toDate());
+      }
+      if (moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
+        return endDateOptions.currentDate;
+      }
+    } else {
+      if (isOverPeriod) {
+        return getDateFormat(moment(startDateOptions.currentDate).add(period, unit).toDate());
+      }
+      if (moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
+        return startDateOptions.currentDate;
+      }
+    }
+    return '';
+  }, [startDateOptions.currentDate, endDateOptions.currentDate]);
   var changeSettingDateAndAlert = useCallback(function (type, isOverPeriod) {
     if (isOverPeriod === void 0) {
       isOverPeriod = false;
     }
     if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
-      if (type === 'start' && moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
-        onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
-          type: type,
-          errorType: 'overlap',
-          newDate: endDateOptions.currentDate,
-          currentDate: startDateOptions.currentDate
-        });
-        return;
-      }
-      if (type === 'end' && moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
-        onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+      var result = getOverlapResult(type);
+      if (result) {
+        onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation(__assign({
           type: type,
-          errorType: 'overlap',
-          newDate: startDateOptions.currentDate,
-          currentDate: endDateOptions.currentDate
-        });
-        return;
+          errorType: 'overlap'
+        }, result));
       }
       return;
     }
     var _a = validationOption.setting,
       unit = _a.unit,
       period = _a.period;
-    var newDate = '';
-    if (type === 'start') {
-      if (isOverPeriod) {
-        newDate = getDateFormat(moment(endDateOptions.currentDate).subtract(period, unit).toDate());
-      } else if (moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
-        newDate = endDateOptions.currentDate;
-      }
-    } else {
-      if (isOverPeriod) {
-        newDate = getDateFormat(moment(startDateOptions.currentDate).add(period, unit).toDate());
-      } else if (moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
-        newDate = startDateOptions.currentDate;
-      }
-    }
+    var newDate = getSettingNewDate(type, isOverPeriod, unit, period);
     if (newDate) {
       onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
         type: type,
@@ -70,7 +79,7 @@ export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
         currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
       });
     }
-  }, [startDateOptions, endDateOptions, validationOption, onDateValidation]);
+  }, [startDateOptions, endDateOptions, validationOption, onDateValidation, getOverlapResult, getSettingNewDate]);
   useEffect(function () {
     var isOverDate = moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
     if (isOverDate) {
@@ -84,15 +93,15 @@ export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       unit = _a.unit,
       period = _a.period;
     var isValidPeriod = moment(startDateOptions.currentDate).isSameOrAfter(moment(endDateOptions.currentDate).subtract(period, unit));
-    if (!isValidPeriod) {
-      changeSettingDateAndAlert('start', true);
-    } else {
+    if (isValidPeriod) {
       onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
         type: 'start',
         errorType: null,
         newDate: startDateOptions.currentDate,
         currentDate: startDateOptions.currentDate
       });
+    } else {
+      changeSettingDateAndAlert('start', true);
     }
   }, [startDateOptions.currentDate]);
   useEffect(function () {
@@ -109,15 +118,15 @@ export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       unit = _a.unit,
       period = _a.period;
     var isValidPeriod = moment(endDateOptions.currentDate).isSameOrBefore(moment(startDateOptions.currentDate).add(period, unit));
-    if (!isValidPeriod) {
-      changeSettingDateAndAlert('end', true);
-    } else {
+    if (isValidPeriod) {
       onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
         type: 'end',
         errorType: null,
         newDate: endDateOptions.currentDate,
         currentDate: endDateOptions.currentDate
       });
+    } else {
+      changeSettingDateAndAlert('end', true);
     }
   }, [endDateOptions.currentDate]);
   return _jsxs("div", __assign({
@@ -135,4 +144,5 @@ export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     }))]
   }));
 });
-RangeDatePicker.displayName = 'RangeDatePicker';
+RangeDatePicker.displayName = 'RangeDatePicker';
+export { RangeDatePicker };

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

@@ -14,7 +14,7 @@ import { PERIOD_ITEM } from '../../constant/date-picker';
 import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
 import { ButtonGroup } from '../button';
 import { RangeDatePicker } from './RangeDatePicker';
-export var RangeDatePickerWithButtons = function (_a) {
+var RangeDatePickerWithButtons = function (_a) {
   var _b = _a.useYesterdayAsEndDate,
     useYesterdayAsEndDate = _b === void 0 ? false : _b,
     _c = _a.size,
@@ -89,4 +89,5 @@ export var RangeDatePickerWithButtons = function (_a) {
       size: size
     })]
   }));
-};
+};
+export { RangeDatePickerWithButtons };

package/dist/esm/src/components/divider/Divider.js

@@ -9,8 +9,8 @@ var __assign = this && this.__assign || function () {
   return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import classNames from 'classnames';
+import { forwardRef } from 'react';
 /**
  * @param {DividerProps} props
  * @param {ReactNode} props.children Button 컴포넌트는 xs로 ButtonGroup은 sm 사이즈로 추가하는 것이 권장됩니다.

package/dist/esm/src/components/dot/Dot.js

@@ -19,11 +19,11 @@ var __rest = this && this.__rest || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
-export var Dot = /*#__PURE__*/forwardRef(function (_a, ref) {
+var Dot = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.color,
     color = _b === void 0 ? 'success' : _b,
     _c = _a.size,
-    size = _c === void 0 ? 'md' : _c,
+    size = _c === void 0 ? 'sm' : _c,
     className = _a.className,
     props = __rest(_a, ["color", "size", "className"]);
   return _jsx("span", __assign({
@@ -31,4 +31,5 @@ export var Dot = /*#__PURE__*/forwardRef(function (_a, ref) {
     className: classNames('ncua-dot', "ncua-dot--".concat(color), "ncua-dot--".concat(size), className)
   }, props));
 });
-Dot.displayName = 'Dot';
+Dot.displayName = 'Dot';
+export { Dot };

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

@@ -185,12 +185,13 @@ export var Dropdown = function (_a) {
       children: [renderHeader(), _jsx("div", __assign({
         className: "ncua-dropdown__menu-items"
       }, {
-        children: groups.map(function (group, index) {
+        children: groups.map(function (group) {
+          var _a;
           return _jsx("div", __assign({
             className: "ncua-dropdown__group"
           }, {
             children: group.items.map(renderItem)
-          }), index);
+          }), (_a = group.items[0]) === null || _a === void 0 ? void 0 : _a.id);
         })
       }))]
     }))]