Skip to content

Commit f81b2bc

Browse files
rivka-ungarrivka-ungar
committed
types
1 parent 088aa8d commit f81b2bc

File tree

1 file changed

+165
-171
lines changed

1 file changed

+165
-171
lines changed

‎packages/core/src/components/next/Dropdown/Dropdown.types.ts‎

Lines changed: 165 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,6 @@ type BoxModeConstraint =
7777
searchable?: false;
7878
/**
7979
* If true, the dropdown menu is displayed inline without a popup/dialog.
80-
* The menu will always be visible and cannot be closed.
81-
* This mode is useful for embedding dropdowns directly in a layout.
82-
* Note: Box mode requires searchable to be true.
8380
*/
8481
boxMode?: false;
8582
}
@@ -90,178 +87,175 @@ type BoxModeConstraint =
9087
searchable: true;
9188
/**
9289
* If true, the dropdown menu is displayed inline without a popup/dialog.
93-
* The menu will always be visible and cannot be closed.
94-
* This mode is useful for embedding dropdowns directly in a layout.
95-
* Note: Box mode requires searchable to be true.
9690
*/
9791
boxMode?: boolean;
9892
};
9993

100-
export type BaseDropdownProps<Item extends BaseListItemData<Record<string, unknown>>> = VibeComponentProps &
101-
BoxModeConstraint & {
102-
/**
103-
* The list of options available in the list.
104-
*/
105-
options: DropdownGroupOption<Item>;
106-
/**
107-
* Props to be passed to the Tooltip component that wraps the dropdown.
108-
*/
109-
tooltipProps?: Partial<TooltipProps>;
110-
/**
111-
* If true, displays dividers between grouped options.
112-
*/
113-
withGroupDivider?: boolean;
114-
/**
115-
* If true, makes the group title sticky.
116-
*/
117-
stickyGroupTitle?: boolean;
118-
/**
119-
* The size of the dropdown.
120-
*/
121-
size?: DropdownSizes;
122-
/**
123-
* The direction of the dropdown.
124-
*/
125-
dir?: DropdownDirection;
126-
/**
127-
* The function to call to render an option.
128-
*/
129-
optionRenderer?: (option: Item) => React.ReactNode;
130-
/**
131-
* The function to call to render the menu.
132-
*/
133-
menuRenderer?: (props: {
134-
children: React.ReactNode;
135-
filteredOptions: ListGroup<Item>[];
136-
selectedItems: Item[];
137-
getItemProps: (options: any) => Record<string, unknown>;
138-
}) => React.ReactNode;
139-
/**
140-
* The message to display when there are no options.
141-
*/
142-
noOptionsMessage?: string | React.ReactNode;
143-
/**
144-
* The placeholder to display when the dropdown is empty.
145-
*/
146-
placeholder?: string;
147-
/**
148-
* If true, the dropdown is disabled.
149-
*/
150-
disabled?: boolean;
151-
/**
152-
* If true, the dropdown is read only.
153-
*/
154-
readOnly?: boolean;
155-
/**
156-
* If true, the dropdown is in an error state.
157-
*/
158-
error?: boolean;
159-
/**
160-
* The helper text to display below the dropdown.
161-
*/
162-
helperText?: string;
163-
/**
164-
* If true, the dropdown is required.
165-
*/
166-
required?: boolean;
167-
/**
168-
* The label to display above the dropdown.
169-
*/
170-
label?: string;
171-
/**
172-
* The ARIA label for the dropdown.
173-
*/
174-
ariaLabel?: string;
175-
/**
176-
* The ARIA label for the dropdown input.
177-
*/
178-
inputAriaLabel?: string;
179-
/**
180-
* The ARIA label for the menu container.
181-
*/
182-
menuAriaLabel?: string;
183-
/**
184-
* The ARIA label for the clear button.
185-
*/
186-
clearAriaLabel?: string;
187-
/**
188-
* The current value of the input field.
189-
*/
190-
inputValue?: string;
191-
/**
192-
* The maximum height of the dropdown menu.
193-
*/
194-
maxMenuHeight?: number;
195-
/**
196-
* If true, controls the menu open state.
197-
*/
198-
isMenuOpen?: boolean;
199-
/**
200-
* If true, closes the menu when an option is selected.
201-
*/
202-
closeMenuOnSelect?: boolean;
203-
/**
204-
* If true, the dropdown menu will be auto focused.
205-
*/
206-
autoFocus?: boolean;
207-
/**
208-
* If true, the dropdown will have a clear button.
209-
*/
210-
clearable?: boolean;
211-
/**
212-
* Callback fired when the dropdown loses focus.
213-
*/
214-
onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
215-
/**
216-
* Callback fired when the clear button is clicked.
217-
*/
218-
onClear?: () => void;
219-
/**
220-
* Callback fired when the dropdown gains focus.
221-
*/
222-
onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
223-
/**
224-
* Callback fired when the dropdown input value changes.
225-
*/
226-
onInputChange?: (input: string | null) => void;
227-
/**
228-
* Callback fired when a key is pressed inside the dropdown.
229-
*/
230-
onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
231-
/**
232-
* Callback fired when the dropdown menu opens.
233-
*/
234-
onMenuOpen?: () => void;
235-
/**
236-
* Callback fired when the dropdown menu closes.
237-
*/
238-
onMenuClose?: () => void;
239-
/**
240-
* Callback fired when an option is selected.
241-
*/
242-
onOptionSelect?: (option: Item) => void;
243-
/**
244-
* Callback fired when scrolling inside the dropdown.
245-
*/
246-
onScroll?: (event: React.UIEvent<HTMLUListElement>) => void;
247-
/**
248-
* A function to customize the filtering of options.
249-
* It receives an option and the current input value, and should return true if the option should be included, false otherwise.
250-
*/
251-
filterOption?: (option: Item, inputValue: string) => boolean;
252-
/**
253-
* If false, selected options will be hidden from the list. Defaults to true.
254-
*/
255-
showSelectedOptions?: boolean;
256-
/**
257-
* The class name to be applied to the menu wrapper.
258-
*/
259-
menuWrapperClassName?: string;
260-
/**
261-
* If true, displays a loading indicator in the dropdown controls.
262-
*/
263-
loading?: boolean;
264-
} & (MultiSelectSpecifics<Item> | SingleSelectSpecifics<Item>);
94+
export type BaseDropdownProps<Item extends BaseListItemData<Record<string, unknown>>> = VibeComponentProps & {
95+
/**
96+
* The list of options available in the list.
97+
*/
98+
options: DropdownGroupOption<Item>;
99+
/**
100+
* Props to be passed to the Tooltip component that wraps the dropdown.
101+
*/
102+
tooltipProps?: Partial<TooltipProps>;
103+
/**
104+
* If true, displays dividers between grouped options.
105+
*/
106+
withGroupDivider?: boolean;
107+
/**
108+
* If true, makes the group title sticky.
109+
*/
110+
stickyGroupTitle?: boolean;
111+
/**
112+
* The size of the dropdown.
113+
*/
114+
size?: DropdownSizes;
115+
/**
116+
* The direction of the dropdown.
117+
*/
118+
dir?: DropdownDirection;
119+
/**
120+
* The function to call to render an option.
121+
*/
122+
optionRenderer?: (option: Item) => React.ReactNode;
123+
/**
124+
* The function to call to render the menu.
125+
*/
126+
menuRenderer?: (props: {
127+
children: React.ReactNode;
128+
filteredOptions: ListGroup<Item>[];
129+
selectedItems: Item[];
130+
getItemProps: (options: any) => Record<string, unknown>;
131+
}) => React.ReactNode;
132+
/**
133+
* The message to display when there are no options.
134+
*/
135+
noOptionsMessage?: string | React.ReactNode;
136+
/**
137+
* The placeholder to display when the dropdown is empty.
138+
*/
139+
placeholder?: string;
140+
/**
141+
* If true, the dropdown is disabled.
142+
*/
143+
disabled?: boolean;
144+
/**
145+
* If true, the dropdown is read only.
146+
*/
147+
readOnly?: boolean;
148+
/**
149+
* If true, the dropdown is in an error state.
150+
*/
151+
error?: boolean;
152+
/**
153+
* The helper text to display below the dropdown.
154+
*/
155+
helperText?: string;
156+
/**
157+
* If true, the dropdown is required.
158+
*/
159+
required?: boolean;
160+
/**
161+
* The label to display above the dropdown.
162+
*/
163+
label?: string;
164+
/**
165+
* The ARIA label for the dropdown.
166+
*/
167+
ariaLabel?: string;
168+
/**
169+
* The ARIA label for the dropdown input.
170+
*/
171+
inputAriaLabel?: string;
172+
/**
173+
* The ARIA label for the menu container.
174+
*/
175+
menuAriaLabel?: string;
176+
/**
177+
* The ARIA label for the clear button.
178+
*/
179+
clearAriaLabel?: string;
180+
/**
181+
* The current value of the input field.
182+
*/
183+
inputValue?: string;
184+
/**
185+
* The maximum height of the dropdown menu.
186+
*/
187+
maxMenuHeight?: number;
188+
/**
189+
* If true, controls the menu open state.
190+
*/
191+
isMenuOpen?: boolean;
192+
/**
193+
* If true, closes the menu when an option is selected.
194+
*/
195+
closeMenuOnSelect?: boolean;
196+
/**
197+
* If true, the dropdown menu will be auto focused.
198+
*/
199+
autoFocus?: boolean;
200+
/**
201+
* If true, the dropdown will have a clear button.
202+
*/
203+
clearable?: boolean;
204+
/**
205+
* Callback fired when the dropdown loses focus.
206+
*/
207+
onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
208+
/**
209+
* Callback fired when the clear button is clicked.
210+
*/
211+
onClear?: () => void;
212+
/**
213+
* Callback fired when the dropdown gains focus.
214+
*/
215+
onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
216+
/**
217+
* Callback fired when the dropdown input value changes.
218+
*/
219+
onInputChange?: (input: string | null) => void;
220+
/**
221+
* Callback fired when a key is pressed inside the dropdown.
222+
*/
223+
onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
224+
/**
225+
* Callback fired when the dropdown menu opens.
226+
*/
227+
onMenuOpen?: () => void;
228+
/**
229+
* Callback fired when the dropdown menu closes.
230+
*/
231+
onMenuClose?: () => void;
232+
/**
233+
* Callback fired when an option is selected.
234+
*/
235+
onOptionSelect?: (option: Item) => void;
236+
/**
237+
* Callback fired when scrolling inside the dropdown.
238+
*/
239+
onScroll?: (event: React.UIEvent<HTMLUListElement>) => void;
240+
/**
241+
* A function to customize the filtering of options.
242+
* It receives an option and the current input value, and should return true if the option should be included, false otherwise.
243+
*/
244+
filterOption?: (option: Item, inputValue: string) => boolean;
245+
/**
246+
* If false, selected options will be hidden from the list. Defaults to true.
247+
*/
248+
showSelectedOptions?: boolean;
249+
/**
250+
* The class name to be applied to the menu wrapper.
251+
*/
252+
menuWrapperClassName?: string;
253+
/**
254+
* If true, displays a loading indicator in the dropdown controls.
255+
*/
256+
loading?: boolean;
257+
} & BoxModeConstraint &
258+
(MultiSelectSpecifics<Item> | SingleSelectSpecifics<Item>);
265259

266260
export type DropdownSizes = "small" | "medium" | "large";
267261

0 commit comments

Comments
 (0)