@carbon/react 1.27.0 → 1.28.0

package/lib/components/Dropdown/Dropdown.js

@@ -31,134 +31,144 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _Dropdown$propTypes;
+const getInstanceId = setupGetInstanceId["default"]();
 
-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["default"]();
-
-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 && _rollupPluginBabelHelpers["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["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-
-  var _useContext = React.useContext(FormContext.FormContext),
-      isFluid = _useContext.isFluid;
-
-  var selectProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, downshiftProps), {}, {
-    items: items,
-    itemToString: itemToString,
-    initialSelectedItem: initialSelectedItem,
-    onSelectedItemChange: onSelectedItemChange
-  });
-
-  var _useRef = React.useRef(getInstanceId()),
-      dropdownInstanceId = _useRef.current; // only set selectedItem if the prop is defined. Setting if it is undefined
+const Dropdown = /*#__PURE__*/React__default["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.usePrefix();
+  const {
+    isFluid
+  } = React.useContext(FormContext.FormContext);
+  const selectProps = { ...downshiftProps,
+    items,
+    itemToString,
+    initialSelectedItem,
+    onSelectedItemChange
+  };
+  const {
+    current: dropdownInstanceId
+  } = React.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 = Downshift.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 = index.useFeatureFlag('enable-v11-release');
-
-  var _useState = React.useState(false),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var className = cx__default["default"]("".concat(prefix, "--dropdown"), [enabled ? null : containerClassName], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--open"), isOpen), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx));
-  var titleClasses = cx__default["default"]("".concat(prefix, "--label"), (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
-  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, "--dropdown__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--dropdown__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.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["default"].createElement("div", {
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex,
+    selectedItem
+  } = Downshift.useSelect(selectProps);
+  const inline = type === 'inline';
+  const showWarning = !invalid && warn;
+  const enabled = index.useFeatureFlag('enable-v11-release');
+  const [isFocused, setIsFocused] = React.useState(false);
+  const className = cx__default["default"](`${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__default["default"](`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--visually-hidden`]: hideLabel
+  });
+  const helperClasses = cx__default["default"](`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled
+  });
+  const wrapperClasses = cx__default["default"](`${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["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 = React.useRef(items.map(function (_) {
-    return /*#__PURE__*/React__default["default"].createRef();
-  }));
+  const menuItemOptionRefs = React.useRef(items.map(_ => /*#__PURE__*/React__default["default"].createRef()));
 
-  var handleFocus = function handleFocus(evt) {
+  const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
   };
 
-  var mergedRef = mergeRefs["default"](toggleButtonProps.ref, ref);
-  var readOnlyEventHandlers = readOnly ? {
-    onClick: function onClick(evt) {
+  const mergedRef = mergeRefs["default"](toggleButtonProps.ref, ref);
+  const readOnlyEventHandlers = readOnly ? {
+    onClick: evt => {
       // NOTE: does not prevent click
       evt.preventDefault(); // focus on the element as per readonly input behavior
 
@@ -166,8 +176,8 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_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();
@@ -192,16 +202,16 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     isOpen: isOpen,
     id: id
   }, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
-    className: "".concat(prefix, "--list-box__invalid-icon")
+    className: `${prefix}--list-box__invalid-icon`
   }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.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["default"].createElement("button", _rollupPluginBabelHelpers["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
     ,
@@ -210,19 +220,19 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   }, toggleButtonProps, readOnlyEventHandlers, {
     ref: mergedRef
   }), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--list-box__label")
+    className: `${prefix}--list-box__label`
   }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, getMenuProps(), isOpen && items.map(function (item, index) {
-    var isObject = item !== null && _rollupPluginBabelHelpers["typeof"](item) === 'object';
-    var disabled = isObject && 'disabled' in item && item.disabled === true;
-    var itemProps = getItemProps({
-      item: item,
-      index: index,
-      disabled: disabled
+  })), /*#__PURE__*/React__default["default"].createElement(index$1["default"].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["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
       isActive: selectedItem === item,
@@ -231,15 +241,162 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       ref: {
         menuItemOptionRef: menuItemOptionRefs.current[index]
       }
-    }, itemProps), _rollupPluginBabelHelpers["typeof"](item) === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
+    }, itemProps), typeof item === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id
     }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.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 = {}, _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "direction", PropTypes__default["default"].oneOf(['top', 'bottom'])), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "disabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "downshiftProps", PropTypes__default["default"].object), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "helperText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "hideLabel", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "id", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "initialSelectedItem", PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number])), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "invalid", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "invalidText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "itemToElement", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "itemToString", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "items", PropTypes__default["default"].array.isRequired), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "label", PropTypes__default["default"].node.isRequired), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "light", deprecate["default"](PropTypes__default["default"].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.')), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "onChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "readOnly", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "renderSelectedItem", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "selectedItem", PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number])), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "size", ListBoxPropTypes.ListBoxSize), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "titleText", PropTypes__default["default"].node.isRequired), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "translateWithId", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "type", ListBoxPropTypes.ListBoxType), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "warn", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "warnText", PropTypes__default["default"].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__default["default"].string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the container note.
+   */
+  ariaLabel: deprecate["default"](PropTypes__default["default"].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__default["default"].string,
+
+  /**
+   * Specify the direction of the dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
+
+  /**
+   * Disable the control
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Additional props passed to Downshift
+   */
+  downshiftProps: PropTypes__default["default"].object,
+
+  /**
+   * Provide helper text that is used alongside the control label for
+   * additional help
+   */
+  helperText: PropTypes__default["default"].node,
+
+  /**
+   * Specify whether the title text should be hidden or not
+   */
+  hideLabel: PropTypes__default["default"].bool,
+
+  /**
+   * Specify a custom `id`
+   */
+  id: PropTypes__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify if the currently selected value is invalid.
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Function to render items as custom components instead of strings.
+   * Defaults to null and is overridden by a getter
+   */
+  itemToElement: PropTypes__default["default"].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__default["default"].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__default["default"].array.isRequired,
+
+  /**
+   * Generic `label` that will be used as the textual representation of what
+   * this field is for
+   */
+  label: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * `true` to use the light version.
+   */
+  light: deprecate["default"](PropTypes__default["default"].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__default["default"].func,
+
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes__default["default"].bool,
+
+  /**
+   * An optional callback to render the currently selected item as a react element instead of only
+   * as a string.
+   */
+  renderSelectedItem: PropTypes__default["default"].func,
+
+  /**
+   * In the case you want to control the dropdown selection entirely.
+   */
+  selectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
+   */
+  size: ListBoxPropTypes.ListBoxSize,
+
+  /**
+   * Provide the title text that will be read by a screen reader when
+   * visiting this control
+   */
+  titleText: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Callback function for translating ListBoxMenuIcon SVG title
+   */
+  translateWithId: PropTypes__default["default"].func,
+
+  /**
+   * The dropdown type, `default` or `inline`
+   */
+  type: ListBoxPropTypes.ListBoxType,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes__default["default"].node
+};
 Dropdown.defaultProps = {
   disabled: false,
   type: 'default',

package/lib/components/ErrorBoundary/ErrorBoundary.js

@@ -37,63 +37,42 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
  * https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries
  */
 
-var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
-  _rollupPluginBabelHelpers.inherits(ErrorBoundary, _React$Component);
+class ErrorBoundary extends React__default["default"].Component {
+  constructor() {
+    super(...arguments);
 
-  var _super = _rollupPluginBabelHelpers.createSuper(ErrorBoundary);
-
-  function ErrorBoundary() {
-    var _this;
-
-    _rollupPluginBabelHelpers.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));
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {
+    _rollupPluginBabelHelpers.defineProperty(this, "state", {
       hasError: false
     });
+  }
 
-    return _this;
+  static getDerivedStateFromError() {
+    return {
+      hasError: true
+    };
   }
 
-  _rollupPluginBabelHelpers.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;
-      }
-
-      return this.props.children;
+  componentDidCatch(error, info) {
+    this.context.log(error, info);
+  }
+
+  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["default"].Component);
+    return this.props.children;
+  }
+
+}
 
 _rollupPluginBabelHelpers.defineProperty(ErrorBoundary, "propTypes", {
   children: PropTypes__default["default"].node,

package/lib/components/ErrorBoundary/ErrorBoundaryContext.js

@@ -11,10 +11,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-var ErrorBoundaryContext = /*#__PURE__*/React.createContext({
-  log: function log(error, info) {
+const ErrorBoundaryContext = /*#__PURE__*/React.createContext({
+  log(error, info) {
     console.log(info.componentStack);
   }
+
 });
 
 exports.ErrorBoundaryContext = ErrorBoundaryContext;

package/lib/components/ExpandableSearch/ExpandableSearch.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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;
+    var displayName: string;
+}
+export default ExpandableSearch;