@ncds/ui-admin 1.8.2 → 1.8.3

package/dist/esm/src/components/{date-picker → forms-and-input/date-picker}/DatePicker.js

@@ -4,14 +4,14 @@ import { Korean } from 'flatpickr/dist/l10n/ko';
 import moment from 'moment';
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
 import Flatpickr from 'react-flatpickr';
-import { formatDateInput, formatHourInput, formatMinuteInput } from '../../utils/date-picker';
+import { formatDateInput, formatHourInput, formatMinuteInput } from '../../../utils/date-picker';
 import { CustomInput } from './CustomInput';
 // ══════════════════════════════════════════
 // 유틸리티 함수
 // ══════════════════════════════════════════
 const isValidDate = dateString => {
   const date = new Date(dateString);
-  return date instanceof Date && !isNaN(date.getTime());
+  return date instanceof Date && !Number.isNaN(date.getTime());
 };
 /** input의 스크롤 가능한 부모 요소들을 수집 */
 const collectScrollParents = element => {
@@ -38,11 +38,11 @@ const getOpenCalendar = (instance, input, isPortal) => {
 };
 /** selectedDate가 유효하지 않으면 이전 날짜로 복원하고 true 반환 */
 const restoreIfInvalidDate = (date, instance) => {
-  if (date && date instanceof Date && !isNaN(date.getTime())) {
+  if (date && date instanceof Date && !Number.isNaN(date.getTime())) {
     return false;
   }
   const previousDate = instance._previousDateBeforeInput;
-  if (previousDate && previousDate instanceof Date && !isNaN(previousDate.getTime())) {
+  if (previousDate && previousDate instanceof Date && !Number.isNaN(previousDate.getTime())) {
     instance.selectedDates = [previousDate];
     instance.setDate(previousDate, false);
   } else if (instance.input) {
@@ -273,7 +273,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   const restorePreviousDate = (target, instance) => {
     if (instance.selectedDates.length > 0) {
       const prevDate = instance.selectedDates[0];
-      if (prevDate instanceof Date && !isNaN(prevDate.getTime())) {
+      if (prevDate instanceof Date && !Number.isNaN(prevDate.getTime())) {
         const 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);
@@ -297,7 +297,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     const violations = checkDateViolations(selectedDate, minDate, maxDate);
     if (violations.length > 0 && onValidationErrorRef.current) {
       const prevDate = instance?.selectedDates?.[0];
-      const validPrevDate = prevDate instanceof Date && !isNaN(prevDate.getTime()) ? prevDate : undefined;
+      const validPrevDate = prevDate instanceof Date && !Number.isNaN(prevDate.getTime()) ? prevDate : undefined;
       onValidationErrorRef.current({
         date: selectedDate,
         minDate,
@@ -310,7 +310,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     instance._previousDateBeforeInput = selectedDate;
     const formattedDate = formatDateInput(dateStr);
     isValidDate(formattedDate) ? onChangeDateRef.current(formattedDate) : onChangeDateRef.current(dateStr);
-  }, []);
+  }, [checkDateViolations, restorePreviousDate]);
   /** input에 직접 타이핑할 때 날짜 형식 자동 변환 및 유효성 검사 */
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const onInputHandler = useCallback(e => {
@@ -344,7 +344,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     if (violations.length > 0) {
       return;
     }
-  }, []);
+  }, [checkDateViolations, restorePreviousDate]);
   /** 시간 입력 필드 - 시(hour) 값 포맷팅 (0~23) */
   const onHourInputHandler = useCallback(e => {
     const target = e.target;
@@ -369,7 +369,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   // 주의: JSON.stringify는 함수를 무시하고 Date를 문자열로 변환하므로,
   // datePickerOptions에 함수나 Date 객체를 넘기면 변경 감지가 누락될 수 있음
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const datePickerOptionsKey = JSON.stringify(datePickerOptions);
+  const _datePickerOptionsKey = JSON.stringify(datePickerOptions);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const options = useMemo(() => ({
     mode: 'single',
@@ -384,7 +384,7 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     /** flatpickr 기본 포맷 대신 moment를 사용하여 한국어 날짜 형식 지원 */
     formatDate: (date, format, _locale) => {
       try {
-        if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+        if (!date || !(date instanceof Date) || Number.isNaN(date.getTime())) {
           return '';
         }
         const momentDate = moment(date);
@@ -449,8 +449,10 @@ export const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       cleanupTimeInputHandlers(instance, input, portal, onHourInputHandler, onMinuteInputHandler);
       cleanupPositioning(instance);
     },
-    ...datePickerOptions
-  }), [portal, size, hasTimeOption, datePickerOptionsKey, onChangeDateHandler, onInputHandler, onHourInputHandler, onMinuteInputHandler]);
+    ...datePickerOptions,
+    // 어드민 환경 — 모바일에서 native picker 로 fallback 되지 않도록 강제 (datePickerOptions 로 override 불가)
+    disableMobile: true
+  }), [portal, onChangeDateHandler, onInputHandler, onHourInputHandler, onMinuteInputHandler, datePickerOptions, getPortalContainer]);
   const iconName = hasTimeOption && datePickerOptions && Object.hasOwn(datePickerOptions, 'noCalendar') ? 'clock' : 'calendar';
   // ──────────────────────────────────────────────
   // 시간 옵션에 따른 currentDate 전처리

package/dist/esm/src/components/{file-input → forms-and-input/file-input}/FileInput.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { Button } from '../button';
-import { HintText, Label } from '../shared';
-import { Tag } from '../tag/Tag';
+import { Button } from '../../action/button';
+import { Tag } from '../../feedback-and-status/tag/Tag';
+import { HintText, Label } from '../../shared';
 export var FileInputErrorType;
 (function (FileInputErrorType) {
   FileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";

package/dist/esm/src/components/{image-file-input → forms-and-input/image-file-input}/ImageFileInput.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Button } from '../button';
+import { Button } from '../../action/button';
+import { Tooltip } from '../../overlays/tooltip';
+import { HintText, Label } from '../../shared';
 import { FileInputErrorType as ImageFileInputErrorType } from '../file-input/FileInput';
-import { HintText, Label } from '../shared';
-import { Tooltip } from '../tooltip';
 import { ImagePreview } from './components/ImagePreview';
 export const ImageFileInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/dist/esm/src/components/{image-file-input → forms-and-input/image-file-input}/components/ImagePreview.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Trash03 } from '@ncds/ui-admin-icon';
-import { Button } from '../../button';
+import { Button } from '../../../action/button';
 export const ImagePreview = _ref => {
   let {
     file,

package/dist/esm/src/components/{input-base → forms-and-input/input-base}/InputBase.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckCircle, HelpCircle, InfoCircle, X } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { COLOR } from '../../../constant/color';
-import { HintText } from '../shared/hintText/HintText';
-import { Label } from '../shared/label/Label';
+import { COLOR } from '../../../../constant/color';
+import { HintText } from '../../shared/hintText/HintText';
+import { Label } from '../../shared/label/Label';
 const validationSvgSize = {
   xs: 14,
   sm: 16

package/dist/esm/src/components/{number-input → forms-and-input/number-input}/NumberInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useRef } from 'react';
-import { useMergeRefs } from '../../hooks';
-import { ButtonStepper } from '../button';
+import { useMergeRefs } from '../../../hooks';
+import { ButtonStepper } from '../../action/button';
 import { InputBase } from '../input-base/InputBase';
 export const NumberInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/dist/esm/src/components/{range-date-picker-with-buttons → forms-and-input/range-date-picker-with-buttons}/RangeDatePickerWithButtons.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { PERIOD_ITEM } from '../../constant/date-picker';
-import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
-import { ButtonGroup } from '../button-group';
+import { PERIOD_ITEM } from '../../../constant/date-picker';
+import { getDateFormat, getSubtractDate } from '../../../utils/date-picker';
+import { ButtonGroup } from '../../action/button-group';
 import { RangeDatePicker } from '../range-date-picker/RangeDatePicker';
 const RangeDatePickerWithButtons = _ref => {
   let {

package/dist/esm/src/components/{select → forms-and-input/select}/Select.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
-import { HintText } from '../shared/hintText/HintText';
+import { HintText } from '../../shared/hintText/HintText';
 export const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     placeholder,

package/dist/esm/src/components/{select-box → forms-and-input/select-box}/SelectBox.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronDown } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { COLOR } from '../../../constant/color';
-import { useDropdown, useScrollLock } from '../../hooks/dropdown';
-import { useMultiSelect } from '../../utils/dropdown/multiSelect';
-import { SelectDropdown } from '../select-dropdown';
-import { HintText } from '../shared/hintText/HintText';
-import { Tag } from '../tag';
+import { COLOR } from '../../../../constant/color';
+import { useDropdown, useScrollLock } from '../../../hooks/dropdown';
+import { useMultiSelect } from '../../../utils/dropdown/multiSelect';
+import { Tag } from '../../feedback-and-status/tag';
+import { SelectDropdown } from '../../select-dropdown';
+import { HintText } from '../../shared/hintText/HintText';
 const ICON_SIZE_XS = 14;
 const ICON_SIZE_SM = 16;
 const DEFAULT_MAX_HEIGHT = 275;

package/dist/esm/src/components/{slider → forms-and-input/slider}/Slider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { Slider as NcuaSlider } from '../../../assets/scripts/slider';
+import { Slider as NcuaSlider } from '../../../../assets/scripts/slider';
 export const Slider = _ref => {
   let {
     min = 0,

package/dist/esm/src/components/{textarea → forms-and-input/textarea}/Textarea.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { HintText } from '../shared/hintText/HintText';
-import { Label } from '../shared/label/Label';
+import { HintText } from '../../shared/hintText/HintText';
+import { Label } from '../../shared/label/Label';
 export const Textarea = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     className,

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

@@ -1,44 +1,53 @@
-export * from './badge';
-export * from './badge-group';
-export * from './bread-crumb';
-export * from './button';
-export * from './button-group';
-export * from './carousel-arrow';
-export * from './carousel-number-group';
-export * from './checkbox';
-export * from './combo-box';
-export * from './data-grid';
-export * from './date-picker';
-export * from './divider';
-export * from './dot';
-export * from './dropdown';
-export * from './empty-state';
-export * from './featured-icon';
-export * from './file-input';
-export * from './horizontal-tab';
-export * from './image-file-input';
-export * from './input-base';
-export * from './modal';
-export * from './notification';
-export * from './number-input';
-export * from './pagination';
-export * from './password-input';
-export * from './progress-bar';
-export * from './progress-circle';
-export * from './radio';
-export * from './range-date-picker';
-export * from './range-date-picker-with-buttons';
-export * from './select';
-export * from './select-box';
+// Action
+export * from './action/button';
+export * from './action/button-group';
+// Data Display
+export * from './data-display/data-grid';
+export * from './data-display/table';
+// Feedback & Status
+export * from './feedback-and-status/badge';
+export * from './feedback-and-status/badge-group';
+export * from './feedback-and-status/carousel-arrow';
+export * from './feedback-and-status/carousel-number-group';
+export * from './feedback-and-status/empty-state';
+export * from './feedback-and-status/progress-bar';
+export * from './feedback-and-status/progress-circle';
+export * from './feedback-and-status/spinner';
+export * from './feedback-and-status/tag';
+// Forms and Input
+export * from './forms-and-input/checkbox';
+export * from './forms-and-input/combo-box';
+export * from './forms-and-input/date-picker';
+export * from './forms-and-input/file-input';
+export * from './forms-and-input/image-file-input';
+export * from './forms-and-input/input-base';
+export * from './forms-and-input/number-input';
+export * from './forms-and-input/password-input';
+export * from './forms-and-input/radio';
+export * from './forms-and-input/range-date-picker';
+export * from './forms-and-input/range-date-picker-with-buttons';
+export * from './forms-and-input/select';
+export * from './forms-and-input/select-box';
+export * from './forms-and-input/slider';
+export * from './forms-and-input/switch';
+export * from './forms-and-input/textarea';
+export * from './forms-and-input/toggle';
+// Image and Icons
+export * from './image-and-icons/dot';
+export * from './image-and-icons/featured-icon';
+// Layout
+export * from './layout/divider';
+// Navigation
+export * from './navigation/bread-crumb';
+export * from './navigation/horizontal-tab';
+export * from './navigation/pagination';
+export * from './navigation/vertical-tab';
+// Overlays
+export * from './overlays/dropdown';
+export * from './overlays/modal';
+export * from './overlays/notification';
+export * from './overlays/tooltip';
+// Shared
 export * from './select-dropdown';
 export * from './shared';
-export * from './slider';
-export * from './spinner';
-export * from './switch';
-export * from './tab';
-export * from './table';
-export * from './tag';
-export * from './textarea';
-export * from './toggle';
-export * from './tooltip';
-export * from './vertical-tab';
+export * from './tab';

package/dist/esm/src/components/{horizontal-tab → navigation/horizontal-tab}/HorizontalTab.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { uniqueId } from 'lodash-es';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { TabButton } from '../tab/TabButton';
+import { TabButton } from '../../tab/TabButton';
 const UNDERLINE_GAP = 16;
 const DEFAULT_GAP = 8;
 const HorizontalTab = _ref => {

package/dist/esm/src/components/{pagination → navigation/pagination}/NavButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ArrowLeft, ArrowRight, ChevronLeft, ChevronLeftDouble, ChevronRight, ChevronRightDouble } from '@ncds/ui-admin-icon';
-import { Button } from '../button';
+import { Button } from '../../action/button';
 const ICON_SIZE_PC = 16;
 const ICON_SIZE_MOBILE = 20;
 const NAV_BUTTON_CONFIG = {

package/dist/esm/src/components/{vertical-tab → navigation/vertical-tab}/VerticalTab.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { Select } from '../select/Select';
-import { TabButton } from '../tab/TabButton';
+import { Select } from '../../forms-and-input/select/Select';
+import { TabButton } from '../../tab/TabButton';
 export const VerticalTab = _ref => {
   let {
     type = 'button-primary',