@ncds/ui-admin 1.8.3 → 1.8.5

package/dist/esm/src/components/forms-and-input/select-box/SelectBox.js

@@ -2,8 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronDown } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { COLOR } from '../../../../constant/color';
 import { useDropdown, useScrollLock } from '../../../hooks/dropdown';
+import { useFloatingPosition } from '../../../hooks/useFloatingPosition';
+import { usePortalState } from '../../../hooks/usePortalState';
 import { useMultiSelect } from '../../../utils/dropdown/multiSelect';
 import { Tag } from '../../feedback-and-status/tag';
 import { SelectDropdown } from '../../select-dropdown';
@@ -54,7 +57,9 @@ function DisplayValue(_ref) {
     })]
   });
 }
-const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 옵션/멀티/태그/포탈 등 필수 분기 통합
+) => {
   let {
     placeholder = '선택하세요',
     disabledPlaceholder = false,
@@ -68,7 +73,9 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref) => {
     disabled = false,
     maxHeight = DEFAULT_MAX_HEIGHT,
     multiple = false,
+    maxSelection,
     align = 'left',
+    usePortal,
     id,
     className,
     children,
@@ -79,6 +86,10 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref) => {
   } = _ref2;
   const internalRef = useRef(null);
   const dropdownRef = useRef(null);
+  const {
+    shouldPortal,
+    portalContainer
+  } = usePortalState(usePortal);
   const [selectedTags, setSelectedTags] = useState([]);
   const selectedOption = useMemo(() => {
     if (multiple) return null;
@@ -92,6 +103,13 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref) => {
   }, [multiple, selectedOption, placeholder]);
   const handleOptionSelect = option => {
     if (disabled) return;
+    if (multiple) {
+      const newValue = tryToggle(option.id, Array.isArray(value) ? value : []);
+      if (newValue === null) return;
+      onChange?.(newValue);
+      notifyRegister(register, newValue, multiple);
+      return;
+    }
     const newValue = computeNewValue(option, value, multiple);
     onChange?.(newValue);
     notifyRegister(register, newValue, multiple);
@@ -134,8 +152,12 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref) => {
     buttonText: selectAllButtonText,
     toggleSelectAll,
     getSelectedTagsData,
-    removeTag
-  } = useMultiSelect(currentSelectedValues, optionItems);
+    removeTag,
+    isMaxSelectionActive,
+    tryToggle
+  } = useMultiSelect(currentSelectedValues, optionItems, {
+    maxSelection
+  });
   const handleSelectAll = () => {
     if (!multiple || !onChange) return;
     const newSelectedValues = toggleSelectAll();
@@ -160,13 +182,53 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref) => {
     }
   };
   useScrollLock(isOpen, dropdownRef);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: optionItems 변경 시 너비 재계산 필요
   useLayoutEffect(() => {
     if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
       const dropdownWidth = dropdownRef.current.offsetWidth;
       internalRef.current.style.width = `${dropdownWidth}px`;
     }
   }, [autoWidth, isOpen, optionItems]);
+  const floatingStyle = useFloatingPosition({
+    enabled: shouldPortal,
+    isOpen,
+    triggerRef: internalRef,
+    floatingRef: dropdownRef,
+    direction: dropdownDirection,
+    align,
+    matchTriggerWidth: true
+  });
+  // biome-ignore lint/style/noNonNullAssertion: forwardRef 패턴에서 internalRef는 항상 존재
   useImperativeHandle(ref, () => internalRef.current, []);
+  const selectDropdownNode = _jsx(SelectDropdown, {
+    ref: dropdownRef,
+    isOpen: isOpen,
+    direction: dropdownDirection,
+    size: size,
+    options: optionItems,
+    value: value,
+    focusedIndex: focusedIndex,
+    maxHeight: maxHeight,
+    listboxId: `selectbox-options-${id || 'default'}`,
+    multiple: multiple,
+    showFooterButtons: multiple,
+    selectAllButtonText: selectAllButtonText,
+    showSelectAllAction: !isMaxSelectionActive,
+    componentType: "selectbox",
+    isKeyboardNavigation: isKeyboardNavigation,
+    activeDescendantId: activeDescendantId,
+    align: align,
+    className: shouldPortal ? 'ncua-select-dropdown--portal' : undefined,
+    style: shouldPortal && floatingStyle ? floatingStyle : undefined,
+    onOptionSelect: handleDropdownSelect,
+    onMouseMove: handleMouseMove,
+    onOptionHover: handleOptionHover,
+    onSelectAll: handleSelectAll,
+    onEdit: handleEdit,
+    onComplete: handleComplete,
+    children: children
+  });
+  const portaledDropdown = shouldPortal && portalContainer && isOpen ? /*#__PURE__*/createPortal(selectDropdownNode, portalContainer) : null;
   return _jsxs(_Fragment, {
     children: [_jsxs("div", {
       ref: internalRef,
@@ -205,31 +267,7 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref) => {
               'ncua-selectbox__arrow--up': isOpen
             })
           })]
-        }), _jsx(SelectDropdown, {
-          ref: dropdownRef,
-          isOpen: isOpen,
-          direction: dropdownDirection,
-          size: size,
-          options: optionItems,
-          value: value,
-          focusedIndex: focusedIndex,
-          maxHeight: maxHeight,
-          listboxId: `selectbox-options-${id || 'default'}`,
-          multiple: multiple,
-          showFooterButtons: multiple,
-          selectAllButtonText: selectAllButtonText,
-          componentType: "selectbox",
-          isKeyboardNavigation: isKeyboardNavigation,
-          activeDescendantId: activeDescendantId,
-          align: align,
-          onOptionSelect: handleDropdownSelect,
-          onMouseMove: handleMouseMove,
-          onOptionHover: handleOptionHover,
-          onSelectAll: handleSelectAll,
-          onEdit: handleEdit,
-          onComplete: handleComplete,
-          children: children
-        })]
+        }), !shouldPortal && selectDropdownNode]
       }), hintText && _jsx(HintText, {
         destructive: destructive,
         className: "ncua-hint-text",
@@ -247,7 +285,7 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref) => {
         close: true,
         onButtonClick: () => handleRemoveTag(tag.id)
       }, tag.id))
-    })]
+    }), portaledDropdown]
   });
 });
 SelectBox.displayName = 'SelectBox';

package/dist/esm/src/components/index.js

@@ -36,7 +36,10 @@ export * from './forms-and-input/toggle';
 export * from './image-and-icons/dot';
 export * from './image-and-icons/featured-icon';
 // Layout
+export * from './layout/block-container';
+export * from './layout/block-header';
 export * from './layout/divider';
+export * from './layout/page-title';
 // Navigation
 export * from './navigation/bread-crumb';
 export * from './navigation/horizontal-tab';

package/dist/esm/src/components/layout/block-container/BlockContainer.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const BlockContainerBase = _ref => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
+  return _jsx("section", {
+    className: classNames('ncua-block-container', className),
+    ...rest,
+    children: children
+  });
+};
+BlockContainerBase.displayName = 'BlockContainer';
+const Body = _ref2 => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref2;
+  return _jsx("div", {
+    className: classNames('ncua-block-container__body', className),
+    ...rest,
+    children: children
+  });
+};
+Body.displayName = 'BlockContainer.Body';
+export const BlockContainer = Object.assign(BlockContainerBase, {
+  Body
+});

package/dist/esm/src/components/layout/block-container/index.js

@@ -0,0 +1 @@
+export * from './BlockContainer';

package/dist/esm/src/components/layout/block-header/BlockHeader.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { Tooltip } from '../../overlays/tooltip/Tooltip';
+const ICON_SIZE = 24;
+const CollapsibleButton = _ref => {
+  let {
+    expanded,
+    onToggle
+  } = _ref;
+  return _jsx("button", {
+    type: "button",
+    className: "ncua-block-header__collapsible-btn",
+    onClick: onToggle,
+    "aria-expanded": expanded,
+    children: expanded ? _jsx(ChevronUp, {
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      color: "var(--gray-300)"
+    }) : _jsx(ChevronDown, {
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      color: "var(--gray-300)"
+    })
+  });
+};
+const BlockHeader = _ref2 => {
+  let {
+    title,
+    tooltip,
+    action,
+    showDivider = true,
+    badge,
+    description,
+    collapsible,
+    showRequiredNotice = false,
+    controlStrip,
+    children,
+    className,
+    ...rest
+  } = _ref2;
+  const hasColumnLayout = !!description;
+  const hasTabChildren = !!children;
+  const hasControlStrip = !!controlStrip;
+  const isCollapsed = !!collapsible && !collapsible.expanded;
+  return _jsxs("header", {
+    className: classNames('ncua-block-header', {
+      'ncua-block-header--column': hasColumnLayout,
+      'ncua-block-header--no-divider': !showDivider || hasTabChildren || isCollapsed,
+      'ncua-block-header--has-tab': hasTabChildren && !isCollapsed,
+      'ncua-block-header--has-control-strip': hasControlStrip,
+      'ncua-block-header--is-required': showRequiredNotice
+    }, className),
+    ...rest,
+    children: [_jsxs("div", {
+      className: "ncua-block-header__row",
+      children: [_jsxs("div", {
+        className: "ncua-block-header__title-area",
+        children: [_jsx("span", {
+          className: "ncua-block-header__title",
+          children: title
+        }), tooltip && _jsx(Tooltip, {
+          content: tooltip,
+          size: "sm",
+          position: "top",
+          hideArrow: true,
+          iconType: "fill"
+        }), badge && _jsx("span", {
+          className: "ncua-block-header__badge",
+          children: badge
+        })]
+      }), _jsxs("div", {
+        className: "ncua-block-header__action-area",
+        children: [showRequiredNotice && _jsxs("span", {
+          className: "ncua-block-header__required-notice",
+          children: [_jsx("span", {
+            className: "ncua-block-header__required-notice--red",
+            children: "* \uB294 \uD544\uC218 \uC785\uB825"
+          }), _jsx("span", {
+            className: "ncua-block-header__required-notice--gray",
+            children: " \uD56D\uBAA9\uC785\uB2C8\uB2E4."
+          })]
+        }), action, collapsible && _jsx(CollapsibleButton, {
+          ...collapsible
+        })]
+      })]
+    }), hasColumnLayout && _jsx("p", {
+      className: "ncua-block-header__description",
+      children: description
+    }), hasControlStrip && _jsx("div", {
+      className: "ncua-block-header__control-strip",
+      children: controlStrip
+    }), hasTabChildren && !isCollapsed && _jsx("div", {
+      className: "ncua-block-header__tabs",
+      children: children
+    })]
+  });
+};
+BlockHeader.displayName = 'BlockHeader';
+export { BlockHeader };

package/dist/esm/src/components/layout/block-header/SubTitle.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Tooltip } from '../../overlays/tooltip/Tooltip';
+const SubTitle = _ref => {
+  let {
+    title,
+    size = 'sm',
+    tooltip,
+    description,
+    error,
+    action,
+    required = false,
+    className,
+    ...rest
+  } = _ref;
+  return _jsxs("div", {
+    className: classNames('ncua-sub-title', `ncua-sub-title--${size}`, className),
+    ...rest,
+    children: [_jsxs("div", {
+      className: "ncua-sub-title__title-row",
+      children: [_jsxs("div", {
+        className: "ncua-sub-title__title-area",
+        children: [required && _jsx("span", {
+          className: "ncua-sub-title__required-marker",
+          children: "*"
+        }), _jsx("span", {
+          className: "ncua-sub-title__title",
+          children: title
+        }), tooltip && _jsx(Tooltip, {
+          content: tooltip,
+          size: "sm",
+          position: "right",
+          hideArrow: true
+        })]
+      }), action && _jsx("div", {
+        className: "ncua-sub-title__action",
+        children: action
+      })]
+    }), description && _jsx("p", {
+      className: "ncua-sub-title__description",
+      children: description
+    }), error && _jsx("p", {
+      className: "ncua-sub-title__error",
+      children: error
+    })]
+  });
+};
+SubTitle.displayName = 'BlockHeader.SubTitle';
+export { SubTitle };

package/dist/esm/src/components/layout/block-header/index.js

@@ -0,0 +1,2 @@
+export * from './BlockHeader';
+export * from './SubTitle';

package/dist/esm/src/components/layout/page-title/PageTitle.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { Fragment } from 'react';
+import { Button } from '../../action/button/Button';
+const renderBreadcrumb = items => _jsx("nav", {
+  className: "ncua-page-title__breadcrumb",
+  "aria-label": "breadcrumb",
+  children: items.map((item, i) =>
+  // biome-ignore lint/suspicious/noArrayIndexKey: breadcrumb items may have duplicate labels
+  _jsx(Fragment, {
+    children: i < items.length - 1 ? _jsxs(_Fragment, {
+      children: [_jsx("span", {
+        className: "ncua-page-title__breadcrumb-item",
+        children: item.href ? _jsx("a", {
+          href: item.href,
+          children: item.label
+        }) : item.label
+      }), _jsx(ChevronRight, {
+        className: "ncua-page-title__breadcrumb-separator"
+      })]
+    }) : _jsx("span", {
+      className: "ncua-page-title__breadcrumb-current",
+      children: item.label
+    })
+  }, i))
+});
+const renderBackButton = onBack => _jsx(Button, {
+  label: "",
+  hierarchy: "secondary-gray",
+  size: "xs",
+  onlyIcon: true,
+  leadingIcon: {
+    type: 'icon',
+    icon: ChevronLeft
+  },
+  onClick: onBack,
+  "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0\uB85C \uB3CC\uC544\uAC00\uAE30",
+  className: "ncua-page-title__back-btn"
+});
+const PageTitle = _ref => {
+  let {
+    title,
+    variant = 'default',
+    breadcrumbItems,
+    onBack,
+    guideButton,
+    primaryAction,
+    secondaryAction,
+    className,
+    ...rest
+  } = _ref;
+  const isFixed = variant === 'fixed' || variant === 'fixed-detail';
+  const isDetail = variant === 'detail' || variant === 'fixed-detail';
+  const hasBreadcrumb = !isFixed && breadcrumbItems && breadcrumbItems.length > 0;
+  return _jsx("header", {
+    className: classNames('ncua-page-title', {
+      'ncua-page-title--fixed': isFixed
+    }, className),
+    ...rest,
+    children: _jsx("div", {
+      className: "ncua-page-title__page-header",
+      children: _jsxs("div", {
+        className: classNames('ncua-page-title__header', {
+          'ncua-page-title__header--has-breadcrumb': hasBreadcrumb
+        }),
+        children: [_jsxs("div", {
+          className: "ncua-page-title__container",
+          children: [hasBreadcrumb && renderBreadcrumb(breadcrumbItems), _jsxs("div", {
+            className: "ncua-page-title__title-row",
+            children: [isDetail && onBack && renderBackButton(onBack), _jsx("h1", {
+              className: "ncua-page-title__title",
+              children: title
+            }), guideButton && _jsx("div", {
+              className: "ncua-page-title__guide-btn",
+              children: guideButton
+            })]
+          })]
+        }), (secondaryAction || primaryAction) && _jsxs("div", {
+          className: "ncua-page-title__actions",
+          children: [secondaryAction, primaryAction]
+        })]
+      })
+    })
+  });
+};
+PageTitle.displayName = 'PageTitle';
+export { PageTitle };

package/dist/esm/src/components/layout/page-title/index.js

@@ -0,0 +1 @@
+export * from './PageTitle';

package/dist/esm/src/components/overlays/dropdown/Dropdown.js

@@ -7,6 +7,9 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { DotsGrid02, DotsVertical, Eye, EyeOff } from '@ncds/ui-admin-icon';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useFloatingPosition } from '../../../hooks/useFloatingPosition';
+import { usePortalState } from '../../../hooks/usePortalState';
 import { Button } from '../../action/button';
 import { applyDraftToItems, arrayReorderByEdge, hasDraftChanged, initDraftState } from './utils';
 const DROPDOWN_ID_RADIX = 36;
@@ -143,6 +146,7 @@ const SortableConfigItem = _ref => {
     })]
   });
 };
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 액션/설정 두 variant 통합 + drag-and-drop 필수 분기
 export const Dropdown = props => {
   const {
     trigger,
@@ -151,14 +155,28 @@ export const Dropdown = props => {
     groups,
     className,
     opened = false,
-    closeOnClickOutside = true
+    closeOnClickOutside = true,
+    usePortal
   } = props;
   const variant = props.variant ?? 'action';
   const closeOnClickItem = variant === 'action' ? props.closeOnClickItem ?? true : false;
   const [isOpen, setIsOpen] = useState(opened);
   const dropdownRef = useRef(null);
   const triggerRef = useRef(null);
+  const menuRef = useRef(null);
   const menuItemsRef = useRef(null);
+  const {
+    shouldPortal,
+    portalContainer
+  } = usePortalState(usePortal);
+  const floatingStyle = useFloatingPosition({
+    enabled: shouldPortal,
+    isOpen,
+    triggerRef,
+    floatingRef: menuRef,
+    direction: 'down',
+    align
+  });
   const dropdownIdRef = useRef(`ncua-dropdown-${Math.random().toString(DROPDOWN_ID_RADIX).slice(DROPDOWN_ID_SLICE_START, DROPDOWN_ID_SLICE_END)}`);
   const dropdownId = dropdownIdRef.current;
   useEffect(() => {
@@ -221,7 +239,10 @@ export const Dropdown = props => {
     triggerRef.current?.focus();
   };
   const handleClickOutside = event => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+    const target = event.target;
+    const insideContainer = dropdownRef.current?.contains(target) ?? false;
+    const insidePortaledMenu = menuRef.current?.contains(target) ?? false;
+    if (!insideContainer && !insidePortaledMenu) {
       setIsOpen(false);
     }
   };
@@ -233,6 +254,7 @@ export const Dropdown = props => {
       }
     }
   };
+  // biome-ignore lint/correctness/useExhaustiveDependencies: handleClickOutside는 안정적 참조
   useEffect(() => {
     if (closeOnClickOutside) {
       document.addEventListener('mousedown', handleClickOutside);
@@ -242,6 +264,7 @@ export const Dropdown = props => {
     }
   }, [closeOnClickOutside]);
   // ESC 키로 닫고 trigger로 포커스 복귀
+  // biome-ignore lint/correctness/useExhaustiveDependencies: closeAndRestoreFocus는 안정적 참조
   useEffect(() => {
     if (!isOpen) return;
     const handleEsc = event => {
@@ -422,25 +445,30 @@ export const Dropdown = props => {
     });
   };
   const dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : ''].filter(Boolean).join(' ');
+  const menuClasses = ['ncua-dropdown__menu', shouldPortal ? 'ncua-dropdown__menu--portal' : ''].filter(Boolean).join(' ');
+  const menuNode = isOpen ? _jsxs("div", {
+    ref: menuRef,
+    className: menuClasses,
+    role: variant === 'config' ? 'dialog' : 'menu',
+    "aria-label": variant === 'config' ? '설정' : undefined,
+    style: shouldPortal && floatingStyle ? floatingStyle : undefined,
+    children: [renderHeader(), _jsx("div", {
+      ref: menuItemsRef,
+      className: "ncua-dropdown__menu-items",
+      children: groups.map(group => {
+        // config variant uses draft.order to drive the rendered order
+        const orderedItems = variant === 'config' && draft ? draft.order.map(id => group.items.find(i => i.id === id)).filter(i => i !== undefined) : group.items;
+        return _jsx("div", {
+          className: "ncua-dropdown__group",
+          children: orderedItems.map(item => variant === 'config' ? renderConfigItem(item, group.sortable === true) : renderActionItem(item))
+        }, group.items[0]?.id);
+      })
+    }), renderFooter()]
+  }) : null;
+  const portaledMenu = shouldPortal && portalContainer && menuNode ? /*#__PURE__*/createPortal(menuNode, portalContainer) : null;
   return _jsxs("div", {
     className: dropdownClasses,
     ref: dropdownRef,
-    children: [renderTrigger(), isOpen && _jsxs("div", {
-      className: "ncua-dropdown__menu",
-      role: variant === 'config' ? 'dialog' : 'menu',
-      "aria-label": variant === 'config' ? '설정' : undefined,
-      children: [renderHeader(), _jsx("div", {
-        ref: menuItemsRef,
-        className: "ncua-dropdown__menu-items",
-        children: groups.map(group => {
-          // config variant uses draft.order to drive the rendered order
-          const orderedItems = variant === 'config' && draft ? draft.order.map(id => group.items.find(i => i.id === id)).filter(i => i !== undefined) : group.items;
-          return _jsx("div", {
-            className: "ncua-dropdown__group",
-            children: orderedItems.map(item => variant === 'config' ? renderConfigItem(item, group.sortable === true) : renderActionItem(item))
-          }, group.items[0]?.id);
-        })
-      }), renderFooter()]
-    })]
+    children: [renderTrigger(), !shouldPortal && menuNode, portaledMenu]
   });
 };

package/dist/esm/src/components/overlays/notification/CalloutNotification.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+const CalloutNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    color = 'neutral',
+    className,
+    title,
+    ...rest
+  } = _ref;
+  return _jsx("div", {
+    ref: ref,
+    className: classNames('ncua-callout-notification', `ncua-callout-notification--${color}`, className),
+    ...rest,
+    children: title
+  });
+});
+CalloutNotification.displayName = 'CalloutNotification';
+export { CalloutNotification };