@ncds/ui-admin 1.4.1 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/dist/cjs/assets/scripts/comboBox.js +18 -0
  2. package/dist/cjs/assets/scripts/datePicker.js +60 -7
  3. package/dist/cjs/assets/scripts/imageFileInput/ImageFileInputModel.js +6 -19
  4. package/dist/cjs/assets/scripts/notification/MessageNotification.js +146 -0
  5. package/dist/cjs/assets/scripts/notification/Notification.js +6 -3
  6. package/dist/cjs/assets/scripts/notification/const/classNames.js +14 -0
  7. package/dist/cjs/assets/scripts/notification/const/index.js +14 -1
  8. package/dist/cjs/assets/scripts/notification/const/sizes.js +7 -1
  9. package/dist/cjs/assets/scripts/notification/const/types.js +10 -1
  10. package/dist/cjs/assets/scripts/notification/index.js +8 -0
  11. package/dist/cjs/assets/scripts/notification/utils.js +3 -3
  12. package/dist/cjs/assets/scripts/utils/selectbox/DropdownModel.js +7 -0
  13. package/dist/cjs/assets/scripts/utils/selectbox/UnifiedSelectBox.js +77 -43
  14. package/dist/cjs/src/components/button/ButtonStepper.js +22 -0
  15. package/dist/cjs/src/components/button/index.js +22 -0
  16. package/dist/cjs/src/components/date-picker/DatePicker.js +45 -6
  17. package/dist/cjs/src/components/date-picker/RangeDatePicker.js +3 -1
  18. package/dist/cjs/src/components/date-picker/RangeDatePickerWithButtons.js +7 -3
  19. package/dist/cjs/src/components/input/InputBase.js +1 -1
  20. package/dist/cjs/src/components/input/NumberInput.js +130 -0
  21. package/dist/cjs/src/components/input/index.js +11 -0
  22. package/dist/cjs/src/components/notification/MessageNotification.js +137 -0
  23. package/dist/cjs/src/components/notification/Notification.js +23 -9
  24. package/dist/cjs/src/components/notification/index.js +11 -0
  25. package/dist/cjs/src/components/tooltip/Tooltip.js +32 -21
  26. package/dist/esm/assets/scripts/comboBox.js +18 -0
  27. package/dist/esm/assets/scripts/datePicker.js +60 -7
  28. package/dist/esm/assets/scripts/imageFileInput/ImageFileInputModel.js +6 -19
  29. package/dist/esm/assets/scripts/notification/MessageNotification.js +141 -0
  30. package/dist/esm/assets/scripts/notification/Notification.js +6 -3
  31. package/dist/esm/assets/scripts/notification/const/classNames.js +14 -0
  32. package/dist/esm/assets/scripts/notification/const/index.js +2 -1
  33. package/dist/esm/assets/scripts/notification/const/sizes.js +6 -0
  34. package/dist/esm/assets/scripts/notification/const/types.js +8 -1
  35. package/dist/esm/assets/scripts/notification/index.js +1 -0
  36. package/dist/esm/assets/scripts/notification/utils.js +3 -3
  37. package/dist/esm/assets/scripts/utils/selectbox/DropdownModel.js +7 -0
  38. package/dist/esm/assets/scripts/utils/selectbox/UnifiedSelectBox.js +77 -43
  39. package/dist/esm/src/components/button/ButtonStepper.js +14 -0
  40. package/dist/esm/src/components/button/index.js +3 -1
  41. package/dist/esm/src/components/date-picker/DatePicker.js +46 -7
  42. package/dist/esm/src/components/date-picker/RangeDatePicker.js +3 -1
  43. package/dist/esm/src/components/date-picker/RangeDatePickerWithButtons.js +7 -3
  44. package/dist/esm/src/components/input/InputBase.js +1 -1
  45. package/dist/esm/src/components/input/NumberInput.js +124 -0
  46. package/dist/esm/src/components/input/index.js +1 -0
  47. package/dist/esm/src/components/notification/MessageNotification.js +130 -0
  48. package/dist/esm/src/components/notification/Notification.js +23 -9
  49. package/dist/esm/src/components/notification/index.js +2 -1
  50. package/dist/esm/src/components/tooltip/Tooltip.js +33 -22
  51. package/dist/types/assets/scripts/comboBox.d.ts +12 -0
  52. package/dist/types/assets/scripts/datePicker.d.ts +1 -0
  53. package/dist/types/assets/scripts/notification/MessageNotification.d.ts +23 -0
  54. package/dist/types/assets/scripts/notification/Notification.d.ts +1 -1
  55. package/dist/types/assets/scripts/notification/const/classNames.d.ts +14 -0
  56. package/dist/types/assets/scripts/notification/const/index.d.ts +2 -1
  57. package/dist/types/assets/scripts/notification/const/sizes.d.ts +5 -0
  58. package/dist/types/assets/scripts/notification/const/types.d.ts +1 -0
  59. package/dist/types/assets/scripts/notification/index.d.ts +1 -0
  60. package/dist/types/assets/scripts/utils/selectbox/DropdownModel.d.ts +4 -0
  61. package/dist/types/assets/scripts/utils/selectbox/UnifiedSelectBox.d.ts +20 -1
  62. package/dist/types/src/components/button/ButtonStepper.d.ts +10 -0
  63. package/dist/types/src/components/button/index.d.ts +2 -0
  64. package/dist/types/src/components/date-picker/DatePicker.d.ts +1 -0
  65. package/dist/types/src/components/date-picker/RangeDatePickerWithButtons.d.ts +4 -4
  66. package/dist/types/src/components/input/NumberInput.d.ts +10 -0
  67. package/dist/types/src/components/input/index.d.ts +1 -0
  68. package/dist/types/src/components/notification/MessageNotification.d.ts +40 -0
  69. package/dist/types/src/components/notification/Notification.d.ts +6 -1
  70. package/dist/types/src/components/notification/index.d.ts +1 -0
  71. package/dist/types/src/components/selectbox/SelectBox.d.ts +1 -1
  72. package/dist/types/src/components/tooltip/Tooltip.d.ts +4 -2
  73. package/dist/ui-admin/assets/styles/style.css +292 -10
  74. package/package.json +1 -1
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ButtonStepper = void 0;
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
+ var _classnames = _interopRequireDefault(require("classnames"));
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ var ButtonStepper = function (_a) {
11
+ var size = _a.size,
12
+ direction = _a.direction,
13
+ disabled = _a.disabled,
14
+ onClick = _a.onClick,
15
+ className = _a.className;
16
+ return (0, _jsxRuntime.jsx)("button", {
17
+ className: (0, _classnames.default)('ncua-button-stepper', "ncua-button-stepper--".concat(size), "ncua-button-stepper--".concat(direction), className),
18
+ disabled: disabled,
19
+ onClick: onClick
20
+ });
21
+ };
22
+ exports.ButtonStepper = ButtonStepper;
@@ -14,6 +14,17 @@ Object.keys(_Button).forEach(function (key) {
14
14
  }
15
15
  });
16
16
  });
17
+ var _ButtonCloseX = require("./ButtonCloseX");
18
+ Object.keys(_ButtonCloseX).forEach(function (key) {
19
+ if (key === "default" || key === "__esModule") return;
20
+ if (key in exports && exports[key] === _ButtonCloseX[key]) return;
21
+ Object.defineProperty(exports, key, {
22
+ enumerable: true,
23
+ get: function () {
24
+ return _ButtonCloseX[key];
25
+ }
26
+ });
27
+ });
17
28
  var _ButtonGroup = require("./ButtonGroup");
18
29
  Object.keys(_ButtonGroup).forEach(function (key) {
19
30
  if (key === "default" || key === "__esModule") return;
@@ -24,4 +35,15 @@ Object.keys(_ButtonGroup).forEach(function (key) {
24
35
  return _ButtonGroup[key];
25
36
  }
26
37
  });
38
+ });
39
+ var _ButtonStepper = require("./ButtonStepper");
40
+ Object.keys(_ButtonStepper).forEach(function (key) {
41
+ if (key === "default" || key === "__esModule") return;
42
+ if (key in exports && exports[key] === _ButtonStepper[key]) return;
43
+ Object.defineProperty(exports, key, {
44
+ enumerable: true,
45
+ get: function () {
46
+ return _ButtonStepper[key];
47
+ }
48
+ });
27
49
  });
@@ -7,10 +7,11 @@ exports.DatePicker = void 0;
7
7
  var _jsxRuntime = require("react/jsx-runtime");
8
8
  var _classnames = _interopRequireDefault(require("classnames"));
9
9
  var _ko = require("flatpickr/dist/l10n/ko");
10
+ var _moment = _interopRequireDefault(require("moment"));
10
11
  var _react = require("react");
11
12
  var _reactFlatpickr = _interopRequireDefault(require("react-flatpickr"));
12
- var _CustomInput = require("./CustomInput");
13
13
  var _datePicker = require("../../utils/date-picker");
14
+ var _CustomInput = require("./CustomInput");
14
15
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
16
  var __assign = void 0 && (void 0).__assign || function () {
16
17
  __assign = Object.assign || function (t) {
@@ -42,7 +43,9 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
42
43
  size = _c === void 0 ? 'xs' : _c,
43
44
  onChangeDate = _a.onChangeDate,
44
45
  datePickerOptions = _a.datePickerOptions,
45
- attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
46
+ _d = _a.isEndDate,
47
+ isEndDate = _d === void 0 ? false : _d,
48
+ attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions", "isEndDate"]);
46
49
  var onChangeDateHandler = function (dateTimeStamp, dateStr) {
47
50
  var formattedDate = (0, _datePicker.formatDateInput)(dateStr);
48
51
  isValidDate(formattedDate) ? onChangeDate(formattedDate) : onChangeDate(dateStr);
@@ -90,27 +93,63 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
90
93
  if (!hourInput || !minuteInput) return;
91
94
  hourInput.addEventListener('input', onHourInputHandler);
92
95
  minuteInput.addEventListener('input', onMinuteInputHandler);
96
+ var handleMouseDown = function (e) {
97
+ var _a;
98
+ var flatpickrCalendar = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-calendar.open');
99
+ if (flatpickrCalendar && !flatpickrCalendar.contains(e.target)) {
100
+ var timeInputs = flatpickrCalendar.querySelectorAll('.flatpickr-time input');
101
+ timeInputs.forEach(function (timeInput) {
102
+ if (document.activeElement === timeInput) {
103
+ timeInput.blur();
104
+ }
105
+ });
106
+ }
107
+ };
108
+ document.addEventListener('mousedown', handleMouseDown, true);
109
+ instance._handleMouseDown = handleMouseDown;
93
110
  },
94
111
  onDestroy: function (selectedDates, dateStr, instance) {
95
- var _a, _b;
112
+ var _a;
96
113
  var input = instance.input;
97
114
  if (!input) return;
98
115
  // 메인 input 이벤트 리스너 제거
99
116
  input.removeEventListener('input', onInputHandler);
117
+ var timeInputWrapper = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-time');
118
+ if (!timeInputWrapper) return;
100
119
  // 시간 input 이벤트 리스너 제거
101
- var hourInput = (_a = input.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-hour');
120
+ var hourInput = timeInputWrapper.querySelector('.flatpickr-hour');
102
121
  if (hourInput) {
103
122
  hourInput.removeEventListener('input', onHourInputHandler);
104
123
  }
105
124
  // 분 input 이벤트 리스너 제거
106
- var minuteInput = (_b = input.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector('.flatpickr-min');
125
+ var minuteInput = timeInputWrapper.querySelector('.flatpickr-minute');
107
126
  if (minuteInput) {
108
127
  minuteInput.removeEventListener('input', onMinuteInputHandler);
109
128
  }
129
+ var handleMouseDown = instance._handleMouseDown;
130
+ if (handleMouseDown) {
131
+ document.removeEventListener('mousedown', handleMouseDown, true);
132
+ }
110
133
  }
111
134
  }, datePickerOptions);
112
135
  var hasTimeOption = datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.hasOwnProperty('enableTime');
113
136
  var iconName = hasTimeOption && (datePickerOptions === null || datePickerOptions === void 0 ? void 0 : datePickerOptions.hasOwnProperty('noCalendar')) ? 'clock' : 'calendar';
137
+ var processedCurrentDate = (0, _react.useMemo)(function () {
138
+ var hasTime = options.enableTime;
139
+ var isTimeOnly = options.noCalendar;
140
+ var hasSeconds = options.enableSeconds;
141
+ if (!hasTime && !isTimeOnly) return currentDate;
142
+ if (currentDate === null || currentDate === void 0 ? void 0 : currentDate.includes(':')) return currentDate;
143
+ if (isTimeOnly) {
144
+ var endTime = hasSeconds ? '23:59:59' : '23:59';
145
+ var startTime = hasSeconds ? '00:00:00' : '00:00';
146
+ return isEndDate ? endTime : startTime;
147
+ }
148
+ if (!currentDate) return '';
149
+ var format = hasSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm';
150
+ var momentDate = (0, _moment.default)(currentDate);
151
+ return isEndDate ? momentDate.endOf('day').format(format) : momentDate.startOf('day').format(format);
152
+ }, [currentDate, isEndDate, options.enableSeconds, options.enableTime, options.noCalendar]);
114
153
  return (0, _jsxRuntime.jsxs)("div", __assign({
115
154
  className: (0, _classnames.default)('ncua-date-picker', "ncua-date-picker--".concat(size), {
116
155
  'ncua-date-picker--disabled': attrs.disabled,
@@ -122,7 +161,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
122
161
  ref: ref || undefined,
123
162
  className: (0, _classnames.default)('ncua-date-picker__input'),
124
163
  options: options,
125
- value: currentDate,
164
+ value: processedCurrentDate,
126
165
  render: function (_a, ref) {
127
166
  var defaultValue = _a.defaultValue,
128
167
  value = _a.value,
@@ -134,7 +134,9 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
134
134
  children: [(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, startDateOptions, {
135
135
  ref: undefined,
136
136
  size: size
137
- })), "~", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({}, endDateOptions, {
137
+ })), "~", (0, _jsxRuntime.jsx)(_DatePicker.DatePicker, __assign({
138
+ isEndDate: true
139
+ }, endDateOptions, {
138
140
  ref: undefined,
139
141
  size: size
140
142
  }))]
@@ -21,8 +21,8 @@ var __assign = void 0 && (void 0).__assign || function () {
21
21
  return __assign.apply(this, arguments);
22
22
  };
23
23
  var RangeDatePickerWithButtons = function (_a) {
24
- var _b = _a.fixedEndDate,
25
- fixedEndDate = _b === void 0 ? (0, _datePicker2.getDateFormat)() : _b,
24
+ var _b = _a.useYesterdayAsEndDate,
25
+ useYesterdayAsEndDate = _b === void 0 ? false : _b,
26
26
  _c = _a.size,
27
27
  size = _c === void 0 ? 'xs' : _c,
28
28
  currentButtonId = _a.currentButtonId,
@@ -47,7 +47,11 @@ var RangeDatePickerWithButtons = function (_a) {
47
47
  unit: currentPeriodItem.unit
48
48
  }));
49
49
  startDateOptions.onChangeDate(startDate);
50
- endDateOptions.onChangeDate(fixedEndDate);
50
+ var endDate = useYesterdayAsEndDate ? (0, _datePicker2.getDateFormat)((0, _datePicker2.getSubtractDate)({
51
+ period: 1,
52
+ unit: 'days'
53
+ })) : (0, _datePicker2.getDateFormat)();
54
+ endDateOptions.onChangeDate(endDate);
51
55
  };
52
56
  var handleOnChangeDate = function (date, type) {
53
57
  type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);
@@ -205,7 +205,7 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
205
205
  type: "text",
206
206
  disabled: disabled,
207
207
  maxLength: maxLength
208
- }, props)), renderClearButton(), trailingElement && renderInsideSlot(trailingElement, 'right'), renderStatusIcon()]
208
+ }, props)), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')]
209
209
  })), trailingElement && renderOutsideSlot(trailingElement)]
210
210
  })), showTextCount && maxLength && (0, _jsxRuntime.jsxs)("div", __assign({
211
211
  className: "ncua-input__field-text-count"
@@ -0,0 +1,130 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.NumberInput = void 0;
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
+ var _react = require("react");
9
+ var _hooks = require("../../hooks");
10
+ var _button = require("../button");
11
+ var _InputBase = require("./InputBase");
12
+ var __assign = void 0 && (void 0).__assign || function () {
13
+ __assign = Object.assign || function (t) {
14
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
15
+ s = arguments[i];
16
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
17
+ }
18
+ return t;
19
+ };
20
+ return __assign.apply(this, arguments);
21
+ };
22
+ var __rest = void 0 && (void 0).__rest || function (s, e) {
23
+ var t = {};
24
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
25
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
26
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
27
+ }
28
+ return t;
29
+ };
30
+ var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
31
+ var _b = _a.size,
32
+ size = _b === void 0 ? 'xs' : _b,
33
+ minValue = _a.minValue,
34
+ maxValue = _a.maxValue,
35
+ _c = _a.step,
36
+ step = _c === void 0 ? 1 : _c,
37
+ stepperPosition = _a.stepperPosition,
38
+ disabled = _a.disabled,
39
+ props = __rest(_a, ["size", "minValue", "maxValue", "step", "stepperPosition", "disabled"]);
40
+ var inputRef = (0, _react.useRef)(null);
41
+ var mergedRef = (0, _hooks.useMergeRefs)([ref, inputRef]);
42
+ var getCurrentValue = (0, _react.useCallback)(function () {
43
+ var _a;
44
+ var value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
45
+ return value ? parseFloat(value) : 0;
46
+ }, []);
47
+ var updateValue = (0, _react.useCallback)(function (newValue) {
48
+ if (!inputRef.current) return;
49
+ // min/max 범위 체크
50
+ var clampedValue = newValue;
51
+ if (minValue !== undefined && clampedValue < minValue) {
52
+ clampedValue = minValue;
53
+ }
54
+ if (maxValue !== undefined && clampedValue > maxValue) {
55
+ clampedValue = maxValue;
56
+ }
57
+ inputRef.current.value = clampedValue.toString();
58
+ // onChange 이벤트 트리거
59
+ var event = new Event('input', {
60
+ bubbles: true
61
+ });
62
+ inputRef.current.dispatchEvent(event);
63
+ }, [minValue, maxValue]);
64
+ var handleIncrement = (0, _react.useCallback)(function () {
65
+ var currentValue = getCurrentValue();
66
+ var newValue = currentValue + step;
67
+ if (maxValue === undefined || newValue <= maxValue) {
68
+ updateValue(newValue);
69
+ }
70
+ }, [getCurrentValue, step, maxValue, updateValue]);
71
+ var handleDecrement = (0, _react.useCallback)(function () {
72
+ var currentValue = getCurrentValue();
73
+ var newValue = currentValue - step;
74
+ if (minValue === undefined || newValue >= minValue) {
75
+ updateValue(newValue);
76
+ }
77
+ }, [getCurrentValue, step, minValue, updateValue]);
78
+ var handleKeyDown = (0, _react.useCallback)(function (event) {
79
+ var _a;
80
+ if (disabled) return;
81
+ if (event.key === 'ArrowUp') {
82
+ event.preventDefault();
83
+ handleIncrement();
84
+ } else if (event.key === 'ArrowDown') {
85
+ event.preventDefault();
86
+ handleDecrement();
87
+ }
88
+ // 기존 onKeyDown prop이 있으면 호출
89
+ (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
90
+ }, [disabled, handleIncrement, handleDecrement, props]);
91
+ var renderStepperButtonGroup = function (position) {
92
+ if (position !== stepperPosition) {
93
+ return null;
94
+ }
95
+ return (0, _jsxRuntime.jsxs)("div", __assign({
96
+ className: "ncua-input__stepper-button-group"
97
+ }, {
98
+ children: [(0, _jsxRuntime.jsx)(_button.ButtonStepper, {
99
+ size: size,
100
+ direction: "up",
101
+ onClick: handleIncrement,
102
+ disabled: disabled
103
+ }), (0, _jsxRuntime.jsx)(_button.ButtonStepper, {
104
+ size: size,
105
+ direction: "down",
106
+ onClick: handleDecrement,
107
+ disabled: disabled
108
+ })]
109
+ }));
110
+ };
111
+ return (0, _jsxRuntime.jsx)(_InputBase.InputBase, __assign({
112
+ type: "number",
113
+ leadingElement: renderStepperButtonGroup('leading') ? {
114
+ type: 'custom',
115
+ children: renderStepperButtonGroup('leading')
116
+ } : props.leadingElement,
117
+ trailingElement: renderStepperButtonGroup('trailing') ? {
118
+ type: 'custom',
119
+ children: renderStepperButtonGroup('trailing')
120
+ } : props.trailingElement,
121
+ ref: mergedRef,
122
+ size: size,
123
+ disabled: disabled,
124
+ min: minValue,
125
+ max: maxValue,
126
+ step: step,
127
+ onKeyDown: handleKeyDown,
128
+ className: "ncua-input__number"
129
+ }, props));
130
+ });
@@ -14,6 +14,17 @@ Object.keys(_InputBase).forEach(function (key) {
14
14
  }
15
15
  });
16
16
  });
17
+ var _NumberInput = require("./NumberInput");
18
+ Object.keys(_NumberInput).forEach(function (key) {
19
+ if (key === "default" || key === "__esModule") return;
20
+ if (key in exports && exports[key] === _NumberInput[key]) return;
21
+ Object.defineProperty(exports, key, {
22
+ enumerable: true,
23
+ get: function () {
24
+ return _NumberInput[key];
25
+ }
26
+ });
27
+ });
17
28
  var _PasswordInput = require("./PasswordInput");
18
29
  Object.keys(_PasswordInput).forEach(function (key) {
19
30
  if (key === "default" || key === "__esModule") return;
@@ -0,0 +1,137 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.MessageNotification = void 0;
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
+ var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
9
+ var _classnames = _interopRequireDefault(require("classnames"));
10
+ var _react = require("react");
11
+ var _color = require("../../../constant/color");
12
+ var _button = require("../button");
13
+ var _FeaturedIcon = require("../featured-icon/FeaturedIcon");
14
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
15
+ var __assign = void 0 && (void 0).__assign || function () {
16
+ __assign = Object.assign || function (t) {
17
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
18
+ s = arguments[i];
19
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
20
+ }
21
+ return t;
22
+ };
23
+ return __assign.apply(this, arguments);
24
+ };
25
+ var __rest = void 0 && (void 0).__rest || function (s, e) {
26
+ var t = {};
27
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
28
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
29
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
30
+ }
31
+ return t;
32
+ };
33
+ var iconNameMap = {
34
+ neutral: 'pin-02',
35
+ error: 'alert-triangle',
36
+ warning: 'alert-circle',
37
+ success: 'check-circle'
38
+ };
39
+ var iconColorMap = {
40
+ neutral: 'gray700',
41
+ error: 'red500',
42
+ warning: 'orange500',
43
+ success: 'green600'
44
+ };
45
+ var MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
46
+ var title = _a.title,
47
+ supportingText = _a.supportingText,
48
+ icon = _a.icon,
49
+ _b = _a.color,
50
+ color = _b === void 0 ? 'neutral' : _b,
51
+ onClose = _a.onClose,
52
+ className = _a.className,
53
+ actions = _a.actions,
54
+ onHidePermanently = _a.onHidePermanently,
55
+ rest = __rest(_a, ["title", "supportingText", "icon", "color", "onClose", "className", "actions", "onHidePermanently"]);
56
+ // message 타입은 neutral, error, warning, success 4가지 색상만 지원
57
+ var validColor = color === 'info' ? 'neutral' : color;
58
+ var iconColor = validColor;
59
+ var featuredIconProps = {
60
+ name: icon || iconNameMap[validColor] || 'pin-02',
61
+ size: 'lg',
62
+ color: iconColor,
63
+ theme: 'light-circle'
64
+ };
65
+ var closeIconColor = _color.COLOR[iconColorMap[validColor] || 'gray700'];
66
+ return (0, _jsxRuntime.jsx)("div", __assign({
67
+ ref: ref,
68
+ className: (0, _classnames.default)('ncua-message-notification', "ncua-message-notification--".concat(validColor), className),
69
+ role: "alert"
70
+ }, rest, {
71
+ children: (0, _jsxRuntime.jsx)("div", __assign({
72
+ className: "ncua-message-notification__container"
73
+ }, {
74
+ children: (0, _jsxRuntime.jsxs)("div", __assign({
75
+ className: "ncua-message-notification__content"
76
+ }, {
77
+ children: [(0, _jsxRuntime.jsxs)("div", __assign({
78
+ className: "ncua-message-notification__content-wrapper"
79
+ }, {
80
+ children: [iconNameMap[validColor] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
81
+ className: "ncua-message-notification__icon"
82
+ })), (0, _jsxRuntime.jsxs)("div", __assign({
83
+ className: "ncua-message-notification__text-container"
84
+ }, {
85
+ children: [(0, _jsxRuntime.jsx)("span", __assign({
86
+ className: "ncua-message-notification__title"
87
+ }, {
88
+ children: title
89
+ })), supportingText && (0, _jsxRuntime.jsx)("span", __assign({
90
+ className: "ncua-message-notification__supporting-text"
91
+ }, {
92
+ children: supportingText
93
+ }))]
94
+ }))]
95
+ })), (0, _jsxRuntime.jsx)("div", __assign({
96
+ className: "ncua-message-notification__actions-container"
97
+ }, {
98
+ children: actions && (0, _jsxRuntime.jsx)("div", __assign({
99
+ className: "ncua-message-notification__actions"
100
+ }, {
101
+ children: actions.map(function (action) {
102
+ return (0, _jsxRuntime.jsx)(_button.Button, {
103
+ size: "xs",
104
+ hierarchy: action.hierarchy || 'text',
105
+ label: action.label,
106
+ onClick: action === null || action === void 0 ? void 0 : action.onClick
107
+ }, "".concat(action.label, "-").concat(action.hierarchy));
108
+ })
109
+ }))
110
+ })), (0, _jsxRuntime.jsxs)("div", __assign({
111
+ className: "ncua-message-notification__footer-container"
112
+ }, {
113
+ children: [onHidePermanently && (0, _jsxRuntime.jsx)("button", __assign({
114
+ type: "button",
115
+ className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-message-notification__hide-link'),
116
+ onClick: onHidePermanently
117
+ }, {
118
+ children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30"
119
+ })), onClose && (0, _jsxRuntime.jsx)("button", __assign({
120
+ type: "button",
121
+ className: "ncua-message-notification__close-button",
122
+ onClick: onClose,
123
+ "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
124
+ }, {
125
+ children: (0, _jsxRuntime.jsx)(_dynamic.default, {
126
+ name: "x-close",
127
+ width: 20,
128
+ height: 20,
129
+ color: closeIconColor
130
+ })
131
+ }))]
132
+ }))]
133
+ }))
134
+ }))
135
+ }));
136
+ });
137
+ MessageNotification.displayName = 'MessageNotification';
@@ -8,6 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
8
8
  var _react = require("react");
9
9
  var _FloatingNotification = require("./FloatingNotification");
10
10
  var _FullWidthNotification = require("./FullWidthNotification");
11
+ var _MessageNotification = require("./MessageNotification");
11
12
  var __assign = void 0 && (void 0).__assign || function () {
12
13
  __assign = Object.assign || function (t) {
13
14
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -32,14 +33,27 @@ var Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(fu
32
33
  _c = _a.color,
33
34
  color = _c === void 0 ? 'neutral' : _c,
34
35
  rest = __rest(_a, ["type", "color"]);
35
- return type === 'floating' ? (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, __assign({
36
- color: color
37
- }, rest, {
38
- ref: ref
39
- })) : (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, __assign({
40
- color: color
41
- }, rest, {
42
- ref: ref
43
- }));
36
+ if (type === 'floating') {
37
+ return (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, __assign({
38
+ color: color
39
+ }, rest, {
40
+ ref: ref
41
+ }));
42
+ }
43
+ if (type === 'full-width') {
44
+ return (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, __assign({
45
+ color: color
46
+ }, rest, {
47
+ ref: ref
48
+ }));
49
+ }
50
+ if (type === 'message') {
51
+ return (0, _jsxRuntime.jsx)(_MessageNotification.MessageNotification, __assign({
52
+ color: color
53
+ }, rest, {
54
+ ref: ref
55
+ }));
56
+ }
57
+ return null;
44
58
  });
45
59
  Notification.displayName = 'Notification';
@@ -35,4 +35,15 @@ Object.keys(_FullWidthNotification).forEach(function (key) {
35
35
  return _FullWidthNotification[key];
36
36
  }
37
37
  });
38
+ });
39
+ var _MessageNotification = require("./MessageNotification");
40
+ Object.keys(_MessageNotification).forEach(function (key) {
41
+ if (key === "default" || key === "__esModule") return;
42
+ if (key in exports && exports[key] === _MessageNotification[key]) return;
43
+ Object.defineProperty(exports, key, {
44
+ enumerable: true,
45
+ get: function () {
46
+ return _MessageNotification[key];
47
+ }
48
+ });
38
49
  });
@@ -74,22 +74,26 @@ var Tooltip = function (_a) {
74
74
  hideArrow = _f === void 0 ? false : _f,
75
75
  _g = _a.type,
76
76
  type = _g === void 0 ? 'short' : _g,
77
+ _h = _a.iconColor,
78
+ iconColor = _h === void 0 ? 'var(--gray-300)' : _h,
79
+ _j = _a.iconStyle,
80
+ iconStyle = _j === void 0 ? 'help-circle' : _j,
77
81
  className = _a.className;
78
82
  var iconSize = size === 'sm' ? 14 : 16;
79
83
  var tooltipRef = (0, _react.useRef)(null);
80
84
  var tooltipBgRef = (0, _react.useRef)(null);
81
- var _h = (0, _react.useState)(position === 'auto' ? 'bottom' : position),
82
- calculatedPosition = _h[0],
83
- setCalculatedPosition = _h[1];
84
- var _j = (0, _react.useState)(false),
85
- isVisible = _j[0],
86
- setIsVisible = _j[1];
87
- var _k = (0, _react.useState)(false),
88
- isManuallyClose = _k[0],
89
- setIsManuallyClose = _k[1];
85
+ var _k = (0, _react.useState)(position === 'auto' ? 'bottom' : position),
86
+ calculatedPosition = _k[0],
87
+ setCalculatedPosition = _k[1];
90
88
  var _l = (0, _react.useState)(false),
91
- isMeasuring = _l[0],
92
- setIsMeasuring = _l[1];
89
+ isVisible = _l[0],
90
+ setIsVisible = _l[1];
91
+ var _m = (0, _react.useState)(false),
92
+ isManuallyClose = _m[0],
93
+ setIsManuallyClose = _m[1];
94
+ var _o = (0, _react.useState)(false),
95
+ isMeasuring = _o[0],
96
+ setIsMeasuring = _o[1];
93
97
  var handleMouseEnter = (0, _react.useCallback)(function () {
94
98
  if (isManuallyClose) return;
95
99
  setIsVisible(true);
@@ -137,15 +141,23 @@ var Tooltip = function (_a) {
137
141
  onMouseEnter: handleMouseEnter,
138
142
  onMouseLeave: handleMouseLeave
139
143
  }, {
140
- children: [iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
144
+ children: [iconStyle === 'help-circle' && (iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
141
145
  width: iconSize,
142
146
  height: iconSize,
143
- color: "var(--gray-300)"
147
+ color: iconColor
144
148
  }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircleFill, {
145
149
  width: iconSize,
146
150
  height: iconSize,
147
- color: "var(--gray-300)"
148
- }), (0, _jsxRuntime.jsxs)("span", __assign({
151
+ color: iconColor
152
+ })), iconStyle === 'alert-circle' && (iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.AlertCircle, {
153
+ width: iconSize,
154
+ height: iconSize,
155
+ color: iconColor
156
+ }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.AlertCircleFill, {
157
+ width: iconSize,
158
+ height: iconSize,
159
+ color: iconColor
160
+ })), (0, _jsxRuntime.jsxs)("span", __assign({
149
161
  ref: tooltipBgRef,
150
162
  className: tooltipBgClassName
151
163
  }, {
@@ -153,12 +165,11 @@ var Tooltip = function (_a) {
153
165
  className: "ncua-tooltip__title"
154
166
  }, {
155
167
  children: title
156
- })), content && (0, _jsxRuntime.jsx)("span", {
157
- className: "ncua-tooltip__content",
158
- dangerouslySetInnerHTML: {
159
- __html: content
160
- }
161
- }), type === 'long' && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
168
+ })), content && (0, _jsxRuntime.jsx)("span", __assign({
169
+ className: "ncua-tooltip__content"
170
+ }, {
171
+ children: content
172
+ })), type === 'long' && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
162
173
  className: "ncua-tooltip__close-button",
163
174
  size: "xs",
164
175
  theme: tooltipType === 'white' ? 'dark' : 'light',
@@ -252,6 +252,24 @@ var ComboBox = /** @class */function () {
252
252
  ComboBox.prototype.toggleSelectAll = function () {
253
253
  this.unifiedSelectBox.toggleSelectAll();
254
254
  };
255
+ /**
256
+ * 드롭다운을 스크롤의 바닥으로 이동
257
+ */
258
+ ComboBox.prototype.scrollToBottom = function () {
259
+ this.unifiedSelectBox.scrollToBottom();
260
+ };
261
+ /**
262
+ * 전체 선택 버튼의 텍스트를 외부에서 변경
263
+ */
264
+ ComboBox.prototype.setSelectAllButtonText = function (text) {
265
+ this.unifiedSelectBox.setSelectAllButtonText(text);
266
+ };
267
+ /**
268
+ * 특정 인덱스의 옵션으로 포커스 이동
269
+ */
270
+ ComboBox.prototype.setFocusIndex = function (index) {
271
+ this.unifiedSelectBox.setFocusIndex(index);
272
+ };
255
273
  return ComboBox;
256
274
  }();
257
275
  export { ComboBox };