@carbon/react 0.16.2 → 1.0.0-rc.0

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;

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

@@ -0,0 +1,155 @@
+/**
+ * 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 { 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;
+
+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 = _objectWithoutProperties(_ref, _excluded);
+
+  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 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));
+
+  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(event, Enter)) {
+      clearSelection(event);
+
+      if (onClearSelection) {
+        onClearSelection(event);
+      }
+    }
+  }
+
+  if (selectionCount) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: tagClasses
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(prefix, "--tag__label"),
+      title: selectionCount
+    }, selectionCount), /*#__PURE__*/React__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.createElement(Close, null))));
+  }
+
+  return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
+    "aria-label": description,
+    className: className,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    tabIndex: disabled ? -1 : 0,
+    title: description,
+    type: "button"
+  }), _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];
+  }
+};
+
+export { ListBoxSelection as default, translationIds };

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

@@ -0,0 +1,68 @@
+/**
+ * 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, objectWithoutProperties as _objectWithoutProperties, extends as _extends } 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 _excluded = ["isOpen", "translateWithId"];
+
+var _defaultTranslations, _ChevronDown;
+var translationIds = {
+  'close.menu': 'close.menu',
+  'open.menu': 'open.menu'
+};
+var defaultTranslations = (_defaultTranslations = {}, _defineProperty(_defaultTranslations, translationIds['close.menu'], 'Close'), _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 = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--list-box__menu-icon"), true), _defineProperty(_cx, "".concat(prefix, "--list-box__menu-icon--open"), isOpen), _cx));
+  var description = isOpen ? t('close.menu') : t('open.menu');
+  return /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
+    "aria-label": description,
+    title: description,
+    className: className,
+    type: "button",
+    tabIndex: "-1"
+  }), _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, null)));
+};
+
+ListBoxTrigger.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
+};
+ListBoxTrigger.defaultProps = {
+  translateWithId: function translateWithId(id) {
+    return defaultTranslations[id];
+  }
+};
+var ListBoxTrigger$1 = ListBoxTrigger;
+
+export { ListBoxTrigger$1 as default, translationIds };

package/es/components/ListItem/ListItem.js

@@ -0,0 +1,41 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["children", "className"];
+
+var ListItem = function ListItem(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx("".concat(prefix, "--list__item"), className);
+  return /*#__PURE__*/React__default.createElement("li", _extends({
+    className: classNames
+  }, other), children);
+};
+
+ListItem.propTypes = {
+  /**
+   * Specify the content for the ListItem
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to apply to the underlying `<li>` node
+   */
+  className: PropTypes.string
+};
+var ListItem$1 = ListItem;
+
+export { ListItem$1 as default };

package/es/components/Loading/Loading.js

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