@ncds/ui-admin 1.7.0 → 1.8.1

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

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RangeDatePicker = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _moment = _interopRequireDefault(require("moment"));
+var _react = require("react");
+var _DatePicker = require("../date-picker/DatePicker");
+var _utils = require("../date-picker/utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    startDateOptions,
+    endDateOptions,
+    validationOption,
+    onDateValidation,
+    size = 'xs'
+  } = _ref;
+  const getOverlapResult = (0, _react.useCallback)(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]);
+  const getSettingNewDate = (0, _react.useCallback)((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]);
+  const changeSettingDateAndAlert = (0, _react.useCallback)(function (type) {
+    let isOverPeriod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!validationOption?.setting) {
+      const result = getOverlapResult(type);
+      if (result) {
+        onDateValidation?.({
+          type,
+          errorType: 'overlap',
+          ...result
+        });
+      }
+      return;
+    }
+    const {
+      unit,
+      period
+    } = validationOption.setting;
+    const newDate = getSettingNewDate(type, isOverPeriod, unit, period);
+    if (newDate) {
+      onDateValidation?.({
+        type,
+        errorType: isOverPeriod ? 'period' : 'overlap',
+        newDate,
+        currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
+      });
+    }
+  }, [startDateOptions, endDateOptions, validationOption, onDateValidation, getOverlapResult, getSettingNewDate]);
+  (0, _react.useEffect)(() => {
+    const isOverDate = (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    if (isOverDate) {
+      changeSettingDateAndAlert('start');
+      return;
+    }
+    if (!validationOption?.setting) {
+      return;
+    }
+    const {
+      unit,
+      period
+    } = validationOption.setting;
+    const isValidPeriod = (0, _moment.default)(startDateOptions.currentDate).isSameOrAfter((0, _moment.default)(endDateOptions.currentDate).subtract(period, unit));
+    if (isValidPeriod) {
+      onDateValidation?.({
+        type: 'start',
+        errorType: null,
+        newDate: startDateOptions.currentDate,
+        currentDate: startDateOptions.currentDate
+      });
+    } else {
+      changeSettingDateAndAlert('start', true);
+    }
+  }, [startDateOptions.currentDate]);
+  (0, _react.useEffect)(() => {
+    const isNotTodayEndDate = !(0, _moment.default)(endDateOptions.currentDate).isSame((0, _moment.default)(), 'day');
+    if (!validationOption?.setting || !isNotTodayEndDate) {
+      return;
+    }
+    const isOverDate = (0, _moment.default)(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
+    if (isOverDate) {
+      changeSettingDateAndAlert('end');
+      return;
+    }
+    const {
+      unit,
+      period
+    } = validationOption.setting;
+    const isValidPeriod = (0, _moment.default)(endDateOptions.currentDate).isSameOrBefore((0, _moment.default)(startDateOptions.currentDate).add(period, unit));
+    if (isValidPeriod) {
+      onDateValidation?.({
+        type: 'end',
+        errorType: null,
+        newDate: endDateOptions.currentDate,
+        currentDate: endDateOptions.currentDate
+      });
+    } else {
+      changeSettingDateAndAlert('end', true);
+    }
+  }, [endDateOptions.currentDate]);
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: "ncua-range-date-picker",
+    ref: ref || undefined,
+    children: [(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, {
+      ...startDateOptions,
+      ref: undefined,
+      size: size
+    }), "~", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, {
+      isEndDate: true,
+      ...endDateOptions,
+      ref: undefined,
+      size: size
+    })]
+  });
+});
+RangeDatePicker.displayName = 'RangeDatePicker';

package/dist/cjs/src/components/range-date-picker/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _RangeDatePicker = require("./RangeDatePicker");
+Object.keys(_RangeDatePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RangeDatePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RangeDatePicker[key];
+    }
+  });
+});

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

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _RangeDatePicker = require("../range-date-picker/RangeDatePicker");
+const RangeDatePickerWithButtons = _ref => {
+  let {
+    useYesterdayAsEndDate = false,
+    size = 'xs',
+    currentButtonId,
+    setCurrentButtonId,
+    startDateOptions,
+    endDateOptions,
+    validationOption,
+    periodKeys,
+    periodItems,
+    onDateValidation
+  } = _ref;
+  const items = periodItems ?? _datePicker.PERIOD_ITEM;
+  const setCalculatedDate = () => {
+    const currentPeriodItem = items[currentButtonId];
+    if (!currentPeriodItem) {
+      return;
+    }
+    if (currentButtonId === 'ENTIRE') {
+      startDateOptions.onChangeDate('');
+      endDateOptions.onChangeDate('');
+      return;
+    }
+    const startDate = (0, _datePicker2.getDateFormat)((0, _datePicker2.getSubtractDate)({
+      period: currentPeriodItem.period,
+      unit: currentPeriodItem.unit
+    }));
+    startDateOptions.onChangeDate(startDate);
+    const endDate = useYesterdayAsEndDate ? (0, _datePicker2.getDateFormat)((0, _datePicker2.getSubtractDate)({
+      period: 1,
+      unit: 'days'
+    })) : (0, _datePicker2.getDateFormat)();
+    endDateOptions.onChangeDate(endDate);
+  };
+  const handleOnChangeDate = (date, type) => {
+    type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);
+    currentButtonId && setCurrentButtonId('NONE');
+  };
+  (0, _react.useEffect)(() => {
+    if (currentButtonId !== 'NONE') {
+      setCalculatedDate();
+    }
+  }, [currentButtonId]);
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: "ncua-range-date-picker-with-buttons",
+    children: [(0, _jsxRuntime.jsx)(_buttonGroup.ButtonGroup, {
+      size: size,
+      children: periodKeys.map(key => (0, _jsxRuntime.jsx)(_buttonGroup.ButtonGroup.Item, {
+        isCurrent: currentButtonId === key,
+        label: items[key].text,
+        onClick: () => setCurrentButtonId(key)
+      }, key))
+    }), (0, _jsxRuntime.jsx)(_RangeDatePicker.RangeDatePicker, {
+      startDateOptions: {
+        ...startDateOptions,
+        onChangeDate: date => handleOnChangeDate(date, 'START')
+      },
+      endDateOptions: {
+        ...endDateOptions,
+        onChangeDate: date => handleOnChangeDate(date, 'END')
+      },
+      validationOption: validationOption,
+      onDateValidation: onDateValidation,
+      size: size
+    })]
+  });
+};
+exports.RangeDatePickerWithButtons = RangeDatePickerWithButtons;

package/dist/cjs/src/components/range-date-picker-with-buttons/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _RangeDatePickerWithButtons = require("./RangeDatePickerWithButtons");
+Object.keys(_RangeDatePickerWithButtons).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RangeDatePickerWithButtons[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RangeDatePickerWithButtons[key];
+    }
+  });
+});

package/dist/cjs/src/components/select/Select.js

@@ -9,79 +9,52 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _HintText = require("../shared/hintText/HintText");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var __assign = void 0 && (void 0).__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
-  var placeholder = _a.placeholder,
-    _b = _a.disabledPlaceholder,
-    disabledPlaceholder = _b === void 0 ? false : _b,
-    id = _a.id,
-    className = _a.className,
-    hintText = _a.hintText,
-    children = _a.children,
-    _c = _a.size,
-    size = _c === void 0 ? 'md' : _c,
-    _d = _a.type,
-    type = _d === void 0 ? 'default' : _d,
-    _e = _a.destructive,
-    destructive = _e === void 0 ? false : _e,
-    value = _a.value,
-    optionItems = _a.optionItems,
-    register = _a.register,
-    _f = _a.disabled,
-    disabled = _f === void 0 ? false : _f,
-    props = __rest(_a, ["placeholder", "disabledPlaceholder", "id", "className", "hintText", "children", "size", "type", "destructive", "value", "optionItems", "register", "disabled"]);
-  return (0, _jsxRuntime.jsxs)("span", __assign({
+const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    placeholder,
+    disabledPlaceholder = false,
+    id,
+    className,
+    hintText,
+    children,
+    size = 'xs',
+    type = 'default',
+    destructive = false,
+    value,
+    optionItems,
+    register,
+    disabled = false,
+    ...props
+  } = _ref;
+  return (0, _jsxRuntime.jsxs)("span", {
     className: (0, _classnames.default)('ncua-select', {
       destructive: destructive,
       'ncua-select--simple': type === 'simple'
-    }, className, "ncua-select--".concat(size))
-  }, {
-    children: [(0, _jsxRuntime.jsx)("span", __assign({
-      className: "ncua-select__content"
-    }, {
-      children: (0, _jsxRuntime.jsxs)("select", __assign({
+    }, className, `ncua-select--${size}`),
+    children: [(0, _jsxRuntime.jsx)("span", {
+      className: "ncua-select__content",
+      children: (0, _jsxRuntime.jsxs)("select", {
         value: value,
         ref: ref,
         id: id,
         className: (0, _classnames.default)('ncua-select__tag', className),
-        disabled: disabled
-      }, register, props, {
-        children: [placeholder && (0, _jsxRuntime.jsx)("option", __assign({
+        disabled: disabled,
+        ...register,
+        ...props,
+        children: [placeholder && (0, _jsxRuntime.jsx)("option", {
           value: "",
           selected: true,
-          disabled: disabledPlaceholder
-        }, {
+          disabled: disabledPlaceholder,
           children: placeholder
-        })), optionItems === null || optionItems === void 0 ? void 0 : optionItems.map(function (item) {
-          return (0, _jsxRuntime.jsx)("option", __assign({
-            value: item.id
-          }, {
-            children: item.label
-          }), item.id);
-        }), children]
-      }))
-    })), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, __assign({
+        }), optionItems?.map(item => (0, _jsxRuntime.jsx)("option", {
+          value: item.id,
+          children: item.label
+        }, item.id)), children]
+      })
+    }), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, {
       destructive: destructive,
-      className: "ncua-hint-text"
-    }, {
+      className: "ncua-hint-text",
       children: hintText
-    }))]
-  }));
+    })]
+  });
 });

package/dist/cjs/src/components/select-box/SelectBox.js

@@ -0,0 +1,260 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectBox = exports.DEFAULT_MAX_HEIGHT = void 0;
+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");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ICON_SIZE_XS = 14;
+const ICON_SIZE_SM = 16;
+const DEFAULT_MAX_HEIGHT = exports.DEFAULT_MAX_HEIGHT = 275;
+function computeNewValue(option, value, multiple) {
+  if (multiple) {
+    const currentValues = Array.isArray(value) ? value : [];
+    if (currentValues.includes(option.id)) {
+      return currentValues.filter(v => v !== option.id);
+    }
+    return [...currentValues, option.id];
+  }
+  return option.id;
+}
+function notifyRegister(register, newValue, multiple) {
+  if (!register?.onChange) return;
+  register.onChange({
+    target: {
+      value: multiple ? JSON.stringify(newValue) : newValue,
+      name: register.name
+    }
+  });
+}
+function DisplayValue(_ref) {
+  let {
+    displayValue
+  } = _ref;
+  if (typeof displayValue === 'string') {
+    return (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-selectbox__value-text",
+      children: displayValue
+    });
+  }
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: "ncua-selectbox__value-container",
+    children: [displayValue.icon && (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-selectbox__value-icon",
+      children: (0, _jsxRuntime.jsx)(displayValue.icon, {
+        width: 16,
+        height: 16
+      })
+    }), (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-selectbox__value-text",
+      children: displayValue.label
+    })]
+  });
+}
+const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    placeholder = '선택하세요',
+    disabledPlaceholder = false,
+    hintText,
+    size = 'xs',
+    type = 'default',
+    autoWidth = true,
+    destructive = false,
+    value,
+    optionItems = [],
+    disabled = false,
+    maxHeight = DEFAULT_MAX_HEIGHT,
+    multiple = false,
+    align = 'left',
+    id,
+    className,
+    children,
+    register,
+    onChange,
+    onEdit,
+    ...props
+  } = _ref2;
+  const internalRef = (0, _react.useRef)(null);
+  const dropdownRef = (0, _react.useRef)(null);
+  const [selectedTags, setSelectedTags] = (0, _react.useState)([]);
+  const selectedOption = (0, _react.useMemo)(() => {
+    if (multiple) return null;
+    return optionItems.find(option => option.id === value);
+  }, [optionItems, value, multiple]);
+  const displayValue = (0, _react.useMemo)(() => {
+    if (multiple) {
+      return placeholder;
+    }
+    return selectedOption ? selectedOption : placeholder;
+  }, [multiple, selectedOption, placeholder]);
+  const handleOptionSelect = option => {
+    if (disabled) return;
+    const newValue = computeNewValue(option, value, multiple);
+    onChange?.(newValue);
+    notifyRegister(register, newValue, multiple);
+  };
+  const {
+    isOpen,
+    direction: dropdownDirection,
+    focusedIndex,
+    toggleDropdown,
+    closeDropdown,
+    handleKeyDown,
+    handleOptionSelect: handleDropdownSelect,
+    handleMouseMove,
+    isKeyboardNavigation,
+    setFocusedIndex
+  } = (0, _dropdown.useDropdown)({
+    triggerRef: internalRef,
+    dropdownRef,
+    maxHeight,
+    itemCount: optionItems.length,
+    optionItems,
+    disabled,
+    multiple,
+    onSelect: handleOptionSelect
+  });
+  const activeDescendantId = (0, _react.useMemo)(() => {
+    if (!isOpen || focusedIndex < 0 || focusedIndex >= optionItems.length) {
+      return undefined;
+    }
+    const focusedOption = optionItems[focusedIndex];
+    return `selectbox-options-${id || 'default'}-${focusedOption.id}`;
+  }, [isOpen, focusedIndex, optionItems, id]);
+  const handleOptionHover = (0, _react.useCallback)(index => {
+    handleMouseMove();
+    setFocusedIndex(index);
+  }, [handleMouseMove, setFocusedIndex]);
+  // Multiple select 관련 로직
+  const currentSelectedValues = multiple && Array.isArray(value) ? value : [];
+  const {
+    buttonText: selectAllButtonText,
+    toggleSelectAll,
+    getSelectedTagsData,
+    removeTag
+  } = (0, _multiSelect.useMultiSelect)(currentSelectedValues, optionItems);
+  const handleSelectAll = () => {
+    if (!multiple || !onChange) return;
+    const newSelectedValues = toggleSelectAll();
+    onChange(newSelectedValues);
+  };
+  const handleEdit = () => {
+    onEdit?.();
+  };
+  const handleComplete = () => {
+    if (multiple) {
+      const tags = getSelectedTagsData();
+      setSelectedTags(tags);
+    }
+    closeDropdown();
+  };
+  const handleRemoveTag = tagId => {
+    if (!onChange) return;
+    if (multiple) {
+      const newSelectedValues = removeTag(tagId);
+      onChange(newSelectedValues);
+      setSelectedTags(prev => prev.filter(tag => tag.id !== tagId));
+    }
+  };
+  (0, _dropdown.useScrollLock)(isOpen, dropdownRef);
+  (0, _react.useLayoutEffect)(() => {
+    if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
+      const dropdownWidth = dropdownRef.current.offsetWidth;
+      internalRef.current.style.width = `${dropdownWidth}px`;
+    }
+  }, [autoWidth, isOpen, optionItems]);
+  (0, _react.useImperativeHandle)(ref, () => internalRef.current, []);
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsxs)("div", {
+      ref: internalRef,
+      className: (0, _classnames.default)('ncua-selectbox', `ncua-selectbox--${size}`, {
+        'ncua-selectbox--open': isOpen,
+        'ncua-selectbox--disabled': disabled,
+        'ncua-selectbox--simple': type === 'simple',
+        'ncua-selectbox--multiple': multiple,
+        destructive: destructive
+      }, className),
+      ...props,
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)('ncua-selectbox__content'),
+        onClick: toggleDropdown,
+        onKeyDown: handleKeyDown,
+        tabIndex: disabled ? -1 : 0,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": `selectbox-options-${id || 'default'}`,
+        "aria-disabled": disabled,
+        "aria-label": selectedOption ? selectedOption.label : placeholder,
+        "aria-activedescendant": activeDescendantId,
+        children: [(0, _jsxRuntime.jsxs)("div", {
+          className: "ncua-selectbox__content-inner",
+          children: [(0, _jsxRuntime.jsx)("div", {
+            className: "ncua-selectbox__value",
+            children: (0, _jsxRuntime.jsx)(DisplayValue, {
+              displayValue: displayValue
+            })
+          }), (0, _jsxRuntime.jsx)(_uiAdminIcon.ChevronDown, {
+            width: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM,
+            height: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM,
+            color: disabled ? _color.COLOR.gray300 : _color.COLOR.gray500,
+            className: (0, _classnames.default)('ncua-selectbox__arrow', {
+              'ncua-selectbox__arrow--up': isOpen
+            })
+          })]
+        }), (0, _jsxRuntime.jsx)(_selectDropdown.SelectDropdown, {
+          ref: dropdownRef,
+          isOpen: isOpen,
+          direction: dropdownDirection,
+          size: size,
+          options: optionItems,
+          value: value,
+          focusedIndex: focusedIndex,
+          maxHeight: maxHeight,
+          listboxId: `selectbox-options-${id || 'default'}`,
+          multiple: multiple,
+          showFooterButtons: multiple,
+          selectAllButtonText: selectAllButtonText,
+          componentType: "selectbox",
+          isKeyboardNavigation: isKeyboardNavigation,
+          activeDescendantId: activeDescendantId,
+          align: align,
+          onOptionSelect: handleDropdownSelect,
+          onMouseMove: handleMouseMove,
+          onOptionHover: handleOptionHover,
+          onSelectAll: handleSelectAll,
+          onEdit: handleEdit,
+          onComplete: handleComplete,
+          children: children
+        })]
+      }), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, {
+        destructive: destructive,
+        className: "ncua-hint-text",
+        children: hintText
+      }), register && (0, _jsxRuntime.jsx)("input", {
+        type: "hidden",
+        ...register,
+        value: multiple ? JSON.stringify(value || []) : String(value || '')
+      })]
+    }), selectedTags.length > 0 && (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-selectbox__tags",
+      children: selectedTags.map(tag => (0, _jsxRuntime.jsx)(_tag.Tag, {
+        text: tag.label,
+        size: "sm",
+        close: true,
+        onButtonClick: () => handleRemoveTag(tag.id)
+      }, tag.id))
+    })]
+  });
+});
+SelectBox.displayName = 'SelectBox';