Skip to content

Commit 61afc97

Browse files
author
i528926
committed
feat(Dropdown): add onToggle prop and update handlers for dropdown state management
1 parent 51621a1 commit 61afc97

File tree

2 files changed

+36
-6
lines changed

2 files changed

+36
-6
lines changed

apps/storybook/src/Dropdown.stories.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,3 +129,17 @@ ItemClickHandler.args = {
129129
</>
130130
),
131131
};
132+
133+
export const onToggleHandler = Template.bind({});
134+
onToggleHandler.storyName = "onToggle handlers";
135+
onToggleHandler.args = {
136+
onToggle: action("Dropdown toggled"),
137+
children: (
138+
<>
139+
<DropdownItem onClick={action("Dashboard!")}>Dashboard</DropdownItem>
140+
<DropdownItem onClick={action("Settings!")}>Settings</DropdownItem>
141+
<DropdownItem onClick={action("Earnings!")}>Earnings</DropdownItem>
142+
<DropdownItem onClick={action("Sign out!")}>Sign out</DropdownItem>
143+
</>
144+
),
145+
};

packages/ui/src/components/Dropdown/Dropdown.tsx

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export interface DropdownTheme {
4545

4646
export interface DropdownProps
4747
extends Pick<FloatingProps, "placement" | "trigger">,
48-
Omit<ButtonProps, keyof ThemingProps<DropdownTheme>>,
48+
Omit<ButtonProps, keyof ThemingProps<DropdownTheme> | "onToggle">,
4949
ThemingProps<DropdownTheme> {
5050
arrowIcon?: boolean;
5151
dismissOnClick?: boolean;
@@ -54,6 +54,7 @@ export interface DropdownProps
5454
label?: ReactNode;
5555
enableTypeAhead?: boolean;
5656
renderTrigger?: (theme: DropdownTheme) => ReactElement;
57+
onToggle?: (open: boolean) => void;
5758
"data-testid"?: string;
5859
}
5960

@@ -130,6 +131,7 @@ export function Dropdown(props: DropdownProps) {
130131
dismissOnClick = true,
131132
enableTypeAhead = true,
132133
renderTrigger,
134+
onToggle,
133135
...restProps
134136
} = resolveProps(props, provider.props?.dropdown);
135137

@@ -143,10 +145,21 @@ export function Dropdown(props: DropdownProps) {
143145
} = restProps;
144146
const dataTestId = restProps["data-testid"] || "flowbite-dropdown-target";
145147

146-
const handleSelect = useCallback((index: number | null) => {
147-
setSelectedIndex(index);
148-
setOpen(false);
149-
}, []);
148+
const handleOpenChange = useCallback(
149+
(newOpen: boolean) => {
150+
setOpen(newOpen);
151+
onToggle?.(newOpen);
152+
},
153+
[onToggle],
154+
);
155+
156+
const handleSelect = useCallback(
157+
(index: number | null) => {
158+
setSelectedIndex(index);
159+
handleOpenChange(false);
160+
},
161+
[handleOpenChange],
162+
);
150163

151164
const handleTypeaheadMatch = useCallback(
152165
(index: number | null) => {
@@ -161,7 +174,10 @@ export function Dropdown(props: DropdownProps) {
161174

162175
const { context, floatingStyles, refs } = useBaseFLoating<HTMLButtonElement>({
163176
open,
164-
setOpen,
177+
setOpen: (value) => {
178+
const newOpen = typeof value === "function" ? value(open) : value;
179+
handleOpenChange(newOpen);
180+
},
165181
placement,
166182
});
167183

0 commit comments

Comments
 (0)