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

package/dist/cjs/src/hooks/__tests__/useFloatingPosition.ssr.test.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _react = require("react");
+var _server = require("react-dom/server");
+var _vitest = require("vitest");
+var _useFloatingPosition = require("../useFloatingPosition");
+// @vitest-environment node
+
+(0, _vitest.afterEach)(() => {
+  _vitest.vi.restoreAllMocks();
+});
+const FloatingProbe = () => {
+  (0, _useFloatingPosition.useFloatingPosition)({
+    enabled: true,
+    isOpen: true,
+    triggerRef: /*#__PURE__*/(0, _react.createRef)(),
+    floatingRef: /*#__PURE__*/(0, _react.createRef)(),
+    direction: 'down'
+  });
+  return null;
+};
+(0, _vitest.describe)('useFloatingPosition — SSR', () => {
+  (0, _vitest.it)('서버 렌더에서 useLayoutEffect 경고를 내지 않는다', () => {
+    const consoleError = _vitest.vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    (0, _server.renderToString)(/*#__PURE__*/(0, _react.createElement)(FloatingProbe));
+    const layoutEffectWarnings = consoleError.mock.calls.filter(args => args.some(arg => typeof arg === 'string' && arg.includes('useLayoutEffect')));
+    (0, _vitest.expect)(layoutEffectWarnings).toHaveLength(0);
+  });
+});

package/dist/cjs/src/hooks/__tests__/useFloatingPosition.test.js

@@ -0,0 +1,322 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _portalPosition = require("../../utils/portal-position");
+var _useFloatingPosition = require("../useFloatingPosition");
+// @vitest-environment jsdom
+
+Object.assign(globalThis, {
+  IS_REACT_ACT_ENVIRONMENT: true
+});
+const installResizeObserverStub = () => {
+  class ResizeObserverStub {
+    constructor() {
+      this.observe = _vitest.vi.fn();
+      this.unobserve = _vitest.vi.fn();
+      this.disconnect = _vitest.vi.fn();
+    }
+  }
+  _vitest.vi.stubGlobal('ResizeObserver', ResizeObserverStub);
+};
+(0, _vitest.afterEach)(() => {
+  document.body.innerHTML = '';
+  _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 CHANGED_OFFSET = 12;
+const EXPECTED_Z_INDEX = 1500;
+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);
+  _vitest.vi.spyOn(element, 'getBoundingClientRect').mockReturnValue(toDomRect(rect));
+  return element;
+};
+const createPanel = () => {
+  const element = document.createElement('div');
+  document.body.appendChild(element);
+  Object.defineProperty(element, 'offsetHeight', {
+    value: PANEL_HEIGHT,
+    configurable: true
+  });
+  Object.defineProperty(element, 'offsetWidth', {
+    value: PANEL_WIDTH,
+    configurable: true
+  });
+  return element;
+};
+const makeRef = element => ({
+  current: element
+});
+const Probe = _ref => {
+  let {
+    params,
+    record
+  } = _ref;
+  record((0, _useFloatingPosition.useFloatingPosition)(params));
+  return null;
+};
+const renderHook = initialParams => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  const record = _vitest.vi.fn();
+  const rerender = params => {
+    (0, _testUtils.act)(() => {
+      root.render(/*#__PURE__*/(0, _react.createElement)(Probe, {
+        params,
+        record
+      }));
+    });
+  };
+  rerender(initialParams);
+  const unmount = () => {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  };
+  return {
+    rerender,
+    unmount,
+    latest: () => record.mock.lastCall?.[0]
+  };
+};
+const baseParams = function () {
+  let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    enabled: true,
+    isOpen: true,
+    triggerRef: makeRef(null),
+    floatingRef: makeRef(null),
+    direction: 'down',
+    ...overrides
+  };
+};
+const dispatchScroll = () => {
+  (0, _testUtils.act)(() => {
+    window.dispatchEvent(new Event('scroll'));
+  });
+};
+(0, _vitest.describe)('useFloatingPosition ↔ trackPortalPosition 동등성 (E-1)', () => {
+  _vitest.it.each([{
+    direction: 'down',
+    align: 'left',
+    matchTriggerWidth: false
+  }, {
+    direction: 'down',
+    align: 'right',
+    matchTriggerWidth: false
+  }, {
+    direction: 'up',
+    align: 'left',
+    matchTriggerWidth: true
+  }, {
+    direction: 'up',
+    align: 'right',
+    matchTriggerWidth: true
+  }])('direction=$direction · align=$align · matchTriggerWidth=$matchTriggerWidth 에서 훅 style 과 onUpdate 인자가 같다', _ref2 => {
+    let {
+      direction,
+      align,
+      matchTriggerWidth
+    } = _ref2;
+    installResizeObserverStub();
+    const anchor = createAnchor();
+    const panel = createPanel();
+    const onUpdate = _vitest.vi.fn();
+    const hook = renderHook(baseParams({
+      triggerRef: makeRef(anchor),
+      floatingRef: makeRef(panel),
+      direction,
+      align,
+      matchTriggerWidth
+    }));
+    const cleanup = (0, _portalPosition.trackPortalPosition)({
+      getAnchor: () => anchor,
+      getPanel: () => panel,
+      direction,
+      align,
+      matchAnchorWidth: matchTriggerWidth,
+      onUpdate
+    });
+    (0, _vitest.expect)(hook.latest()).toEqual(onUpdate.mock.lastCall?.[0]);
+    (0, _vitest.expect)(hook.latest()).toMatchObject({
+      position: 'fixed',
+      zIndex: EXPECTED_Z_INDEX
+    });
+    cleanup();
+    hook.unmount();
+  });
+});
+(0, _vitest.describe)('useFloatingPosition — 비활성 (E-2)', () => {
+  (0, _vitest.it)('enabled=false 이면 null 을 반환한다', () => {
+    installResizeObserverStub();
+    const hook = renderHook(baseParams({
+      enabled: false,
+      triggerRef: makeRef(createAnchor()),
+      floatingRef: makeRef(createPanel())
+    }));
+    (0, _vitest.expect)(hook.latest()).toBeNull();
+    hook.unmount();
+  });
+  (0, _vitest.it)('isOpen=false 이면 null 을 반환한다', () => {
+    installResizeObserverStub();
+    const hook = renderHook(baseParams({
+      isOpen: false,
+      triggerRef: makeRef(createAnchor()),
+      floatingRef: makeRef(createPanel())
+    }));
+    (0, _vitest.expect)(hook.latest()).toBeNull();
+    hook.unmount();
+  });
+  (0, _vitest.it)('열린 뒤 닫히면 style 이 null 로 돌아간다', () => {
+    installResizeObserverStub();
+    const triggerRef = makeRef(createAnchor());
+    const hook = renderHook(baseParams({
+      triggerRef
+    }));
+    (0, _vitest.expect)(hook.latest()).not.toBeNull();
+    hook.rerender(baseParams({
+      triggerRef,
+      isOpen: false
+    }));
+    (0, _vitest.expect)(hook.latest()).toBeNull();
+    hook.unmount();
+  });
+});
+(0, _vitest.describe)('useFloatingPosition — 트리거 부재 (E-3)', () => {
+  (0, _vitest.it)('triggerRef.current 가 null 이면 scroll·resize 리스너를 붙이지 않고 style 은 null 로 남는다', () => {
+    installResizeObserverStub();
+    const addEventListener = _vitest.vi.spyOn(window, 'addEventListener');
+    const hook = renderHook(baseParams({
+      triggerRef: makeRef(null)
+    }));
+    const positionListeners = addEventListener.mock.calls.filter(_ref3 => {
+      let [type] = _ref3;
+      return type === 'scroll' || type === 'resize';
+    });
+    (0, _vitest.expect)(positionListeners).toHaveLength(0);
+    (0, _vitest.expect)(hook.latest()).toBeNull();
+    hook.unmount();
+  });
+  (0, _vitest.it)('산출된 뒤 트리거가 사라지면 이전 style 을 유지한다', () => {
+    installResizeObserverStub();
+    const triggerRef = makeRef(createAnchor());
+    const hook = renderHook(baseParams({
+      triggerRef,
+      offset: DEFAULT_OFFSET
+    }));
+    const previous = hook.latest();
+    (0, _vitest.expect)(previous).not.toBeNull();
+    triggerRef.current = null;
+    hook.rerender(baseParams({
+      triggerRef,
+      offset: CHANGED_OFFSET
+    }));
+    (0, _vitest.expect)(hook.latest()).toEqual(previous);
+    hook.unmount();
+  });
+});
+(0, _vitest.describe)('useFloatingPosition — 패널 지연 마운트 (E-4)', () => {
+  (0, _vitest.it)('effect 시점에 패널이 없다가 마운트되면 scroll 시 panelHeight 가 반영된다', () => {
+    installResizeObserverStub();
+    const rect = makeAnchorRect();
+    const floatingRef = makeRef(null);
+    const hook = renderHook(baseParams({
+      triggerRef: makeRef(createAnchor(rect)),
+      floatingRef,
+      direction: 'up'
+    }));
+    (0, _vitest.expect)(hook.latest()).toMatchObject({
+      top: rect.top - DEFAULT_OFFSET
+    });
+    floatingRef.current = createPanel();
+    dispatchScroll();
+    (0, _vitest.expect)(hook.latest()).toMatchObject({
+      top: rect.top - PANEL_HEIGHT - DEFAULT_OFFSET
+    });
+    hook.unmount();
+  });
+});
+(0, _vitest.describe)('useFloatingPosition — 프롭 변경 재구독 (E-5)', () => {
+  (0, _vitest.it)('align 이 left→right 로 바뀌면 left 를 다시 계산한다', () => {
+    installResizeObserverStub();
+    const rect = makeAnchorRect();
+    const triggerRef = makeRef(createAnchor(rect));
+    const floatingRef = makeRef(createPanel());
+    const hook = renderHook(baseParams({
+      triggerRef,
+      floatingRef,
+      align: 'left'
+    }));
+    (0, _vitest.expect)(hook.latest()).toMatchObject({
+      left: rect.left
+    });
+    hook.rerender(baseParams({
+      triggerRef,
+      floatingRef,
+      align: 'right'
+    }));
+    (0, _vitest.expect)(hook.latest()).toMatchObject({
+      left: rect.right - PANEL_WIDTH
+    });
+    hook.unmount();
+  });
+  (0, _vitest.it)('offset 이 바뀌면 top 을 다시 계산한다', () => {
+    installResizeObserverStub();
+    const rect = makeAnchorRect();
+    const triggerRef = makeRef(createAnchor(rect));
+    const hook = renderHook(baseParams({
+      triggerRef,
+      offset: DEFAULT_OFFSET
+    }));
+    (0, _vitest.expect)(hook.latest()).toMatchObject({
+      top: rect.bottom + DEFAULT_OFFSET
+    });
+    hook.rerender(baseParams({
+      triggerRef,
+      offset: CHANGED_OFFSET
+    }));
+    (0, _vitest.expect)(hook.latest()).toMatchObject({
+      top: rect.bottom + CHANGED_OFFSET
+    });
+    hook.unmount();
+  });
+  (0, _vitest.it)('matchTriggerWidth=true 이면 minWidth 를 트리거 너비로 낸다', () => {
+    installResizeObserverStub();
+    const rect = makeAnchorRect();
+    const hook = renderHook(baseParams({
+      triggerRef: makeRef(createAnchor(rect)),
+      floatingRef: makeRef(createPanel()),
+      matchTriggerWidth: true
+    }));
+    (0, _vitest.expect)(hook.latest()).toMatchObject({
+      minWidth: rect.width
+    });
+    hook.unmount();
+  });
+});

package/dist/cjs/src/hooks/dropdown/useDropdown.js

@@ -16,6 +16,7 @@ const useDropdown = config => {
   const {
     triggerRef,
     dropdownRef,
+    positionRef,
     maxHeight,
     itemCount,
     optionItems,
@@ -31,7 +32,7 @@ const useDropdown = config => {
     direction,
     updatePosition
   } = (0, _useDropdownPosition.useDropdownPosition)({
-    triggerRef,
+    triggerRef: positionRef ?? triggerRef,
     maxHeight,
     itemCount
   });

package/dist/cjs/src/hooks/useFloatingPosition.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFloatingPosition = void 0;
 var _react = require("react");
-const FLOATING_Z_INDEX = 1500;
+var _portalPosition = require("../utils/portal-position");
+var _useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect");
 const useFloatingPosition = _ref => {
   let {
     enabled,
@@ -13,65 +14,25 @@ const useFloatingPosition = _ref => {
     triggerRef,
     floatingRef,
     direction,
-    offset = 4,
-    align = 'left',
+    offset,
+    align,
     matchTriggerWidth = false
   } = _ref;
   const [style, setStyle] = (0, _react.useState)(null);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
     if (!enabled || !isOpen) {
       setStyle(null);
       return;
     }
-    const trigger = triggerRef.current;
-    if (!trigger) return;
-    const calculatePosition = (trigger, floatingHeight, floatingWidth) => {
-      const top = direction === 'up' ? trigger.top - floatingHeight - offset : trigger.bottom + offset;
-      const left = align === 'right' ? trigger.right - floatingWidth : trigger.left;
-      return {
-        top,
-        left
-      };
-    };
-    const update = () => {
-      const t = triggerRef.current;
-      const f = floatingRef.current;
-      if (!t) return;
-      const r = t.getBoundingClientRect();
-      const floatingHeight = f?.offsetHeight ?? 0;
-      const floatingWidth = matchTriggerWidth ? r.width : f?.offsetWidth ?? r.width;
-      const {
-        top,
-        left
-      } = calculatePosition(r, floatingHeight, floatingWidth);
-      // matchTriggerWidth=true: width는 max-content(콘텐츠 자연 너비), min-width만 trigger 너비로 보장.
-      // 옵션이 짧으면 trigger 너비, 길면 자연 확장 — 기존 absolute 모드와 동일한 UX.
-      setStyle({
-        position: 'fixed',
-        top,
-        left,
-        zIndex: FLOATING_Z_INDEX,
-        ...(matchTriggerWidth ? {
-          minWidth: r.width
-        } : {})
-      });
-    };
-    update();
-    window.addEventListener('scroll', update, true);
-    window.addEventListener('resize', update);
-    const triggerObserver = new ResizeObserver(update);
-    triggerObserver.observe(trigger);
-    let floatingObserver;
-    if (floatingRef.current) {
-      floatingObserver = new ResizeObserver(update);
-      floatingObserver.observe(floatingRef.current);
-    }
-    return () => {
-      window.removeEventListener('scroll', update, true);
-      window.removeEventListener('resize', update);
-      triggerObserver.disconnect();
-      floatingObserver?.disconnect();
-    };
+    return (0, _portalPosition.trackPortalPosition)({
+      getAnchor: () => triggerRef.current,
+      getPanel: () => floatingRef.current,
+      direction,
+      align,
+      offset,
+      matchAnchorWidth: matchTriggerWidth,
+      onUpdate: setStyle
+    });
   }, [enabled, isOpen, direction, offset, align, matchTriggerWidth, triggerRef, floatingRef]);
   return style;
 };