@carbon/react 0.17.0 → 1.0.0-rc.0

package/es/components/StructuredList/next/StructuredList.js

@@ -0,0 +1,330 @@
+/**
+ * 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, slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { useId } from '../../../internal/useId.js';
+import deprecate from '../../../prop-types/deprecate.js';
+import { usePrefix } from '../../../internal/usePrefix.js';
+
+var _excluded = ["children", "selection", "className", "ariaLabel", "border"],
+    _excluded2 = ["children", "className"],
+    _excluded3 = ["children", "className"],
+    _excluded4 = ["onKeyDown", "children", "className", "head"],
+    _excluded5 = ["className", "name", "title", "id"],
+    _excluded6 = ["children", "className", "head", "noWrap"];
+var GridSelectedRowStateContext = /*#__PURE__*/React__default.createContext(null);
+var GridSelectedRowDispatchContext = /*#__PURE__*/React__default.createContext(null);
+function StructuredListWrapper(props) {
+  var children = props.children,
+      selection = props.selection,
+      className = props.className,
+      ariaLabel = props.ariaLabel;
+      props.border;
+      var other = _objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix();
+  var classes = cx("".concat(prefix, "--structured-list"), className, _defineProperty({}, "".concat(prefix, "--structured-list--selection"), selection));
+
+  var _React$useState = React__default.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedRow = _React$useState2[0],
+      setSelectedRow = _React$useState2[1];
+
+  return /*#__PURE__*/React__default.createElement(GridSelectedRowStateContext.Provider, {
+    value: selectedRow
+  }, /*#__PURE__*/React__default.createElement(GridSelectedRowDispatchContext.Provider, {
+    value: setSelectedRow
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    role: "grid",
+    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 whether your StructuredListWrapper should have selections
+   */
+  selection: PropTypes.bool
+};
+StructuredListWrapper.defaultProps = {
+  selection: false,
+  ariaLabel: 'Structured list section'
+};
+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() {}
+};
+var GridRowContext = /*#__PURE__*/React__default.createContext(null);
+function StructuredListRow(props) {
+  var _classNames2;
+
+  var onKeyDown = props.onKeyDown,
+      children = props.children,
+      className = props.className,
+      head = props.head,
+      other = _objectWithoutProperties(props, _excluded4);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasFocusWithin = _useState2[0],
+      setHasFocusWithin = _useState2[1];
+
+  var id = useId('grid-input');
+  var setSelectedRow = React__default.useContext(GridSelectedRowDispatchContext);
+  var prefix = usePrefix();
+  var value = {
+    id: id
+  };
+  var classes = cx("".concat(prefix, "--structured-list-row"), className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--header-row"), head), _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--focused-within"), hasFocusWithin), _classNames2));
+  return head ? /*#__PURE__*/React__default.createElement("div", _extends({
+    role: "row"
+  }, other, {
+    className: classes
+  }), children) :
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+  React__default.createElement("div", _extends({}, other, {
+    role: "row",
+    className: classes,
+    onClick: function onClick() {
+      return setSelectedRow(id);
+    },
+    onFocus: function onFocus() {
+      setHasFocusWithin(true);
+    },
+    onBlur: function onBlur() {
+      setHasFocusWithin(false);
+    },
+    onKeyDown: onKeyDown
+  }), /*#__PURE__*/React__default.createElement(GridRowContext.Provider, {
+    value: value
+  }, 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: deprecate(PropTypes.bool, "\nThe `label` prop is no longer needed and will be removed in the next major version of Carbon."),
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control,
+   */
+  onKeyDown: PropTypes.func
+};
+StructuredListRow.defaultProps = {
+  head: false,
+  onKeyDown: function onKeyDown() {}
+};
+function StructuredListInput(props) {
+  var defaultId = useId('structureListInput');
+
+  var className = props.className,
+      _props$name = props.name,
+      name = _props$name === void 0 ? "structured-list-input-".concat(defaultId) : _props$name,
+      title = props.title,
+      id = props.id,
+      other = _objectWithoutProperties(props, _excluded5);
+
+  var prefix = usePrefix();
+  var classes = cx("".concat(prefix, "--structured-list-input"), "".concat(prefix, "--visually-hidden"), className);
+  var row = React__default.useContext(GridRowContext);
+  var selectedRow = React__default.useContext(GridSelectedRowStateContext);
+  var setSelectedRow = React__default.useContext(GridSelectedRowDispatchContext);
+  return /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
+    type: "radio",
+    tabIndex: 0,
+    checked: row && row.id === selectedRow,
+    value: row ? row.id : '',
+    onChange: function onChange(event) {
+      setSelectedRow(event.target.value);
+    },
+    id: !id && defaultId,
+    className: classes,
+    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: deprecate(PropTypes.bool, "\nThe prop `defaultChecked` is no longer needed and will be removed in the next major version of Carbon."),
+
+  /**
+   * 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: deprecate(PropTypes.func, "\nThe prop `onChange` will be removed in the next major version of Carbon."),
+
+  /**
+   * Provide a `title` for the input
+   */
+  title: PropTypes.string,
+
+  /**
+   * Specify the value of the input
+   */
+  value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, "\nThe prop `value` will be removed in the next major version of Carbon.")
+};
+StructuredListInput.defaultProps = {
+  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));
+
+  if (head) {
+    return /*#__PURE__*/React__default.createElement("span", _extends({
+      className: classes,
+      role: "columnheader"
+    }, other), children);
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classes,
+    role: "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/Switch/Switch.js

@@ -0,0 +1,124 @@
+/**
+ * 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 = ["children", "className", "disabled", "index", "name", "onClick", "onKeyDown", "selected", "text"];
+var Switch = /*#__PURE__*/React__default.forwardRef(function Switch(props, tabRef) {
+  var children = props.children,
+      className = props.className,
+      disabled = props.disabled,
+      index = props.index,
+      name = props.name,
+      onClick = props.onClick,
+      onKeyDown = props.onKeyDown,
+      selected = props.selected,
+      text = props.text,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix();
+
+  var handleClick = function handleClick(e) {
+    e.preventDefault();
+    onClick({
+      index: index,
+      name: name,
+      text: text
+    });
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    var key = event.key || event.which;
+    onKeyDown({
+      index: index,
+      name: name,
+      text: text,
+      key: key
+    });
+  };
+
+  var classes = cx(className, "".concat(prefix, "--content-switcher-btn"), _defineProperty({}, "".concat(prefix, "--content-switcher--selected"), selected));
+  var commonProps = {
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    className: classes,
+    disabled: disabled
+  };
+  return /*#__PURE__*/React__default.createElement("button", _extends({
+    type: "button",
+    ref: tabRef,
+    role: "tab",
+    tabIndex: selected ? '0' : '-1',
+    "aria-selected": selected
+  }, other, commonProps), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--content-switcher__label"),
+    title: text
+  }, text !== undefined ? text : children));
+});
+Switch.displayName = 'Switch';
+Switch.propTypes = {
+  /**
+   * Provide child elements to be rendered inside of the Switch
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be added to your Switch
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether or not the Switch should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * The index of your Switch in your ContentSwitcher that is used for event handlers.
+   * Reserved for usage in ContentSwitcher
+   */
+  index: PropTypes.number,
+
+  /**
+   * Provide the name of your Switch that is used for event handlers
+   */
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * A handler that is invoked when a user clicks on the control.
+   * Reserved for usage in ContentSwitcher
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * A handler that is invoked on the key down event for the control.
+   * Reserved for usage in ContentSwitcher
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Whether your Switch is selected. Reserved for usage in ContentSwitcher
+   */
+  selected: PropTypes.bool,
+
+  /**
+   * Provide the contents of your Switch
+   */
+  text: PropTypes.string
+};
+Switch.defaultProps = {
+  selected: false,
+  text: 'Provide text',
+  onClick: function onClick() {},
+  onKeyDown: function onKeyDown() {}
+};
+var Switch$1 = Switch;
+
+export { Switch$1 as default };

package/es/components/Tab/Tab.js

@@ -0,0 +1,191 @@
+/**
+ * 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 { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass, 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 * as FeatureFlags from '@carbon/feature-flags';
+import deprecate from '../../prop-types/deprecate.js';
+import { PrefixContext } from '../../internal/usePrefix.js';
+
+var _excluded = ["id", "className", "handleTabClick", "handleTabKeyDown", "disabled", "href", "index", "label", "selected", "tabIndex", "onClick", "onKeyDown", "renderAnchor", "renderButton", "renderContent", "role"];
+
+var Tab = /*#__PURE__*/function (_React$Component) {
+  _inherits(Tab, _React$Component);
+
+  var _super = _createSuper(Tab);
+
+  function Tab() {
+    _classCallCheck(this, Tab);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Tab, [{
+    key: "render",
+    value: function render() {
+      var _classNames,
+          _this = this,
+          _buttonProps;
+
+      var prefix = this.context;
+
+      var _this$props = this.props,
+          id = _this$props.id,
+          className = _this$props.className,
+          handleTabClick = _this$props.handleTabClick,
+          handleTabKeyDown = _this$props.handleTabKeyDown,
+          disabled = _this$props.disabled,
+          _this$props$href = _this$props.href,
+          href = _this$props$href === void 0 ? '#' : _this$props$href,
+          index = _this$props.index,
+          label = _this$props.label,
+          selected = _this$props.selected,
+          _this$props$tabIndex = _this$props.tabIndex,
+          tabIndex = _this$props$tabIndex === void 0 ? 0 : _this$props$tabIndex,
+          _onClick = _this$props.onClick,
+          _onKeyDown = _this$props.onKeyDown,
+          renderAnchor = _this$props.renderAnchor,
+          renderButton = _this$props.renderButton;
+          _this$props.renderContent;
+          _this$props.role;
+          var other = _objectWithoutProperties(_this$props, _excluded);
+
+      var classes = cx(className, "".concat(prefix, "--tabs--scrollable__nav-item"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--tabs__nav-item--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--tabs__nav-item--selected"), selected), _defineProperty(_classNames, "".concat(prefix, "--tabs--scrollable__nav-item--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--tabs--scrollable__nav-item--selected"), selected), _classNames));
+      var buttonProps = (_buttonProps = {}, _defineProperty(_buttonProps, 'aria-selected', selected), _defineProperty(_buttonProps, 'aria-disabled', disabled), _defineProperty(_buttonProps, 'aria-controls', id && "".concat(id, "__panel")), _defineProperty(_buttonProps, "className", "".concat(prefix, "--tabs--scrollable__nav-link")), _defineProperty(_buttonProps, "href", href), _defineProperty(_buttonProps, "tabIndex", !disabled ? tabIndex : -1), _defineProperty(_buttonProps, "ref", function ref(e) {
+        _this.tabAnchor = e;
+      }), _buttonProps);
+      var renderElement = renderButton || renderAnchor;
+      return /*#__PURE__*/React__default.createElement("li", _extends({}, other, {
+        className: classes,
+        onClick: function onClick(evt) {
+          if (disabled) {
+            return;
+          }
+
+          if (handleTabClick) {
+            handleTabClick(index, evt);
+          }
+
+          _onClick(evt);
+        },
+        onKeyDown: function onKeyDown(evt) {
+          if (disabled) {
+            return;
+          }
+
+          if (handleTabKeyDown) {
+            handleTabKeyDown(index, evt);
+          }
+
+          _onKeyDown(evt);
+        },
+        role: "presentation"
+      }), renderElement ? renderElement(buttonProps) : /*#__PURE__*/React__default.createElement("button", _extends({
+        type: "button",
+        role: "tab"
+      }, buttonProps), label));
+    }
+  }]);
+
+  return Tab;
+}(React__default.Component);
+
+_defineProperty(Tab, "contextType", PrefixContext);
+
+_defineProperty(Tab, "propTypes", {
+  /**
+   * Specify an optional className to be added to your Tab
+   */
+  className: PropTypes.string,
+
+  /**
+   * Whether your Tab is disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * A handler that is invoked when a user clicks on the control.
+   * Reserved for usage in Tabs
+   */
+  handleTabClick: PropTypes.func,
+
+  /**
+   * A handler that is invoked on the key down event for the control.
+   * Reserved for usage in Tabs
+   */
+  handleTabKeyDown: PropTypes.func,
+
+  /**
+   * Provide a string that represents the `href` of the Tab
+   */
+  href: deprecate(PropTypes.string),
+
+  /**
+   * The element ID for the top-level element.
+   */
+  id: PropTypes.string,
+
+  /**
+   * The index of your Tab in your Tabs. Reserved for usage in Tabs
+   */
+  index: PropTypes.number,
+
+  /**
+   * Provide the contents of your Tab
+   */
+  label: PropTypes.node,
+
+  /**
+   * Provide a handler that is invoked when a user clicks on the control
+   */
+  onClick: PropTypes.func.isRequired,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control
+   */
+  onKeyDown: PropTypes.func.isRequired,
+
+  /*
+   * An optional parameter to allow overriding the anchor rendering.
+   * Useful for using Tab along with react-router or other client
+   * side router libraries.
+   **/
+  renderAnchor: deprecate(PropTypes.func),
+  renderButton: PropTypes.func,
+
+  /*
+   * An optional parameter to allow overriding the content rendering.
+   **/
+  renderContent: PropTypes.func,
+
+  /**
+   * Provide an accessibility role for your Tab
+   */
+  role: deprecate(PropTypes.string),
+
+  /**
+   * Whether your Tab is selected.
+   * Reserved for usage in Tabs
+   */
+  selected: PropTypes.bool.isRequired,
+
+  /**
+   * Specify the tab index of the `<button>` node
+   */
+  tabIndex: PropTypes.number
+});
+
+_defineProperty(Tab, "defaultProps", {
+  label: FeatureFlags.enabled('enable-v11-release') ? undefined : 'provide a label',
+  selected: false,
+  onClick: function onClick() {},
+  onKeyDown: function onKeyDown() {}
+});
+
+export { Tab as default };

package/es/components/Tab/index.js

@@ -0,0 +1,15 @@
+/**
+ * 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 * as FeatureFlags from '@carbon/feature-flags';
+import { Tab as Tab$2 } from '../Tabs/next/Tabs.js';
+import Tab$3 from './Tab.js';
+
+var Tab = FeatureFlags.enabled('enable-v11-release') ? Tab$2 : Tab$3;
+var Tab$1 = Tab;
+
+export { Tab$1 as default };