@czi-sds/components 22.13.1 → 22.13.3

package/dist/index.cjs.d.ts

@@ -41,6 +41,7 @@ import { AlertProps } from "@mui/lab";
 import { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteValue } from "@mui/base";
 import { AlertTitleProps } from "@mui/material/AlertTitle";
 import { AutocompleteValue as AutocompleteValue$1 } from "@mui/material/useAutocomplete";
+import { AutocompleteCloseReason as AutocompleteCloseReason$1 } from "@mui/material/useAutocomplete";
 interface SdsAccordionDetailsProps {
     id?: string;
 }
@@ -1276,6 +1277,8 @@ interface ExtraDropdownMenuProps extends StyleProps$1 {
     onClickAway?: (event: MouseEvent | TouchEvent) => void;
     ClickAwayListenerProps?: Partial<MUIClickAwayListenerProps>;
     width?: number | CSSProperties["width"];
+    onOpen?: (event: React.SyntheticEvent) => void;
+    onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason$0) => void;
 }
 type CustomAutocompleteProps$1<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = Omit<AutocompleteProps$0<T, Multiple, DisableClearable, FreeSolo>, "renderInput">;
 type DropdownMenuProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = CustomAutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo> & ExtraDropdownMenuProps;
@@ -1330,6 +1333,8 @@ interface ExtraDropdownProps<T, Multiple extends boolean | undefined, DisableCle
     className?: string;
     InputDropdownComponent?: typeof InputDropdown;
     isTriggerChangeOnOptionClick?: boolean;
+    onOpen?: (event: React.SyntheticEvent) => void;
+    onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason$1) => void;
 }
 type CustomAutocompleteProps$2<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, "renderInput">;
 type DropdownProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = CustomAutocompleteProps$2<T, Multiple, DisableClearable, FreeSolo> & ExtraDropdownProps<T, Multiple, DisableClearable, FreeSolo>;
@@ -1507,12 +1512,22 @@ interface RadioExtraProps extends CommonThemeProps {
     disabled?: boolean;
 }
 interface RadioContentProps extends Omit<MUIRadioProps, "color" | "defaultChecked"> {
-    caption?: string;
+    caption?: React.ReactNode;
     intent?: "default" | "negative" | "notice" | "positive";
     label?: React.ReactNode;
     radioProps?: Partial<MUIRadioProps>;
     stage?: "checked" | "unchecked";
     value?: string;
+    classes?: {
+        root?: string;
+        labelCaptionContainer?: string;
+        label?: string;
+        caption?: string;
+        radioButton?: string;
+        radioCheckedIcon?: string;
+        radioCheckedIconDot?: string;
+        radioDefaultIcon?: string;
+    };
 }
 type RadioProps = RadioContentProps & RadioExtraProps;
 /**

package/dist/index.cjs.js

@@ -6465,7 +6465,7 @@ var DEFAULT_POPPER_BASE_PROPS = {
 var DropdownMenu = function (props) {
     var _a, _b;
     var theme = material.useTheme();
-    var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.isSearchAutoFocus, isSearchAutoFocus = _h === void 0 ? true : _h, _j = props.search, search = _j === void 0 ? false : _j, title = props.title, headerComponentSlot = props.headerComponentSlot, _k = props.label, label = _k === void 0 ? "Search" : _k, children = props.children, options = props.options, _l = props.onClickAway, onClickAway = _l === void 0 ? noop : _l, ClickAwayListenerProps = props.ClickAwayListenerProps, _m = props.width, width = _m === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _m, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "isSearchAutoFocus", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
+    var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.isSearchAutoFocus, isSearchAutoFocus = _h === void 0 ? true : _h, _j = props.search, search = _j === void 0 ? false : _j, title = props.title, headerComponentSlot = props.headerComponentSlot, _k = props.label, label = _k === void 0 ? "Search" : _k, children = props.children, options = props.options, _l = props.onClickAway, onClickAway = _l === void 0 ? noop : _l, ClickAwayListenerProps = props.ClickAwayListenerProps, _m = props.width, width = _m === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _m, onOpen = props.onOpen, onClose = props.onClose, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "isSearchAutoFocus", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width", "onOpen", "onClose"]);
     var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
     // (masoudmanson): The DropdownMenu's Popper component should have a minimum
     // width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
@@ -6487,7 +6487,7 @@ var DropdownMenu = function (props) {
         ], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, { 
         // (masoudmanson): To override the width of the Popper,
         // the sx prop's value must be set after spreading the PopperBaseProps.
-        sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxRuntime.jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsxRuntime.jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerComponentSlot })] })), anchorEl && (jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
+        sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxRuntime.jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsxRuntime.jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerComponentSlot })] })), anchorEl && (jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop, onOpen: onOpen, onClose: onClose }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
 };
 
 var doNotForwardProps$s = [
@@ -6783,7 +6783,7 @@ var Dropdown = function (props) {
     // which by default will not close on blur. If closeOnBlur is enabled, clicking out
     // is equivalent to clicking the Cancel button, closing the dropdown and losing
     // unapplied changes.
-    closeOnBlur = _g === void 0 ? !buttons : _g, onClose = props.onClose, onChange = props.onChange, title = props.title, _h = props.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, InputDropdownProps = props.InputDropdownProps, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "isSearchAutoFocus", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "title", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
+    closeOnBlur = _g === void 0 ? !buttons : _g, onClose = props.onClose, onOpen = props.onOpen, onChange = props.onChange, title = props.title, _h = props.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, InputDropdownProps = props.InputDropdownProps, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "isSearchAutoFocus", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onOpen", "onChange", "title", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
     if (buttons && !multiple) {
         // eslint-disable-next-line no-console
         console.warn("Warning: buttons are only supported for multiple select dropdowns.");
@@ -6880,6 +6880,7 @@ var Dropdown = function (props) {
             }
             setAnchorEl(event.currentTarget);
             setOpen(true);
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
         }
     }, [
         onClick,
@@ -6889,6 +6890,7 @@ var Dropdown = function (props) {
         setPendingValue,
         value,
         handleDropdownClose,
+        onOpen,
     ]);
     var handleClose = React.useCallback(function (event, reason) {
         if (reason === "toggleInput")
@@ -6941,7 +6943,10 @@ var Dropdown = function (props) {
         }
         anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.focus();
         setOpen(false);
-    }, [multiple, setPendingValue, value, anchorEl]);
+        // Create a synthetic event for the onClose callback
+        var syntheticEvent = new Event("cancel");
+        onClose === null || onClose === void 0 ? void 0 : onClose(syntheticEvent, "escape");
+    }, [multiple, setPendingValue, value, anchorEl, onClose]);
     // Helper function to count multi-column selections
     var countMultiColumnSelections = React.useCallback(function (currentValue) {
         if (!currentValue || typeof currentValue !== "object")
@@ -6989,7 +6994,7 @@ var Dropdown = function (props) {
         countMultiColumnSelections,
         getSingleSelectionProps,
     ]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, "aria-expanded": open, "aria-haspopup": "listbox", multiple: multiple || isMultiColumn }, getInputDropdownProps, InputDropdownProps, rest)), jsxRuntime.jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: multiple ? pendingValue : value, isSearchAutoFocus: isSearchAutoFocus, title: title }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsxRuntime.jsx(DropdownButtons, { buttonPosition: buttonPosition, onApply: handleButtonClose, onCancel: handleCancel })) : null }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, "aria-expanded": open, "aria-haspopup": "listbox", multiple: multiple || isMultiColumn }, getInputDropdownProps, InputDropdownProps, rest)), jsxRuntime.jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, onOpen: onOpen, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: multiple ? pendingValue : value, isSearchAutoFocus: isSearchAutoFocus, title: title }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsxRuntime.jsx(DropdownButtons, { buttonPosition: buttonPosition, onApply: handleButtonClose, onCancel: handleCancel })) : null }))] }));
 };
 
 var tagSizeS = function (props) {
@@ -8004,10 +8009,11 @@ var templateObject_1$x, templateObject_2$k, templateObject_3$f, templateObject_4
  * @see https://mui.com/material-ui/react-radio-button/
  */
 var InputRadio = function (props) {
-    var caption = props.caption, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, radioProps = props.radioProps, stage = props.stage, value = props.value;
+    var caption = props.caption, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, radioProps = props.radioProps, stage = props.stage, value = props.value, _b = props.classes, classes = _b === void 0 ? EMPTY_OBJECT : _b;
     // (masoudmanson): We don't need to pass the label prop to the radio component
     // so we are destructuring it here.
     var label = props.label, restProps = __rest(props, ["label"]);
+    var root = classes.root, labelCaptionContainer = classes.labelCaptionContainer, labelClassName = classes.label, captionClassName = classes.caption, radioButtonClassName = classes.radioButton, radioCheckedIconClassName = classes.radioCheckedIcon, radioCheckedIconDotClassName = classes.radioCheckedIconDot, radioDefaultIconClassName = classes.radioDefaultIcon;
     var newProps;
     switch (stage) {
         case "checked":
@@ -8023,8 +8029,8 @@ var InputRadio = function (props) {
     // Otherwise, the screen reader will read the label twice!
     var labelId = "".concat(value, "-label");
     var captionId = caption ? "".concat(value, "-caption") : undefined;
-    var finalLabel = caption ? (jsxRuntime.jsxs(StyledLabelContainer, { children: [jsxRuntime.jsx(StyledRadioLabel, { id: labelId, children: label }), jsxRuntime.jsx(StyledRadioCaption, { id: captionId, children: caption })] })) : (jsxRuntime.jsx(StyledLabelContainer, { children: jsxRuntime.jsx(StyledRadioLabel, { id: labelId, children: label }) }));
-    return (jsxRuntime.jsx(StyledFormControlLabel, { control: jsxRuntime.jsx(StyledRadioButton, __assign({ checkedIcon: jsxRuntime.jsx(StyledRadioCheckedIcon, { children: jsxRuntime.jsx(StyledRadioDot, {}) }), icon: jsxRuntime.jsx(StyledRadioDefaultIcon, { intent: intent }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value }));
+    var finalLabel = caption ? (jsxRuntime.jsxs(StyledLabelContainer, { className: labelCaptionContainer, children: [jsxRuntime.jsx(StyledRadioLabel, { id: labelId, className: labelClassName, children: label }), jsxRuntime.jsx(StyledRadioCaption, { id: captionId, className: captionClassName, children: caption })] })) : (jsxRuntime.jsx(StyledLabelContainer, { className: labelCaptionContainer, children: jsxRuntime.jsx(StyledRadioLabel, { id: labelId, className: labelClassName, children: label }) }));
+    return (jsxRuntime.jsx(StyledFormControlLabel, { control: jsxRuntime.jsx(StyledRadioButton, __assign({ className: radioButtonClassName, checkedIcon: jsxRuntime.jsx(StyledRadioCheckedIcon, { className: radioCheckedIconClassName, children: jsxRuntime.jsx(StyledRadioDot, { className: radioCheckedIconDotClassName }) }), icon: jsxRuntime.jsx(StyledRadioDefaultIcon, { intent: intent, className: radioDefaultIconClassName }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value, className: root }));
 };
 
 var inputSlider = function (props) {

package/dist/index.esm.d.ts

@@ -41,6 +41,7 @@ import { AlertProps } from "@mui/lab";
 import { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteValue } from "@mui/base";
 import { AlertTitleProps } from "@mui/material/AlertTitle";
 import { AutocompleteValue as AutocompleteValue$1 } from "@mui/material/useAutocomplete";
+import { AutocompleteCloseReason as AutocompleteCloseReason$1 } from "@mui/material/useAutocomplete";
 interface SdsAccordionDetailsProps {
     id?: string;
 }
@@ -1276,6 +1277,8 @@ interface ExtraDropdownMenuProps extends StyleProps$1 {
     onClickAway?: (event: MouseEvent | TouchEvent) => void;
     ClickAwayListenerProps?: Partial<MUIClickAwayListenerProps>;
     width?: number | CSSProperties["width"];
+    onOpen?: (event: React.SyntheticEvent) => void;
+    onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason$0) => void;
 }
 type CustomAutocompleteProps$1<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = Omit<AutocompleteProps$0<T, Multiple, DisableClearable, FreeSolo>, "renderInput">;
 type DropdownMenuProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = CustomAutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo> & ExtraDropdownMenuProps;
@@ -1330,6 +1333,8 @@ interface ExtraDropdownProps<T, Multiple extends boolean | undefined, DisableCle
     className?: string;
     InputDropdownComponent?: typeof InputDropdown;
     isTriggerChangeOnOptionClick?: boolean;
+    onOpen?: (event: React.SyntheticEvent) => void;
+    onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason$1) => void;
 }
 type CustomAutocompleteProps$2<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, "renderInput">;
 type DropdownProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> = CustomAutocompleteProps$2<T, Multiple, DisableClearable, FreeSolo> & ExtraDropdownProps<T, Multiple, DisableClearable, FreeSolo>;
@@ -1507,12 +1512,22 @@ interface RadioExtraProps extends CommonThemeProps {
     disabled?: boolean;
 }
 interface RadioContentProps extends Omit<MUIRadioProps, "color" | "defaultChecked"> {
-    caption?: string;
+    caption?: React.ReactNode;
     intent?: "default" | "negative" | "notice" | "positive";
     label?: React.ReactNode;
     radioProps?: Partial<MUIRadioProps>;
     stage?: "checked" | "unchecked";
     value?: string;
+    classes?: {
+        root?: string;
+        labelCaptionContainer?: string;
+        label?: string;
+        caption?: string;
+        radioButton?: string;
+        radioCheckedIcon?: string;
+        radioCheckedIconDot?: string;
+        radioDefaultIcon?: string;
+    };
 }
 type RadioProps = RadioContentProps & RadioExtraProps;
 /**

package/dist/index.esm.js

@@ -6442,7 +6442,7 @@ var DEFAULT_POPPER_BASE_PROPS = {
 var DropdownMenu = function (props) {
     var _a, _b;
     var theme = useTheme$4();
-    var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.isSearchAutoFocus, isSearchAutoFocus = _h === void 0 ? true : _h, _j = props.search, search = _j === void 0 ? false : _j, title = props.title, headerComponentSlot = props.headerComponentSlot, _k = props.label, label = _k === void 0 ? "Search" : _k, children = props.children, options = props.options, _l = props.onClickAway, onClickAway = _l === void 0 ? noop : _l, ClickAwayListenerProps = props.ClickAwayListenerProps, _m = props.width, width = _m === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _m, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "isSearchAutoFocus", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
+    var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.isSearchAutoFocus, isSearchAutoFocus = _h === void 0 ? true : _h, _j = props.search, search = _j === void 0 ? false : _j, title = props.title, headerComponentSlot = props.headerComponentSlot, _k = props.label, label = _k === void 0 ? "Search" : _k, children = props.children, options = props.options, _l = props.onClickAway, onClickAway = _l === void 0 ? noop : _l, ClickAwayListenerProps = props.ClickAwayListenerProps, _m = props.width, width = _m === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _m, onOpen = props.onOpen, onClose = props.onClose, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "isSearchAutoFocus", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width", "onOpen", "onClose"]);
     var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
     // (masoudmanson): The DropdownMenu's Popper component should have a minimum
     // width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
@@ -6464,7 +6464,7 @@ var DropdownMenu = function (props) {
         ], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, { 
         // (masoudmanson): To override the width of the Popper,
         // the sx prop's value must be set after spreading the PopperBaseProps.
-        sx: dropdownMenuPopperSx, children: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsx(Fragment, { children: headerComponentSlot })] })), anchorEl && (jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
+        sx: dropdownMenuPopperSx, children: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), children: [(title || headerComponentSlot) && (jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsx(Fragment, { children: headerComponentSlot })] })), anchorEl && (jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop, onOpen: onOpen, onClose: onClose }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
 };
 
 var doNotForwardProps$s = [
@@ -6760,7 +6760,7 @@ var Dropdown = function (props) {
     // which by default will not close on blur. If closeOnBlur is enabled, clicking out
     // is equivalent to clicking the Cancel button, closing the dropdown and losing
     // unapplied changes.
-    closeOnBlur = _g === void 0 ? !buttons : _g, onClose = props.onClose, onChange = props.onChange, title = props.title, _h = props.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, InputDropdownProps = props.InputDropdownProps, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "isSearchAutoFocus", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "title", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
+    closeOnBlur = _g === void 0 ? !buttons : _g, onClose = props.onClose, onOpen = props.onOpen, onChange = props.onChange, title = props.title, _h = props.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, InputDropdownProps = props.InputDropdownProps, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "isSearchAutoFocus", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onOpen", "onChange", "title", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
     if (buttons && !multiple) {
         // eslint-disable-next-line no-console
         console.warn("Warning: buttons are only supported for multiple select dropdowns.");
@@ -6857,6 +6857,7 @@ var Dropdown = function (props) {
             }
             setAnchorEl(event.currentTarget);
             setOpen(true);
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
         }
     }, [
         onClick,
@@ -6866,6 +6867,7 @@ var Dropdown = function (props) {
         setPendingValue,
         value,
         handleDropdownClose,
+        onOpen,
     ]);
     var handleClose = useCallback(function (event, reason) {
         if (reason === "toggleInput")
@@ -6918,7 +6920,10 @@ var Dropdown = function (props) {
         }
         anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.focus();
         setOpen(false);
-    }, [multiple, setPendingValue, value, anchorEl]);
+        // Create a synthetic event for the onClose callback
+        var syntheticEvent = new Event("cancel");
+        onClose === null || onClose === void 0 ? void 0 : onClose(syntheticEvent, "escape");
+    }, [multiple, setPendingValue, value, anchorEl, onClose]);
     // Helper function to count multi-column selections
     var countMultiColumnSelections = useCallback(function (currentValue) {
         if (!currentValue || typeof currentValue !== "object")
@@ -6966,7 +6971,7 @@ var Dropdown = function (props) {
         countMultiColumnSelections,
         getSingleSelectionProps,
     ]);
-    return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, "aria-expanded": open, "aria-haspopup": "listbox", multiple: multiple || isMultiColumn }, getInputDropdownProps, InputDropdownProps, rest)), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: multiple ? pendingValue : value, isSearchAutoFocus: isSearchAutoFocus, title: title }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsx(DropdownButtons, { buttonPosition: buttonPosition, onApply: handleButtonClose, onCancel: handleCancel })) : null }))] }));
+    return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, "aria-expanded": open, "aria-haspopup": "listbox", multiple: multiple || isMultiColumn }, getInputDropdownProps, InputDropdownProps, rest)), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, onOpen: onOpen, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: multiple ? pendingValue : value, isSearchAutoFocus: isSearchAutoFocus, title: title }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsx(DropdownButtons, { buttonPosition: buttonPosition, onApply: handleButtonClose, onCancel: handleCancel })) : null }))] }));
 };
 
 var tagSizeS = function (props) {
@@ -7981,10 +7986,11 @@ var templateObject_1$x, templateObject_2$k, templateObject_3$f, templateObject_4
  * @see https://mui.com/material-ui/react-radio-button/
  */
 var InputRadio = function (props) {
-    var caption = props.caption, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, radioProps = props.radioProps, stage = props.stage, value = props.value;
+    var caption = props.caption, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, radioProps = props.radioProps, stage = props.stage, value = props.value, _b = props.classes, classes = _b === void 0 ? EMPTY_OBJECT : _b;
     // (masoudmanson): We don't need to pass the label prop to the radio component
     // so we are destructuring it here.
     var label = props.label, restProps = __rest(props, ["label"]);
+    var root = classes.root, labelCaptionContainer = classes.labelCaptionContainer, labelClassName = classes.label, captionClassName = classes.caption, radioButtonClassName = classes.radioButton, radioCheckedIconClassName = classes.radioCheckedIcon, radioCheckedIconDotClassName = classes.radioCheckedIconDot, radioDefaultIconClassName = classes.radioDefaultIcon;
     var newProps;
     switch (stage) {
         case "checked":
@@ -8000,8 +8006,8 @@ var InputRadio = function (props) {
     // Otherwise, the screen reader will read the label twice!
     var labelId = "".concat(value, "-label");
     var captionId = caption ? "".concat(value, "-caption") : undefined;
-    var finalLabel = caption ? (jsxs(StyledLabelContainer, { children: [jsx(StyledRadioLabel, { id: labelId, children: label }), jsx(StyledRadioCaption, { id: captionId, children: caption })] })) : (jsx(StyledLabelContainer, { children: jsx(StyledRadioLabel, { id: labelId, children: label }) }));
-    return (jsx(StyledFormControlLabel, { control: jsx(StyledRadioButton, __assign({ checkedIcon: jsx(StyledRadioCheckedIcon, { children: jsx(StyledRadioDot, {}) }), icon: jsx(StyledRadioDefaultIcon, { intent: intent }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value }));
+    var finalLabel = caption ? (jsxs(StyledLabelContainer, { className: labelCaptionContainer, children: [jsx(StyledRadioLabel, { id: labelId, className: labelClassName, children: label }), jsx(StyledRadioCaption, { id: captionId, className: captionClassName, children: caption })] })) : (jsx(StyledLabelContainer, { className: labelCaptionContainer, children: jsx(StyledRadioLabel, { id: labelId, className: labelClassName, children: label }) }));
+    return (jsx(StyledFormControlLabel, { control: jsx(StyledRadioButton, __assign({ className: radioButtonClassName, checkedIcon: jsx(StyledRadioCheckedIcon, { className: radioCheckedIconClassName, children: jsx(StyledRadioDot, { className: radioCheckedIconDotClassName }) }), icon: jsx(StyledRadioDefaultIcon, { intent: intent, className: radioDefaultIconClassName }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value, className: root }));
 };
 
 var inputSlider = function (props) {