@carbon/react 1.22.0 → 1.23.0

package/es/components/NumberInput/NumberInput.js

@@ -127,11 +127,12 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
   var iconClasses = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--number__invalid"), normalizedProps.invalid || normalizedProps.warn), _defineProperty(_cx3, "".concat(prefix, "--number__invalid--warning"), normalizedProps.warn), _cx3));
 
   if (controlledValue !== prevControlledValue) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     setValue(controlledValue);
     setPrevControlledValue(controlledValue);
   }
 
-  var ariaDescribedBy = null;
+  var ariaDescribedBy = undefined;
 
   if (normalizedProps.invalid) {
     ariaDescribedBy = normalizedProps.invalidId;
@@ -158,7 +159,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
   }
 
   var handleFocus = function handleFocus(evt) {
-    if (evt.target.type === 'button') {
+    if ('type' in evt.target && evt.target.type === 'button') {
       setIsFocused(false);
     } else {
       setIsFocused(evt.type === 'focus' ? true : false);
@@ -166,10 +167,11 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
   };
 
   var outerElementClasses = cx("".concat(prefix, "--form-item"), (_cx4 = {}, _defineProperty(_cx4, customClassName, !!customClassName), _defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--invalid"), isFluid && normalizedProps.invalid), _defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--focus"), isFluid && isFocused), _defineProperty(_cx4, "".concat(prefix, "--number-input--fluid--disabled"), isFluid && disabled), _cx4));
+  var Icon = normalizedProps.icon;
   return /*#__PURE__*/React__default.createElement("div", {
     className: outerElementClasses,
-    onFocus: isFluid ? handleFocus : null,
-    onBlur: isFluid ? handleFocus : null
+    onFocus: isFluid ? handleFocus : undefined,
+    onBlur: isFluid ? handleFocus : undefined
   }, /*#__PURE__*/React__default.createElement("div", {
     className: numberInputClasses,
     "data-invalid": normalizedProps.invalid ? true : undefined
@@ -215,7 +217,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
     step: step,
     type: "number",
     value: value
-  })), normalizedProps.icon ? /*#__PURE__*/React__default.createElement(normalizedProps.icon, {
+  })), Icon ? /*#__PURE__*/React__default.createElement(Icon, {
     className: iconClasses
   }) : null, !hideSteppers && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--number__controls")
@@ -238,7 +240,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
         _onClick(event, state);
       }
     },
-    tabIndex: "-1",
+    tabIndex: -1,
     title: decrementNumLabel || iconDescription,
     type: "button"
   }, _Subtract || (_Subtract = /*#__PURE__*/React__default.createElement(Subtract, {
@@ -264,7 +266,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
         _onClick(event, state);
       }
     },
-    tabIndex: "-1",
+    tabIndex: -1,
     title: incrementNumLabel || iconDescription,
     type: "button"
   }, _Add || (_Add = /*#__PURE__*/React__default.createElement(Add, {

package/es/components/TextArea/TextArea.js

@@ -104,6 +104,7 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, fo
   useIsomorphicEffect(function () {
     if (other.cols) {
       textareaRef.current.style.width = null;
+      textareaRef.current.style.resize = 'none';
     } else {
       textareaRef.current.style.width = "100%";
     }

package/es/components/Toggle/Toggle.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { useControllableState } from '../../internal/useControllableState.js';
@@ -41,6 +41,7 @@ function Toggle(_ref) {
       other = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
+  var buttonElement = useRef(null);
 
   var _useControllableState = useControllableState({
     value: toggled,
@@ -69,37 +70,53 @@ function Toggle(_ref) {
   var labelTextClasses = cx("".concat(prefix, "--toggle__label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var appearanceClasses = cx("".concat(prefix, "--toggle__appearance"), _defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
   var switchClasses = cx("".concat(prefix, "--toggle__switch"), _defineProperty({}, "".concat(prefix, "--toggle__switch--checked"), checked));
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: wrapperClasses
-  }, /*#__PURE__*/React__default.createElement("button", _extends({}, other, {
-    id: id,
-    className: "".concat(prefix, "--toggle__button"),
-    role: "switch",
-    type: "button",
-    "aria-checked": checked,
-    "aria-labelledby": ariaLabelledby,
-    disabled: disabled,
-    onClick: handleClick
-  })), /*#__PURE__*/React__default.createElement(LabelComponent, {
-    htmlFor: ariaLabelledby ? null : id,
-    className: "".concat(prefix, "--toggle__label")
-  }, labelText && /*#__PURE__*/React__default.createElement("span", {
-    className: labelTextClasses
-  }, labelText), /*#__PURE__*/React__default.createElement("div", {
-    className: appearanceClasses
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: switchClasses
-  }, isSm && /*#__PURE__*/React__default.createElement("svg", {
-    className: "".concat(prefix, "--toggle__check"),
-    width: "6px",
-    height: "5px",
-    viewBox: "0 0 6 5"
-  }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
-    d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
-  })))), renderSideLabel && /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--toggle__text"),
-    "aria-hidden": "true"
-  }, sideLabel))));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React__default.createElement("div", {
+      className: wrapperClasses,
+      onClick: ariaLabelledby ? function (e) {
+        // the underlying <button> can only be activated by keyboard as it is visually hidden;
+        // therefore, if this event's target is the <button>, it had to be triggered by
+        // the keyboard event which already calls handleClick. if we wouldn't catch this, the
+        // onClick and onToggle functions would be called twice whenever the user activates the
+        // toggle by keyboard and props['aria-labelledby'] is passed.
+        if (buttonElement.current && e.target !== buttonElement.current) {
+          handleClick(e);
+          buttonElement.current.focus();
+        }
+      } : null
+    }, /*#__PURE__*/React__default.createElement("button", _extends({}, other, {
+      ref: buttonElement,
+      id: id,
+      className: "".concat(prefix, "--toggle__button"),
+      role: "switch",
+      type: "button",
+      "aria-checked": checked,
+      "aria-labelledby": ariaLabelledby,
+      disabled: disabled,
+      onClick: handleClick
+    })), /*#__PURE__*/React__default.createElement(LabelComponent, {
+      htmlFor: ariaLabelledby ? null : id,
+      className: "".concat(prefix, "--toggle__label")
+    }, labelText && /*#__PURE__*/React__default.createElement("span", {
+      className: labelTextClasses
+    }, labelText), /*#__PURE__*/React__default.createElement("div", {
+      className: appearanceClasses
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: switchClasses
+    }, isSm && /*#__PURE__*/React__default.createElement("svg", {
+      className: "".concat(prefix, "--toggle__check"),
+      width: "6px",
+      height: "5px",
+      viewBox: "0 0 6 5"
+    }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+      d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
+    })))), renderSideLabel && /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(prefix, "--toggle__text"),
+      "aria-hidden": "true"
+    }, sideLabel))))
+  );
 }
 Toggle.propTypes = {
   /**
@@ -123,7 +140,11 @@ Toggle.propTypes = {
   disabled: PropTypes.bool,
 
   /**
-   * Specify whether the label should be hidden, or not
+   * If true, the side labels (props.labelA and props.labelB) will be replaced by
+   * props.labelText, so that the toggle doesn't render a top label. In order to fully
+   * hide any labels, you can use props['aria-labelledby'] to refer to another element
+   * that labels the toggle. props.labelText would no longer be required in that case
+   * and can therefore be omitted.
    */
   hideLabel: PropTypes.bool,
 

package/es/components/Toggletip/index.js

@@ -102,10 +102,34 @@ function Toggletip(_ref2) {
 
   function onKeyDown(event) {
     if (open && match(event, Escape)) {
-      actions.close();
+      actions.close(); // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
+
+      var button = ref.current.children[0];
+
+      if (button && button.type === 'button') {
+        button.focus();
+      }
     }
   }
 
+  function handleBlur(event) {
+    // Do not close if the menu itself is clicked, should only close on focus out
+    if (open && event.relatedTarget === null) {
+      return;
+    }
+
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      // The menu should be closed when focus leaves the `Toggletip`  (#12922)
+      actions.close();
+    }
+  } // If the `Toggletip` is the last focusable item in the tab order, it shoudl also close when the browser window loses focus  (#12922)
+
+
+  useWindowEvent('blur', function () {
+    if (open) {
+      actions.close();
+    }
+  });
   useWindowEvent('click', function (event) {
     if (open && !ref.current.contains(event.target)) {
       actions.close();
@@ -122,6 +146,7 @@ function Toggletip(_ref2) {
     highContrast: true,
     open: open,
     onKeyDown: onKeyDown,
+    onBlur: handleBlur,
     ref: ref
   }, children));
 }

package/es/index.js

@@ -14,6 +14,11 @@ export { default as Dropdown } from './components/Dropdown/Dropdown.js';
 export { default as DropdownSkeleton } from './components/Dropdown/Dropdown.Skeleton.js';
 export { default as FluidForm } from './components/FluidForm/FluidForm.js';
 export { FormContext } from './components/FluidForm/FormContext.js';
+export { FlexGrid } from './components/Grid/FlexGrid.js';
+export { Grid } from './components/Grid/Grid.js';
+export { default as Row } from './components/Grid/Row.js';
+export { default as Column } from './components/Grid/Column.js';
+export { ColumnHang } from './components/Grid/ColumnHang.js';
 export { IdPrefix } from './components/IdPrefix/index.js';
 export { default as OverflowMenu } from './components/OverflowMenu/index.js';
 export { default as Slider } from './components/Slider/index.js';
@@ -70,8 +75,6 @@ export { default as FileUploaderDropContainer } from './components/FileUploader/
 export { default as FileUploaderItem } from './components/FileUploader/FileUploaderItem.js';
 export { default as FormItem } from './components/FormItem/FormItem.js';
 export { default as FormLabel } from './components/FormLabel/FormLabel.js';
-export { default as Row } from './components/Grid/Row.js';
-export { default as Column } from './components/Grid/Column.js';
 export { default as InlineLoading } from './components/InlineLoading/InlineLoading.js';
 export { default as Loading } from './components/Loading/Loading.js';
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
@@ -150,9 +153,6 @@ export { default as FileUploader } from './components/FileUploader/FileUploader.
 export { default as FilterableMultiSelect } from './components/MultiSelect/FilterableMultiSelect.js';
 export { default as Form } from './components/Form/Form.js';
 export { default as FormGroup } from './components/FormGroup/FormGroup.js';
-export { FlexGrid } from './components/Grid/FlexGrid.js';
-export { Grid } from './components/Grid/Grid.js';
-export { ColumnHang } from './components/Grid/ColumnHang.js';
 export { default as Link } from './components/Link/Link.js';
 export { default as ListItem } from './components/ListItem/ListItem.js';
 export { default as Modal } from './components/Modal/Modal.js';

package/es/internal/useNormalizedInputProps.js

@@ -12,12 +12,12 @@ import { usePrefix } from './usePrefix.js';
 /**
  * @typedef {object} InputProps
  * @property {string} id - The input's id
- * @property {boolean} readOnly - Whether the input should be readonly
+ * @property {boolean | undefined} readOnly - Whether the input should be readonly
  * @property {boolean} disabled - Whether the input should be disabled
  * @property {boolean} invalid - Whether the input should be marked as invalid
- * @property {string} invalidText - The validation message displayed in case the input is considered invalid
+ * @property {React.ReactNode | undefined} invalidText - The validation message displayed in case the input is considered invalid
  * @property {boolean} warn - Whether the input should be in warning state
- * @property {string} warnText - The validation message displayed in case the input is in warning state
+ * @property {React.ReactNode | undefined} warnText - The validation message displayed in case the input is in warning state
  */
 
 /**

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
-var polyfilled = require('../../node_modules/use-resize-observer/polyfilled.js');
+var useResizeObserver = require('use-resize-observer/polyfilled');
 var iconsReact = require('@carbon/icons-react');
 var Copy = require('../Copy/Copy.js');
 var Button = require('../Button/Button.js');
@@ -28,6 +28,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var useResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(useResizeObserver);
 var copy__default = /*#__PURE__*/_interopDefaultLegacy(copy);
 
 var _excluded = ["className", "type", "children", "disabled", "feedback", "feedbackTimeout", "onClick", "ariaLabel", "copyText", "copyButtonDescription", "light", "showMoreText", "showLessText", "hideCopyButton", "wrapText", "maxCollapsedNumberOfRows", "maxExpandedNumberOfRows", "minCollapsedNumberOfRows", "minExpandedNumberOfRows"];
@@ -128,7 +129,7 @@ function CodeSnippet(_ref) {
     setHasLeftOverflow(horizontalOverflow && !!codeScrollLeft);
     setHasRightOverflow(horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth);
   }, [type, getCodeRefDimensions]);
-  polyfilled["default"]({
+  useResizeObserver__default["default"]({
     ref: getCodeRef(),
     onResize: function onResize() {
       if (codeContentRef !== null && codeContentRef !== void 0 && codeContentRef.current && type === 'multi') {
@@ -150,7 +151,7 @@ function CodeSnippet(_ref) {
         handleScroll();
       }
     }
-  });
+  }, [type, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, minExpandedNumberOfRows, rowHeightInPixels]);
   React.useEffect(function () {
     handleScroll();
   }, [handleScroll]);

package/lib/components/ComboBox/ComboBox.d.ts

@@ -0,0 +1,151 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import Downshift from 'downshift';
+import { ReactNodeLike } from 'prop-types';
+import React from 'react';
+import { ListBoxType, ListBoxSize } from '../ListBox';
+type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
+export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * 'aria-label' of the ListBox component.
+     */
+    ariaLabel?: string;
+    /**
+     * An optional className to add to the container node
+     */
+    className?: string;
+    /**
+     * Specify the direction of the combobox dropdown. Can be either top or bottom.
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Specify if the control should be disabled, or not
+     */
+    disabled?: boolean;
+    /**
+     * Additional props passed to Downshift
+     */
+    downshiftProps?: React.ComponentProps<typeof Downshift>;
+    /**
+     * Provide helper text that is used alongside the control label for
+     * additional help
+     */
+    helperText?: string;
+    /**
+     * Specify a custom `id` for the input
+     */
+    id: string;
+    /**
+     * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+     * from their collection that are pre-selected
+     */
+    initialSelectedItem?: object | string | number;
+    /**
+     * Specify if the currently selected value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText?: ReactNodeLike;
+    /**
+     * Optional function to render items as custom components instead of strings.
+     * Defaults to null and is overridden by a getter
+     */
+    itemToElement?: React.ComponentType | null;
+    /**
+     * Helper function passed to downshift that allows the library to render a
+     * given item to a string label. By default, it extracts the `label` field
+     * from a given item to serve as the item label in the list
+     */
+    itemToString?: (item: unknown) => string;
+    /**
+     * We try to stay as generic as possible here to allow individuals to pass
+     * in a collection of whatever kind of data structure they prefer
+     */
+    items: (object | string | number)[];
+    /**
+     * @deprecated
+     * should use "light theme" (white background)?
+     */
+    light?: boolean;
+    /**
+     * `onChange` is a utility for this controlled component to communicate to a
+     * consuming component when a specific dropdown item is selected.
+     * `({ selectedItem }) => void`
+    //  * @param {{ selectedItem }}
+     */
+    onChange: (data: {
+        selectedItem: any;
+    }) => void;
+    /**
+     * Callback function to notify consumer when the text input changes.
+     * This provides support to change available items based on the text.
+     * `(inputText) => void`
+     * @param {string} inputText
+     */
+    onInputChange?: (inputText: string) => void;
+    /**
+     * Helper function passed to Downshift that allows the user to observe internal
+     * state changes
+     * `(changes, stateAndHelpers) => void`
+     */
+    onStateChange?: (changes: object, stateAndHelpers: object) => void;
+    /**
+     * Callback function that fires when the combobox menu toggle is clicked
+     * `(evt) => void`
+     * @param {MouseEvent} event
+     */
+    onToggleClick?: (evt: MouseEvent) => void;
+    /**
+     * Used to provide a placeholder text node before a user enters any input.
+     * This is only present if the control has no items selected
+     */
+    placeholder?: string;
+    /**
+     * Is the ComboBox readonly?
+     */
+    readOnly?: boolean;
+    /**
+     * For full control of the selection
+     */
+    selectedItem?: object | string | number;
+    /**
+     * Specify your own filtering logic by passing in a `shouldFilterItem`
+     * function that takes in the current input and an item and passes back
+     * whether or not the item should be filtered.
+     */
+    shouldFilterItem?: (input: any) => boolean;
+    /**
+     * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
+     */
+    size?: ListBoxSize;
+    /**
+     * Provide text to be used in a `<label>` element that is tied to the
+     * combobox via ARIA attributes.
+     */
+    titleText?: ReactNodeLike;
+    /**
+     * Specify a custom translation function that takes in a message identifier
+     * and returns the localized string for the message
+     */
+    translateWithId?: (id: any) => string;
+    /**
+     * Currently supports either the default type, or an inline variant
+     */
+    type?: ListBoxType;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNodeLike;
+}
+declare const ComboBox: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<unknown>>;
+export default ComboBox;

package/lib/components/ComboBox/ComboBox.js

@@ -71,7 +71,8 @@ var getInputValue = function getInputValue(_ref) {
 
 var findHighlightedIndex = function findHighlightedIndex(_ref2, inputValue) {
   var items = _ref2.items,
-      itemToString = _ref2.itemToString;
+      _ref2$itemToString = _ref2.itemToString,
+      itemToString = _ref2$itemToString === void 0 ? defaultItemToString : _ref2$itemToString;
 
   if (!inputValue) {
     return -1;
@@ -80,9 +81,9 @@ var findHighlightedIndex = function findHighlightedIndex(_ref2, inputValue) {
   var searchValue = inputValue.toLowerCase();
 
   for (var i = 0; i < items.length; i++) {
-    var item = itemToString(items[i]).toLowerCase();
+    var _item = itemToString(items[i]).toLowerCase();
 
-    if (item.indexOf(searchValue) !== -1) {
+    if (_item.indexOf(searchValue) !== -1) {
       return i;
     }
   }
@@ -92,7 +93,7 @@ var findHighlightedIndex = function findHighlightedIndex(_ref2, inputValue) {
 
 var getInstanceId = setupGetInstanceId["default"]();
 var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-  var _cx, _ref4, _Text;
+  var _cx, _ref4, _cx4, _Text;
 
   var ariaLabel = props.ariaLabel,
       containerClassName = props.className,
@@ -129,7 +130,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
   var _useContext = React.useContext(FormContext.FormContext),
       isFluid = _useContext.isFluid;
 
-  var textInput = React.useRef();
+  var textInput = React.useRef(null);
   var comboBoxInstanceId = getInstanceId();
 
   var _useState = React.useState(getInputValue({
@@ -147,12 +148,12 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       isFocused = _useState4[0],
       setIsFocused = _useState4[1];
 
-  var _useState5 = React.useState(null),
+  var _useState5 = React.useState(),
       _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
       prevSelectedItem = _useState6[0],
       setPrevSelectedItem = _useState6[1];
 
-  var _useState7 = React.useState(null),
+  var _useState7 = React.useState(false),
       _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
       doneInitialSelectedItem = _useState8[0],
       setDoneInitialSelectedItem = _useState8[1];
@@ -172,11 +173,11 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
 
   var filterItems = function filterItems(items, itemToString, inputValue) {
     return items.filter(function (item) {
-      return shouldFilterItem({
+      return shouldFilterItem ? shouldFilterItem({
         item: item,
         itemToString: itemToString,
         inputValue: inputValue
-      });
+      }) : defaultShouldFilterItem();
     });
   };
 
@@ -239,7 +240,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
   var comboBoxHelperId = !helperText ? undefined : "combobox-helper-text-".concat(comboBoxInstanceId);
   var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
   var wrapperClasses = cx__default["default"]("".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null, (_ref4 = {}, _rollupPluginBabelHelpers.defineProperty(_ref4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_ref4, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused), _ref4)]);
-  var inputClasses = cx__default["default"]("".concat(prefix, "--text-input"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input--empty"), !inputValue)); // needs to be Capitalized for react to render it correctly
+  var inputClasses = cx__default["default"]("".concat(prefix, "--text-input"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--text-input--empty"), !inputValue), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--combo-box--input--focus"), isFocused && !isFluid), _cx4)); // needs to be Capitalized for react to render it correctly
 
   var ItemToElement = itemToElement;
   return /*#__PURE__*/React__default["default"].createElement(Downshift__default["default"], _rollupPluginBabelHelpers["extends"]({}, downshiftProps, {
@@ -275,7 +276,8 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
         highlightedIndex = _ref5.highlightedIndex,
         clearSelection = _ref5.clearSelection,
         toggleMenu = _ref5.toggleMenu;
-    var rootProps = getRootProps({}, {
+    var rootProps = getRootProps( // @ts-ignore this is not supposed to be a required property
+    {}, {
       suppressRefError: true
     });
     var labelProps = getLabelProps();
@@ -317,11 +319,7 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
     });
 
     var handleFocus = function handleFocus(evt) {
-      if (evt.target.type === 'button') {
-        setIsFocused(false);
-      } else {
-        setIsFocused(evt.type === 'focus' ? true : false);
-      }
+      setIsFocused(evt.type === 'focus');
     };
 
     var readOnlyEventHandlers = readOnly ? {
@@ -373,7 +371,8 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       clearSelection: clearSelection,
       translateWithId: translateWithId,
       disabled: disabled || readOnly,
-      onClearSelection: handleSelectionClear
+      onClearSelection: handleSelectionClear,
+      selectionCount: 0
     }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
       isOpen: isOpen,
       translateWithId: translateWithId
@@ -385,15 +384,18 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       var itemProps = getItemProps((_getItemProps = {
         item: item,
         index: index
-      }, _rollupPluginBabelHelpers.defineProperty(_getItemProps, 'aria-current', selectedItem === item ? true : null), _rollupPluginBabelHelpers.defineProperty(_getItemProps, 'aria-selected', highlightedIndex === index ? true : null), _rollupPluginBabelHelpers.defineProperty(_getItemProps, "disabled", item.disabled), _getItemProps));
+      }, _rollupPluginBabelHelpers.defineProperty(_getItemProps, 'aria-current', selectedItem === item ? 'true' : 'false'), _rollupPluginBabelHelpers.defineProperty(_getItemProps, 'aria-selected', highlightedIndex === index ? 'true' : 'false'), _rollupPluginBabelHelpers.defineProperty(_getItemProps, "disabled", item.disabled), _getItemProps));
       return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
         key: itemProps.id,
         isActive: selectedItem === item,
         isHighlighted: highlightedIndex === index || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || false,
-        title: itemToElement ? item.text : itemToString(item)
-      }, itemProps), itemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
+        title: itemToElement ? item.text : itemToString ? itemToString(item) : undefined
+      }, itemProps), itemToElement ?
+      /*#__PURE__*/
+      // @ts-ignore
+      React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
         key: itemProps.id
-      }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {
+      }, item)) : itemToString ? itemToString(item) : defaultItemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {
         className: "".concat(prefix, "--list-box__menu-item__selected-icon")
       }));
     }) : null)), helperText && !invalid && !warn && !isFluid && (_Text || (_Text = /*#__PURE__*/React__default["default"].createElement(Text.Text, {
@@ -428,6 +430,7 @@ ComboBox.propTypes = {
   /**
    * Additional props passed to Downshift
    */
+  // @ts-ignore
   downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
 
   /**
@@ -484,6 +487,7 @@ ComboBox.propTypes = {
   /**
    * `onChange` is a utility for this controlled component to communicate to a
    * consuming component when a specific dropdown item is selected.
+   * `({ selectedItem }) => void`
    * @param {{ selectedItem }}
    */
   onChange: PropTypes__default["default"].func.isRequired,
@@ -491,6 +495,7 @@ ComboBox.propTypes = {
   /**
    * Callback function to notify consumer when the text input changes.
    * This provides support to change available items based on the text.
+   * `(inputText) => void`
    * @param {string} inputText
    */
   onInputChange: PropTypes__default["default"].func,
@@ -498,11 +503,13 @@ ComboBox.propTypes = {
   /**
    * Helper function passed to Downshift that allows the user to observe internal
    * state changes
+   * `(changes, stateAndHelpers) => void`
    */
   onStateChange: PropTypes__default["default"].func,
 
   /**
    * Callback function that fires when the combobox menu toggle is clicked
+   * `(evt) => void`
    * @param {MouseEvent} event
    */
   onToggleClick: PropTypes__default["default"].func,

package/lib/components/ComposedModal/ComposedModal.js

@@ -104,7 +104,7 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
     onKeyDown(evt);
   }
 
-  function handleClick(evt) {
+  function handleMousedown(evt) {
     if (!innerModal.current.contains(evt.target) && preventCloseOnClickOutside) {
       return;
     }
@@ -204,7 +204,7 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
     ref: ref,
     "aria-hidden": !open,
     onBlur: handleBlur,
-    onClick: handleClick,
+    onMouseDown: handleMousedown,
     onKeyDown: handleKeyDown,
     className: modalClass,
     tabIndex: "-1"