@ncds/ui-admin 1.8.25-alpha.2 → 1.8.25

package/dist/cjs/src/components/feedback-and-status/badge/Badge.js

@@ -16,7 +16,7 @@ const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
 const NEW_BADGE_ICON_SIZE = {
   sm: 12,
-  md: 14
+  md: 16
 };
 const Badge = _ref => {
   let {

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

@@ -8,7 +8,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _reactDom = require("react-dom");
 var _dropdown = require("../../../hooks/dropdown");
 var _useFloatingPosition = require("../../../hooks/useFloatingPosition");
 var _usePortalState = require("../../../hooks/usePortalState");
@@ -18,6 +17,7 @@ var _tag = require("../../feedback-and-status/tag");
 var _selectDropdown = require("../../select-dropdown");
 var _HintText = require("../../shared/hintText/HintText");
 var _InputBase = require("../input-base/InputBase");
+var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const defaultMaxHeight = exports.defaultMaxHeight = 275;
 const notifyFormChange = (register, multiple, newValue) => {
@@ -30,49 +30,113 @@ const notifyFormChange = (register, multiple, newValue) => {
     });
   }
 };
+/** '' · undefined · null 이면 빈 값. 숫자 0은 빈 값이 아니다 */
+const isEmptyValue = value => value === '' || value == null;
+/** react-hook-form hidden input 값 — Tag 와 같은 빈 값 규칙(0은 값)을 따른다 */
+const toHiddenInputValue = (value, multiple) => {
+  if (multiple) return JSON.stringify(value || []);
+  return isEmptyValue(value) ? '' : String(value);
+};
+/** SelectDropdown 은 null 을 받지 않으므로 undefined 로 바꾼다 */
+const toDropdownValue = value => value ?? undefined;
+/** multiple 용 — 배열이 아니면(null · undefined 포함) 빈 배열 */
+const toIdArray = value => Array.isArray(value) ? value : [];
+/** 두 id 목록이 같은 id 들로 이루어졌는지 — 순서는 보지 않는다 (사용처가 onChange 값을 정렬해 돌려줘도 같은 값) */
+const isSameIds = (currentIds, nextIds) => currentIds.length === nextIds.length && currentIds.every(id => nextIds.includes(id));
+const isSameTags = (nextTags, prevTags) => nextTags.length === prevTags.length && nextTags.every((tag, index) => tag.id === prevTags[index].id && tag.label === prevTags[index].label);
+const findOption = (optionItems, id) => optionItems.find(option => option.id === id);
+/** 단일 모드 value 에 해당하는 옵션 — 빈 값·배열이면 없음 */
+const findSingleOption = (value, optionItems) => {
+  if (isEmptyValue(value) || Array.isArray(value)) return undefined;
+  return findOption(optionItems, value);
+};
 /**
- * Portal 모드에서만 패널에 `--portal` 클래스와 fixed 좌표를 얹는다.
- * floatingStyle 이 null 인 초기 레이아웃 직전에는 클래스만 붙지만,
- * useLayoutEffect 가 paint 전에 좌표를 채우므로 빈 fixed 가 노출되지 않는다.
+ * 단일 모드 Tag — value 와 optionItems 에서 계산한다.
+ * 검색 필터로 목록에서 빠진 경우에만, 같은 id 로 기억해 둔 Tag 를 대신 쓴다.
  */
-const resolvePortalPanelBinding = (shouldPortal, floatingStyle) => {
-  if (!shouldPortal) {
-    return {};
-  }
-  return {
-    className: 'ncua-select-dropdown--portal',
-    style: floatingStyle ?? undefined
+const resolveSingleTag = (value, optionItems, lastResolvedTag) => {
+  if (isEmptyValue(value) || Array.isArray(value)) return null;
+  const found = findOption(optionItems, value);
+  if (found) return {
+    id: found.id,
+    label: found.label
   };
+  return lastResolvedTag?.id === value ? lastResolvedTag : null;
+};
+/** 단일 모드 Tag 목록 (0~1개). 목록에서 찾은 Tag 를 기억해 검색 필터 중에도 라벨을 유지한다 */
+const useSingleSelectedTags = (value, optionItems, enabled) => {
+  const [lastResolvedTag, setLastResolvedTag] = (0, _react.useState)(null);
+  const found = enabled ? findSingleOption(value, optionItems) : undefined;
+  const foundId = found?.id;
+  const foundLabel = found?.label;
+  (0, _react.useEffect)(() => {
+    if (foundId === undefined || foundLabel === undefined) return;
+    setLastResolvedTag({
+      id: foundId,
+      label: foundLabel
+    });
+  }, [foundId, foundLabel]);
+  const selectedTag = enabled ? resolveSingleTag(value, optionItems, lastResolvedTag) : null;
+  return selectedTag ? [selectedTag] : [];
+};
+/** multiple 모드 Tag — 목록에서 못 찾은 id 는 이미 표시 중인 Tag 의 라벨을 쓴다 */
+const resolveMultipleTags = (ids, optionItems, prevTags) => {
+  const nextTags = ids.map(id => {
+    const found = findOption(optionItems, id);
+    return found ? {
+      id: found.id,
+      label: found.label
+    } : prevTags.find(tag => tag.id === id);
+  }).filter(tag => tag !== undefined);
+  // 결과가 같으면 이전 배열을 그대로 돌려준다 — 새 배열로 바꾸면 effect 가 다시 렌더를 일으킨다
+  return isSameTags(nextTags, prevTags) ? prevTags : nextTags;
 };
 /**
- * 패널 노드를 인라인·Portal 두 마운트 지점 중 한 곳에만 넘긴다. 양쪽에 두면 dropdownRef 가
- * 나중 노드로 덮여 외부 클릭 판정과 키보드 스크롤이 유령 노드를 가리키게 된다.
+ * multiple 모드 Tag — 「선택 완료」·X 클릭·외부 value 변경 때만 확정 id 를 바꾼다.
+ * ComboBox 가 직접 onChange 로 내보낸 값은 markEmitted 로 기록해 두고, 그 값이 value 로 돌아오면 한 번만 무시한다(확정 아님).
+ * 바깥 값이 들어오면 남아 있던 기록도 지운다 — 오래된 기록 때문에 이후 같은 바깥 값이 무시되지 않게 하기 위함.
+ * optionItems 만 바뀌면 확정 id 는 그대로 두고 라벨만 다시 찾는다 — 「선택 완료」 전 검색으로 Tag 가 확정되지 않게 하기 위함.
  */
-const resolveDropdownMounts = _ref => {
-  let {
-    node,
-    shouldPortal,
-    portalContainer,
-    isOpen
-  } = _ref;
-  if (!shouldPortal) {
-    return {
-      inlineDropdown: node,
-      portaledDropdown: null
-    };
-  }
-  if (!portalContainer || !isOpen) {
-    return {
-      inlineDropdown: null,
-      portaledDropdown: null
-    };
-  }
+const useMultipleSelectedTags = (value, optionItems, enabled) => {
+  const [selectedTags, setSelectedTags] = (0, _react.useState)([]);
+  const lastEmittedRef = (0, _react.useRef)(null);
+  const committedIdsRef = (0, _react.useRef)([]);
+  const prevValueIdsRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!enabled) return;
+    const ids = toIdArray(value);
+    const isEcho = lastEmittedRef.current !== null && isSameIds(ids, lastEmittedRef.current);
+    const isValueChanged = prevValueIdsRef.current === null || !isSameIds(ids, prevValueIdsRef.current);
+    prevValueIdsRef.current = ids;
+    if (isEcho) {
+      lastEmittedRef.current = null;
+    } else if (isValueChanged) {
+      committedIdsRef.current = ids;
+      lastEmittedRef.current = null;
+    }
+    setSelectedTags(prev => resolveMultipleTags(committedIdsRef.current, optionItems, prev));
+  }, [enabled, value, optionItems]);
+  /** 「선택 완료」로 Tag 를 확정한다 */
+  const commitTags = ids => {
+    committedIdsRef.current = ids;
+    setSelectedTags(prev => resolveMultipleTags(ids, optionItems, prev));
+  };
+  /** X 클릭 — 확정 id 에서 그 id 만 뺀다. value 기준으로 계산하면 「선택 완료」 전에 클릭한 항목까지 확정된다 */
+  const removeCommittedTag = tagId => {
+    commitTags(committedIdsRef.current.filter(id => id !== tagId));
+  };
+  /** ComboBox 가 onChange 로 내보낸 값을 기록한다 — value 로 돌아왔을 때 확정으로 보지 않기 위함 */
+  const markEmitted = ids => {
+    lastEmittedRef.current = ids;
+  };
   return {
-    inlineDropdown: null,
-    portaledDropdown: /*#__PURE__*/(0, _reactDom.createPortal)(node, portalContainer)
+    selectedTags,
+    commitTags,
+    removeCommittedTag,
+    markEmitted
   };
 };
-const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     placeholder = '검색하세요',
     id,
@@ -98,7 +162,7 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2,
     onComplete,
     usePortal = false,
     ...props
-  } = _ref2;
+  } = _ref;
   const internalRef = (0, _react.useRef)(null);
   // 인라인 패널의 offset parent 가 __content 다. Portal 좌표도 같은 박스를 기준으로 잡아야
   // label·hintText 가 있을 때 두 모드의 패널 위치가 어긋나지 않는다.
@@ -111,22 +175,24 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2,
   } = (0, _usePortalState.usePortalState)(usePortal);
   const [inputValue, setInputValue] = (0, _react.useState)(searchValue);
   const [showAllItems, setShowAllItems] = (0, _react.useState)(false);
-  const [selectedTags, setSelectedTags] = (0, _react.useState)([]);
+  const singleTags = useSingleSelectedTags(value, optionItems, !multiple);
+  const {
+    selectedTags,
+    commitTags,
+    removeCommittedTag,
+    markEmitted
+  } = useMultipleSelectedTags(value, optionItems, multiple);
   const handleOptionSelect = option => {
     if (disabled) return;
     if (multiple) {
       const newValue = tryToggle(option.id, Array.isArray(value) ? value : []);
       if (newValue === null) return;
+      markEmitted(newValue);
       onChange?.(newValue);
       notifyFormChange(register, multiple, newValue);
       return;
     }
     const newValue = option.id;
-    const tag = {
-      id: option.id,
-      label: option.label
-    };
-    setSelectedTags([tag]);
     onChange?.(newValue);
     notifyFormChange(register, multiple, newValue);
   };
@@ -233,7 +299,6 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2,
   const {
     buttonText: selectAllButtonText,
     toggleSelectAll,
-    getSelectedTagsData,
     removeTag,
     isMaxSelectionActive,
     tryToggle
@@ -243,6 +308,7 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2,
   const handleSelectAll = () => {
     if (!multiple || !onChange) return;
     const newSelectedValues = toggleSelectAll();
+    markEmitted(newSelectedValues);
     onChange(newSelectedValues);
   };
   const handleEdit = () => {
@@ -250,41 +316,43 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2,
   };
   const handleComplete = completedValue => {
     if (!multiple) return;
-    const tags = getSelectedTagsData();
-    setSelectedTags(tags);
+    commitTags(toIdArray(completedValue));
     setInputValue('');
     closeDropdown();
     onComplete?.(completedValue);
   };
   const handleRemoveTag = tagId => {
+    // X 버튼은 disabled 에서 숨기지만, 다른 호출 경로가 생겨도 값이 지워지지 않게 함수에서도 막는다
+    if (disabled) return;
     if (!onChange) return;
     if (multiple) {
       const newSelectedValues = removeTag(tagId);
+      markEmitted(newSelectedValues);
       onChange(newSelectedValues);
-      setSelectedTags(prev => prev.filter(tag => tag.id !== tagId));
+      removeCommittedTag(tagId);
       return;
     }
     onChange('');
-    setSelectedTags([]);
   };
   const comboboxId = `combobox-options-${id || 'default'}`;
   const hasVisibleOptions = showAllItems || inputValue;
   const displayedOptions = hasVisibleOptions ? optionItems : [];
   const showNoResults = !hasVisibleOptions || optionItems.length === 0;
   const showFooter = multiple || showFooterButtons;
-  const hiddenInputValue = multiple ? JSON.stringify(value || []) : String(value || '');
-  const hasTags = selectedTags.length > 0;
+  const hiddenInputValue = toHiddenInputValue(value, multiple);
+  const tags = multiple ? selectedTags : singleTags;
+  const hasTags = tags.length > 0;
   const {
     className: portalPanelClassName,
     style: portalPanelStyle
-  } = resolvePortalPanelBinding(shouldPortal, floatingStyle);
+  } = (0, _utils.resolvePortalPanelBinding)(shouldPortal, floatingStyle);
   const selectDropdownNode = (0, _jsxRuntime.jsxs)(_selectDropdown.SelectDropdown, {
     ref: dropdownRef,
     isOpen: isOpen,
     direction: dropdownDirection,
     size: size,
     options: displayedOptions,
-    value: value,
+    value: toDropdownValue(value),
     focusedIndex: focusedIndex,
     maxHeight: maxHeight,
     listboxId: comboboxId,
@@ -309,7 +377,7 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2,
   const {
     inlineDropdown,
     portaledDropdown
-  } = resolveDropdownMounts({
+  } = (0, _utils.resolveDropdownMounts)({
     node: selectDropdownNode,
     shouldPortal,
     portalContainer,
@@ -363,10 +431,10 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2,
       })]
     }), hasTags && (0, _jsxRuntime.jsx)("div", {
       className: "ncua-combobox__tags",
-      children: selectedTags.map(tag => (0, _jsxRuntime.jsx)(_tag.Tag, {
+      children: tags.map(tag => (0, _jsxRuntime.jsx)(_tag.Tag, {
         text: tag.label,
         size: "sm",
-        close: true,
+        close: !disabled,
         onButtonClick: () => handleRemoveTag(tag.id)
       }, tag.id))
     })]

package/dist/cjs/src/components/forms-and-input/combo-box/__tests__/ComboBox.portal.test.js

@@ -476,7 +476,7 @@ const clickButtonByLabel = (scope, label) => {
     (0, _vitest.expect)(onSearch).toHaveBeenCalledWith('사');
     (0, _vitest.expect)(view.content.querySelectorAll('.ncua-select-dropdown__option')).toHaveLength(createOptions().length);
   });
-  (0, _vitest.it)('옵션을 선택하면 onChange 가 호출되고 선택 태그가 표시된다', () => {
+  (0, _vitest.it)('옵션을 선택하면 onChange 가 호출된다', () => {
     // Given: 옵션이 노출된 기본 모드 ComboBox 에서
     const onChange = _vitest.vi.fn();
     const view = mountComboBox({
@@ -489,9 +489,9 @@ const clickButtonByLabel = (scope, label) => {
     (0, _testUtils.act)(() => {
       requireElement(view.content, '.ncua-select-dropdown__option').click();
     });
-    // Then: onChange 가 선택 값으로 호출되고 태그가 표시된다
+    // Then: onChange 가 선택 값으로 호출된다
+    // 선택 태그는 value 를 따르므로(#530) onChange 값을 value 로 돌려주는 경우의 태그 표시는 ComboBox.test.ts S-10 에서 검증한다
     (0, _vitest.expect)(onChange).toHaveBeenCalledWith('apple');
-    (0, _vitest.expect)(view.container.querySelectorAll('.ncua-combobox__tags .ncua-tag')).toHaveLength(1);
   });
   (0, _vitest.it)('Escape 를 누르면 인라인 패널이 닫힌다', () => {
     // Given: 열려 있는 기본 모드 ComboBox 에서