@ncds/ui-admin 1.8.24 → 1.8.25-alpha.1

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

@@ -2,7 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronSelectorVertical, SearchLg } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useDropdown } from '../../../hooks/dropdown';
+import { useFloatingPosition } from '../../../hooks/useFloatingPosition';
+import { usePortalState } from '../../../hooks/usePortalState';
 import { useMultiSelect } from '../../../utils/dropdown/multiSelect';
 import { Button } from '../../action/button';
 import { Tag } from '../../feedback-and-status/tag';
@@ -20,7 +23,49 @@ const notifyFormChange = (register, multiple, newValue) => {
     });
   }
 };
-const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
+/**
+ * Portal 모드에서만 패널에 `--portal` 클래스와 fixed 좌표를 얹는다.
+ * floatingStyle 이 null 인 초기 레이아웃 직전에는 클래스만 붙지만,
+ * useLayoutEffect 가 paint 전에 좌표를 채우므로 빈 fixed 가 노출되지 않는다.
+ */
+const resolvePortalPanelBinding = (shouldPortal, floatingStyle) => {
+  if (!shouldPortal) {
+    return {};
+  }
+  return {
+    className: 'ncua-select-dropdown--portal',
+    style: floatingStyle ?? undefined
+  };
+};
+/**
+ * 패널 노드를 인라인·Portal 두 마운트 지점 중 한 곳에만 넘긴다. 양쪽에 두면 dropdownRef 가
+ * 나중 노드로 덮여 외부 클릭 판정과 키보드 스크롤이 유령 노드를 가리키게 된다.
+ */
+const resolveDropdownMounts = _ref => {
+  let {
+    node,
+    shouldPortal,
+    portalContainer,
+    isOpen
+  } = _ref;
+  if (!shouldPortal) {
+    return {
+      inlineDropdown: node,
+      portaledDropdown: null
+    };
+  }
+  if (!portalContainer || !isOpen) {
+    return {
+      inlineDropdown: null,
+      portaledDropdown: null
+    };
+  }
+  return {
+    inlineDropdown: null,
+    portaledDropdown: /*#__PURE__*/createPortal(node, portalContainer)
+  };
+};
+const ComboBox = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     placeholder = '검색하세요',
     id,
@@ -44,11 +89,19 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     maxSelection,
     onEdit,
     onComplete,
+    usePortal = false,
     ...props
-  } = _ref;
+  } = _ref2;
   const internalRef = useRef(null);
+  // 인라인 패널의 offset parent 가 __content 다. Portal 좌표도 같은 박스를 기준으로 잡아야
+  // label·hintText 가 있을 때 두 모드의 패널 위치가 어긋나지 않는다.
+  const contentRef = useRef(null);
   const dropdownRef = useRef(null);
   const inputRef = useRef(null);
+  const {
+    shouldPortal,
+    portalContainer
+  } = usePortalState(usePortal);
   const [inputValue, setInputValue] = useState(searchValue);
   const [showAllItems, setShowAllItems] = useState(false);
   const [selectedTags, setSelectedTags] = useState([]);
@@ -101,6 +154,9 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = useDropdown({
     triggerRef: internalRef,
     dropdownRef,
+    // Portal 모드에서는 hintText 등으로 root 가 content 보다 아래까지 차지할 수 있어
+    // internalRef 기준 direction 판정이 잘못될 수 있다. contentRef 로 교정한다.
+    positionRef: shouldPortal ? contentRef : undefined,
     maxHeight,
     itemCount: optionItems.length,
     optionItems: optionItems,
@@ -133,6 +189,14 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     // 나머지는 useDropdown 훅에서 처리
     dropdownHandleKeyDown(e);
   };
+  const floatingStyle = useFloatingPosition({
+    enabled: shouldPortal,
+    isOpen,
+    triggerRef: contentRef,
+    floatingRef: dropdownRef,
+    direction: dropdownDirection,
+    matchTriggerWidth: true
+  });
   // biome-ignore lint/style/noNonNullAssertion: forwardRef 패턴에서 internalRef는 첫 렌더 후 항상 존재
   useImperativeHandle(ref, () => internalRef.current, []);
   const trailingElement = {
@@ -203,6 +267,47 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   const showFooter = multiple || showFooterButtons;
   const hiddenInputValue = multiple ? JSON.stringify(value || []) : String(value || '');
   const hasTags = selectedTags.length > 0;
+  const {
+    className: portalPanelClassName,
+    style: portalPanelStyle
+  } = resolvePortalPanelBinding(shouldPortal, floatingStyle);
+  const selectDropdownNode = _jsxs(SelectDropdown, {
+    ref: dropdownRef,
+    isOpen: isOpen,
+    direction: dropdownDirection,
+    size: size,
+    options: displayedOptions,
+    value: value,
+    focusedIndex: focusedIndex,
+    maxHeight: maxHeight,
+    listboxId: comboboxId,
+    onOptionSelect: handleDropdownSelect,
+    onMouseMove: handleMouseMove,
+    isKeyboardNavigation: isKeyboardNavigation,
+    multiple: multiple,
+    showFooterButtons: showFooter,
+    selectAllButtonText: selectAllButtonText,
+    showSelectAllAction: !isMaxSelectionActive,
+    onSelectAll: handleSelectAll,
+    onEdit: handleEdit,
+    onComplete: handleComplete,
+    componentType: "combobox",
+    className: portalPanelClassName,
+    style: portalPanelStyle,
+    children: [showNoResults ? _jsx("li", {
+      className: "ncua-select-dropdown__no-results",
+      children: "\uC77C\uCE58\uD558\uB294 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+    }) : null, children]
+  });
+  const {
+    inlineDropdown,
+    portaledDropdown
+  } = resolveDropdownMounts({
+    node: selectDropdownNode,
+    shouldPortal,
+    portalContainer,
+    isOpen
+  });
   return _jsxs(_Fragment, {
     children: [_jsxs("div", {
       ref: internalRef,
@@ -213,6 +318,7 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       }, className),
       ...props,
       children: [_jsxs("div", {
+        ref: contentRef,
         className: "ncua-combobox__content",
         children: [_jsx(InputBase, {
           ref: inputRef,
@@ -239,32 +345,7 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
             setInputValue('');
             onSearch?.('');
           }
-        }), _jsxs(SelectDropdown, {
-          ref: dropdownRef,
-          isOpen: isOpen,
-          direction: dropdownDirection,
-          size: size,
-          options: displayedOptions,
-          value: value,
-          focusedIndex: focusedIndex,
-          maxHeight: maxHeight,
-          listboxId: comboboxId,
-          onOptionSelect: handleDropdownSelect,
-          onMouseMove: handleMouseMove,
-          isKeyboardNavigation: isKeyboardNavigation,
-          multiple: multiple,
-          showFooterButtons: showFooter,
-          selectAllButtonText: selectAllButtonText,
-          showSelectAllAction: !isMaxSelectionActive,
-          onSelectAll: handleSelectAll,
-          onEdit: handleEdit,
-          onComplete: handleComplete,
-          componentType: "combobox",
-          children: [showNoResults ? _jsx("li", {
-            className: "ncua-select-dropdown__no-results",
-            children: "\uC77C\uCE58\uD558\uB294 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
-          }) : null, children]
-        })]
+        }), inlineDropdown, portaledDropdown]
       }), register && _jsx("input", {
         type: "hidden",
         ...register,