@carbon/react 0.17.0 → 1.0.1

package/es/components/Grid/Grid.js

@@ -0,0 +1,63 @@
+/**
+ * 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 React__default from 'react';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { CSSGrid } from './CSSGrid.js';
+import { FlexGrid } from './FlexGrid.js';
+
+function Grid(props) {
+  var enableCSSGrid = useFeatureFlag('enable-css-grid');
+
+  if (enableCSSGrid) {
+    return /*#__PURE__*/React__default.createElement(CSSGrid, props);
+  }
+
+  return /*#__PURE__*/React__default.createElement(FlexGrid, props);
+}
+
+Grid.propTypes = {
+  /**
+   * Provide a custom element to render instead of the default <div>
+   */
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+
+  /**
+   * Pass in content that will be rendered within the `Grid`
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify a custom className to be applied to the `Grid`
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify how many columns wide the Grid should span
+   */
+  columns: PropTypes.number,
+
+  /**
+   * Collapse the gutter to 1px. Useful for fluid layouts.
+   * Rows have 1px of margin between them to match gutter.
+   */
+  condensed: PropTypes.bool,
+
+  /**
+   * Remove the default max width that the grid has set
+   */
+  fullWidth: PropTypes.bool,
+
+  /**
+   * Container hangs 16px into the gutter. Useful for
+   * typographic alignment with and without containers.
+   */
+  narrow: PropTypes.bool
+};
+
+export { Grid };

package/es/components/Grid/GridContext.js

@@ -0,0 +1,60 @@
+/**
+ * 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 React from 'react';
+
+/**
+ * Provides a grid context for communication the grid "mode" (flexbox or
+ * css-grid) along with subgrid information.
+ */
+
+var GridSettingsContext = /*#__PURE__*/React.createContext({
+  mode: 'flexbox',
+  subgrid: false
+});
+function GridSettings(_ref) {
+  var children = _ref.children,
+      mode = _ref.mode,
+      _ref$subgrid = _ref.subgrid,
+      subgrid = _ref$subgrid === void 0 ? false : _ref$subgrid;
+  var value = React.useMemo(function () {
+    return {
+      mode: mode,
+      subgrid: subgrid
+    };
+  }, [mode, subgrid]);
+  return /*#__PURE__*/React.createElement(GridSettingsContext.Provider, {
+    value: value
+  }, children);
+}
+GridSettings.propTypes = {
+  /**
+   * Pass in components which will be rendered within the `GridSettings`
+   * component
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify the grid mode for the GridContext
+   */
+  mode: PropTypes.oneOf(['flexbox', 'css-grid']).isRequired,
+
+  /**
+   * Specify whether subgrid should be enabled
+   */
+  subgrid: PropTypes.bool
+};
+/**
+ * Helper function for accessing the GridContext value
+ */
+
+function useGridSettings() {
+  return React.useContext(GridSettingsContext);
+}
+
+export { GridSettings, useGridSettings };

package/es/components/Grid/Row.js

@@ -0,0 +1,65 @@
+/**
+ * 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 = ["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 = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var className = cx(containerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--row"), true), _defineProperty(_cx, "".concat(prefix, "--row--condensed"), condensed), _defineProperty(_cx, "".concat(prefix, "--row--narrow"), narrow), _cx));
+  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+    className: className
+  }, rest), children);
+}
+
+Row.propTypes = {
+  /**
+   * Provide a custom element to render instead of the default <div>
+   */
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+
+  /**
+   * Pass in content that will be rendered within the `Row`
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify a custom className to be applied to the `Row`
+   */
+  className: PropTypes.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.bool,
+
+  /**
+   * Specify a single row as narrow. The container will hang
+   * 16px into the gutter.
+   */
+  narrow: PropTypes.bool
+};
+
+export { Row as default };

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

package/es/components/Icon/Icon.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, 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 { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["style", "className"];
+
+var IconSkeleton = function IconSkeleton(_ref) {
+  var style = _ref.style,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+
+  var props = _objectSpread2({
+    style: style
+  }, rest);
+
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx("".concat(prefix, "--icon--skeleton"), className)
+  }, props));
+};
+
+IconSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+
+  /**
+   * The CSS styles.
+   */
+  style: PropTypes.object
+};
+var IconSkeleton$1 = IconSkeleton;
+
+export { IconSkeleton$1 as default };

package/es/components/IconButton/index.js

@@ -0,0 +1,88 @@
+/**
+ * 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 Button from '../Button/Button.js';
+import { Tooltip } from '../Tooltip/next/Tooltip.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["align", "children", "defaultOpen", "enterDelayMs", "kind", "label", "leaveDelayMs", "size"];
+var IconButton = /*#__PURE__*/React__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 = _objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    align: align,
+    className: "".concat(prefix, "--icon-tooltip"),
+    defaultOpen: defaultOpen,
+    enterDelayMs: enterDelayMs,
+    label: label,
+    leaveDelayMs: leaveDelayMs
+  }, /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
+    kind: kind,
+    ref: ref,
+    size: size
+  }), children));
+});
+IconButton.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes.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.node,
+
+  /**
+   * Specify whether the tooltip should be open when it first renders
+   */
+  defaultOpen: PropTypes.bool,
+
+  /**
+   * Specify the duration in milliseconds to delay before displaying the tooltip
+   */
+  enterDelayMs: PropTypes.number,
+
+  /**
+   * Specify the type of button to be used as the base for the IconButton
+   */
+  kind: PropTypes.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.node.isRequired,
+
+  /**
+   * Specify the duration in milliseconds to delay before hiding the tooltip
+   */
+  leaveDelayMs: PropTypes.number,
+
+  /**
+   * Specify the size of the Button. Defaults to `md`.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+};
+
+export { IconButton };

package/es/components/InlineCheckbox/InlineCheckbox.js

@@ -0,0 +1,122 @@
+/**
+ * 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 React__default, { useRef, useEffect } from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
+
+var InlineCheckbox = /*#__PURE__*/React__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();
+  var inputRef = useRef(null);
+  var ref = 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';
+  }
+
+  useEffect(function () {
+    inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--checkbox--inline")
+  }, /*#__PURE__*/React__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.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.string.isRequired,
+
+  /**
+   * Specify whether the underlying control is checked, or not
+   */
+  checked: PropTypes.bool,
+
+  /**
+   * Specify whether the underlying input control should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide an `id` for the underlying input control
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether the control is in an indterminate state
+   */
+  indeterminate: PropTypes.bool,
+
+  /**
+   * Provide a `name` for the underlying input control
+   */
+  name: PropTypes.string.isRequired,
+
+  /**
+   * Provide an optional hook that is called each time the input is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide a handler that is invoked when a user clicks on the control
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Provide an optional tooltip for the InlineCheckbox
+   */
+  title: PropTypes.string
+};
+var InlineCheckbox$1 = InlineCheckbox;
+
+export { InlineCheckbox$1 as default };

package/es/components/InlineLoading/InlineLoading.js

@@ -0,0 +1,111 @@
+/**
+ * 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 { ErrorFilled, CheckmarkFilled } from '@carbon/icons-react';
+import Loading from '../Loading/Loading.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+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 = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var loadingClasses = cx("".concat(prefix, "--inline-loading"), className);
+
+  var getLoading = function getLoading() {
+    if (status === 'error') {
+      return /*#__PURE__*/React__default.createElement(ErrorFilled, {
+        className: "".concat(prefix, "--inline-loading--error")
+      }, _title || (_title = /*#__PURE__*/React__default.createElement("title", null, iconDescription)));
+    }
+
+    if (status === 'finished') {
+      setTimeout(function () {
+        if (onSuccess) {
+          onSuccess();
+        }
+      }, successDelay);
+      return /*#__PURE__*/React__default.createElement(CheckmarkFilled, {
+        className: "".concat(prefix, "--inline-loading__checkmark-container")
+      }, _title2 || (_title2 = /*#__PURE__*/React__default.createElement("title", null, iconDescription)));
+    }
+
+    if (status === 'inactive' || status === 'active') {
+      return /*#__PURE__*/React__default.createElement(Loading, {
+        small: true,
+        description: iconDescription,
+        withOverlay: false,
+        active: status === 'active'
+      });
+    }
+
+    return undefined;
+  };
+
+  var loadingText = /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--inline-loading__text")
+  }, description);
+  var loading = getLoading();
+  var loadingAnimation = loading && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--inline-loading__animation")
+  }, loading);
+  return /*#__PURE__*/React__default.createElement("div", _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.string,
+
+  /**
+   * Specify the description for the inline loading text
+   */
+  description: PropTypes.node,
+
+  /**
+   * Specify the description for the inline loading text
+   */
+  iconDescription: PropTypes.string,
+
+  /**
+   * Provide an optional handler to be invoked when <InlineLoading> is
+   * successful
+   */
+  onSuccess: PropTypes.func,
+
+  /**
+   * Specify the loading status
+   */
+  status: PropTypes.oneOf(['inactive', 'active', 'finished', 'error']),
+
+  /**
+   * Provide a delay for the `setTimeout` for success
+   */
+  successDelay: PropTypes.number
+};
+InlineLoading.defaultProps = {
+  successDelay: 1500
+};
+
+export { InlineLoading as default };

package/es/components/Layer/LayerContext.js

@@ -0,0 +1,12 @@
+/**
+ * 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 React__default from 'react';
+
+var LayerContext = /*#__PURE__*/React__default.createContext(1);
+
+export { LayerContext };

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 };