@czi-sds/components 19.4.0 → 19.4.2

package/dist/index.cjs.d.ts

@@ -4,6 +4,7 @@ import { AccordionProps as RawAccordionProps } from "@mui/material";
 import { AccordionSummaryProps as RawAccordionSummaryProps } from "@mui/material";
 import { AutocompleteChangeDetails as AutocompleteChangeDetails$0 } from "@mui/material";
 import { AutocompleteChangeReason as AutocompleteChangeReason$0 } from "@mui/material";
+import { AutocompleteCloseReason as AutocompleteCloseReason$0 } from "@mui/material";
 import { AutocompleteValue as AutocompleteValue$0 } from "@mui/material";
 import { AutocompleteProps as MuiAutocompleteProps } from "@mui/material";
 import { TextFieldProps as RawTextFieldSearchProps } from "@mui/material";
@@ -34,7 +35,7 @@ import { ReactElement, ReactNode, SyntheticEvent, ComponentType } from "react";
 import { Theme, ThemeOptions, TypographyStyle, PaletteOptions } from "@mui/material/styles";
 import { SerializedStyles } from "@emotion/react";
 import { AlertProps } from "@mui/lab";
-import { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteValue } from "@mui/base";
+import { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteValue } from "@mui/base";
 import { AlertTitleProps } from "@mui/material/AlertTitle";
 import { AutocompleteValue as AutocompleteValue$1 } from "@mui/material/useAutocomplete";
 declare const AccordionDetails: (props: AccordionDetailsProps) => import("react/jsx-runtime").JSX.Element;
@@ -439,6 +440,8 @@ interface ExtraAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> extend
     onChange?: (event: React.SyntheticEvent, value: AutocompleteValue$0<T, Multiple, DisableClearable, FreeSolo>, reason: AutocompleteChangeReason$0, details?: AutocompleteChangeDetails$0<T>) => void;
     InputBaseProps?: Partial<InputSearchProps>;
     label?: string;
+    onClickAway?: (event?: MouseEvent | TouchEvent, reason?: AutocompleteCloseReason$0) => void;
+    onClick?: (event?: TouchEvent | MouseEvent) => void;
 }
 type CustomAutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = Omit<MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, "renderInput" | "nonce" | "rev" | "rel" | "autoFocus" | "content">;
 type AutocompleteBaseProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = CustomAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> & ExtraAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>;
@@ -472,7 +475,8 @@ interface ExtraAutocompleteMultiColumnProps<T, Multiple extends boolean | undefi
     PopperComponent?: React.JSXElementConstructor<PopperProps>;
     PopperPlacement?: "bottom-start" | "top-start" | "bottom-end" | "top-end";
     children?: JSX.Element | null;
-    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onClickAway?: (event?: MouseEvent | TouchEvent, reason?: AutocompleteCloseReason$0) => void;
+    onClick?: (event?: TouchEvent | MouseEvent) => void;
     ClickAwayListenerProps?: Partial<MUIClickAwayListenerProps>;
     options: AutocompleteMultiColumnOption<T, Multiple, DisableClearable, FreeSolo>[];
     value?: AutocompleteMultiColumnValue<T, Multiple, DisableClearable, FreeSolo>;
@@ -499,7 +503,8 @@ interface ExtraAutocompleteProps$0<T, Multiple extends boolean | undefined, Disa
     options: SDSAutocompleteOptions<T, Multiple, DisableClearable, FreeSolo>;
     PopperBaseProps?: Partial<PopperProps>;
     value?: SDSAutocompleteValue<T, Multiple, DisableClearable, FreeSolo>;
-    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onClickAway?: (event?: MouseEvent | TouchEvent, reason?: AutocompleteCloseReason) => void;
+    onClick?: (event?: TouchEvent | MouseEvent) => void;
     onChange?: SDSAutocompleteOnChange<T, Multiple, DisableClearable, FreeSolo>;
     count?: number;
     icon?: ReactElement;

package/dist/index.cjs.js

@@ -3774,25 +3774,37 @@ var StyledMenuItemText = styles.styled("div")(templateObject_6$8 || (templateObj
 var templateObject_1$L, templateObject_2$t, templateObject_3$k, templateObject_4$f, templateObject_5$b, templateObject_6$8;
 
 var AutocompleteBase = function (props) {
-    var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q;
+    var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q, onClickAway = props.onClickAway, onClick = props.onClick, onOpen = props.onOpen, onClose = props.onClose;
     var theme = styles.useTheme();
     var _r = React.useState(""), inputValue = _r[0], setInputValue = _r[1];
-    return (jsxRuntime.jsx(StyledAutocompleteBase, __assign({ clearOnBlur: clearOnBlur, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: StyledPaper$3, PopperComponent: useDefaultPopperComponent(), renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: defaultRenderInput, multiple: multiple }, props, { 
-        // (masoudmanson): For multiple options (multiple = true), setting blurOnSelect to false
-        // keeps the dropdown open after selecting an option. This feature enhances user experience
-        // by preventing the dropdown from closing, enabling users to select multiple options
-        // without having to reopen the menu repeatedly.
+    return (jsxRuntime.jsx(StyledAutocompleteBase, __assign({ clearOnBlur: clearOnBlur, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: StyledPaper$3, PopperComponent: useDefaultPopperComponent(), renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: defaultRenderInput, multiple: multiple, 
+        /**
+         * (masoudmanson): Overrides the onOpen and onClose handlers to ensure that
+         * the onClick and onClickAway handlers are triggered when a controlled dropdown
+         * is opened or closed, respectively.
+         */
+        onOpen: defaultOnOpen, onClose: defaultOnClose }, props, { 
+        /**
+         * (masoudmanson): For multiple options (multiple = true), setting blurOnSelect to false
+         * keeps the dropdown open after selecting an option. This feature enhances user experience
+         * by preventing the dropdown from closing, enabling users to select multiple options
+         * without having to reopen the menu repeatedly.
+         */
         blurOnSelect: multiple ? false : blurOnSelect, 
-        // (masoudmanson): Given the necessity of maintaining consistent onBlur functionality,
-        // and clearing the input value on blur, it's crucial to include the onBlur handler
-        // after spreading other props. Furthermore, within the defaultOnBlur function, the
-        // actual onBlur function is invoked for completeness.
+        /**
+         * (masoudmanson): Given the necessity of maintaining consistent onBlur functionality,
+         * and clearing the input value on blur, it's crucial to include the onBlur handler
+         * after spreading other props. Furthermore, within the defaultOnBlur function, the
+         * actual onBlur function is invoked for completeness.
+         */
         onBlur: defaultOnBlur, 
-        // (masoudmanson): To ensure component-level actions (changing the input field value)
-        // trigger upon input changes, it's crucial to position the onInputChange handler after
-        // spreading the other props. Furthermore, within the defaultOnInputChange function,
-        // the provided onInputChange from props is called at the end to emit the input changes
-        // to the user.
+        /**
+         * (masoudmanson): To ensure component-level actions (changing the input field value)
+         * trigger upon input changes, it's crucial to position the onInputChange handler after
+         * spreading the other props. Furthermore, within the defaultOnInputChange function,
+         * the provided onInputChange from props is called at the end to emit the input changes
+         * to the user.
+         */
         onInputChange: defaultOnInputChange })));
     /**
      * (masoudmanson): Using a custom Popper or Paper with the Autocomplete
@@ -3836,6 +3848,24 @@ var AutocompleteBase = function (props) {
             setInputValue("");
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     }
+    /**
+     * (masoudmanson): The default onOpen handler is the Callback fired when the popup
+     * requests to be opened. This function is responsible for invoking the onOpen and onClick
+     * handlers when a controlled dropdown is opening.
+     */
+    function defaultOnOpen(event) {
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+    /**
+     * (masoudmanson): The default onClose handler is the callback fired when the popup
+     * requests to be closed. This function is responsible for invoking the onClose and onClickAway
+     * handlers when a controlled dropdown is closing.
+     */
+    function defaultOnClose(event, reason) {
+        onClose === null || onClose === void 0 ? void 0 : onClose(event, reason);
+        onClickAway === null || onClickAway === void 0 ? void 0 : onClickAway(event, reason);
+    }
     function defaultOnInputChange(event, value, reason) {
         if (!multiple) {
             if (reason === "input") {
@@ -3989,16 +4019,26 @@ var templateObject_1$J, templateObject_2$r, templateObject_3$i, templateObject_4
 
 var AutocompleteMultiColumn = function (props) {
     var _a;
-    var InputBaseProps = props.InputBaseProps, _b = props.open, open = _b === void 0 ? false : _b, _c = props.PopperPlacement, PopperPlacement = _c === void 0 ? "bottom-start" : _c, PopperBaseProps = props.PopperBaseProps, _d = props.search, search = _d === void 0 ? false : _d, _e = props.label, label = _e === void 0 ? "Search" : _e, _f = props.onClickAway, onClickAway = _f === void 0 ? defaultOnClickAway : _f, ClickAwayListenerProps = props.ClickAwayListenerProps, options = props.options, onInputChange = props.onInputChange, onBlur = props.onBlur, multiple = props.multiple, parentInitialValue = props.value, onChange = props.onChange, _g = props.PopperComponent, PopperComponent = _g === void 0 ? StyledPopper$2 : _g, rest = __rest(props, ["InputBaseProps", "open", "PopperPlacement", "PopperBaseProps", "search", "label", "onClickAway", "ClickAwayListenerProps", "options", "onInputChange", "onBlur", "multiple", "value", "onChange", "PopperComponent"]);
+    var InputBaseProps = props.InputBaseProps, open = props.open, _b = props.PopperPlacement, PopperPlacement = _b === void 0 ? "bottom-start" : _b, PopperBaseProps = props.PopperBaseProps, _c = props.search, search = _c === void 0 ? false : _c, _d = props.label, label = _d === void 0 ? "Search" : _d, onClickAway = props.onClickAway, onClick = props.onClick, ClickAwayListenerProps = props.ClickAwayListenerProps, options = props.options, onInputChange = props.onInputChange, onBlur = props.onBlur, multiple = props.multiple, parentInitialValue = props.value, onChange = props.onChange, _e = props.PopperComponent, PopperComponent = _e === void 0 ? StyledPopper$2 : _e, rest = __rest(props, ["InputBaseProps", "open", "PopperPlacement", "PopperBaseProps", "search", "label", "onClickAway", "onClick", "ClickAwayListenerProps", "options", "onInputChange", "onBlur", "multiple", "value", "onChange", "PopperComponent"]);
     var theme = styles.useTheme();
-    var _h = React.useState(""), inputValue = _h[0], setInputValue = _h[1];
-    var _j = React.useState(open), popperOpen = _j[0], setPopperOpen = _j[1];
+    var isOpenControlled = open !== undefined;
+    var _f = React.useState(""), inputValue = _f[0], setInputValue = _f[1];
+    var _g = React.useState(isOpenControlled ? open : false), popperOpen = _g[0], setPopperOpen = _g[1];
+    /**
+     * (masoudmanson): This useEffect is used to update the popperOpen state
+     * when the open prop is controlled.
+     */
+    React.useEffect(function () {
+        if (isOpenControlled) {
+            setPopperOpen(open);
+        }
+    }, [isOpenControlled, open]);
     var anchorRef = React.useRef(null);
-    var _k = React.useState(null), anchorEl = _k[0], setAnchorEl = _k[1];
+    var _h = React.useState(null), anchorEl = _h[0], setAnchorEl = _h[1];
     React.useEffect(function () {
         setAnchorEl(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current);
     }, [anchorRef]);
-    var _l = React.useState({}), autocompleteMultiColumnValue = _l[0], setAutocompleteMultiColumnValue = _l[1];
+    var _j = React.useState({}), autocompleteMultiColumnValue = _j[0], setAutocompleteMultiColumnValue = _j[1];
     React.useEffect(function () {
         if (parentInitialValue !== undefined) {
             setAutocompleteMultiColumnValue(parentInitialValue);
@@ -4012,7 +4052,7 @@ var AutocompleteMultiColumn = function (props) {
         });
         onChange === null || onChange === void 0 ? void 0 : onChange(event, __assign(__assign({}, autocompleteMultiColumnValue), (_a = {}, _a[column] = val, _a)), reason, details);
     };
-    return (jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledAutocompleteInput, __assign({ id: "location-search", label: label, placeholder: label, value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onBlur: handleInputBlur, ref: anchorRef, search: search, onKeyDown: handleInputKeyDown, InputProps: __assign(__assign({}, InputBaseProps === null || InputBaseProps === void 0 ? void 0 : InputBaseProps.ref), { endAdornment: (jsxRuntime.jsxs(StyledInputAdornment, { position: "end", children: [inputValue && (jsxRuntime.jsx(ButtonIcon, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "primary", sdsSize: "small", sdsIconProps: {
+    return (jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: defaultOnClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledAutocompleteInput, __assign({ id: "location-search", label: label, placeholder: label, value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onBlur: handleInputBlur, ref: anchorRef, search: search, onKeyDown: handleInputKeyDown, InputProps: __assign(__assign({}, InputBaseProps === null || InputBaseProps === void 0 ? void 0 : InputBaseProps.ref), { endAdornment: (jsxRuntime.jsxs(StyledInputAdornment, { position: "end", children: [inputValue && (jsxRuntime.jsx(ButtonIcon, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "primary", sdsSize: "small", sdsIconProps: {
                                         sdsType: "iconButton",
                                     }, icon: "xMark", onClick: clearInput })), jsxRuntime.jsx(ButtonIcon, { "aria-label": "search-button", sdsType: "secondary", sdsSize: "small", sdsIconProps: {
                                         sdsType: "interactive",
@@ -4039,7 +4079,22 @@ var AutocompleteMultiColumn = function (props) {
          */
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange({ target: { value: "" } }, "", "clear");
     }
-    function handleInputClick(_) {
+    function handleInputClick(event) {
+        /**
+         * (masoudmanson): Because the Autocomplete component overrides the
+         * InputSearch's onClick, we must also include the parent onClick here.
+         */
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        /**
+         * (masoudmanson): If the dropdown is controlled, we call the onClick prop to allow the parent
+         * to handle the opening and closing of the dropdown.
+         */
+        if (isOpenControlled) {
+            return;
+        }
+        /**
+         * (masoudmanson): If the dropdown is not controlled, we toggle the dropdown open and closed.
+         */
         if (popperOpen) {
             setPopperOpen(false);
         }
@@ -4063,13 +4118,55 @@ var AutocompleteMultiColumn = function (props) {
             setInputValue("");
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }
-    function defaultOnClickAway() {
-        setPopperOpen(false);
+    /**
+     * (masoudmanson): This is the default onClickAway handler for the Autocomplete component.
+     * It is used to close the dropdown when the user clicks away from the dropdown. It also
+     * calls the parent onClickAway prop if it is provided.
+     */
+    function defaultOnClickAway(event) {
+        /**
+         * (masoudmanson): We only want to close the dropdown if it is open.
+         * This may sound unnecessary, but it is to prevent the dropdown from
+         * calling the parent onClickAway prop when the dropdown is closed.
+         */
+        if (popperOpen) {
+            onClickAway === null || onClickAway === void 0 ? void 0 : onClickAway(event, "blur");
+            /**
+             * (masoudmanson): If the dropdown is controlled, we call the onClickAway prop to allow the parent
+             * to handle the closing of the dropdown.
+             */
+            if (isOpenControlled)
+                return;
+            // (masoudmanson): If the dropdown is not controlled, we close the dropdown.
+            setPopperOpen(false);
+        }
     }
     function handleInputKeyDown(event) {
-        // (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
-        if (event.key === "Backspace") {
-            event.stopPropagation();
+        var _a;
+        /**
+         * (masoudmanson): Because the Autocomplete component overrides the
+         * InputSearch's onKeyDown, we must also include the user defined onKeyDown here.
+         */
+        if (props === null || props === void 0 ? void 0 : props.onKeyDown) {
+            (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        }
+        else {
+            // (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
+            if (event.key === "Backspace") {
+                event.stopPropagation();
+            }
+            /**
+             * (masoudmanson): This is to handle the Escape key to close the dropdown.
+             * If the dropdown is controlled, we call the onClick prop to allow the parent
+             * to handle the closing of the dropdown.
+             */
+            if (event.key === "Escape") {
+                if (isOpenControlled) {
+                    onClick === null || onClick === void 0 ? void 0 : onClick();
+                    return;
+                }
+                setPopperOpen(false);
+            }
         }
     }
 };
@@ -4081,7 +4178,7 @@ var Autocomplete = function (props) {
         if (options.length > 1) {
             return (jsxRuntime.jsx(AutocompleteMultiColumn, __assign({ options: options, value: value, onChange: onChange }, rest, { 
                 // (masoudmanson): groupBy option is disabled on MultiColumn dropdowns
-                groupBy: undefined, open: true })));
+                groupBy: undefined })));
         }
         else {
             return (jsxRuntime.jsx(AutocompleteBase, __assign({ options: options[0].options, value: value, onChange: onChange }, rest)));
@@ -4804,7 +4901,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, { children: [title && (jsxRuntime.jsx(StyledHeaderTitle, { search: search, children: title })), anchorEl && (jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
+        sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [title && (jsxRuntime.jsx(StyledHeaderTitle, { search: search, children: title })), 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] }) })) }) })));
 };
 
 var labelFontBodyS = fontBody("s");
@@ -5345,7 +5442,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 = _f === void 0 ? !buttons : _f, onClose = props.onClose, onChange = props.onChange, _g = props.DropdownMenuProps, DropdownMenuProps = _g === void 0 ? {} : _g, _h = props.InputDropdownProps, InputDropdownProps = _h === void 0 ? { sdsStyle: "minimal" } : _h, _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, rest = __rest(props, ["options", "label", "multiple", "search", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value"]);
+    closeOnBlur = _f === void 0 ? !buttons : _f, onClose = props.onClose, onChange = props.onChange, _g = props.DropdownMenuProps, DropdownMenuProps = _g === void 0 ? {} : _g, _h = props.InputDropdownProps, InputDropdownProps = _h === void 0 ? { sdsStyle: "minimal" } : _h, _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", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "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.");
@@ -5395,6 +5492,7 @@ var Dropdown = function (props) {
         }
     }
     function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
         if (open) {
             if (!shouldShowButtons) {
                 if (multiple) {

package/dist/index.esm.d.ts

@@ -4,6 +4,7 @@ import { AccordionProps as RawAccordionProps } from "@mui/material";
 import { AccordionSummaryProps as RawAccordionSummaryProps } from "@mui/material";
 import { AutocompleteChangeDetails as AutocompleteChangeDetails$0 } from "@mui/material";
 import { AutocompleteChangeReason as AutocompleteChangeReason$0 } from "@mui/material";
+import { AutocompleteCloseReason as AutocompleteCloseReason$0 } from "@mui/material";
 import { AutocompleteValue as AutocompleteValue$0 } from "@mui/material";
 import { AutocompleteProps as MuiAutocompleteProps } from "@mui/material";
 import { TextFieldProps as RawTextFieldSearchProps } from "@mui/material";
@@ -34,7 +35,7 @@ import { ReactElement, ReactNode, SyntheticEvent, ComponentType } from "react";
 import { Theme, ThemeOptions, TypographyStyle, PaletteOptions } from "@mui/material/styles";
 import { SerializedStyles } from "@emotion/react";
 import { AlertProps } from "@mui/lab";
-import { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteValue } from "@mui/base";
+import { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteValue } from "@mui/base";
 import { AlertTitleProps } from "@mui/material/AlertTitle";
 import { AutocompleteValue as AutocompleteValue$1 } from "@mui/material/useAutocomplete";
 declare const AccordionDetails: (props: AccordionDetailsProps) => import("react/jsx-runtime").JSX.Element;
@@ -439,6 +440,8 @@ interface ExtraAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> extend
     onChange?: (event: React.SyntheticEvent, value: AutocompleteValue$0<T, Multiple, DisableClearable, FreeSolo>, reason: AutocompleteChangeReason$0, details?: AutocompleteChangeDetails$0<T>) => void;
     InputBaseProps?: Partial<InputSearchProps>;
     label?: string;
+    onClickAway?: (event?: MouseEvent | TouchEvent, reason?: AutocompleteCloseReason$0) => void;
+    onClick?: (event?: TouchEvent | MouseEvent) => void;
 }
 type CustomAutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = Omit<MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, "renderInput" | "nonce" | "rev" | "rel" | "autoFocus" | "content">;
 type AutocompleteBaseProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = CustomAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> & ExtraAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>;
@@ -472,7 +475,8 @@ interface ExtraAutocompleteMultiColumnProps<T, Multiple extends boolean | undefi
     PopperComponent?: React.JSXElementConstructor<PopperProps>;
     PopperPlacement?: "bottom-start" | "top-start" | "bottom-end" | "top-end";
     children?: JSX.Element | null;
-    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onClickAway?: (event?: MouseEvent | TouchEvent, reason?: AutocompleteCloseReason$0) => void;
+    onClick?: (event?: TouchEvent | MouseEvent) => void;
     ClickAwayListenerProps?: Partial<MUIClickAwayListenerProps>;
     options: AutocompleteMultiColumnOption<T, Multiple, DisableClearable, FreeSolo>[];
     value?: AutocompleteMultiColumnValue<T, Multiple, DisableClearable, FreeSolo>;
@@ -499,7 +503,8 @@ interface ExtraAutocompleteProps$0<T, Multiple extends boolean | undefined, Disa
     options: SDSAutocompleteOptions<T, Multiple, DisableClearable, FreeSolo>;
     PopperBaseProps?: Partial<PopperProps>;
     value?: SDSAutocompleteValue<T, Multiple, DisableClearable, FreeSolo>;
-    onClickAway?: (event: MouseEvent | TouchEvent) => void;
+    onClickAway?: (event?: MouseEvent | TouchEvent, reason?: AutocompleteCloseReason) => void;
+    onClick?: (event?: TouchEvent | MouseEvent) => void;
     onChange?: SDSAutocompleteOnChange<T, Multiple, DisableClearable, FreeSolo>;
     count?: number;
     icon?: ReactElement;

package/dist/index.esm.js

@@ -3754,25 +3754,37 @@ var StyledMenuItemText = styled("div")(templateObject_6$8 || (templateObject_6$8
 var templateObject_1$L, templateObject_2$t, templateObject_3$k, templateObject_4$f, templateObject_5$b, templateObject_6$8;
 
 var AutocompleteBase = function (props) {
-    var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q;
+    var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q, onClickAway = props.onClickAway, onClick = props.onClick, onOpen = props.onOpen, onClose = props.onClose;
     var theme = useTheme();
     var _r = useState(""), inputValue = _r[0], setInputValue = _r[1];
-    return (jsx(StyledAutocompleteBase, __assign({ clearOnBlur: clearOnBlur, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: StyledPaper$3, PopperComponent: useDefaultPopperComponent(), renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: defaultRenderInput, multiple: multiple }, props, { 
-        // (masoudmanson): For multiple options (multiple = true), setting blurOnSelect to false
-        // keeps the dropdown open after selecting an option. This feature enhances user experience
-        // by preventing the dropdown from closing, enabling users to select multiple options
-        // without having to reopen the menu repeatedly.
+    return (jsx(StyledAutocompleteBase, __assign({ clearOnBlur: clearOnBlur, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: StyledPaper$3, PopperComponent: useDefaultPopperComponent(), renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: defaultRenderInput, multiple: multiple, 
+        /**
+         * (masoudmanson): Overrides the onOpen and onClose handlers to ensure that
+         * the onClick and onClickAway handlers are triggered when a controlled dropdown
+         * is opened or closed, respectively.
+         */
+        onOpen: defaultOnOpen, onClose: defaultOnClose }, props, { 
+        /**
+         * (masoudmanson): For multiple options (multiple = true), setting blurOnSelect to false
+         * keeps the dropdown open after selecting an option. This feature enhances user experience
+         * by preventing the dropdown from closing, enabling users to select multiple options
+         * without having to reopen the menu repeatedly.
+         */
         blurOnSelect: multiple ? false : blurOnSelect, 
-        // (masoudmanson): Given the necessity of maintaining consistent onBlur functionality,
-        // and clearing the input value on blur, it's crucial to include the onBlur handler
-        // after spreading other props. Furthermore, within the defaultOnBlur function, the
-        // actual onBlur function is invoked for completeness.
+        /**
+         * (masoudmanson): Given the necessity of maintaining consistent onBlur functionality,
+         * and clearing the input value on blur, it's crucial to include the onBlur handler
+         * after spreading other props. Furthermore, within the defaultOnBlur function, the
+         * actual onBlur function is invoked for completeness.
+         */
         onBlur: defaultOnBlur, 
-        // (masoudmanson): To ensure component-level actions (changing the input field value)
-        // trigger upon input changes, it's crucial to position the onInputChange handler after
-        // spreading the other props. Furthermore, within the defaultOnInputChange function,
-        // the provided onInputChange from props is called at the end to emit the input changes
-        // to the user.
+        /**
+         * (masoudmanson): To ensure component-level actions (changing the input field value)
+         * trigger upon input changes, it's crucial to position the onInputChange handler after
+         * spreading the other props. Furthermore, within the defaultOnInputChange function,
+         * the provided onInputChange from props is called at the end to emit the input changes
+         * to the user.
+         */
         onInputChange: defaultOnInputChange })));
     /**
      * (masoudmanson): Using a custom Popper or Paper with the Autocomplete
@@ -3816,6 +3828,24 @@ var AutocompleteBase = function (props) {
             setInputValue("");
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     }
+    /**
+     * (masoudmanson): The default onOpen handler is the Callback fired when the popup
+     * requests to be opened. This function is responsible for invoking the onOpen and onClick
+     * handlers when a controlled dropdown is opening.
+     */
+    function defaultOnOpen(event) {
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+    /**
+     * (masoudmanson): The default onClose handler is the callback fired when the popup
+     * requests to be closed. This function is responsible for invoking the onClose and onClickAway
+     * handlers when a controlled dropdown is closing.
+     */
+    function defaultOnClose(event, reason) {
+        onClose === null || onClose === void 0 ? void 0 : onClose(event, reason);
+        onClickAway === null || onClickAway === void 0 ? void 0 : onClickAway(event, reason);
+    }
     function defaultOnInputChange(event, value, reason) {
         if (!multiple) {
             if (reason === "input") {
@@ -3969,16 +3999,26 @@ var templateObject_1$J, templateObject_2$r, templateObject_3$i, templateObject_4
 
 var AutocompleteMultiColumn = function (props) {
     var _a;
-    var InputBaseProps = props.InputBaseProps, _b = props.open, open = _b === void 0 ? false : _b, _c = props.PopperPlacement, PopperPlacement = _c === void 0 ? "bottom-start" : _c, PopperBaseProps = props.PopperBaseProps, _d = props.search, search = _d === void 0 ? false : _d, _e = props.label, label = _e === void 0 ? "Search" : _e, _f = props.onClickAway, onClickAway = _f === void 0 ? defaultOnClickAway : _f, ClickAwayListenerProps = props.ClickAwayListenerProps, options = props.options, onInputChange = props.onInputChange, onBlur = props.onBlur, multiple = props.multiple, parentInitialValue = props.value, onChange = props.onChange, _g = props.PopperComponent, PopperComponent = _g === void 0 ? StyledPopper$2 : _g, rest = __rest(props, ["InputBaseProps", "open", "PopperPlacement", "PopperBaseProps", "search", "label", "onClickAway", "ClickAwayListenerProps", "options", "onInputChange", "onBlur", "multiple", "value", "onChange", "PopperComponent"]);
+    var InputBaseProps = props.InputBaseProps, open = props.open, _b = props.PopperPlacement, PopperPlacement = _b === void 0 ? "bottom-start" : _b, PopperBaseProps = props.PopperBaseProps, _c = props.search, search = _c === void 0 ? false : _c, _d = props.label, label = _d === void 0 ? "Search" : _d, onClickAway = props.onClickAway, onClick = props.onClick, ClickAwayListenerProps = props.ClickAwayListenerProps, options = props.options, onInputChange = props.onInputChange, onBlur = props.onBlur, multiple = props.multiple, parentInitialValue = props.value, onChange = props.onChange, _e = props.PopperComponent, PopperComponent = _e === void 0 ? StyledPopper$2 : _e, rest = __rest(props, ["InputBaseProps", "open", "PopperPlacement", "PopperBaseProps", "search", "label", "onClickAway", "onClick", "ClickAwayListenerProps", "options", "onInputChange", "onBlur", "multiple", "value", "onChange", "PopperComponent"]);
     var theme = useTheme();
-    var _h = useState(""), inputValue = _h[0], setInputValue = _h[1];
-    var _j = useState(open), popperOpen = _j[0], setPopperOpen = _j[1];
+    var isOpenControlled = open !== undefined;
+    var _f = useState(""), inputValue = _f[0], setInputValue = _f[1];
+    var _g = useState(isOpenControlled ? open : false), popperOpen = _g[0], setPopperOpen = _g[1];
+    /**
+     * (masoudmanson): This useEffect is used to update the popperOpen state
+     * when the open prop is controlled.
+     */
+    useEffect(function () {
+        if (isOpenControlled) {
+            setPopperOpen(open);
+        }
+    }, [isOpenControlled, open]);
     var anchorRef = useRef(null);
-    var _k = React__default.useState(null), anchorEl = _k[0], setAnchorEl = _k[1];
+    var _h = React__default.useState(null), anchorEl = _h[0], setAnchorEl = _h[1];
     useEffect(function () {
         setAnchorEl(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current);
     }, [anchorRef]);
-    var _l = useState({}), autocompleteMultiColumnValue = _l[0], setAutocompleteMultiColumnValue = _l[1];
+    var _j = useState({}), autocompleteMultiColumnValue = _j[0], setAutocompleteMultiColumnValue = _j[1];
     useEffect(function () {
         if (parentInitialValue !== undefined) {
             setAutocompleteMultiColumnValue(parentInitialValue);
@@ -3992,7 +4032,7 @@ var AutocompleteMultiColumn = function (props) {
         });
         onChange === null || onChange === void 0 ? void 0 : onChange(event, __assign(__assign({}, autocompleteMultiColumnValue), (_a = {}, _a[column] = val, _a)), reason, details);
     };
-    return (jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs("div", { children: [jsx(StyledAutocompleteInput, __assign({ id: "location-search", label: label, placeholder: label, value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onBlur: handleInputBlur, ref: anchorRef, search: search, onKeyDown: handleInputKeyDown, InputProps: __assign(__assign({}, InputBaseProps === null || InputBaseProps === void 0 ? void 0 : InputBaseProps.ref), { endAdornment: (jsxs(StyledInputAdornment, { position: "end", children: [inputValue && (jsx(ButtonIcon, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "primary", sdsSize: "small", sdsIconProps: {
+    return (jsx(ClickAwayListener, __assign({ onClickAway: defaultOnClickAway }, ClickAwayListenerProps, { children: jsxs("div", { children: [jsx(StyledAutocompleteInput, __assign({ id: "location-search", label: label, placeholder: label, value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onBlur: handleInputBlur, ref: anchorRef, search: search, onKeyDown: handleInputKeyDown, InputProps: __assign(__assign({}, InputBaseProps === null || InputBaseProps === void 0 ? void 0 : InputBaseProps.ref), { endAdornment: (jsxs(StyledInputAdornment, { position: "end", children: [inputValue && (jsx(ButtonIcon, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "primary", sdsSize: "small", sdsIconProps: {
                                         sdsType: "iconButton",
                                     }, icon: "xMark", onClick: clearInput })), jsx(ButtonIcon, { "aria-label": "search-button", sdsType: "secondary", sdsSize: "small", sdsIconProps: {
                                         sdsType: "interactive",
@@ -4019,7 +4059,22 @@ var AutocompleteMultiColumn = function (props) {
          */
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange({ target: { value: "" } }, "", "clear");
     }
-    function handleInputClick(_) {
+    function handleInputClick(event) {
+        /**
+         * (masoudmanson): Because the Autocomplete component overrides the
+         * InputSearch's onClick, we must also include the parent onClick here.
+         */
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        /**
+         * (masoudmanson): If the dropdown is controlled, we call the onClick prop to allow the parent
+         * to handle the opening and closing of the dropdown.
+         */
+        if (isOpenControlled) {
+            return;
+        }
+        /**
+         * (masoudmanson): If the dropdown is not controlled, we toggle the dropdown open and closed.
+         */
         if (popperOpen) {
             setPopperOpen(false);
         }
@@ -4043,13 +4098,55 @@ var AutocompleteMultiColumn = function (props) {
             setInputValue("");
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }
-    function defaultOnClickAway() {
-        setPopperOpen(false);
+    /**
+     * (masoudmanson): This is the default onClickAway handler for the Autocomplete component.
+     * It is used to close the dropdown when the user clicks away from the dropdown. It also
+     * calls the parent onClickAway prop if it is provided.
+     */
+    function defaultOnClickAway(event) {
+        /**
+         * (masoudmanson): We only want to close the dropdown if it is open.
+         * This may sound unnecessary, but it is to prevent the dropdown from
+         * calling the parent onClickAway prop when the dropdown is closed.
+         */
+        if (popperOpen) {
+            onClickAway === null || onClickAway === void 0 ? void 0 : onClickAway(event, "blur");
+            /**
+             * (masoudmanson): If the dropdown is controlled, we call the onClickAway prop to allow the parent
+             * to handle the closing of the dropdown.
+             */
+            if (isOpenControlled)
+                return;
+            // (masoudmanson): If the dropdown is not controlled, we close the dropdown.
+            setPopperOpen(false);
+        }
     }
     function handleInputKeyDown(event) {
-        // (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
-        if (event.key === "Backspace") {
-            event.stopPropagation();
+        var _a;
+        /**
+         * (masoudmanson): Because the Autocomplete component overrides the
+         * InputSearch's onKeyDown, we must also include the user defined onKeyDown here.
+         */
+        if (props === null || props === void 0 ? void 0 : props.onKeyDown) {
+            (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        }
+        else {
+            // (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
+            if (event.key === "Backspace") {
+                event.stopPropagation();
+            }
+            /**
+             * (masoudmanson): This is to handle the Escape key to close the dropdown.
+             * If the dropdown is controlled, we call the onClick prop to allow the parent
+             * to handle the closing of the dropdown.
+             */
+            if (event.key === "Escape") {
+                if (isOpenControlled) {
+                    onClick === null || onClick === void 0 ? void 0 : onClick();
+                    return;
+                }
+                setPopperOpen(false);
+            }
         }
     }
 };
@@ -4061,7 +4158,7 @@ var Autocomplete = function (props) {
         if (options.length > 1) {
             return (jsx(AutocompleteMultiColumn, __assign({ options: options, value: value, onChange: onChange }, rest, { 
                 // (masoudmanson): groupBy option is disabled on MultiColumn dropdowns
-                groupBy: undefined, open: true })));
+                groupBy: undefined })));
         }
         else {
             return (jsx(AutocompleteBase, __assign({ options: options[0].options, value: value, onChange: onChange }, rest)));
@@ -4784,7 +4881,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, { children: [title && (jsx(StyledHeaderTitle, { search: search, children: title })), anchorEl && (jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
+        sx: dropdownMenuPopperSx, children: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [title && (jsx(StyledHeaderTitle, { search: search, children: title })), 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] }) })) }) })));
 };
 
 var labelFontBodyS = fontBody("s");
@@ -5325,7 +5422,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 = _f === void 0 ? !buttons : _f, onClose = props.onClose, onChange = props.onChange, _g = props.DropdownMenuProps, DropdownMenuProps = _g === void 0 ? {} : _g, _h = props.InputDropdownProps, InputDropdownProps = _h === void 0 ? { sdsStyle: "minimal" } : _h, _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, rest = __rest(props, ["options", "label", "multiple", "search", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value"]);
+    closeOnBlur = _f === void 0 ? !buttons : _f, onClose = props.onClose, onChange = props.onChange, _g = props.DropdownMenuProps, DropdownMenuProps = _g === void 0 ? {} : _g, _h = props.InputDropdownProps, InputDropdownProps = _h === void 0 ? { sdsStyle: "minimal" } : _h, _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", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "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.");
@@ -5375,6 +5472,7 @@ var Dropdown = function (props) {
         }
     }
     function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
         if (open) {
             if (!shouldShowButtons) {
                 if (multiple) {