@ncds/ui-admin 1.8.24 → 1.8.25-alpha.1

package/dist/cjs/src/utils/portal-position/__tests__/portalPosition.tracking.test.js

@@ -0,0 +1,397 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _ = require("..");
+// @vitest-environment jsdom
+
+const installResizeObserverStub = () => {
+  const instances = [];
+  class ResizeObserverStub {
+    constructor(_callback) {
+      this.observe = _vitest.vi.fn();
+      this.unobserve = _vitest.vi.fn();
+      this.disconnect = _vitest.vi.fn();
+      instances.push(this);
+    }
+  }
+  _vitest.vi.stubGlobal('ResizeObserver', ResizeObserverStub);
+  return {
+    instances
+  };
+};
+(0, _vitest.afterEach)(() => {
+  _vitest.vi.unstubAllGlobals();
+  _vitest.vi.restoreAllMocks();
+});
+const makeAnchorRect = function () {
+  let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    top: 100,
+    bottom: 140,
+    left: 50,
+    right: 250,
+    width: 200,
+    ...overrides
+  };
+};
+const PANEL_HEIGHT = 300;
+const PANEL_WIDTH = 180;
+const DEFAULT_OFFSET = 4;
+const EXPECTED_Z_INDEX = 1500;
+const ON_CHANGE_CALLS = {
+  initial: 1,
+  afterScroll: 2,
+  afterResize: 3
+};
+const toDomRect = rect => DOMRect.fromRect({
+  x: rect.left,
+  y: rect.top,
+  width: rect.width,
+  height: rect.bottom - rect.top
+});
+const createAnchor = function () {
+  let rect = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : makeAnchorRect();
+  const element = document.createElement('button');
+  document.body.appendChild(element);
+  const boundingRect = _vitest.vi.spyOn(element, 'getBoundingClientRect').mockReturnValue(toDomRect(rect));
+  const moveTo = next => boundingRect.mockReturnValue(toDomRect(next));
+  return {
+    element,
+    moveTo
+  };
+};
+const createPanel = function () {
+  let {
+    height,
+    width
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    height: PANEL_HEIGHT,
+    width: PANEL_WIDTH
+  };
+  const element = document.createElement('div');
+  document.body.appendChild(element);
+  Object.defineProperty(element, 'offsetHeight', {
+    value: height,
+    configurable: true
+  });
+  Object.defineProperty(element, 'offsetWidth', {
+    value: width,
+    configurable: true
+  });
+  return element;
+};
+const dispatchWindow = type => window.dispatchEvent(new Event(type));
+(0, _vitest.describe)('observeAnchorGeometry — 구독 (E-6)', () => {
+  (0, _vitest.it)('구독 직후 onChange 를 1회 호출하고 window scroll·resize 마다 다시 호출한다', () => {
+    installResizeObserverStub();
+    const anchor = createAnchor();
+    const onChange = _vitest.vi.fn();
+    const cleanup = (0, _.observeAnchorGeometry)({
+      getAnchor: () => anchor.element,
+      getPanel: () => null,
+      onChange
+    });
+    (0, _vitest.expect)(onChange).toHaveBeenCalledTimes(ON_CHANGE_CALLS.initial);
+    dispatchWindow('scroll');
+    (0, _vitest.expect)(onChange).toHaveBeenCalledTimes(ON_CHANGE_CALLS.afterScroll);
+    dispatchWindow('resize');
+    (0, _vitest.expect)(onChange).toHaveBeenCalledTimes(ON_CHANGE_CALLS.afterResize);
+    cleanup();
+  });
+  (0, _vitest.it)('중첩 컨테이너의 scroll(비버블링) 도 capture 로 포착한다', () => {
+    installResizeObserverStub();
+    const anchor = createAnchor();
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const onChange = _vitest.vi.fn();
+    const cleanup = (0, _.observeAnchorGeometry)({
+      getAnchor: () => anchor.element,
+      getPanel: () => null,
+      onChange
+    });
+    container.dispatchEvent(new Event('scroll', {
+      bubbles: false
+    }));
+    (0, _vitest.expect)(onChange).toHaveBeenCalledTimes(ON_CHANGE_CALLS.afterScroll);
+    cleanup();
+  });
+  (0, _vitest.it)('anchor 와 panel 각각에 ResizeObserver 를 붙인다', () => {
+    const {
+      instances
+    } = installResizeObserverStub();
+    const anchor = createAnchor();
+    const panel = createPanel();
+    const cleanup = (0, _.observeAnchorGeometry)({
+      getAnchor: () => anchor.element,
+      getPanel: () => panel,
+      onChange: _vitest.vi.fn()
+    });
+    (0, _vitest.expect)(instances).toHaveLength(2);
+    (0, _vitest.expect)(instances[0]?.observe).toHaveBeenCalledWith(anchor.element);
+    (0, _vitest.expect)(instances[1]?.observe).toHaveBeenCalledWith(panel);
+    cleanup();
+  });
+  (0, _vitest.it)('구독 시점에 panel 이 없으면 anchor 옵저버만 만든다', () => {
+    const {
+      instances
+    } = installResizeObserverStub();
+    const anchor = createAnchor();
+    const cleanup = (0, _.observeAnchorGeometry)({
+      getAnchor: () => anchor.element,
+      getPanel: () => null,
+      onChange: _vitest.vi.fn()
+    });
+    (0, _vitest.expect)(instances).toHaveLength(1);
+    cleanup();
+  });
+  (0, _vitest.it)('anchor 가 null 이면 구독하지 않고 no-op cleanup 을 반환한다', () => {
+    const {
+      instances
+    } = installResizeObserverStub();
+    const addEventListener = _vitest.vi.spyOn(window, 'addEventListener');
+    const onChange = _vitest.vi.fn();
+    const cleanup = (0, _.observeAnchorGeometry)({
+      getAnchor: () => null,
+      getPanel: () => null,
+      onChange
+    });
+    (0, _vitest.expect)(onChange).not.toHaveBeenCalled();
+    (0, _vitest.expect)(addEventListener).not.toHaveBeenCalled();
+    (0, _vitest.expect)(instances).toHaveLength(0);
+    (0, _vitest.expect)(() => cleanup()).not.toThrow();
+  });
+});
+(0, _vitest.describe)('observeAnchorGeometry — cleanup (E-7)', () => {
+  (0, _vitest.it)('cleanup 뒤에는 이벤트가 발생해도 onChange 가 늘지 않고 옵저버가 disconnect 된다', () => {
+    const {
+      instances
+    } = installResizeObserverStub();
+    const anchor = createAnchor();
+    const panel = createPanel();
+    const onChange = _vitest.vi.fn();
+    const cleanup = (0, _.observeAnchorGeometry)({
+      getAnchor: () => anchor.element,
+      getPanel: () => panel,
+      onChange
+    });
+    cleanup();
+    dispatchWindow('scroll');
+    dispatchWindow('resize');
+    (0, _vitest.expect)(onChange).toHaveBeenCalledTimes(ON_CHANGE_CALLS.initial);
+    for (const instance of instances) {
+      (0, _vitest.expect)(instance.disconnect).toHaveBeenCalledTimes(1);
+    }
+  });
+});
+(0, _vitest.describe)('observeAnchorGeometry — ResizeObserver 미정의 환경 (E-8)', () => {
+  (0, _vitest.it)('ResizeObserver 가 없어도 예외 없이 window 이벤트만 구독한다', () => {
+    (0, _vitest.expect)('ResizeObserver' in globalThis).toBe(false);
+    const anchor = createAnchor();
+    const onChange = _vitest.vi.fn();
+    let cleanup = () => undefined;
+    (0, _vitest.expect)(() => {
+      cleanup = (0, _.observeAnchorGeometry)({
+        getAnchor: () => anchor.element,
+        getPanel: () => null,
+        onChange
+      });
+    }).not.toThrow();
+    dispatchWindow('scroll');
+    (0, _vitest.expect)(onChange).toHaveBeenCalledTimes(ON_CHANGE_CALLS.afterScroll);
+    cleanup();
+  });
+});
+(0, _vitest.describe)('trackPortalPosition — 측정·조립 합성', () => {
+  (0, _vitest.it)('구독 직후 anchor·panel 실측값으로 조립한 style 을 onUpdate 에 동기 전달한다', () => {
+    installResizeObserverStub();
+    const rect = makeAnchorRect();
+    const anchor = createAnchor(rect);
+    const panel = createPanel();
+    const onUpdate = _vitest.vi.fn();
+    const cleanup = (0, _.trackPortalPosition)({
+      getAnchor: () => anchor.element,
+      getPanel: () => panel,
+      direction: 'down',
+      align: 'right',
+      onUpdate
+    });
+    (0, _vitest.expect)(onUpdate).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(onUpdate).toHaveBeenLastCalledWith((0, _.buildPortalPanelStyle)({
+      anchorRect: rect,
+      panelHeight: PANEL_HEIGHT,
+      panelWidth: PANEL_WIDTH,
+      direction: 'down',
+      align: 'right'
+    }));
+    cleanup();
+  });
+  (0, _vitest.it)('panel 이 아직 없으면 panelHeight 0 · panelWidth 는 anchor 너비로 조립한다', () => {
+    installResizeObserverStub();
+    const rect = makeAnchorRect();
+    const anchor = createAnchor(rect);
+    const onUpdate = _vitest.vi.fn();
+    const cleanup = (0, _.trackPortalPosition)({
+      getAnchor: () => anchor.element,
+      getPanel: () => null,
+      direction: 'up',
+      align: 'right',
+      onUpdate
+    });
+    (0, _vitest.expect)(onUpdate).toHaveBeenLastCalledWith({
+      position: 'fixed',
+      top: rect.top - DEFAULT_OFFSET,
+      left: rect.right - rect.width,
+      zIndex: EXPECTED_Z_INDEX
+    });
+    cleanup();
+  });
+  (0, _vitest.it)('matchAnchorWidth=true 이면 minWidth 를 anchor 너비로 낸다', () => {
+    installResizeObserverStub();
+    const rect = makeAnchorRect();
+    const anchor = createAnchor(rect);
+    const panel = createPanel();
+    const onUpdate = _vitest.vi.fn();
+    const cleanup = (0, _.trackPortalPosition)({
+      getAnchor: () => anchor.element,
+      getPanel: () => panel,
+      direction: 'down',
+      matchAnchorWidth: true,
+      onUpdate
+    });
+    (0, _vitest.expect)(onUpdate.mock.lastCall?.[0].minWidth).toBe(rect.width);
+    cleanup();
+  });
+  (0, _vitest.it)('scroll 이 발생하면 anchor 를 다시 측정해 갱신된 style 을 전달한다', () => {
+    installResizeObserverStub();
+    const anchor = createAnchor(makeAnchorRect());
+    const panel = createPanel();
+    const movedRect = makeAnchorRect({
+      top: 60,
+      bottom: 100
+    });
+    const onUpdate = _vitest.vi.fn();
+    const cleanup = (0, _.trackPortalPosition)({
+      getAnchor: () => anchor.element,
+      getPanel: () => panel,
+      direction: 'down',
+      onUpdate
+    });
+    anchor.moveTo(movedRect);
+    dispatchWindow('scroll');
+    (0, _vitest.expect)(onUpdate).toHaveBeenCalledTimes(2);
+    (0, _vitest.expect)(onUpdate.mock.lastCall?.[0].top).toBe(movedRect.bottom + DEFAULT_OFFSET);
+    cleanup();
+  });
+  (0, _vitest.it)('getPanel 이 나중에 요소를 반환하면 다음 갱신에 panelHeight 가 반영된다', () => {
+    installResizeObserverStub();
+    const rect = makeAnchorRect();
+    const anchor = createAnchor(rect);
+    const panel = createPanel();
+    const mounted = {
+      current: null
+    };
+    const onUpdate = _vitest.vi.fn();
+    const cleanup = (0, _.trackPortalPosition)({
+      getAnchor: () => anchor.element,
+      getPanel: () => mounted.current,
+      direction: 'up',
+      onUpdate
+    });
+    (0, _vitest.expect)(onUpdate.mock.lastCall?.[0].top).toBe(rect.top - DEFAULT_OFFSET);
+    mounted.current = panel;
+    dispatchWindow('scroll');
+    (0, _vitest.expect)(onUpdate.mock.lastCall?.[0].top).toBe(rect.top - PANEL_HEIGHT - DEFAULT_OFFSET);
+    cleanup();
+  });
+  (0, _vitest.it)('anchor 가 null 이면 onUpdate 를 호출하지 않고 리스너도 붙이지 않는다', () => {
+    installResizeObserverStub();
+    const addEventListener = _vitest.vi.spyOn(window, 'addEventListener');
+    const onUpdate = _vitest.vi.fn();
+    const cleanup = (0, _.trackPortalPosition)({
+      getAnchor: () => null,
+      getPanel: () => null,
+      direction: 'down',
+      onUpdate
+    });
+    (0, _vitest.expect)(onUpdate).not.toHaveBeenCalled();
+    (0, _vitest.expect)(addEventListener).not.toHaveBeenCalled();
+    (0, _vitest.expect)(() => cleanup()).not.toThrow();
+  });
+  (0, _vitest.it)('cleanup 뒤에는 scroll 이 발생해도 onUpdate 가 늘지 않는다', () => {
+    installResizeObserverStub();
+    const anchor = createAnchor();
+    const onUpdate = _vitest.vi.fn();
+    const cleanup = (0, _.trackPortalPosition)({
+      getAnchor: () => anchor.element,
+      getPanel: () => null,
+      direction: 'down',
+      onUpdate
+    });
+    cleanup();
+    dispatchWindow('scroll');
+    (0, _vitest.expect)(onUpdate).toHaveBeenCalledTimes(1);
+  });
+});
+(0, _vitest.describe)('trackPortalPosition — direction 게터 (추가형 API)', () => {
+  (0, _vitest.it)('direction 에 함수를 넘기면 갱신마다 그 반환값으로 조립한다', () => {
+    installResizeObserverStub();
+    const anchor = createAnchor();
+    const panel = createPanel();
+    const onUpdate = _vitest.vi.fn();
+    let direction = 'down';
+    (0, _.trackPortalPosition)({
+      getAnchor: () => anchor.element,
+      getPanel: () => panel,
+      direction: () => direction,
+      onUpdate
+    });
+    direction = 'up';
+    dispatchWindow('scroll');
+    (0, _vitest.expect)(onUpdate.mock.calls[0][0].top).toBe(makeAnchorRect().bottom + DEFAULT_OFFSET);
+    (0, _vitest.expect)(onUpdate.mock.calls[1][0].top).toBe(makeAnchorRect().top - PANEL_HEIGHT - DEFAULT_OFFSET);
+  });
+});
+(0, _vitest.describe)('applyPortalPanelStyle — vanilla 어댑터 보조', () => {
+  (0, _vitest.it)('position·top·left·zIndex 를 px 단위로 element.style 에 적용한다', () => {
+    const element = document.createElement('div');
+    (0, _.applyPortalPanelStyle)(element, {
+      position: 'fixed',
+      top: 144,
+      left: 50,
+      zIndex: EXPECTED_Z_INDEX
+    });
+    (0, _vitest.expect)(element.style.position).toBe('fixed');
+    (0, _vitest.expect)(element.style.top).toBe('144px');
+    (0, _vitest.expect)(element.style.left).toBe('50px');
+    (0, _vitest.expect)(element.style.zIndex).toBe('1500');
+    (0, _vitest.expect)(element.style.minWidth).toBe('');
+  });
+  (0, _vitest.it)('minWidth 가 있으면 px 단위로 함께 적용한다', () => {
+    const element = document.createElement('div');
+    (0, _.applyPortalPanelStyle)(element, {
+      position: 'fixed',
+      top: 144,
+      left: 50,
+      zIndex: EXPECTED_Z_INDEX,
+      minWidth: 200
+    });
+    (0, _vitest.expect)(element.style.minWidth).toBe('200px');
+  });
+  (0, _vitest.it)('이전 호출에서 minWidth 가 설정된 요소에 minWidth 없는 스타일을 적용하면 minWidth 를 제거한다', () => {
+    const element = document.createElement('div');
+    (0, _.applyPortalPanelStyle)(element, {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      zIndex: EXPECTED_Z_INDEX,
+      minWidth: 200
+    });
+    (0, _.applyPortalPanelStyle)(element, {
+      position: 'fixed',
+      top: 10,
+      left: 0,
+      zIndex: EXPECTED_Z_INDEX
+    });
+    (0, _vitest.expect)(element.style.minWidth).toBe('');
+  });
+});

package/dist/cjs/src/utils/portal-position/index.js

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

package/dist/cjs/src/utils/portal-position/portalPosition.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.trackPortalPosition = exports.resolveDropdownDirection = exports.observeAnchorGeometry = exports.computePortalPosition = exports.buildPortalPanelStyle = exports.applyPortalPanelStyle = exports.PORTAL_PANEL_Z_INDEX = void 0;
+const DEFAULT_OFFSET = 4;
+const DEFAULT_GAP = 20;
+const noop = () => undefined;
+const observeElementResize = (target, onChange) => {
+  if (target === null || typeof ResizeObserver === 'undefined') {
+    return null;
+  }
+  const observer = new ResizeObserver(onChange);
+  observer.observe(target);
+  return observer;
+};
+const measurePortalPanelStyle = _ref => {
+  let {
+    getAnchor,
+    getPanel,
+    direction,
+    align,
+    offset,
+    matchAnchorWidth
+  } = _ref;
+  const anchor = getAnchor();
+  if (anchor === null) {
+    return null;
+  }
+  const panel = getPanel();
+  return buildPortalPanelStyle({
+    anchorRect: anchor.getBoundingClientRect(),
+    panelHeight: panel?.offsetHeight ?? 0,
+    // matchAnchorWidth 이면 패널 너비를 쓰지 않으므로 offsetWidth 를 읽지 않는다 — 레이아웃 강제 산출 1회 회피
+    panelWidth: matchAnchorWidth ? null : panel?.offsetWidth ?? null,
+    direction: typeof direction === 'function' ? direction() : direction,
+    align,
+    offset,
+    matchAnchorWidth
+  });
+};
+const PORTAL_PANEL_Z_INDEX = exports.PORTAL_PANEL_Z_INDEX = 1500;
+const computePortalPosition = _ref2 => {
+  let {
+    anchorRect,
+    panelHeight,
+    panelWidth,
+    direction,
+    align = 'left',
+    offset = DEFAULT_OFFSET
+  } = _ref2;
+  return {
+    top: direction === 'up' ? anchorRect.top - panelHeight - offset : anchorRect.bottom + offset,
+    left: align === 'right' ? anchorRect.right - panelWidth : anchorRect.left
+  };
+};
+exports.computePortalPosition = computePortalPosition;
+const resolveDropdownDirection = _ref3 => {
+  let {
+    anchorRect,
+    panelHeight,
+    viewportHeight,
+    gap = DEFAULT_GAP
+  } = _ref3;
+  return viewportHeight - anchorRect.bottom < panelHeight + gap ? 'up' : 'down';
+};
+exports.resolveDropdownDirection = resolveDropdownDirection;
+const buildPortalPanelStyle = _ref4 => {
+  let {
+    anchorRect,
+    panelHeight,
+    panelWidth,
+    direction,
+    align,
+    offset,
+    matchAnchorWidth = false
+  } = _ref4;
+  const effectivePanelWidth = matchAnchorWidth || panelWidth === null ? anchorRect.width : panelWidth;
+  const {
+    top,
+    left
+  } = computePortalPosition({
+    anchorRect,
+    panelHeight,
+    panelWidth: effectivePanelWidth,
+    direction,
+    align,
+    offset
+  });
+  const base = {
+    position: 'fixed',
+    top,
+    left,
+    zIndex: PORTAL_PANEL_Z_INDEX
+  };
+  // width 가 아니라 min-width 인 이유: 패널은 max-content 로 자연 확장하되 앵커보다 좁아지지만 않게 한다.
+  // 옵션이 짧으면 앵커 너비, 길면 자연 확장 — Portal 이전 absolute 모드와 동일한 UX.
+  return matchAnchorWidth ? {
+    ...base,
+    minWidth: anchorRect.width
+  } : base;
+};
+exports.buildPortalPanelStyle = buildPortalPanelStyle;
+const observeAnchorGeometry = _ref5 => {
+  let {
+    getAnchor,
+    getPanel,
+    onChange
+  } = _ref5;
+  const anchor = getAnchor();
+  if (anchor === null) {
+    return noop;
+  }
+  onChange();
+  window.addEventListener('scroll', onChange, {
+    passive: true,
+    capture: true
+  });
+  window.addEventListener('resize', onChange);
+  const observers = [observeElementResize(anchor, onChange), observeElementResize(getPanel(), onChange)];
+  return () => {
+    window.removeEventListener('scroll', onChange, {
+      capture: true
+    });
+    window.removeEventListener('resize', onChange);
+    for (const observer of observers) {
+      observer?.disconnect();
+    }
+  };
+};
+exports.observeAnchorGeometry = observeAnchorGeometry;
+const trackPortalPosition = _ref6 => {
+  let {
+    onUpdate,
+    ...measureOptions
+  } = _ref6;
+  return observeAnchorGeometry({
+    getAnchor: measureOptions.getAnchor,
+    getPanel: measureOptions.getPanel,
+    onChange: () => {
+      const style = measurePortalPanelStyle(measureOptions);
+      if (style !== null) {
+        onUpdate(style);
+      }
+    }
+  });
+};
+// TODO(#497): vanilla 어댑터 도입 시 소비
+exports.trackPortalPosition = trackPortalPosition;
+const applyPortalPanelStyle = (element, style) => {
+  element.style.position = style.position;
+  element.style.top = `${style.top}px`;
+  element.style.left = `${style.left}px`;
+  element.style.zIndex = String(style.zIndex);
+  if (style.minWidth === undefined) {
+    element.style.removeProperty('min-width');
+    return;
+  }
+  element.style.minWidth = `${style.minWidth}px`;
+};
+exports.applyPortalPanelStyle = applyPortalPanelStyle;

package/dist/esm/src/components/feedback-and-status/badge/Badge.js

@@ -9,7 +9,7 @@ const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
 const NEW_BADGE_ICON_SIZE = {
   sm: 12,
-  md: 16
+  md: 14
 };
 const Badge = _ref => {
   let {