@idbrnd/design-system 1.5.1 → 1.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -17
- package/dist/components/Dropdown/DropdownMenu.d.ts +1 -1
- package/dist/components/Dropdown/DropdownMenu.types.d.ts +6 -0
- package/dist/index.js +994 -988
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @idbrnd/design-system
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -221,26 +221,34 @@ function InputExample() {
|
|
|
221
221
|
}
|
|
222
222
|
```
|
|
223
223
|
|
|
224
|
-
| Prop
|
|
225
|
-
|
|
|
226
|
-
| `
|
|
227
|
-
| `
|
|
228
|
-
| `
|
|
229
|
-
| `
|
|
230
|
-
| `
|
|
231
|
-
| `
|
|
232
|
-
| `
|
|
233
|
-
| `
|
|
234
|
-
| `
|
|
235
|
-
| `
|
|
236
|
-
| `
|
|
237
|
-
| `
|
|
238
|
-
| `
|
|
224
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
225
|
+
| ------------------------ | ------------------------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------- |
|
|
226
|
+
| `type` | `HTMLInputTypeAttribute` | `"text"` | 실제 HTML input 타입 (`text`, `password`, `email` 등) |
|
|
227
|
+
| `designType` | `"outline"` \| `"fill"` | `"outline"` | Input 컨테이너 외형 |
|
|
228
|
+
| `size` | `"default"` \| `"small"` | `"default"` | Input 높이 |
|
|
229
|
+
| `variant` | `"basic"` \| `"error"` \| `"onTyping"` \| `"typed"` \| `"onFocus"` \| `"success"` | 자동 계산 | 수동 상태 지정. 미지정 시 값 유무에 따라 `basic`/`typed` 적용 |
|
|
230
|
+
| `width` | `number \| string` | `"100%"` | 루트 너비 |
|
|
231
|
+
| `value` | `string \| number \| readonly string[]` | — | **(필수)** 입력값 |
|
|
232
|
+
| `onChange` | `ChangeEventHandler<HTMLInputElement>` | — | 값 변경 핸들러 |
|
|
233
|
+
| `heading` | `boolean` | `true` | 상단 라벨 표시 여부 |
|
|
234
|
+
| `headingContent` | `ReactNode` | `"Label"` | 상단 라벨 내용 |
|
|
235
|
+
| `required` | `boolean` | `false` | 필수 입력 표시 및 native `required` 속성 적용 |
|
|
236
|
+
| `description` | `ReactNode \| boolean` | `false` | 하단 안내 문구. `true`면 기본 안내 문구를 사용 |
|
|
237
|
+
| `fixedDescriptionHeight` | `boolean` | `true` | helper 영역 높이 고정 여부 |
|
|
238
|
+
| `errorMessage` | `ReactNode` | 기본 에러 문구 | `variant="error"`일 때 표시되는 메시지 |
|
|
239
|
+
| `leadingIcon` | `ReactNode` | — | 입력 필드 좌측 아이콘 |
|
|
240
|
+
| `trailingContent` | `ReactNode` | — | 입력 필드 우측 콘텐츠 |
|
|
241
|
+
| `readOnly` | `boolean` | `false` | 읽기 전용 |
|
|
242
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
243
|
+
| `customStyle` | `CSSProperties` | `{}` | 루트 컨테이너에 적용할 추가 인라인 스타일 |
|
|
239
244
|
|
|
240
245
|
유의사항:
|
|
241
246
|
|
|
242
247
|
- `variant`를 지정하지 않으면 값 존재 여부에 따라 내부적으로 `basic` 또는 `typed` 상태가 자동 적용됩니다.
|
|
243
|
-
- `variant="error"`일 때는 `description` 대신 `errorMessage`가 우선
|
|
248
|
+
- `variant="error"`일 때는 `description` 대신 `errorMessage`가 우선 노출되며, `errorMessage`를 생략하면 기본 에러 문구가 표시됩니다.
|
|
249
|
+
- `description={true}`를 전달하면 기본 안내 문구(`2~19자 이내로 입력해 주세요.`)가 표시됩니다.
|
|
250
|
+
- `fixedDescriptionHeight={true}`면 안내/에러 문구가 없을 때도 helper 영역 높이를 유지해 레이아웃 점프를 방지합니다.
|
|
251
|
+
- `id`, `name`, `placeholder`, `autoComplete`, `maxLength`, `minLength`, `onFocus`, `onBlur` 등 대부분의 native `<input>` props도 함께 사용할 수 있습니다.
|
|
244
252
|
- `defaultValue`는 지원하지 않습니다. 반드시 `value` + `onChange`로 제어해야 합니다.
|
|
245
253
|
|
|
246
254
|
### SearchBar
|
|
@@ -636,6 +644,7 @@ function SelectExample() {
|
|
|
636
644
|
- `variant`를 직접 지정하지 않아도 열림/선택 상태에 따라 `choosing` → `selected`로 자동 전환됩니다.
|
|
637
645
|
- `variant="error"`는 자동 전환되지 않으므로 직접 지정해야 합니다.
|
|
638
646
|
- 드롭다운 목록은 `document.body`에 포탈로 렌더링됩니다.
|
|
647
|
+
- 뷰포트 하단 공간이 부족하면 드롭다운이 트리거 위쪽으로 자동 전환(flip)됩니다.
|
|
639
648
|
- 긴 옵션 라벨은 말줄임 처리되며, hover 시 툴팁으로 전체 텍스트가 표시됩니다. 트리거 버튼의 선택된 값도 동일하게 동작합니다.
|
|
640
649
|
- `placeholder`에 문자열 대신 JSX를 전달하면 커스텀 플레이스홀더를 렌더링할 수 있습니다.
|
|
641
650
|
- 옵션이 비어있을 때: `type="search"`에서 검색어가 있으면 "검색 결과가 없습니다.", 그 외에는 `-`가 표시됩니다.
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { DropdownMenuProps } from './DropdownMenu.types';
|
|
2
|
-
declare function DropdownMenu({ listboxId, type, align, content, options, selectedValue, onSelect, textColor, closing, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare function DropdownMenu({ listboxId, type, align, content, options, selectedValue, onSelect, textColor, closing, placement, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default DropdownMenu;
|
|
@@ -47,4 +47,10 @@ export interface DropdownMenuProps {
|
|
|
47
47
|
* @defaultValue `false`
|
|
48
48
|
*/
|
|
49
49
|
closing?: boolean;
|
|
50
|
+
/** 드롭다운 표시 방향. (내부 전용)
|
|
51
|
+
* - `bottom`: 트리거 아래쪽에 표시 (기본값)
|
|
52
|
+
* - `top`: 트리거 위쪽에 표시 (뷰포트 하단 공간 부족 시 자동 전환)
|
|
53
|
+
* @defaultValue `'bottom'`
|
|
54
|
+
*/
|
|
55
|
+
placement?: 'bottom' | 'top';
|
|
50
56
|
}
|