@carbon/react 0.17.0-rc.0 → 1.0.0

package/lib/components/Grid/Row.js

@@ -0,0 +1,75 @@
+/**
+ * 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 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 = ["as", "condensed", "narrow", "className", "children"];
+
+function Row(_ref) {
+  var _cx;
+
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
+      _ref$condensed = _ref.condensed,
+      condensed = _ref$condensed === void 0 ? false : _ref$condensed,
+      _ref$narrow = _ref.narrow,
+      narrow = _ref$narrow === void 0 ? false : _ref$narrow,
+      containerClassName = _ref.className,
+      children = _ref.children,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"](containerClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row--condensed"), condensed), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--row--narrow"), narrow), _cx));
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+    className: className
+  }, rest), children);
+}
+
+Row.propTypes = {
+  /**
+   * Provide a custom element to render instead of the default <div>
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Pass in content that will be rendered within the `Row`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify a custom className to be applied to the `Row`
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify a single row as condensed.Rows that are adjacent
+   * and are condensed will have 2px of margin between them to match gutter.
+   */
+  condensed: PropTypes__default["default"].bool,
+
+  /**
+   * Specify a single row as narrow. The container will hang
+   * 16px into the gutter.
+   */
+  narrow: PropTypes__default["default"].bool
+};
+
+exports["default"] = Row;

package/lib/components/Heading/index.js

@@ -0,0 +1,72 @@
+/**
+ * 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');
+
+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 _excluded = ["as", "children"];
+var HeadingContext = /*#__PURE__*/React__default["default"].createContext(1);
+
+function Section(_ref) {
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'section' : _ref$as,
+      children = _ref.children,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var level = React__default["default"].useContext(HeadingContext);
+  return /*#__PURE__*/React__default["default"].createElement(HeadingContext.Provider, {
+    value: Math.min(level + 1, 6)
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, rest, children));
+}
+
+Section.propTypes = {
+  /**
+   * Provide an alternative tag or component to use instead of the default
+   * <section> element
+   */
+  as: PropTypes__default["default"].elementType,
+
+  /**
+   * Specify the content that will be placed in the component
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify a class name for the outermost node of the component
+   */
+  className: PropTypes__default["default"].string
+};
+
+function Heading(props) {
+  var level = React__default["default"].useContext(HeadingContext);
+  return /*#__PURE__*/React__default["default"].createElement("h".concat(level), props);
+}
+
+Heading.propTypes = {
+  /**
+   * Specify the content that will be placed in the component
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify a class name for the outermost node of the component
+   */
+  className: PropTypes__default["default"].string
+};
+
+exports.Heading = Heading;
+exports.Section = Section;

package/lib/components/Icon/Icon.Skeleton.js

@@ -0,0 +1,55 @@
+/**
+ * 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 = ["style", "className"];
+
+var IconSkeleton = function IconSkeleton(_ref) {
+  var style = _ref.style,
+      className = _ref.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  var props = _rollupPluginBabelHelpers.objectSpread2({
+    style: style
+  }, rest);
+
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"]("".concat(prefix, "--icon--skeleton"), className)
+  }, props));
+};
+
+IconSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * The CSS styles.
+   */
+  style: PropTypes__default["default"].object
+};
+var IconSkeleton$1 = IconSkeleton;
+
+exports["default"] = IconSkeleton$1;

package/lib/components/IconButton/index.js

@@ -0,0 +1,97 @@
+/**
+ * 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 Button = require('../Button/Button.js');
+var Tooltip = require('../Tooltip/next/Tooltip.js');
+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 _excluded = ["align", "children", "defaultOpen", "enterDelayMs", "kind", "label", "leaveDelayMs", "size"];
+var IconButton = /*#__PURE__*/React__default["default"].forwardRef(function IconButton(props, ref) {
+  var align = props.align,
+      children = props.children,
+      _props$defaultOpen = props.defaultOpen,
+      defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
+      enterDelayMs = props.enterDelayMs,
+      kind = props.kind,
+      label = props.label,
+      leaveDelayMs = props.leaveDelayMs,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'md' : _props$size,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+    align: align,
+    className: "".concat(prefix, "--icon-tooltip"),
+    defaultOpen: defaultOpen,
+    enterDelayMs: enterDelayMs,
+    label: label,
+    leaveDelayMs: leaveDelayMs
+  }, /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+    kind: kind,
+    ref: ref,
+    size: size
+  }), children));
+});
+IconButton.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+
+  /**
+   * Provide an icon or asset to be rendered inside of the IconButton
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify whether the tooltip should be open when it first renders
+   */
+  defaultOpen: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the duration in milliseconds to delay before displaying the tooltip
+   */
+  enterDelayMs: PropTypes__default["default"].number,
+
+  /**
+   * Specify the type of button to be used as the base for the IconButton
+   */
+  kind: PropTypes__default["default"].oneOf(['primary', 'secondary', 'ghost', 'tertiary']),
+
+  /**
+   * Provide the label to be rendered inside of the Tooltip. The label will use
+   * `aria-labelledby` and will fully describe the child node that is provided.
+   * This means that if you have text in the child node it will not be
+   * announced to the screen reader.
+   */
+  label: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Specify the duration in milliseconds to delay before hiding the tooltip
+   */
+  leaveDelayMs: PropTypes__default["default"].number,
+
+  /**
+   * Specify the size of the Button. Defaults to `md`.
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
+};
+
+exports.IconButton = IconButton;

package/lib/components/InlineCheckbox/InlineCheckbox.js

@@ -0,0 +1,131 @@
+/**
+ * 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 PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+var useMergedRefs = require('../../internal/useMergedRefs.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 InlineCheckbox = /*#__PURE__*/React__default["default"].forwardRef(function InlineCheckbox(props, forwardRef) {
+  var ariaLabel = props.ariaLabel,
+      _props$checked = props.checked,
+      checked = _props$checked === void 0 ? false : _props$checked,
+      disabled = props.disabled,
+      id = props.id,
+      indeterminate = props.indeterminate,
+      name = props.name,
+      _props$onChange = props.onChange,
+      _onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      onClick = props.onClick,
+      onKeyDown = props.onKeyDown,
+      title = props.title;
+
+  var prefix = usePrefix.usePrefix();
+  var inputRef = React.useRef(null);
+  var ref = useMergedRefs.useMergedRefs([inputRef, forwardRef]);
+  var inputProps = {
+    checked: checked,
+    className: "".concat(prefix, "--checkbox"),
+    disabled: disabled,
+    id: id,
+    name: name,
+    onClick: onClick,
+    onChange: function onChange(evt) {
+      _onChange(evt.target.checked, id, evt);
+    },
+    onKeyDown: onKeyDown,
+    ref: ref,
+    type: 'checkbox'
+  };
+
+  if (indeterminate) {
+    inputProps.checked = false;
+    inputProps['aria-checked'] = 'mixed';
+  }
+
+  React.useEffect(function () {
+    inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--checkbox--inline")
+  }, /*#__PURE__*/React__default["default"].createElement("input", inputProps),
+  /*#__PURE__*/
+
+  /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
+  React__default["default"].createElement("label", {
+    htmlFor: id,
+    className: "".concat(prefix, "--checkbox-label"),
+    "aria-label": ariaLabel,
+    title: title,
+    onClick: function onClick(evt) {
+      evt.stopPropagation();
+    }
+  }));
+});
+InlineCheckbox.propTypes = {
+  /**
+   * Specify the label for the control
+   */
+  ariaLabel: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify whether the underlying control is checked, or not
+   */
+  checked: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the underlying input control should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Provide an `id` for the underlying input control
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify whether the control is in an indterminate state
+   */
+  indeterminate: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a `name` for the underlying input control
+   */
+  name: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Provide an optional hook that is called each time the input is updated
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Provide a handler that is invoked when a user clicks on the control
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control
+   */
+  onKeyDown: PropTypes__default["default"].func,
+
+  /**
+   * Provide an optional tooltip for the InlineCheckbox
+   */
+  title: PropTypes__default["default"].string
+};
+var InlineCheckbox$1 = InlineCheckbox;
+
+exports["default"] = InlineCheckbox$1;

package/lib/components/InlineLoading/InlineLoading.js

@@ -0,0 +1,121 @@
+/**
+ * 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 React = require('react');
+var PropTypes = require('prop-types');
+var cx = require('classnames');
+var iconsReact = require('@carbon/icons-react');
+var Loading = require('../Loading/Loading.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className", "status", "iconDescription", "description", "onSuccess", "successDelay"];
+function InlineLoading(_ref) {
+  var _title, _title2;
+
+  var className = _ref.className,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? 'active' : _ref$status,
+      iconDescription = _ref.iconDescription,
+      description = _ref.description,
+      onSuccess = _ref.onSuccess,
+      successDelay = _ref.successDelay,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var loadingClasses = cx__default["default"]("".concat(prefix, "--inline-loading"), className);
+
+  var getLoading = function getLoading() {
+    if (status === 'error') {
+      return /*#__PURE__*/React__default["default"].createElement(iconsReact.ErrorFilled, {
+        className: "".concat(prefix, "--inline-loading--error")
+      }, _title || (_title = /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription)));
+    }
+
+    if (status === 'finished') {
+      setTimeout(function () {
+        if (onSuccess) {
+          onSuccess();
+        }
+      }, successDelay);
+      return /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckmarkFilled, {
+        className: "".concat(prefix, "--inline-loading__checkmark-container")
+      }, _title2 || (_title2 = /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription)));
+    }
+
+    if (status === 'inactive' || status === 'active') {
+      return /*#__PURE__*/React__default["default"].createElement(Loading["default"], {
+        small: true,
+        description: iconDescription,
+        withOverlay: false,
+        active: status === 'active'
+      });
+    }
+
+    return undefined;
+  };
+
+  var loadingText = /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--inline-loading__text")
+  }, description);
+  var loading = getLoading();
+  var loadingAnimation = loading && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--inline-loading__animation")
+  }, loading);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: loadingClasses
+  }, other, {
+    "aria-live": 'assertive' 
+  }), loadingAnimation, description && loadingText);
+}
+InlineLoading.propTypes = {
+  /**
+   * Specify a custom className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the description for the inline loading text
+   */
+  description: PropTypes__default["default"].node,
+
+  /**
+   * Specify the description for the inline loading text
+   */
+  iconDescription: PropTypes__default["default"].string,
+
+  /**
+   * Provide an optional handler to be invoked when <InlineLoading> is
+   * successful
+   */
+  onSuccess: PropTypes__default["default"].func,
+
+  /**
+   * Specify the loading status
+   */
+  status: PropTypes__default["default"].oneOf(['inactive', 'active', 'finished', 'error']),
+
+  /**
+   * Provide a delay for the `setTimeout` for success
+   */
+  successDelay: PropTypes__default["default"].number
+};
+InlineLoading.defaultProps = {
+  successDelay: 1500
+};
+
+exports["default"] = InlineLoading;

package/lib/components/Layer/LayerContext.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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var LayerContext = /*#__PURE__*/React__default["default"].createContext(1);
+
+exports.LayerContext = LayerContext;

package/lib/components/Layer/index.js

@@ -0,0 +1,72 @@
+/**
+ * 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 React = require('react');
+var PropTypes = require('prop-types');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+var LayerContext = require('./LayerContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var contextLevel = React__default["default"].useContext(LayerContext.LayerContext);
+  var level = overrideLevel !== null && overrideLevel !== void 0 ? overrideLevel : contextLevel;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".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["default"].createElement(LayerContext.LayerContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["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__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Provide child elements to be rendered inside of `Theme`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom class name to be used on the outermost element rendered by
+   * the component
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the layer level and override any existing levels based on hierarchy
+   */
+  level: PropTypes__default["default"].oneOf([0, 1, 2])
+};
+
+exports.Layer = Layer;