@ncds/ui-admin 1.8.1 → 1.8.3

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight, ChevronLeft, ChevronLeftDouble, ChevronRight, ChevronRightDouble } from '@ncds/ui-admin-icon';
+import { Button } from '../../action/button';
+const ICON_SIZE_PC = 16;
+const ICON_SIZE_MOBILE = 20;
+const NAV_BUTTON_CONFIG = {
+  first: {
+    label: '처음',
+    className: 'ncua-pagination__first',
+    getIcon: _isPC => ChevronLeftDouble
+  },
+  prev: {
+    label: '이전',
+    className: 'ncua-pagination__before',
+    getIcon: isPC => isPC ? ChevronLeft : ArrowLeft
+  },
+  next: {
+    label: '다음',
+    className: 'ncua-pagination__next',
+    getIcon: isPC => isPC ? ChevronRight : ArrowRight
+  },
+  last: {
+    label: '마지막',
+    className: 'ncua-pagination__last',
+    getIcon: _isPC => ChevronRightDouble
+  }
+};
+export 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 _jsx(Button, {
+    ...buttonProps
+  }, buttonKey);
+};

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Select } from '../../forms-and-input/select/Select';
+import { TabButton } from '../../tab/TabButton';
+export 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 _jsx(Select, {
+      value: activeTab,
+      onChange: handleSelectChange,
+      optionItems: optionItems,
+      size: "md"
+    });
+  }
+  return _jsx("div", {
+    className: classNames('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 _jsx(TabButton, {
+        ...menu,
+        isActive: isActive,
+        tabButtonType: type,
+        size: "md"
+      }, menu.id);
+    })
+  });
+};

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

@@ -0,0 +1,446 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+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 { Button } from '../../action/button';
+import { applyDraftToItems, arrayReorderByEdge, hasDraftChanged, initDraftState } from './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 = useRef(null);
+  const handleRef = useRef(null);
+  const ItemIcon = item.icon;
+  const [closestEdge, setClosestEdge] = useState(null);
+  useEffect(() => {
+    if (!sortable || !ref.current || !handleRef.current) return;
+    const itemEl = ref.current;
+    return combine(draggable({
+      element: handleRef.current,
+      getInitialData: () => ({
+        id: item.id,
+        dropdownId
+      }),
+      onGenerateDragPreview: _ref2 => {
+        let {
+          nativeSetDragImage
+        } = _ref2;
+        setCustomNativeDragPreview({
+          nativeSetDragImage,
+          getOffset: 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');
+      }
+    }), dropTargetForElements({
+      element: ref.current,
+      getData: _ref4 => {
+        let {
+          input,
+          element
+        } = _ref4;
+        return attachClosestEdge({
+          id: item.id,
+          dropdownId
+        }, {
+          input,
+          element,
+          allowedEdges: ['top', 'bottom']
+        });
+      },
+      onDragEnter: _ref5 => {
+        let {
+          self,
+          source
+        } = _ref5;
+        if (source.data.id === item.id) return;
+        setClosestEdge(extractClosestEdge(self.data));
+      },
+      onDrag: _ref6 => {
+        let {
+          self,
+          source
+        } = _ref6;
+        if (source.data.id === item.id) return;
+        setClosestEdge(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 _jsxs("div", {
+    ref: ref,
+    className: itemClasses,
+    children: [closestEdge && _jsx("div", {
+      className: `ncua-dropdown__item-drop-indicator ncua-dropdown__item-drop-indicator--${closestEdge}`
+    }), sortable && _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: _jsx(DotsGrid02, {})
+    }), _jsx("div", {
+      className: "ncua-dropdown__item-content",
+      children: _jsxs("div", {
+        className: "ncua-dropdown__item-text-group",
+        children: [ItemIcon && _jsx(ItemIcon, {
+          className: "ncua-dropdown__item-icon"
+        }), _jsx("span", {
+          className: "ncua-dropdown__item-text",
+          children: item.text
+        })]
+      })
+    }), showVisibilityToggle && _jsx("button", {
+      type: "button",
+      className: "ncua-dropdown__item-visibility",
+      "aria-label": `${item.text} 노출`,
+      "aria-pressed": isVisible,
+      onClick: () => onToggleVisibility(item.id),
+      children: isVisible ? _jsx(Eye, {}) : _jsx(EyeOff, {})
+    })]
+  });
+};
+export 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] = useState(opened);
+  const dropdownRef = useRef(null);
+  const triggerRef = useRef(null);
+  const menuItemsRef = useRef(null);
+  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(() => {
+    setIsOpen(opened);
+  }, [opened]);
+  const initialDraft = variant === 'config' ? initDraftState(groups) : null;
+  const [draft, setDraft] = useState(initialDraft);
+  // Reset draft to props baseline synchronously before paint to avoid a flash
+  // of "previous draft" state when reopening after a dismissed change.
+  useLayoutEffect(() => {
+    if (variant !== 'config') return;
+    if (isOpen) {
+      setDraft(initDraftState(groups));
+    } else {
+      setDraft(null);
+    }
+  }, [isOpen, variant, groups]);
+  // Listen for drag-drop events scoped to this dropdown
+  useEffect(() => {
+    if (variant !== 'config' || !isOpen) return;
+    return 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 = extractClosestEdge(target.data);
+        const resolvedEdge = edge === 'bottom' ? 'bottom' : 'top';
+        setDraft(prev => prev ? {
+          ...prev,
+          order: arrayReorderByEdge(prev.order, fromId, toId, resolvedEdge)
+        } : prev);
+      }
+    });
+  }, [variant, isOpen, dropdownId]);
+  // Auto-scroll the items area while dragging near edges
+  useEffect(() => {
+    if (variant !== 'config' || !isOpen || !menuItemsRef.current) return;
+    return 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);
+      }
+    }
+  };
+  useEffect(() => {
+    if (closeOnClickOutside) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [closeOnClickOutside]);
+  // ESC 키로 닫고 trigger로 포커스 복귀
+  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 _jsx("button", {
+          ref: triggerRef,
+          type: "button",
+          className: "ncua-dropdown__trigger",
+          onClick: toggleDropdown,
+          children: trigger.children
+        });
+      case 'icon':
+        {
+          const TriggerIcon = trigger.icon ?? DotsVertical;
+          return _jsx("button", {
+            ref: triggerRef,
+            type: "button",
+            className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon",
+            onClick: toggleDropdown,
+            children: _jsx(TriggerIcon, {})
+          });
+        }
+      case 'avatar':
+        return _jsx("button", {
+          ref: triggerRef,
+          type: "button",
+          className: "ncua-dropdown__trigger ncua-dropdown__trigger--avatar",
+          onClick: toggleDropdown,
+          children: _jsx("div", {
+            className: "ncua-dropdown__avatar",
+            children: _jsx("img", {
+              src: trigger.avatar,
+              alt: "avatar"
+            })
+          })
+        });
+      case 'button':
+        return _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 _jsx("div", {
+        className: "ncua-dropdown__header",
+        children: _jsxs("div", {
+          className: "ncua-dropdown__header-avatar-group",
+          children: [_jsx("div", {
+            className: "ncua-dropdown__avatar",
+            children: _jsx("img", {
+              src: header.avatar,
+              alt: "avatar"
+            })
+          }), _jsxs("div", {
+            className: "ncua-dropdown__header-text",
+            children: [header.title && _jsx("div", {
+              className: "ncua-dropdown__header-title",
+              children: header.title
+            }), header.subtitle && _jsx("div", {
+              className: "ncua-dropdown__header-subtitle",
+              children: header.subtitle
+            })]
+          })]
+        })
+      });
+    }
+    if (header.type === 'text' && header.title) {
+      return _jsx("div", {
+        className: "ncua-dropdown__header",
+        children: _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 _jsx("button", {
+      type: "button",
+      className: itemClasses,
+      onClick: () => handleClickItem(item),
+      disabled: item.disabled,
+      children: _jsxs("div", {
+        className: "ncua-dropdown__item-content",
+        children: [_jsxs("div", {
+          className: "ncua-dropdown__item-text-group",
+          children: [ItemIcon && _jsx(ItemIcon, {
+            className: "ncua-dropdown__item-icon"
+          }), _jsx("span", {
+            className: "ncua-dropdown__item-text",
+            children: item.text
+          })]
+        }), item.shortcut && _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(applyDraftToItems(groups, draft));
+    }
+    closeAndRestoreFocus();
+  };
+  const renderConfigItem = (item, sortable) => _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 = initDraftState(groups);
+    const enabled = hasDraftChanged(original, draft);
+    const text = props.applyButtonText ?? '설정 완료';
+    return _jsx("div", {
+      className: "ncua-dropdown__footer",
+      children: _jsx(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 _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()]
+    })]
+  });
+};