@ncds/ui-admin 1.8.3 → 1.8.5

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

@@ -8,8 +8,11 @@ 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 _color = require("../../../../constant/color");
 var _dropdown = require("../../../hooks/dropdown");
+var _useFloatingPosition = require("../../../hooks/useFloatingPosition");
+var _usePortalState = require("../../../hooks/usePortalState");
 var _multiSelect = require("../../../utils/dropdown/multiSelect");
 var _tag = require("../../feedback-and-status/tag");
 var _selectDropdown = require("../../select-dropdown");
@@ -61,7 +64,9 @@ function DisplayValue(_ref) {
     })]
   });
 }
-const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 옵션/멀티/태그/포탈 등 필수 분기 통합
+) => {
   let {
     placeholder = '선택하세요',
     disabledPlaceholder = false,
@@ -75,7 +80,9 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     disabled = false,
     maxHeight = DEFAULT_MAX_HEIGHT,
     multiple = false,
+    maxSelection,
     align = 'left',
+    usePortal,
     id,
     className,
     children,
@@ -86,6 +93,10 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
   } = _ref2;
   const internalRef = (0, _react.useRef)(null);
   const dropdownRef = (0, _react.useRef)(null);
+  const {
+    shouldPortal,
+    portalContainer
+  } = (0, _usePortalState.usePortalState)(usePortal);
   const [selectedTags, setSelectedTags] = (0, _react.useState)([]);
   const selectedOption = (0, _react.useMemo)(() => {
     if (multiple) return null;
@@ -99,6 +110,13 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
   }, [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);
@@ -141,8 +159,12 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     buttonText: selectAllButtonText,
     toggleSelectAll,
     getSelectedTagsData,
-    removeTag
-  } = (0, _multiSelect.useMultiSelect)(currentSelectedValues, optionItems);
+    removeTag,
+    isMaxSelectionActive,
+    tryToggle
+  } = (0, _multiSelect.useMultiSelect)(currentSelectedValues, optionItems, {
+    maxSelection
+  });
   const handleSelectAll = () => {
     if (!multiple || !onChange) return;
     const newSelectedValues = toggleSelectAll();
@@ -167,13 +189,53 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
     }
   };
   (0, _dropdown.useScrollLock)(isOpen, dropdownRef);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: optionItems 변경 시 너비 재계산 필요
   (0, _react.useLayoutEffect)(() => {
     if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
       const dropdownWidth = dropdownRef.current.offsetWidth;
       internalRef.current.style.width = `${dropdownWidth}px`;
     }
   }, [autoWidth, isOpen, optionItems]);
+  const floatingStyle = (0, _useFloatingPosition.useFloatingPosition)({
+    enabled: shouldPortal,
+    isOpen,
+    triggerRef: internalRef,
+    floatingRef: dropdownRef,
+    direction: dropdownDirection,
+    align,
+    matchTriggerWidth: true
+  });
+  // biome-ignore lint/style/noNonNullAssertion: forwardRef 패턴에서 internalRef는 항상 존재
   (0, _react.useImperativeHandle)(ref, () => internalRef.current, []);
+  const selectDropdownNode = (0, _jsxRuntime.jsx)(_selectDropdown.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__*/(0, _reactDom.createPortal)(selectDropdownNode, portalContainer) : null;
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [(0, _jsxRuntime.jsxs)("div", {
       ref: internalRef,
@@ -212,31 +274,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
               'ncua-selectbox__arrow--up': isOpen
             })
           })]
-        }), (0, _jsxRuntime.jsx)(_selectDropdown.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 && (0, _jsxRuntime.jsx)(_HintText.HintText, {
         destructive: destructive,
         className: "ncua-hint-text",
@@ -254,7 +292,7 @@ const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2
         close: true,
         onButtonClick: () => handleRemoveTag(tag.id)
       }, tag.id))
-    })]
+    }), portaledDropdown]
   });
 });
 SelectBox.displayName = 'SelectBox';

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

@@ -355,6 +355,28 @@ Object.keys(_featuredIcon).forEach(function (key) {
     }
   });
 });
+var _blockContainer = require("./layout/block-container");
+Object.keys(_blockContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _blockContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _blockContainer[key];
+    }
+  });
+});
+var _blockHeader = require("./layout/block-header");
+Object.keys(_blockHeader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _blockHeader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _blockHeader[key];
+    }
+  });
+});
 var _divider = require("./layout/divider");
 Object.keys(_divider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -366,6 +388,17 @@ Object.keys(_divider).forEach(function (key) {
     }
   });
 });
+var _pageTitle = require("./layout/page-title");
+Object.keys(_pageTitle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _pageTitle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _pageTitle[key];
+    }
+  });
+});
 var _breadCrumb = require("./navigation/bread-crumb");
 Object.keys(_breadCrumb).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockContainer = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BlockContainerBase = _ref => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
+  return (0, _jsxRuntime.jsx)("section", {
+    className: (0, _classnames.default)('ncua-block-container', className),
+    ...rest,
+    children: children
+  });
+};
+BlockContainerBase.displayName = 'BlockContainer';
+const Body = _ref2 => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref2;
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('ncua-block-container__body', className),
+    ...rest,
+    children: children
+  });
+};
+Body.displayName = 'BlockContainer.Body';
+const BlockContainer = exports.BlockContainer = Object.assign(BlockContainerBase, {
+  Body
+});

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _BlockContainer = require("./BlockContainer");
+Object.keys(_BlockContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BlockContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BlockContainer[key];
+    }
+  });
+});

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

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockHeader = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Tooltip = require("../../overlays/tooltip/Tooltip");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ICON_SIZE = 24;
+const CollapsibleButton = _ref => {
+  let {
+    expanded,
+    onToggle
+  } = _ref;
+  return (0, _jsxRuntime.jsx)("button", {
+    type: "button",
+    className: "ncua-block-header__collapsible-btn",
+    onClick: onToggle,
+    "aria-expanded": expanded,
+    children: expanded ? (0, _jsxRuntime.jsx)(_uiAdminIcon.ChevronUp, {
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      color: "var(--gray-300)"
+    }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.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 (0, _jsxRuntime.jsxs)("header", {
+    className: (0, _classnames.default)('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: [(0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-block-header__row",
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-block-header__title-area",
+        children: [(0, _jsxRuntime.jsx)("span", {
+          className: "ncua-block-header__title",
+          children: title
+        }), tooltip && (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+          content: tooltip,
+          size: "sm",
+          position: "top",
+          hideArrow: true,
+          iconType: "fill"
+        }), badge && (0, _jsxRuntime.jsx)("span", {
+          className: "ncua-block-header__badge",
+          children: badge
+        })]
+      }), (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-block-header__action-area",
+        children: [showRequiredNotice && (0, _jsxRuntime.jsxs)("span", {
+          className: "ncua-block-header__required-notice",
+          children: [(0, _jsxRuntime.jsx)("span", {
+            className: "ncua-block-header__required-notice--red",
+            children: "* \uB294 \uD544\uC218 \uC785\uB825"
+          }), (0, _jsxRuntime.jsx)("span", {
+            className: "ncua-block-header__required-notice--gray",
+            children: " \uD56D\uBAA9\uC785\uB2C8\uB2E4."
+          })]
+        }), action, collapsible && (0, _jsxRuntime.jsx)(CollapsibleButton, {
+          ...collapsible
+        })]
+      })]
+    }), hasColumnLayout && (0, _jsxRuntime.jsx)("p", {
+      className: "ncua-block-header__description",
+      children: description
+    }), hasControlStrip && (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-block-header__control-strip",
+      children: controlStrip
+    }), hasTabChildren && !isCollapsed && (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-block-header__tabs",
+      children: children
+    })]
+  });
+};
+exports.BlockHeader = BlockHeader;
+BlockHeader.displayName = 'BlockHeader';

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

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SubTitle = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Tooltip = require("../../overlays/tooltip/Tooltip");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SubTitle = _ref => {
+  let {
+    title,
+    size = 'sm',
+    tooltip,
+    description,
+    error,
+    action,
+    required = false,
+    className,
+    ...rest
+  } = _ref;
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('ncua-sub-title', `ncua-sub-title--${size}`, className),
+    ...rest,
+    children: [(0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-sub-title__title-row",
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-sub-title__title-area",
+        children: [required && (0, _jsxRuntime.jsx)("span", {
+          className: "ncua-sub-title__required-marker",
+          children: "*"
+        }), (0, _jsxRuntime.jsx)("span", {
+          className: "ncua-sub-title__title",
+          children: title
+        }), tooltip && (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+          content: tooltip,
+          size: "sm",
+          position: "right",
+          hideArrow: true
+        })]
+      }), action && (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-sub-title__action",
+        children: action
+      })]
+    }), description && (0, _jsxRuntime.jsx)("p", {
+      className: "ncua-sub-title__description",
+      children: description
+    }), error && (0, _jsxRuntime.jsx)("p", {
+      className: "ncua-sub-title__error",
+      children: error
+    })]
+  });
+};
+exports.SubTitle = SubTitle;
+SubTitle.displayName = 'BlockHeader.SubTitle';

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _BlockHeader = require("./BlockHeader");
+Object.keys(_BlockHeader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BlockHeader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BlockHeader[key];
+    }
+  });
+});
+var _SubTitle = require("./SubTitle");
+Object.keys(_SubTitle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SubTitle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SubTitle[key];
+    }
+  });
+});

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

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PageTitle = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _Button = require("../../action/button/Button");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const renderBreadcrumb = items => (0, _jsxRuntime.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
+  (0, _jsxRuntime.jsx)(_react.Fragment, {
+    children: i < items.length - 1 ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(0, _jsxRuntime.jsx)("span", {
+        className: "ncua-page-title__breadcrumb-item",
+        children: item.href ? (0, _jsxRuntime.jsx)("a", {
+          href: item.href,
+          children: item.label
+        }) : item.label
+      }), (0, _jsxRuntime.jsx)(_uiAdminIcon.ChevronRight, {
+        className: "ncua-page-title__breadcrumb-separator"
+      })]
+    }) : (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-page-title__breadcrumb-current",
+      children: item.label
+    })
+  }, i))
+});
+const renderBackButton = onBack => (0, _jsxRuntime.jsx)(_Button.Button, {
+  label: "",
+  hierarchy: "secondary-gray",
+  size: "xs",
+  onlyIcon: true,
+  leadingIcon: {
+    type: 'icon',
+    icon: _uiAdminIcon.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 (0, _jsxRuntime.jsx)("header", {
+    className: (0, _classnames.default)('ncua-page-title', {
+      'ncua-page-title--fixed': isFixed
+    }, className),
+    ...rest,
+    children: (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-page-title__page-header",
+      children: (0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)('ncua-page-title__header', {
+          'ncua-page-title__header--has-breadcrumb': hasBreadcrumb
+        }),
+        children: [(0, _jsxRuntime.jsxs)("div", {
+          className: "ncua-page-title__container",
+          children: [hasBreadcrumb && renderBreadcrumb(breadcrumbItems), (0, _jsxRuntime.jsxs)("div", {
+            className: "ncua-page-title__title-row",
+            children: [isDetail && onBack && renderBackButton(onBack), (0, _jsxRuntime.jsx)("h1", {
+              className: "ncua-page-title__title",
+              children: title
+            }), guideButton && (0, _jsxRuntime.jsx)("div", {
+              className: "ncua-page-title__guide-btn",
+              children: guideButton
+            })]
+          })]
+        }), (secondaryAction || primaryAction) && (0, _jsxRuntime.jsxs)("div", {
+          className: "ncua-page-title__actions",
+          children: [secondaryAction, primaryAction]
+        })]
+      })
+    })
+  });
+};
+exports.PageTitle = PageTitle;
+PageTitle.displayName = 'PageTitle';

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _PageTitle = require("./PageTitle");
+Object.keys(_PageTitle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PageTitle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PageTitle[key];
+    }
+  });
+});