@carbon/react 0.16.2 → 1.0.0-rc.0

package/lib/components/ListBox/ListBoxSelection.js

@@ -0,0 +1,159 @@
+/**
+ * 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 cx = require('classnames');
+var React = require('react');
+var PropTypes = require('prop-types');
+var iconsReact = require('@carbon/icons-react');
+var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+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.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--list-box__selection"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tag--filter"), selectionCount), _rollupPluginBabelHelpers.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.match(event, keys.Enter)) {
+      clearSelection(event);
+
+      if (onClearSelection) {
+        onClearSelection(event);
+      }
+    }
+  };
+
+  var description = selectionCount ? t('clear.all') : t('clear.selection');
+  var tagClasses = cx__default["default"]("".concat(prefix, "--tag"), "".concat(prefix, "--tag--filter"), "".concat(prefix, "--tag--high-contrast"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tag--disabled"), disabled));
+  return selectionCount ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: tagClasses
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--tag__label"),
+    title: selectionCount
+  }, selectionCount), /*#__PURE__*/React__default["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["default"].createElement(iconsReact.Close, null)))) : /*#__PURE__*/React__default["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["default"].createElement(iconsReact.Close, null)));
+};
+
+var translationIds = {
+  'clear.all': 'clear.all',
+  'clear.selection': 'clear.selection'
+};
+var defaultTranslations = (_defaultTranslations = {}, _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['clear.all'], 'Clear all selected items'), _rollupPluginBabelHelpers.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__default["default"].func.isRequired,
+
+  /**
+   * Specify whether or not the clear selection element should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify an optional `onClearSelection` handler that is called when the underlying
+   * element is cleared
+   */
+  onClearSelection: PropTypes__default["default"].func,
+
+  /**
+   * Specify an optional `onClick` handler that is called when the underlying
+   * clear selection element is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Specify an optional `onKeyDown` handler that is called when the underlying
+   * clear selection element fires a keydown event
+   */
+  onKeyDown: PropTypes__default["default"].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__default["default"].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__default["default"].func.isRequired
+};
+ListBoxSelection.defaultProps = {
+  translateWithId: function translateWithId(id) {
+    return defaultTranslations[id];
+  }
+};
+var ListBoxSelection$1 = ListBoxSelection;
+
+exports["default"] = ListBoxSelection$1;
+exports.translationIds = translationIds;

package/lib/components/ListBox/index.js

@@ -0,0 +1,25 @@
+/**
+ * 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 ListBox = require('./ListBox.js');
+var ListBoxField = require('./ListBoxField.js');
+var ListBoxMenu = require('./ListBoxMenu.js');
+var ListBoxMenuIcon = require('./ListBoxMenuIcon.js');
+var ListBoxMenuItem = require('./ListBoxMenuItem.js');
+var ListBoxSelection = require('./ListBoxSelection.js');
+
+ListBox["default"].Field = ListBoxField["default"];
+ListBox["default"].Menu = ListBoxMenu["default"];
+ListBox["default"].MenuIcon = ListBoxMenuIcon["default"];
+ListBox["default"].MenuItem = ListBoxMenuItem["default"];
+ListBox["default"].Selection = ListBoxSelection["default"];
+
+exports["default"] = ListBox["default"];

package/lib/components/ListBox/next/ListBoxSelection.js

@@ -0,0 +1,166 @@
+/**
+ * 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 cx = require('classnames');
+var React = require('react');
+var PropTypes = require('prop-types');
+var iconsReact = require('@carbon/icons-react');
+var usePrefix = require('../../../internal/usePrefix.js');
+var match = require('../../../internal/keyboard/match.js');
+var keys = require('../../../internal/keyboard/keys.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _Close, _Close2, _defaultTranslations;
+
+var _excluded = ["clearSelection", "selectionCount", "translateWithId", "disabled", "onClearSelection"];
+/**
+ * `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.
+ */
+
+function ListBoxSelection(_ref) {
+  var _cx;
+
+  var clearSelection = _ref.clearSelection,
+      selectionCount = _ref.selectionCount,
+      t = _ref.translateWithId,
+      disabled = _ref.disabled,
+      onClearSelection = _ref.onClearSelection,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--list-box__selection"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tag--filter"), selectionCount), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__selection--multi"), selectionCount), _cx));
+  var description = selectionCount ? t('clear.all') : t('clear.selection');
+  var tagClasses = cx__default["default"]("".concat(prefix, "--tag"), "".concat(prefix, "--tag--filter"), "".concat(prefix, "--tag--high-contrast"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tag--disabled"), disabled));
+
+  function onClick(event) {
+    event.stopPropagation();
+
+    if (disabled) {
+      return;
+    }
+
+    clearSelection(event);
+
+    if (onClearSelection) {
+      onClearSelection(event);
+    }
+  }
+
+  function onKeyDown(event) {
+    event.stopPropagation();
+
+    if (disabled) {
+      return;
+    } // When a user hits ENTER, we'll clear the selection
+
+
+    if (match.match(event, keys.Enter)) {
+      clearSelection(event);
+
+      if (onClearSelection) {
+        onClearSelection(event);
+      }
+    }
+  }
+
+  if (selectionCount) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: tagClasses
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(prefix, "--tag__label"),
+      title: selectionCount
+    }, selectionCount), /*#__PURE__*/React__default["default"].createElement("button", {
+      "aria-label": description,
+      className: "".concat(prefix, "--tag__close-icon"),
+      disabled: disabled,
+      onClick: onClick,
+      onKeyDown: onKeyDown,
+      tabIndex: disabled ? -1 : 0,
+      title: description,
+      type: "button"
+    }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-label": description,
+    className: className,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    tabIndex: disabled ? -1 : 0,
+    title: description,
+    type: "button"
+  }), _Close2 || (_Close2 = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)));
+}
+
+var translationIds = {
+  'clear.all': 'clear.all',
+  'clear.selection': 'clear.selection'
+};
+var defaultTranslations = (_defaultTranslations = {}, _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['clear.all'], 'Clear all selected items'), _rollupPluginBabelHelpers.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__default["default"].func.isRequired,
+
+  /**
+   * Specify whether or not the clear selection element should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify an optional `onClearSelection` handler that is called when the underlying
+   * element is cleared
+   */
+  onClearSelection: PropTypes__default["default"].func,
+
+  /**
+   * Specify an optional `onClick` handler that is called when the underlying
+   * clear selection element is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Specify an optional `onKeyDown` handler that is called when the underlying
+   * clear selection element fires a keydown event
+   */
+  onKeyDown: PropTypes__default["default"].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__default["default"].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__default["default"].func.isRequired
+};
+ListBoxSelection.defaultProps = {
+  translateWithId: function translateWithId(id) {
+    return defaultTranslations[id];
+  }
+};
+
+exports["default"] = ListBoxSelection;
+exports.translationIds = translationIds;

package/lib/components/ListBox/next/ListBoxTrigger.js

@@ -0,0 +1,79 @@
+/**
+ * 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 cx = require('classnames');
+var React = require('react');
+var PropTypes = require('prop-types');
+var iconsReact = require('@carbon/icons-react');
+var usePrefix = require('../../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+
+var _excluded = ["isOpen", "translateWithId"];
+
+var _defaultTranslations, _ChevronDown;
+var translationIds = {
+  'close.menu': 'close.menu',
+  'open.menu': 'open.menu'
+};
+var defaultTranslations = (_defaultTranslations = {}, _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['close.menu'], 'Close'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationIds['open.menu'], 'Open'), _defaultTranslations);
+/**
+ * `ListBoxTrigger` is used to orient the icon up or down depending on the
+ * state of the menu for a given `ListBox`
+ */
+
+var ListBoxTrigger = function ListBoxTrigger(_ref) {
+  var _cx;
+
+  var isOpen = _ref.isOpen,
+      t = _ref.translateWithId,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__menu-icon"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__menu-icon--open"), isOpen), _cx));
+  var description = isOpen ? t('close.menu') : t('open.menu');
+  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-label": description,
+    title: description,
+    className: className,
+    type: "button",
+    tabIndex: "-1"
+  }), _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, null)));
+};
+
+ListBoxTrigger.propTypes = {
+  /**
+   * Specify whether the menu is currently open, which will influence the
+   * direction of the menu icon
+   */
+  isOpen: PropTypes__default["default"].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__default["default"].func.isRequired
+};
+ListBoxTrigger.defaultProps = {
+  translateWithId: function translateWithId(id) {
+    return defaultTranslations[id];
+  }
+};
+var ListBoxTrigger$1 = ListBoxTrigger;
+
+exports["default"] = ListBoxTrigger$1;
+exports.translationIds = translationIds;

package/lib/components/ListItem/ListItem.js

@@ -0,0 +1,51 @@
+/**
+ * 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 usePrefix = require('../../internal/usePrefix.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 = ["children", "className"];
+
+var ListItem = function ListItem(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"]("".concat(prefix, "--list__item"), className);
+  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({
+    className: classNames
+  }, other), children);
+};
+
+ListItem.propTypes = {
+  /**
+   * Specify the content for the ListItem
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to apply to the underlying `<li>` node
+   */
+  className: PropTypes__default["default"].string
+};
+var ListItem$1 = ListItem;
+
+exports["default"] = ListItem$1;

package/lib/components/Loading/Loading.js

@@ -0,0 +1,112 @@
+/**
+ * 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 cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var usePrefix = require('../../internal/usePrefix.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 = ["id", "active", "className", "withOverlay", "small", "description"];
+var getInstanceId = setupGetInstanceId["default"]();
+
+function Loading(_ref) {
+  var _cx, _cx2;
+
+  var id = _ref.id,
+      active = _ref.active,
+      customClassName = _ref.className,
+      withOverlay = _ref.withOverlay,
+      small = _ref.small,
+      description = _ref.description,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  var _useRef = React.useRef(getInstanceId()),
+      instanceId = _useRef.current;
+
+  var loadingClassName = cx__default["default"](customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--loading"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--loading--small"), small), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--loading--stop"), !active), _cx));
+  var overlayClassName = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--loading-overlay"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--loading-overlay--stop"), !active), _cx2));
+  var loadingId = id || "loading-id-".concat(instanceId);
+  var loading = /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-atomic": "true",
+    "aria-labelledby": loadingId,
+    "aria-live": active ? 'assertive' : 'off',
+    className: loadingClassName
+  }), /*#__PURE__*/React__default["default"].createElement("label", {
+    id: loadingId,
+    className: "".concat(prefix, "--visually-hidden")
+  }, description), /*#__PURE__*/React__default["default"].createElement("svg", {
+    className: "".concat(prefix, "--loading__svg"),
+    viewBox: "0 0 100 100"
+  }, /*#__PURE__*/React__default["default"].createElement("title", null, description), small ? /*#__PURE__*/React__default["default"].createElement("circle", {
+    className: "".concat(prefix, "--loading__background"),
+    cx: "50%",
+    cy: "50%",
+    r: "44"
+  }) : null, /*#__PURE__*/React__default["default"].createElement("circle", {
+    className: "".concat(prefix, "--loading__stroke"),
+    cx: "50%",
+    cy: "50%",
+    r: "44"
+  })));
+  return withOverlay ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: overlayClassName
+  }, loading) : loading;
+}
+
+Loading.propTypes = {
+  /**
+   * Specify whether you want the loading indicator to be spinning or not
+   */
+  active: PropTypes__default["default"].bool,
+
+  /**
+   * Provide an optional className to be applied to the containing node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify a description that would be used to best describe the loading state
+   */
+  description: PropTypes__default["default"].string,
+
+  /**
+   * Provide an `id` to uniquely identify the label
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether you would like the small variant of <Loading>
+   */
+  small: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether you want the loader to be applied with an overlay
+   */
+  withOverlay: PropTypes__default["default"].bool
+};
+Loading.defaultProps = {
+  active: true,
+  withOverlay: true,
+  small: false,
+  description: 'Active loading indicator'
+};
+
+exports["default"] = Loading;