@ncds/ui-admin 1.8.4 → 1.8.5

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 (177) hide show
  1. package/dist/cjs/assets/scripts/featuredIcon.js +87 -0
  2. package/dist/cjs/assets/scripts/notification/FloatingNotification.js +178 -0
  3. package/dist/cjs/assets/scripts/notification/FullWidthNotification.js +133 -0
  4. package/dist/cjs/assets/scripts/notification/MessageNotification.js +159 -0
  5. package/dist/cjs/assets/scripts/notification/Notification.js +120 -0
  6. package/dist/cjs/assets/scripts/notification/const/classNames.js +50 -0
  7. package/dist/cjs/assets/scripts/notification/const/icons.js +31 -0
  8. package/dist/cjs/assets/scripts/notification/const/index.js +87 -0
  9. package/dist/cjs/assets/scripts/notification/const/sizes.js +46 -0
  10. package/dist/cjs/assets/scripts/notification/const/types.js +14 -0
  11. package/dist/cjs/assets/scripts/notification/index.js +116 -0
  12. package/dist/cjs/assets/scripts/notification/positionSync.js +180 -0
  13. package/dist/cjs/assets/scripts/notification/utils.js +122 -0
  14. package/dist/cjs/assets/scripts/shared/ButtonCloseX.js +45 -0
  15. package/dist/cjs/assets/scripts/utils/sanitize.js +39 -0
  16. package/dist/cjs/src/components/data-display/data-grid/DataGrid.js +5 -1
  17. package/dist/cjs/src/components/data-display/table/Table.js +118 -96
  18. package/dist/cjs/src/components/data-display/table/useTableScrollbars.js +187 -0
  19. package/dist/cjs/src/components/forms-and-input/combo-box/ComboBox.js +11 -10
  20. package/dist/cjs/src/components/forms-and-input/image-file-input/ImageFileInput.js +5 -2
  21. package/dist/cjs/src/components/forms-and-input/select-box/SelectBox.js +67 -29
  22. package/dist/cjs/src/components/overlays/dropdown/Dropdown.js +47 -19
  23. package/dist/cjs/src/components/overlays/notification/CalloutNotification.js +25 -0
  24. package/dist/cjs/src/components/overlays/notification/FloatingNotification.js +86 -13
  25. package/dist/cjs/src/components/overlays/notification/Notification.js +7 -0
  26. package/dist/cjs/src/components/overlays/notification/host.js +12 -0
  27. package/dist/cjs/src/components/overlays/tooltip/Tooltip.js +57 -44
  28. package/dist/cjs/src/components/select-dropdown/SelectDropdown.js +2 -1
  29. package/dist/cjs/src/contexts/FloatingContext.js +11 -0
  30. package/dist/cjs/src/contexts/index.js +16 -0
  31. package/dist/cjs/src/hooks/index.js +11 -0
  32. package/dist/cjs/src/hooks/useFloatingPosition.js +78 -0
  33. package/dist/cjs/src/hooks/usePortalState.js +17 -0
  34. package/dist/cjs/src/utils/dropdown/maxSelection.js +35 -0
  35. package/dist/cjs/src/utils/dropdown/multiSelect.js +72 -15
  36. package/dist/esm/assets/scripts/featuredIcon.js +80 -0
  37. package/dist/esm/assets/scripts/notification/FloatingNotification.js +171 -0
  38. package/dist/esm/assets/scripts/notification/FullWidthNotification.js +126 -0
  39. package/dist/esm/assets/scripts/notification/MessageNotification.js +152 -0
  40. package/dist/esm/assets/scripts/notification/Notification.js +113 -0
  41. package/dist/esm/assets/scripts/notification/const/classNames.js +44 -0
  42. package/dist/esm/assets/scripts/notification/const/icons.js +25 -0
  43. package/dist/esm/assets/scripts/notification/const/index.js +4 -0
  44. package/dist/esm/assets/scripts/notification/const/sizes.js +40 -0
  45. package/dist/esm/assets/scripts/notification/const/types.js +8 -0
  46. package/dist/esm/assets/scripts/notification/index.js +10 -0
  47. package/dist/esm/assets/scripts/notification/positionSync.js +171 -0
  48. package/dist/esm/assets/scripts/notification/utils.js +109 -0
  49. package/dist/esm/assets/scripts/shared/ButtonCloseX.js +37 -0
  50. package/dist/esm/assets/scripts/utils/sanitize.js +31 -0
  51. package/dist/esm/src/components/data-display/data-grid/DataGrid.js +5 -1
  52. package/dist/esm/src/components/data-display/table/Table.js +118 -96
  53. package/dist/esm/src/components/data-display/table/useTableScrollbars.js +179 -0
  54. package/dist/esm/src/components/forms-and-input/combo-box/ComboBox.js +11 -10
  55. package/dist/esm/src/components/forms-and-input/image-file-input/ImageFileInput.js +5 -2
  56. package/dist/esm/src/components/forms-and-input/select-box/SelectBox.js +67 -29
  57. package/dist/esm/src/components/overlays/dropdown/Dropdown.js +47 -19
  58. package/dist/esm/src/components/overlays/notification/CalloutNotification.js +19 -0
  59. package/dist/esm/src/components/overlays/notification/FloatingNotification.js +86 -14
  60. package/dist/esm/src/components/overlays/notification/Notification.js +7 -0
  61. package/dist/esm/src/components/overlays/notification/host.js +9 -0
  62. package/dist/esm/src/components/overlays/tooltip/Tooltip.js +58 -45
  63. package/dist/esm/src/components/select-dropdown/SelectDropdown.js +2 -1
  64. package/dist/esm/src/contexts/FloatingContext.js +4 -0
  65. package/dist/esm/src/contexts/index.js +1 -0
  66. package/dist/esm/src/hooks/index.js +1 -0
  67. package/dist/esm/src/hooks/useFloatingPosition.js +71 -0
  68. package/dist/esm/src/hooks/usePortalState.js +10 -0
  69. package/dist/esm/src/utils/dropdown/maxSelection.js +27 -0
  70. package/dist/esm/src/utils/dropdown/multiSelect.js +70 -14
  71. package/dist/temp/assets/scripts/featuredIcon.d.ts +22 -0
  72. package/dist/temp/assets/scripts/featuredIcon.js +79 -0
  73. package/dist/temp/assets/scripts/notification/FloatingNotification.d.ts +24 -0
  74. package/dist/temp/assets/scripts/notification/FloatingNotification.js +156 -0
  75. package/dist/temp/assets/scripts/notification/FullWidthNotification.d.ts +21 -0
  76. package/dist/temp/assets/scripts/notification/FullWidthNotification.js +111 -0
  77. package/dist/temp/assets/scripts/notification/MessageNotification.d.ts +22 -0
  78. package/dist/temp/assets/scripts/notification/MessageNotification.js +140 -0
  79. package/dist/temp/assets/scripts/notification/Notification.d.ts +22 -0
  80. package/dist/temp/assets/scripts/notification/Notification.js +112 -0
  81. package/dist/temp/assets/scripts/notification/const/classNames.d.ts +43 -0
  82. package/dist/temp/assets/scripts/notification/const/classNames.js +44 -0
  83. package/dist/temp/assets/scripts/notification/const/icons.d.ts +25 -0
  84. package/dist/temp/assets/scripts/notification/const/icons.js +25 -0
  85. package/dist/temp/assets/scripts/notification/const/index.d.ts +5 -0
  86. package/dist/temp/assets/scripts/notification/const/index.js +4 -0
  87. package/dist/temp/assets/scripts/notification/const/sizes.d.ts +32 -0
  88. package/dist/temp/assets/scripts/notification/const/sizes.js +40 -0
  89. package/dist/temp/assets/scripts/notification/const/types.d.ts +19 -0
  90. package/dist/temp/assets/scripts/notification/const/types.js +8 -0
  91. package/dist/temp/assets/scripts/notification/index.d.ts +8 -0
  92. package/dist/temp/assets/scripts/notification/index.js +10 -0
  93. package/dist/temp/assets/scripts/notification/positionSync.d.ts +50 -0
  94. package/dist/temp/assets/scripts/notification/positionSync.js +170 -0
  95. package/dist/temp/assets/scripts/notification/utils.d.ts +8 -0
  96. package/dist/temp/assets/scripts/notification/utils.js +115 -0
  97. package/dist/temp/assets/scripts/shared/ButtonCloseX.d.ts +5 -0
  98. package/dist/temp/assets/scripts/shared/ButtonCloseX.js +33 -0
  99. package/dist/temp/assets/scripts/utils/sanitize.d.ts +22 -0
  100. package/dist/temp/assets/scripts/utils/sanitize.js +31 -0
  101. package/dist/temp/src/components/data-display/data-grid/DataGrid.js +1 -1
  102. package/dist/temp/src/components/data-display/data-grid/DataGrid.types.d.ts +7 -0
  103. package/dist/temp/src/components/data-display/table/Table.d.ts +4 -1
  104. package/dist/temp/src/components/data-display/table/Table.js +53 -68
  105. package/dist/temp/src/components/data-display/table/types.d.ts +18 -0
  106. package/dist/temp/src/components/data-display/table/useTableScrollbars.d.ts +25 -0
  107. package/dist/temp/src/components/data-display/table/useTableScrollbars.js +136 -0
  108. package/dist/temp/src/components/forms-and-input/combo-box/ComboBox.d.ts +8 -0
  109. package/dist/temp/src/components/forms-and-input/combo-box/ComboBox.js +7 -11
  110. package/dist/temp/src/components/forms-and-input/image-file-input/ImageFileInput.js +1 -1
  111. package/dist/temp/src/components/forms-and-input/select-box/SelectBox.d.ts +13 -0
  112. package/dist/temp/src/components/forms-and-input/select-box/SelectBox.js +30 -3
  113. package/dist/temp/src/components/overlays/dropdown/Dropdown.d.ts +5 -0
  114. package/dist/temp/src/components/overlays/dropdown/Dropdown.js +35 -11
  115. package/dist/temp/src/components/overlays/notification/CalloutNotification.d.ts +9 -0
  116. package/dist/temp/src/components/overlays/notification/CalloutNotification.js +6 -0
  117. package/dist/temp/src/components/overlays/notification/FloatingNotification.d.ts +15 -0
  118. package/dist/temp/src/components/overlays/notification/FloatingNotification.js +81 -13
  119. package/dist/temp/src/components/overlays/notification/Notification.d.ts +18 -3
  120. package/dist/temp/src/components/overlays/notification/Notification.js +4 -0
  121. package/dist/temp/src/components/overlays/notification/host.d.ts +9 -0
  122. package/dist/temp/src/components/overlays/notification/host.js +9 -0
  123. package/dist/temp/src/components/overlays/tooltip/Tooltip.d.ts +5 -1
  124. package/dist/temp/src/components/overlays/tooltip/Tooltip.js +25 -22
  125. package/dist/temp/src/components/select-dropdown/SelectDropdown.d.ts +6 -0
  126. package/dist/temp/src/components/select-dropdown/SelectDropdown.js +2 -2
  127. package/dist/temp/src/contexts/FloatingContext.d.ts +6 -0
  128. package/dist/temp/src/contexts/FloatingContext.js +4 -0
  129. package/dist/temp/src/contexts/index.d.ts +1 -0
  130. package/dist/temp/src/contexts/index.js +1 -0
  131. package/dist/temp/src/hooks/index.d.ts +1 -0
  132. package/dist/temp/src/hooks/index.js +1 -0
  133. package/dist/temp/src/hooks/useFloatingPosition.d.ts +19 -0
  134. package/dist/temp/src/hooks/useFloatingPosition.js +55 -0
  135. package/dist/temp/src/hooks/usePortalState.d.ts +6 -0
  136. package/dist/temp/src/hooks/usePortalState.js +7 -0
  137. package/dist/temp/src/utils/dropdown/maxSelection.d.ts +24 -0
  138. package/dist/temp/src/utils/dropdown/maxSelection.js +28 -0
  139. package/dist/temp/src/utils/dropdown/multiSelect.d.ts +42 -2
  140. package/dist/temp/src/utils/dropdown/multiSelect.js +66 -13
  141. package/dist/types/assets/scripts/featuredIcon.d.ts +22 -0
  142. package/dist/types/assets/scripts/notification/FloatingNotification.d.ts +24 -0
  143. package/dist/types/assets/scripts/notification/FullWidthNotification.d.ts +21 -0
  144. package/dist/types/assets/scripts/notification/MessageNotification.d.ts +22 -0
  145. package/dist/types/assets/scripts/notification/Notification.d.ts +22 -0
  146. package/dist/types/assets/scripts/notification/const/classNames.d.ts +43 -0
  147. package/dist/types/assets/scripts/notification/const/icons.d.ts +25 -0
  148. package/dist/types/assets/scripts/notification/const/index.d.ts +5 -0
  149. package/dist/types/assets/scripts/notification/const/sizes.d.ts +32 -0
  150. package/dist/types/assets/scripts/notification/const/types.d.ts +19 -0
  151. package/dist/types/assets/scripts/notification/index.d.ts +8 -0
  152. package/dist/types/assets/scripts/notification/positionSync.d.ts +50 -0
  153. package/dist/types/assets/scripts/notification/utils.d.ts +8 -0
  154. package/dist/types/assets/scripts/shared/ButtonCloseX.d.ts +5 -0
  155. package/dist/types/assets/scripts/utils/sanitize.d.ts +22 -0
  156. package/dist/types/src/components/data-display/data-grid/DataGrid.types.d.ts +7 -0
  157. package/dist/types/src/components/data-display/table/Table.d.ts +4 -1
  158. package/dist/types/src/components/data-display/table/types.d.ts +18 -0
  159. package/dist/types/src/components/data-display/table/useTableScrollbars.d.ts +25 -0
  160. package/dist/types/src/components/forms-and-input/combo-box/ComboBox.d.ts +8 -0
  161. package/dist/types/src/components/forms-and-input/select-box/SelectBox.d.ts +13 -0
  162. package/dist/types/src/components/overlays/dropdown/Dropdown.d.ts +5 -0
  163. package/dist/types/src/components/overlays/notification/CalloutNotification.d.ts +9 -0
  164. package/dist/types/src/components/overlays/notification/FloatingNotification.d.ts +15 -0
  165. package/dist/types/src/components/overlays/notification/Notification.d.ts +18 -3
  166. package/dist/types/src/components/overlays/notification/host.d.ts +9 -0
  167. package/dist/types/src/components/overlays/tooltip/Tooltip.d.ts +5 -1
  168. package/dist/types/src/components/select-dropdown/SelectDropdown.d.ts +6 -0
  169. package/dist/types/src/contexts/FloatingContext.d.ts +6 -0
  170. package/dist/types/src/contexts/index.d.ts +1 -0
  171. package/dist/types/src/hooks/index.d.ts +1 -0
  172. package/dist/types/src/hooks/useFloatingPosition.d.ts +19 -0
  173. package/dist/types/src/hooks/usePortalState.d.ts +6 -0
  174. package/dist/types/src/utils/dropdown/maxSelection.d.ts +24 -0
  175. package/dist/types/src/utils/dropdown/multiSelect.d.ts +42 -2
  176. package/dist/ui-admin/assets/styles/style.css +304 -64
  177. package/package.json +1 -1
@@ -8,8 +8,11 @@ var _jsxRuntime = require("react/jsx-runtime");
8
8
  var _uiAdminIcon = require("@ncds/ui-admin-icon");
9
9
  var _classnames = _interopRequireDefault(require("classnames"));
10
10
  var _react = require("react");
11
+ var _reactDom = require("react-dom");
11
12
  var _color = require("../../../../constant/color");
12
13
  var _dropdown = require("../../../hooks/dropdown");
14
+ var _useFloatingPosition = require("../../../hooks/useFloatingPosition");
15
+ var _usePortalState = require("../../../hooks/usePortalState");
13
16
  var _multiSelect = require("../../../utils/dropdown/multiSelect");
14
17
  var _tag = require("../../feedback-and-status/tag");
15
18
  var _selectDropdown = require("../../select-dropdown");
@@ -61,7 +64,9 @@ function DisplayValue(_ref) {
61
64
  })]
62
65
  });
63
66
  }
64
- const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
67
+ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref
68
+ // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 옵션/멀티/태그/포탈 등 필수 분기 통합
69
+ ) => {
65
70
  let {
66
71
  placeholder = '선택하세요',
67
72
  disabledPlaceholder = false,
@@ -75,7 +80,9 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
75
80
  disabled = false,
76
81
  maxHeight = DEFAULT_MAX_HEIGHT,
77
82
  multiple = false,
83
+ maxSelection,
78
84
  align = 'left',
85
+ usePortal,
79
86
  id,
80
87
  className,
81
88
  children,
@@ -86,6 +93,10 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
86
93
  } = _ref2;
87
94
  const internalRef = (0, _react.useRef)(null);
88
95
  const dropdownRef = (0, _react.useRef)(null);
96
+ const {
97
+ shouldPortal,
98
+ portalContainer
99
+ } = (0, _usePortalState.usePortalState)(usePortal);
89
100
  const [selectedTags, setSelectedTags] = (0, _react.useState)([]);
90
101
  const selectedOption = (0, _react.useMemo)(() => {
91
102
  if (multiple) return null;
@@ -99,6 +110,13 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
99
110
  }, [multiple, selectedOption, placeholder]);
100
111
  const handleOptionSelect = option => {
101
112
  if (disabled) return;
113
+ if (multiple) {
114
+ const newValue = tryToggle(option.id, Array.isArray(value) ? value : []);
115
+ if (newValue === null) return;
116
+ onChange?.(newValue);
117
+ notifyRegister(register, newValue, multiple);
118
+ return;
119
+ }
102
120
  const newValue = computeNewValue(option, value, multiple);
103
121
  onChange?.(newValue);
104
122
  notifyRegister(register, newValue, multiple);
@@ -141,8 +159,12 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
141
159
  buttonText: selectAllButtonText,
142
160
  toggleSelectAll,
143
161
  getSelectedTagsData,
144
- removeTag
145
- } = (0, _multiSelect.useMultiSelect)(currentSelectedValues, optionItems);
162
+ removeTag,
163
+ isMaxSelectionActive,
164
+ tryToggle
165
+ } = (0, _multiSelect.useMultiSelect)(currentSelectedValues, optionItems, {
166
+ maxSelection
167
+ });
146
168
  const handleSelectAll = () => {
147
169
  if (!multiple || !onChange) return;
148
170
  const newSelectedValues = toggleSelectAll();
@@ -167,13 +189,53 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
167
189
  }
168
190
  };
169
191
  (0, _dropdown.useScrollLock)(isOpen, dropdownRef);
192
+ // biome-ignore lint/correctness/useExhaustiveDependencies: optionItems 변경 시 너비 재계산 필요
170
193
  (0, _react.useLayoutEffect)(() => {
171
194
  if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
172
195
  const dropdownWidth = dropdownRef.current.offsetWidth;
173
196
  internalRef.current.style.width = `${dropdownWidth}px`;
174
197
  }
175
198
  }, [autoWidth, isOpen, optionItems]);
199
+ const floatingStyle = (0, _useFloatingPosition.useFloatingPosition)({
200
+ enabled: shouldPortal,
201
+ isOpen,
202
+ triggerRef: internalRef,
203
+ floatingRef: dropdownRef,
204
+ direction: dropdownDirection,
205
+ align,
206
+ matchTriggerWidth: true
207
+ });
208
+ // biome-ignore lint/style/noNonNullAssertion: forwardRef 패턴에서 internalRef는 항상 존재
176
209
  (0, _react.useImperativeHandle)(ref, () => internalRef.current, []);
210
+ const selectDropdownNode = (0, _jsxRuntime.jsx)(_selectDropdown.SelectDropdown, {
211
+ ref: dropdownRef,
212
+ isOpen: isOpen,
213
+ direction: dropdownDirection,
214
+ size: size,
215
+ options: optionItems,
216
+ value: value,
217
+ focusedIndex: focusedIndex,
218
+ maxHeight: maxHeight,
219
+ listboxId: `selectbox-options-${id || 'default'}`,
220
+ multiple: multiple,
221
+ showFooterButtons: multiple,
222
+ selectAllButtonText: selectAllButtonText,
223
+ showSelectAllAction: !isMaxSelectionActive,
224
+ componentType: "selectbox",
225
+ isKeyboardNavigation: isKeyboardNavigation,
226
+ activeDescendantId: activeDescendantId,
227
+ align: align,
228
+ className: shouldPortal ? 'ncua-select-dropdown--portal' : undefined,
229
+ style: shouldPortal && floatingStyle ? floatingStyle : undefined,
230
+ onOptionSelect: handleDropdownSelect,
231
+ onMouseMove: handleMouseMove,
232
+ onOptionHover: handleOptionHover,
233
+ onSelectAll: handleSelectAll,
234
+ onEdit: handleEdit,
235
+ onComplete: handleComplete,
236
+ children: children
237
+ });
238
+ const portaledDropdown = shouldPortal && portalContainer && isOpen ? /*#__PURE__*/(0, _reactDom.createPortal)(selectDropdownNode, portalContainer) : null;
177
239
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
178
240
  children: [(0, _jsxRuntime.jsxs)("div", {
179
241
  ref: internalRef,
@@ -212,31 +274,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
212
274
  'ncua-selectbox__arrow--up': isOpen
213
275
  })
214
276
  })]
215
- }), (0, _jsxRuntime.jsx)(_selectDropdown.SelectDropdown, {
216
- ref: dropdownRef,
217
- isOpen: isOpen,
218
- direction: dropdownDirection,
219
- size: size,
220
- options: optionItems,
221
- value: value,
222
- focusedIndex: focusedIndex,
223
- maxHeight: maxHeight,
224
- listboxId: `selectbox-options-${id || 'default'}`,
225
- multiple: multiple,
226
- showFooterButtons: multiple,
227
- selectAllButtonText: selectAllButtonText,
228
- componentType: "selectbox",
229
- isKeyboardNavigation: isKeyboardNavigation,
230
- activeDescendantId: activeDescendantId,
231
- align: align,
232
- onOptionSelect: handleDropdownSelect,
233
- onMouseMove: handleMouseMove,
234
- onOptionHover: handleOptionHover,
235
- onSelectAll: handleSelectAll,
236
- onEdit: handleEdit,
237
- onComplete: handleComplete,
238
- children: children
239
- })]
277
+ }), !shouldPortal && selectDropdownNode]
240
278
  }), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, {
241
279
  destructive: destructive,
242
280
  className: "ncua-hint-text",
@@ -254,7 +292,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
254
292
  close: true,
255
293
  onButtonClick: () => handleRemoveTag(tag.id)
256
294
  }, tag.id))
257
- })]
295
+ }), portaledDropdown]
258
296
  });
259
297
  });
260
298
  SelectBox.displayName = 'SelectBox';
@@ -13,6 +13,9 @@ var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
13
13
  var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
14
14
  var _uiAdminIcon = require("@ncds/ui-admin-icon");
15
15
  var _react = require("react");
16
+ var _reactDom = require("react-dom");
17
+ var _useFloatingPosition = require("../../../hooks/useFloatingPosition");
18
+ var _usePortalState = require("../../../hooks/usePortalState");
16
19
  var _button = require("../../action/button");
17
20
  var _utils = require("./utils");
18
21
  const DROPDOWN_ID_RADIX = 36;
@@ -149,6 +152,7 @@ const SortableConfigItem = _ref => {
149
152
  })]
150
153
  });
151
154
  };
155
+ // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 액션/설정 두 variant 통합 + drag-and-drop 필수 분기
152
156
  const Dropdown = props => {
153
157
  const {
154
158
  trigger,
@@ -157,14 +161,28 @@ const Dropdown = props => {
157
161
  groups,
158
162
  className,
159
163
  opened = false,
160
- closeOnClickOutside = true
164
+ closeOnClickOutside = true,
165
+ usePortal
161
166
  } = props;
162
167
  const variant = props.variant ?? 'action';
163
168
  const closeOnClickItem = variant === 'action' ? props.closeOnClickItem ?? true : false;
164
169
  const [isOpen, setIsOpen] = (0, _react.useState)(opened);
165
170
  const dropdownRef = (0, _react.useRef)(null);
166
171
  const triggerRef = (0, _react.useRef)(null);
172
+ const menuRef = (0, _react.useRef)(null);
167
173
  const menuItemsRef = (0, _react.useRef)(null);
174
+ const {
175
+ shouldPortal,
176
+ portalContainer
177
+ } = (0, _usePortalState.usePortalState)(usePortal);
178
+ const floatingStyle = (0, _useFloatingPosition.useFloatingPosition)({
179
+ enabled: shouldPortal,
180
+ isOpen,
181
+ triggerRef,
182
+ floatingRef: menuRef,
183
+ direction: 'down',
184
+ align
185
+ });
168
186
  const dropdownIdRef = (0, _react.useRef)(`ncua-dropdown-${Math.random().toString(DROPDOWN_ID_RADIX).slice(DROPDOWN_ID_SLICE_START, DROPDOWN_ID_SLICE_END)}`);
169
187
  const dropdownId = dropdownIdRef.current;
170
188
  (0, _react.useEffect)(() => {
@@ -227,7 +245,10 @@ const Dropdown = props => {
227
245
  triggerRef.current?.focus();
228
246
  };
229
247
  const handleClickOutside = event => {
230
- if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
248
+ const target = event.target;
249
+ const insideContainer = dropdownRef.current?.contains(target) ?? false;
250
+ const insidePortaledMenu = menuRef.current?.contains(target) ?? false;
251
+ if (!insideContainer && !insidePortaledMenu) {
231
252
  setIsOpen(false);
232
253
  }
233
254
  };
@@ -239,6 +260,7 @@ const Dropdown = props => {
239
260
  }
240
261
  }
241
262
  };
263
+ // biome-ignore lint/correctness/useExhaustiveDependencies: handleClickOutside는 안정적 참조
242
264
  (0, _react.useEffect)(() => {
243
265
  if (closeOnClickOutside) {
244
266
  document.addEventListener('mousedown', handleClickOutside);
@@ -248,6 +270,7 @@ const Dropdown = props => {
248
270
  }
249
271
  }, [closeOnClickOutside]);
250
272
  // ESC 키로 닫고 trigger로 포커스 복귀
273
+ // biome-ignore lint/correctness/useExhaustiveDependencies: closeAndRestoreFocus는 안정적 참조
251
274
  (0, _react.useEffect)(() => {
252
275
  if (!isOpen) return;
253
276
  const handleEsc = event => {
@@ -428,26 +451,31 @@ const Dropdown = props => {
428
451
  });
429
452
  };
430
453
  const dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : ''].filter(Boolean).join(' ');
454
+ const menuClasses = ['ncua-dropdown__menu', shouldPortal ? 'ncua-dropdown__menu--portal' : ''].filter(Boolean).join(' ');
455
+ const menuNode = isOpen ? (0, _jsxRuntime.jsxs)("div", {
456
+ ref: menuRef,
457
+ className: menuClasses,
458
+ role: variant === 'config' ? 'dialog' : 'menu',
459
+ "aria-label": variant === 'config' ? '설정' : undefined,
460
+ style: shouldPortal && floatingStyle ? floatingStyle : undefined,
461
+ children: [renderHeader(), (0, _jsxRuntime.jsx)("div", {
462
+ ref: menuItemsRef,
463
+ className: "ncua-dropdown__menu-items",
464
+ children: groups.map(group => {
465
+ // config variant uses draft.order to drive the rendered order
466
+ const orderedItems = variant === 'config' && draft ? draft.order.map(id => group.items.find(i => i.id === id)).filter(i => i !== undefined) : group.items;
467
+ return (0, _jsxRuntime.jsx)("div", {
468
+ className: "ncua-dropdown__group",
469
+ children: orderedItems.map(item => variant === 'config' ? renderConfigItem(item, group.sortable === true) : renderActionItem(item))
470
+ }, group.items[0]?.id);
471
+ })
472
+ }), renderFooter()]
473
+ }) : null;
474
+ const portaledMenu = shouldPortal && portalContainer && menuNode ? /*#__PURE__*/(0, _reactDom.createPortal)(menuNode, portalContainer) : null;
431
475
  return (0, _jsxRuntime.jsxs)("div", {
432
476
  className: dropdownClasses,
433
477
  ref: dropdownRef,
434
- children: [renderTrigger(), isOpen && (0, _jsxRuntime.jsxs)("div", {
435
- className: "ncua-dropdown__menu",
436
- role: variant === 'config' ? 'dialog' : 'menu',
437
- "aria-label": variant === 'config' ? '설정' : undefined,
438
- children: [renderHeader(), (0, _jsxRuntime.jsx)("div", {
439
- ref: menuItemsRef,
440
- className: "ncua-dropdown__menu-items",
441
- children: groups.map(group => {
442
- // config variant uses draft.order to drive the rendered order
443
- const orderedItems = variant === 'config' && draft ? draft.order.map(id => group.items.find(i => i.id === id)).filter(i => i !== undefined) : group.items;
444
- return (0, _jsxRuntime.jsx)("div", {
445
- className: "ncua-dropdown__group",
446
- children: orderedItems.map(item => variant === 'config' ? renderConfigItem(item, group.sortable === true) : renderActionItem(item))
447
- }, group.items[0]?.id);
448
- })
449
- }), renderFooter()]
450
- })]
478
+ children: [renderTrigger(), !shouldPortal && menuNode, portaledMenu]
451
479
  });
452
480
  };
453
481
  exports.Dropdown = Dropdown;
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.CalloutNotification = void 0;
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
+ var _classnames = _interopRequireDefault(require("classnames"));
9
+ var _react = require("react");
10
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
11
+ const CalloutNotification = exports.CalloutNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
12
+ let {
13
+ color = 'neutral',
14
+ className,
15
+ title,
16
+ ...rest
17
+ } = _ref;
18
+ return (0, _jsxRuntime.jsx)("div", {
19
+ ref: ref,
20
+ className: (0, _classnames.default)('ncua-callout-notification', `ncua-callout-notification--${color}`, className),
21
+ ...rest,
22
+ children: title
23
+ });
24
+ });
25
+ CalloutNotification.displayName = 'CalloutNotification';
@@ -8,19 +8,65 @@ var _jsxRuntime = require("react/jsx-runtime");
8
8
  var _uiAdminIcon = require("@ncds/ui-admin-icon");
9
9
  var _classnames = _interopRequireDefault(require("classnames"));
10
10
  var _react = require("react");
11
+ var _reactDom = require("react-dom");
11
12
  var _breakpoint = require("../../../constant/breakpoint");
12
13
  var _useMediaQuery = require("../../../hooks/useMediaQuery");
13
14
  var _button = require("../../action/button");
14
15
  var _ButtonCloseX = require("../../action/button/ButtonCloseX");
15
16
  var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
17
+ var _host = require("./host");
16
18
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
19
+ // 호스트 싱글톤은 vanilla/React 양쪽이 동일한 함수를 공유한다 — host.ts 가 가까운 진입점 역할을
20
+ // 하므로 React 컴포넌트는 deep relative path 로 vanilla internals 를 직접 import 하지 않는다.
21
+
22
+ /**
23
+ * 색상별 a11y role.
24
+ * - error/warning → role="alert" (implicit aria-live="assertive": 즉시 발화)
25
+ * - 그 외 → role="status" (implicit aria-live="polite": 현재 발화 끝난 후 발화)
26
+ * role 이 implicit live-region 을 가져오므로 호스트 컨테이너에는 aria-live 를 두지 않는다.
27
+ */
28
+ const ASSERTIVE_COLORS = {
29
+ error: true,
30
+ warning: true
31
+ };
17
32
  const iconMap = {
18
33
  neutral: _uiAdminIcon.Pin02,
19
34
  error: _uiAdminIcon.AlertTriangle,
20
35
  warning: _uiAdminIcon.AlertCircle,
21
36
  success: _uiAdminIcon.CheckCircle
22
- // info는 floating에서는 지원하지 않음
37
+ // info full-width 전용이라 floating 아이콘 매핑 없음.
38
+ };
39
+ /**
40
+ * NotificationColor → FeaturedIconColor 매핑.
41
+ * `info` 는 FeaturedIconColor 에 존재하지 않으므로 `neutral` 로 안전 fallback.
42
+ * `satisfies` 가 매핑 누락을 컴파일 타임에 강제하므로 향후 색상이 추가되면 즉시 타입 에러로 잡힌다.
43
+ */
44
+ const iconColorMap = {
45
+ neutral: 'neutral',
46
+ error: 'error',
47
+ warning: 'warning',
48
+ success: 'success',
49
+ info: 'neutral'
23
50
  };
51
+ /**
52
+ * `.ncua-floating-notification-host` 싱글톤을 보장하고 반환하는 훅.
53
+ *
54
+ * 이름의 `useMount...` 는 단순 조회가 아닌 **DOM 부수효과** 를 동반함을 신호한다 —
55
+ * 내부적으로 `mountFloatingNotificationHost()` 를 호출해 document.body 에 호스트를 append 하고
56
+ * (없으면) 글로벌 scroll/resize/MutationObserver 까지 부착한다. 호스트는 페이지 lifetime
57
+ * 싱글톤이므로 언마운트 시 제거하지 않는다.
58
+ *
59
+ * `mountFloatingNotificationHost` 는 **동기 함수** 이므로 effect 안의 호출 → setHost 가 같은 tick
60
+ * 에 끝나 cancellation race 가 없다. cancel flag 는 의미 없어 두지 않는다.
61
+ */
62
+ function useMountFloatingNotificationHost(enabled) {
63
+ const [host, setHost] = (0, _react.useState)(null);
64
+ (0, _react.useEffect)(() => {
65
+ if (!enabled) return;
66
+ setHost((0, _host.mountFloatingNotificationHost)());
67
+ }, [enabled]);
68
+ return host;
69
+ }
24
70
  const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
25
71
  let {
26
72
  title,
@@ -30,49 +76,65 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
30
76
  className,
31
77
  actions,
32
78
  autoClose = 0,
79
+ portal = false,
33
80
  ...rest
34
81
  } = _ref;
35
82
  const [shouldRemove, setShouldRemove] = (0, _react.useState)(false);
36
- const iconColor = color;
37
83
  const featuredIconProps = {
38
84
  icon: iconMap[color] || _uiAdminIcon.Pin02,
39
85
  size: 'sm',
40
- color: iconColor,
86
+ color: iconColorMap[color],
41
87
  theme: 'dark-circle'
42
88
  };
43
89
  const isMobile = (0, _useMediaQuery.useMediaQuery)(_breakpoint.MEDIA_QUERY.mobile, {
44
90
  onMatched: onClose
45
91
  });
92
+ // onClose 는 매 렌더 새 함수 ref 일 수 있으므로 ref 로 latest 만 보관.
93
+ // → autoClose 타이머 effect 의 deps 에서 onClose 를 빼서 타이머 재시작 회피.
94
+ // render 본문에서 직접 할당 — useEffect 로 미루면 같은 commit 안에서 fire 되는 타이머가 stale onClose 를 볼 위험.
95
+ const onCloseRef = (0, _react.useRef)(onClose);
96
+ onCloseRef.current = onClose;
46
97
  // autoClose 타이머 관리
47
98
  const timerRef = (0, _react.useRef)(null);
99
+ // onClose 는 onCloseRef 로 latest 만 추적하므로 deps 에서 제외 (의도된 패턴).
48
100
  (0, _react.useEffect)(() => {
49
- // autoClose가 0보다 크면 무조건 타이머 설정
101
+ // autoClose 가 0 보다 크면 타이머 설정.
50
102
  if (autoClose > 0) {
51
103
  timerRef.current = setTimeout(() => {
52
- if (onClose) {
53
- onClose();
54
- }
55
- // DOM에서 바로 제거
104
+ onCloseRef.current?.();
105
+ // DOM 에서 바로 제거
56
106
  setShouldRemove(true);
57
107
  }, autoClose);
58
108
  }
59
- // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
109
+ // cleanup: 컴포넌트 언마운트 또는 autoClose 변경 시 타이머 정리
60
110
  return () => {
61
111
  if (timerRef.current) {
62
112
  clearTimeout(timerRef.current);
63
113
  timerRef.current = null;
64
114
  }
65
115
  };
66
- }, [autoClose, onClose]);
116
+ }, [autoClose]);
117
+ // portal=true 일 때만 호스트가 필요하다.
118
+ const host = useMountFloatingNotificationHost(portal);
119
+ // a11y — 카드 root 의 role 과 제목/본문 ID. 색상에 따라 alert(error/warning) / status(나머지) 로 분기.
120
+ const reactId = (0, _react.useId)();
121
+ const titleId = `${reactId}-title`;
122
+ const descId = `${reactId}-desc`;
123
+ const role = ASSERTIVE_COLORS[color] ? 'alert' : 'status';
67
124
  // DOM에서 완전히 제거
68
125
  if (shouldRemove) {
69
126
  return null;
70
127
  }
71
- return (0, _jsxRuntime.jsxs)("div", {
128
+ const card =
129
+ // a11y/예측가능성 — caller 가 className/id 등 일부는 덮어쓸 수 있게 {...rest} 를 먼저 펼치고,
130
+ // role/aria-labelledby/aria-describedby 같은 컴포넌트 본질 prop 은 그 뒤에 두어 우선 적용.
131
+ (0, _jsxRuntime.jsxs)("div", {
132
+ ...rest,
72
133
  ref: ref,
73
134
  className: (0, _classnames.default)('ncua-floating-notification', `ncua-floating-notification--${color}`, className),
74
- role: "alert",
75
- ...rest,
135
+ role: role,
136
+ "aria-labelledby": titleId,
137
+ "aria-describedby": supportingText ? descId : undefined,
76
138
  children: [(0, _jsxRuntime.jsx)("div", {
77
139
  className: "ncua-floating-notification__content",
78
140
  children: (0, _jsxRuntime.jsxs)("div", {
@@ -85,10 +147,12 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
85
147
  children: [(0, _jsxRuntime.jsx)("div", {
86
148
  className: "ncua-floating-notification__title-wrapper",
87
149
  children: (0, _jsxRuntime.jsx)("span", {
150
+ id: titleId,
88
151
  className: "ncua-floating-notification__title",
89
152
  children: title
90
153
  })
91
154
  }), supportingText && (0, _jsxRuntime.jsx)("span", {
155
+ id: descId,
92
156
  className: "ncua-floating-notification__supporting-text",
93
157
  children: supportingText
94
158
  }), actions && (0, _jsxRuntime.jsx)("div", {
@@ -109,4 +173,13 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
109
173
  onClick: onClose
110
174
  })]
111
175
  });
176
+ // 기본은 인라인 렌더 — 부모 JSX 트리에 카드를 그대로 둔다.
177
+ if (!portal) {
178
+ return card;
179
+ }
180
+ // portal=true 인데 SSR이거나 첫 렌더(호스트 미생성)에서는 null. useEffect 후 host 설정되면 재렌더되어 portal 마운트.
181
+ if (!host) {
182
+ return null;
183
+ }
184
+ return /*#__PURE__*/(0, _reactDom.createPortal)(card, host);
112
185
  });
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.Notification = void 0;
7
7
  var _jsxRuntime = require("react/jsx-runtime");
8
8
  var _react = require("react");
9
+ var _CalloutNotification = require("./CalloutNotification");
9
10
  var _FloatingNotification = require("./FloatingNotification");
10
11
  var _FullWidthNotification = require("./FullWidthNotification");
11
12
  var _MessageNotification = require("./MessageNotification");
@@ -36,6 +37,12 @@ const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
36
37
  ref: ref
37
38
  });
38
39
  }
40
+ if (type === 'callout') {
41
+ return (0, _jsxRuntime.jsx)(_CalloutNotification.CalloutNotification, {
42
+ color: color,
43
+ ...rest
44
+ });
45
+ }
39
46
  return null;
40
47
  });
41
48
  Notification.displayName = 'Notification';
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "mountFloatingNotificationHost", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _notification.mountFloatingNotificationHost;
10
+ }
11
+ });
12
+ var _notification = require("../../../../assets/scripts/notification");