@czi-sds/components 20.1.0 → 20.1.2

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