@ncds/ui-admin 1.5.1 → 1.5.3

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

@@ -31,6 +31,9 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   }
   return t;
 };
+
+/** biome-ignore-all lint/correctness/noUnusedVariables: <explanation> */
+
 var isValidDate = function (dateString) {
   var date = new Date(dateString);
   return date instanceof Date && !isNaN(date.getTime());
@@ -45,17 +48,117 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     datePickerOptions = _a.datePickerOptions,
     _d = _a.isEndDate,
     isEndDate = _d === void 0 ? false : _d,
-    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate"]);
-  var onChangeDateHandler = function (dateTimeStamp, dateStr) {
+    onValidationError = _a.onValidationError,
+    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate", "onValidationError"]);
+  var flatpickrInstanceRef = (0, _react.useRef)(null);
+  var dateFormatRef = (0, _react.useRef)('Y-m-d');
+  var minMaxDateRef = (0, _react.useRef)({});
+  var checkDateViolations = function (date, minDate, maxDate) {
+    var violations = [];
+    var inputDate = (0, _moment.default)(date);
+    if (!inputDate.isValid()) return violations;
+    if (minDate) {
+      var min = (0, _moment.default)(minDate);
+      if (min.isValid() && inputDate.isBefore(min, 'day')) {
+        violations.push('minDate');
+      }
+    }
+    if (maxDate) {
+      var max = (0, _moment.default)(maxDate);
+      if (max.isValid() && inputDate.isAfter(max, 'day')) {
+        violations.push('maxDate');
+      }
+    }
+    return violations;
+  };
+  var onChangeDateHandler = function (dateTimeStamp, dateStr, instance) {
+    var _a;
+    if (!dateTimeStamp || dateTimeStamp.length === 0) {
+      restorePreviousDate(instance.input, instance);
+      return;
+    }
+    var selectedDate = dateTimeStamp[0];
+    if (!selectedDate || !(selectedDate instanceof Date) || isNaN(selectedDate.getTime())) {
+      // 유효하지 않은 날짜 - 이전 값으로 복원하거나 빈 값으로 처리
+      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);
+      }
+      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가 없으면 범위를 벗어난 날짜도 허용 (계속 진행)
+    }
+    // 유효한 날짜인 경우 이전 날짜로 저장
+    instance._previousDateBeforeInput = selectedDate;
     var formattedDate = (0, _datePicker.formatDateInput)(dateStr);
     isValidDate(formattedDate) ? onChangeDate(formattedDate) : onChangeDate(dateStr);
   };
+  var restorePreviousDate = function (target, instance) {
+    if (instance.selectedDates.length > 0) {
+      var prevDate = instance.selectedDates[0];
+      if (prevDate instanceof Date && !isNaN(prevDate.getTime())) {
+        var 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);
+  };
   var onInputHandler = function (e) {
     var target = e.target;
     var input = target.value;
+    var instance = flatpickrInstanceRef.current;
+    if (!instance) return;
+    if (!input || input.trim() === '') {
+      return;
+    }
+    // 숫자가 최소 하나는 포함되어야 함 (하이픈만 있는 경우 방지)
+    if (!/[0-9]/.test(input)) {
+      restorePreviousDate(target, instance);
+      return;
+    }
     var formattedInput = (0, _datePicker.formatDateInput)(input);
-    if (formattedInput === input) return;
-    target.value = formattedInput;
+    if (formattedInput !== input) {
+      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;
+      }
+    }
   };
   var onHourInputHandler = function (e) {
     var target = e.target;
@@ -79,13 +182,50 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     dateFormat: 'Y-m-d',
     clickOpens: true,
     time_24hr: true,
+    formatDate: function (date, format, locale) {
+      try {
+        // 유효한 날짜인지 확인
+        if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+          return '';
+        }
+        // moment로 포맷팅
+        var momentDate = (0, _moment.default)(date);
+        if (!momentDate.isValid()) {
+          return '';
+        }
+        // format을 moment 형식으로 변환
+        var 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) {
+        // 오류 발생 시 빈 문자열 반환 (232-23 같은 잘못된 날짜 처리)
+        return '';
+      }
+    },
     onChange: onChangeDateHandler,
     allowInvalidPreload: true,
     onReady: function (selectedDates, dateStr, instance) {
       var _a;
       var input = instance.input;
       if (!input) return;
+      flatpickrInstanceRef.current = instance;
+      dateFormatRef.current = (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.dateFormat) || options.dateFormat || 'Y-m-d';
+      minMaxDateRef.current = {
+        minDate: (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.minDate) || options.minDate,
+        maxDate: (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.maxDate) || options.maxDate
+      };
+      // blur 시점에 현재 selectedDates를 저장 (입력 전 상태)
+      var onBlurHandler = function (e) {
+        if (instance && instance.selectedDates.length > 0) {
+          // 이전 날짜를 별도로 저장 (onChange에서 사용)
+          instance._previousDateBeforeInput = instance.selectedDates[0];
+        }
+      };
       input.addEventListener('input', onInputHandler);
+      input.addEventListener('blur', onBlurHandler);
+      // 초기 날짜가 있으면 저장
+      if (instance.selectedDates.length > 0) {
+        instance._previousDateBeforeInput = instance.selectedDates[0];
+      }
       var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
       if (!timeInputWrapper) return;
       var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
@@ -107,13 +247,20 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
       };
       document.addEventListener('mousedown', handleMouseDown, true);
       instance._handleMouseDown = handleMouseDown;
+      instance._onBlurHandler = onBlurHandler;
     },
     onDestroy: function (selectedDates, dateStr, instance) {
       var _a;
       var input = instance.input;
       if (!input) return;
+      flatpickrInstanceRef.current = null;
       // 메인 input 이벤트 리스너 제거
       input.removeEventListener('input', onInputHandler);
+      // blur 이벤트 리스너 제거
+      var onBlurHandler = instance === null || instance === void 0 ? void 0 : instance._onBlurHandler;
+      if (onBlurHandler) {
+        input.removeEventListener('blur', onBlurHandler);
+      }
       var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
       if (!timeInputWrapper) return;
       // 시간 input 이벤트 리스너 제거
@@ -166,7 +313,17 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
         var defaultValue = _a.defaultValue,
           value = _a.value,
           props = __rest(_a, ["defaultValue", "value"]);
-        return (0, _jsxRuntime.jsx)(_CustomInput.CustomInput, __assign({}, props, {
+        // input에 반영 되면 안되는 attribute 제외
+        var _b = props,
+          allowInput = _b.allowInput,
+          dateFormat = _b.dateFormat,
+          minDate = _b.minDate,
+          maxDate = _b.maxDate,
+          enableTime = _b.enableTime,
+          enableSeconds = _b.enableSeconds,
+          noCalendar = _b.noCalendar,
+          inputProps = __rest(_b, ["allowInput", "dateFormat", "minDate", "maxDate", "enableTime", "enableSeconds", "noCalendar"]);
+        return (0, _jsxRuntime.jsx)(_CustomInput.CustomInput, __assign({}, inputProps, {
           id: inputId,
           iconSize: size,
           disabled: !!attrs.disabled,

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

@@ -31,9 +31,11 @@ var RangeDatePickerWithButtons = function (_a) {
     endDateOptions = _a.endDateOptions,
     validationOption = _a.validationOption,
     periodKeys = _a.periodKeys,
+    periodItems = _a.periodItems,
     onDateValidation = _a.onDateValidation;
+  var items = periodItems !== null && periodItems !== void 0 ? periodItems : _datePicker.PERIOD_ITEM;
   var setCalculatedDate = function () {
-    var currentPeriodItem = _datePicker.PERIOD_ITEM[currentButtonId];
+    var currentPeriodItem = items[currentButtonId];
     if (!currentPeriodItem) {
       return;
     }
@@ -71,7 +73,7 @@ var RangeDatePickerWithButtons = function (_a) {
       children: periodKeys.map(function (key) {
         return (0, _jsxRuntime.jsx)(_button.ButtonGroup.Item, {
           isCurrent: currentButtonId === key,
-          label: _datePicker.PERIOD_ITEM[key].text,
+          label: items[key].text,
           onClick: function () {
             return setCurrentButtonId(key);
           }

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

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ImageFileInputErrorType = exports.ImageFileInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _button = require("../button");
 var _shared = require("../shared");
-var _ImagePreview = require("./components/ImagePreview");
 var _tooltip = require("../tooltip");
+var _ImagePreview = require("./components/ImagePreview");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -189,7 +189,9 @@ var ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardRef
         children: [(0, _jsxRuntime.jsx)(_button.Button, {
           onlyIcon: true,
           size: size,
-          className: "ncua-image-file-input__preview-container",
+          className: (0, _classnames.default)('ncua-image-file-input__preview-container', {
+            destructive: destructive
+          }),
           onClick: handleBrowseClick,
           disabled: disabled,
           label: imagePreviewTooltipLabel

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

@@ -8,7 +8,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _hooks = require("../../hooks");
 var _InputBase = require("./InputBase");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
@@ -40,37 +39,23 @@ var PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(
   var _c = (0, _react.useState)(false),
     isVisible = _c[0],
     setIsVisible = _c[1];
-  var _d = (0, _react.useState)(false),
-    hasContent = _d[0],
-    setHasContent = _d[1];
-  var callbackRef = (0, _hooks.useCallbackRef)(function (node) {
-    if (node) {
-      setHasContent(!!node.value);
-      var handleInput_1 = function () {
-        setHasContent(!!node.value);
-      };
-      node.addEventListener('input', handleInput_1);
-      return function () {
-        node.removeEventListener('input', handleInput_1);
-      };
-    }
-  });
-  var mergedRef = (0, _hooks.useMergeRefs)([ref, callbackRef]);
   var svgProps = {
     width: svgSize[size],
     height: svgSize[size]
   };
   var handleVisibilityChange = function () {
-    setIsVisible(!isVisible);
+    setIsVisible(function (prev) {
+      return !prev;
+    });
   };
   return (0, _jsxRuntime.jsx)(_InputBase.InputBase, __assign({
-    ref: mergedRef,
+    ref: ref,
     size: size,
     type: isVisible ? 'text' : 'password',
     leadingElement: {
       type: 'icon',
       icon: 'lock-01',
-      color: hasContent ? 'gray600' : 'gray300'
+      color: props.value ? 'gray600' : 'gray300'
     },
     trailingElement: {
       type: 'custom',

package/dist/cjs/src/components/pagination/Pagination.js

@@ -46,8 +46,8 @@ var Pagination = function (_a) {
   var _f = (0, _react.useState)(1),
     start = _f[0],
     setStart = _f[1];
-  var noPrev = start === 1;
-  var noNext = start + pageCount - 1 >= totalPage;
+  var noPrev = breakPoint === 'mo' ? currentPage === 1 : start === 1;
+  var noNext = breakPoint === 'mo' ? currentPage >= totalPage : start + pageCount - 1 >= totalPage;
   var showJumpPageButton = totalPage > pageCount;
   var handleClickButton = function (pageNum) {
     if ((0, _lodashEs.isFunction)(onPageChange)) {
@@ -69,7 +69,7 @@ var Pagination = function (_a) {
       setStart(1);
     }
     if (currentPage === totalPage) {
-      var lastGroupStart = Math.max(1, totalPage - pageCount + 1);
+      var lastGroupStart = Math.floor((totalPage - 1) / pageCount) * pageCount + 1;
       setStart(lastGroupStart);
     }
   }, [currentPage]);
@@ -92,7 +92,7 @@ var Pagination = function (_a) {
           noPrev: noPrev,
           noNext: noNext,
           onClick: function () {
-            return handleClickButton(Math.max(start - pageCount, 1));
+            return breakPoint === 'mo' ? handleClickButton(Math.max(currentPage - 1, 1)) : handleClickButton(Math.max(start - pageCount, 1));
           }
         })]
       }), (0, _jsxRuntime.jsx)("ul", __assign({
@@ -129,7 +129,7 @@ var Pagination = function (_a) {
           noPrev: noPrev,
           noNext: noNext,
           onClick: function () {
-            return handleClickButton(Math.min(start + pageCount, totalPage));
+            return breakPoint === 'mo' ? handleClickButton(Math.min(currentPage + 1, totalPage)) : handleClickButton(Math.min(start + pageCount, totalPage));
           }
         }), (0, _NavButton.NavButton)({
           type: 'last',

package/dist/cjs/src/components/tab/HorizontalTab.js

@@ -39,7 +39,7 @@ var HorizontalTab = function (_a) {
   };
   if (!menus.length) return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
   return (0, _jsxRuntime.jsx)("div", __assign({
-    className: (0, _classnames.default)('ncua-horizontal-tab', "ncua-horizontal-tab--".concat(type), {
+    className: (0, _classnames.default)('ncua-horizontal-tab', "ncua-horizontal-tab--".concat(type), "ncua-horizontal-tab--".concat(size), {
       'ncua-horizontal-tab--fullWidth': fullWidth
     })
   }, {