# SPortal

> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.

### SPortal

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `open` | `boolean` | — | 표시 여부 (제어). onClose 와 함께 사용한다. |
| `anchorRef` | `RefObject<HTMLElement \| null>` | — | 위치 기준이 되는 앵커 엘리먼트 ref (sd-portal `parentRef` 대응). 트리거 버튼 등에 그대로 걸면 그 엘리먼트에 붙어서 뜬다. |
| `placement?` | `SPortalPlacement` | `'bottom'` | 표시 방향 (공간이 부족하면 자동으로 반대 방향으로 전환). |
| `align?` | `SPortalAlign` | `'start'` | 교차축 정렬 (start·center·end). |
| `offset?` | `number` | `4` | 앵커로부터의 간격 px (sd-portal offset[1]). |
| `alignOffset?` | `number` | `0` | 정렬축 오프셋 px (sd-portal offset[0]). |
| `fit?` | `boolean` | `false` | 앵커 너비에 맞춰 최소 너비를 잡는다. |
| `maxHeight?` | `number` | — | 콘텐츠 최대 높이 px. 넘치면 세로 스크롤. |
| `autoClose?` | `boolean` | `false` | 콘텐츠 내부를 클릭하면 자동으로 닫는다. |
| `persistent?` | `boolean` | `false` | 외부 클릭 · ESC 로 닫히지 않게 한다. |
| `viewportPadding?` | `number` | `0` | 뷰포트 경계 여백 px (충돌 회피 패딩). |
| `children?` | `ReactNode` | — | 본문 내용 (콘텐츠 자유). |
| `className?` | `string` | — |  |
| `style?` | `CSSProperties` | — |  |
| `ariaLabel?` | `string` | — |  |

#### Events

| Event | Type | Description |
|-------|------|-------------|
| `onClose` | `() => void` | 외부 클릭 · ESC 등으로 닫힘이 요청될 때 (sd-portal `sdClose` 대응). |
| `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 전체 콜백 (선택). |
| `onOpenAutoFocus` | `(event: Event) => void` | 열릴 때 포커스 이동 처리 (기본은 Radix가 콘텐츠로 포커스를 옮김). e.preventDefault()로 막을 수 있다. |
| `onCloseAutoFocus` | `(event: Event) => void` | 닫힐 때 포커스 복귀 처리 (기본은 Radix가 앵커로 포커스를 되돌림). e.preventDefault()로 막을 수 있다. |
| `onPointerDownOutside` | `(event: Event) => void` | 바깥 영역 pointerdown 으로 닫힘이 시작될 때 (앵커 위 클릭·persistent 는 제외). |

## Dependencies

### Used by

 - [SChipInput](../SChipInput)
 - [SSelect](../SSelect)

### Graph

```mermaid
graph TD;
  SChipInput --> SPortal
  SSelect --> SPortal
  style SPortal fill:#f9f,stroke:#333,stroke-width:4px
```