@adamosuiteservices/ui 1.7.8 → 1.7.9
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/dist/combobox.cjs +2 -2
- package/dist/combobox.js +277 -311
- package/dist/components/ui/combobox/combobox.d.ts +0 -20
- package/dist/components/ui/combobox/combobox.stories.d.ts +2 -4
- package/dist/custom-layered-styles.css +1 -1
- package/dist/styles.css +1 -1
- package/docs/components/ui/combobox.md +45 -163
- package/package.json +1 -1
|
@@ -51,13 +51,10 @@ type ComboboxClassNames = {
|
|
|
51
51
|
/**
|
|
52
52
|
* Render prop functions for customizing component rendering.
|
|
53
53
|
* Each render prop receives relevant data and allows complete control over that part of the UI.
|
|
54
|
-
* All render props also receive an 'Original' component that renders the default implementation,
|
|
55
|
-
* allowing you to wrap or enhance the default behavior without reimplementing it.
|
|
56
54
|
*/
|
|
57
55
|
type ComboboxRenderProps = {
|
|
58
56
|
/**
|
|
59
57
|
* Custom renderer for the entire trigger button.
|
|
60
|
-
* @param props.Original - Default trigger button component
|
|
61
58
|
* @param props.open - Whether the popover is open
|
|
62
59
|
* @param props.value - Current selected value(s)
|
|
63
60
|
* @param props.displayText - Formatted display text for selected value(s)
|
|
@@ -66,7 +63,6 @@ type ComboboxRenderProps = {
|
|
|
66
63
|
* @param props.icon - Optional icon component
|
|
67
64
|
*/
|
|
68
65
|
trigger?: (props: {
|
|
69
|
-
Original: ComponentType;
|
|
70
66
|
open: boolean;
|
|
71
67
|
value: string | string[];
|
|
72
68
|
displayText: string | null;
|
|
@@ -78,86 +74,70 @@ type ComboboxRenderProps = {
|
|
|
78
74
|
}) => ReactNode;
|
|
79
75
|
/**
|
|
80
76
|
* Custom renderer for the trigger dropdown icon.
|
|
81
|
-
* @param props.Original - Default chevron icon component
|
|
82
77
|
* @param props.open - Whether the popover is open
|
|
83
78
|
*/
|
|
84
79
|
triggerIcon?: (props: {
|
|
85
|
-
Original: ComponentType;
|
|
86
80
|
open: boolean;
|
|
87
81
|
}) => ReactNode;
|
|
88
82
|
/**
|
|
89
83
|
* Custom renderer for the placeholder text.
|
|
90
|
-
* @param props.Original - Default placeholder component
|
|
91
84
|
* @param props.text - The placeholder text
|
|
92
85
|
* @param props.hasValue - Whether any value is selected
|
|
93
86
|
*/
|
|
94
87
|
placeholder?: (props: {
|
|
95
|
-
Original: ComponentType;
|
|
96
88
|
text: string;
|
|
97
89
|
hasValue: boolean;
|
|
98
90
|
}) => ReactNode;
|
|
99
91
|
/**
|
|
100
92
|
* Custom renderer for displaying selected value(s).
|
|
101
|
-
* @param props.Original - Default display value component
|
|
102
93
|
* @param props.text - Formatted display text
|
|
103
94
|
* @param props.value - Current selected value(s)
|
|
104
95
|
*/
|
|
105
96
|
displayValue?: (props: {
|
|
106
|
-
Original: ComponentType;
|
|
107
97
|
text: string | null;
|
|
108
98
|
value: string | string[];
|
|
109
99
|
}) => ReactNode;
|
|
110
100
|
/**
|
|
111
101
|
* Custom renderer for an entire option item.
|
|
112
|
-
* @param props.Original - Default option item component
|
|
113
102
|
* @param props.option - The option data
|
|
114
103
|
* @param props.isSelected - Whether this option is currently selected
|
|
115
104
|
* @param props.selectedFeedback - Type of selection feedback ("checkbox" or "check")
|
|
116
105
|
*/
|
|
117
106
|
option?: (props: {
|
|
118
|
-
Original: ComponentType;
|
|
119
107
|
option: ComboboxOption;
|
|
120
108
|
isSelected: boolean;
|
|
121
109
|
selectedFeedback: "checkbox" | "check";
|
|
122
110
|
}) => ReactNode;
|
|
123
111
|
/**
|
|
124
112
|
* Custom renderer for just the option label text.
|
|
125
|
-
* @param props.Original - Default option label component
|
|
126
113
|
* @param props.option - The option data
|
|
127
114
|
*/
|
|
128
115
|
optionLabel?: (props: {
|
|
129
|
-
Original: ComponentType;
|
|
130
116
|
option: ComboboxOption;
|
|
131
117
|
}) => ReactNode;
|
|
132
118
|
/**
|
|
133
119
|
* Custom renderer for the selection feedback indicator (checkbox or check).
|
|
134
|
-
* @param props.Original - Default feedback indicator component
|
|
135
120
|
* @param props.option - The option data
|
|
136
121
|
* @param props.isSelected - Whether this option is currently selected
|
|
137
122
|
* @param props.type - Type of feedback indicator
|
|
138
123
|
*/
|
|
139
124
|
selectedFeedback?: (props: {
|
|
140
|
-
Original: ComponentType;
|
|
141
125
|
option: ComboboxOption;
|
|
142
126
|
isSelected: boolean;
|
|
143
127
|
type: "checkbox" | "check";
|
|
144
128
|
}) => ReactNode;
|
|
145
129
|
/**
|
|
146
130
|
* Custom renderer for the empty state when no options match.
|
|
147
|
-
* @param props.Original - Default empty state component
|
|
148
131
|
* @param props.text - The "no items found" message
|
|
149
132
|
*/
|
|
150
133
|
empty?: (props: {
|
|
151
|
-
Original: ComponentType;
|
|
152
134
|
text: string;
|
|
153
135
|
}) => ReactNode;
|
|
154
136
|
/**
|
|
155
137
|
* Custom renderer for the search input field.
|
|
156
|
-
* @param props.Original - Default search input component
|
|
157
138
|
* @param props.placeholder - Placeholder text for the search input
|
|
158
139
|
*/
|
|
159
140
|
searchInput?: (props: {
|
|
160
|
-
Original: ComponentType;
|
|
161
141
|
placeholder: string;
|
|
162
142
|
}) => ReactNode;
|
|
163
143
|
};
|
|
@@ -34,7 +34,5 @@ export declare const CustomEmptyState: Story;
|
|
|
34
34
|
export declare const CustomSelectedFeedback: Story;
|
|
35
35
|
export declare const WithIconAndPlaceholder: Story;
|
|
36
36
|
export declare const ValuePositionLeft: Story;
|
|
37
|
-
export declare const
|
|
38
|
-
export declare const
|
|
39
|
-
export declare const WrappedOptions: Story;
|
|
40
|
-
export declare const EnhancedEmptyState: Story;
|
|
37
|
+
export declare const CustomDisplayValue: Story;
|
|
38
|
+
export declare const CustomOptions: Story;
|