@czi-sds/components 22.13.2 → 22.13.3

package/dist/index.cjs.d.ts

@@ -41,6 +41,7 @@ import { AlertProps } from "@mui/lab";
 import { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteValue } from "@mui/base";
 import { AlertTitleProps } from "@mui/material/AlertTitle";
 import { AutocompleteValue as AutocompleteValue$1 } from "@mui/material/useAutocomplete";
+import { AutocompleteCloseReason as AutocompleteCloseReason$1 } from "@mui/material/useAutocomplete";
 interface SdsAccordionDetailsProps {
     id?: string;
 }
@@ -1276,6 +1277,8 @@ interface ExtraDropdownMenuProps extends StyleProps$1 {
     onClickAway?: (event: MouseEvent | TouchEvent) => void;
     ClickAwayListenerProps?: Partial<MUIClickAwayListenerProps>;
     width?: number | CSSProperties["width"];
+    onOpen?: (event: React.SyntheticEvent) => void;
+    onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason$0) => void;
 }
 type CustomAutocompleteProps$1<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = Omit<AutocompleteProps$0<T, Multiple, DisableClearable, FreeSolo>, "renderInput">;
 type DropdownMenuProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = CustomAutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo> & ExtraDropdownMenuProps;
@@ -1330,6 +1333,8 @@ interface ExtraDropdownProps<T, Multiple extends boolean | undefined, DisableCle
     className?: string;
     InputDropdownComponent?: typeof InputDropdown;
     isTriggerChangeOnOptionClick?: boolean;
+    onOpen?: (event: React.SyntheticEvent) => void;
+    onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason$1) => void;
 }
 type CustomAutocompleteProps$2<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, "renderInput">;
 type DropdownProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = CustomAutocompleteProps$2<T, Multiple, DisableClearable, FreeSolo> & ExtraDropdownProps<T, Multiple, DisableClearable, FreeSolo>;

package/dist/index.cjs.js

@@ -6465,7 +6465,7 @@ var DEFAULT_POPPER_BASE_PROPS = {
 var DropdownMenu = function (props) {
     var _a, _b;
     var theme = material.useTheme();
-    var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.isSearchAutoFocus, isSearchAutoFocus = _h === void 0 ? true : _h, _j = props.search, search = _j === void 0 ? false : _j, title = props.title, headerComponentSlot = props.headerComponentSlot, _k = props.label, label = _k === void 0 ? "Search" : _k, children = props.children, options = props.options, _l = props.onClickAway, onClickAway = _l === void 0 ? noop : _l, ClickAwayListenerProps = props.ClickAwayListenerProps, _m = props.width, width = _m === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _m, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "isSearchAutoFocus", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
+    var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.isSearchAutoFocus, isSearchAutoFocus = _h === void 0 ? true : _h, _j = props.search, search = _j === void 0 ? false : _j, title = props.title, headerComponentSlot = props.headerComponentSlot, _k = props.label, label = _k === void 0 ? "Search" : _k, children = props.children, options = props.options, _l = props.onClickAway, onClickAway = _l === void 0 ? noop : _l, ClickAwayListenerProps = props.ClickAwayListenerProps, _m = props.width, width = _m === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _m, onOpen = props.onOpen, onClose = props.onClose, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "isSearchAutoFocus", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width", "onOpen", "onClose"]);
     var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
     // (masoudmanson): The DropdownMenu's Popper component should have a minimum
     // width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
@@ -6487,7 +6487,7 @@ var DropdownMenu = function (props) {
         ], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, { 
         // (masoudmanson): To override the width of the Popper,
         // the sx prop's value must be set after spreading the PopperBaseProps.
-        sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxRuntime.jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsxRuntime.jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerComponentSlot })] })), anchorEl && (jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
+        sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxRuntime.jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsxRuntime.jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerComponentSlot })] })), anchorEl && (jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop, onOpen: onOpen, onClose: onClose }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
 };
 
 var doNotForwardProps$s = [
@@ -6783,7 +6783,7 @@ var Dropdown = function (props) {
     // which by default will not close on blur. If closeOnBlur is enabled, clicking out
     // is equivalent to clicking the Cancel button, closing the dropdown and losing
     // unapplied changes.
-    closeOnBlur = _g === void 0 ? !buttons : _g, onClose = props.onClose, onChange = props.onChange, title = props.title, _h = props.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, InputDropdownProps = props.InputDropdownProps, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "isSearchAutoFocus", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "title", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
+    closeOnBlur = _g === void 0 ? !buttons : _g, onClose = props.onClose, onOpen = props.onOpen, onChange = props.onChange, title = props.title, _h = props.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, InputDropdownProps = props.InputDropdownProps, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "isSearchAutoFocus", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onOpen", "onChange", "title", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
     if (buttons && !multiple) {
         // eslint-disable-next-line no-console
         console.warn("Warning: buttons are only supported for multiple select dropdowns.");
@@ -6880,6 +6880,7 @@ var Dropdown = function (props) {
             }
             setAnchorEl(event.currentTarget);
             setOpen(true);
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
         }
     }, [
         onClick,
@@ -6889,6 +6890,7 @@ var Dropdown = function (props) {
         setPendingValue,
         value,
         handleDropdownClose,
+        onOpen,
     ]);
     var handleClose = React.useCallback(function (event, reason) {
         if (reason === "toggleInput")
@@ -6941,7 +6943,10 @@ var Dropdown = function (props) {
         }
         anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.focus();
         setOpen(false);
-    }, [multiple, setPendingValue, value, anchorEl]);
+        // Create a synthetic event for the onClose callback
+        var syntheticEvent = new Event("cancel");
+        onClose === null || onClose === void 0 ? void 0 : onClose(syntheticEvent, "escape");
+    }, [multiple, setPendingValue, value, anchorEl, onClose]);
     // Helper function to count multi-column selections
     var countMultiColumnSelections = React.useCallback(function (currentValue) {
         if (!currentValue || typeof currentValue !== "object")
@@ -6989,7 +6994,7 @@ var Dropdown = function (props) {
         countMultiColumnSelections,
         getSingleSelectionProps,
     ]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, "aria-expanded": open, "aria-haspopup": "listbox", multiple: multiple || isMultiColumn }, getInputDropdownProps, InputDropdownProps, rest)), jsxRuntime.jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: multiple ? pendingValue : value, isSearchAutoFocus: isSearchAutoFocus, title: title }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsxRuntime.jsx(DropdownButtons, { buttonPosition: buttonPosition, onApply: handleButtonClose, onCancel: handleCancel })) : null }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, "aria-expanded": open, "aria-haspopup": "listbox", multiple: multiple || isMultiColumn }, getInputDropdownProps, InputDropdownProps, rest)), jsxRuntime.jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, onOpen: onOpen, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: multiple ? pendingValue : value, isSearchAutoFocus: isSearchAutoFocus, title: title }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsxRuntime.jsx(DropdownButtons, { buttonPosition: buttonPosition, onApply: handleButtonClose, onCancel: handleCancel })) : null }))] }));
 };
 
 var tagSizeS = function (props) {

package/dist/index.esm.d.ts

@@ -41,6 +41,7 @@ import { AlertProps } from "@mui/lab";
 import { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteValue } from "@mui/base";
 import { AlertTitleProps } from "@mui/material/AlertTitle";
 import { AutocompleteValue as AutocompleteValue$1 } from "@mui/material/useAutocomplete";
+import { AutocompleteCloseReason as AutocompleteCloseReason$1 } from "@mui/material/useAutocomplete";
 interface SdsAccordionDetailsProps {
     id?: string;
 }
@@ -1276,6 +1277,8 @@ interface ExtraDropdownMenuProps extends StyleProps$1 {
     onClickAway?: (event: MouseEvent | TouchEvent) => void;
     ClickAwayListenerProps?: Partial<MUIClickAwayListenerProps>;
     width?: number | CSSProperties["width"];
+    onOpen?: (event: React.SyntheticEvent) => void;
+    onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason$0) => void;
 }
 type CustomAutocompleteProps$1<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = Omit<AutocompleteProps$0<T, Multiple, DisableClearable, FreeSolo>, "renderInput">;
 type DropdownMenuProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = CustomAutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo> & ExtraDropdownMenuProps;
@@ -1330,6 +1333,8 @@ interface ExtraDropdownProps<T, Multiple extends boolean | undefined, DisableCle
     className?: string;
     InputDropdownComponent?: typeof InputDropdown;
     isTriggerChangeOnOptionClick?: boolean;
+    onOpen?: (event: React.SyntheticEvent) => void;
+    onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason$1) => void;
 }
 type CustomAutocompleteProps$2<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, "renderInput">;
 type DropdownProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = CustomAutocompleteProps$2<T, Multiple, DisableClearable, FreeSolo> & ExtraDropdownProps<T, Multiple, DisableClearable, FreeSolo>;

package/dist/index.esm.js

@@ -6442,7 +6442,7 @@ var DEFAULT_POPPER_BASE_PROPS = {
 var DropdownMenu = function (props) {
     var _a, _b;
     var theme = useTheme$4();
-    var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.isSearchAutoFocus, isSearchAutoFocus = _h === void 0 ? true : _h, _j = props.search, search = _j === void 0 ? false : _j, title = props.title, headerComponentSlot = props.headerComponentSlot, _k = props.label, label = _k === void 0 ? "Search" : _k, children = props.children, options = props.options, _l = props.onClickAway, onClickAway = _l === void 0 ? noop : _l, ClickAwayListenerProps = props.ClickAwayListenerProps, _m = props.width, width = _m === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _m, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "isSearchAutoFocus", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
+    var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.isSearchAutoFocus, isSearchAutoFocus = _h === void 0 ? true : _h, _j = props.search, search = _j === void 0 ? false : _j, title = props.title, headerComponentSlot = props.headerComponentSlot, _k = props.label, label = _k === void 0 ? "Search" : _k, children = props.children, options = props.options, _l = props.onClickAway, onClickAway = _l === void 0 ? noop : _l, ClickAwayListenerProps = props.ClickAwayListenerProps, _m = props.width, width = _m === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _m, onOpen = props.onOpen, onClose = props.onClose, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "isSearchAutoFocus", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width", "onOpen", "onClose"]);
     var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
     // (masoudmanson): The DropdownMenu's Popper component should have a minimum
     // width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
@@ -6464,7 +6464,7 @@ var DropdownMenu = function (props) {
         ], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, { 
         // (masoudmanson): To override the width of the Popper,
         // the sx prop's value must be set after spreading the PopperBaseProps.
-        sx: dropdownMenuPopperSx, children: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsx(Fragment, { children: headerComponentSlot })] })), anchorEl && (jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
+        sx: dropdownMenuPopperSx, children: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsx(Fragment, { children: headerComponentSlot })] })), anchorEl && (jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop, onOpen: onOpen, onClose: onClose }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
 };
 
 var doNotForwardProps$s = [
@@ -6760,7 +6760,7 @@ var Dropdown = function (props) {
     // which by default will not close on blur. If closeOnBlur is enabled, clicking out
     // is equivalent to clicking the Cancel button, closing the dropdown and losing
     // unapplied changes.
-    closeOnBlur = _g === void 0 ? !buttons : _g, onClose = props.onClose, onChange = props.onChange, title = props.title, _h = props.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, InputDropdownProps = props.InputDropdownProps, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "isSearchAutoFocus", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "title", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
+    closeOnBlur = _g === void 0 ? !buttons : _g, onClose = props.onClose, onOpen = props.onOpen, onChange = props.onChange, title = props.title, _h = props.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, InputDropdownProps = props.InputDropdownProps, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "isSearchAutoFocus", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onOpen", "onChange", "title", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
     if (buttons && !multiple) {
         // eslint-disable-next-line no-console
         console.warn("Warning: buttons are only supported for multiple select dropdowns.");
@@ -6857,6 +6857,7 @@ var Dropdown = function (props) {
             }
             setAnchorEl(event.currentTarget);
             setOpen(true);
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
         }
     }, [
         onClick,
@@ -6866,6 +6867,7 @@ var Dropdown = function (props) {
         setPendingValue,
         value,
         handleDropdownClose,
+        onOpen,
     ]);
     var handleClose = useCallback(function (event, reason) {
         if (reason === "toggleInput")
@@ -6918,7 +6920,10 @@ var Dropdown = function (props) {
         }
         anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.focus();
         setOpen(false);
-    }, [multiple, setPendingValue, value, anchorEl]);
+        // Create a synthetic event for the onClose callback
+        var syntheticEvent = new Event("cancel");
+        onClose === null || onClose === void 0 ? void 0 : onClose(syntheticEvent, "escape");
+    }, [multiple, setPendingValue, value, anchorEl, onClose]);
     // Helper function to count multi-column selections
     var countMultiColumnSelections = useCallback(function (currentValue) {
         if (!currentValue || typeof currentValue !== "object")
@@ -6966,7 +6971,7 @@ var Dropdown = function (props) {
         countMultiColumnSelections,
         getSingleSelectionProps,
     ]);
-    return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, "aria-expanded": open, "aria-haspopup": "listbox", multiple: multiple || isMultiColumn }, getInputDropdownProps, InputDropdownProps, rest)), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: multiple ? pendingValue : value, isSearchAutoFocus: isSearchAutoFocus, title: title }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsx(DropdownButtons, { buttonPosition: buttonPosition, onApply: handleButtonClose, onCancel: handleCancel })) : null }))] }));
+    return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, "aria-expanded": open, "aria-haspopup": "listbox", multiple: multiple || isMultiColumn }, getInputDropdownProps, InputDropdownProps, rest)), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, onOpen: onOpen, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: multiple ? pendingValue : value, isSearchAutoFocus: isSearchAutoFocus, title: title }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsx(DropdownButtons, { buttonPosition: buttonPosition, onApply: handleButtonClose, onCancel: handleCancel })) : null }))] }));
 };
 
 var tagSizeS = function (props) {