@ncds/ui-admin 1.6.4 → 1.7.0

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

@@ -44,6 +44,25 @@ var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack
   return to.concat(ar || Array.prototype.slice.call(from));
 };
 var defaultMaxHeight = exports.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 = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.placeholder,
     placeholder = _b === void 0 ? '검색하세요' : _b,
@@ -90,34 +109,20 @@ var ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)(function (
     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;
@@ -159,14 +164,13 @@ var ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)(function (
     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 () {
@@ -241,11 +245,18 @@ var ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)(function (
           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 (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [(0, _jsxRuntime.jsxs)("div", __assign({
       ref: internalRef,
@@ -275,7 +286,7 @@ var ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)(function (
           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,
@@ -288,23 +299,23 @@ var ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)(function (
           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 ? (0, _jsxRuntime.jsx)("li", __assign({
+          children: [showNoResults ? (0, _jsxRuntime.jsx)("li", __assign({
             className: "ncua-select-dropdown__no-results"
           }, {
             children: "\uC77C\uCE58\uD558\uB294 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
@@ -313,13 +324,13 @@ var ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)(function (
       })), register && (0, _jsxRuntime.jsx)("input", __assign({
         type: "hidden"
       }, register, {
-        value: multiple ? JSON.stringify(value || []) : String(value || '')
+        value: hiddenInputValue
       })), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, __assign({
         destructive: destructive
       }, {
         children: hintText
       }))]
-    })), selectedTags.length > 0 && (0, _jsxRuntime.jsx)("div", __assign({
+    })), hasTags && (0, _jsxRuntime.jsx)("div", __assign({
       className: "ncua-combobox__tags"
     }, {
       children: selectedTags.map(function (tag) {

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

@@ -25,12 +25,14 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
+var SVG_SIZE_XS = 14;
+var SVG_SIZE_SM = 16;
 var CustomInput = exports.CustomInput = /*#__PURE__*/(0, _react.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 (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [(0, _jsxRuntime.jsx)("input", __assign({
       ref: ref,

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

@@ -38,6 +38,25 @@ var isValidDate = function (dateString) {
   var date = new Date(dateString);
   return date instanceof Date && !isNaN(date.getTime());
 };
+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 = (0, _moment.default)(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 = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.shouldFocus,
     shouldFocus = _b === void 0 ? true : _b,
@@ -72,42 +91,52 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     }
     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;
@@ -127,15 +156,31 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     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 = (0, _moment.default)(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;
     }
     // 숫자가 최소 하나는 포함되어야 함 (하이픈만 있는 경우 방지)
@@ -148,20 +193,8 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
       target.value = formattedInput;
       return;
     }
-    if (formattedInput && formattedInput.length >= 10) {
-      var parsedDate = (0, _moment.default)(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) {
@@ -186,7 +219,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     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())) {
@@ -207,7 +240,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     },
     onChange: onChangeDateHandler,
     allowInvalidPreload: true,
-    onReady: function (selectedDates, dateStr, instance) {
+    onReady: function (_selectedDates, _dateStr, instance) {
       var _a;
       var input = instance.input;
       if (!input) return;
@@ -218,7 +251,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
         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];
@@ -253,7 +286,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
       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;
@@ -283,23 +316,10 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
       }
     }
   }, 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 = (0, _react.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 = (0, _moment.default)(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 (0, _jsxRuntime.jsxs)("div", __assign({
     className: (0, _classnames.default)('ncua-date-picker', "ncua-date-picker--".concat(size), {
@@ -315,7 +335,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
       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,

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

@@ -27,48 +27,57 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
     onDateValidation = _a.onDateValidation,
     _b = _a.size,
     size = _b === void 0 ? 'xs' : _b;
+  var getOverlapResult = (0, _react.useCallback)(function (type) {
+    if (type === 'start' && (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
+      return {
+        newDate: endDateOptions.currentDate,
+        currentDate: startDateOptions.currentDate
+      };
+    }
+    if (type === 'end' && (0, _moment.default)(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
+      return {
+        newDate: startDateOptions.currentDate,
+        currentDate: endDateOptions.currentDate
+      };
+    }
+    return null;
+  }, [startDateOptions.currentDate, endDateOptions.currentDate]);
+  var getSettingNewDate = (0, _react.useCallback)(function (type, isOverPeriod, unit, period) {
+    if (type === 'start') {
+      if (isOverPeriod) {
+        return (0, _utils.getDateFormat)((0, _moment.default)(endDateOptions.currentDate).subtract(period, unit).toDate());
+      }
+      if ((0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
+        return endDateOptions.currentDate;
+      }
+    } else {
+      if (isOverPeriod) {
+        return (0, _utils.getDateFormat)((0, _moment.default)(startDateOptions.currentDate).add(period, unit).toDate());
+      }
+      if ((0, _moment.default)(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
+        return startDateOptions.currentDate;
+      }
+    }
+    return '';
+  }, [startDateOptions.currentDate, endDateOptions.currentDate]);
   var changeSettingDateAndAlert = (0, _react.useCallback)(function (type, isOverPeriod) {
     if (isOverPeriod === void 0) {
       isOverPeriod = false;
     }
     if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
-      if (type === 'start' && (0, _moment.default)(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' && (0, _moment.default)(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 = (0, _utils.getDateFormat)((0, _moment.default)(endDateOptions.currentDate).subtract(period, unit).toDate());
-      } else if ((0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
-        newDate = endDateOptions.currentDate;
-      }
-    } else {
-      if (isOverPeriod) {
-        newDate = (0, _utils.getDateFormat)((0, _moment.default)(startDateOptions.currentDate).add(period, unit).toDate());
-      } else if ((0, _moment.default)(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,
@@ -77,7 +86,7 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
         currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
       });
     }
-  }, [startDateOptions, endDateOptions, validationOption, onDateValidation]);
+  }, [startDateOptions, endDateOptions, validationOption, onDateValidation, getOverlapResult, getSettingNewDate]);
   (0, _react.useEffect)(function () {
     var isOverDate = (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
     if (isOverDate) {
@@ -91,15 +100,15 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
       unit = _a.unit,
       period = _a.period;
     var isValidPeriod = (0, _moment.default)(startDateOptions.currentDate).isSameOrAfter((0, _moment.default)(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]);
   (0, _react.useEffect)(function () {
@@ -116,15 +125,15 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
       unit = _a.unit,
       period = _a.period;
     var isValidPeriod = (0, _moment.default)(endDateOptions.currentDate).isSameOrBefore((0, _moment.default)(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 (0, _jsxRuntime.jsxs)("div", __assign({

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Divider = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {

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

@@ -30,7 +30,7 @@ var Dot = exports.Dot = /*#__PURE__*/(0, _react.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 (0, _jsxRuntime.jsx)("span", __assign({

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

@@ -191,12 +191,13 @@ var Dropdown = function (_a) {
       children: [renderHeader(), (0, _jsxRuntime.jsx)("div", __assign({
         className: "ncua-dropdown__menu-items"
       }, {
-        children: groups.map(function (group, index) {
+        children: groups.map(function (group) {
+          var _a;
           return (0, _jsxRuntime.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);
         })
       }))]
     }))]

package/dist/cjs/src/components/featured-icon/FeaturedIcon.js

@@ -39,7 +39,7 @@ var FeaturedIcon = exports.FeaturedIcon = /*#__PURE__*/(0, _react.forwardRef)(fu
     _c = _a.color,
     color = _c === void 0 ? 'neutral' : _c,
     _d = _a.size,
-    size = _d === void 0 ? 'md' : _d,
+    size = _d === void 0 ? 'sm' : _d,
     className = _a.className,
     rest = __rest(_a, ["icon", "theme", "color", "size", "className"]);
   return (0, _jsxRuntime.jsxs)("div", __assign({

package/dist/cjs/src/components/file-input/FileInput.js

@@ -45,7 +45,7 @@ var FileInputErrorType;
   FileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
   FileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
 })(FileInputErrorType || (exports.FileInputErrorType = FileInputErrorType = {}));
-var FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+var FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, _ref) {
   var _b = _a.size,
     size = _b === void 0 ? 'xs' : _b,
     accept = _a.accept,
@@ -176,12 +176,12 @@ var FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)(function
     return (0, _jsxRuntime.jsx)("ul", __assign({
       className: "ncua-file-input__hint-list"
     }, {
-      children: hintItems.map(function (hint, index) {
+      children: hintItems.map(function (hint) {
         return (0, _jsxRuntime.jsx)("li", __assign({
           className: "ncua-file-input__hint-item"
         }, {
           children: hint
-        }), index);
+        }), hint);
       })
     }));
   };

package/dist/cjs/src/components/image-file-input/ImageFileInput.js

@@ -73,6 +73,9 @@ var ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardRef
     showFileInput = _h === void 0 ? true : _h,
     props = __rest(_a, ["size", "accept", "multiple", "maxFileSize", "maxFileCount", "value", "onChange", "onFileSelect", "onFail", "buttonLabel", "imagePreviewTooltipLabel", "disabled", "label", "hintItems", "validation", "destructive", "isRequired", "showHelpIcon", "hintText", "showFileTagList", "showHintText", "showFileInput"]);
   var fileInputRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return fileInputRef.current;
+  });
   var _j = (0, _react.useState)([]),
     internalFiles = _j[0],
     setInternalFiles = _j[1];
@@ -200,12 +203,12 @@ var ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardRef
     return (0, _jsxRuntime.jsx)("ul", __assign({
       className: "ncua-file-input__hint-list"
     }, {
-      children: hintItems.map(function (hint, index) {
+      children: hintItems.map(function (hint) {
         return (0, _jsxRuntime.jsx)("li", __assign({
           className: "ncua-file-input__hint-item"
         }, {
           children: hint
-        }), index);
+        }), hint);
       })
     }));
   };

package/dist/cjs/src/components/input/NumberInput.js

@@ -42,7 +42,7 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)(func
   var getCurrentValue = (0, _react.useCallback)(function () {
     var _a;
     var value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
-    return value ? parseFloat(value) : 0;
+    return value ? Number.parseFloat(value) : 0;
   }, []);
   var updateValue = (0, _react.useCallback)(function (newValue) {
     if (!inputRef.current) return;