@idbrnd/design-system 1.11.0 → 1.12.0
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @idbrnd/design-system
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -682,26 +682,38 @@ function SelectExample() {
|
|
|
682
682
|
/>
|
|
683
683
|
```
|
|
684
684
|
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
|
698
|
-
|
|
|
699
|
-
| `
|
|
700
|
-
| `
|
|
701
|
-
| `
|
|
702
|
-
| `
|
|
703
|
-
| `
|
|
704
|
-
| `
|
|
685
|
+
**특정 옵션 비활성화**
|
|
686
|
+
|
|
687
|
+
```tsx
|
|
688
|
+
const options: DropdownOption[] = [
|
|
689
|
+
{ label: "사용 가능", value: "a" },
|
|
690
|
+
{ label: "선택 불가", value: "b", disabled: true },
|
|
691
|
+
{ label: "사용 가능", value: "c" },
|
|
692
|
+
];
|
|
693
|
+
|
|
694
|
+
<Select options={options} selectedValue={selected} onSelect={setSelected} />;
|
|
695
|
+
```
|
|
696
|
+
|
|
697
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
698
|
+
| ------------------ | -------------------------------------------------------- | ----------------- | ---------------------------------------------------------------------- |
|
|
699
|
+
| `options` | `DropdownOption[]` | `[]` | 드롭다운에 표시할 옵션 배열. `{ label, value, icon?, disabled? }` 형태 |
|
|
700
|
+
| `selectedValue` | `DropdownOption \| null` | — | 현재 선택된 옵션 |
|
|
701
|
+
| `onSelect` | `(option: DropdownOption) => void` | — | 옵션 선택 시 호출되는 콜백 |
|
|
702
|
+
| `variant` | `"default"` \| `"choosing"` \| `"error"` \| `"selected"` | `"default"` | 트리거 상태. `choosing`/`selected`는 자동 적용 |
|
|
703
|
+
| `size` | `"large"` \| `"medium"` \| `"small"` | `"medium"` | 트리거 높이. large: 44px, medium: 40px, small: 36px |
|
|
704
|
+
| `heading` | `string` | — | 상단 라벨 텍스트. 미지정 시 라벨 미표시 |
|
|
705
|
+
| `required` | `boolean` | `false` | 라벨 우측 `*` 표시 여부 |
|
|
706
|
+
| `leadingContent` | `ReactNode` | — | 트리거 텍스트 좌측에 표시할 아이콘 등 |
|
|
707
|
+
| `description` | `ReactNode` | — | 하단 안내 문구 |
|
|
708
|
+
| `placeholder` | `ReactNode` | `"선택해주세요."` | 미선택 시 표시할 콘텐츠. 문자열 또는 JSX 전달 가능 |
|
|
709
|
+
| `disabled` | `boolean` | `false` | 비활성화 |
|
|
710
|
+
| `type` | `"basic"` \| `"search"` | `"basic"` | `"search"` 시 드롭다운 상단에 검색 입력란 표시, 실시간 필터링 |
|
|
711
|
+
| `align` | `"left"` \| `"center"` | `"left"` | 옵션 텍스트 정렬 |
|
|
712
|
+
| `content` | `boolean` | `false` | `true` 시 옵션의 `icon`이 라벨 좌측에 표시 |
|
|
713
|
+
| `buttonWidth` | `number` | — | 트리거 버튼 너비(px). 미지정 시 부모 너비를 따름 |
|
|
714
|
+
| `descriptionWidth` | `number` | — | 하단 안내 문구 너비(px). 미지정 시 부모 너비를 따름 |
|
|
715
|
+
| `textColor` | `string` | — | 옵션 라벨 텍스트 색상 커스터마이징 (예: `"#6366f1"`) |
|
|
716
|
+
| `customStyle` | `CSSProperties` | — | 루트 엘리먼트 인라인 스타일 |
|
|
705
717
|
|
|
706
718
|
유의사항:
|
|
707
719
|
|
|
@@ -712,6 +724,7 @@ function SelectExample() {
|
|
|
712
724
|
- 긴 옵션 라벨은 말줄임 처리되며, hover 시 툴팁으로 전체 텍스트가 표시됩니다. 트리거 버튼의 선택된 값도 동일하게 동작합니다.
|
|
713
725
|
- `placeholder`에 문자열 대신 JSX를 전달하면 커스텀 플레이스홀더를 렌더링할 수 있습니다.
|
|
714
726
|
- 옵션이 비어있을 때: `type="search"`에서 검색어가 있으면 "검색 결과가 없습니다.", 그 외에는 `-`가 표시됩니다.
|
|
727
|
+
- `options` 항목에 `disabled: true`를 지정하면 해당 옵션이 클릭 불가 상태로 표시됩니다. `type="search"`에서도 검색 결과에 포함되어 존재를 알릴 수 있습니다.
|
|
715
728
|
|
|
716
729
|
---
|
|
717
730
|
|
|
@@ -779,19 +792,32 @@ function SearchDropdown() {
|
|
|
779
792
|
</Dropdown>
|
|
780
793
|
```
|
|
781
794
|
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
+
**특정 옵션 비활성화**
|
|
796
|
+
|
|
797
|
+
```tsx
|
|
798
|
+
const options: DropdownOption[] = [
|
|
799
|
+
{ label: "수정", value: "edit" },
|
|
800
|
+
{ label: "삭제 (권한 없음)", value: "delete", disabled: true },
|
|
801
|
+
];
|
|
802
|
+
|
|
803
|
+
<Dropdown options={options} onSelect={handleSelect}>
|
|
804
|
+
<OutlineButton variant="assistive">메뉴 열기</OutlineButton>
|
|
805
|
+
</Dropdown>;
|
|
806
|
+
```
|
|
807
|
+
|
|
808
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
809
|
+
| --------------- | ---------------------------------- | --------- | ---------------------------------------------------------------------- |
|
|
810
|
+
| `children` | `ReactNode` | — | **(필수)** 드롭다운 트리거 엘리먼트 |
|
|
811
|
+
| `options` | `DropdownOption[]` | `[]` | 드롭다운에 표시할 옵션 배열. `{ label, value, icon?, disabled? }` 형태 |
|
|
812
|
+
| `onSelect` | `(option: DropdownOption) => void` | — | **(필수)** 옵션 선택 시 호출되는 콜백 |
|
|
813
|
+
| `selectedValue` | `string` | — | 현재 선택된 옵션의 `value`. 선택 스타일 및 `aria-selected` 적용 |
|
|
814
|
+
| `type` | `"basic"` \| `"search"` | `"basic"` | `"search"` 시 드롭다운 상단에 검색 입력란 표시, 실시간 필터링 |
|
|
815
|
+
| `align` | `"left"` \| `"center"` | `"left"` | 옵션 텍스트 정렬 |
|
|
816
|
+
| `content` | `boolean` | `false` | `true` 시 옵션의 `icon`이 라벨 좌측에 표시 |
|
|
817
|
+
| `width` | `number` | — | 드롭다운 목록 너비(px). 미지정 시 트리거 너비에 맞춤 |
|
|
818
|
+
| `textColor` | `string` | — | 옵션 라벨 텍스트 색상 커스터마이징 (예: `"#6366f1"`) |
|
|
819
|
+
| `disabled` | `boolean` | `false` | `true` 시 트리거 클릭이 무시됨 |
|
|
820
|
+
| `customStyle` | `CSSProperties` | — | 루트 엘리먼트 인라인 스타일 |
|
|
795
821
|
|
|
796
822
|
유의사항:
|
|
797
823
|
|
|
@@ -800,6 +826,18 @@ function SearchDropdown() {
|
|
|
800
826
|
- 드롭다운 목록은 `document.body`에 포탈로 렌더링됩니다.
|
|
801
827
|
- 긴 옵션 라벨은 말줄임 처리되며, hover 시 툴팁으로 전체 텍스트가 표시됩니다.
|
|
802
828
|
- 열림/닫힘 시 fade + scale 애니메이션이 적용됩니다.
|
|
829
|
+
- `options` 항목에 `disabled: true`를 지정하면 해당 옵션이 클릭 불가 상태로 표시됩니다.
|
|
830
|
+
|
|
831
|
+
**`DropdownOption`**
|
|
832
|
+
|
|
833
|
+
| 필드 | 타입 | 설명 |
|
|
834
|
+
| ---------- | ----------- | ------------------------------------------------------------ |
|
|
835
|
+
| `label` | `string` | **(필수)** 옵션에 표시되는 텍스트 |
|
|
836
|
+
| `value` | `string` | **(필수)** 옵션의 고유 식별 값 |
|
|
837
|
+
| `icon` | `ReactNode` | 옵션 라벨 좌측 아이콘. `content={true}`일 때만 렌더링됩니다. |
|
|
838
|
+
| `disabled` | `boolean` | `true`이면 클릭이 차단되고 비활성 스타일이 적용됩니다. |
|
|
839
|
+
|
|
840
|
+
---
|
|
803
841
|
|
|
804
842
|
### Select vs Dropdown 비교
|
|
805
843
|
|
|
@@ -8,6 +8,8 @@ export interface DropdownOption {
|
|
|
8
8
|
value: string;
|
|
9
9
|
/** 옵션 라벨 좌측에 표시할 아이콘. `content={true}`일 때만 렌더링됩니다. */
|
|
10
10
|
icon?: ReactNode;
|
|
11
|
+
/** 비활성화 여부. `true`이면 클릭이 차단되고 비활성 스타일이 적용됩니다. */
|
|
12
|
+
disabled?: boolean;
|
|
11
13
|
}
|
|
12
14
|
export interface DropdownProps {
|
|
13
15
|
/** 드롭다운 트리거 엘리먼트.
|
|
@@ -40,7 +42,7 @@ export interface DropdownProps {
|
|
|
40
42
|
*/
|
|
41
43
|
content?: boolean;
|
|
42
44
|
/** 드롭다운에 표시할 옵션 아이템 배열.
|
|
43
|
-
* 각 아이템은 `{ label, value, icon? }` 형태입니다.
|
|
45
|
+
* 각 아이템은 `{ label, value, icon?, disabled? }` 형태입니다.
|
|
44
46
|
*/
|
|
45
47
|
options: DropdownOption[];
|
|
46
48
|
/** 옵션 항목 선택 시 호출되는 콜백.
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import type { DropdownMenuProps } from
|
|
1
|
+
import type { DropdownMenuProps } from "./DropdownMenu.types";
|
|
2
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;
|