오버레이 · SINCE v0.4.0
npm v0.3.0 · v0.4.0 예정
ActionSheet — 화면 크기에 적응하는 타입 안전 ActionSheet
모바일에서는 하단, 넓은 화면에서는 중앙에 표시하고 리터럴 액션 값·취소·busy·safe-area 계약을 제공하는 Expo·React Native ActionSheet입니다.
v0.4.0 공개 예정
이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.
ActionSheet 사용 시점과 역할
ActionSheet는 드래그나 menu 의미를 가장하지 않고 일반 button 액션을 Dialog 위에 구성합니다. items에서 문자열 리터럴 value를 추론해 action-select 결과를 제한하며, cancel 버튼을 항상 유지하고 auto presentation으로 모바일 하단과 데스크톱 중앙 표현을 선택합니다.
- items에서 추론한 action-select value와 구체적인 dismissal reason
- auto·bottom·center presentation, 스크롤 목록과 고정 cancel 액션
- busy·dismissDisabled 차단과 keyboardOverlap 우선 safe-area 패딩
설치와 최소 예제
ActionSheet: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { ActionSheet } from '@gj-kit/expo-ui';
<ActionSheet visible={open} title="기록 작업" items={actions} onDismiss={(detail) => handleAction(detail)} bottomInset={bottomInset} keyboardOverlap={keyboardOverlap} />접근성과 플랫폼 동작
각 항목은 menuitem이 아닌 이름 있는 일반 button이며 description은 hint·aria-describedby로 분리됩니다. disabled·busy 상태를 노출하고, 열릴 때 destructive 항목 대신 안전한 cancel 버튼으로 초기 포커스를 옮깁니다. drag·snap·menu 키보드 동작은 지원한다고 주장하지 않습니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.