@ncds/ui-admin 1.8.2 → 1.8.4

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()]
+    })]
+  });
+};

package/dist/esm/src/components/overlays/dropdown/__tests__/utils.test.js

@@ -0,0 +1,223 @@
+import { describe, expect, it } from 'vitest';
+import { applyDraftToItems, arrayMoveById, hasDraftChanged, initDraftState } from '../utils';
+describe('arrayMoveById', () => {
+  it('fromId를 toId 위치로 이동시킨다', () => {
+    const order = ['a', 'b', 'c', 'd'];
+    expect(arrayMoveById(order, 'a', 'c')).toEqual(['b', 'c', 'a', 'd']);
+  });
+  it('같은 id로 이동 시 원본을 그대로 반환한다', () => {
+    const order = ['a', 'b', 'c'];
+    expect(arrayMoveById(order, 'b', 'b')).toEqual(['a', 'b', 'c']);
+  });
+  it('존재하지 않는 id가 있으면 원본을 그대로 반환한다', () => {
+    const order = ['a', 'b', 'c'];
+    expect(arrayMoveById(order, 'a', 'z')).toEqual(['a', 'b', 'c']);
+    expect(arrayMoveById(order, 'z', 'a')).toEqual(['a', 'b', 'c']);
+  });
+  it('원본 배열을 변형하지 않는다 (immutable)', () => {
+    const order = ['a', 'b', 'c'];
+    arrayMoveById(order, 'a', 'c');
+    expect(order).toEqual(['a', 'b', 'c']);
+  });
+});
+describe('initDraftState', () => {
+  it('groups의 모든 item id를 순서대로 order에 담는다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A'
+      }, {
+        id: 'b',
+        text: 'B'
+      }]
+    }, {
+      items: [{
+        id: 'c',
+        text: 'C'
+      }]
+    }];
+    expect(initDraftState(groups).order).toEqual(['a', 'b', 'c']);
+  });
+  it('item.visible이 정의되지 않았으면 visibility는 true', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A'
+      }]
+    }];
+    expect(initDraftState(groups).visibility).toEqual({
+      a: true
+    });
+  });
+  it('item.visible이 false면 visibility는 false', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A',
+        visible: false
+      }, {
+        id: 'b',
+        text: 'B',
+        visible: true
+      }]
+    }];
+    expect(initDraftState(groups).visibility).toEqual({
+      a: false,
+      b: true
+    });
+  });
+});
+describe('applyDraftToItems', () => {
+  it('draft.order 순서로 items를 재배열한다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A'
+      }, {
+        id: 'b',
+        text: 'B'
+      }, {
+        id: 'c',
+        text: 'C'
+      }]
+    }];
+    const draft = {
+      order: ['c', 'a', 'b'],
+      visibility: {
+        a: true,
+        b: true,
+        c: true
+      }
+    };
+    const result = applyDraftToItems(groups, draft);
+    expect(result.map(i => i.id)).toEqual(['c', 'a', 'b']);
+  });
+  it('draft.visibility 값을 각 item.visible에 반영한다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A',
+        visible: true
+      }, {
+        id: 'b',
+        text: 'B',
+        visible: true
+      }]
+    }];
+    const draft = {
+      order: ['a', 'b'],
+      visibility: {
+        a: false,
+        b: true
+      }
+    };
+    const result = applyDraftToItems(groups, draft);
+    expect(result[0].visible).toBe(false);
+    expect(result[1].visible).toBe(true);
+  });
+  it('item의 다른 필드 (id, text, icon 등)는 그대로 보존한다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'Alpha',
+        shortcut: 'Cmd+A'
+      }]
+    }];
+    const draft = {
+      order: ['a'],
+      visibility: {
+        a: true
+      }
+    };
+    const result = applyDraftToItems(groups, draft);
+    expect(result[0]).toEqual({
+      id: 'a',
+      text: 'Alpha',
+      shortcut: 'Cmd+A'
+    });
+  });
+  it('item.visible이 원래 undefined였으면 결과도 visible 필드 없이 보존한다', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A'
+      }]
+    }];
+    const draft = {
+      order: ['a'],
+      visibility: {
+        a: true
+      }
+    };
+    const result = applyDraftToItems(groups, draft);
+    expect(result[0].visible).toBeUndefined();
+  });
+});
+describe('hasDraftChanged', () => {
+  it('original과 동일하면 false', () => {
+    const groups = [{
+      items: [{
+        id: 'a',
+        text: 'A',
+        visible: true
+      }, {
+        id: 'b',
+        text: 'B',
+        visible: false
+      }]
+    }];
+    const original = initDraftState(groups);
+    expect(hasDraftChanged(original, original)).toBe(false);
+  });
+  it('order가 다르면 true', () => {
+    const original = {
+      order: ['a', 'b'],
+      visibility: {
+        a: true,
+        b: true
+      }
+    };
+    const draft = {
+      order: ['b', 'a'],
+      visibility: {
+        a: true,
+        b: true
+      }
+    };
+    expect(hasDraftChanged(original, draft)).toBe(true);
+  });
+  it('visibility가 다르면 true', () => {
+    const original = {
+      order: ['a', 'b'],
+      visibility: {
+        a: true,
+        b: true
+      }
+    };
+    const draft = {
+      order: ['a', 'b'],
+      visibility: {
+        a: false,
+        b: true
+      }
+    };
+    expect(hasDraftChanged(original, draft)).toBe(true);
+  });
+  it('order·visibility 둘 다 같으면 false', () => {
+    const original = {
+      order: ['a', 'b'],
+      visibility: {
+        a: true,
+        b: false
+      }
+    };
+    const draft = {
+      order: ['a', 'b'],
+      visibility: {
+        a: true,
+        b: false
+      }
+    };
+    expect(hasDraftChanged(original, draft)).toBe(false);
+  });
+});