@carbon/react 0.16.2 → 1.0.0-rc.0

package/es/components/Accordion/AccordionItem.js

@@ -0,0 +1,181 @@
+/**
+ * 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, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { ChevronRight } from '@carbon/icons-react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default, { useState } from 'react';
+import '../Text/index.js';
+import { useId } from '../../internal/useId.js';
+import deprecate from '../../prop-types/deprecate.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { Text } from '../Text/Text.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Escape } from '../../internal/keyboard/keys.js';
+
+var _excluded = ["children", "className", "iconDescription", "open", "onHeadingClick", "renderExpando", "renderToggle", "title", "disabled"];
+
+var defaultRenderToggle = function defaultRenderToggle(props) {
+  return /*#__PURE__*/React__default.createElement("button", _extends({
+    type: "button"
+  }, props));
+};
+
+function AccordionItem(_ref) {
+  var _cx;
+
+  var children = _ref.children,
+      customClassName = _ref.className;
+      _ref.iconDescription;
+      var _ref$open = _ref.open,
+      open = _ref$open === void 0 ? false : _ref$open,
+      onHeadingClick = _ref.onHeadingClick,
+      _ref$renderExpando = _ref.renderExpando,
+      renderExpando = _ref$renderExpando === void 0 ? defaultRenderToggle : _ref$renderExpando,
+      renderToggle = _ref.renderToggle,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? 'title' : _ref$title,
+      disabled = _ref.disabled,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(open),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = useState(open),
+      _useState4 = _slicedToArray(_useState3, 2),
+      prevIsOpen = _useState4[0],
+      setPrevIsOpen = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      animation = _useState6[0],
+      setAnimation = _useState6[1];
+
+  var id = useId('accordion-item');
+  var prefix = usePrefix();
+  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--accordion__item"), true), _defineProperty(_cx, "".concat(prefix, "--accordion__item--active"), isOpen), _defineProperty(_cx, "".concat(prefix, "--accordion__item--").concat(animation), animation), _defineProperty(_cx, "".concat(prefix, "--accordion__item--disabled"), disabled), _defineProperty(_cx, customClassName, !!customClassName), _cx));
+  var Toggle = renderToggle || renderExpando; // remove renderExpando in next major release
+
+  if (open !== prevIsOpen) {
+    setAnimation(isOpen ? 'collapsing' : 'expanding');
+    setIsOpen(open);
+    setPrevIsOpen(open);
+  } // When the AccordionItem heading is clicked, toggle the open state of the
+  // panel
+
+
+  function onClick(event) {
+    var nextValue = !isOpen;
+    setAnimation(isOpen ? 'collapsing' : 'expanding');
+    setIsOpen(nextValue);
+
+    if (onHeadingClick) {
+      // TODO: normalize signature, potentially:
+      // onHeadingClick :: (event: Event, state: { isOpen: Boolean }) => any
+      onHeadingClick({
+        isOpen: nextValue,
+        event: event
+      });
+    }
+  } // If the AccordionItem is open, and the user hits the ESC key, then close it
+
+
+  function onKeyDown(event) {
+    if (isOpen && match(event, Escape)) {
+      setIsOpen(false);
+    }
+  }
+
+  function handleAnimationEnd(event) {
+    if (rest.handleAnimationEnd) {
+      rest.handleAnimationEnd(event);
+    }
+
+    setAnimation('');
+  }
+
+  return /*#__PURE__*/React__default.createElement("li", _extends({
+    className: className
+  }, rest, {
+    onAnimationEnd: handleAnimationEnd
+  }), /*#__PURE__*/React__default.createElement(Toggle, {
+    disabled: disabled,
+    "aria-controls": id,
+    "aria-expanded": isOpen,
+    className: "".concat(prefix, "--accordion__heading"),
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    type: "button"
+  }, /*#__PURE__*/React__default.createElement(ChevronRight, {
+    className: "".concat(prefix, "--accordion__arrow")
+  }), /*#__PURE__*/React__default.createElement(Text, {
+    as: "div",
+    className: "".concat(prefix, "--accordion__title")
+  }, title)), /*#__PURE__*/React__default.createElement("div", {
+    id: id,
+    className: "".concat(prefix, "--accordion__content")
+  }, children));
+}
+
+AccordionItem.propTypes = {
+  /**
+   * Provide the contents of your AccordionItem
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether an individual AccordionItem should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * The description of the expand icon.
+   */
+  iconDescription: deprecate(PropTypes.string, 'The `iconDescription` prop has been deprecated as it is no longer ' + 'required. Feel free to remove this prop from <AccordionItem>. This ' + 'prop will be removed in the next major release of ' + '`carbon-components-react`'),
+
+  /**
+   * The handler of the massaged `click` event.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * The handler of the massaged `click` event on the heading.
+   */
+  onHeadingClick: PropTypes.func,
+
+  /**
+   * `true` to open the expand.
+   */
+  open: PropTypes.bool,
+
+  /**
+   * The callback function to render the expand button.
+   * Can be a React component class.
+   */
+  renderExpando: deprecate(PropTypes.func, 'The `renderExpando` prop has been deprecated and will be removed in the next major release of Carbon. Use the `renderToggle` prop instead.'),
+
+  /**
+   * The callback function to render the expand button.
+   * Can be a React component class.
+   */
+  renderToggle: PropTypes.func,
+
+  /**
+   * The accordion title.
+   */
+  title: PropTypes.node
+};
+
+export { AccordionItem as default };

package/es/components/Accordion/index.js

@@ -0,0 +1,9 @@
+/**
+ * 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 Accordion from './Accordion.js';
+export { default } from './Accordion.js';

package/es/components/AccordionItem/index.js

@@ -0,0 +1,11 @@
+/**
+ * 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 AccordionItem from '../Accordion/AccordionItem.js';
+export { default } from '../Accordion/AccordionItem.js';
+
+// Alias for import paths for build tools that rely on this

package/es/components/AspectRatio/AspectRatio.js

@@ -0,0 +1,67 @@
+/**
+ * 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 cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["as", "className", "children", "ratio"];
+/**
+ * The AspectRatio component provides a `ratio` prop that will be used to
+ * specify the aspect ratio that the children you provide will be displayed in.
+ * This is often useful alongside our grid components, or for media assets like
+ * images or videos.
+ */
+
+function AspectRatio(_ref) {
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
+      containerClassName = _ref.className,
+      children = _ref.children,
+      _ref$ratio = _ref.ratio,
+      ratio = _ref$ratio === void 0 ? '1x1' : _ref$ratio,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var className = cx(containerClassName, "".concat(prefix, "--aspect-ratio"), "".concat(prefix, "--aspect-ratio--").concat(ratio));
+  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+    className: className
+  }, rest), children);
+}
+
+AspectRatio.propTypes = {
+  /**
+   * Provide a custom component or string to be rendered as the outermost node
+   * of the component. This is useful if you want to deviate from the default
+   * `div` tag, where you could specify `section` or `article` instead.
+   *
+   * ```jsx
+   * <AspectRatio as="article">My content</AspectRatio>
+   * ```
+   */
+  as: PropTypes.elementType,
+
+  /**
+   * Specify the content that will be placed in the aspect ratio
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify a class name for the outermost node of the component
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the ratio to be used by the aspect ratio container. This will
+   * determine what aspect ratio your content will be displayed in.
+   */
+  ratio: PropTypes.oneOf(['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'])
+};
+
+export { AspectRatio as default };

package/es/components/Breadcrumb/Breadcrumb.Skeleton.js

@@ -0,0 +1,45 @@
+/**
+ * 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 _Item, _Item2, _Item3;
+
+var _excluded = ["className"];
+
+function Item() {
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--breadcrumb-item")
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--link")
+  }, "\xA0"));
+}
+
+function BreadcrumbSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classes = cx("".concat(prefix, "--breadcrumb"), "".concat(prefix, "--skeleton"), className);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classes
+  }, rest), _Item || (_Item = /*#__PURE__*/React__default.createElement(Item, null)), _Item2 || (_Item2 = /*#__PURE__*/React__default.createElement(Item, null)), _Item3 || (_Item3 = /*#__PURE__*/React__default.createElement(Item, null)));
+}
+
+BreadcrumbSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string
+};
+
+export { BreadcrumbSkeleton as default };

package/es/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,58 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["aria-label", "children", "className", "noTrailingSlash"];
+var Breadcrumb = /*#__PURE__*/React__default.forwardRef(function Breadcrumb(_ref, ref) {
+  var _cx;
+
+  var ariaLabel = _ref['aria-label'],
+      children = _ref.children,
+      customClassNameNav = _ref.className,
+      noTrailingSlash = _ref.noTrailingSlash,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--breadcrumb"), true), _defineProperty(_cx, "".concat(prefix, "--breadcrumb--no-trailing-slash"), noTrailingSlash), _cx));
+  return /*#__PURE__*/React__default.createElement("nav", _extends({
+    className: customClassNameNav,
+    "aria-label": ariaLabel ? ariaLabel : 'Breadcrumb',
+    ref: ref
+  }, rest), /*#__PURE__*/React__default.createElement("ol", {
+    className: className
+  }, children));
+});
+Breadcrumb.displayName = 'Breadcrumb';
+Breadcrumb.propTypes = {
+  /**
+   * Specify the label for the breadcrumb container
+   */
+  'aria-label': PropTypes.string,
+
+  /**
+   * Pass in the BreadcrumbItem's for your Breadcrumb
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optional prop to omit the trailing slash for the breadcrumbs
+   */
+  noTrailingSlash: PropTypes.bool
+};
+var Breadcrumb$1 = Breadcrumb;
+
+export { Breadcrumb$1 as default };

package/es/components/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,94 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import Link from '../Link/Link.js';
+import { OverflowMenuHorizontal } from '@carbon/icons-react';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["aria-current", "children", "className", "href", "isCurrentPage"];
+var BreadcrumbItem = /*#__PURE__*/React__default.forwardRef(function BreadcrumbItem(_ref, ref) {
+  var _cx;
+
+  var ariaCurrent = _ref['aria-current'],
+      children = _ref.children,
+      customClassName = _ref.className,
+      href = _ref.href,
+      isCurrentPage = _ref.isCurrentPage,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--breadcrumb-item"), true), _defineProperty(_cx, "".concat(prefix, "--breadcrumb-item--current"), isCurrentPage && ariaCurrent !== 'page'), _defineProperty(_cx, customClassName, !!customClassName), _cx));
+
+  if (children.type && children.type.displayName !== undefined && children.type.displayName.includes('OverflowMenu')) {
+    var horizontalOverflowIcon = /*#__PURE__*/React__default.createElement(OverflowMenuHorizontal, {
+      className: "".concat(prefix, "--overflow-menu__icon")
+    });
+    return /*#__PURE__*/React__default.createElement("li", _extends({
+      className: className
+    }, rest), /*#__PURE__*/React__default.cloneElement(children, {
+      menuOptionsClass: "".concat(prefix, "--breadcrumb-menu-options"),
+      menuOffset: {
+        top: 10,
+        left: 59
+      },
+      renderIcon: function renderIcon() {
+        return horizontalOverflowIcon;
+      }
+    }));
+  }
+
+  if (typeof children === 'string') {
+    return /*#__PURE__*/React__default.createElement("li", _extends({
+      className: className,
+      ref: ref
+    }, rest), href ? /*#__PURE__*/React__default.createElement(Link, {
+      href: href,
+      "aria-current": ariaCurrent
+    }, children) : /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(prefix, "--link")
+    }, children));
+  }
+
+  return /*#__PURE__*/React__default.createElement("li", _extends({
+    className: className,
+    ref: ref
+  }, rest), /*#__PURE__*/React__default.cloneElement(children, {
+    'aria-current': ariaCurrent,
+    className: cx("".concat(prefix, "--link"), children.props.className)
+  }));
+});
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+BreadcrumbItem.propTypes = {
+  'aria-current': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+
+  /**
+   * Pass in content that will be inside of the BreadcrumbItem
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optional string representing the link location for the BreadcrumbItem
+   */
+  href: PropTypes.string,
+
+  /**
+   * Provide if this breadcrumb item represents the current page
+   */
+  isCurrentPage: PropTypes.bool
+};
+var BreadcrumbItem$1 = BreadcrumbItem;
+
+export { BreadcrumbItem$1 as default };

package/es/components/Button/Button.Skeleton.js

@@ -0,0 +1,71 @@
+/**
+ * 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, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import * as FeatureFlags from '@carbon/feature-flags';
+
+var _excluded = ["className", "small", "href", "size"];
+
+var ButtonSkeleton = function ButtonSkeleton(_ref) {
+  var _cx;
+
+  var className = _ref.className,
+      _ref$small = _ref.small,
+      small = _ref$small === void 0 ? false : _ref$small,
+      href = _ref.href,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? FeatureFlags.enabled('enable-v11-release') ? 'lg' : 'default' : _ref$size,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var enabled = useFeatureFlag('enable-v11-release');
+  var prefix = usePrefix();
+  var buttonClasses = cx(className, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _defineProperty(_cx, "".concat(prefix, "--btn"), true), _defineProperty(_cx, "".concat(prefix, "--btn--sm"), small || size === 'sm'), _defineProperty(_cx, "".concat(prefix, "--btn--md"), size === 'field' || size === 'md'), _defineProperty(_cx, "".concat(prefix, "--btn--lg"), enabled ? size === 'xl' : size === 'lg'), _defineProperty(_cx, "".concat(prefix, "--btn--xl"), enabled ? size === '2xl' : size === 'xl'), _cx));
+
+  var commonProps = _objectSpread2({
+    className: buttonClasses
+  }, rest);
+
+  var button = /*#__PURE__*/React__default.createElement("div", commonProps);
+  var anchor = /*#__PURE__*/React__default.createElement("a", _extends({}, commonProps, {
+    href: href,
+    role: "button"
+  })); // eslint-disable-line
+
+  return href ? anchor : button;
+};
+
+ButtonSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optionally specify an href for your Button to become an `<a>` element
+   */
+  href: PropTypes.string,
+
+  /**
+   * Specify the size of the button, from a list of available sizes.
+   * For `default` buttons, this prop can remain unspecified or use `default`.
+   * In the next major release of Carbon, `default`, `field`, and `small` will be removed
+   */
+  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl']) : PropTypes.oneOf(['default', 'field', 'small', 'sm', 'md', 'lg', 'xl', '2xl']),
+
+  /**
+   * Specify whether the Button should be a small variant
+   */
+  small: PropTypes.bool
+};
+var ButtonSkeleton$1 = ButtonSkeleton;
+
+export { ButtonSkeleton$1 as default };