@ncds/ui-admin 1.5.0 → 1.5.2

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

@@ -17,10 +17,11 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** biome-ignore-all lint/correctness/noUnusedVariables: <explanation> */
 import classNames from 'classnames';
 import { Korean } from 'flatpickr/dist/l10n/ko';
 import moment from 'moment';
-import { forwardRef, useId, useMemo } from 'react';
+import { forwardRef, useId, useMemo, useRef } from 'react';
 import Flatpickr from 'react-flatpickr';
 import { formatDateInput, formatHourInput, formatMinuteInput } from '../../utils/date-picker';
 import { CustomInput } from './CustomInput';
@@ -38,17 +39,117 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     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 = useRef(null);
+  var dateFormatRef = useRef('Y-m-d');
+  var minMaxDateRef = useRef({});
+  var checkDateViolations = function (date, minDate, maxDate) {
+    var violations = [];
+    var inputDate = moment(date);
+    if (!inputDate.isValid()) return violations;
+    if (minDate) {
+      var min = moment(minDate);
+      if (min.isValid() && inputDate.isBefore(min, 'day')) {
+        violations.push('minDate');
+      }
+    }
+    if (maxDate) {
+      var max = moment(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 = 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 = moment(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 = formatDateInput(input);
-    if (formattedInput === input) return;
-    target.value = formattedInput;
+    if (formattedInput !== input) {
+      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;
+      }
+    }
   };
   var onHourInputHandler = function (e) {
     var target = e.target;
@@ -72,13 +173,50 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     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 = moment(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');
@@ -100,13 +238,20 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
       };
       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 이벤트 리스너 제거
@@ -159,7 +304,17 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
         var defaultValue = _a.defaultValue,
           value = _a.value,
           props = __rest(_a, ["defaultValue", "value"]);
-        return _jsx(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 _jsx(CustomInput, __assign({}, inputProps, {
           id: inputId,
           iconSize: size,
           disabled: !!attrs.disabled,

package/dist/esm/src/components/index.js

@@ -27,4 +27,5 @@ export * from './switch';
 export * from './tab';
 export * from './tag';
 export * from './toggle';
-export * from './tooltip';
+export * from './tooltip';
+export * from './image-file-input';

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

@@ -17,11 +17,11 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
-import { InputBase } from './InputBase';
 import { Eye, EyeOff } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { useMergeRefs, useCallbackRef } from '../../hooks';
+import { forwardRef, useState } from 'react';
+import { useCallbackRef, useMergeRefs } from '../../hooks';
+import { InputBase } from './InputBase';
 var svgSize = {
   xs: 14,
   sm: 20
@@ -70,6 +70,7 @@ export var PasswordInput = /*#__PURE__*/forwardRef(function (_a, ref) {
       placement: 'inside',
       children: _jsx("button", __assign({
         className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__password-icon'),
+        type: "button",
         onClick: handleVisibilityChange
       }, {
         children: isVisible ? _jsx(Eye, __assign({}, svgProps)) : _jsx(EyeOff, __assign({}, svgProps))

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

@@ -39,8 +39,8 @@ export var Pagination = function (_a) {
   var _f = 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 (isFunction(onPageChange)) {
@@ -62,7 +62,7 @@ export 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]);
@@ -85,7 +85,7 @@ export 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));
           }
         })]
       }), _jsx("ul", __assign({
@@ -122,7 +122,7 @@ export 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));
           }
         }), NavButton({
           type: 'last',

package/dist/types/assets/scripts/datePicker.d.ts

@@ -1,10 +1,19 @@
 import { Options as FlatpickrOptions } from 'flatpickr/dist/types/options';
 export type DatePickerSize = 'xs' | 'sm';
+export interface ValidationError {
+    index: number;
+    date: string | Date;
+    minDate?: string | Date;
+    maxDate?: string | Date;
+    violations: Array<'minDate' | 'maxDate'>;
+    previousDate?: string | Date;
+}
 interface Options {
     buttons?: DatePickerButton[];
     size: DatePickerSize;
     autoComplete?: 'on' | 'off';
     datePickerOptions: DatePickerOptionWrapper[];
+    onValidationError?: (error: ValidationError) => void;
 }
 interface DatePickerOptionWrapper {
     element: string;
@@ -31,6 +40,7 @@ export declare class DatePicker {
     private flatpickrInstances;
     private currentButton;
     private dateFormat;
+    private onValidationError?;
     constructor(wrapper: HTMLElement, options: Options);
     private validateWrapper;
     private init;
@@ -41,11 +51,35 @@ export declare class DatePicker {
     private reRenderButtonGroup;
     private initDatePicker;
     private initializeFlatpickr;
+    private createBlurHandler;
+    private setupFlatpickrLocale;
+    private createInputHandler;
+    private findFlatpickrInstanceByInput;
+    private clearInputValue;
+    private restorePreviousDate;
+    private createHourInputHandler;
+    private createMinuteInputHandler;
+    private createMouseDownHandler;
+    private createOnChangeHandler;
+    private invokeOriginalOnChange;
+    private isValidDate;
+    private validateAndRestoreIfNeeded;
+    private findFlatpickrInstanceIndexByInput;
+    private restoreDateToInstance;
+    private createOnReadyHandler;
+    private createOnDestroyHandler;
+    private convertDateOption;
+    private validateDate;
+    private checkDateViolations;
+    setDate(dates: string[]): void;
+    private formatDateForOption;
+    private parseDateWithMultipleFormats;
+    private formatMomentDate;
+    private calculatePeriod;
     private updateDateWithButton;
     private setMultipleDates;
     private updateButtonsByPeriod;
     private calculateDatesFromButton;
-    setDate(dates: string[]): void;
     private convertFlatpickrFormatToMoment;
     getDates(): string[];
 }

package/dist/types/src/components/date-picker/DatePicker.d.ts

@@ -10,6 +10,13 @@ export type DatePickerProps = {
     placeholder?: string;
     isEndDate?: boolean;
     onChangeDate: (date: string) => void;
+    onValidationError?: (error: {
+        date: Date;
+        minDate?: any;
+        maxDate?: any;
+        violations: Array<'minDate' | 'maxDate'>;
+        previousDate?: Date;
+    }) => void;
 } & Omit<DateTimePickerProps, 'size' | 'options' | 'value'>;
 export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<DateTimePickerHandle>>;
 //# sourceMappingURL=DatePicker.d.ts.map

package/dist/types/src/components/index.d.ts

@@ -28,4 +28,5 @@ export * from './tab';
 export * from './tag';
 export * from './toggle';
 export * from './tooltip';
+export * from './image-file-input';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/modal/Modal.d.ts

@@ -58,8 +58,8 @@ export type ModalHeaderProps = {
         theme: FeaturedIconTheme;
     };
     align?: ModalHeaderAlign;
-    title?: string;
-    subtitle?: string;
+    title?: string | ReactNode;
+    subtitle?: string | ReactNode;
     showDivider?: boolean;
     hideCloseButton?: boolean;
 };

package/dist/ui-admin/assets/styles/style.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 :root {
   --primary-red-50: #fffafd;
   --primary-red-100: #ffeaee;
@@ -1863,12 +1864,14 @@ button {
   line-height: var(--line-heights-sm);
   color: var(--gray-700);
   word-break: break-all;
+  white-space: pre-line;
 }
 .ncua-modal__title .ncua-modal__title-subtitle {
   font-weight: var(--font-weights-commerce-sans-0);
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
   color: var(--gray-400);
+  white-space: pre-line;
 }
 
 .ncua-modal__close-button {
@@ -4908,12 +4911,8 @@ button {
   bottom: 0;
   left: 0;
 }
-.ncua-horizontal-tab--button-primary .swiper-slide:first-child, .ncua-horizontal-tab--button-white .swiper-slide:first-child {
-  padding-left: 4px;
-}
-.ncua-horizontal-tab--button-primary .swiper-slide:last-child, .ncua-horizontal-tab--button-white .swiper-slide:last-child {
-  padding-right: 4px;
-  margin-right: 0;
+.ncua-horizontal-tab--button-primary .swiper-wrapper, .ncua-horizontal-tab--button-white .swiper-wrapper {
+  padding: 0 4px;
 }
 .ncua-horizontal-tab--button-primary .ncua-tab-button:hover, .ncua-horizontal-tab--button-primary .ncua-tab-button.is-active {
   background-color: var(--gray-50);
@@ -5228,10 +5227,19 @@ button {
 }
 .ncua-file-input__hint-list {
   margin: 0;
-  list-style: disc;
+  padding: 0;
   color: var(--gray-400);
+}
+.ncua-file-input__hint-item {
+  position: relative;
   padding-left: 16px;
 }
+.ncua-file-input__hint-item::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  top: 0;
+}
 .ncua-file-input--xs {
   font-size: var(--font-size-xxs);
   line-height: var(--line-heights-xxs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",