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

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

@@ -8,7 +8,10 @@ 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");
 var _multiSelect = require("../../../utils/dropdown/multiSelect");
 var _button = require("../../action/button");
 var _tag = require("../../feedback-and-status/tag");
@@ -27,7 +30,49 @@ const notifyFormChange = (register, multiple, newValue) => {
     });
   }
 };
-const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.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__*/(0, _reactDom.createPortal)(node, portalContainer)
+  };
+};
+const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     placeholder = '검색하세요',
     id,
@@ -51,11 +96,19 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
     maxSelection,
     onEdit,
     onComplete,
+    usePortal = false,
     ...props
-  } = _ref;
+  } = _ref2;
   const internalRef = (0, _react.useRef)(null);
+  // 인라인 패널의 offset parent 가 __content 다. Portal 좌표도 같은 박스를 기준으로 잡아야
+  // label·hintText 가 있을 때 두 모드의 패널 위치가 어긋나지 않는다.
+  const contentRef = (0, _react.useRef)(null);
   const dropdownRef = (0, _react.useRef)(null);
   const inputRef = (0, _react.useRef)(null);
+  const {
+    shouldPortal,
+    portalContainer
+  } = (0, _usePortalState.usePortalState)(usePortal);
   const [inputValue, setInputValue] = (0, _react.useState)(searchValue);
   const [showAllItems, setShowAllItems] = (0, _react.useState)(false);
   const [selectedTags, setSelectedTags] = (0, _react.useState)([]);
@@ -108,6 +161,9 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   } = (0, _dropdown.useDropdown)({
     triggerRef: internalRef,
     dropdownRef,
+    // Portal 모드에서는 hintText 등으로 root 가 content 보다 아래까지 차지할 수 있어
+    // internalRef 기준 direction 판정이 잘못될 수 있다. contentRef 로 교정한다.
+    positionRef: shouldPortal ? contentRef : undefined,
     maxHeight,
     itemCount: optionItems.length,
     optionItems: optionItems,
@@ -140,6 +196,14 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
     // 나머지는 useDropdown 훅에서 처리
     dropdownHandleKeyDown(e);
   };
+  const floatingStyle = (0, _useFloatingPosition.useFloatingPosition)({
+    enabled: shouldPortal,
+    isOpen,
+    triggerRef: contentRef,
+    floatingRef: dropdownRef,
+    direction: dropdownDirection,
+    matchTriggerWidth: true
+  });
   // biome-ignore lint/style/noNonNullAssertion: forwardRef 패턴에서 internalRef는 첫 렌더 후 항상 존재
   (0, _react.useImperativeHandle)(ref, () => internalRef.current, []);
   const trailingElement = {
@@ -210,6 +274,47 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   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 = (0, _jsxRuntime.jsxs)(_selectDropdown.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 ? (0, _jsxRuntime.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 (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [(0, _jsxRuntime.jsxs)("div", {
       ref: internalRef,
@@ -220,6 +325,7 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
       }, className),
       ...props,
       children: [(0, _jsxRuntime.jsxs)("div", {
+        ref: contentRef,
         className: "ncua-combobox__content",
         children: [(0, _jsxRuntime.jsx)(_InputBase.InputBase, {
           ref: inputRef,
@@ -246,32 +352,7 @@ const ComboBox = exports.ComboBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
             setInputValue('');
             onSearch?.('');
           }
-        }), (0, _jsxRuntime.jsxs)(_selectDropdown.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 ? (0, _jsxRuntime.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 && (0, _jsxRuntime.jsx)("input", {
         type: "hidden",
         ...register,