@carbon/react 0.17.0 → 1.0.0-rc.0

package/es/components/Stack/Stack.js

@@ -0,0 +1,102 @@
+/**
+ * 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 { spacing } from '@carbon/layout';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["as", "children", "className", "gap", "orientation"];
+/**
+ * The steps in the spacing scale
+ * @type {Array<number>}
+ */
+
+var SPACING_STEPS = Array.from({
+  length: spacing.length - 1
+}).map(function (_, step) {
+  return step + 1;
+});
+/**
+ * The Stack component is a useful layout utility in a component-based model.
+ * This allows components to not use margin and instead delegate the
+ * responsibility of positioning and layout to parent components.
+ *
+ * In the case of the Stack component, it uses the spacing scale from the
+ * Design Language in order to determine how much space there should be between
+ * items rendered by the Stack component. It also supports a custom `gap` prop
+ * which will allow a user to provide a custom value for the gap of the layout.
+ *
+ * This component supports both horizontal and vertical orientations.
+ *
+ * Inspiration for this component:
+ *
+ * - https://paste.twilio.design/layout/stack/
+ * - https://github.com/Workday/canvas-kit/blob/f2f599654876700f483a1d8c5de82a41315c76f1/modules/labs-react/layout/lib/Stack.tsx
+ */
+
+var Stack = /*#__PURE__*/React__default.forwardRef(function Stack(props, ref) {
+  var _cx;
+
+  var _props$as = props.as,
+      BaseComponent = _props$as === void 0 ? 'div' : _props$as,
+      children = props.children,
+      customClassName = props.className,
+      gap = props.gap,
+      _props$orientation = props.orientation,
+      orientation = _props$orientation === void 0 ? 'vertical' : _props$orientation,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix();
+  var className = cx(customClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--stack-").concat(orientation), true), _defineProperty(_cx, "".concat(prefix, "--stack-scale-").concat(gap), typeof gap === 'number'), _cx));
+  var style = {};
+
+  if (typeof gap === 'string') {
+    style["--".concat(prefix, "-stack-gap")] = gap;
+  }
+
+  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+    ref: ref,
+    className: className,
+    style: style
+  }), children);
+});
+Stack.propTypes = {
+  /**
+   * Provide a custom element type to render as the outermost element in
+   * the Stack component. By default, this component will render a `div`.
+   */
+  as: PropTypes.elementType,
+
+  /**
+   * Provide the elements that will be rendered as children inside of the Stack
+   * component. These elements will have having spacing between them according
+   * to the `step` and `orientation` prop
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom class name to be used by the outermost element rendered by
+   * Stack
+   */
+  className: PropTypes.string,
+
+  /**
+   * Provide either a custom value or a step from the spacing scale to be used
+   * as the gap in the layout
+   */
+  gap: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(SPACING_STEPS)]),
+
+  /**
+   * Specify the orientation of them items in the Stack
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+};
+
+export { Stack };

package/es/components/Stack/index.js

@@ -0,0 +1,26 @@
+/**
+ * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { Stack } from './Stack.js';
+export { Stack } from './Stack.js';
+
+var HStack = /*#__PURE__*/React__default.forwardRef(function HStack(props, ref) {
+  return /*#__PURE__*/React__default.createElement(Stack, _extends({}, props, {
+    ref: ref,
+    orientation: "horizontal"
+  }));
+});
+var VStack = /*#__PURE__*/React__default.forwardRef(function VStack(props, ref) {
+  return /*#__PURE__*/React__default.createElement(Stack, _extends({}, props, {
+    ref: ref,
+    orientation: "vertical"
+  }));
+});
+
+export { HStack, VStack };

package/es/components/StructuredList/StructuredList.Skeleton.js

@@ -0,0 +1,82 @@
+/**
+ * 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 _span, _span2, _span3;
+
+var _excluded = ["rowCount", "border", "className"];
+
+var StructuredListSkeleton = function StructuredListSkeleton(_ref) {
+  var _cx;
+
+  var rowCount = _ref.rowCount,
+      border = _ref.border,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var StructuredListSkeletonClasses = cx(className, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--skeleton"), true), _defineProperty(_cx, "".concat(prefix, "--structured-list"), true), _defineProperty(_cx, "".concat(prefix, "--structured-list--border"), border), _cx));
+  var rows = [];
+
+  for (var i = 0; i < rowCount; i++) {
+    rows.push( /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--structured-list-row"),
+      key: i
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--structured-list-td")
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--structured-list-td")
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--structured-list-td")
+    })));
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: StructuredListSkeletonClasses
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--structured-list-thead")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--structured-list-row ").concat(prefix, "--structured-list-row--header-row")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--structured-list-th")
+  }, _span || (_span = /*#__PURE__*/React__default.createElement("span", null))), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--structured-list-th")
+  }, _span2 || (_span2 = /*#__PURE__*/React__default.createElement("span", null))), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--structured-list-th")
+  }, _span3 || (_span3 = /*#__PURE__*/React__default.createElement("span", null))))), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--structured-list-tbody")
+  }, rows));
+};
+
+StructuredListSkeleton.propTypes = {
+  /**
+   * Specify whether a border should be added to your StructuredListSkeleton
+   */
+  border: PropTypes.bool,
+
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+
+  /**
+   * number of table rows
+   */
+  rowCount: PropTypes.number
+};
+StructuredListSkeleton.defaultProps = {
+  rowCount: 5,
+  border: false
+};
+var StructuredListSkeleton$1 = StructuredListSkeleton;
+
+export { StructuredListSkeleton$1 as default };

package/es/components/StructuredList/StructuredList.js

@@ -0,0 +1,307 @@
+/**
+ * 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 React__default from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import deprecate from '../../prop-types/deprecate.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["children", "selection", "className", "ariaLabel", "isCondensed", "isFlush", "border"],
+    _excluded2 = ["children", "className"],
+    _excluded3 = ["children", "className"],
+    _excluded4 = ["onKeyDown", "tabIndex", "children", "className", "head", "label"],
+    _excluded5 = ["className", "value", "name", "title", "id"],
+    _excluded6 = ["children", "className", "head", "noWrap"];
+var getInstanceId = setupGetInstanceId();
+function StructuredListWrapper(props) {
+  var _classNames;
+
+  var children = props.children,
+      selection = props.selection,
+      className = props.className,
+      ariaLabel = props.ariaLabel,
+      isCondensed = props.isCondensed,
+      isFlush = props.isFlush;
+      props.border;
+      var other = _objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix();
+  var classes = cx("".concat(prefix, "--structured-list"), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--structured-list--selection"), selection), _defineProperty(_classNames, "".concat(prefix, "--structured-list--condensed"), isCondensed), _defineProperty(_classNames, "".concat(prefix, "--structured-list--flush"), isFlush), _classNames));
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    role: "table",
+    className: classes
+  }, other, {
+    "aria-label": ariaLabel
+  }), children);
+}
+StructuredListWrapper.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the container node
+   */
+  ariaLabel: PropTypes.string,
+
+  /**
+   * Specify whether a border should be added to your StructuredListWrapper
+   */
+  border: deprecate(PropTypes.bool, "\nThe prop `border` will be removed in the next major version of Carbon."),
+
+  /**
+   * Provide the contents of your StructuredListWrapper
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify if structured list is condensed, default is false
+   */
+  isCondensed: PropTypes.bool,
+
+  /**
+   * Specify if structured list is flush, default is false
+   */
+  isFlush: PropTypes.bool,
+
+  /**
+   * Specify whether your StructuredListWrapper should have selections
+   */
+  selection: PropTypes.bool
+};
+StructuredListWrapper.defaultProps = {
+  selection: false,
+  ariaLabel: 'Structured list section',
+  isCondensed: false,
+  isFlush: false
+};
+function StructuredListHead(props) {
+  var children = props.children,
+      className = props.className,
+      other = _objectWithoutProperties(props, _excluded2);
+
+  var prefix = usePrefix();
+  var classes = cx("".concat(prefix, "--structured-list-thead"), className);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    role: "rowgroup",
+    className: classes
+  }, other), children);
+}
+StructuredListHead.propTypes = {
+  /**
+   * Provide the contents of your StructuredListHead
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the node
+   */
+  className: PropTypes.string
+};
+function StructuredListBody(props) {
+  var children = props.children,
+      className = props.className,
+      other = _objectWithoutProperties(props, _excluded3);
+
+  var prefix = usePrefix();
+  var classes = cx("".concat(prefix, "--structured-list-tbody"), className);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classes,
+    role: "rowgroup"
+  }, other), children);
+}
+StructuredListBody.propTypes = {
+  /**
+   * Provide the contents of your StructuredListBody
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+  head: PropTypes.bool,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control
+   */
+  onKeyDown: PropTypes.func
+};
+StructuredListBody.defaultProps = {
+  onKeyDown: function onKeyDown() {}
+};
+function StructuredListRow(props) {
+  var onKeyDown = props.onKeyDown,
+      tabIndex = props.tabIndex,
+      children = props.children,
+      className = props.className,
+      head = props.head,
+      label = props.label,
+      other = _objectWithoutProperties(props, _excluded4);
+
+  var prefix = usePrefix();
+  var classes = cx("".concat(prefix, "--structured-list-row"), className, _defineProperty({}, "".concat(prefix, "--structured-list-row--header-row"), head));
+  return label ?
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+  React__default.createElement("label", _extends({}, other, {
+    tabIndex: tabIndex,
+    className: classes,
+    onKeyDown: onKeyDown
+  }), children) : /*#__PURE__*/React__default.createElement("div", _extends({
+    role: "row"
+  }, other, {
+    className: classes
+  }), children);
+}
+StructuredListRow.propTypes = {
+  /**
+   * Provide the contents of your StructuredListRow
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether your StructuredListRow should be used as a header row
+   */
+  head: PropTypes.bool,
+
+  /**
+   * Specify whether a `<label>` should be used
+   */
+  label: PropTypes.bool,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control,
+   * if `<label>` is in use
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Specify the tab index of the container node, if `<label>` is in use
+   */
+  tabIndex: PropTypes.number
+};
+StructuredListRow.defaultProps = {
+  head: false,
+  label: false,
+  tabIndex: 0,
+  onKeyDown: function onKeyDown() {}
+};
+function StructuredListInput(props) {
+  var className = props.className,
+      value = props.value,
+      name = props.name,
+      title = props.title,
+      id = props.id,
+      other = _objectWithoutProperties(props, _excluded5);
+
+  var prefix = usePrefix();
+  var classes = cx("".concat(prefix, "--structured-list-input"), className);
+  var instanceId = id || getInstanceId();
+  return /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
+    type: "radio",
+    tabIndex: -1,
+    id: instanceId,
+    className: classes,
+    value: value,
+    name: name,
+    title: title
+  }));
+}
+StructuredListInput.propTypes = {
+  /**
+   * Specify an optional className to be applied to the input
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the underlying input should be checked by default
+   */
+  defaultChecked: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string,
+
+  /**
+   * Provide a `name` for the input
+   */
+  name: PropTypes.string,
+
+  /**
+   * Provide an optional hook that is called each time the input is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Provide a `title` for the input
+   */
+  title: PropTypes.string,
+
+  /**
+   * Specify the value of the input
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+};
+StructuredListInput.defaultProps = {
+  onChange: function onChange() {},
+  value: 'value',
+  title: 'title'
+};
+function StructuredListCell(props) {
+  var _classNames3;
+
+  var children = props.children,
+      className = props.className,
+      head = props.head,
+      noWrap = props.noWrap,
+      other = _objectWithoutProperties(props, _excluded6);
+
+  var prefix = usePrefix();
+  var classes = cx(className, (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--structured-list-th"), head), _defineProperty(_classNames3, "".concat(prefix, "--structured-list-td"), !head), _defineProperty(_classNames3, "".concat(prefix, "--structured-list-content--nowrap"), noWrap), _classNames3));
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classes,
+    role: head ? 'columnheader' : 'cell'
+  }, other), children);
+}
+StructuredListCell.propTypes = {
+  /**
+   * Provide the contents of your StructuredListCell
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether your StructuredListCell should be used as a header cell
+   */
+  head: PropTypes.bool,
+
+  /**
+   * Specify whether your StructuredListCell should have text wrapping
+   */
+  noWrap: PropTypes.bool
+};
+StructuredListCell.defaultProps = {
+  head: false,
+  noWrap: false
+};
+
+export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper };

package/es/components/StructuredList/index.js

@@ -0,0 +1,43 @@
+/**
+ * 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 { StructuredListWrapper as StructuredListWrapper$1, StructuredListHead as StructuredListHead$1, StructuredListInput as StructuredListInput$1, StructuredListBody as StructuredListBody$1, StructuredListRow as StructuredListRow$1, StructuredListCell as StructuredListCell$1 } from './next/StructuredList.js';
+import { StructuredListWrapper as StructuredListWrapper$2, StructuredListHead as StructuredListHead$2, StructuredListInput as StructuredListInput$2, StructuredListBody as StructuredListBody$2, StructuredListRow as StructuredListRow$2, StructuredListCell as StructuredListCell$2 } from './StructuredList.js';
+import { createComponentToggle } from '../../internal/ComponentToggle.js';
+
+var StructuredListWrapper = createComponentToggle({
+  name: 'StructuredListWrapper',
+  next: StructuredListWrapper$1,
+  classic: StructuredListWrapper$2
+});
+var StructuredListHead = createComponentToggle({
+  name: 'StructuredListHead',
+  next: StructuredListHead$1,
+  classic: StructuredListHead$2
+});
+var StructuredListInput = createComponentToggle({
+  name: 'StructuredListInput',
+  next: StructuredListInput$1,
+  classic: StructuredListInput$2
+});
+var StructuredListBody = createComponentToggle({
+  name: 'StructuredListBody',
+  next: StructuredListBody$1,
+  classic: StructuredListBody$2
+});
+var StructuredListRow = createComponentToggle({
+  name: 'StructuredListRow',
+  next: StructuredListRow$1,
+  classic: StructuredListRow$2
+});
+var StructuredListCell = createComponentToggle({
+  name: 'StructuredListCell',
+  next: StructuredListCell$1,
+  classic: StructuredListCell$2
+});
+
+export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper };