@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/Dropdown/Dropdown.Skeleton.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
@@ -13,21 +13,22 @@ import '../ListBox/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 
-var _excluded = ["className", "size"];
-
-var DropdownSkeleton = function DropdownSkeleton(_ref) {
-  var className = _ref.className,
-      size = _ref.size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var wrapperClasses = cx(className, "".concat(prefix, "--skeleton"), "".concat(prefix, "--dropdown-v2"), "".concat(prefix, "--list-box"), "".concat(prefix, "--form-item"), _defineProperty({}, "".concat(prefix, "--list-box--").concat(size), size));
+const DropdownSkeleton = _ref => {
+  let {
+    className,
+    size,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const wrapperClasses = cx(className, `${prefix}--skeleton`, `${prefix}--dropdown-v2`, `${prefix}--list-box`, `${prefix}--form-item`, {
+    [`${prefix}--list-box--${size}`]: size
+  });
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: wrapperClasses
   }, rest), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--list-box__field")
+    className: `${prefix}--list-box__field`
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--list-box__label")
+    className: `${prefix}--list-box__label`
   })));
 };
 

package/es/components/Dropdown/Dropdown.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, typeof as _typeof, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useRef, useState } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
@@ -21,134 +21,144 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
-var _Dropdown$propTypes;
+const getInstanceId = setupGetInstanceId();
 
-var _excluded = ["className", "disabled", "direction", "items", "label", "aria-label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps", "readOnly"];
-var getInstanceId = setupGetInstanceId();
-
-var defaultItemToString = function defaultItemToString(item) {
+const defaultItemToString = item => {
   if (typeof item === 'string') {
     return item;
   }
 
   if (typeof item === 'number') {
-    return "".concat(item);
+    return `${item}`;
   }
 
-  if (item !== null && _typeof(item) === 'object' && 'label' in item && typeof item['label'] === 'string') {
+  if (item !== null && typeof item === 'object' && 'label' in item && typeof item['label'] === 'string') {
     return item['label'];
   }
 
   return '';
 };
 
-var Dropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _cx, _cx2, _cx4;
-
-  var containerClassName = _ref.className,
-      disabled = _ref.disabled,
-      direction = _ref.direction,
-      items = _ref.items,
-      label = _ref.label,
-      ariaLabel = _ref['aria-label'],
-      deprecatedAriaLabel = _ref.ariaLabel,
-      _ref$itemToString = _ref.itemToString,
-      itemToString = _ref$itemToString === void 0 ? defaultItemToString : _ref$itemToString,
-      itemToElement = _ref.itemToElement,
-      renderSelectedItem = _ref.renderSelectedItem,
-      type = _ref.type,
-      size = _ref.size,
-      onChange = _ref.onChange,
-      id = _ref.id,
-      titleText = _ref.titleText,
-      hideLabel = _ref.hideLabel,
-      helperText = _ref.helperText,
-      translateWithId = _ref.translateWithId,
-      light = _ref.light,
-      invalid = _ref.invalid,
-      invalidText = _ref.invalidText,
-      warn = _ref.warn,
-      warnText = _ref.warnText,
-      initialSelectedItem = _ref.initialSelectedItem,
-      controlledSelectedItem = _ref.selectedItem,
-      downshiftProps = _ref.downshiftProps,
-      readOnly = _ref.readOnly,
-      other = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-
-  var _useContext = useContext(FormContext),
-      isFluid = _useContext.isFluid;
-
-  var selectProps = _objectSpread2(_objectSpread2({}, downshiftProps), {}, {
-    items: items,
-    itemToString: itemToString,
-    initialSelectedItem: initialSelectedItem,
-    onSelectedItemChange: onSelectedItemChange
-  });
-
-  var _useRef = useRef(getInstanceId()),
-      dropdownInstanceId = _useRef.current; // only set selectedItem if the prop is defined. Setting if it is undefined
+const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    className: containerClassName,
+    disabled,
+    direction,
+    items,
+    label,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
+    itemToString = defaultItemToString,
+    itemToElement,
+    renderSelectedItem,
+    type,
+    size,
+    onChange,
+    id,
+    titleText,
+    hideLabel,
+    helperText,
+    translateWithId,
+    light,
+    invalid,
+    invalidText,
+    warn,
+    warnText,
+    initialSelectedItem,
+    selectedItem: controlledSelectedItem,
+    downshiftProps,
+    readOnly,
+    ...other
+  } = _ref;
+  const prefix = usePrefix();
+  const {
+    isFluid
+  } = useContext(FormContext);
+  const selectProps = { ...downshiftProps,
+    items,
+    itemToString,
+    initialSelectedItem,
+    onSelectedItemChange
+  };
+  const {
+    current: dropdownInstanceId
+  } = useRef(getInstanceId()); // only set selectedItem if the prop is defined. Setting if it is undefined
   // will overwrite default selected items from useSelect
 
-
   if (controlledSelectedItem !== undefined) {
     selectProps.selectedItem = controlledSelectedItem;
   }
 
-  var _useSelect = useSelect(selectProps),
-      isOpen = _useSelect.isOpen,
-      getToggleButtonProps = _useSelect.getToggleButtonProps,
-      getLabelProps = _useSelect.getLabelProps,
-      getMenuProps = _useSelect.getMenuProps,
-      getItemProps = _useSelect.getItemProps,
-      highlightedIndex = _useSelect.highlightedIndex,
-      selectedItem = _useSelect.selectedItem;
-
-  var inline = type === 'inline';
-  var showWarning = !invalid && warn;
-  var enabled = useFeatureFlag('enable-v11-release');
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var className = cx("".concat(prefix, "--dropdown"), [enabled ? null : containerClassName], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--dropdown--invalid"), invalid), _defineProperty(_cx, "".concat(prefix, "--dropdown--warning"), showWarning), _defineProperty(_cx, "".concat(prefix, "--dropdown--open"), isOpen), _defineProperty(_cx, "".concat(prefix, "--dropdown--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--dropdown--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--dropdown--light"), light), _defineProperty(_cx, "".concat(prefix, "--dropdown--readonly"), readOnly), _defineProperty(_cx, "".concat(prefix, "--dropdown--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
-  var titleClasses = cx("".concat(prefix, "--label"), (_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
-  var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var wrapperClasses = cx("".concat(prefix, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused && !isOpen), _cx4));
-  var helperId = !helperText ? undefined : "dropdown-helper-text-".concat(dropdownInstanceId); // needs to be Capitalized for react to render it correctly
-
-  var ItemToElement = itemToElement;
-  var toggleButtonProps = getToggleButtonProps();
-  var helper = helperText && !isFluid ? /*#__PURE__*/React__default.createElement("div", {
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem
+  } = useSelect(selectProps);
+  const inline = type === 'inline';
+  const showWarning = !invalid && warn;
+  const enabled = useFeatureFlag('enable-v11-release');
+  const [isFocused, setIsFocused] = useState(false);
+  const className = cx(`${prefix}--dropdown`, [enabled ? null : containerClassName], {
+    [`${prefix}--dropdown--invalid`]: invalid,
+    [`${prefix}--dropdown--warning`]: showWarning,
+    [`${prefix}--dropdown--open`]: isOpen,
+    [`${prefix}--dropdown--inline`]: inline,
+    [`${prefix}--dropdown--disabled`]: disabled,
+    [`${prefix}--dropdown--light`]: light,
+    [`${prefix}--dropdown--readonly`]: readOnly,
+    [`${prefix}--dropdown--${size}`]: size,
+    [`${prefix}--list-box--up`]: direction === 'top'
+  });
+  const titleClasses = cx(`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--visually-hidden`]: hideLabel
+  });
+  const helperClasses = cx(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
+  const wrapperClasses = cx(`${prefix}--dropdown__wrapper`, `${prefix}--list-box__wrapper`, [enabled ? containerClassName : null], {
+    [`${prefix}--dropdown__wrapper--inline`]: inline,
+    [`${prefix}--list-box__wrapper--inline`]: inline,
+    [`${prefix}--dropdown__wrapper--inline--invalid`]: inline && invalid,
+    [`${prefix}--list-box__wrapper--inline--invalid`]: inline && invalid,
+    [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
+    [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused && !isOpen
+  });
+  const helperId = !helperText ? undefined : `dropdown-helper-text-${dropdownInstanceId}`; // needs to be Capitalized for react to render it correctly
+
+  const ItemToElement = itemToElement;
+  const toggleButtonProps = getToggleButtonProps();
+  const helper = helperText && !isFluid ? /*#__PURE__*/React__default.createElement("div", {
     id: helperId,
     className: helperClasses
   }, helperText) : null;
 
   function onSelectedItemChange(_ref2) {
-    var selectedItem = _ref2.selectedItem;
+    let {
+      selectedItem
+    } = _ref2;
     setIsFocused(false);
 
     if (onChange) {
       onChange({
-        selectedItem: selectedItem !== null && selectedItem !== void 0 ? selectedItem : null
+        selectedItem: selectedItem ?? null
       });
     }
   }
 
-  var menuItemOptionRefs = useRef(items.map(function (_) {
-    return /*#__PURE__*/React__default.createRef();
-  }));
+  const menuItemOptionRefs = useRef(items.map(_ => /*#__PURE__*/React__default.createRef()));
 
-  var handleFocus = function handleFocus(evt) {
+  const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
   };
 
-  var mergedRef = mergeRefs(toggleButtonProps.ref, ref);
-  var readOnlyEventHandlers = readOnly ? {
-    onClick: function onClick(evt) {
+  const mergedRef = mergeRefs(toggleButtonProps.ref, ref);
+  const readOnlyEventHandlers = readOnly ? {
+    onClick: evt => {
       // NOTE: does not prevent click
       evt.preventDefault(); // focus on the element as per readonly input behavior
 
@@ -156,8 +166,8 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         mergedRef.current.focus();
       }
     },
-    onKeyDown: function onKeyDown(evt) {
-      var selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter']; // This prevents the select from opening for the above keys
+    onKeyDown: evt => {
+      const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter']; // This prevents the select from opening for the above keys
 
       if (selectAccessKeys.includes(evt.key)) {
         evt.preventDefault();
@@ -182,16 +192,16 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     isOpen: isOpen,
     id: id
   }, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
-    className: "".concat(prefix, "--list-box__invalid-icon")
+    className: `${prefix}--list-box__invalid-icon`
   }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
-    className: "".concat(prefix, "--list-box__invalid-icon ").concat(prefix, "--list-box__invalid-icon--warning")
+    className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button" // aria-expanded is already being passed through {...toggleButtonProps}
     ,
     role: "combobox" // eslint-disable-line jsx-a11y/role-has-required-aria-props
     ,
     "aria-controls": getMenuProps().id,
-    className: "".concat(prefix, "--list-box__field"),
+    className: `${prefix}--list-box__field`,
     disabled: disabled,
     "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
     ,
@@ -200,19 +210,19 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, toggleButtonProps, readOnlyEventHandlers, {
     ref: mergedRef
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--list-box__label")
+    className: `${prefix}--list-box__label`
   }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps(), isOpen && items.map(function (item, index) {
-    var isObject = item !== null && _typeof(item) === 'object';
-    var disabled = isObject && 'disabled' in item && item.disabled === true;
-    var itemProps = getItemProps({
-      item: item,
-      index: index,
-      disabled: disabled
+  })), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps(), isOpen && items.map((item, index) => {
+    const isObject = item !== null && typeof item === 'object';
+    const disabled = isObject && 'disabled' in item && item.disabled === true;
+    const itemProps = getItemProps({
+      item,
+      index,
+      disabled
     });
-    var title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
+    const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
     return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
       key: itemProps.id,
       isActive: selectedItem === item,
@@ -221,15 +231,162 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       ref: {
         menuItemOptionRef: menuItemOptionRefs.current[index]
       }
-    }, itemProps), _typeof(item) === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
+    }, itemProps), typeof item === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
       key: itemProps.id
     }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default.createElement(Checkmark, {
-      className: "".concat(prefix, "--list-box__menu-item__selected-icon")
+      className: `${prefix}--list-box__menu-item__selected-icon`
     }));
   }))), !inline && !invalid && !warn && helper);
 });
 Dropdown.displayName = 'Dropdown';
-Dropdown.propTypes = (_Dropdown$propTypes = {}, _defineProperty(_Dropdown$propTypes, 'aria-label', PropTypes.string), _defineProperty(_Dropdown$propTypes, "ariaLabel", deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _defineProperty(_Dropdown$propTypes, "className", PropTypes.string), _defineProperty(_Dropdown$propTypes, "direction", PropTypes.oneOf(['top', 'bottom'])), _defineProperty(_Dropdown$propTypes, "disabled", PropTypes.bool), _defineProperty(_Dropdown$propTypes, "downshiftProps", PropTypes.object), _defineProperty(_Dropdown$propTypes, "helperText", PropTypes.node), _defineProperty(_Dropdown$propTypes, "hideLabel", PropTypes.bool), _defineProperty(_Dropdown$propTypes, "id", PropTypes.string.isRequired), _defineProperty(_Dropdown$propTypes, "initialSelectedItem", PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number])), _defineProperty(_Dropdown$propTypes, "invalid", PropTypes.bool), _defineProperty(_Dropdown$propTypes, "invalidText", PropTypes.node), _defineProperty(_Dropdown$propTypes, "itemToElement", PropTypes.func), _defineProperty(_Dropdown$propTypes, "itemToString", PropTypes.func), _defineProperty(_Dropdown$propTypes, "items", PropTypes.array.isRequired), _defineProperty(_Dropdown$propTypes, "label", PropTypes.node.isRequired), _defineProperty(_Dropdown$propTypes, "light", deprecate(PropTypes.bool, 'The `light` prop for `Dropdown` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.')), _defineProperty(_Dropdown$propTypes, "onChange", PropTypes.func), _defineProperty(_Dropdown$propTypes, "readOnly", PropTypes.bool), _defineProperty(_Dropdown$propTypes, "renderSelectedItem", PropTypes.func), _defineProperty(_Dropdown$propTypes, "selectedItem", PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number])), _defineProperty(_Dropdown$propTypes, "size", ListBoxSize), _defineProperty(_Dropdown$propTypes, "titleText", PropTypes.node.isRequired), _defineProperty(_Dropdown$propTypes, "translateWithId", PropTypes.func), _defineProperty(_Dropdown$propTypes, "type", ListBoxType), _defineProperty(_Dropdown$propTypes, "warn", PropTypes.bool), _defineProperty(_Dropdown$propTypes, "warnText", PropTypes.node), _Dropdown$propTypes);
+Dropdown.propTypes = {
+  /**
+   * 'aria-label' of the ListBox component.
+   * Specify a label to be read by screen readers on the container node
+   */
+  ['aria-label']: PropTypes.string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the container note.
+   */
+  ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+
+  /**
+   * Provide a custom className to be applied on the bx--dropdown node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the direction of the dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes.oneOf(['top', 'bottom']),
+
+  /**
+   * Disable the control
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Additional props passed to Downshift
+   */
+  downshiftProps: PropTypes.object,
+
+  /**
+   * Provide helper text that is used alongside the control label for
+   * additional help
+   */
+  helperText: PropTypes.node,
+
+  /**
+   * Specify whether the title text should be hidden or not
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Specify a custom `id`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * 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: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify if the currently selected value is invalid.
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Function to render items as custom components instead of strings.
+   * Defaults to null and is overridden by a getter
+   */
+  itemToElement: PropTypes.func,
+
+  /**
+   * 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: PropTypes.func,
+
+  /**
+   * 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: PropTypes.array.isRequired,
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes.node.isRequired,
+
+  /**
+   * `true` to use the light version.
+   */
+  light: deprecate(PropTypes.bool, 'The `light` prop for `Dropdown` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
+
+  /**
+   * `onChange` is a utility for this controlled component to communicate to a
+   * consuming component what kind of internal state changes are occurring.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes.bool,
+
+  /**
+   * An optional callback to render the currently selected item as a react element instead of only
+   * as a string.
+   */
+  renderSelectedItem: PropTypes.func,
+
+  /**
+   * In the case you want to control the dropdown selection entirely.
+   */
+  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
+   */
+  size: ListBoxSize,
+
+  /**
+   * Provide the title text that will be read by a screen reader when
+   * visiting this control
+   */
+  titleText: PropTypes.node.isRequired,
+
+  /**
+   * Callback function for translating ListBoxMenuIcon SVG title
+   */
+  translateWithId: PropTypes.func,
+
+  /**
+   * The dropdown type, `default` or `inline`
+   */
+  type: ListBoxType,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
+};
 Dropdown.defaultProps = {
   disabled: false,
   type: 'default',

package/es/components/ErrorBoundary/ErrorBoundary.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import { ErrorBoundaryContext } from './ErrorBoundaryContext.js';
@@ -28,63 +28,42 @@ import { ErrorBoundaryContext } from './ErrorBoundaryContext.js';
  * https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries
  */
 
-var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
-  _inherits(ErrorBoundary, _React$Component);
+class ErrorBoundary extends React__default.Component {
+  constructor() {
+    super(...arguments);
 
-  var _super = _createSuper(ErrorBoundary);
-
-  function ErrorBoundary() {
-    var _this;
-
-    _classCallCheck(this, ErrorBoundary);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    _defineProperty(this, "state", {
       hasError: false
     });
+  }
 
-    return _this;
+  static getDerivedStateFromError() {
+    return {
+      hasError: true
+    };
   }
 
-  _createClass(ErrorBoundary, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error, info) {
-      this.context.log(error, info);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.children !== this.props.children) {
-        this.setState({
-          hasError: false
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      if (this.state.hasError) {
-        return this.props.fallback;
-      }
+  componentDidCatch(error, info) {
+    this.context.log(error, info);
+  }
 
-      return this.props.children;
+  componentDidUpdate(prevProps) {
+    if (prevProps.children !== this.props.children) {
+      this.setState({
+        hasError: false
+      });
     }
-  }], [{
-    key: "getDerivedStateFromError",
-    value: function getDerivedStateFromError() {
-      return {
-        hasError: true
-      };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
     }
-  }]);
 
-  return ErrorBoundary;
-}(React__default.Component);
+    return this.props.children;
+  }
+
+}
 
 _defineProperty(ErrorBoundary, "propTypes", {
   children: PropTypes.node,

package/es/components/ErrorBoundary/ErrorBoundaryContext.js

@@ -7,10 +7,11 @@
 
 import { createContext } from 'react';
 
-var ErrorBoundaryContext = /*#__PURE__*/createContext({
-  log: function log(error, info) {
+const ErrorBoundaryContext = /*#__PURE__*/createContext({
+  log(error, info) {
     console.log(info.componentStack);
   }
+
 });
 
 export { ErrorBoundaryContext };

package/es/components/ExpandableSearch/ExpandableSearch.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2021
+ *
+ * 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 React from 'react';
+import { type SearchProps } from '../Search';
+declare function ExpandableSearch({ onBlur, onChange, onExpand, onFocus, ...props }: SearchProps): JSX.Element;
+declare namespace ExpandableSearch {
+    var propTypes: React.WeakValidationMap<SearchProps & React.RefAttributes<HTMLInputElement>> | undefined;
+}
+export default ExpandableSearch;