@czi-sds/components 20.1.1 → 20.2.0

package/dist/index.cjs.d.ts

@@ -280,6 +280,9 @@ interface Typography {
     };
 }
 interface FontWeights {
+    bold: number;
+    light: number;
+    medium: number;
     regular: number;
     semibold: number;
 }
@@ -481,11 +484,15 @@ interface Borders {
     positive: Border;
 }
 declare const defaultTheme: import("@mui/material/styles").Theme;
+declare const SDSAppTheme: AppTheme;
 /**
- * (masoudmanson): This is to keep the old defaultAppTheme export for backward compatibility.
+ * (masoudmanson): This is to make sure that the old defaultAppTheme
+ * export is still available for backward compatibility.
+ *
+ * @deprecated
+ * Please use `SDSAppTheme` instead. This export will be removed in the future.
  */
-declare const defaultAppTheme: import("@mui/material/styles").Theme;
-declare const SDSAppTheme: AppTheme;
+declare const defaultAppTheme: AppTheme;
 /**
  * This function creates the theme options for the MUI theme provider
  */
@@ -1172,9 +1179,10 @@ interface ComplexFilterProps<T extends DefaultAutocompleteOption, Multiple exten
     className?: string;
     PopperComponent?: typeof StyledPopper$1;
     InputDropdownComponent?: typeof InputDropdown;
+    isTriggerChangeOnOptionClick?: boolean;
 }
 // eslint-disable-next-line sonarjs/cognitive-complexity
-declare const ComplexFilter: <T extends DefaultAutocompleteOption, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>({ options, label, multiple, search, onChange, DropdownMenuProps, InputDropdownProps, value: propValue, PopperComponent, InputDropdownComponent, ...rest }: ComplexFilterProps<T, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
+declare const ComplexFilter: <T extends DefaultAutocompleteOption, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>({ options, label, multiple, search, onChange, DropdownMenuProps, InputDropdownProps, value: propValue, PopperComponent, InputDropdownComponent, isTriggerChangeOnOptionClick, ...rest }: ComplexFilterProps<T, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
 type DialogPaperProps = PaperProps;
 /**
  * @see https://mui.com/material-ui/react-paper/
@@ -1573,5 +1581,5 @@ type TooltipTableContentProps = TooltipTableExtraProps;
  * @see https://mui.com/material-ui/react-table/
  */
 declare const TooltipTableContent: (props: TooltipTableContentProps) => JSX.Element;
-export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, BannerProps, Banner, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, CalloutIntentType, CalloutProps, ExposedCalloutProps, Callout, CalloutTitle, CellBasicRawProps, CellBasicProps, CellBasic, CellComponentProps, CellComponent, CellHeaderDirection, CellHeaderProps, CellHeader, Chip, InputDropdown as ComplexFilterInputDropdown, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPopper$1 as ComplexFilterPopper, StyledPopper$1 as DropdownPopper, ComplexFilterProps, ComplexFilter, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle$0 as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, StyledPaper$1 as DropdownPaper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, LinkProps$0 as LinkProps, Link, ListProps, List, ListItemLabel, ListItemProps, ListItem, ListSubheaderProps, ListSubheader, LoadingIndicatorProps$0 as LoadingIndicatorProps, LoadingIndicator, MenuProps, Menu, IconNameToSmallSizes, MenuItemExtraProps, MenuItemProps, MenuItem, DefaultMenuSelectOption, MenuSelectProps, MenuSelect, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, SingleButtonDefinition, SegmentedControlProps, SegmentedControl, SdsTableProps, TableProps, Table, TableHeaderProps, TableHeader, TableRowProps, TableRow, Tabs, TabProps$0 as TabProps, Tab, SdsTagProps, TagProps, Tag, SdsTagFilterProps, TagFilterProps, TagFilter, Tooltip, TooltipCondensedProps, TooltipCondensed, TooltipTableContent, TooltipTableContent as TooltipTable, SDSComponentPalette, SDSTextPalette, SDSTheme, SDSThemeOptions, AppTheme, Shadows, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, AccentColor, BaseColor, BetaColor, InfoColor, NegativeColor, NeutralColor, NoticeColor, PositiveColor, SemanticComponentColors, SemanticTextColors, IconSize, IconSizes, Border, Borders, defaultTheme, defaultAppTheme, SDSAppTheme, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXs, fontTabularS, fontTabularSemiboldXs, fontTabularSemiboldS, CommonThemeProps, getSpaces, getSpacings, getTypography, getPalette, getColors, getSemanticComponentColors, getSemanticTextColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders };
+export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, BannerProps, Banner, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, CalloutIntentType, CalloutProps, ExposedCalloutProps, Callout, CalloutTitle, CellBasicRawProps, CellBasicProps, CellBasic, CellComponentProps, CellComponent, CellHeaderDirection, CellHeaderProps, CellHeader, Chip, InputDropdown as ComplexFilterInputDropdown, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPopper$1 as ComplexFilterPopper, StyledPopper$1 as DropdownPopper, ComplexFilterProps, ComplexFilter, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle$0 as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, StyledPaper$1 as DropdownPaper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, LinkProps$0 as LinkProps, Link, ListProps, List, ListItemLabel, ListItemProps, ListItem, ListSubheaderProps, ListSubheader, LoadingIndicatorProps$0 as LoadingIndicatorProps, LoadingIndicator, MenuProps, Menu, IconNameToSmallSizes, MenuItemExtraProps, MenuItemProps, MenuItem, DefaultMenuSelectOption, MenuSelectProps, MenuSelect, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, SingleButtonDefinition, SegmentedControlProps, SegmentedControl, SdsTableProps, TableProps, Table, TableHeaderProps, TableHeader, TableRowProps, TableRow, Tabs, TabProps$0 as TabProps, Tab, SdsTagProps, TagProps, Tag, SdsTagFilterProps, TagFilterProps, TagFilter, Tooltip, TooltipCondensedProps, TooltipCondensed, TooltipTableContent, TooltipTableContent as TooltipTable, SDSComponentPalette, SDSTextPalette, SDSTheme, SDSThemeOptions, AppTheme, Shadows, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, AccentColor, BaseColor, BetaColor, InfoColor, NegativeColor, NeutralColor, NoticeColor, PositiveColor, SemanticComponentColors, SemanticTextColors, IconSize, IconSizes, Border, Borders, defaultTheme, SDSAppTheme, defaultAppTheme, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXs, fontTabularS, fontTabularSemiboldXs, fontTabularSemiboldS, CommonThemeProps, getSpaces, getSpacings, getTypography, getPalette, getColors, getSemanticComponentColors, getSemanticTextColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders };
 export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };

package/dist/index.cjs.js

@@ -160,6 +160,9 @@ var SDSAppTheme = {
         s: 2,
     },
     fontWeights: {
+        bold: 700,
+        light: 300,
+        medium: 800,
         regular: 400,
         semibold: 600,
     },
@@ -461,6 +464,14 @@ var SDSAppTheme = {
         },
     },
 };
+/**
+ * (masoudmanson): This is to make sure that the old defaultAppTheme
+ * export is still available for backward compatibility.
+ *
+ * @deprecated
+ * Please use `SDSAppTheme` instead. This export will be removed in the future.
+ */
+var defaultAppTheme = SDSAppTheme;
 // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
 // applications to override those colors using their own custom theme.
 // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
@@ -819,10 +830,6 @@ function makeThemeOptions(appTheme) {
 
 var defaultThemeOptions = makeThemeOptions(SDSAppTheme);
 var defaultTheme = styles.createTheme(defaultThemeOptions);
-/**
- * (masoudmanson): This is to keep the old defaultAppTheme export for backward compatibility.
- */
-var defaultAppTheme = defaultTheme;
 
 function focusVisibleA11yStyle() {
     return "\n      &.Mui-focusVisible, &:focus-visible {\n        outline: 5px auto Highlight;\n        outline: 5px auto -webkit-focus-ring-color;\n      }\n  ";
@@ -4561,7 +4568,13 @@ var AutocompleteMultiColumn = function (props) {
                         },
                     ], open: popperOpen, anchorEl: anchorEl, placement: PopperPlacement, disablePortal: true }, PopperBaseProps, { children: jsxRuntime.jsx(StyledAutocompleteGroupWrapper, { className: "SdsAutocompleteMultiColumn-wrapper", children: options.map(function (autocompleteOptions) { return (jsxRuntime.jsx(AutocompleteGroup, __assign({ autocompleteProps: autocompleteOptions, onValueChange: defaultOnValueChange, value: autocompleteMultiColumnValue
                                 ? autocompleteMultiColumnValue[autocompleteOptions.name]
-                                : undefined, multiple: multiple, label: label, InputBaseProps: InputBaseProps, popperOpen: popperOpen, inputValue: inputValue, PaperComponent: StyledPaper$2 }, rest), autocompleteOptions.name)); }) }) })))] }) })));
+                                : undefined, multiple: multiple, label: label, 
+                            /**
+                             * (masoudmanson): In a multi-column autocomplete, the search input for
+                             * inner autocompletes should remain hidden and unfocused when the parent
+                             * input is focused. This prevents blurring of the main search input.
+                             */
+                            InputBaseProps: __assign(__assign({}, InputBaseProps), { autoFocus: false }), popperOpen: popperOpen, inputValue: inputValue, PaperComponent: StyledPaper$2 }, rest), autocompleteOptions.name)); }) }) })))] }) })));
     function clearInput() {
         setInputValue("");
         /**
@@ -5331,7 +5344,7 @@ var DropdownMenu = function (props) {
                 : width });
     }, [PopperBaseProps === null || PopperBaseProps === void 0 ? void 0 : PopperBaseProps.sx, isMultiColumn, width]);
     var DefaultInputBaseProps = React.useMemo(function () {
-        return __assign(__assign({}, InputBaseProps), { onClick: noop });
+        return __assign(__assign({}, InputBaseProps), { autoFocus: true, onClick: noop });
     }, [InputBaseProps]);
     return (jsxRuntime.jsx(PopperComponent, __assign({ id: id, modifiers: [
             {
@@ -5551,12 +5564,12 @@ function renderDetailsText(_a) {
 var tagSizeS = function (props) {
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
-    return react.css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
+    return react.css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
 };
 var tagSizeL = function (props) {
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
-    return react.css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
+    return react.css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
 };
 var rounded = function (props) {
     var corners = getCorners(props);
@@ -5698,11 +5711,11 @@ var Chips = function (_a) {
         return null;
     if (!multiple) {
         var name_1 = value.name;
-        return jsxRuntime.jsx(TagFilter, { label: name_1, onDelete: onDelete });
+        return (jsxRuntime.jsx(TagFilter, { label: name_1, onDelete: onDelete, onClick: function () { return onDelete(name_1); } }));
     }
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: value.map(function (item) {
             var name = item.name;
-            return (jsxRuntime.jsx(TagFilter, { label: name, onDelete: function () { return onDelete(item); } }, name));
+            return (jsxRuntime.jsx(TagFilter, { label: name, onDelete: function () { return onDelete(item); }, onClick: function () { return onDelete(item); } }, name));
         }) }));
 };
 
@@ -5715,11 +5728,16 @@ var templateObject_1$v, templateObject_2$g;
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 var ComplexFilter = function (_a) {
-    var options = _a.options, _b = _a.label, label = _b === void 0 ? "" : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? false : _d, onChange = _a.onChange, _e = _a.DropdownMenuProps, DropdownMenuProps = _e === void 0 ? {} : _e, _f = _a.InputDropdownProps, InputDropdownProps = _f === void 0 ? { sdsStyle: "minimal" } : _f, propValue = _a.value, PopperComponent = _a.PopperComponent, _g = _a.InputDropdownComponent, InputDropdownComponent = _g === void 0 ? InputDropdown : _g, rest = __rest(_a, ["options", "label", "multiple", "search", "onChange", "DropdownMenuProps", "InputDropdownProps", "value", "PopperComponent", "InputDropdownComponent"]);
+    var options = _a.options, _b = _a.label, label = _b === void 0 ? "" : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? false : _d, onChange = _a.onChange, _e = _a.DropdownMenuProps, DropdownMenuProps = _e === void 0 ? {} : _e, _f = _a.InputDropdownProps, InputDropdownProps = _f === void 0 ? { sdsStyle: "minimal" } : _f, propValue = _a.value, PopperComponent = _a.PopperComponent, _g = _a.InputDropdownComponent, InputDropdownComponent = _g === void 0 ? InputDropdown : _g, _h = _a.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _h === void 0 ? false : _h, rest = __rest(_a, ["options", "label", "multiple", "search", "onChange", "DropdownMenuProps", "InputDropdownProps", "value", "PopperComponent", "InputDropdownComponent", "isTriggerChangeOnOptionClick"]);
     var isControlled = propValue !== undefined;
-    var _h = React.useState(false), open = _h[0], setOpen = _h[1];
-    var _j = React.useState(null), anchorEl = _j[0], setAnchorEl = _j[1];
-    var _k = React.useState((multiple ? [] : null)), value = _k[0], setValue = _k[1];
+    var _j = React.useState(false), open = _j[0], setOpen = _j[1];
+    var _k = React.useState(null), anchorEl = _k[0], setAnchorEl = _k[1];
+    var _l = React.useState(getInitialValue()), value = _l[0], setValue = _l[1];
+    var _m = React.useState(getInitialValue()), pendingValue = _m[0], setPendingValue = _m[1];
+    React.useEffect(function () {
+        onChange(value);
+        setPendingValue(value);
+    }, [onChange, value]);
     React.useEffect(function () {
         if (isControlled) {
             setValue(propValue);
@@ -5728,9 +5746,12 @@ var ComplexFilter = function (_a) {
     // * (mlila): likely, this portion on ComplexFilter will need to be replaced with Dropdown (or a
     // * new DropdownFilter) component. As ComplexFilter evolves, there will be more types added,
     // * such as sliders for ranges, inline multi selects, etc.
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Wrapper$1, __assign({}, rest, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps)), jsxRuntime.jsx(StyledChipsWrapper, { children: jsxRuntime.jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] })), jsxRuntime.jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, onClose: handleMenuSelectClose, search: search, multiple: multiple, value: value, onChange: handleChange, disableCloseOnSelect: multiple, options: options, PopperComponent: PopperComponent, PopperBaseProps: { sx: { minWidth: 250 } }, onClickAway: handleClose }, DropdownMenuProps, rest))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Wrapper$1, __assign({}, rest, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps)), jsxRuntime.jsx(StyledChipsWrapper, { children: jsxRuntime.jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] })), jsxRuntime.jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, onClose: handleMenuSelectClose, search: search, multiple: multiple, value: multiple ? pendingValue : value, onChange: handleChange, disableCloseOnSelect: multiple, options: options, PopperComponent: PopperComponent, PopperBaseProps: { sx: { minWidth: 250 } }, onClickAway: handleClose }, DropdownMenuProps, rest))] }));
     function handleClick(event) {
         if (open) {
+            if (multiple) {
+                setValue(pendingValue);
+            }
             setOpen(false);
             if (anchorEl) {
                 anchorEl.focus();
@@ -5738,6 +5759,9 @@ var ComplexFilter = function (_a) {
             setAnchorEl(null);
         }
         else {
+            if (multiple) {
+                setPendingValue(value);
+            }
             setAnchorEl(event.currentTarget);
             setOpen(true);
         }
@@ -5745,6 +5769,9 @@ var ComplexFilter = function (_a) {
     function handleClose() {
         if (open) {
             setOpen(false);
+            if (multiple) {
+                setValue(pendingValue);
+            }
         }
     }
     function handleMenuSelectClose(event, reason) {
@@ -5754,11 +5781,20 @@ var ComplexFilter = function (_a) {
         }
     }
     function handleChange(event, newValue) {
+        if (multiple) {
+            if (isTriggerChangeOnOptionClick) {
+                setPendingValue(newValue);
+                return setValueAndCallOnChange(event, newValue);
+            }
+            return setPendingValue(newValue);
+        }
+        setValueAndCallOnChange(event, newValue);
+        if (!multiple)
+            setOpen(false);
+    }
+    function setValueAndCallOnChange(event, newValue) {
         setValue(newValue);
         onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        if (!multiple) {
-            setOpen(false);
-        }
     }
     function handleDelete(option) {
         if (!multiple) {
@@ -5767,6 +5803,11 @@ var ComplexFilter = function (_a) {
         var newValue = (value === null || value === void 0 ? void 0 : value.filter(function (item) { return item !== option; })) || null;
         setValue(newValue);
     }
+    function getInitialValue() {
+        return multiple
+            ? []
+            : null;
+    }
 };
 
 var DialogContext = React.createContext({ sdsSize: "m" });

package/dist/index.esm.d.ts

@@ -280,6 +280,9 @@ interface Typography {
     };
 }
 interface FontWeights {
+    bold: number;
+    light: number;
+    medium: number;
     regular: number;
     semibold: number;
 }
@@ -481,11 +484,15 @@ interface Borders {
     positive: Border;
 }
 declare const defaultTheme: import("@mui/material/styles").Theme;
+declare const SDSAppTheme: AppTheme;
 /**
- * (masoudmanson): This is to keep the old defaultAppTheme export for backward compatibility.
+ * (masoudmanson): This is to make sure that the old defaultAppTheme
+ * export is still available for backward compatibility.
+ *
+ * @deprecated
+ * Please use `SDSAppTheme` instead. This export will be removed in the future.
  */
-declare const defaultAppTheme: import("@mui/material/styles").Theme;
-declare const SDSAppTheme: AppTheme;
+declare const defaultAppTheme: AppTheme;
 /**
  * This function creates the theme options for the MUI theme provider
  */
@@ -1172,9 +1179,10 @@ interface ComplexFilterProps<T extends DefaultAutocompleteOption, Multiple exten
     className?: string;
     PopperComponent?: typeof StyledPopper$1;
     InputDropdownComponent?: typeof InputDropdown;
+    isTriggerChangeOnOptionClick?: boolean;
 }
 // eslint-disable-next-line sonarjs/cognitive-complexity
-declare const ComplexFilter: <T extends DefaultAutocompleteOption, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>({ options, label, multiple, search, onChange, DropdownMenuProps, InputDropdownProps, value: propValue, PopperComponent, InputDropdownComponent, ...rest }: ComplexFilterProps<T, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
+declare const ComplexFilter: <T extends DefaultAutocompleteOption, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>({ options, label, multiple, search, onChange, DropdownMenuProps, InputDropdownProps, value: propValue, PopperComponent, InputDropdownComponent, isTriggerChangeOnOptionClick, ...rest }: ComplexFilterProps<T, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
 type DialogPaperProps = PaperProps;
 /**
  * @see https://mui.com/material-ui/react-paper/
@@ -1573,5 +1581,5 @@ type TooltipTableContentProps = TooltipTableExtraProps;
  * @see https://mui.com/material-ui/react-table/
  */
 declare const TooltipTableContent: (props: TooltipTableContentProps) => JSX.Element;
-export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, BannerProps, Banner, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, CalloutIntentType, CalloutProps, ExposedCalloutProps, Callout, CalloutTitle, CellBasicRawProps, CellBasicProps, CellBasic, CellComponentProps, CellComponent, CellHeaderDirection, CellHeaderProps, CellHeader, Chip, InputDropdown as ComplexFilterInputDropdown, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPopper$1 as ComplexFilterPopper, StyledPopper$1 as DropdownPopper, ComplexFilterProps, ComplexFilter, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle$0 as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, StyledPaper$1 as DropdownPaper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, LinkProps$0 as LinkProps, Link, ListProps, List, ListItemLabel, ListItemProps, ListItem, ListSubheaderProps, ListSubheader, LoadingIndicatorProps$0 as LoadingIndicatorProps, LoadingIndicator, MenuProps, Menu, IconNameToSmallSizes, MenuItemExtraProps, MenuItemProps, MenuItem, DefaultMenuSelectOption, MenuSelectProps, MenuSelect, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, SingleButtonDefinition, SegmentedControlProps, SegmentedControl, SdsTableProps, TableProps, Table, TableHeaderProps, TableHeader, TableRowProps, TableRow, Tabs, TabProps$0 as TabProps, Tab, SdsTagProps, TagProps, Tag, SdsTagFilterProps, TagFilterProps, TagFilter, Tooltip, TooltipCondensedProps, TooltipCondensed, TooltipTableContent, TooltipTableContent as TooltipTable, SDSComponentPalette, SDSTextPalette, SDSTheme, SDSThemeOptions, AppTheme, Shadows, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, AccentColor, BaseColor, BetaColor, InfoColor, NegativeColor, NeutralColor, NoticeColor, PositiveColor, SemanticComponentColors, SemanticTextColors, IconSize, IconSizes, Border, Borders, defaultTheme, defaultAppTheme, SDSAppTheme, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXs, fontTabularS, fontTabularSemiboldXs, fontTabularSemiboldS, CommonThemeProps, getSpaces, getSpacings, getTypography, getPalette, getColors, getSemanticComponentColors, getSemanticTextColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders };
+export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, BannerProps, Banner, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, CalloutIntentType, CalloutProps, ExposedCalloutProps, Callout, CalloutTitle, CellBasicRawProps, CellBasicProps, CellBasic, CellComponentProps, CellComponent, CellHeaderDirection, CellHeaderProps, CellHeader, Chip, InputDropdown as ComplexFilterInputDropdown, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPopper$1 as ComplexFilterPopper, StyledPopper$1 as DropdownPopper, ComplexFilterProps, ComplexFilter, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle$0 as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, StyledPaper$1 as DropdownPaper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, LinkProps$0 as LinkProps, Link, ListProps, List, ListItemLabel, ListItemProps, ListItem, ListSubheaderProps, ListSubheader, LoadingIndicatorProps$0 as LoadingIndicatorProps, LoadingIndicator, MenuProps, Menu, IconNameToSmallSizes, MenuItemExtraProps, MenuItemProps, MenuItem, DefaultMenuSelectOption, MenuSelectProps, MenuSelect, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, SingleButtonDefinition, SegmentedControlProps, SegmentedControl, SdsTableProps, TableProps, Table, TableHeaderProps, TableHeader, TableRowProps, TableRow, Tabs, TabProps$0 as TabProps, Tab, SdsTagProps, TagProps, Tag, SdsTagFilterProps, TagFilterProps, TagFilter, Tooltip, TooltipCondensedProps, TooltipCondensed, TooltipTableContent, TooltipTableContent as TooltipTable, SDSComponentPalette, SDSTextPalette, SDSTheme, SDSThemeOptions, AppTheme, Shadows, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, AccentColor, BaseColor, BetaColor, InfoColor, NegativeColor, NeutralColor, NoticeColor, PositiveColor, SemanticComponentColors, SemanticTextColors, IconSize, IconSizes, Border, Borders, defaultTheme, SDSAppTheme, defaultAppTheme, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXs, fontTabularS, fontTabularSemiboldXs, fontTabularSemiboldS, CommonThemeProps, getSpaces, getSpacings, getTypography, getPalette, getColors, getSemanticComponentColors, getSemanticTextColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders };
 export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };

package/dist/index.esm.js

@@ -140,6 +140,9 @@ var SDSAppTheme = {
         s: 2,
     },
     fontWeights: {
+        bold: 700,
+        light: 300,
+        medium: 800,
         regular: 400,
         semibold: 600,
     },
@@ -441,6 +444,14 @@ var SDSAppTheme = {
         },
     },
 };
+/**
+ * (masoudmanson): This is to make sure that the old defaultAppTheme
+ * export is still available for backward compatibility.
+ *
+ * @deprecated
+ * Please use `SDSAppTheme` instead. This export will be removed in the future.
+ */
+var defaultAppTheme = SDSAppTheme;
 // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
 // applications to override those colors using their own custom theme.
 // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
@@ -799,10 +810,6 @@ function makeThemeOptions(appTheme) {
 
 var defaultThemeOptions = makeThemeOptions(SDSAppTheme);
 var defaultTheme = createTheme(defaultThemeOptions);
-/**
- * (masoudmanson): This is to keep the old defaultAppTheme export for backward compatibility.
- */
-var defaultAppTheme = defaultTheme;
 
 function focusVisibleA11yStyle() {
     return "\n      &.Mui-focusVisible, &:focus-visible {\n        outline: 5px auto Highlight;\n        outline: 5px auto -webkit-focus-ring-color;\n      }\n  ";
@@ -4541,7 +4548,13 @@ var AutocompleteMultiColumn = function (props) {
                         },
                     ], open: popperOpen, anchorEl: anchorEl, placement: PopperPlacement, disablePortal: true }, PopperBaseProps, { children: jsx(StyledAutocompleteGroupWrapper, { className: "SdsAutocompleteMultiColumn-wrapper", children: options.map(function (autocompleteOptions) { return (jsx(AutocompleteGroup, __assign({ autocompleteProps: autocompleteOptions, onValueChange: defaultOnValueChange, value: autocompleteMultiColumnValue
                                 ? autocompleteMultiColumnValue[autocompleteOptions.name]
-                                : undefined, multiple: multiple, label: label, InputBaseProps: InputBaseProps, popperOpen: popperOpen, inputValue: inputValue, PaperComponent: StyledPaper$2 }, rest), autocompleteOptions.name)); }) }) })))] }) })));
+                                : undefined, multiple: multiple, label: label, 
+                            /**
+                             * (masoudmanson): In a multi-column autocomplete, the search input for
+                             * inner autocompletes should remain hidden and unfocused when the parent
+                             * input is focused. This prevents blurring of the main search input.
+                             */
+                            InputBaseProps: __assign(__assign({}, InputBaseProps), { autoFocus: false }), popperOpen: popperOpen, inputValue: inputValue, PaperComponent: StyledPaper$2 }, rest), autocompleteOptions.name)); }) }) })))] }) })));
     function clearInput() {
         setInputValue("");
         /**
@@ -5311,7 +5324,7 @@ var DropdownMenu = function (props) {
                 : width });
     }, [PopperBaseProps === null || PopperBaseProps === void 0 ? void 0 : PopperBaseProps.sx, isMultiColumn, width]);
     var DefaultInputBaseProps = useMemo(function () {
-        return __assign(__assign({}, InputBaseProps), { onClick: noop });
+        return __assign(__assign({}, InputBaseProps), { autoFocus: true, onClick: noop });
     }, [InputBaseProps]);
     return (jsx(PopperComponent, __assign({ id: id, modifiers: [
             {
@@ -5531,12 +5544,12 @@ function renderDetailsText(_a) {
 var tagSizeS = function (props) {
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
-    return css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
+    return css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
 };
 var tagSizeL = function (props) {
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
-    return css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      padding-right: ", "px;\n      margin: 0 0 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
+    return css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "], ["\n    height: unset;\n    margin: 0 ", "px ", "px 0;\n\n    .MuiChip-label {\n      ", "\n      padding: 0;\n    }\n\n    .MuiSvgIcon-root {\n      height: ", "px;\n      width: ", "px;\n      margin: 0 ", "px 0 -", "px;\n    }\n\n    .MuiChip-deleteIcon {\n      ", "\n      color: white;\n      margin: 0 0 0 ", "px;\n      height: ", "px;\n      width: ", "px;\n    }\n  "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
 };
 var rounded = function (props) {
     var corners = getCorners(props);
@@ -5678,11 +5691,11 @@ var Chips = function (_a) {
         return null;
     if (!multiple) {
         var name_1 = value.name;
-        return jsx(TagFilter, { label: name_1, onDelete: onDelete });
+        return (jsx(TagFilter, { label: name_1, onDelete: onDelete, onClick: function () { return onDelete(name_1); } }));
     }
     return (jsx(Fragment, { children: value.map(function (item) {
             var name = item.name;
-            return (jsx(TagFilter, { label: name, onDelete: function () { return onDelete(item); } }, name));
+            return (jsx(TagFilter, { label: name, onDelete: function () { return onDelete(item); }, onClick: function () { return onDelete(item); } }, name));
         }) }));
 };
 
@@ -5695,11 +5708,16 @@ var templateObject_1$v, templateObject_2$g;
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 var ComplexFilter = function (_a) {
-    var options = _a.options, _b = _a.label, label = _b === void 0 ? "" : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? false : _d, onChange = _a.onChange, _e = _a.DropdownMenuProps, DropdownMenuProps = _e === void 0 ? {} : _e, _f = _a.InputDropdownProps, InputDropdownProps = _f === void 0 ? { sdsStyle: "minimal" } : _f, propValue = _a.value, PopperComponent = _a.PopperComponent, _g = _a.InputDropdownComponent, InputDropdownComponent = _g === void 0 ? InputDropdown : _g, rest = __rest(_a, ["options", "label", "multiple", "search", "onChange", "DropdownMenuProps", "InputDropdownProps", "value", "PopperComponent", "InputDropdownComponent"]);
+    var options = _a.options, _b = _a.label, label = _b === void 0 ? "" : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? false : _d, onChange = _a.onChange, _e = _a.DropdownMenuProps, DropdownMenuProps = _e === void 0 ? {} : _e, _f = _a.InputDropdownProps, InputDropdownProps = _f === void 0 ? { sdsStyle: "minimal" } : _f, propValue = _a.value, PopperComponent = _a.PopperComponent, _g = _a.InputDropdownComponent, InputDropdownComponent = _g === void 0 ? InputDropdown : _g, _h = _a.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _h === void 0 ? false : _h, rest = __rest(_a, ["options", "label", "multiple", "search", "onChange", "DropdownMenuProps", "InputDropdownProps", "value", "PopperComponent", "InputDropdownComponent", "isTriggerChangeOnOptionClick"]);
     var isControlled = propValue !== undefined;
-    var _h = useState(false), open = _h[0], setOpen = _h[1];
-    var _j = useState(null), anchorEl = _j[0], setAnchorEl = _j[1];
-    var _k = useState((multiple ? [] : null)), value = _k[0], setValue = _k[1];
+    var _j = useState(false), open = _j[0], setOpen = _j[1];
+    var _k = useState(null), anchorEl = _k[0], setAnchorEl = _k[1];
+    var _l = useState(getInitialValue()), value = _l[0], setValue = _l[1];
+    var _m = useState(getInitialValue()), pendingValue = _m[0], setPendingValue = _m[1];
+    useEffect(function () {
+        onChange(value);
+        setPendingValue(value);
+    }, [onChange, value]);
     useEffect(function () {
         if (isControlled) {
             setValue(propValue);
@@ -5708,9 +5726,12 @@ var ComplexFilter = function (_a) {
     // * (mlila): likely, this portion on ComplexFilter will need to be replaced with Dropdown (or a
     // * new DropdownFilter) component. As ComplexFilter evolves, there will be more types added,
     // * such as sliders for ranges, inline multi selects, etc.
-    return (jsxs(Fragment, { children: [jsxs(Wrapper$1, __assign({}, rest, { children: [jsx(InputDropdownComponent, __assign({ label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps)), jsx(StyledChipsWrapper, { children: jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] })), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, onClose: handleMenuSelectClose, search: search, multiple: multiple, value: value, onChange: handleChange, disableCloseOnSelect: multiple, options: options, PopperComponent: PopperComponent, PopperBaseProps: { sx: { minWidth: 250 } }, onClickAway: handleClose }, DropdownMenuProps, rest))] }));
+    return (jsxs(Fragment, { children: [jsxs(Wrapper$1, __assign({}, rest, { children: [jsx(InputDropdownComponent, __assign({ label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps)), jsx(StyledChipsWrapper, { children: jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] })), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, onClose: handleMenuSelectClose, search: search, multiple: multiple, value: multiple ? pendingValue : value, onChange: handleChange, disableCloseOnSelect: multiple, options: options, PopperComponent: PopperComponent, PopperBaseProps: { sx: { minWidth: 250 } }, onClickAway: handleClose }, DropdownMenuProps, rest))] }));
     function handleClick(event) {
         if (open) {
+            if (multiple) {
+                setValue(pendingValue);
+            }
             setOpen(false);
             if (anchorEl) {
                 anchorEl.focus();
@@ -5718,6 +5739,9 @@ var ComplexFilter = function (_a) {
             setAnchorEl(null);
         }
         else {
+            if (multiple) {
+                setPendingValue(value);
+            }
             setAnchorEl(event.currentTarget);
             setOpen(true);
         }
@@ -5725,6 +5749,9 @@ var ComplexFilter = function (_a) {
     function handleClose() {
         if (open) {
             setOpen(false);
+            if (multiple) {
+                setValue(pendingValue);
+            }
         }
     }
     function handleMenuSelectClose(event, reason) {
@@ -5734,11 +5761,20 @@ var ComplexFilter = function (_a) {
         }
     }
     function handleChange(event, newValue) {
+        if (multiple) {
+            if (isTriggerChangeOnOptionClick) {
+                setPendingValue(newValue);
+                return setValueAndCallOnChange(event, newValue);
+            }
+            return setPendingValue(newValue);
+        }
+        setValueAndCallOnChange(event, newValue);
+        if (!multiple)
+            setOpen(false);
+    }
+    function setValueAndCallOnChange(event, newValue) {
         setValue(newValue);
         onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        if (!multiple) {
-            setOpen(false);
-        }
     }
     function handleDelete(option) {
         if (!multiple) {
@@ -5747,6 +5783,11 @@ var ComplexFilter = function (_a) {
         var newValue = (value === null || value === void 0 ? void 0 : value.filter(function (item) { return item !== option; })) || null;
         setValue(newValue);
     }
+    function getInitialValue() {
+        return multiple
+            ? []
+            : null;
+    }
 };
 
 var DialogContext = createContext({ sdsSize: "m" });