@carbon/react 0.17.0 → 1.0.0-rc.0

package/lib/components/DatePickerInput/next/DatePickerInput.js

@@ -0,0 +1,279 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var iconsReact = require('@carbon/icons-react');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../../internal/usePrefix.js');
+var deprecate = require('../../../prop-types/deprecate.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["datePickerType", "disabled", "helperText", "hideLabel", "id", "invalid", "invalidText", "labelText", "onClick", "onChange", "pattern", "placeholder", "size", "type", "warn", "warnText"],
+    _excluded2 = ["openCalendar", "iconDescription"],
+    _excluded3 = ["datePickerType", "invalid", "warn"];
+var DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function DatePickerInput(props, ref) {
+  var _cx, _cx2, _cx4;
+
+  var datePickerType = props.datePickerType,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      helperText = props.helperText,
+      hideLabel = props.hideLabel,
+      id = props.id,
+      _props$invalid = props.invalid,
+      invalid = _props$invalid === void 0 ? false : _props$invalid,
+      invalidText = props.invalidText,
+      labelText = props.labelText,
+      _props$onClick = props.onClick,
+      _onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
+      _props$onChange = props.onChange,
+      _onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      _props$pattern = props.pattern,
+      pattern = _props$pattern === void 0 ? '\\d{1,2}\\/\\d{1,2}\\/\\d{4}' : _props$pattern,
+      placeholder = props.placeholder,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'md' : _props$size,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'text' : _props$type,
+      warn = props.warn,
+      warnText = props.warnText,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var datePickerInputProps = {
+    id: id,
+    onChange: function onChange(event) {
+      if (!disabled) {
+        _onChange(event);
+      }
+    },
+    onClick: function onClick(event) {
+      if (!disabled) {
+        _onClick(event);
+      }
+    },
+    pattern: pattern,
+    placeholder: placeholder,
+    type: type
+  };
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--date-picker-input__wrapper"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker-input__wrapper--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--date-picker-input__wrapper--warn"), warn), _cx));
+  var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _cx2));
+  var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
+  var inputClasses = cx__default["default"]("".concat(prefix, "--date-picker__input"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--date-picker__input--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--date-picker__input--invalid"), invalid), _cx4));
+  var containerClasses = cx__default["default"]("".concat(prefix, "--date-picker-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--date-picker--nolabel"), !labelText));
+
+  var _rest = _rollupPluginBabelHelpers.objectSpread2({}, rest),
+      openCalendar = _rest.openCalendar,
+      iconDescription = _rest.iconDescription,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_rest, _excluded2);
+
+  var input = invalid ? /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, datePickerInputProps, {
+    disabled: disabled,
+    ref: ref,
+    "data-invalid": true,
+    className: inputClasses
+  })) : /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, datePickerInputProps, {
+    disabled: disabled,
+    className: inputClasses,
+    ref: ref
+  }));
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: containerClasses
+  }, labelText && /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: id,
+    className: labelClasses
+  }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: wrapperClasses
+  }, input, /*#__PURE__*/React__default["default"].createElement(DatePickerIcon, {
+    datePickerType: datePickerType,
+    iconDescription: iconDescription,
+    invalid: invalid,
+    openCalendar: openCalendar,
+    warn: warn
+  })), invalid && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, invalidText), warn && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, warnText), helperText && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: helperTextClasses
+  }, helperText));
+});
+DatePickerInput.propTypes = {
+  /**
+   * The type of the date picker:
+   *
+   * * `simple` - Without calendar dropdown.
+   * * `single` - With calendar dropdown and single date.
+   * * `range` - With calendar dropdown and a date range.
+   */
+  datePickerType: PropTypes__default["default"].oneOf(['simple', 'single', 'range']),
+
+  /**
+   * Specify whether or not the input should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes__default["default"].node,
+
+  /**
+   * Specify if the label should be hidden
+   */
+  hideLabel: PropTypes__default["default"].bool,
+
+  /**
+   * The description of the calendar icon.
+   */
+  iconDescription: deprecate["default"](PropTypes__default["default"].string, "\nThe prop `iconDescriptionInput` for DatePickerInput has been deprecated and is no longer used"),
+
+  /**
+   * Specify an id that uniquely identifies the `<input>`
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify whether or not the input should be invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the text to be rendered when the input is invalid
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Specify an `onChange` handler that is called whenever a change in the
+   * input field has occurred
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Provide a function to be called when the input field is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Provide a function to be called when the input field is clicked
+   */
+  openCalendar: deprecate["default"](PropTypes__default["default"].func, "\nThe prop `openCalendar` for DatePickerInput has been deprecated and is no longer used"),
+
+  /**
+   * Provide a regular expression that the input value must match
+   */
+  pattern: function pattern(props, propName, componentName) {
+    if (props[propName] === undefined) {
+      return;
+    }
+
+    try {
+      new RegExp(props[propName]);
+    } catch (e) {
+      return new Error("Invalid value of prop '".concat(propName, "' supplied to '").concat(componentName, "', it should be a valid regular expression"));
+    }
+  },
+
+  /**
+   * Specify the placeholder text
+   */
+  placeholder: PropTypes__default["default"].string,
+
+  /**
+   * Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * Specify the type of the `<input>`
+   */
+  type: PropTypes__default["default"].string,
+
+  /**
+   * 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
+};
+
+function DatePickerIcon(_ref) {
+  var datePickerType = _ref.datePickerType,
+      invalid = _ref.invalid,
+      warn = _ref.warn,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded3);
+
+  var prefix = usePrefix.usePrefix();
+
+  if (datePickerType === 'simple' && !invalid && !warn) {
+    return null;
+  }
+
+  if (invalid) {
+    return /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
+      className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--invalid")
+    });
+  }
+
+  if (!invalid && warn) {
+    return /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+      className: "".concat(prefix, "--date-picker__icon ").concat(prefix, "--date-picker__icon--warn")
+    });
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(iconsReact.Calendar, {
+    className: "".concat(prefix, "--date-picker__icon"),
+    "aria-label": rest.iconDescription,
+    onClick: rest.openCalendar,
+    role: "img",
+    "aria-hidden": "true"
+  }, rest.iconDescription && /*#__PURE__*/React__default["default"].createElement("title", null, rest.iconDescription));
+}
+
+DatePickerIcon.propTypes = {
+  /**
+   * The type of the date picker:
+   *
+   * * `simple` - Without calendar dropdown.
+   * * `single` - With calendar dropdown and single date.
+   * * `range` - With calendar dropdown and a date range.
+   */
+  datePickerType: PropTypes__default["default"].oneOf(['simple', 'single', 'range']),
+
+  /**
+   * Specify whether or not the input should be invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes__default["default"].bool
+};
+var DatePickerInputNext = DatePickerInput;
+
+exports["default"] = DatePickerInputNext;

package/lib/components/Dropdown/Dropdown.Skeleton.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var deprecate = require('../../prop-types/deprecate.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className", "size", "inline"];
+
+var DropdownSkeleton = function DropdownSkeleton(_ref) {
+  var _cx;
+
+  var className = _ref.className,
+      size = _ref.size;
+      _ref.inline;
+      var rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var wrapperClasses = cx__default["default"](className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--dropdown-v2"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--form-item"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--").concat(size), size), _cx));
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: wrapperClasses
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--list-box__field")
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--list-box__label")
+  })));
+};
+
+DropdownSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether you want the inline version of this control
+   */
+  inline: deprecate["default"](PropTypes__default["default"].bool, "The `inline` prop has been deprecated and will\n    be removed in the next major release. To specify the inline variant of Dropdown, please use the `type` prop."),
+
+  /**
+   * Specify the size of the ListBox.
+   */
+  size: ListBoxPropTypes.ListBoxSize
+};
+var DropdownSkeleton$1 = DropdownSkeleton;
+
+exports["default"] = DropdownSkeleton$1;

package/lib/components/Dropdown/Dropdown.js

@@ -0,0 +1,337 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var Downshift = require('downshift');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var iconsReact = require('@carbon/icons-react');
+require('../ListBox/index.js');
+var createPropAdapter = require('../../tools/createPropAdapter.js');
+var mergeRefs = require('../../tools/mergeRefs.js');
+var deprecate = require('../../prop-types/deprecate.js');
+var index = require('../FeatureFlags/index.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var ListBox = require('../ListBox/ListBox.js');
+var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _excluded = ["className", "disabled", "direction", "items", "label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps"];
+
+var defaultItemToString = function defaultItemToString(item) {
+  if (typeof item === 'string') {
+    return item;
+  }
+
+  return item ? item.label : '';
+};
+
+var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Dropdown(_ref, ref) {
+  var _cx, _cx2, _cx4;
+
+  var containerClassName = _ref.className,
+      disabled = _ref.disabled,
+      direction = _ref.direction,
+      items = _ref.items,
+      label = _ref.label,
+      ariaLabel = _ref.ariaLabel,
+      itemToString = _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,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var selectProps = createPropAdapter.mapDownshiftProps(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, downshiftProps), {}, {
+    items: items,
+    itemToString: itemToString,
+    initialSelectedItem: initialSelectedItem,
+    onSelectedItemChange: onSelectedItemChange
+  })); // 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 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--").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), _cx4)); // needs to be Capitalized for react to render it correctly
+
+  var ItemToElement = itemToElement;
+  var toggleButtonProps = getToggleButtonProps();
+  var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: helperClasses
+  }, helperText) : null;
+
+  function onSelectedItemChange(_ref2) {
+    var selectedItem = _ref2.selectedItem;
+
+    if (onChange) {
+      onChange({
+        selectedItem: selectedItem
+      });
+    }
+  }
+
+  var menuItemOptionRefs = React.useRef(items.map(function (_) {
+    return /*#__PURE__*/React__default["default"].createRef();
+  }));
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: wrapperClasses
+  }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
+    className: titleClasses
+  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(ListBox["default"], {
+    "aria-label": ariaLabel,
+    size: size,
+    className: className,
+    invalid: invalid,
+    invalidText: invalidText,
+    warn: warn,
+    warnText: warnText,
+    light: light,
+    isOpen: isOpen,
+    id: id
+  }, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
+    className: "".concat(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")
+  }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    type: "button",
+    className: "".concat(prefix, "--list-box__field"),
+    disabled: disabled,
+    "aria-disabled": disabled,
+    title: selectedItem ? itemToString(selectedItem) : label
+  }, toggleButtonProps, {
+    ref: mergeRefs["default"](toggleButtonProps.ref, ref)
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--list-box__label")
+  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(ListBox["default"].MenuIcon, {
+    isOpen: isOpen,
+    translateWithId: translateWithId
+  })), /*#__PURE__*/React__default["default"].createElement(ListBox["default"].Menu, getMenuProps(), isOpen && items.map(function (item, index) {
+    var _menuItemOptionRefs$c;
+
+    var itemProps = getItemProps({
+      item: item,
+      index: index,
+      disabled: item.disabled
+    });
+    var title = itemToElement ? item.text : itemToString(item);
+
+    var _ref3 = (menuItemOptionRefs === null || menuItemOptionRefs === void 0 ? void 0 : (_menuItemOptionRefs$c = menuItemOptionRefs.current[index]) === null || _menuItemOptionRefs$c === void 0 ? void 0 : _menuItemOptionRefs$c.current) || {},
+        offsetWidth = _ref3.offsetWidth,
+        scrollWidth = _ref3.scrollWidth;
+
+    return /*#__PURE__*/React__default["default"].createElement(ListBox["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+      key: itemProps.id,
+      isActive: selectedItem === item,
+      isHighlighted: highlightedIndex === index || selectedItem === item,
+      title: offsetWidth < scrollWidth && title || undefined,
+      ref: {
+        menuItemOptionRef: menuItemOptionRefs.current[index]
+      }
+    }, itemProps), itemToElement ? /*#__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")
+    }));
+  }))), !inline && !invalid && !warn && helper);
+});
+Dropdown.displayName = 'Dropdown';
+Dropdown.propTypes = {
+  /**
+   * 'aria-label' of the ListBox component.
+   */
+  ariaLabel: PropTypes__default["default"].string,
+
+  /**
+   * 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 whether you want the inline version of this control
+   */
+  inline: deprecate["default"](PropTypes__default["default"].bool, "The `inline` prop has been deprecated and will\n    be removed in the next major release. To specify the inline variant of Dropdown, please use the `type` prop."),
+
+  /**
+   * 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: PropTypes__default["default"].bool,
+
+  /**
+   * `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,
+
+  /**
+   * 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,
+
+  /**
+   * 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',
+  itemToString: defaultItemToString,
+  itemToElement: null,
+  light: false,
+  titleText: '',
+  helperText: '',
+  direction: 'bottom'
+};
+var Dropdown$1 = Dropdown;
+
+exports["default"] = Dropdown$1;