@carbon/react 0.16.2 → 1.0.0-rc.0

package/es/components/Layer/index.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 cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { LayerContext } from './LayerContext.js';
+
+var _excluded = ["as", "className", "children", "level"];
+var levels = ['one', 'two', 'three'];
+var MAX_LEVEL = levels.length - 1;
+function Layer(_ref) {
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
+      customClassName = _ref.className,
+      children = _ref.children,
+      overrideLevel = _ref.level,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var contextLevel = React__default.useContext(LayerContext);
+  var level = overrideLevel !== null && overrideLevel !== void 0 ? overrideLevel : contextLevel;
+  var prefix = usePrefix();
+  var className = cx("".concat(prefix, "--layer-").concat(levels[level]), customClassName); // The level should be between 0 and MAX_LEVEL
+
+  var value = Math.max(0, Math.min(level + 1, MAX_LEVEL));
+  return /*#__PURE__*/React__default.createElement(LayerContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+    className: className
+  }), children));
+}
+Layer.propTypes = {
+  /**
+   * Specify a custom component or element to be rendered as the top-level
+   * element in the component
+   */
+  as: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
+
+  /**
+   * Provide child elements to be rendered inside of `Theme`
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom class name to be used on the outermost element rendered by
+   * the component
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the layer level and override any existing levels based on hierarchy
+   */
+  level: PropTypes.oneOf([0, 1, 2])
+};
+
+export { Layer };

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,129 @@
+/**
+ * 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';
+
+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'
+};
+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 };