@boomerang-io/carbon-addons-boomerang-react 4.6.11-beta.27 → 4.6.11-beta.28

package/dist/cjs/components/AutoSuggest/AutoSuggest.js

@@ -12,107 +12,107 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var AutoSuggest__default = /*#__PURE__*/_interopDefault(AutoSuggest);
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-const SELECT_METHODS = ["up", "down", "click"];
-class AutoSuggestBmrg extends React.Component {
-    inputRef = React__default.default.createRef();
-    state = {
-        // Used if we want to have some of the functions external instead of
-        // the default ones in the wrapper
-        value: this.props.initialValue ?? "",
-        caretIndex: 0,
-        suggestions: [],
-    };
-    // Each time the component updates we want to refocus the input and keep the cursor in the correct place
-    // Needed for when cycling through mutliple suggestions with the arrow keys and the cursor resets to the end of the input. We don't want that.
-    componentDidUpdate(_, prevState) {
-        if (this.state.value && prevState.value !== this.state.value) {
-            // prevent it from focusing on initial render / empty
-            this.inputRef.current?.focus();
-            this.inputRef.current?.setSelectionRange(this.state.caretIndex, this.state.caretIndex);
-        }
-    }
-    renderSuggestion = (suggestion) => suggestion.label;
-    onSuggestionsFetchRequested = () => {
-        this.setState(() => ({
-            suggestions: this.getSuggestions(),
-        }));
-    };
-    /**
-     * More logic here for handling a user cycling through suggestions
-     * Move the caret to the new suggestion location or use the reference to the DOM element.
-     * Shift based on the change in length of the value b/c of different length suggestions
-     */
-    onInputChange = (event, { newValue, method }) => {
-        this.setState((prevState) => ({
-            value: newValue,
-            caretIndex: SELECT_METHODS.includes(method)
-                ? prevState.caretIndex + (newValue.length - prevState.value.length)
-                : this.inputRef.current?.selectionStart ?? 0,
-        }));
-        this.props.onChange(newValue);
-    };
-    /**
-     * Return the new value for the input
-     * Find the current caret position
-     * get the string up to that point
-     * find the last word (space-delimited) and replace it in input
-     */
-    getSuggestionValue = (suggestion) => {
-        const substringWordList = this.findWordsBeforeCurrentLocation();
-        /*
-         * Find the position of the caret, get the string up to that point
-         * and find the index of the last word in that substring
-         * This gives use the word to suggest matches for
-         */
-        const closestWord = substringWordList.at(-1);
-        const position = this.state.value.slice(0, this.state.caretIndex).lastIndexOf(closestWord);
-        // Sub in the new property suggestion
-        return (this.state.value.substring(0, position) +
-            suggestion.value +
-            this.state.value.substring(position + closestWord.length));
-    };
-    getSuggestions = () => {
-        const substringWordList = this.findWordsBeforeCurrentLocation();
-        // Prevent empty string from matching everyhing
-        const closestWord = substringWordList.at(-1);
-        return !closestWord
-            ? []
-            : matchSorter.matchSorter(this.props.autoSuggestions, closestWord, {
-                // Use match-sorter for matching inputs
-                keys: [{ key: "value" }],
-            });
-    };
-    // Get array of distinct words prior to the current location of entered text
-    // Use the inputRef instead of state becuase of asnychronous updating of state and calling of these functions :(
-    findWordsBeforeCurrentLocation = () => {
-        return this.inputRef.current?.value
-            .slice(0, this.inputRef.current?.selectionStart ?? undefined)
-            .split(" ");
-    };
-    onSuggestionsClearRequested = () => {
-        this.setState({
-            suggestions: [],
-        });
-    };
-    render() {
-        const { inputProps, children, ...rest } = this.props;
-        const finalInputProps = {
-            ...inputProps,
-            onChange: this.onInputChange,
-            value: this.state.value,
-        };
-        return (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-auto-suggest` },
-            React__default.default.createElement(AutoSuggest__default.default, { getSuggestionValue: this.getSuggestionValue, inputProps: finalInputProps, onSuggestionsClearRequested: this.onSuggestionsClearRequested, onSuggestionsFetchRequested: this.onSuggestionsFetchRequested, renderInputComponent: (props) => React__default.default.cloneElement(children, { ...props, ref: this.inputRef }), renderSuggestion: this.renderSuggestion, renderSuggestionsContainer: renderSuggestionsContainer, suggestions: this.state.suggestions, ...rest })));
-    }
-}
-// Needed to add aria-label for a11y
-function renderSuggestionsContainer({ containerProps, children, ...rest }) {
-    return (React__default.default.createElement("div", { "aria-label": "AutoSuggest listbox", ...containerProps, ...rest }, children));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+const SELECT_METHODS = ["up", "down", "click"];
+class AutoSuggestBmrg extends React.Component {
+    inputRef = React__default.default.createRef();
+    state = {
+        // Used if we want to have some of the functions external instead of
+        // the default ones in the wrapper
+        value: this.props.initialValue ?? "",
+        caretIndex: 0,
+        suggestions: [],
+    };
+    // Each time the component updates we want to refocus the input and keep the cursor in the correct place
+    // Needed for when cycling through mutliple suggestions with the arrow keys and the cursor resets to the end of the input. We don't want that.
+    componentDidUpdate(_, prevState) {
+        if (this.state.value && prevState.value !== this.state.value) {
+            // prevent it from focusing on initial render / empty
+            this.inputRef.current?.focus();
+            this.inputRef.current?.setSelectionRange(this.state.caretIndex, this.state.caretIndex);
+        }
+    }
+    renderSuggestion = (suggestion) => suggestion.label;
+    onSuggestionsFetchRequested = () => {
+        this.setState(() => ({
+            suggestions: this.getSuggestions(),
+        }));
+    };
+    /**
+     * More logic here for handling a user cycling through suggestions
+     * Move the caret to the new suggestion location or use the reference to the DOM element.
+     * Shift based on the change in length of the value b/c of different length suggestions
+     */
+    onInputChange = (event, { newValue, method }) => {
+        this.setState((prevState) => ({
+            value: newValue,
+            caretIndex: SELECT_METHODS.includes(method)
+                ? prevState.caretIndex + (newValue.length - prevState.value.length)
+                : this.inputRef.current?.selectionStart ?? 0,
+        }));
+        this.props.onChange(newValue);
+    };
+    /**
+     * Return the new value for the input
+     * Find the current caret position
+     * get the string up to that point
+     * find the last word (space-delimited) and replace it in input
+     */
+    getSuggestionValue = (suggestion) => {
+        const substringWordList = this.findWordsBeforeCurrentLocation();
+        /*
+         * Find the position of the caret, get the string up to that point
+         * and find the index of the last word in that substring
+         * This gives use the word to suggest matches for
+         */
+        const closestWord = substringWordList.at(-1);
+        const position = this.state.value.slice(0, this.state.caretIndex).lastIndexOf(closestWord);
+        // Sub in the new property suggestion
+        return (this.state.value.substring(0, position) +
+            suggestion.value +
+            this.state.value.substring(position + closestWord.length));
+    };
+    getSuggestions = () => {
+        const substringWordList = this.findWordsBeforeCurrentLocation();
+        // Prevent empty string from matching everyhing
+        const closestWord = substringWordList.at(-1);
+        return !closestWord
+            ? []
+            : matchSorter.matchSorter(this.props.autoSuggestions, closestWord, {
+                // Use match-sorter for matching inputs
+                keys: [{ key: "value" }],
+            });
+    };
+    // Get array of distinct words prior to the current location of entered text
+    // Use the inputRef instead of state becuase of asnychronous updating of state and calling of these functions :(
+    findWordsBeforeCurrentLocation = () => {
+        return this.inputRef.current?.value
+            .slice(0, this.inputRef.current?.selectionStart ?? undefined)
+            .split(" ");
+    };
+    onSuggestionsClearRequested = () => {
+        this.setState({
+            suggestions: [],
+        });
+    };
+    render() {
+        const { inputProps, children, ...rest } = this.props;
+        const finalInputProps = {
+            ...inputProps,
+            onChange: this.onInputChange,
+            value: this.state.value,
+        };
+        return (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-auto-suggest` },
+            React__default.default.createElement(AutoSuggest__default.default, { getSuggestionValue: this.getSuggestionValue, inputProps: finalInputProps, onSuggestionsClearRequested: this.onSuggestionsClearRequested, onSuggestionsFetchRequested: this.onSuggestionsFetchRequested, renderInputComponent: (props) => React__default.default.cloneElement(children, { ...props, ref: this.inputRef }), renderSuggestion: this.renderSuggestion, renderSuggestionsContainer: renderSuggestionsContainer, suggestions: this.state.suggestions, ...rest })));
+    }
+}
+// Needed to add aria-label for a11y
+function renderSuggestionsContainer({ containerProps, children, ...rest }) {
+    return (React__default.default.createElement("div", { "aria-label": "AutoSuggest listbox", ...containerProps, ...rest }, children));
 }
 
 exports.default = AutoSuggestBmrg;

package/dist/cjs/components/Avatar/Avatar.js

@@ -9,24 +9,24 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-const UserIcon = (props) => {
-    const { description, userName, plainTooltip, ...rest } = props;
-    return (React__default.default.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", width: "16px", height: "16px", viewBox: "0 0 16 16", role: "img", ...rest },
-        React__default.default.createElement("title", null, plainTooltip || !userName ? "Profile Image" : `User icon for ${userName}`),
-        description && React__default.default.createElement("desc", null, description),
-        React__default.default.createElement("g", null,
-            React__default.default.createElement("path", { fill: "currentColor", d: "M4,13.7C5.1,14.5,6.5,15,8,15s2.9-0.5,4-1.3v-1.2c0-0.8-0.7-1.5-1.5-1.5h-5C4.7,11,4,11.7,4,12.5V13.7\r\n\t\tz M3,12.9v-0.4C3,11.1,4.1,10,5.5,10h5c1.4,0,2.5,1.1,2.5,2.5v0.4c1.2-1.3,2-3,2-4.9c0-3.9-3.1-7-7-7S1,4.1,1,8\r\n\t\tC1,9.9,1.8,11.6,3,12.9z M8,16c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S12.4,16,8,16z" }),
-            React__default.default.createElement("path", { fill: "currentColor", d: "M8,8c1.1,0,2-0.9,2-2S9.1,4,8,4S6,4.9,6,6S6.9,8,8,8z M8,9C6.3,9,5,7.7,5,6s1.3-3,3-3s3,1.3,3,3S9.7,9,8,9z" }))));
-};
-function Avatar({ alt, className = `${settings.prefix}--bmrg-avatar`, size = "medium", src, style, title, userName, plainTooltip = false, ...rest }) {
-    const [error, setError] = React.useState(false);
-    const altText = plainTooltip || !userName ? "Profile Image" : `Avatar for ${userName}`;
-    return error || !src ? (React__default.default.createElement(UserIcon, { userName: userName, plainTooltip: plainTooltip, className: `${className} --${size || ""}`, description: altText, style: style })) : (React__default.default.createElement("img", { alt: alt ?? altText, className: `${className} --${size || ""}`, src: src, style: style, title: title ?? altText, onError: () => setError(true), ...rest }));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+const UserIcon = (props) => {
+    const { description, userName, plainTooltip, ...rest } = props;
+    return (React__default.default.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", width: "16px", height: "16px", viewBox: "0 0 16 16", role: "img", ...rest },
+        React__default.default.createElement("title", null, plainTooltip || !userName ? "Profile Image" : `User icon for ${userName}`),
+        description && React__default.default.createElement("desc", null, description),
+        React__default.default.createElement("g", null,
+            React__default.default.createElement("path", { fill: "currentColor", d: "M4,13.7C5.1,14.5,6.5,15,8,15s2.9-0.5,4-1.3v-1.2c0-0.8-0.7-1.5-1.5-1.5h-5C4.7,11,4,11.7,4,12.5V13.7\n\t\tz M3,12.9v-0.4C3,11.1,4.1,10,5.5,10h5c1.4,0,2.5,1.1,2.5,2.5v0.4c1.2-1.3,2-3,2-4.9c0-3.9-3.1-7-7-7S1,4.1,1,8\n\t\tC1,9.9,1.8,11.6,3,12.9z M8,16c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S12.4,16,8,16z" }),
+            React__default.default.createElement("path", { fill: "currentColor", d: "M8,8c1.1,0,2-0.9,2-2S9.1,4,8,4S6,4.9,6,6S6.9,8,8,8z M8,9C6.3,9,5,7.7,5,6s1.3-3,3-3s3,1.3,3,3S9.7,9,8,9z" }))));
+};
+function Avatar({ alt, className = `${settings.prefix}--bmrg-avatar`, size = "medium", src, style, title, userName, plainTooltip = false, ...rest }) {
+    const [error, setError] = React.useState(false);
+    const altText = plainTooltip || !userName ? "Profile Image" : `Avatar for ${userName}`;
+    return error || !src ? (React__default.default.createElement(UserIcon, { userName: userName, plainTooltip: plainTooltip, className: `${className} --${size || ""}`, description: altText, style: style })) : (React__default.default.createElement("img", { alt: alt ?? altText, className: `${className} --${size || ""}`, src: src, style: style, title: title ?? altText, onError: () => setError(true), ...rest }));
 }
 
 exports.default = Avatar;

package/dist/cjs/components/CheckboxList/CheckboxList.js

@@ -12,40 +12,40 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-function CheckboxListComponent({ checkboxProps, disabled, helperText, id, initialSelectedItems = [], label, labelText, onChange, options, selectedItems: propsSelectedItems, tooltipClassName = `${settings.prefix}--bmrg-checkbox-list__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, }) {
-    const [stateSelectedItems, setSelectedItems] = React.useState(initialSelectedItems);
-    const selectedItems = propsSelectedItems || stateSelectedItems; // Externally controlled if selectedItems props exists
-    const handleCheckboxChange = (event, { checked: value, id }) => {
-        let newSelectedItems = [...stateSelectedItems];
-        if (value) {
-            newSelectedItems.push(id);
-        }
-        else {
-            newSelectedItems = newSelectedItems.filter((item) => item !== id);
-        }
-        setSelectedItems(newSelectedItems);
-        if (typeof onChange === "function") {
-            onChange(value, id, event, newSelectedItems);
-        }
-    };
-    const labelValue = label || labelText;
-    const labelTextId = !labelValue ? undefined : `${id}-label`;
-    return (React__default.default.createElement("div", { key: id, className: `${settings.prefix}--bmrg-checkbox-list` },
-        labelValue && (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-checkbox-list__title` },
-            React__default.default.createElement("div", { id: labelTextId, className: `${settings.prefix}--label`, style: { marginBottom: ".3125rem" } }, labelValue),
-            tooltipContent && (React__default.default.createElement("div", { className: tooltipClassName },
-                React__default.default.createElement(TooltipHover.default, { ...tooltipProps, tooltipText: tooltipContent },
-                    React__default.default.createElement(icons.Information, { size: 16, fill: "currentColor" })))))),
-        helperText && React__default.default.createElement("div", { className: `${settings.prefix}--form__helper-text` }, helperText),
-        React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-checkbox-list__list` }, options.map((option) => {
-            const checked = selectedItems.some((item) => item === option.id);
-            return (React__default.default.createElement(react.Checkbox, { disabled: disabled, key: option.id, id: option.id, labelText: option.labelText, onChange: handleCheckboxChange, checked: checked, ...checkboxProps }));
-        }))));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+function CheckboxListComponent({ checkboxProps, disabled, helperText, id, initialSelectedItems = [], label, labelText, onChange, options, selectedItems: propsSelectedItems, tooltipClassName = `${settings.prefix}--bmrg-checkbox-list__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, }) {
+    const [stateSelectedItems, setSelectedItems] = React.useState(initialSelectedItems);
+    const selectedItems = propsSelectedItems || stateSelectedItems; // Externally controlled if selectedItems props exists
+    const handleCheckboxChange = (event, { checked: value, id }) => {
+        let newSelectedItems = [...stateSelectedItems];
+        if (value) {
+            newSelectedItems.push(id);
+        }
+        else {
+            newSelectedItems = newSelectedItems.filter((item) => item !== id);
+        }
+        setSelectedItems(newSelectedItems);
+        if (typeof onChange === "function") {
+            onChange(value, id, event, newSelectedItems);
+        }
+    };
+    const labelValue = label || labelText;
+    const labelTextId = !labelValue ? undefined : `${id}-label`;
+    return (React__default.default.createElement("div", { key: id, className: `${settings.prefix}--bmrg-checkbox-list` },
+        labelValue && (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-checkbox-list__title` },
+            React__default.default.createElement("div", { id: labelTextId, className: `${settings.prefix}--label`, style: { marginBottom: ".3125rem" } }, labelValue),
+            tooltipContent && (React__default.default.createElement("div", { className: tooltipClassName },
+                React__default.default.createElement(TooltipHover.default, { ...tooltipProps, tooltipText: tooltipContent },
+                    React__default.default.createElement(icons.Information, { size: 16, fill: "currentColor" })))))),
+        helperText && React__default.default.createElement("div", { className: `${settings.prefix}--form__helper-text` }, helperText),
+        React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-checkbox-list__list` }, options.map((option) => {
+            const checked = selectedItems.some((item) => item === option.id);
+            return (React__default.default.createElement(react.Checkbox, { disabled: disabled, key: option.id, id: option.id, labelText: option.labelText, onChange: handleCheckboxChange, checked: checked, ...checkboxProps }));
+        }))));
 }
 
 exports.default = CheckboxListComponent;

package/dist/cjs/components/ComboBox/ComboBox.js

@@ -14,109 +14,109 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var cx__default = /*#__PURE__*/_interopDefault(cx);
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-function ComboBoxComponent({ disableClear = false, id, label, labelText, titleText, tooltipClassName = `${settings.prefix}--bmrg-select__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, onChange, onInputChange, shouldFilterItem, ...restComboBoxProps }) {
-    // Set the initial selected item to the label or single value passed
-    const selectedItemRef = React__default.default.useRef(restComboBoxProps.initialSelectedItem?.label ?? restComboBoxProps.initialSelectedItem);
-    const queryRef = React__default.default.useRef(selectedItemRef.current);
-    const [hasQuery, setHasQuery] = React__default.default.useState(false);
-    // Support several props for the label text
-    const labelValue = titleText || label || labelText;
-    /**
-     * The following three functions are to support a better ComboBox filtering experience
-     * than the default or passing a `shouldFilterItem` function. With the latter, if you have a selected item
-     * only that will be displayed if you do a naive filtering of the input.
-     * We want to:
-     * 1. Filter options based on the input text and plain value or label of the item
-     * 2. After selecting a value, show all options when opening the combobox without having to clear the selection
-     * 3. Filter the values when you enter a query with an item selected
-     */
-    /**
-     * Keep track of the selected value with a ref so it doesn' re-render and to ensure that
-     * onInputChange has a fresh value. `onChange` is called, then `onInputChange` when selecting an item
-     */
-    const defaultOnChange = React__default.default.useCallback(({ selectedItem }) => {
-        if (!selectedItem) {
-            selectedItemRef.current = selectedItem;
-        }
-        if (typeof selectedItem === "string" || typeof selectedItem === "number") {
-            selectedItemRef.current = selectedItem;
-        }
-        else {
-            selectedItemRef.current = selectedItem?.label;
-        }
-        // Additional check if the onInputChange function is not called
-        // Isn't triggered if the query value matches the selected one
-        if (queryRef.current === selectedItemRef.current) {
-            setHasQuery(false);
-        }
-        // Call consumer
-        if (onChange) {
-            onChange({ selectedItem });
-        }
-    }, [onChange]);
-    /**
-     * When an item is selected, the `onInputChange` handler is called with the value selected
-     * so it is difficult to disambiguate between a keydown event and a select event
-     * Take a simple approach here. If the selectedItem and input values match, there isn't a query
-     * If they don't, there is a query. We use this to determine if we should filter the values.
-     */
-    const defaultInputChange = (input) => {
-        queryRef.current = input;
-        if (input !== selectedItemRef.current) {
-            setHasQuery(true);
-        }
-        else {
-            setHasQuery(false);
-        }
-        // Call consumer
-        if (onInputChange) {
-            onInputChange(input);
-        }
-    };
-    /**
-     * Determine if I should filter the items or not
-     * Selected value and no query means show everything, otherwise filter based on the input
-     * No point in optimizing this because re-renders will only occur on query changes
-     * and we need fresh values on those events to determine how to filter
-     */
-    const defaultShouldFilterItem = ({ item, inputValue }) => {
-        if (selectedItemRef.current && !hasQuery) {
-            return true;
-        }
-        if (typeof item === "string" || typeof item === "number") {
-            return String(item).toLowerCase().includes(inputValue?.toLowerCase());
-        }
-        if (item && item.label) {
-            return String(item.label).toLowerCase().includes(inputValue?.toLowerCase());
-        }
-        return item;
-    };
-    /**
-     * If a function is passed, use that
-     * If a false or null value is explicitely passed, then use default filtering behavior in component
-     * Otherwise use our filtering logic as the new default
-     */
-    let finalShouldFilterItem;
-    if (typeof shouldFilterItem === "function") {
-        finalShouldFilterItem = shouldFilterItem;
-    }
-    else if (shouldFilterItem === false || shouldFilterItem === null) {
-        finalShouldFilterItem = undefined;
-    }
-    else {
-        finalShouldFilterItem = defaultShouldFilterItem;
-    }
-    return (React__default.default.createElement("div", { key: id, className: cx__default.default(`${settings.prefix}--bmrg-select`, { "--disableClear": disableClear }) },
-        React__default.default.createElement(react.ComboBox, { id: id, titleText: labelValue && (React__default.default.createElement("div", { style: { display: "flex" } },
-                React__default.default.createElement("div", null, titleText || labelText || label),
-                tooltipContent && (React__default.default.createElement("div", { className: tooltipClassName },
-                    React__default.default.createElement(TooltipHover.default, { ...tooltipProps, tooltipText: tooltipContent },
-                        React__default.default.createElement(icons.Information, { size: 16, fill: "currentColor" })))))), onChange: defaultOnChange, onInputChange: defaultInputChange, shouldFilterItem: finalShouldFilterItem, ...restComboBoxProps })));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+function ComboBoxComponent({ disableClear = false, id, label, labelText, titleText, tooltipClassName = `${settings.prefix}--bmrg-select__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, onChange, onInputChange, shouldFilterItem, ...restComboBoxProps }) {
+    // Set the initial selected item to the label or single value passed
+    const selectedItemRef = React__default.default.useRef(restComboBoxProps.initialSelectedItem?.label ?? restComboBoxProps.initialSelectedItem);
+    const queryRef = React__default.default.useRef(selectedItemRef.current);
+    const [hasQuery, setHasQuery] = React__default.default.useState(false);
+    // Support several props for the label text
+    const labelValue = titleText || label || labelText;
+    /**
+     * The following three functions are to support a better ComboBox filtering experience
+     * than the default or passing a `shouldFilterItem` function. With the latter, if you have a selected item
+     * only that will be displayed if you do a naive filtering of the input.
+     * We want to:
+     * 1. Filter options based on the input text and plain value or label of the item
+     * 2. After selecting a value, show all options when opening the combobox without having to clear the selection
+     * 3. Filter the values when you enter a query with an item selected
+     */
+    /**
+     * Keep track of the selected value with a ref so it doesn' re-render and to ensure that
+     * onInputChange has a fresh value. `onChange` is called, then `onInputChange` when selecting an item
+     */
+    const defaultOnChange = React__default.default.useCallback(({ selectedItem }) => {
+        if (!selectedItem) {
+            selectedItemRef.current = selectedItem;
+        }
+        if (typeof selectedItem === "string" || typeof selectedItem === "number") {
+            selectedItemRef.current = selectedItem;
+        }
+        else {
+            selectedItemRef.current = selectedItem?.label;
+        }
+        // Additional check if the onInputChange function is not called
+        // Isn't triggered if the query value matches the selected one
+        if (queryRef.current === selectedItemRef.current) {
+            setHasQuery(false);
+        }
+        // Call consumer
+        if (onChange) {
+            onChange({ selectedItem });
+        }
+    }, [onChange]);
+    /**
+     * When an item is selected, the `onInputChange` handler is called with the value selected
+     * so it is difficult to disambiguate between a keydown event and a select event
+     * Take a simple approach here. If the selectedItem and input values match, there isn't a query
+     * If they don't, there is a query. We use this to determine if we should filter the values.
+     */
+    const defaultInputChange = (input) => {
+        queryRef.current = input;
+        if (input !== selectedItemRef.current) {
+            setHasQuery(true);
+        }
+        else {
+            setHasQuery(false);
+        }
+        // Call consumer
+        if (onInputChange) {
+            onInputChange(input);
+        }
+    };
+    /**
+     * Determine if I should filter the items or not
+     * Selected value and no query means show everything, otherwise filter based on the input
+     * No point in optimizing this because re-renders will only occur on query changes
+     * and we need fresh values on those events to determine how to filter
+     */
+    const defaultShouldFilterItem = ({ item, inputValue }) => {
+        if (selectedItemRef.current && !hasQuery) {
+            return true;
+        }
+        if (typeof item === "string" || typeof item === "number") {
+            return String(item).toLowerCase().includes(inputValue?.toLowerCase());
+        }
+        if (item && item.label) {
+            return String(item.label).toLowerCase().includes(inputValue?.toLowerCase());
+        }
+        return item;
+    };
+    /**
+     * If a function is passed, use that
+     * If a false or null value is explicitely passed, then use default filtering behavior in component
+     * Otherwise use our filtering logic as the new default
+     */
+    let finalShouldFilterItem;
+    if (typeof shouldFilterItem === "function") {
+        finalShouldFilterItem = shouldFilterItem;
+    }
+    else if (shouldFilterItem === false || shouldFilterItem === null) {
+        finalShouldFilterItem = undefined;
+    }
+    else {
+        finalShouldFilterItem = defaultShouldFilterItem;
+    }
+    return (React__default.default.createElement("div", { key: id, className: cx__default.default(`${settings.prefix}--bmrg-select`, { "--disableClear": disableClear }) },
+        React__default.default.createElement(react.ComboBox, { id: id, titleText: labelValue && (React__default.default.createElement("div", { style: { display: "flex" } },
+                React__default.default.createElement("div", null, titleText || labelText || label),
+                tooltipContent && (React__default.default.createElement("div", { className: tooltipClassName },
+                    React__default.default.createElement(TooltipHover.default, { ...tooltipProps, tooltipText: tooltipContent },
+                        React__default.default.createElement(icons.Information, { size: 16, fill: "currentColor" })))))), onChange: defaultOnChange, onInputChange: defaultInputChange, shouldFilterItem: finalShouldFilterItem, ...restComboBoxProps })));
 }
 
 exports.default = ComboBoxComponent;

package/dist/cjs/components/ComboBoxMultiSelect/ComboBoxMultiSelect.js

@@ -14,38 +14,38 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var cx__default = /*#__PURE__*/_interopDefault(cx);
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-/**
- * For now we expect that if the prop value is a csv string,
- * then the items would be either in the key:value or value:label format.
- * The prop value would contain either the keys in the key:value or values in the value:label.
- */
-function getFilteredItems({ items, selectedItems }) {
-    return items.filter((item) => selectedItems.some((selectedItem) => selectedItem === item.key || selectedItem === item.value));
-}
-function ComboBoxMultiSelect({ disableClear = false, id, initialSelectedItems, items, label, labelText, selectedItems, titleText, tooltipClassName = `${settings.prefix}--bmrg-multi-select__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, ...multiSelectProps }) {
-    const labelValue = titleText || label || labelText;
-    let finalInitialSelectedItems = initialSelectedItems;
-    let finalSelectedItems = selectedItems;
-    /** Add support for csv strings */
-    if (typeof finalInitialSelectedItems === "string") {
-        const initialSelectedItemsArray = finalInitialSelectedItems.split(",");
-        finalInitialSelectedItems = getFilteredItems({ items, selectedItems: initialSelectedItemsArray });
-    }
-    if (typeof finalSelectedItems === "string") {
-        const selectedItemsArray = finalSelectedItems.split(",");
-        finalSelectedItems = getFilteredItems({ items, selectedItems: selectedItemsArray });
-    }
-    return (React__default.default.createElement("div", { key: id, className: cx__default.default(`${settings.prefix}--bmrg-multi-select`, { "--disableClear": disableClear }) },
-        React__default.default.createElement(MultiSelect.default, { id: id, titleText: labelValue && (React__default.default.createElement("div", { style: { display: "flex" } },
-                React__default.default.createElement("div", null, titleText || labelText || label),
-                tooltipContent && (React__default.default.createElement("div", { className: tooltipClassName },
-                    React__default.default.createElement(TooltipHover.default, { ...tooltipProps, tooltipText: tooltipContent },
-                        React__default.default.createElement(icons.Information, { size: 16, fill: "currentColor" })))))), initialSelectedItems: finalInitialSelectedItems, selectedItems: finalSelectedItems, items: items, ...multiSelectProps })));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+/**
+ * For now we expect that if the prop value is a csv string,
+ * then the items would be either in the key:value or value:label format.
+ * The prop value would contain either the keys in the key:value or values in the value:label.
+ */
+function getFilteredItems({ items, selectedItems }) {
+    return items.filter((item) => selectedItems.some((selectedItem) => selectedItem === item.key || selectedItem === item.value));
+}
+function ComboBoxMultiSelect({ disableClear = false, id, initialSelectedItems, items, label, labelText, selectedItems, titleText, tooltipClassName = `${settings.prefix}--bmrg-multi-select__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, ...multiSelectProps }) {
+    const labelValue = titleText || label || labelText;
+    let finalInitialSelectedItems = initialSelectedItems;
+    let finalSelectedItems = selectedItems;
+    /** Add support for csv strings */
+    if (typeof finalInitialSelectedItems === "string") {
+        const initialSelectedItemsArray = finalInitialSelectedItems.split(",");
+        finalInitialSelectedItems = getFilteredItems({ items, selectedItems: initialSelectedItemsArray });
+    }
+    if (typeof finalSelectedItems === "string") {
+        const selectedItemsArray = finalSelectedItems.split(",");
+        finalSelectedItems = getFilteredItems({ items, selectedItems: selectedItemsArray });
+    }
+    return (React__default.default.createElement("div", { key: id, className: cx__default.default(`${settings.prefix}--bmrg-multi-select`, { "--disableClear": disableClear }) },
+        React__default.default.createElement(MultiSelect.default, { id: id, titleText: labelValue && (React__default.default.createElement("div", { style: { display: "flex" } },
+                React__default.default.createElement("div", null, titleText || labelText || label),
+                tooltipContent && (React__default.default.createElement("div", { className: tooltipClassName },
+                    React__default.default.createElement(TooltipHover.default, { ...tooltipProps, tooltipText: tooltipContent },
+                        React__default.default.createElement(icons.Information, { size: 16, fill: "currentColor" })))))), initialSelectedItems: finalInitialSelectedItems, selectedItems: finalSelectedItems, items: items, ...multiSelectProps })));
 }
 
 exports.default = ComboBoxMultiSelect;