@ncds/ui-admin 1.8.28-alpha.0 → 1.8.28-alpha.2

package/dist/esm/src/components/forms-and-input/select/__tests__/Select.test.js

@@ -0,0 +1,272 @@
+// @vitest-environment jsdom
+//
+// Select (React, native select) 위험 경로 — 위험 목록표 SE-xx.
+// 값 변경은 React 가 감지하도록 네이티브 value setter 로 값을 넣은 뒤 bubbling change 를 보낸다.
+// react-hook-form 은 타입만 쓰이므로 UseFormRegisterReturn 모양의 가짜 객체로 대체한다.
+import { createElement, createRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Select } from '../Select';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const OPTIONS = [{
+  id: 'a',
+  label: 'A'
+}, {
+  id: 'b',
+  label: 'B'
+}];
+const createRegister = function () {
+  let name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'category';
+  return {
+    name,
+    onChange: vi.fn(),
+    onBlur: vi.fn(),
+    ref: vi.fn()
+  };
+};
+let root = null;
+let container = null;
+const renderElement = element => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  }
+  act(() => {
+    root?.render(element);
+  });
+  return container;
+};
+/** 같은 root 에 다시 render 하면 props 변경(재렌더)이 된다 */
+const render = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return renderElement(/*#__PURE__*/createElement(Select, {
+    optionItems: OPTIONS,
+    ...props
+  }));
+};
+afterEach(() => {
+  if (root) {
+    act(() => {
+      root?.unmount();
+    });
+  }
+  container?.remove();
+  root = null;
+  container = null;
+  vi.restoreAllMocks();
+});
+const requireElement = (scope, selector) => {
+  const element = scope.querySelector(selector);
+  if (!element) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return element;
+};
+const selectOf = view => requireElement(view, 'select');
+const optionsOf = view => Array.from(selectOf(view).options).map(option => [option.value, option.textContent ?? '']);
+const nativeValueSetter = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value')?.set;
+const changeTo = (select, value) => {
+  act(() => {
+    nativeValueSetter?.call(select, value);
+    select.dispatchEvent(new Event('change', {
+      bubbles: true
+    }));
+  });
+};
+const keyDown = (element, key) => {
+  const event = new KeyboardEvent('keydown', {
+    key,
+    bubbles: true,
+    cancelable: true
+  });
+  act(() => {
+    element.dispatchEvent(event);
+  });
+  return event;
+};
+/** onChange 의 첫 인자(change 이벤트)에서 선택 값을 꺼낸다 — 이벤트 풀링 없음(React 17+) */
+const changedValueOf = handler => handler.mock.calls[0][0].target.value;
+// ── P0 ─────────────────────────────────────────────────
+describe('Select — 옵션 렌더·선택 (SE-01)', () => {
+  it('SE-01 placeholder(value "") → optionItems → children 순서로 옵션을 렌더한다', () => {
+    const view = render({
+      placeholder: '선택',
+      children: /*#__PURE__*/createElement('option', {
+        value: 'c'
+      }, 'C')
+    });
+    expect(optionsOf(view)).toEqual([['', '선택'], ['a', 'A'], ['b', 'B'], ['c', 'C']]);
+  });
+  it('SE-01 옵션을 고르면 onChange 가 change 이벤트를 받고 select 값이 바뀐다', () => {
+    const onChange = vi.fn();
+    const view = render({
+      onChange
+    });
+    changeTo(selectOf(view), 'b');
+    expect(changedValueOf(onChange)).toBe('b');
+    expect(selectOf(view).value).toBe('b');
+  });
+});
+describe('Select — register (SE-02·SE-03)', () => {
+  it('SE-02 register 의 name·ref 가 select 에 붙고 change·blur 가 register 핸들러로 간다', () => {
+    const register = createRegister();
+    const view = render({
+      register
+    });
+    const select = selectOf(view);
+    changeTo(select, 'a');
+    act(() => {
+      select.focus();
+      select.blur();
+    });
+    expect(select.name).toBe('category');
+    expect(register.ref).toHaveBeenCalledWith(select);
+    expect(changedValueOf(register.onChange)).toBe('a');
+    expect(register.onBlur).toHaveBeenCalled();
+  });
+  it('SE-03 register 와 onChange 를 함께 넘기면 props.onChange 만 호출되고 register.onChange 는 호출되지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: #596 ({...register}{...props} 순서라 props.onChange 가 덮음 — react-hook-form 값 유실, SB-07 과 같은 증상)
+    const register = createRegister();
+    const onChange = vi.fn();
+    const view = render({
+      register,
+      onChange
+    });
+    changeTo(selectOf(view), 'b');
+    expect(changedValueOf(onChange)).toBe('b');
+    expect(register.onChange).not.toHaveBeenCalled();
+  });
+  it.todo('SE-03 register 와 onChange 를 함께 넘기면 register.onChange 와 props.onChange 를 모두 호출한다 (기대, #596)');
+});
+describe('Select — readOnly 키 차단 (SE-04)', () => {
+  it('SE-04 readOnly 면 aria-readonly true 이고 Tab 외 키는 preventDefault, onKeyDown 은 먼저 호출된다', () => {
+    /** onKeyDown 호출 시점에 이미 막혔는지 — 먼저 호출되면 false */
+    const preventedAtCall = [];
+    const onKeyDown = vi.fn(event => {
+      preventedAtCall.push(event.nativeEvent.defaultPrevented);
+    });
+    const view = render({
+      readOnly: true,
+      onKeyDown
+    });
+    const arrow = keyDown(selectOf(view), 'ArrowDown');
+    const tab = keyDown(selectOf(view), 'Tab');
+    expect(selectOf(view).getAttribute('aria-readonly')).toBe('true');
+    expect([arrow.defaultPrevented, tab.defaultPrevented]).toEqual([true, false]);
+    expect(onKeyDown.mock.calls.map(_ref => {
+      let [event] = _ref;
+      return event.key;
+    })).toEqual(['ArrowDown', 'Tab']);
+    expect(preventedAtCall).toEqual([false, false]);
+  });
+  it('SE-04 readOnly 가 아니면 키를 막지 않는다', () => {
+    const view = render();
+    const arrow = keyDown(selectOf(view), 'ArrowDown');
+    expect(arrow.defaultPrevented).toBe(false);
+    expect(selectOf(view).getAttribute('aria-readonly')).toBe('false');
+  });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+describe('Select — controlled value (SE-10)', () => {
+  it('SE-10 value prop 으로 선택을 표시하고 부모가 바꾸면 따라간다', () => {
+    const onChange = vi.fn();
+    const view = render({
+      value: 'b',
+      onChange
+    });
+    expect(selectOf(view).value).toBe('b');
+    render({
+      value: 'a',
+      onChange
+    });
+    expect(selectOf(view).value).toBe('a');
+  });
+});
+describe('Select — readOnly 마우스 선택 (SE-05)', () => {
+  it('SE-05 readOnly 여도 change(마우스 선택)로 값이 바뀌고 onChange 가 호출된다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (readOnly 가 keydown 만 막아 마우스 선택으로 값이 바뀜 — 공개 프롭 계약 위반)
+    const onChange = vi.fn();
+    const view = render({
+      readOnly: true,
+      onChange
+    });
+    changeTo(selectOf(view), 'b');
+    expect(changedValueOf(onChange)).toBe('b');
+    expect(selectOf(view).value).toBe('b');
+  });
+  it.todo('SE-05 readOnly 면 마우스 선택도 막혀 값이 바뀌지 않고 onChange 가 호출되지 않는다 (기대, #597)');
+});
+describe('Select — ref (SE-06)', () => {
+  it('SE-06 forwarded ref 는 select 를 가리킨다', () => {
+    const ref = /*#__PURE__*/createRef();
+    const view = render({
+      ref
+    });
+    expect(ref.current).toBe(selectOf(view));
+  });
+  it('SE-06 register 와 forwarded ref 를 함께 주면 register.ref 만 select 를 받고 forwarded ref 는 null 이다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 ({...register} 의 ref 가 forwarded ref 를 덮음)
+    const ref = /*#__PURE__*/createRef();
+    const register = createRegister();
+    const view = render({
+      ref,
+      register
+    });
+    expect(register.ref).toHaveBeenCalledWith(selectOf(view));
+    expect(ref.current).toBeNull();
+  });
+  it.todo('SE-06 register 와 forwarded ref 를 함께 주면 두 ref 모두 select 를 받는다 (기대, #597)');
+});
+describe('Select — disabled (SE-07)', () => {
+  it('SE-07 disabled 면 select 가 disabled 다', () => {
+    const view = render({
+      disabled: true
+    });
+    expect(selectOf(view).disabled).toBe(true);
+  });
+  it.each([['disabledPlaceholder true', true, true], ['기본값(false)', undefined, false]])('SE-07 %s → placeholder 옵션 disabled %s', (_label, disabledPlaceholder, expected) => {
+    const view = render({
+      placeholder: '선택',
+      disabledPlaceholder
+    });
+    expect(selectOf(view).options[0].disabled).toBe(expected);
+  });
+});
+describe('Select — 클래스·hintText (SE-08)', () => {
+  const rootOf = view => requireElement(view, '.ncua-select');
+  it('SE-08 기본값은 size xs 이고 simple·readonly·destructive 클래스가 없다', () => {
+    const view = render();
+    expect(['ncua-select--xs', 'ncua-select--simple', 'ncua-select--readonly', 'destructive'].map(name => rootOf(view).classList.contains(name))).toEqual([true, false, false, false]);
+  });
+  it('SE-08 type simple·readOnly·destructive·size sm 을 루트 클래스로 반영한다', () => {
+    const view = render({
+      type: 'simple',
+      readOnly: true,
+      destructive: true,
+      size: 'sm'
+    });
+    expect(['ncua-select--sm', 'ncua-select--simple', 'ncua-select--readonly', 'destructive'].map(name => rootOf(view).classList.contains(name))).toEqual([true, true, true, true]);
+  });
+  it('SE-08 hintText 가 있으면 HintText 를 렌더하고 destructive 를 전달한다', () => {
+    const view = render({
+      hintText: '필수 항목입니다',
+      destructive: true
+    });
+    const hint = requireElement(view, '.ncua-hint-text');
+    expect([hint.textContent, hint.classList.contains('destructive')]).toEqual(['필수 항목입니다', true]);
+  });
+  it('SE-08 hintText 가 없으면 HintText 를 렌더하지 않는다', () => {
+    const view = render();
+    expect(view.querySelector('.ncua-hint-text')).toBeNull();
+  });
+});
+describe('Select — className (SE-09)', () => {
+  it('SE-09 className 이 바깥 span 과 select 양쪽에 붙는다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (같은 className 이 두 요소에 중복 적용)
+    const view = render({
+      className: 'my-select'
+    });
+    expect([requireElement(view, '.ncua-select').classList.contains('my-select'), selectOf(view).classList.contains('my-select')]).toEqual([true, true]);
+  });
+  it.todo('SE-09 className 은 바깥 span 한 곳에만 붙는다 (기대, #597)');
+});

package/dist/esm/src/components/forms-and-input/select-box/SelectBox.js

@@ -294,4 +294,4 @@ const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref
   });
 });
 SelectBox.displayName = 'SelectBox';
-export { DEFAULT_MAX_HEIGHT, SelectBox };
+export { SelectBox };

package/dist/esm/src/components/forms-and-input/select-box/__tests__/SelectBox.portal.test.js

@@ -0,0 +1,368 @@
+// @vitest-environment jsdom
+//
+// SelectBox (React) 포털·방향·autoWidth 위험 경로 — 위험 목록표 SB-13·14·16.
+// ResizeObserver stub·innerHeight·HTMLElement.prototype.offsetWidth 가 파일 전체 전역을 건드리므로
+// 인라인 경로(SelectBox.test.ts)와 분리한다 (ComboBox.portal.test.ts 선례).
+// 실제 화면 위치(SB-24)는 useFloatingPosition·portalPosition 단위 테스트 소관 — 여기서는 style 이 붙는지만 본다.
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { FloatingProvider } from '../../../../contexts/FloatingContext';
+import { PORTAL_PANEL_Z_INDEX } from '../../../../utils/portal-position';
+import { SelectBox } from '../SelectBox';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+/** useFloatingPosition 기본 간격 */
+const PANEL_OFFSET = 4;
+const ANCHOR_TOP = 100;
+const ANCHOR_LEFT = 50;
+const ANCHOR_WIDTH = 240;
+const ANCHOR_HEIGHT = 40;
+const VIEWPORT_HEIGHT = 800;
+/** calculateDropdownPosition 의 옵션 1개 높이·여유 간격 */
+const ITEM_HEIGHT = 40;
+const DIRECTION_GAP = 20;
+const OPTIONS = [{
+  id: 'a',
+  label: 'A'
+}, {
+  id: 'b',
+  label: 'B'
+}, {
+  id: 'c',
+  label: 'C'
+}];
+const OPTIONS_COUNT = OPTIONS.length;
+/** 옵션 3개 → 패널 높이 min(275, 3×40) = 120, 아래 공간이 120+20 보다 작으면 up */
+const PANEL_HEIGHT = OPTIONS_COUNT * ITEM_HEIGHT;
+const BOTTOM_AT_BOUNDARY = VIEWPORT_HEIGHT - PANEL_HEIGHT - DIRECTION_GAP;
+const SMALL_MAX_HEIGHT = 80;
+/** autoWidth 측정용 패널 offsetWidth */
+const PANEL_WIDTH = 180;
+const WIDER_PANEL_WIDTH = 260;
+const installResizeObserverStub = () => {
+  const callbacks = [];
+  class ResizeObserverStub {
+    constructor(callback) {
+      this.observe = vi.fn();
+      this.unobserve = vi.fn();
+      this.disconnect = vi.fn();
+      callbacks.push(callback);
+    }
+  }
+  vi.stubGlobal('ResizeObserver', ResizeObserverStub);
+  return {
+    /** useWindowResize 는 entries 가 비어 있으면 무시하므로 항목 1개를 넘긴다 */
+    triggerAll: () => {
+      for (const callback of callbacks) {
+        callback([{}], {});
+      }
+    }
+  };
+};
+const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');
+const stubOffsetWidth = width => {
+  Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+    configurable: true,
+    get: () => width
+  });
+};
+let root = null;
+let container = null;
+const renderElement = element => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  }
+  act(() => {
+    root?.render(element);
+  });
+  return container;
+};
+const render = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let floating = arguments.length > 1 ? arguments[1] : undefined;
+  const selectBox = /*#__PURE__*/createElement(SelectBox, {
+    optionItems: OPTIONS,
+    ...props
+  });
+  return renderElement(floating ? /*#__PURE__*/createElement(FloatingProvider, {
+    value: floating
+  }, selectBox) : selectBox);
+};
+beforeEach(() => {
+  vi.spyOn(window, 'scrollTo').mockImplementation(() => undefined);
+  vi.stubGlobal('innerHeight', VIEWPORT_HEIGHT);
+});
+afterEach(() => {
+  if (root) {
+    act(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container = null;
+  document.body.innerHTML = '';
+  if (originalOffsetWidth) {
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', originalOffsetWidth);
+  }
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+const requireElement = (scope, selector) => {
+  const element = scope.querySelector(selector);
+  if (!element) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return element;
+};
+const rootOf = view => requireElement(view, '.ncua-selectbox');
+const triggerOf = view => requireElement(view, '.ncua-selectbox__content');
+const panelIn = scope => scope.querySelector('.ncua-select-dropdown');
+const optionIn = (scope, label) => {
+  const option = Array.from(scope.querySelectorAll('.ncua-select-dropdown__option')).find(element => element.textContent === label);
+  if (!option) throw new Error(`옵션이 없습니다: ${label}`);
+  return option;
+};
+const click = element => {
+  act(() => {
+    element.click();
+  });
+};
+const mouseDown = element => {
+  act(() => {
+    element.dispatchEvent(new MouseEvent('mousedown', {
+      bubbles: true
+    }));
+  });
+};
+/** 트리거 루트(internalRef) 의 기하를 고정한다 — 방향 판정과 포털 위치의 anchor */
+const stubAnchor = function (view) {
+  let top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ANCHOR_TOP;
+  vi.spyOn(rootOf(view), 'getBoundingClientRect').mockImplementation(() => DOMRect.fromRect({
+    x: ANCHOR_LEFT,
+    y: top,
+    width: ANCHOR_WIDTH,
+    height: ANCHOR_HEIGHT
+  }));
+};
+const open = view => {
+  click(triggerOf(view));
+};
+describe('SelectBox — 포털 (SB-13)', () => {
+  it('SB-13 usePortal 이면 패널을 body 직속에 렌더하고 --portal 과 floating style 을 붙인다', () => {
+    installResizeObserverStub();
+    const view = render({
+      usePortal: true
+    });
+    stubAnchor(view);
+    open(view);
+    const panel = panelIn(document.body);
+    expect(panelIn(view)).toBeNull();
+    expect(panel?.parentElement).toBe(document.body);
+    expect(panel?.classList.contains('ncua-select-dropdown--portal')).toBe(true);
+    expect(panel?.style.position).toBe('fixed');
+    expect(panel?.style.top).toBe(`${ANCHOR_TOP + ANCHOR_HEIGHT + PANEL_OFFSET}px`);
+    expect(panel?.style.left).toBe(`${ANCHOR_LEFT}px`);
+    expect(panel?.style.minWidth).toBe(`${ANCHOR_WIDTH}px`);
+    expect(panel?.style.zIndex).toBe(String(PORTAL_PANEL_Z_INDEX));
+  });
+  it('SB-13 FloatingProvider preferPortal 이면 portalContainer 에 렌더한다', () => {
+    installResizeObserverStub();
+    const portalContainer = document.createElement('div');
+    document.body.appendChild(portalContainer);
+    const view = render({}, {
+      preferPortal: true,
+      portalContainer
+    });
+    open(view);
+    expect(panelIn(portalContainer)?.classList.contains('ncua-select-dropdown--portal')).toBe(true);
+    expect(panelIn(view)).toBeNull();
+  });
+  it('SB-13 portalContainer 가 없는 context 는 body 를 기본 컨테이너로 쓴다', () => {
+    installResizeObserverStub();
+    const view = render({}, {
+      preferPortal: true
+    });
+    open(view);
+    expect(panelIn(document.body)?.parentElement).toBe(document.body);
+  });
+  it('SB-13 usePortal false 는 context preferPortal 보다 우선해 인라인으로 렌더한다', () => {
+    const view = render({
+      usePortal: false
+    }, {
+      preferPortal: true
+    });
+    open(view);
+    const panel = panelIn(view);
+    expect(panel).not.toBeNull();
+    expect(panel?.classList.contains('ncua-select-dropdown--portal')).toBe(false);
+    expect(panel?.getAttribute('style')).toBeNull();
+  });
+  it('SB-13 닫히면 포털 패널이 제거된다', () => {
+    installResizeObserverStub();
+    const view = render({
+      usePortal: true
+    });
+    open(view);
+    expect(panelIn(document.body)).not.toBeNull();
+    click(triggerOf(view));
+    expect(panelIn(document.body)).toBeNull();
+  });
+  it('SB-13 포털 패널 안 mousedown·다중 옵션 click 은 닫지 않고, 트리거 click 으로 전파되지 않는다', () => {
+    installResizeObserverStub();
+    const onChange = vi.fn();
+    const view = render({
+      usePortal: true,
+      multiple: true,
+      value: [],
+      onChange
+    });
+    open(view);
+    const panel = panelIn(document.body);
+    if (!panel) throw new Error('포털 패널이 없습니다');
+    mouseDown(optionIn(panel, 'B'));
+    click(optionIn(panel, 'B'));
+    expect(onChange).toHaveBeenCalledWith(['b']);
+    expect(panelIn(document.body)).not.toBeNull();
+  });
+  it('SB-13 포털 단일 옵션 click 은 선택 후 패널을 닫는다', () => {
+    installResizeObserverStub();
+    const onChange = vi.fn();
+    const view = render({
+      usePortal: true,
+      onChange
+    });
+    open(view);
+    const panel = panelIn(document.body);
+    if (!panel) throw new Error('포털 패널이 없습니다');
+    click(optionIn(panel, 'C'));
+    expect(onChange).toHaveBeenCalledWith('c');
+    expect(panelIn(document.body)).toBeNull();
+  });
+  it('SB-13 포털 패널 밖 mousedown 은 닫는다', () => {
+    installResizeObserverStub();
+    const view = render({
+      usePortal: true
+    });
+    const outside = document.createElement('div');
+    document.body.appendChild(outside);
+    open(view);
+    mouseDown(outside);
+    expect(panelIn(document.body)).toBeNull();
+  });
+  it('SB-13 포털로 위쪽에 열리면 anchor top 위에 배치된다 (jsdom 패널 높이 0)', () => {
+    installResizeObserverStub();
+    const view = render({
+      usePortal: true
+    });
+    stubAnchor(view, VIEWPORT_HEIGHT - ANCHOR_HEIGHT);
+    open(view);
+    const panel = panelIn(document.body);
+    expect(panel?.classList.contains('ncua-select-dropdown--up')).toBe(true);
+    expect(panel?.style.top).toBe(`${VIEWPORT_HEIGHT - ANCHOR_HEIGHT - PANEL_OFFSET}px`);
+  });
+});
+describe('SelectBox — 방향 (SB-14)', () => {
+  /** 트리거 bottom 이 원하는 값이 되도록 top 을 맞춘다 */
+  const openWithBottom = function (bottom) {
+    let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const view = render(props);
+    stubAnchor(view, bottom - ANCHOR_HEIGHT);
+    open(view);
+    return view;
+  };
+  const directionOf = view => requireElement(view, '.ncua-select-dropdown').classList.contains('ncua-select-dropdown--up') ? 'up' : 'down';
+  it('SB-14 아래 공간이 패널 높이+20 과 같으면 아래(--down) 로 열린다', () => {
+    const view = openWithBottom(BOTTOM_AT_BOUNDARY);
+    expect(directionOf(view)).toBe('down');
+    expect(panelIn(view)?.classList.contains('ncua-select-dropdown--down')).toBe(true);
+  });
+  it('SB-14 아래 공간이 패널 높이+20 보다 1 작으면 위(--up) 로 열린다', () => {
+    const view = openWithBottom(BOTTOM_AT_BOUNDARY + 1);
+    expect(directionOf(view)).toBe('up');
+  });
+  it('SB-14 패널 높이는 min(maxHeight, 개수×40) — maxHeight 가 작으면 같은 위치에서도 아래로 열린다', () => {
+    const view = openWithBottom(BOTTOM_AT_BOUNDARY + 1, {
+      maxHeight: SMALL_MAX_HEIGHT
+    });
+    expect(directionOf(view)).toBe('down');
+  });
+  it('SB-14 열린 동안 window resize 에 방향을 재계산한다 (ResizeObserver 미지원 경로)', () => {
+    const view = openWithBottom(ANCHOR_TOP + ANCHOR_HEIGHT);
+    expect(directionOf(view)).toBe('down');
+    stubAnchor(view, VIEWPORT_HEIGHT - ANCHOR_HEIGHT);
+    act(() => {
+      window.dispatchEvent(new Event('resize'));
+    });
+    expect(directionOf(view)).toBe('up');
+  });
+  it('SB-14 ResizeObserver 가 있으면 관찰 콜백에 방향을 재계산한다', () => {
+    const resizeObserver = installResizeObserverStub();
+    const view = openWithBottom(ANCHOR_TOP + ANCHOR_HEIGHT);
+    expect(directionOf(view)).toBe('down');
+    stubAnchor(view, VIEWPORT_HEIGHT - ANCHOR_HEIGHT);
+    act(() => {
+      resizeObserver.triggerAll();
+    });
+    expect(directionOf(view)).toBe('up');
+  });
+  it('SB-14 닫힌 동안의 resize 는 방향을 바꾸지 않아 다음 열림 시점에 다시 계산한다', () => {
+    const view = openWithBottom(ANCHOR_TOP + ANCHOR_HEIGHT);
+    click(triggerOf(view));
+    stubAnchor(view, VIEWPORT_HEIGHT - ANCHOR_HEIGHT);
+    act(() => {
+      window.dispatchEvent(new Event('resize'));
+    });
+    expect(panelIn(view)).toBeNull();
+    open(view);
+    expect(directionOf(view)).toBe('up');
+  });
+});
+describe('SelectBox — autoWidth (SB-16)', () => {
+  it('SB-16 기본(autoWidth true) 은 열릴 때 트리거 width 를 패널 offsetWidth 로 맞춘다', () => {
+    stubOffsetWidth(PANEL_WIDTH);
+    const view = render();
+    expect(rootOf(view).style.width).toBe('');
+    open(view);
+    expect(rootOf(view).style.width).toBe(`${PANEL_WIDTH}px`);
+  });
+  it('SB-16 열린 동안 optionItems 가 바뀌면 width 를 다시 맞춘다', () => {
+    stubOffsetWidth(PANEL_WIDTH);
+    const view = render();
+    open(view);
+    stubOffsetWidth(WIDER_PANEL_WIDTH);
+    render({
+      optionItems: [...OPTIONS, {
+        id: 'd',
+        label: '긴 라벨 옵션'
+      }]
+    });
+    expect(rootOf(view).style.width).toBe(`${WIDER_PANEL_WIDTH}px`);
+  });
+  it('SB-16 닫혀도 맞춘 width 를 되돌리지 않는다', () => {
+    stubOffsetWidth(PANEL_WIDTH);
+    const view = render();
+    open(view);
+    click(triggerOf(view));
+    expect(panelIn(view)).toBeNull();
+    expect(rootOf(view).style.width).toBe(`${PANEL_WIDTH}px`);
+  });
+  it('SB-16 autoWidth false 면 width 를 바꾸지 않는다', () => {
+    stubOffsetWidth(PANEL_WIDTH);
+    const view = render({
+      autoWidth: false
+    });
+    open(view);
+    expect(panelIn(view)).not.toBeNull();
+    expect(rootOf(view).style.width).toBe('');
+  });
+  it('SB-16 포털 모드에서도 열릴 때 트리거 width 를 패널 offsetWidth 로 맞춘다', () => {
+    installResizeObserverStub();
+    stubOffsetWidth(PANEL_WIDTH);
+    const view = render({
+      usePortal: true
+    });
+    open(view);
+    expect(rootOf(view).style.width).toBe(`${PANEL_WIDTH}px`);
+  });
+});