@carbon/react 0.17.0-rc.0 → 1.0.0

package/es/components/Link/Link.js

@@ -0,0 +1,95 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["children", "className", "href", "disabled", "inline", "visited", "renderIcon", "size"];
+var Link = /*#__PURE__*/React__default.forwardRef(function Link(_ref, ref) {
+  var _cx;
+
+  var children = _ref.children,
+      customClassName = _ref.className,
+      href = _ref.href,
+      disabled = _ref.disabled,
+      inline = _ref.inline,
+      visited = _ref.visited,
+      Icon = _ref.renderIcon,
+      size = _ref.size,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var className = cx("".concat(prefix, "--link"), customClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--link--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--link--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--link--visited"), visited), _defineProperty(_cx, "".concat(prefix, "--link--").concat(size), size), _cx));
+  var rel = rest.target === '_blank' ? 'noopener' : null;
+  var linkProps = {
+    className: className,
+    rel: rel
+  }; // Reference for disabled links:
+  // https://www.scottohara.me/blog/2021/05/28/disabled-links.html
+
+  if (!disabled) {
+    linkProps.href = href;
+  } else {
+    linkProps.role = 'link';
+    linkProps['aria-disabled'] = true;
+  }
+
+  return /*#__PURE__*/React__default.createElement("a", _extends({
+    ref: ref
+  }, linkProps, rest), children, !inline && Icon && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--link__icon")
+  }, /*#__PURE__*/React__default.createElement(Icon, null)));
+});
+Link.displayName = 'Link';
+Link.propTypes = {
+  /**
+   * Provide the content for the Link
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom className to be applied to the containing `<a>` node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide the `href` attribute for the `<a>` node
+   */
+  href: PropTypes.string,
+
+  /**
+   * Specify whether you want the inline version of this control
+   */
+  inline: PropTypes.bool,
+
+  /**
+   * Optional prop to render an icon next to the link.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Specify the size of the Link. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * Specify whether you want the link to receive visited styles after the link has been clicked
+   */
+  visited: PropTypes.bool
+};
+var Link$1 = Link;
+
+export { Link$1 as default };

package/es/components/ListBox/ListBox.js

@@ -0,0 +1,139 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { ListBoxSize, ListBoxType } from './ListBoxPropTypes.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import ListBoxField from './ListBoxField.js';
+import ListBoxMenu from './ListBoxMenu.js';
+import ListBoxMenuIcon from './ListBoxMenuIcon.js';
+import ListBoxMenuItem from './ListBoxMenuItem.js';
+import ListBoxSelection from './ListBoxSelection.js';
+
+var _excluded = ["children", "className", "disabled", "type", "size", "invalid", "invalidText", "warn", "warnText", "light", "isOpen"];
+
+var handleOnKeyDown = function handleOnKeyDown(event) {
+  if (event.keyCode === 27) {
+    event.stopPropagation();
+  }
+};
+
+var handleClick = function handleClick(event) {
+  event.preventDefault();
+  event.stopPropagation();
+};
+/**
+ * `ListBox` is a generic container component that handles creating the
+ * container class name in response to certain props.
+ */
+
+
+var ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, ref) {
+  var _cx;
+
+  var children = _ref.children,
+      containerClassName = _ref.className,
+      disabled = _ref.disabled,
+      type = _ref.type,
+      size = _ref.size,
+      invalid = _ref.invalid,
+      invalidText = _ref.invalidText,
+      warn = _ref.warn,
+      warnText = _ref.warnText,
+      light = _ref.light,
+      isOpen = _ref.isOpen,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var showWarning = !invalid && warn;
+  var className = cx((_cx = {}, _defineProperty(_cx, containerClassName, !!containerClassName), _defineProperty(_cx, "".concat(prefix, "--list-box"), true), _defineProperty(_cx, "".concat(prefix, "--list-box--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--list-box--inline"), type === 'inline'), _defineProperty(_cx, "".concat(prefix, "--list-box--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--list-box--light"), light), _defineProperty(_cx, "".concat(prefix, "--list-box--expanded"), isOpen), _defineProperty(_cx, "".concat(prefix, "--list-box--warning"), showWarning), _cx));
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    className: className,
+    ref: ref,
+    onKeyDown: handleOnKeyDown,
+    onClick: handleClick,
+    "data-invalid": invalid || undefined
+  }), children), invalid ? /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, invalidText) : null, showWarning ? /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--form-requirement")
+  }, warnText) : null);
+});
+ListBox.displayName = 'ListBox';
+ListBox.propTypes = {
+  /**
+   * Provide the contents of your ListBox
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify a class name to be applied on the containing list box node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the ListBox is currently disabled
+   */
+  disabled: PropTypes.bool.isRequired,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Specify the text to be displayed when the control is invalid
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Specify if the control should render open
+   */
+  isOpen: PropTypes.bool,
+
+  /**
+   * `true` to use the light version. For use on $ui-01 backgrounds only.
+   * Don't use this to make tile background color same as container background color.
+   */
+  light: PropTypes.bool,
+
+  /**
+   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
+   */
+  size: ListBoxSize,
+
+  /**
+   * Specify the "type" of the ListBox. Currently supports either `default` or
+   * `inline` as an option.
+   */
+  type: ListBoxType.isRequired,
+
+  /**
+   * 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
+};
+ListBox.defaultProps = {
+  disabled: false,
+  type: 'default'
+};
+ListBox.Field = ListBoxField;
+ListBox.Menu = ListBoxMenu;
+ListBox.MenuIcon = ListBoxMenuIcon;
+ListBox.MenuItem = ListBoxMenuItem;
+ListBox.Selection = ListBoxSelection;
+var ListBox$1 = ListBox;
+
+export { ListBox$1 as default };

package/es/components/ListBox/ListBoxField.js

@@ -0,0 +1,62 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["children", "disabled", "tabIndex"];
+/**
+ * `ListBoxField` is responsible for creating the containing node for valid
+ * elements inside of a field. It also provides a11y-related attributes like
+ * `role` to make sure a user can focus the given field.
+ */
+
+function ListBoxField(_ref) {
+  var children = _ref.children,
+      disabled = _ref.disabled,
+      tabIndex = _ref.tabIndex,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: "".concat(prefix, "--list-box__field"),
+    tabIndex: !disabled && tabIndex || -1
+  }, rest), children);
+}
+
+ListBoxField.propTypes = {
+  /**
+   * Typically set by `getToggleButtonProps`, this should specify whether the
+   * field has a popup.
+   */
+  'aria-haspopup': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+
+  /**
+   * Provide the contents of your ListBoxField
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify if the parent <ListBox> is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * The role for the component, should be set by `getToggleButtonProps` coming
+   * from Downshift
+   */
+  role: PropTypes.string,
+
+  /**
+   * Optional prop to specify the tabIndex of the <ListBox> trigger button
+   */
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+
+export { ListBoxField as default };

package/es/components/ListBox/ListBoxMenu.js

@@ -0,0 +1,56 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+import PropTypes from 'prop-types';
+import ListBoxMenuItem from './ListBoxMenuItem.js';
+
+var _excluded = ["children", "id"];
+/**
+ * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
+ * class into a single component. It is also being used to validate given
+ * `children` components.
+ */
+
+var ListBoxMenu = /*#__PURE__*/React__default.forwardRef(function ListBoxMenu(_ref, ref) {
+  var children = _ref.children,
+      id = _ref.id,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: ref,
+    id: id,
+    className: "".concat(prefix, "--list-box__menu"),
+    role: "listbox"
+  }, rest), children);
+});
+ListBoxMenu.displayName = 'ListBoxMenu';
+ListBoxMenu.propTypes = {
+  /**
+   * Provide the contents of your ListBoxMenu
+   */
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(ListBoxMenuItem),
+  /**
+   * allow single item using the workaround for functional components
+   * https://github.com/facebook/react/issues/2979#issuecomment-222379916
+   */
+  PropTypes.shape({
+    type: PropTypes.oneOf([ListBoxMenuItem])
+  }), PropTypes.bool // used in Dropdown for closed state
+  ]),
+
+  /**
+   * Specify a custom `id`
+   */
+  id: PropTypes.string.isRequired
+};
+var ListBoxMenu$1 = ListBoxMenu;
+
+export { ListBoxMenu$1 as default };

package/es/components/ListBox/ListBoxMenuIcon.js

@@ -0,0 +1,61 @@
+/**
+ * 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.
+ */
+
+import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { ChevronDown } from '@carbon/icons-react';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _defaultTranslations;
+var translationIds = {
+  'close.menu': 'close.menu',
+  'open.menu': 'open.menu'
+};
+var defaultTranslations = (_defaultTranslations = {}, _defineProperty(_defaultTranslations, translationIds['close.menu'], 'Close menu'), _defineProperty(_defaultTranslations, translationIds['open.menu'], 'Open menu'), _defaultTranslations);
+/**
+ * `ListBoxMenuIcon` is used to orient the icon up or down depending on the
+ * state of the menu for a given `ListBox`
+ */
+
+var ListBoxMenuIcon = function ListBoxMenuIcon(_ref) {
+  var isOpen = _ref.isOpen,
+      t = _ref.translateWithId;
+  var prefix = usePrefix();
+  var className = cx("".concat(prefix, "--list-box__menu-icon"), _defineProperty({}, "".concat(prefix, "--list-box__menu-icon--open"), isOpen));
+  var description = isOpen ? t('close.menu') : t('open.menu');
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(ChevronDown, {
+    name: "chevron--down",
+    "aria-label": description
+  }, /*#__PURE__*/React__default.createElement("title", null, description)));
+};
+
+ListBoxMenuIcon.propTypes = {
+  /**
+   * Specify whether the menu is currently open, which will influence the
+   * direction of the menu icon
+   */
+  isOpen: PropTypes.bool.isRequired,
+
+  /**
+   * i18n hook used to provide the appropriate description for the given menu
+   * icon. This function takes in an id defined in `translationIds` and should
+   * return a string message for that given message id.
+   */
+  translateWithId: PropTypes.func.isRequired
+};
+ListBoxMenuIcon.defaultProps = {
+  translateWithId: function translateWithId(id) {
+    return defaultTranslations[id];
+  }
+};
+var ListBoxMenuIcon$1 = ListBoxMenuIcon;
+
+export { ListBoxMenuIcon$1 as default, translationIds };

package/es/components/ListBox/ListBoxMenuItem.js

@@ -0,0 +1,87 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import React__default, { useRef, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["children", "isActive", "isHighlighted", "title"];
+
+function useIsTruncated(ref) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isTruncated = _useState2[0],
+      setIsTruncated = _useState2[1];
+
+  useEffect(function () {
+    var _ref$current = ref.current,
+        offsetWidth = _ref$current.offsetWidth,
+        scrollWidth = _ref$current.scrollWidth;
+    setIsTruncated(offsetWidth < scrollWidth);
+  }, [ref, setIsTruncated]);
+  return isTruncated;
+}
+/**
+ * `ListBoxMenuItem` is a helper component for managing the container class
+ * name, alongside any classes for any corresponding states, for a generic list
+ * box menu item.
+ */
+
+
+var ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxMenuItem(_ref, forwardedRef) {
+  var _cx;
+
+  var children = _ref.children,
+      isActive = _ref.isActive,
+      isHighlighted = _ref.isHighlighted,
+      title = _ref.title,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var ref = useRef(null);
+  var isTruncated = useIsTruncated((forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref);
+  var className = cx("".concat(prefix, "--list-box__menu-item"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--list-box__menu-item--active"), isActive), _defineProperty(_cx, "".concat(prefix, "--list-box__menu-item--highlighted"), isHighlighted), _cx));
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    className: className,
+    title: isTruncated ? title : undefined
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--list-box__menu-item__option"),
+    ref: (forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref
+  }, children));
+});
+ListBoxMenuItem.displayName = 'ListBoxMenuItem';
+ListBoxMenuItem.propTypes = {
+  /**
+   * Specify any children nodes that should be rendered inside of the ListBox
+   * Menu Item
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify whether the current menu item is "active".
+   */
+  isActive: PropTypes.bool.isRequired,
+
+  /**
+   * Specify whether the current menu item is "highlighted".
+   */
+  isHighlighted: PropTypes.bool.isRequired,
+
+  /**
+   * Provide an optional tooltip for the ListBoxMenuItem
+   */
+  title: PropTypes.string
+};
+ListBoxMenuItem.defaultProps = {
+  isActive: false,
+  isHighlighted: false
+};
+var ListBoxMenuItem$1 = ListBoxMenuItem;
+
+export { ListBoxMenuItem$1 as default };

package/es/components/ListBox/ListBoxPropTypes.js

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+
+import PropTypes from 'prop-types';
+import * as FeatureFlags from '@carbon/feature-flags';
+
+var ListBoxType = PropTypes.oneOf(['default', 'inline']);
+var ListBoxSize = FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg']) : PropTypes.oneOf(['sm', 'md', 'lg', 'xl']);
+
+export { ListBoxSize, ListBoxType };

package/es/components/ListBox/ListBoxSelection.js

@@ -0,0 +1,148 @@
+/**
+ * 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.
+ */
+
+import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { Close } from '@carbon/icons-react';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Enter } from '../../internal/keyboard/keys.js';
+
+var _Close, _Close2, _defaultTranslations;
+/**
+ * `ListBoxSelection` is used to provide controls for clearing a selection, in
+ * addition to conditionally rendering a badge if the control has more than one
+ * selection.
+ */
+
+var ListBoxSelection = function ListBoxSelection(_ref) {
+  var _cx;
+
+  var clearSelection = _ref.clearSelection,
+      selectionCount = _ref.selectionCount,
+      t = _ref.translateWithId,
+      disabled = _ref.disabled,
+      onClearSelection = _ref.onClearSelection;
+  var prefix = usePrefix();
+  var className = cx("".concat(prefix, "--list-box__selection"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--tag--filter"), selectionCount), _defineProperty(_cx, "".concat(prefix, "--list-box__selection--multi"), selectionCount), _cx));
+
+  var handleOnClick = function handleOnClick(event) {
+    event.stopPropagation();
+
+    if (disabled) {
+      return;
+    }
+
+    clearSelection(event);
+
+    if (onClearSelection) {
+      onClearSelection(event);
+    }
+  };
+
+  var handleOnKeyDown = function handleOnKeyDown(event) {
+    event.stopPropagation();
+
+    if (disabled) {
+      return;
+    } // When a user hits ENTER, we'll clear the selection
+
+
+    if (match(event, Enter)) {
+      clearSelection(event);
+
+      if (onClearSelection) {
+        onClearSelection(event);
+      }
+    }
+  };
+
+  var description = selectionCount ? t('clear.all') : t('clear.selection');
+  var tagClasses = cx("".concat(prefix, "--tag"), "".concat(prefix, "--tag--filter"), "".concat(prefix, "--tag--high-contrast"), _defineProperty({}, "".concat(prefix, "--tag--disabled"), disabled));
+  return selectionCount ? /*#__PURE__*/React__default.createElement("div", {
+    className: tagClasses
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--tag__label"),
+    title: selectionCount
+  }, selectionCount), /*#__PURE__*/React__default.createElement("div", {
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    className: "".concat(prefix, "--tag__close-icon"),
+    onClick: handleOnClick,
+    onKeyDown: handleOnKeyDown,
+    disabled: disabled,
+    "aria-label": t('clear.all'),
+    title: description
+  }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null)))) : /*#__PURE__*/React__default.createElement("div", {
+    role: "button",
+    className: className,
+    tabIndex: disabled ? -1 : 0,
+    onClick: handleOnClick,
+    onKeyDown: handleOnKeyDown,
+    "aria-label": description,
+    title: description
+  }, selectionCount, _Close2 || (_Close2 = /*#__PURE__*/React__default.createElement(Close, null)));
+};
+
+var translationIds = {
+  'clear.all': 'clear.all',
+  'clear.selection': 'clear.selection'
+};
+var defaultTranslations = (_defaultTranslations = {}, _defineProperty(_defaultTranslations, translationIds['clear.all'], 'Clear all selected items'), _defineProperty(_defaultTranslations, translationIds['clear.selection'], 'Clear selected item'), _defaultTranslations);
+ListBoxSelection.propTypes = {
+  /**
+   * Specify a function to be invoked when a user interacts with the clear
+   * selection element.
+   */
+  clearSelection: PropTypes.func.isRequired,
+
+  /**
+   * Specify whether or not the clear selection element should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify an optional `onClearSelection` handler that is called when the underlying
+   * element is cleared
+   */
+  onClearSelection: PropTypes.func,
+
+  /**
+   * Specify an optional `onClick` handler that is called when the underlying
+   * clear selection element is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify an optional `onKeyDown` handler that is called when the underlying
+   * clear selection element fires a keydown event
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Specify an optional `selectionCount` value that will be used to determine
+   * whether the selection should display a badge or a single clear icon.
+   */
+  selectionCount: PropTypes.number,
+
+  /**
+   * i18n hook used to provide the appropriate description for the given menu
+   * icon. This function takes in an id defined in `translationIds` and should
+   * return a string message for that given message id.
+   */
+  translateWithId: PropTypes.func.isRequired
+};
+ListBoxSelection.defaultProps = {
+  translateWithId: function translateWithId(id) {
+    return defaultTranslations[id];
+  }
+};
+var ListBoxSelection$1 = ListBoxSelection;
+
+export { ListBoxSelection$1 as default, translationIds };

package/es/components/ListBox/index.js

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+import ListBox from './ListBox.js';
+export { default } from './ListBox.js';
+import ListBoxField from './ListBoxField.js';
+import ListBoxMenu from './ListBoxMenu.js';
+import ListBoxMenuIcon from './ListBoxMenuIcon.js';
+import ListBoxMenuItem from './ListBoxMenuItem.js';
+import ListBoxSelection from './ListBoxSelection.js';
+
+ListBox.Field = ListBoxField;
+ListBox.Menu = ListBoxMenu;
+ListBox.MenuIcon = ListBoxMenuIcon;
+ListBox.MenuItem = ListBoxMenuItem;
+ListBox.Selection = ListBoxSelection;