@carbon/react 0.17.0 → 1.0.0-rc.0

package/lib/components/Toggle/index.js

@@ -0,0 +1,23 @@
+/**
+ * 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 Toggle$2 = require('./next/Toggle.js');
+var Toggle$3 = require('./Toggle.js');
+var ComponentToggle = require('../../internal/ComponentToggle.js');
+
+var Toggle = ComponentToggle.createComponentToggle({
+  name: 'Toggle',
+  next: Toggle$2.Toggle,
+  classic: Toggle$3["default"]
+});
+var Toggle$1 = Toggle;
+
+exports["default"] = Toggle$1;

package/lib/components/Toggle/next/Toggle.js

@@ -0,0 +1,169 @@
+/**
+ * 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 useControllableState = require('../../../internal/useControllableState.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 _path;
+
+var _excluded = ["className", "defaultToggled", "disabled", "hideLabel", "id", "labelA", "labelB", "labelText", "onClick", "onToggle", "size", "toggled"];
+function Toggle(_ref) {
+  var className = _ref.className,
+      _ref$defaultToggled = _ref.defaultToggled,
+      defaultToggled = _ref$defaultToggled === void 0 ? false : _ref$defaultToggled,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$hideLabel = _ref.hideLabel,
+      hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+      id = _ref.id,
+      _ref$labelA = _ref.labelA,
+      labelA = _ref$labelA === void 0 ? 'Off' : _ref$labelA,
+      _ref$labelB = _ref.labelB,
+      labelB = _ref$labelB === void 0 ? 'On' : _ref$labelB,
+      labelText = _ref.labelText,
+      onClick = _ref.onClick,
+      onToggle = _ref.onToggle,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      toggled = _ref.toggled,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  var _useControllableState = useControllableState.useControllableState({
+    value: toggled,
+    onChange: onToggle,
+    defaultValue: defaultToggled
+  }),
+      _useControllableState2 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState, 2),
+      checked = _useControllableState2[0],
+      setChecked = _useControllableState2[1];
+
+  function handleClick(e) {
+    setChecked(!checked);
+
+    if (onClick) {
+      onClick(e);
+    }
+  }
+
+  var isSm = size === 'sm';
+  var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--toggle"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle--disabled"), disabled), className);
+  var labelTextClasses = cx__default["default"]("".concat(prefix, "--toggle__label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
+  var appearanceClasses = cx__default["default"]("".concat(prefix, "--toggle__appearance"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
+  var switchClasses = cx__default["default"]("".concat(prefix, "--toggle__switch"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__switch--checked"), checked));
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: wrapperClasses
+  }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, other, {
+    id: id,
+    className: "".concat(prefix, "--toggle__button"),
+    role: "switch",
+    type: "button",
+    "aria-checked": checked,
+    disabled: disabled,
+    onClick: handleClick
+  })), /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: id,
+    className: "".concat(prefix, "--toggle__label")
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: labelTextClasses
+  }, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: appearanceClasses
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: switchClasses
+  }, isSm && /*#__PURE__*/React__default["default"].createElement("svg", {
+    className: "".concat(prefix, "--toggle__check"),
+    width: "6px",
+    height: "5px",
+    viewBox: "0 0 6 5"
+  }, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
+  })))), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--toggle__text"),
+    "aria-hidden": "true"
+  }, sideLabel))));
+}
+Toggle.propTypes = {
+  /**
+   * Specify a custom className to apply to the form-item node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the toggle should be on by default
+   */
+  defaultToggled: PropTypes__default["default"].bool,
+
+  /**
+   * Whether this control should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel: PropTypes__default["default"].bool,
+
+  /**
+   * Provide an id that unique represents the underlying `<button>`
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify the label for the "off" position
+   */
+  labelA: PropTypes__default["default"].node,
+
+  /**
+   * Specify the label for the "on" position
+   */
+  labelB: PropTypes__default["default"].node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Provide an event listener that is called when the control is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Provide an event listener that is called when the control is toggled
+   */
+  onToggle: PropTypes__default["default"].func,
+
+  /**
+   * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md']),
+
+  /**
+   * Specify whether the control is toggled
+   */
+  toggled: PropTypes__default["default"].bool
+};
+
+exports.Toggle = Toggle;
+exports["default"] = Toggle;

package/lib/components/ToggleSmall/ToggleSmall.Skeleton.js

@@ -0,0 +1,81 @@
+/**
+ * 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 _path, _defineProperty2;
+
+var _excluded = ["id", "labelText", "className"];
+
+var ToggleSmallSkeleton = /*#__PURE__*/function (_React$Component) {
+  _rollupPluginBabelHelpers.inherits(ToggleSmallSkeleton, _React$Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(ToggleSmallSkeleton);
+
+  function ToggleSmallSkeleton() {
+    _rollupPluginBabelHelpers.classCallCheck(this, ToggleSmallSkeleton);
+
+    return _super.apply(this, arguments);
+  }
+
+  _rollupPluginBabelHelpers.createClass(ToggleSmallSkeleton, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          id = _this$props.id,
+          labelText = _this$props.labelText,
+          className = _this$props.className,
+          rest = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
+
+      return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, function (prefix) {
+        return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+          className: cx__default["default"]("".concat(prefix, "--form-item"), className)
+        }, rest), /*#__PURE__*/React__default["default"].createElement("input", {
+          type: "checkbox",
+          id: id,
+          className: "".concat(prefix, "--toggle ").concat(prefix, "--toggle--small ").concat(prefix, "--skeleton")
+        }), /*#__PURE__*/React__default["default"].createElement("label", {
+          className: "".concat(prefix, "--toggle__label ").concat(prefix, "--skeleton"),
+          htmlFor: id
+        }, labelText && /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "".concat(prefix, "--toggle__label-text")
+        }, labelText), /*#__PURE__*/React__default["default"].createElement("span", {
+          className: "".concat(prefix, "--toggle__appearance")
+        }, /*#__PURE__*/React__default["default"].createElement("svg", {
+          className: "".concat(prefix, "--toggle__check"),
+          width: "6px",
+          height: "5px",
+          viewBox: "0 0 6 5"
+        }, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+          d: "M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
+        }))))));
+      });
+    }
+  }]);
+
+  return ToggleSmallSkeleton;
+}(React__default["default"].Component);
+
+_rollupPluginBabelHelpers.defineProperty(ToggleSmallSkeleton, "propTypes", (_defineProperty2 = {}, _rollupPluginBabelHelpers.defineProperty(_defineProperty2, 'aria-label', PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "id", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "labelText", PropTypes__default["default"].string), _defineProperty2));
+
+_rollupPluginBabelHelpers.defineProperty(ToggleSmallSkeleton, "defaultProps", _rollupPluginBabelHelpers.defineProperty({}, 'aria-label', 'Toggle is loading'));
+
+exports["default"] = ToggleSmallSkeleton;

package/lib/components/ToggleSmall/ToggleSmall.js

@@ -0,0 +1,114 @@
+/**
+ * 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 warning = require('../../internal/warning.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.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 _path, _ToggleSmall$propType;
+
+var _excluded = ["className", "defaultToggled", "toggled", "onChange", "onToggle", "id", "labelText", "labelA", "labelB"];
+var didWarnAboutDeprecation = false;
+
+var ToggleSmall = function ToggleSmall(_ref) {
+  var className = _ref.className,
+      defaultToggled = _ref.defaultToggled,
+      toggled = _ref.toggled,
+      _onChange = _ref.onChange,
+      onToggle = _ref.onToggle,
+      id = _ref.id,
+      labelText = _ref.labelText,
+      labelA = _ref.labelA,
+      labelB = _ref.labelB,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  if (process.env.NODE_ENV !== "production") {
+    process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, '`<ToggleSmall>` has been deprecated in favor of `<Toggle size="sm" />` and will be removed in the next major release of `carbon-components-react`') : void 0;
+    didWarnAboutDeprecation = true;
+  }
+
+  var input;
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), _rollupPluginBabelHelpers.defineProperty({}, className, className));
+  var checkedProps = {};
+
+  if (typeof toggled !== 'undefined') {
+    checkedProps.checked = toggled;
+  } else {
+    checkedProps.defaultChecked = defaultToggled;
+  }
+
+  var ariaLabel = typeof labelText === 'string' && labelText || other['aria-label'] || other.ariaLabel || null;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: wrapperClasses
+  }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, checkedProps, {
+    "aria-label": null,
+    type: "checkbox",
+    id: id,
+    className: "".concat(prefix, "--toggle-input ").concat(prefix, "--toggle-input--small"),
+    onChange: function onChange(evt) {
+      _onChange && _onChange(evt);
+      onToggle(input.checked, id, evt);
+    },
+    ref: function ref(el) {
+      input = el;
+    },
+    onKeyUp: function onKeyUp(evt) {
+      if (match.match(evt, keys.Enter)) {
+        input.checked = !input.checked;
+        _onChange && _onChange(evt);
+        onToggle(input.checked, id, evt);
+      }
+    }
+  })), /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "".concat(prefix, "--toggle-input__label"),
+    htmlFor: id,
+    "aria-label": ariaLabel
+  }, labelText, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--toggle__switch")
+  }, /*#__PURE__*/React__default["default"].createElement("svg", {
+    className: "".concat(prefix, "--toggle__check"),
+    width: "6px",
+    height: "5px",
+    viewBox: "0 0 6 5"
+  }, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
+  }))), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--toggle__text--off"),
+    "aria-hidden": "true"
+  }, labelA), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--toggle__text--on"),
+    "aria-hidden": "true"
+  }, labelB))));
+};
+
+ToggleSmall.propTypes = (_ToggleSmall$propType = {}, _rollupPluginBabelHelpers.defineProperty(_ToggleSmall$propType, 'aria-label', PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_ToggleSmall$propType, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ToggleSmall$propType, "defaultToggled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ToggleSmall$propType, "id", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_ToggleSmall$propType, "labelA", PropTypes__default["default"].node.isRequired), _rollupPluginBabelHelpers.defineProperty(_ToggleSmall$propType, "labelB", PropTypes__default["default"].node.isRequired), _rollupPluginBabelHelpers.defineProperty(_ToggleSmall$propType, "labelText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ToggleSmall$propType, "onChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ToggleSmall$propType, "onToggle", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ToggleSmall$propType, "toggled", PropTypes__default["default"].bool), _ToggleSmall$propType);
+ToggleSmall.defaultProps = {
+  defaultToggled: false,
+  onToggle: function onToggle() {},
+  labelA: 'Off',
+  labelB: 'On'
+};
+var ToggleSmall$1 = ToggleSmall;
+
+exports["default"] = ToggleSmall$1;

package/lib/components/Toolbar/Toolbar.js

@@ -0,0 +1,135 @@
+/**
+ * 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 ToolbarSearch = require('../ToolbarSearch/ToolbarSearch.js');
+var cx = require('classnames');
+var warning = require('../../internal/warning.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 = ["children", "className"];
+var didWarnAboutDeprecation = false;
+
+var Toolbar = function Toolbar(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--toolbar"), className);
+
+  if (process.env.NODE_ENV !== "production") {
+    process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, 'The Toolbar component has been deprecated and will be removed in the next major release of `carbon-components-react`') : void 0;
+    didWarnAboutDeprecation = true;
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: wrapperClasses
+  }, other), children);
+};
+
+Toolbar.propTypes = {
+  /**
+   * Specify a collection of ToolbarItem's that should render in the Toolbar
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the containing Toolbar node
+   */
+  className: PropTypes__default["default"].string
+};
+var ToolbarItem = function ToolbarItem(_ref2) {
+  var children = _ref2.children,
+      type = _ref2.type,
+      placeHolderText = _ref2.placeHolderText;
+  var toolbarItem = type === 'search' ? /*#__PURE__*/React__default["default"].createElement(ToolbarSearch["default"], {
+    placeHolderText: placeHolderText
+  }) : children;
+  return toolbarItem;
+};
+ToolbarItem.propTypes = {
+  /**
+   * Specify the contents of the ToolbarItem
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify the placeholder text for the ToolbarSearch component. Useful if
+   * `type` is set to 'search'
+   */
+  placeHolderText: PropTypes__default["default"].string,
+
+  /**
+   * Specify the type of the ToolbarItem. The `search` type will render a
+   * `ToolbarSearch` component
+   */
+  type: PropTypes__default["default"].string
+};
+ToolbarItem.defaultProps = {
+  placeHolderText: 'Provide placeHolderText'
+}; // eslint-disable-next-line react/display-name
+
+var ToolbarTitle = /*#__PURE__*/React__default["default"].forwardRef(function (_ref3, ref) {
+  var title = _ref3.title;
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    ref: ref,
+    className: "".concat(prefix, "--toolbar-menu__title")
+  }, title);
+});
+ToolbarTitle.displayName = 'ToolbarTitle';
+ToolbarTitle.propTypes = {
+  /**
+   * Specify the title of the Toolbar
+   */
+  title: PropTypes__default["default"].string
+}; // eslint-disable-next-line react/display-name
+
+var ToolbarOption = /*#__PURE__*/React__default["default"].forwardRef(function (_ref4, ref) {
+  var children = _ref4.children;
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    ref: ref,
+    className: "".concat(prefix, "--toolbar-menu__option")
+  }, children);
+});
+ToolbarOption.displayName = 'ToolbarOption';
+ToolbarOption.propTypes = {
+  /**
+   * Specify the contents of the ToolbarOption
+   */
+  children: PropTypes__default["default"].node
+}; // eslint-disable-next-line react/display-name
+
+var ToolbarDivider = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement("hr", {
+    ref: ref,
+    className: "".concat(prefix, "--toolbar-menu__divider")
+  });
+});
+ToolbarDivider.displayName = 'ToolbarDivider';
+var Toolbar$1 = Toolbar;
+
+exports.ToolbarDivider = ToolbarDivider;
+exports.ToolbarItem = ToolbarItem;
+exports.ToolbarOption = ToolbarOption;
+exports.ToolbarTitle = ToolbarTitle;
+exports["default"] = Toolbar$1;