@czi-sds/components 22.7.0 → 22.9.0

package/dist/index.cjs.d.ts

@@ -1079,6 +1079,7 @@ interface StyleProps$1 extends CommonThemeProps {
     count?: number;
     icon?: ReactElement;
     search?: boolean;
+    isSearchAutoFocus?: boolean;
     title?: string;
     isMultiColumn?: boolean;
 }
@@ -1322,6 +1323,7 @@ interface ExtraDropdownProps<T, Multiple extends boolean | undefined, DisableCle
     label: ReactNode;
     options: AutocompleteSingleColumnOption<T>[] | AutocompleteMultiColumnOption<T, Multiple, DisableClearable, FreeSolo>[];
     search?: boolean;
+    isSearchAutoFocus?: boolean;
     DropdownMenuProps?: Partial<SdsDropdownMenuProps<T, Multiple, DisableClearable, FreeSolo>>;
     InputDropdownProps?: Partial<InputDropdownPropsType$0>;
     value?: AutocompleteValue$1<T, Multiple, DisableClearable, FreeSolo>;
@@ -1694,6 +1696,7 @@ interface BasicPanelProps extends Omit<DrawerProps, "variant"> {
     sdsType: "basic"; // Discriminator
     position?: "left" | "right";
     width?: number | string;
+    isBackdropClickEnabled?: boolean;
 }
 interface OverlayPanelProps extends Omit<DrawerProps, "variant"> {
     sdsType: "overlay"; // Discriminator
@@ -1702,6 +1705,7 @@ interface OverlayPanelProps extends Omit<DrawerProps, "variant"> {
     HeaderComponent?: React.ReactNode;
     closeButtonOnClick?: PanelHeaderCloseProps["onClick"];
     CloseButtonComponent?: PanelHeaderCloseProps["CloseButtonComponent"];
+    isBackdropClickEnabled?: boolean;
 }
 // Discriminated Union
 type PanelProps = BasicPanelProps | OverlayPanelProps;

package/dist/index.cjs.js

@@ -6405,7 +6405,7 @@ var StyledPaper$1 = styled__default.default(material.Paper, {
     var borders = getBorders(props);
     var shadows = getShadows(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n      background-image: none;\n      margin: 0;\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n      .MuiAutocomplete-root,\n      .MuiFormControl-root.MuiTextField-root {\n        margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      }\n\n      // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n      // as it has been added to the parent container\n      .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n        margin-right: 0;\n        margin-bottom: 0;  \n      }\n    ");
+    return "\n      box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n      background-image: none;\n      margin: 0;\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n      .MuiAutocomplete-root,\n      .MuiFormControl-root.MuiTextField-root {\n        margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      }\n\n      // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n      // as it has been added to the parent container\n      .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n        margin-right: 0;\n        margin-bottom: 0;\n      }\n    ");
 });
 var StyledDropdownMenuHeader = styled__default.default("div")(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var search = props.search;
@@ -6423,7 +6423,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.search, search = _h === void 0 ? false : _h, title = props.title, headerComponentSlot = props.headerComponentSlot, _j = props.label, label = _j === void 0 ? "Search" : _j, children = props.children, options = props.options, _k = props.onClickAway, onClickAway = _k === void 0 ? noop : _k, ClickAwayListenerProps = props.ClickAwayListenerProps, _l = props.width, width = _l === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _l, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "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, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "isSearchAutoFocus", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
     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
@@ -6433,8 +6433,8 @@ var DropdownMenu = function (props) {
         return __assign({ minWidth: MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, width: isMultiColumn ? "auto" : width }, PopperBaseProps === null || PopperBaseProps === void 0 ? void 0 : PopperBaseProps.sx);
     }, [PopperBaseProps === null || PopperBaseProps === void 0 ? void 0 : PopperBaseProps.sx, isMultiColumn, width]);
     var DefaultInputBaseProps = React.useMemo(function () {
-        return __assign(__assign({}, InputBaseProps), { autoFocus: true, onClick: noop });
-    }, [InputBaseProps]);
+        return __assign(__assign({}, InputBaseProps), { autoFocus: isSearchAutoFocus, onClick: noop });
+    }, [InputBaseProps, isSearchAutoFocus]);
     return (jsxRuntime.jsx(PopperComponent, __assign({ id: id, modifiers: [
             {
                 name: "offset",
@@ -7429,29 +7429,29 @@ var templateObject_1$A, templateObject_2$n;
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 var Dropdown = function (props) {
-    var options = props.options, _a = props.label, label = _a === void 0 ? "" : _a, _b = props.multiple, multiple = _b === void 0 ? false : _b, _c = props.search, search = _c === void 0 ? false : _c, _d = props.buttonPosition, buttonPosition = _d === void 0 ? "right" : _d, _e = props.buttons, buttons = _e === void 0 ? false : _e, 
+    var options = props.options, _a = props.label, label = _a === void 0 ? "" : _a, _b = props.multiple, multiple = _b === void 0 ? false : _b, _c = props.search, search = _c === void 0 ? false : _c, _d = props.isSearchAutoFocus, isSearchAutoFocus = _d === void 0 ? true : _d, _e = props.buttonPosition, buttonPosition = _e === void 0 ? "right" : _e, _f = props.buttons, buttons = _f === void 0 ? false : _f, 
     // By default, most dropdowns will close when the user clicks outside the dropdown.
     // The exception is the multiple select variant with Apply/Cancel buttons,
     // 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.
-    _f = props.closeOnBlur, 
+    _g = props.closeOnBlur, 
     // By default, most dropdowns will close when the user clicks outside the dropdown.
     // The exception is the multiple select variant with Apply/Cancel buttons,
     // 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, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
+    closeOnBlur = _g === void 0 ? !buttons : _g, onClose = props.onClose, onChange = props.onChange, _h = props.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, _j = props.InputDropdownProps, InputDropdownProps = _j === void 0 ? { sdsStyle: "minimal" } : _j, _k = props.InputDropdownComponent, InputDropdownComponent = _k === void 0 ? InputDropdown : _k, _l = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _l === void 0 ? false : _l, _m = props.disabled, disabled = _m === void 0 ? false : _m, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "isSearchAutoFocus", "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.");
     }
     var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
     var isControlled = propValue !== undefined;
-    var _m = React.useState(null), anchorEl = _m[0], setAnchorEl = _m[1];
-    var _o = React.useState(false), open = _o[0], setOpen = _o[1];
-    var _p = React.useState(getInitialValue()), value = _p[0], setValue = _p[1];
-    var _q = React.useState(getInitialValue()), pendingValue = _q[0], setPendingValue = _q[1];
+    var _o = React.useState(null), anchorEl = _o[0], setAnchorEl = _o[1];
+    var _p = React.useState(false), open = _p[0], setOpen = _p[1];
+    var _q = React.useState(getInitialValue()), value = _q[0], setValue = _q[1];
+    var _r = React.useState(getInitialValue()), pendingValue = _r[0], setPendingValue = _r[1];
     var shouldShowButtons = buttons && !isTriggerChangeOnOptionClick && multiple;
     React.useEffect(function () {
         if (isControlled) {
@@ -7461,7 +7461,7 @@ var Dropdown = function (props) {
             }
         }
     }, [isControlled, propValue, multiple]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick }, 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: isMultiColumn ? value : multiple ? pendingValue : value }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsxRuntime.jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsxRuntime.jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick }, 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: isMultiColumn ? value : multiple ? pendingValue : value, isSearchAutoFocus: isSearchAutoFocus }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsxRuntime.jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsxRuntime.jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
     function getInitialValue() {
         return multiple
             ? []
@@ -15484,6 +15484,7 @@ var doNotForwardProps$2 = [
     "disableScrollLock",
     "closeButtonOnClick",
     "CloseButtonComponent",
+    "isBackdropClickEnabled",
 ];
 var basicPanelStyles = function (props) {
     var _a;
@@ -15536,11 +15537,16 @@ var PanelHeaderClose = function (props) {
 function isOverlayPanelProps(props) {
     return props.sdsType === "overlay";
 }
+var SLOT_PROPS = {
+    backdrop: {
+        invisible: true,
+    },
+};
 /**
  * @see https://mui.com/material-ui/react-drawer/
  */
 var Panel = React__namespace.default.forwardRef(function (props, ref) {
-    var children = props.children, _a = props.sdsType, sdsType = _a === void 0 ? "basic" : _a, _b = props.position, position = _b === void 0 ? "left" : _b, width = props.width, ModalProps = props.ModalProps;
+    var children = props.children, _a = props.sdsType, sdsType = _a === void 0 ? "basic" : _a, _b = props.position, position = _b === void 0 ? "left" : _b, width = props.width, ModalProps = props.ModalProps, _c = props.isBackdropClickEnabled, isBackdropClickEnabled = _c === void 0 ? false : _c;
     var drawerWidth = width !== null && width !== void 0 ? width : (sdsType === "basic"
         ? PANEL_BASIC_MIN_WIDTH_PX
         : PANEL_OVERLAY_MIN_WIDTH_PX);
@@ -15573,7 +15579,7 @@ var Panel = React__namespace.default.forwardRef(function (props, ref) {
             // (masoudmanson): Set disableScrollLock: true to prevent the Drawer from locking
             // the page scroll when it is open. This is necessary for the SDS Panel, as it should
             // not lock the page scroll when it is open.
-            disableScrollLock: true }), hideBackdrop: true, children: [isOverlayPanelProps(props) && (jsxRuntime.jsxs(StyledHeaderComponent, { children: [(props === null || props === void 0 ? void 0 : props.HeaderComponent) && (jsxRuntime.jsx(PanelHeader, { children: props === null || props === void 0 ? void 0 : props.HeaderComponent })), jsxRuntime.jsx(PanelHeaderClose, { onClick: props === null || props === void 0 ? void 0 : props.closeButtonOnClick, CloseButtonComponent: props === null || props === void 0 ? void 0 : props.CloseButtonComponent })] })), children] })));
+            disableScrollLock: true }), slotProps: SLOT_PROPS, hideBackdrop: !isBackdropClickEnabled, children: [isOverlayPanelProps(props) && (jsxRuntime.jsxs(StyledHeaderComponent, { children: [(props === null || props === void 0 ? void 0 : props.HeaderComponent) && (jsxRuntime.jsx(PanelHeader, { children: props === null || props === void 0 ? void 0 : props.HeaderComponent })), jsxRuntime.jsx(PanelHeaderClose, { onClick: props === null || props === void 0 ? void 0 : props.closeButtonOnClick, CloseButtonComponent: props === null || props === void 0 ? void 0 : props.CloseButtonComponent })] })), children] })));
 });
 
 var doNotForwardProps$1 = ["buttonDefinition"];

package/dist/index.esm.d.ts

@@ -1079,6 +1079,7 @@ interface StyleProps$1 extends CommonThemeProps {
     count?: number;
     icon?: ReactElement;
     search?: boolean;
+    isSearchAutoFocus?: boolean;
     title?: string;
     isMultiColumn?: boolean;
 }
@@ -1322,6 +1323,7 @@ interface ExtraDropdownProps<T, Multiple extends boolean | undefined, DisableCle
     label: ReactNode;
     options: AutocompleteSingleColumnOption<T>[] | AutocompleteMultiColumnOption<T, Multiple, DisableClearable, FreeSolo>[];
     search?: boolean;
+    isSearchAutoFocus?: boolean;
     DropdownMenuProps?: Partial<SdsDropdownMenuProps<T, Multiple, DisableClearable, FreeSolo>>;
     InputDropdownProps?: Partial<InputDropdownPropsType$0>;
     value?: AutocompleteValue$1<T, Multiple, DisableClearable, FreeSolo>;
@@ -1694,6 +1696,7 @@ interface BasicPanelProps extends Omit<DrawerProps, "variant"> {
     sdsType: "basic"; // Discriminator
     position?: "left" | "right";
     width?: number | string;
+    isBackdropClickEnabled?: boolean;
 }
 interface OverlayPanelProps extends Omit<DrawerProps, "variant"> {
     sdsType: "overlay"; // Discriminator
@@ -1702,6 +1705,7 @@ interface OverlayPanelProps extends Omit<DrawerProps, "variant"> {
     HeaderComponent?: React.ReactNode;
     closeButtonOnClick?: PanelHeaderCloseProps["onClick"];
     CloseButtonComponent?: PanelHeaderCloseProps["CloseButtonComponent"];
+    isBackdropClickEnabled?: boolean;
 }
 // Discriminated Union
 type PanelProps = BasicPanelProps | OverlayPanelProps;

package/dist/index.esm.js

@@ -6382,7 +6382,7 @@ var StyledPaper$1 = styled$2(Paper, {
     var borders = getBorders(props);
     var shadows = getShadows(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n      background-image: none;\n      margin: 0;\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n      .MuiAutocomplete-root,\n      .MuiFormControl-root.MuiTextField-root {\n        margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      }\n\n      // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n      // as it has been added to the parent container\n      .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n        margin-right: 0;\n        margin-bottom: 0;  \n      }\n    ");
+    return "\n      box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n      border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n      background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n      background-image: none;\n      margin: 0;\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n      .MuiAutocomplete-root,\n      .MuiFormControl-root.MuiTextField-root {\n        margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      }\n\n      // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n      // as it has been added to the parent container\n      .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n        margin-right: 0;\n        margin-bottom: 0;\n      }\n    ");
 });
 var StyledDropdownMenuHeader = styled$2("div")(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var search = props.search;
@@ -6400,7 +6400,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.search, search = _h === void 0 ? false : _h, title = props.title, headerComponentSlot = props.headerComponentSlot, _j = props.label, label = _j === void 0 ? "Search" : _j, children = props.children, options = props.options, _k = props.onClickAway, onClickAway = _k === void 0 ? noop : _k, ClickAwayListenerProps = props.ClickAwayListenerProps, _l = props.width, width = _l === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _l, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "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, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "isSearchAutoFocus", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
     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
@@ -6410,8 +6410,8 @@ var DropdownMenu = function (props) {
         return __assign({ minWidth: MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, width: isMultiColumn ? "auto" : width }, PopperBaseProps === null || PopperBaseProps === void 0 ? void 0 : PopperBaseProps.sx);
     }, [PopperBaseProps === null || PopperBaseProps === void 0 ? void 0 : PopperBaseProps.sx, isMultiColumn, width]);
     var DefaultInputBaseProps = useMemo(function () {
-        return __assign(__assign({}, InputBaseProps), { autoFocus: true, onClick: noop });
-    }, [InputBaseProps]);
+        return __assign(__assign({}, InputBaseProps), { autoFocus: isSearchAutoFocus, onClick: noop });
+    }, [InputBaseProps, isSearchAutoFocus]);
     return (jsx(PopperComponent, __assign({ id: id, modifiers: [
             {
                 name: "offset",
@@ -7406,29 +7406,29 @@ var templateObject_1$A, templateObject_2$n;
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 var Dropdown = function (props) {
-    var options = props.options, _a = props.label, label = _a === void 0 ? "" : _a, _b = props.multiple, multiple = _b === void 0 ? false : _b, _c = props.search, search = _c === void 0 ? false : _c, _d = props.buttonPosition, buttonPosition = _d === void 0 ? "right" : _d, _e = props.buttons, buttons = _e === void 0 ? false : _e, 
+    var options = props.options, _a = props.label, label = _a === void 0 ? "" : _a, _b = props.multiple, multiple = _b === void 0 ? false : _b, _c = props.search, search = _c === void 0 ? false : _c, _d = props.isSearchAutoFocus, isSearchAutoFocus = _d === void 0 ? true : _d, _e = props.buttonPosition, buttonPosition = _e === void 0 ? "right" : _e, _f = props.buttons, buttons = _f === void 0 ? false : _f, 
     // By default, most dropdowns will close when the user clicks outside the dropdown.
     // The exception is the multiple select variant with Apply/Cancel buttons,
     // 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.
-    _f = props.closeOnBlur, 
+    _g = props.closeOnBlur, 
     // By default, most dropdowns will close when the user clicks outside the dropdown.
     // The exception is the multiple select variant with Apply/Cancel buttons,
     // 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, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
+    closeOnBlur = _g === void 0 ? !buttons : _g, onClose = props.onClose, onChange = props.onChange, _h = props.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, _j = props.InputDropdownProps, InputDropdownProps = _j === void 0 ? { sdsStyle: "minimal" } : _j, _k = props.InputDropdownComponent, InputDropdownComponent = _k === void 0 ? InputDropdown : _k, _l = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _l === void 0 ? false : _l, _m = props.disabled, disabled = _m === void 0 ? false : _m, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "isSearchAutoFocus", "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.");
     }
     var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
     var isControlled = propValue !== undefined;
-    var _m = useState(null), anchorEl = _m[0], setAnchorEl = _m[1];
-    var _o = useState(false), open = _o[0], setOpen = _o[1];
-    var _p = useState(getInitialValue()), value = _p[0], setValue = _p[1];
-    var _q = useState(getInitialValue()), pendingValue = _q[0], setPendingValue = _q[1];
+    var _o = useState(null), anchorEl = _o[0], setAnchorEl = _o[1];
+    var _p = useState(false), open = _p[0], setOpen = _p[1];
+    var _q = useState(getInitialValue()), value = _q[0], setValue = _q[1];
+    var _r = useState(getInitialValue()), pendingValue = _r[0], setPendingValue = _r[1];
     var shouldShowButtons = buttons && !isTriggerChangeOnOptionClick && multiple;
     useEffect(function () {
         if (isControlled) {
@@ -7438,7 +7438,7 @@ var Dropdown = function (props) {
             }
         }
     }, [isControlled, propValue, multiple]);
-    return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick }, 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: isMultiColumn ? value : multiple ? pendingValue : value }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxs("div", { children: [jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxs("div", { children: [jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
+    return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick }, 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: isMultiColumn ? value : multiple ? pendingValue : value, isSearchAutoFocus: isSearchAutoFocus }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxs("div", { children: [jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxs("div", { children: [jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
     function getInitialValue() {
         return multiple
             ? []
@@ -15461,6 +15461,7 @@ var doNotForwardProps$2 = [
     "disableScrollLock",
     "closeButtonOnClick",
     "CloseButtonComponent",
+    "isBackdropClickEnabled",
 ];
 var basicPanelStyles = function (props) {
     var _a;
@@ -15513,11 +15514,16 @@ var PanelHeaderClose = function (props) {
 function isOverlayPanelProps(props) {
     return props.sdsType === "overlay";
 }
+var SLOT_PROPS = {
+    backdrop: {
+        invisible: true,
+    },
+};
 /**
  * @see https://mui.com/material-ui/react-drawer/
  */
 var Panel = React__default.forwardRef(function (props, ref) {
-    var children = props.children, _a = props.sdsType, sdsType = _a === void 0 ? "basic" : _a, _b = props.position, position = _b === void 0 ? "left" : _b, width = props.width, ModalProps = props.ModalProps;
+    var children = props.children, _a = props.sdsType, sdsType = _a === void 0 ? "basic" : _a, _b = props.position, position = _b === void 0 ? "left" : _b, width = props.width, ModalProps = props.ModalProps, _c = props.isBackdropClickEnabled, isBackdropClickEnabled = _c === void 0 ? false : _c;
     var drawerWidth = width !== null && width !== void 0 ? width : (sdsType === "basic"
         ? PANEL_BASIC_MIN_WIDTH_PX
         : PANEL_OVERLAY_MIN_WIDTH_PX);
@@ -15550,7 +15556,7 @@ var Panel = React__default.forwardRef(function (props, ref) {
             // (masoudmanson): Set disableScrollLock: true to prevent the Drawer from locking
             // the page scroll when it is open. This is necessary for the SDS Panel, as it should
             // not lock the page scroll when it is open.
-            disableScrollLock: true }), hideBackdrop: true, children: [isOverlayPanelProps(props) && (jsxs(StyledHeaderComponent, { children: [(props === null || props === void 0 ? void 0 : props.HeaderComponent) && (jsx(PanelHeader, { children: props === null || props === void 0 ? void 0 : props.HeaderComponent })), jsx(PanelHeaderClose, { onClick: props === null || props === void 0 ? void 0 : props.closeButtonOnClick, CloseButtonComponent: props === null || props === void 0 ? void 0 : props.CloseButtonComponent })] })), children] })));
+            disableScrollLock: true }), slotProps: SLOT_PROPS, hideBackdrop: !isBackdropClickEnabled, children: [isOverlayPanelProps(props) && (jsxs(StyledHeaderComponent, { children: [(props === null || props === void 0 ? void 0 : props.HeaderComponent) && (jsx(PanelHeader, { children: props === null || props === void 0 ? void 0 : props.HeaderComponent })), jsx(PanelHeaderClose, { onClick: props === null || props === void 0 ? void 0 : props.closeButtonOnClick, CloseButtonComponent: props === null || props === void 0 ? void 0 : props.CloseButtonComponent })] })), children] })));
 });
 
 var doNotForwardProps$1 = ["buttonDefinition"];