@ncds/ui-admin 1.8.2 → 1.8.4

package/dist/cjs/assets/scripts/slider.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Slider = void 0;
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const DEFAULT_STEP = 1;
+const PERCENT = 100;
 class Slider {
   constructor(element, options) {
     this.activeHandle = null;
@@ -46,17 +50,19 @@ class Slider {
       this.isDragging = false;
     };
     this.element = element;
-    this.options = Object.assign({
-      min: 0,
-      max: 100,
-      step: 1,
-      value: 0,
-      disabled: false
-    }, options);
+    // 화이트리스트 기반 옵션 복사. SliderOptions에 정의된 키만 받아들여
+    // __proto__, constructor, prototype 같은 위험 키가 외부 입력으로 들어와도
+    // Object.prototype을 오염시킬 수 없다 (CWE-1321 Prototype Pollution 차단).
+    this.options = {
+      min: Number(options.min ?? DEFAULT_MIN),
+      max: Number(options.max ?? DEFAULT_MAX),
+      step: Number(options.step ?? DEFAULT_STEP),
+      value: options.value ?? DEFAULT_MIN,
+      onChange: options.onChange,
+      labelPosition: options.labelPosition,
+      disabled: options.disabled ?? false
+    };
     this.value = this.options.value;
-    this.options.min = Number(this.options.min);
-    this.options.max = Number(this.options.max);
-    this.options.step = Number(this.options.step);
     this.init();
   }
   init() {
@@ -110,19 +116,20 @@ class Slider {
     });
     if (this.options.labelPosition === 'bottom') {
       const label = document.createElement('div');
-      label.className = `ncua-slider__label`;
+      label.className = 'ncua-slider__label';
       label.textContent = `${value}%`;
       handle.appendChild(label);
     }
     if (this.options.labelPosition === 'top-floating') {
       const label = document.createElement('div');
-      label.className = `ncua-slider__label ncua-slider__label--tooltip`;
+      label.className = 'ncua-slider__label ncua-slider__label--tooltip';
       label.textContent = `${value}%`;
       handle.appendChild(label);
     }
     this.element.appendChild(handle);
     this.handleElements[index] = handle;
   }
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 단일/range 분기와 라벨/progress 업데이트를 한 함수에 묶는 기존 구조 유지. 분리 리팩토링은 별도 작업 범위.
   updateHandlePositions() {
     if (Array.isArray(this.value)) {
       // Range slider
@@ -180,14 +187,15 @@ class Slider {
     }
   }
   getPositionFromValue(value) {
-    return (value - this.options.min) / (this.options.max - this.options.min) * 100;
+    return (value - this.options.min) / (this.options.max - this.options.min) * PERCENT;
   }
   getValueFromPosition(position) {
-    const percentage = Math.min(Math.max(position, 0), 100);
-    const exactValue = this.options.min + percentage / 100 * (this.options.max - this.options.min);
+    const percentage = Math.min(Math.max(position, 0), PERCENT);
+    const exactValue = this.options.min + percentage / PERCENT * (this.options.max - this.options.min);
     const steppedValue = Math.round(exactValue / this.options.step) * this.options.step;
     return Math.min(Math.max(steppedValue, this.options.min), this.options.max);
   }
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 핸들/트랙 클릭 분기와 가까운 핸들 결정 로직을 한 함수에 묶는 기존 구조 유지. 분리 리팩토링은 별도 작업 범위.
   handleInteractionStart(clientX, target) {
     // 슬라이더 영역 내부를 클릭/터치한 경우
     if (target.closest('.ncua-slider')) {
@@ -199,12 +207,12 @@ class Slider {
         } else if (Array.isArray(this.value) && this.value[0] === this.value[1] && this.value[0] === this.options.min) {
           this.activeHandle = 1;
         } else {
-          this.activeHandle = parseInt(handleElement.dataset.index || '0', 10);
+          this.activeHandle = Number.parseInt(handleElement.dataset.index || '0', 10);
         }
       } else {
         // 슬라이더 트랙을 클릭/터치한 경우, 가장 가까운 핸들을 결정
         const rect = this.element.getBoundingClientRect();
-        const position = (clientX - rect.left) / rect.width * 100;
+        const position = (clientX - rect.left) / rect.width * PERCENT;
         if (Array.isArray(this.value)) {
           const [leftValue, rightValue] = this.value;
           const leftPosition = this.getPositionFromValue(leftValue);
@@ -229,7 +237,7 @@ class Slider {
   updateValueFromClientX(clientX) {
     if (!this.element || this.activeHandle === null) return;
     const rect = this.element.getBoundingClientRect();
-    const position = (clientX - rect.left) / rect.width * 100;
+    const position = (clientX - rect.left) / rect.width * PERCENT;
     const newValue = this.getValueFromPosition(position);
     const prevValue = this.value;
     if (Array.isArray(this.value)) {

package/dist/cjs/src/components/{button → action/button}/Button.js

@@ -7,8 +7,8 @@ exports.svgSize = exports.iconOnlySvgSize = exports.dotSize = exports.Button = v
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _color = require("../../../constant/color");
-var _dot = require("../dot");
+var _color = require("../../../../constant/color");
+var _dot = require("../../image-and-icons/dot");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const svgSize = exports.svgSize = {
   xxs: 12,

package/dist/cjs/src/components/{button-group → action/button-group}/ButtonGroup.js

@@ -7,8 +7,8 @@ exports.ButtonGroup = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
-var _color = require("../../../constant/color");
-var _dot = require("../dot");
+var _color = require("../../../../constant/color");
+var _dot = require("../../image-and-icons/dot");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const svgSize = {

package/dist/cjs/src/components/{badge → feedback-and-status/badge}/utils.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.sideSlotRender = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _color = require("../../../constant/color");
-var _Dot = require("../dot/Dot");
+var _color = require("../../../../constant/color");
+var _Dot = require("../../image-and-icons/dot/Dot");
 const DEFAULT_DOT_COLOR = 'neutral';
 const sideSlotRender = _ref => {
   let {

package/dist/cjs/src/components/{empty-state → feedback-and-status/empty-state}/EmptyState.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EmptyState = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _Button = require("../button/Button");
+var _Button = require("../../action/button/Button");
 const EmptyState = _ref => {
   let {
     title,

package/dist/cjs/src/components/{tag → feedback-and-status/tag}/Tag.js

@@ -8,8 +8,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _color = require("../../../constant/color");
-var _dot = require("../dot");
+var _color = require("../../../../constant/color");
+var _dot = require("../../image-and-icons/dot");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MARGIN = 10;
 const DEFAULT_TOOLTIP_WIDTH = 200;

package/dist/cjs/src/components/{combo-box → forms-and-input/combo-box}/ComboBox.js

@@ -8,13 +8,13 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _dropdown = require("../../hooks/dropdown");
-var _multiSelect = require("../../utils/dropdown/multiSelect");
-var _button = require("../button");
+var _dropdown = require("../../../hooks/dropdown");
+var _multiSelect = require("../../../utils/dropdown/multiSelect");
+var _button = require("../../action/button");
+var _tag = require("../../feedback-and-status/tag");
+var _selectDropdown = require("../../select-dropdown");
+var _HintText = require("../../shared/hintText/HintText");
 var _InputBase = require("../input-base/InputBase");
-var _selectDropdown = require("../select-dropdown");
-var _HintText = require("../shared/hintText/HintText");
-var _tag = require("../tag");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const defaultMaxHeight = exports.defaultMaxHeight = 275;
 const toggleMultiSelectValue = (currentValue, optionId) => {

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

@@ -10,7 +10,7 @@ var _ko = require("flatpickr/dist/l10n/ko");
 var _moment = _interopRequireDefault(require("moment"));
 var _react = require("react");
 var _reactFlatpickr = _interopRequireDefault(require("react-flatpickr"));
-var _datePicker = require("../../utils/date-picker");
+var _datePicker = require("../../../utils/date-picker");
 var _CustomInput = require("./CustomInput");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // ══════════════════════════════════════════
@@ -18,7 +18,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 // ══════════════════════════════════════════
 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 => {
@@ -45,11 +45,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) {
@@ -280,7 +280,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
   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 = (0, _moment.default)(prevDate).format(momentFormat);
         instance.setDate(prevDate, false);
@@ -304,7 +304,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
     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,
@@ -317,7 +317,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
     instance._previousDateBeforeInput = selectedDate;
     const formattedDate = (0, _datePicker.formatDateInput)(dateStr);
     isValidDate(formattedDate) ? onChangeDateRef.current(formattedDate) : onChangeDateRef.current(dateStr);
-  }, []);
+  }, [checkDateViolations, restorePreviousDate]);
   /** input에 직접 타이핑할 때 날짜 형식 자동 변환 및 유효성 검사 */
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const onInputHandler = (0, _react.useCallback)(e => {
@@ -351,7 +351,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
     if (violations.length > 0) {
       return;
     }
-  }, []);
+  }, [checkDateViolations, restorePreviousDate]);
   /** 시간 입력 필드 - 시(hour) 값 포맷팅 (0~23) */
   const onHourInputHandler = (0, _react.useCallback)(e => {
     const target = e.target;
@@ -376,7 +376,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
   // 주의: 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 = (0, _react.useMemo)(() => ({
     mode: 'single',
@@ -391,7 +391,7 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
     /** 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 = (0, _moment.default)(date);
@@ -456,8 +456,10 @@ const DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_re
       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/cjs/src/components/{file-input → forms-and-input/file-input}/FileInput.js

@@ -8,9 +8,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _button = require("../button");
-var _shared = require("../shared");
-var _Tag = require("../tag/Tag");
+var _button = require("../../action/button");
+var _Tag = require("../../feedback-and-status/tag/Tag");
+var _shared = require("../../shared");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var FileInputErrorType;
 (function (FileInputErrorType) {

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

@@ -8,10 +8,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _button = require("../button");
+var _button = require("../../action/button");
+var _tooltip = require("../../overlays/tooltip");
+var _shared = require("../../shared");
 var _FileInput = require("../file-input/FileInput");
-var _shared = require("../shared");
-var _tooltip = require("../tooltip");
 var _ImagePreview = require("./components/ImagePreview");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ImagePreview = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
-var _button = require("../../button");
+var _button = require("../../../action/button");
 const ImagePreview = _ref => {
   let {
     file,

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

@@ -8,9 +8,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _color = require("../../../constant/color");
-var _HintText = require("../shared/hintText/HintText");
-var _Label = require("../shared/label/Label");
+var _color = require("../../../../constant/color");
+var _HintText = require("../../shared/hintText/HintText");
+var _Label = require("../../shared/label/Label");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const validationSvgSize = {
   xs: 14,

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.NumberInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
-var _hooks = require("../../hooks");
-var _button = require("../button");
+var _hooks = require("../../../hooks");
+var _button = require("../../action/button");
 var _InputBase = require("../input-base/InputBase");
 const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.RangeDatePickerWithButtons = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
-var _datePicker = require("../../constant/date-picker");
-var _datePicker2 = require("../../utils/date-picker");
-var _buttonGroup = require("../button-group");
+var _datePicker = require("../../../constant/date-picker");
+var _datePicker2 = require("../../../utils/date-picker");
+var _buttonGroup = require("../../action/button-group");
 var _RangeDatePicker = require("../range-date-picker/RangeDatePicker");
 const RangeDatePickerWithButtons = _ref => {
   let {

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

@@ -7,7 +7,7 @@ exports.Select = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _HintText = require("../shared/hintText/HintText");
+var _HintText = require("../../shared/hintText/HintText");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {

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

@@ -8,12 +8,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _color = require("../../../constant/color");
-var _dropdown = require("../../hooks/dropdown");
-var _multiSelect = require("../../utils/dropdown/multiSelect");
-var _selectDropdown = require("../select-dropdown");
-var _HintText = require("../shared/hintText/HintText");
-var _tag = require("../tag");
+var _color = require("../../../../constant/color");
+var _dropdown = require("../../../hooks/dropdown");
+var _multiSelect = require("../../../utils/dropdown/multiSelect");
+var _tag = require("../../feedback-and-status/tag");
+var _selectDropdown = require("../../select-dropdown");
+var _HintText = require("../../shared/hintText/HintText");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ICON_SIZE_XS = 14;
 const ICON_SIZE_SM = 16;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Slider = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
-var _slider = require("../../../assets/scripts/slider");
+var _slider = require("../../../../assets/scripts/slider");
 const Slider = _ref => {
   let {
     min = 0,

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

@@ -7,8 +7,8 @@ exports.Textarea = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _HintText = require("../shared/hintText/HintText");
-var _Label = require("../shared/label/Label");
+var _HintText = require("../../shared/hintText/HintText");
+var _Label = require("../../shared/label/Label");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {