@carbon/react 0.17.0 → 1.0.1

package/es/components/FormLabel/FormLabel.js

@@ -0,0 +1,48 @@
+/**
+ * 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';
+import * as FeatureFlags from '@carbon/feature-flags';
+
+var _excluded = ["className", "children", "id"];
+
+function FormLabel(_ref) {
+  var customClassName = _ref.className,
+      children = _ref.children,
+      id = _ref.id,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var className = cx("".concat(prefix, "--label"), _defineProperty({}, "".concat(prefix, "--label--no-margin"), FeatureFlags.enabled('enable-v11-release')), customClassName);
+  return /*#__PURE__*/React__default.createElement("label", _extends({
+    htmlFor: id,
+    className: className
+  }, rest), children);
+}
+
+FormLabel.propTypes = {
+  /**
+   * Specify the content of the form label
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom className to be applied to the containing <label> node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Provide a unique id for the given <FormLabel>
+   */
+  id: PropTypes.string
+};
+
+export { FormLabel as default };

package/es/components/Grid/CSSGrid.js

@@ -0,0 +1,139 @@
+/**
+ * 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, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { useGridSettings, GridSettings } from './GridContext.js';
+
+var _excluded = ["as", "children", "className", "condensed", "fullWidth", "narrow"],
+    _excluded2 = ["as", "className", "children", "mode"];
+
+function CSSGrid(_ref) {
+  var _cx;
+
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
+      children = _ref.children,
+      customClassName = _ref.className,
+      _ref$condensed = _ref.condensed,
+      condensed = _ref$condensed === void 0 ? false : _ref$condensed,
+      _ref$fullWidth = _ref.fullWidth,
+      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+      _ref$narrow = _ref.narrow,
+      narrow = _ref$narrow === void 0 ? false : _ref$narrow,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+
+  var _useGridSettings = useGridSettings(),
+      subgrid = _useGridSettings.subgrid;
+
+  var mode = 'wide';
+
+  if (narrow) {
+    mode = 'narrow';
+  } else if (condensed) {
+    mode = 'condensed';
+  }
+
+  if (subgrid) {
+    return /*#__PURE__*/React__default.createElement(GridSettings, {
+      mode: "css-grid",
+      subgrid: true
+    }, /*#__PURE__*/React__default.createElement(Subgrid, _extends({
+      as: BaseComponent,
+      className: customClassName,
+      mode: mode
+    }, rest), children));
+  }
+
+  var className = cx(customClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--css-grid"), true), _defineProperty(_cx, "".concat(prefix, "--css-grid--condensed"), mode === 'condensed'), _defineProperty(_cx, "".concat(prefix, "--css-grid--narrow"), mode === 'narrow'), _defineProperty(_cx, "".concat(prefix, "--css-grid--full-width"), fullWidth), _cx));
+  return /*#__PURE__*/React__default.createElement(GridSettings, {
+    mode: "css-grid",
+    subgrid: true
+  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+    className: className
+  }, rest), children));
+}
+
+CSSGrid.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,
+
+  /**
+   * 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
+};
+
+function Subgrid(_ref2) {
+  var _cx2;
+
+  var _ref2$as = _ref2.as,
+      BaseComponent = _ref2$as === void 0 ? 'div' : _ref2$as,
+      customClassName = _ref2.className,
+      children = _ref2.children,
+      mode = _ref2.mode,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  var prefix = usePrefix();
+  var className = cx(customClassName, (_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--subgrid"), true), _defineProperty(_cx2, "".concat(prefix, "--subgrid--condensed"), mode === 'condensed'), _defineProperty(_cx2, "".concat(prefix, "--subgrid--narrow"), mode === 'narrow'), _defineProperty(_cx2, "".concat(prefix, "--subgrid--wide"), mode === 'wide'), _cx2));
+  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+    className: className
+  }), children);
+}
+
+Subgrid.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 `Subgrid`
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify a custom className to be applied to the `Subgrid`
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the grid mode for the subgrid
+   */
+  mode: PropTypes.oneOf(['wide', 'narrow', 'condensed'])
+};
+
+export { CSSGrid };

package/es/components/Grid/Column.js

@@ -0,0 +1,363 @@
+/**
+ * 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, defineProperty as _defineProperty, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import * as FeatureFlags from '@carbon/feature-flags';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { useGridSettings } from './GridContext.js';
+
+var _excluded = ["as", "children", "className", "sm", "md", "lg", "xlg", "max"],
+    _excluded2 = ["as", "children", "className", "sm", "md", "lg", "xlg", "max", "span"];
+
+function Column(_ref) {
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
+      children = _ref.children,
+      customClassName = _ref.className,
+      sm = _ref.sm,
+      md = _ref.md,
+      lg = _ref.lg,
+      xlg = _ref.xlg,
+      max = _ref.max,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useGridSettings = useGridSettings(),
+      mode = _useGridSettings.mode;
+
+  var prefix = usePrefix();
+
+  if (mode === 'css-grid') {
+    return /*#__PURE__*/React__default.createElement(CSSGridColumn, _extends({
+      as: BaseComponent,
+      className: customClassName,
+      sm: sm,
+      md: md,
+      lg: lg,
+      xlg: xlg,
+      max: max
+    }, rest), children);
+  }
+
+  var columnClassName = getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max], prefix);
+  var className = cx(customClassName, columnClassName, _defineProperty({}, "".concat(prefix, "--col"), columnClassName.length === 0));
+  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+    className: className
+  }, rest), children);
+}
+
+var percentSpanType = PropTypes.oneOf(['25%', '50%', '75%', '100%']);
+var spanPropType = FeatureFlags.enabled('enable-css-grid') ? PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.shape({
+  span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
+  offset: PropTypes.number,
+  start: PropTypes.number,
+  end: PropTypes.number
+}), percentSpanType]) : PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.shape({
+  span: PropTypes.number,
+  offset: PropTypes.number
+})]);
+Column.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 `Column`
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify a custom className to be applied to the `Column`
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
+   * This breakpoint supports 16 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  lg: spanPropType,
+
+  /**
+   * Specify column span for the `max` breakpoint. This breakpoint supports 16
+   * columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  max: spanPropType,
+
+  /**
+   * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
+   * This breakpoint supports 8 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  md: spanPropType,
+
+  /**
+   * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
+   * This breakpoint supports 4 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  sm: spanPropType,
+
+  /**
+   * Specify column span for the `xlg` breakpoint (Default breakpoint up to
+   * 1584px) This breakpoint supports 16 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  xlg: spanPropType
+};
+
+function CSSGridColumn(_ref2) {
+  var _ref2$as = _ref2.as,
+      BaseComponent = _ref2$as === void 0 ? 'div' : _ref2$as,
+      children = _ref2.children,
+      containerClassName = _ref2.className,
+      sm = _ref2.sm,
+      md = _ref2.md,
+      lg = _ref2.lg,
+      xlg = _ref2.xlg,
+      max = _ref2.max,
+      span = _ref2.span,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  var prefix = usePrefix();
+  var breakpointClassName = getClassNameForBreakpoints([sm, md, lg, xlg, max], prefix);
+  var spanClassName = getClassNameForSpan(span, prefix);
+  var className = cx(containerClassName, breakpointClassName, spanClassName, _defineProperty({}, "".concat(prefix, "--css-grid-column"), true));
+  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+    className: className
+  }, rest), children);
+}
+
+CSSGridColumn.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 `Column`
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify a custom className to be applied to the `Column`
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
+   * This breakpoint supports 16 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  lg: spanPropType,
+
+  /**
+   * Specify column span for the `max` breakpoint. This breakpoint supports 16
+   * columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  max: spanPropType,
+
+  /**
+   * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
+   * This breakpoint supports 8 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  md: spanPropType,
+
+  /**
+   * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
+   * This breakpoint supports 4 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  sm: spanPropType,
+
+  /**
+   * Specify constant column span, start,  or end values that will not change
+   * based on breakpoint
+   */
+  span: PropTypes.oneOfType([PropTypes.number, percentSpanType, PropTypes.shape({
+    span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
+    start: PropTypes.number,
+    end: PropTypes.number
+  })]),
+
+  /**
+   * Specify column span for the `xlg` breakpoint (Default breakpoint up to
+   * 1584px) This breakpoint supports 16 columns by default.
+   *
+   * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+   */
+  xlg: spanPropType
+};
+var breakpointNames = ['sm', 'md', 'lg', 'xlg', 'max'];
+/**
+ * @typedef {object} Breakpoint
+ * @property {boolean|number} [span]
+ * @property {number} [offset]
+ */
+
+/**
+ * Build the appropriate className for the given set of breakpoints.
+ * @param {Array<boolean|number|Breakpoint>} breakpoints
+ * @returns {string}
+ */
+
+function getClassNameForBreakpoints(breakpoints, prefix) {
+  var classNames = [];
+
+  for (var i = 0; i < breakpoints.length; i++) {
+    var breakpoint = breakpoints[i];
+
+    if (breakpoint === undefined || breakpoint === null) {
+      continue;
+    }
+
+    var name = breakpointNames[i]; // If our breakpoint is a boolean, the user has specified that the column
+    // should be "auto" at this size
+
+    if (breakpoint === true) {
+      classNames.push("".concat(prefix, "--").concat(name, ":col-span-auto"));
+      continue;
+    } // If our breakpoint is a string, the user has specified a percent
+    // they'd like this column to span.
+
+
+    if (typeof breakpoint === 'string') {
+      classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(breakpoint.slice(0, -1)));
+      continue;
+    } // If our breakpoint is a number, the user has specified the number of
+    // columns they'd like this column to span
+
+
+    if (typeof breakpoint === 'number') {
+      classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(breakpoint));
+      continue;
+    }
+
+    var span = breakpoint.span,
+        offset = breakpoint.offset,
+        start = breakpoint.start,
+        end = breakpoint.end;
+
+    if (typeof offset === 'number' && offset > 0) {
+      classNames.push("".concat(prefix, "--").concat(name, ":col-start-").concat(offset + 1));
+    }
+
+    if (typeof start === 'number') {
+      classNames.push("".concat(prefix, "--").concat(name, ":col-start-").concat(start));
+    }
+
+    if (typeof end === 'number') {
+      classNames.push("".concat(prefix, "--").concat(name, ":col-end-").concat(end));
+    }
+
+    if (typeof span === 'number') {
+      classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(span));
+    } else if (typeof span === 'string') {
+      classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(span.slice(0, -1)));
+      continue;
+    }
+  }
+
+  return classNames.join(' ');
+}
+/**
+ * Build the appropriate className for the given set of breakpoints.
+ * @param {Array<boolean|number|Breakpoint>} breakpoints
+ * @returns {string}
+ */
+
+
+function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
+  var classNames = [];
+
+  for (var i = 0; i < breakpoints.length; i++) {
+    var breakpoint = breakpoints[i];
+
+    if (breakpoint === undefined || breakpoint === null) {
+      continue;
+    }
+
+    var name = breakpointNames[i]; // If our breakpoint is a boolean, the user has specified that the column
+    // should be "auto" at this size
+
+    if (breakpoint === true) {
+      classNames.push("".concat(prefix, "--col-").concat(name));
+      continue;
+    } // If our breakpoint is a number, the user has specified the number of
+    // columns they'd like this column to span
+
+
+    if (typeof breakpoint === 'number') {
+      classNames.push("".concat(prefix, "--col-").concat(name, "-").concat(breakpoint));
+      continue;
+    }
+
+    var span = breakpoint.span,
+        offset = breakpoint.offset;
+
+    if (typeof span === 'number') {
+      classNames.push("".concat(prefix, "--col-").concat(name, "-").concat(span));
+    }
+
+    if (span === true) {
+      classNames.push("".concat(prefix, "--col-").concat(name));
+    }
+
+    if (typeof offset === 'number') {
+      classNames.push("".concat(prefix, "--offset-").concat(name, "-").concat(offset));
+    }
+  }
+
+  return classNames.join(' ');
+}
+/**
+ * Build the appropriate className for a span value
+ */
+
+
+function getClassNameForSpan(value, prefix) {
+  var classNames = [];
+
+  if (typeof value === 'number' || typeof value === 'string') {
+    classNames.push("".concat(prefix, "--col-span-").concat(value));
+  } else if (_typeof(value) === 'object') {
+    var span = value.span,
+        start = value.start,
+        end = value.end;
+
+    if (span !== undefined && span !== null) {
+      classNames.push("".concat(prefix, "--col-span-").concat(span));
+    }
+
+    if (start !== undefined && start !== null) {
+      classNames.push("".concat(prefix, "--col-start-").concat(start));
+    }
+
+    if (end !== undefined && end !== null) {
+      classNames.push("".concat(prefix, "--col-end-").concat(end));
+    }
+  }
+
+  return classNames.join('');
+}
+
+export { Column as default };

package/es/components/Grid/ColumnHang.js

@@ -0,0 +1,51 @@
+/**
+ * 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"];
+/**
+ * Helper component for rendering content that hangs on the column. Useful when
+ * trying to align content across different grid modes
+ */
+
+function ColumnHang(_ref) {
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
+      customClassName = _ref.className,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var className = cx(customClassName, "".concat(prefix, "--grid-column-hang"));
+  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+    className: className
+  }), children);
+}
+
+ColumnHang.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
+};
+
+export { ColumnHang };

package/es/components/Grid/FlexGrid.js

@@ -0,0 +1,76 @@
+/**
+ * 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';
+import { GridSettings } from './GridContext.js';
+
+var _excluded = ["as", "condensed", "narrow", "fullWidth", "className", "children"];
+
+function FlexGrid(_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,
+      _ref$fullWidth = _ref.fullWidth,
+      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+      containerClassName = _ref.className,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var className = cx(containerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--grid"), true), _defineProperty(_cx, "".concat(prefix, "--grid--condensed"), condensed), _defineProperty(_cx, "".concat(prefix, "--grid--narrow"), narrow), _defineProperty(_cx, "".concat(prefix, "--grid--full-width"), fullWidth), _cx));
+  return /*#__PURE__*/React__default.createElement(GridSettings, {
+    mode: "flexbox",
+    subgrid: false
+  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+    className: className
+  }, rest), children));
+}
+
+FlexGrid.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 `FlexGrid`
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify a custom className to be applied to the `FlexGrid`
+   */
+  className: PropTypes.string,
+
+  /**
+   * 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 { FlexGrid };