@idbrnd/design-system 1.3.1 → 1.3.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 +6 -3
- package/dist/components/Select/Select.d.ts +1 -1
- package/dist/components/Select/Select.types.d.ts +13 -7
- package/dist/index.js +715 -709
- 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
|
|
|
@@ -552,12 +552,13 @@ function SelectExample() {
|
|
|
552
552
|
| `required` | `boolean` | `false` | 라벨 우측 `*` 표시 여부 |
|
|
553
553
|
| `leadingContent` | `ReactNode` | — | 트리거 텍스트 좌측에 표시할 아이콘 등 |
|
|
554
554
|
| `description` | `ReactNode` | — | 하단 안내 문구 |
|
|
555
|
-
| `placeholder` | `
|
|
555
|
+
| `placeholder` | `ReactNode` | `"선택해주세요."` | 미선택 시 표시할 콘텐츠. 문자열 또는 JSX 전달 가능 |
|
|
556
556
|
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
557
557
|
| `type` | `"basic"` \| `"search"` | `"basic"` | `"search"` 시 드롭다운 상단에 검색 입력란 표시, 실시간 필터링 |
|
|
558
558
|
| `align` | `"left"` \| `"center"` | `"left"` | 옵션 텍스트 정렬 |
|
|
559
559
|
| `content` | `boolean` | `false` | `true` 시 옵션의 `icon`이 라벨 좌측에 표시 |
|
|
560
|
-
| `
|
|
560
|
+
| `buttonWidth` | `number` | — | 트리거 버튼 너비(px). 미지정 시 부모 너비를 따름 |
|
|
561
|
+
| `descriptionWidth` | `number` | — | 하단 안내 문구 너비(px). 미지정 시 부모 너비를 따름 |
|
|
561
562
|
| `textColor` | `string` | — | 옵션 라벨 텍스트 색상 커스터마이징 (예: `"#6366f1"`) |
|
|
562
563
|
| `customStyle` | `CSSProperties` | — | 루트 엘리먼트 인라인 스타일 |
|
|
563
564
|
|
|
@@ -567,6 +568,8 @@ function SelectExample() {
|
|
|
567
568
|
- `variant="error"`는 자동 전환되지 않으므로 직접 지정해야 합니다.
|
|
568
569
|
- 드롭다운 목록은 `document.body`에 포탈로 렌더링됩니다.
|
|
569
570
|
- 긴 옵션 라벨은 말줄임 처리되며, hover 시 툴팁으로 전체 텍스트가 표시됩니다.
|
|
571
|
+
- `placeholder`에 문자열 대신 JSX를 전달하면 커스텀 플레이스홀더를 렌더링할 수 있습니다.
|
|
572
|
+
- 옵션이 비어있을 때: `type="search"`에서 검색어가 있으면 "검색 결과가 없습니다.", 그 외에는 `-`가 표시됩니다.
|
|
570
573
|
|
|
571
574
|
---
|
|
572
575
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { SelectProps } from './Select.types';
|
|
2
2
|
export type { SelectAlign, SelectProps, SelectSize, SelectType, SelectVariant, } from './Select.types';
|
|
3
|
-
declare function Select({ variant, size, heading, required, leadingContent, description, disabled, placeholder, value, onSelect, options, type, align, content,
|
|
3
|
+
declare function Select({ variant, size, heading, required, leadingContent, description, disabled, placeholder, value, onSelect, options, type, align, content, buttonWidth, descriptionWidth, customStyle, textColor, }: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export default Select;
|
|
@@ -38,10 +38,11 @@ export interface SelectProps {
|
|
|
38
38
|
* - `true`: 비활성화
|
|
39
39
|
*/
|
|
40
40
|
disabled?: boolean;
|
|
41
|
-
/**
|
|
42
|
-
* -
|
|
41
|
+
/** 플레이스홀더.
|
|
42
|
+
* - 문자열 또는 ReactNode를 전달할 수 있음
|
|
43
|
+
* - 미전달 시 '선택해주세요.' 표시 (기본값)
|
|
43
44
|
*/
|
|
44
|
-
placeholder?:
|
|
45
|
+
placeholder?: ReactNode;
|
|
45
46
|
/** 현재 선택된 옵션. */
|
|
46
47
|
value?: DropdownOption | null;
|
|
47
48
|
/** 옵션 선택 시 콜백. */
|
|
@@ -63,11 +64,16 @@ export interface SelectProps {
|
|
|
63
64
|
* - `true`: 아이콘 영역을 표시
|
|
64
65
|
*/
|
|
65
66
|
content?: boolean;
|
|
66
|
-
/**
|
|
67
|
-
* - 미지정 시 부모 컨테이너
|
|
68
|
-
* - 숫자 전달 시 고정 너비 적용
|
|
67
|
+
/** 셀렉트 버튼(트리거) 너비. (단위: px)
|
|
68
|
+
* - 미지정 시 부모 컨테이너 너비를 따름 (기본값)
|
|
69
|
+
* - 숫자 전달 시 버튼만 고정 너비 적용
|
|
69
70
|
*/
|
|
70
|
-
|
|
71
|
+
buttonWidth?: number;
|
|
72
|
+
/** 하단 안내 문구(description) 너비. (단위: px)
|
|
73
|
+
* - 미지정 시 부모 컨테이너 너비를 따름 (기본값)
|
|
74
|
+
* - 숫자 전달 시 안내 문구만 고정 너비 적용
|
|
75
|
+
*/
|
|
76
|
+
descriptionWidth?: number;
|
|
71
77
|
/** 루트 엘리먼트 인라인 스타일 (`style` prop 대신 사용)
|
|
72
78
|
* - 커스텀 해야 할 스타일이 있을 때 사용
|
|
73
79
|
* - 컴포넌트 너비 설정 시 px이 아닌 다른 속성을 사용해야 한다면, 이 속성 사용 권장
|