@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/cjs/src/components/navigation/horizontal-tab/HorizontalTab.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HorizontalTab = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodashEs = require("lodash-es");
+var _react = require("swiper/react");
+var _TabButton = require("../../tab/TabButton");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const UNDERLINE_GAP = 16;
+const DEFAULT_GAP = 8;
+const HorizontalTab = _ref => {
+  let {
+    type = 'button-primary',
+    size = 'sm',
+    activeTab,
+    fullWidth = false,
+    menus = [],
+    className
+  } = _ref;
+  const getTabGap = type => {
+    const gap = {
+      underline: UNDERLINE_GAP
+    };
+    return gap[type] ?? DEFAULT_GAP;
+  };
+  if (!menus.length) return null;
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('ncua-horizontal-tab', `ncua-horizontal-tab--${type}`, `ncua-horizontal-tab--${size}`, {
+      'full-width': fullWidth
+    }, className),
+    children: (0, _jsxRuntime.jsx)(_react.Swiper, {
+      slidesPerView: "auto",
+      spaceBetween: getTabGap(type),
+      children: menus.map(menu => {
+        const isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
+        return (0, _jsxRuntime.jsx)(_react.SwiperSlide, {
+          className: "ncua-horizontal-tab__item",
+          children: (0, _jsxRuntime.jsx)(_TabButton.TabButton, {
+            ...menu,
+            isActive: isActive,
+            tabButtonType: type,
+            size: size
+          })
+        }, (0, _lodashEs.uniqueId)('horizontal-tab'));
+      })
+    })
+  });
+};
+exports.HorizontalTab = HorizontalTab;

package/dist/cjs/src/components/navigation/pagination/NavButton.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavButton = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _button = require("../../action/button");
+const ICON_SIZE_PC = 16;
+const ICON_SIZE_MOBILE = 20;
+const NAV_BUTTON_CONFIG = {
+  first: {
+    label: '처음',
+    className: 'ncua-pagination__first',
+    getIcon: _isPC => _uiAdminIcon.ChevronLeftDouble
+  },
+  prev: {
+    label: '이전',
+    className: 'ncua-pagination__before',
+    getIcon: isPC => isPC ? _uiAdminIcon.ChevronLeft : _uiAdminIcon.ArrowLeft
+  },
+  next: {
+    label: '다음',
+    className: 'ncua-pagination__next',
+    getIcon: isPC => isPC ? _uiAdminIcon.ChevronRight : _uiAdminIcon.ArrowRight
+  },
+  last: {
+    label: '마지막',
+    className: 'ncua-pagination__last',
+    getIcon: _isPC => _uiAdminIcon.ChevronRightDouble
+  }
+};
+const NavButton = _ref => {
+  let {
+    type,
+    breakPoint,
+    noPrev,
+    noNext,
+    onClick
+  } = _ref;
+  const config = NAV_BUTTON_CONFIG[type];
+  const isNavigationButton = type === 'first' || type === 'prev' || type === 'next' || type === 'last';
+  const isFirstOrPrev = type === 'first' || type === 'prev';
+  const isNextOrLast = type === 'next' || type === 'last';
+  const disabled = (isFirstOrPrev ? noPrev : false) || (isNextOrLast ? noNext : false);
+  const isPC = breakPoint === 'pc';
+  // key를 제외한 공통 props
+  const buttonProps = {
+    label: config.label,
+    className: config.className,
+    onlyIcon: true,
+    leadingIcon: {
+      type: 'icon',
+      icon: config.getIcon(isPC),
+      size: isPC ? ICON_SIZE_PC : ICON_SIZE_MOBILE,
+      color: disabled ? 'gray200' : 'gray700'
+    },
+    hierarchy: 'secondary-gray',
+    size: isPC ? 'xs' : 'sm',
+    disabled,
+    onClick
+  };
+  // key 값 별도 계산
+  const buttonKey = isNavigationButton ? `${breakPoint}-${type}` : undefined;
+  return (0, _jsxRuntime.jsx)(_button.Button, {
+    ...buttonProps
+  }, buttonKey);
+};
+exports.NavButton = NavButton;

package/dist/cjs/src/components/navigation/vertical-tab/VerticalTab.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerticalTab = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Select = require("../../forms-and-input/select/Select");
+var _TabButton = require("../../tab/TabButton");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const VerticalTab = _ref => {
+  let {
+    type = 'button-primary',
+    breakPoint = 'pc',
+    activeTab,
+    menus,
+    onSelect
+  } = _ref;
+  const handleSelectChange = e => {
+    onSelect?.(e.target.value);
+  };
+  const optionItems = menus?.map(menu => ({
+    id: menu.id || '',
+    label: menu.label || ''
+  })) || [];
+  if (breakPoint === 'mobile') {
+    return (0, _jsxRuntime.jsx)(_Select.Select, {
+      value: activeTab,
+      onChange: handleSelectChange,
+      optionItems: optionItems,
+      size: "md"
+    });
+  }
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('ncua-vertical-tab', `ncua-vertical-tab--${type}`),
+    children: menus?.map(menu => {
+      const isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
+      return (0, _jsxRuntime.jsx)(_TabButton.TabButton, {
+        ...menu,
+        isActive: isActive,
+        tabButtonType: type,
+        size: "md"
+      }, menu.id);
+    })
+  });
+};
+exports.VerticalTab = VerticalTab;

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

@@ -0,0 +1,453 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _pointerOutsideOfPreview = require("@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview");
+var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
+var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
+var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _react = require("react");
+var _button = require("../../action/button");
+var _utils = require("./utils");
+const DROPDOWN_ID_RADIX = 36;
+const DROPDOWN_ID_SLICE_START = 2;
+const DROPDOWN_ID_SLICE_END = 9;
+const SortableConfigItem = _ref => {
+  let {
+    item,
+    isVisible,
+    showVisibilityToggle,
+    sortable,
+    dropdownId,
+    onToggleVisibility,
+    onMoveBy
+  } = _ref;
+  const ref = (0, _react.useRef)(null);
+  const handleRef = (0, _react.useRef)(null);
+  const ItemIcon = item.icon;
+  const [closestEdge, setClosestEdge] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    if (!sortable || !ref.current || !handleRef.current) return;
+    const itemEl = ref.current;
+    return (0, _combine.combine)((0, _adapter.draggable)({
+      element: handleRef.current,
+      getInitialData: () => ({
+        id: item.id,
+        dropdownId
+      }),
+      onGenerateDragPreview: _ref2 => {
+        let {
+          nativeSetDragImage
+        } = _ref2;
+        (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
+          nativeSetDragImage,
+          getOffset: (0, _pointerOutsideOfPreview.pointerOutsideOfPreview)({
+            x: '8px',
+            y: '8px'
+          }),
+          render: _ref3 => {
+            let {
+              container
+            } = _ref3;
+            const clone = itemEl.cloneNode(true);
+            clone.classList.add('ncua-dropdown__item--drag-preview');
+            clone.style.width = `${itemEl.getBoundingClientRect().width}px`;
+            container.appendChild(clone);
+            return () => {
+              container.removeChild(clone);
+            };
+          }
+        });
+      },
+      onDragStart: () => {
+        itemEl.classList.add('is-dragging');
+      },
+      onDrop: () => {
+        itemEl.classList.remove('is-dragging');
+      }
+    }), (0, _adapter.dropTargetForElements)({
+      element: ref.current,
+      getData: _ref4 => {
+        let {
+          input,
+          element
+        } = _ref4;
+        return (0, _closestEdge.attachClosestEdge)({
+          id: item.id,
+          dropdownId
+        }, {
+          input,
+          element,
+          allowedEdges: ['top', 'bottom']
+        });
+      },
+      onDragEnter: _ref5 => {
+        let {
+          self,
+          source
+        } = _ref5;
+        if (source.data.id === item.id) return;
+        setClosestEdge((0, _closestEdge.extractClosestEdge)(self.data));
+      },
+      onDrag: _ref6 => {
+        let {
+          self,
+          source
+        } = _ref6;
+        if (source.data.id === item.id) return;
+        setClosestEdge((0, _closestEdge.extractClosestEdge)(self.data));
+      },
+      onDragLeave: () => setClosestEdge(null),
+      onDrop: () => setClosestEdge(null)
+    }));
+  }, [sortable, item.id, dropdownId]);
+  const itemClasses = ['ncua-dropdown__item', 'ncua-dropdown__item--config', item.disabled ? 'is-disabled' : '', isVisible ? '' : 'is-hidden', item.className].filter(Boolean).join(' ');
+  return (0, _jsxRuntime.jsxs)("div", {
+    ref: ref,
+    className: itemClasses,
+    children: [closestEdge && (0, _jsxRuntime.jsx)("div", {
+      className: `ncua-dropdown__item-drop-indicator ncua-dropdown__item-drop-indicator--${closestEdge}`
+    }), sortable && (0, _jsxRuntime.jsx)("button", {
+      ref: handleRef,
+      type: "button",
+      className: "ncua-dropdown__item-drag-handle",
+      "aria-label": "\uC21C\uC11C \uBCC0\uACBD (\uC704/\uC544\uB798 \uBC29\uD5A5\uD0A4)",
+      onKeyDown: e => {
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          onMoveBy(item.id, -1);
+        } else if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          onMoveBy(item.id, 1);
+        }
+      },
+      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.DotsGrid02, {})
+    }), (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-dropdown__item-content",
+      children: (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-dropdown__item-text-group",
+        children: [ItemIcon && (0, _jsxRuntime.jsx)(ItemIcon, {
+          className: "ncua-dropdown__item-icon"
+        }), (0, _jsxRuntime.jsx)("span", {
+          className: "ncua-dropdown__item-text",
+          children: item.text
+        })]
+      })
+    }), showVisibilityToggle && (0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      className: "ncua-dropdown__item-visibility",
+      "aria-label": `${item.text} 노출`,
+      "aria-pressed": isVisible,
+      onClick: () => onToggleVisibility(item.id),
+      children: isVisible ? (0, _jsxRuntime.jsx)(_uiAdminIcon.Eye, {}) : (0, _jsxRuntime.jsx)(_uiAdminIcon.EyeOff, {})
+    })]
+  });
+};
+const Dropdown = props => {
+  const {
+    trigger,
+    align = 'left',
+    header,
+    groups,
+    className,
+    opened = false,
+    closeOnClickOutside = true
+  } = props;
+  const variant = props.variant ?? 'action';
+  const closeOnClickItem = variant === 'action' ? props.closeOnClickItem ?? true : false;
+  const [isOpen, setIsOpen] = (0, _react.useState)(opened);
+  const dropdownRef = (0, _react.useRef)(null);
+  const triggerRef = (0, _react.useRef)(null);
+  const menuItemsRef = (0, _react.useRef)(null);
+  const dropdownIdRef = (0, _react.useRef)(`ncua-dropdown-${Math.random().toString(DROPDOWN_ID_RADIX).slice(DROPDOWN_ID_SLICE_START, DROPDOWN_ID_SLICE_END)}`);
+  const dropdownId = dropdownIdRef.current;
+  (0, _react.useEffect)(() => {
+    setIsOpen(opened);
+  }, [opened]);
+  const initialDraft = variant === 'config' ? (0, _utils.initDraftState)(groups) : null;
+  const [draft, setDraft] = (0, _react.useState)(initialDraft);
+  // Reset draft to props baseline synchronously before paint to avoid a flash
+  // of "previous draft" state when reopening after a dismissed change.
+  (0, _react.useLayoutEffect)(() => {
+    if (variant !== 'config') return;
+    if (isOpen) {
+      setDraft((0, _utils.initDraftState)(groups));
+    } else {
+      setDraft(null);
+    }
+  }, [isOpen, variant, groups]);
+  // Listen for drag-drop events scoped to this dropdown
+  (0, _react.useEffect)(() => {
+    if (variant !== 'config' || !isOpen) return;
+    return (0, _adapter.monitorForElements)({
+      canMonitor: _ref7 => {
+        let {
+          source
+        } = _ref7;
+        return typeof source.data.id === 'string' && source.data.dropdownId === dropdownId;
+      },
+      onDrop: _ref8 => {
+        let {
+          source,
+          location
+        } = _ref8;
+        const target = location.current.dropTargets[0];
+        if (!target) return;
+        const fromId = source.data.id;
+        const toId = target.data.id;
+        if (typeof fromId !== 'string' || typeof toId !== 'string' || fromId === toId) return;
+        const edge = (0, _closestEdge.extractClosestEdge)(target.data);
+        const resolvedEdge = edge === 'bottom' ? 'bottom' : 'top';
+        setDraft(prev => prev ? {
+          ...prev,
+          order: (0, _utils.arrayReorderByEdge)(prev.order, fromId, toId, resolvedEdge)
+        } : prev);
+      }
+    });
+  }, [variant, isOpen, dropdownId]);
+  // Auto-scroll the items area while dragging near edges
+  (0, _react.useEffect)(() => {
+    if (variant !== 'config' || !isOpen || !menuItemsRef.current) return;
+    return (0, _element.autoScrollForElements)({
+      element: menuItemsRef.current
+    });
+  }, [variant, isOpen]);
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+  // 닫고 + 포커스를 trigger로 복귀 (a11y 권장)
+  const closeAndRestoreFocus = () => {
+    setIsOpen(false);
+    triggerRef.current?.focus();
+  };
+  const handleClickOutside = event => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+  const handleClickItem = item => {
+    if (!item.disabled && item.onClick) {
+      item.onClick();
+      if (closeOnClickItem) {
+        setIsOpen(false);
+      }
+    }
+  };
+  (0, _react.useEffect)(() => {
+    if (closeOnClickOutside) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [closeOnClickOutside]);
+  // ESC 키로 닫고 trigger로 포커스 복귀
+  (0, _react.useEffect)(() => {
+    if (!isOpen) return;
+    const handleEsc = event => {
+      if (event.key === 'Escape') {
+        closeAndRestoreFocus();
+      }
+    };
+    document.addEventListener('keydown', handleEsc);
+    return () => document.removeEventListener('keydown', handleEsc);
+  }, [isOpen]);
+  const renderTrigger = () => {
+    switch (trigger.type) {
+      case 'custom':
+        return (0, _jsxRuntime.jsx)("button", {
+          ref: triggerRef,
+          type: "button",
+          className: "ncua-dropdown__trigger",
+          onClick: toggleDropdown,
+          children: trigger.children
+        });
+      case 'icon':
+        {
+          const TriggerIcon = trigger.icon ?? _uiAdminIcon.DotsVertical;
+          return (0, _jsxRuntime.jsx)("button", {
+            ref: triggerRef,
+            type: "button",
+            className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon",
+            onClick: toggleDropdown,
+            children: (0, _jsxRuntime.jsx)(TriggerIcon, {})
+          });
+        }
+      case 'avatar':
+        return (0, _jsxRuntime.jsx)("button", {
+          ref: triggerRef,
+          type: "button",
+          className: "ncua-dropdown__trigger ncua-dropdown__trigger--avatar",
+          onClick: toggleDropdown,
+          children: (0, _jsxRuntime.jsx)("div", {
+            className: "ncua-dropdown__avatar",
+            children: (0, _jsxRuntime.jsx)("img", {
+              src: trigger.avatar,
+              alt: "avatar"
+            })
+          })
+        });
+      case 'button':
+        return (0, _jsxRuntime.jsx)("button", {
+          ref: triggerRef,
+          type: "button",
+          className: "ncua-dropdown__trigger ncua-dropdown__trigger--button",
+          onClick: toggleDropdown,
+          children: trigger.text
+        });
+      default:
+        return null;
+    }
+  };
+  const renderHeader = () => {
+    if (!header) return null;
+    if (header.type === 'avatar' && header.avatar) {
+      return (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-dropdown__header",
+        children: (0, _jsxRuntime.jsxs)("div", {
+          className: "ncua-dropdown__header-avatar-group",
+          children: [(0, _jsxRuntime.jsx)("div", {
+            className: "ncua-dropdown__avatar",
+            children: (0, _jsxRuntime.jsx)("img", {
+              src: header.avatar,
+              alt: "avatar"
+            })
+          }), (0, _jsxRuntime.jsxs)("div", {
+            className: "ncua-dropdown__header-text",
+            children: [header.title && (0, _jsxRuntime.jsx)("div", {
+              className: "ncua-dropdown__header-title",
+              children: header.title
+            }), header.subtitle && (0, _jsxRuntime.jsx)("div", {
+              className: "ncua-dropdown__header-subtitle",
+              children: header.subtitle
+            })]
+          })]
+        })
+      });
+    }
+    if (header.type === 'text' && header.title) {
+      return (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-dropdown__header",
+        children: (0, _jsxRuntime.jsx)("div", {
+          className: "ncua-dropdown__header-title",
+          children: header.title
+        })
+      });
+    }
+    return null;
+  };
+  const renderActionItem = item => {
+    const ItemIcon = item.icon;
+    const itemClasses = ['ncua-dropdown__item', item.disabled ? 'is-disabled' : '', item.type === 'danger' ? 'is-danger' : '', item.className].filter(Boolean).join(' ');
+    return (0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      className: itemClasses,
+      onClick: () => handleClickItem(item),
+      disabled: item.disabled,
+      children: (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-dropdown__item-content",
+        children: [(0, _jsxRuntime.jsxs)("div", {
+          className: "ncua-dropdown__item-text-group",
+          children: [ItemIcon && (0, _jsxRuntime.jsx)(ItemIcon, {
+            className: "ncua-dropdown__item-icon"
+          }), (0, _jsxRuntime.jsx)("span", {
+            className: "ncua-dropdown__item-text",
+            children: item.text
+          })]
+        }), item.shortcut && (0, _jsxRuntime.jsx)("span", {
+          className: "ncua-dropdown__item-shortcut",
+          children: item.shortcut
+        })]
+      })
+    }, item.id);
+  };
+  const toggleVisibility = id => {
+    setDraft(prev => {
+      if (!prev) return prev;
+      return {
+        ...prev,
+        visibility: {
+          ...prev.visibility,
+          [id]: !prev.visibility[id]
+        }
+      };
+    });
+  };
+  const handleMoveBy = (id, delta) => {
+    setDraft(prev => {
+      if (!prev) return prev;
+      const fromIndex = prev.order.indexOf(id);
+      if (fromIndex === -1) return prev;
+      const toIndex = fromIndex + delta;
+      if (toIndex < 0 || toIndex >= prev.order.length) return prev;
+      const next = [...prev.order];
+      const [moved] = next.splice(fromIndex, 1);
+      next.splice(toIndex, 0, moved);
+      return {
+        ...prev,
+        order: next
+      };
+    });
+  };
+  const handleApply = () => {
+    if (variant !== 'config' || !draft) return;
+    if (props.variant === 'config') {
+      props.onApply((0, _utils.applyDraftToItems)(groups, draft));
+    }
+    closeAndRestoreFocus();
+  };
+  const renderConfigItem = (item, sortable) => (0, _jsxRuntime.jsx)(SortableConfigItem, {
+    item: item,
+    isVisible: draft?.visibility[item.id] ?? true,
+    showVisibilityToggle: item.visible !== undefined && !item.required,
+    sortable: sortable,
+    dropdownId: dropdownId,
+    onToggleVisibility: toggleVisibility,
+    onMoveBy: handleMoveBy
+  }, item.id);
+  const renderFooter = () => {
+    if (variant !== 'config' || !draft || props.variant !== 'config') return null;
+    const original = (0, _utils.initDraftState)(groups);
+    const enabled = (0, _utils.hasDraftChanged)(original, draft);
+    const text = props.applyButtonText ?? '설정 완료';
+    return (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-dropdown__footer",
+      children: (0, _jsxRuntime.jsx)(_button.Button, {
+        hierarchy: "secondary",
+        size: "xs",
+        onClick: handleApply,
+        disabled: !enabled,
+        label: text
+      })
+    });
+  };
+  const dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : ''].filter(Boolean).join(' ');
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: dropdownClasses,
+    ref: dropdownRef,
+    children: [renderTrigger(), isOpen && (0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-dropdown__menu",
+      role: variant === 'config' ? 'dialog' : 'menu',
+      "aria-label": variant === 'config' ? '설정' : undefined,
+      children: [renderHeader(), (0, _jsxRuntime.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 (0, _jsxRuntime.jsx)("div", {
+            className: "ncua-dropdown__group",
+            children: orderedItems.map(item => variant === 'config' ? renderConfigItem(item, group.sortable === true) : renderActionItem(item))
+          }, group.items[0]?.id);
+        })
+      }), renderFooter()]
+    })]
+  });
+};
+exports.Dropdown = Dropdown;