@carbon/react 0.16.2 → 1.0.0-rc.0

package/es/components/ContentSwitcher/ContentSwitcher.js

@@ -0,0 +1,185 @@
+/**
+ * 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, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, objectSpread2 as _objectSpread2, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import deprecate from '../../prop-types/deprecate.js';
+import { composeEventHandlers } from '../../tools/events.js';
+import { PrefixContext } from '../../internal/usePrefix.js';
+import { matches } from '../../internal/keyboard/match.js';
+import { getNextIndex } from '../../internal/keyboard/navigation.js';
+import { ArrowRight, ArrowLeft } from '../../internal/keyboard/keys.js';
+
+var _excluded = ["children", "className", "light", "selectedIndex", "selectionMode", "size"];
+
+var ContentSwitcher = /*#__PURE__*/function (_React$Component) {
+  _inherits(ContentSwitcher, _React$Component);
+
+  var _super = _createSuper(ContentSwitcher);
+
+  function ContentSwitcher() {
+    var _this;
+
+    _classCallCheck(this, ContentSwitcher);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "_switchRefs", []);
+
+    _defineProperty(_assertThisInitialized(_this), "state", {});
+
+    _defineProperty(_assertThisInitialized(_this), "handleItemRef", function (index) {
+      return function (ref) {
+        _this._switchRefs[index] = ref;
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleChildChange", function (data) {
+      var selectionMode = _this.props.selectionMode; // the currently selected child index
+
+      var selectedIndex = _this.state.selectedIndex; // the newly selected child index
+
+      var index = data.index;
+      var key = data.key;
+
+      if (matches(data, [ArrowRight, ArrowLeft])) {
+        var nextIndex = getNextIndex(key, index, _this.props.children.length);
+        var children = React__default.Children.toArray(_this.props.children);
+
+        if (selectionMode === 'manual') {
+          var switchRef = _this._switchRefs[nextIndex];
+          switchRef && switchRef.focus();
+        } else {
+          _this.setState({
+            selectedIndex: nextIndex
+          }, function () {
+            var child = children[_this.state.selectedIndex];
+            var switchRef = _this._switchRefs[_this.state.selectedIndex];
+            switchRef && switchRef.focus();
+
+            _this.props.onChange(_objectSpread2(_objectSpread2({}, data), {}, {
+              index: _this.state.selectedIndex,
+              name: child.props.name,
+              text: child.props.text
+            }));
+          });
+        }
+      } else if (selectedIndex !== index) {
+        _this.setState({
+          selectedIndex: index
+        }, function () {
+          var switchRef = _this._switchRefs[index];
+          switchRef && switchRef.focus();
+
+          _this.props.onChange(data);
+        });
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(ContentSwitcher, [{
+    key: "render",
+    value: function render() {
+      var _classNames,
+          _this2 = this;
+
+      var prefix = this.context;
+
+      var _this$props = this.props,
+          children = _this$props.children,
+          className = _this$props.className,
+          light = _this$props.light;
+          _this$props.selectedIndex;
+          _this$props.selectionMode;
+          var size = _this$props.size,
+          other = _objectWithoutProperties(_this$props, _excluded);
+
+      var classes = cx("".concat(prefix, "--content-switcher"), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--content-switcher--light"), light), _defineProperty(_classNames, "".concat(prefix, "--content-switcher--").concat(size), size), _classNames));
+      return /*#__PURE__*/React__default.createElement("div", _extends({}, other, {
+        className: classes,
+        role: "tablist"
+      }), React__default.Children.map(children, function (child, index) {
+        return /*#__PURE__*/React__default.cloneElement(child, {
+          index: index,
+          onClick: composeEventHandlers([_this2.handleChildChange, child.props.onClick]),
+          onKeyDown: _this2.handleChildChange,
+          selected: index === _this2.state.selectedIndex,
+          ref: _this2.handleItemRef(index)
+        });
+      }));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref, state) {
+      var selectedIndex = _ref.selectedIndex;
+      var prevSelectedIndex = state.prevSelectedIndex;
+      return prevSelectedIndex === selectedIndex ? null : {
+        selectedIndex: selectedIndex,
+        prevSelectedIndex: selectedIndex
+      };
+    }
+  }]);
+
+  return ContentSwitcher;
+}(React__default.Component);
+
+_defineProperty(ContentSwitcher, "propTypes", {
+  /**
+   * Pass in Switch components to be rendered in the ContentSwitcher
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be added to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * `true` to use the light variant.
+   */
+  light: deprecate(PropTypes.bool, 'The `light` prop for `ContentSwitcher` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.'),
+
+  /**
+   * Specify an `onChange` handler that is called whenever the ContentSwitcher
+   * changes which item is selected
+   */
+  onChange: PropTypes.func.isRequired,
+
+  /**
+   * Specify a selected index for the initially selected content
+   */
+  selectedIndex: PropTypes.number,
+
+  /**
+   * Choose whether or not to automatically change selection on focus
+   */
+  selectionMode: PropTypes.oneOf(['automatic', 'manual']),
+
+  /**
+   * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   * TODO V11: remove `xl` (replaced with lg)
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl'])
+});
+
+_defineProperty(ContentSwitcher, "contextType", PrefixContext);
+
+_defineProperty(ContentSwitcher, "defaultProps", {
+  selectedIndex: 0,
+  selectionMode: 'automatic',
+  onChange: function onChange() {}
+});
+
+export { ContentSwitcher as default };

package/es/components/ContextMenu/useContextMenu.js

@@ -0,0 +1,57 @@
+/**
+ * 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 { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useEffect } from 'react';
+
+/**
+ * @param {Element|Document|Window} [trigger=document] The element which should trigger the Menu on right-click
+ * @returns {object} Props object to pass onto Menu component
+ */
+
+function useContextMenu() {
+  var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = useState([0, 0]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      position = _useState4[0],
+      setPosition = _useState4[1];
+
+  function openContextMenu(e) {
+    e.preventDefault();
+    var x = e.x,
+        y = e.y;
+    setPosition([x, y]);
+    setOpen(true);
+  }
+
+  function onClose() {
+    setOpen(false);
+  }
+
+  useEffect(function () {
+    if (trigger && trigger instanceof Element || trigger instanceof Document || trigger instanceof Window) {
+      trigger.addEventListener('contextmenu', openContextMenu);
+      return function () {
+        trigger.removeEventListener('contextmenu', openContextMenu);
+      };
+    }
+  }, [trigger]);
+  return {
+    open: open,
+    x: position[0],
+    y: position[1],
+    onClose: onClose
+  };
+}
+
+export { useContextMenu as default };

package/es/components/Copy/Copy.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, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { useState, useCallback, useEffect } from 'react';
+import debounce from 'lodash.debounce';
+import cx from 'classnames';
+import { composeEventHandlers } from '../../tools/events.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { IconButton } from '../IconButton/index.js';
+import * as FeatureFlags from '@carbon/feature-flags';
+
+var _excluded = ["children", "className", "feedback", "feedbackTimeout", "onAnimationEnd", "onClick"];
+function Copy(_ref) {
+  var _classnames;
+
+  var children = _ref.children,
+      className = _ref.className,
+      feedback = _ref.feedback,
+      feedbackTimeout = _ref.feedbackTimeout,
+      onAnimationEnd = _ref.onAnimationEnd,
+      onClick = _ref.onClick,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      animation = _useState2[0],
+      setAnimation = _useState2[1];
+
+  var prefix = usePrefix();
+  var classNames = cx(className, "".concat(prefix, "--copy"), (_classnames = {}, _defineProperty(_classnames, "".concat(prefix, "--copy-btn--animating"), animation), _defineProperty(_classnames, "".concat(prefix, "--copy-btn--").concat(animation), animation), _classnames)); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  var handleFadeOut = useCallback(debounce(function () {
+    setAnimation('fade-out');
+  }, feedbackTimeout), [feedbackTimeout]);
+  var handleClick = useCallback(function () {
+    setAnimation('fade-in');
+    handleFadeOut();
+  }, [handleFadeOut]);
+
+  var handleAnimationEnd = function handleAnimationEnd(event) {
+    if (event.animationName === 'hide-feedback') {
+      setAnimation('');
+    }
+  };
+
+  useEffect(function () {
+    return function () {
+      handleFadeOut.cancel();
+    };
+  }, [handleFadeOut]);
+
+  if (FeatureFlags.enabled('enable-v11-release')) {
+    return /*#__PURE__*/React__default.createElement(IconButton, _extends({
+      align: "bottom",
+      className: classNames,
+      label: animation ? feedback : other['aria-label'],
+      onClick: composeEventHandlers([onClick, handleClick]),
+      onAnimationEnd: composeEventHandlers([onAnimationEnd, handleAnimationEnd])
+    }, other, {
+      "aria-live": "polite",
+      "aria-label": !children && (animation ? feedback : other['aria-label']) || null
+    }), children);
+  }
+
+  return /*#__PURE__*/React__default.createElement("button", _extends({
+    type: "button",
+    className: classNames,
+    onClick: composeEventHandlers([onClick, handleClick]),
+    onAnimationEnd: composeEventHandlers([onAnimationEnd, handleAnimationEnd])
+  }, other, {
+    "aria-live": "polite",
+    "aria-label": !children && (animation ? feedback : other['aria-label']) || null
+  }), children, animation ? feedback : other['aria-label'], /*#__PURE__*/React__default.createElement("span", {
+    "aria-hidden": "true",
+    className: "".concat(prefix, "--assistive-text ").concat(prefix, "--copy-btn__feedback")
+  }, feedback));
+}
+Copy.propTypes = {
+  /**
+   * Pass in content to be rendered in the underlying `<button>`
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the underlying `<button>`
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the string that is displayed when the button is clicked and the
+   * content is copied
+   */
+  feedback: PropTypes.string,
+
+  /**
+   * Specify the time it takes for the feedback message to timeout
+   */
+  feedbackTimeout: PropTypes.number,
+
+  /**
+   * Specify an optional `onAnimationEnd` handler that is called when the underlying
+   * animation ends
+   */
+  onAnimationEnd: PropTypes.func,
+
+  /**
+   * Specify an optional `onClick` handler that is called when the underlying
+   * `<button>` is clicked
+   */
+  onClick: PropTypes.func
+};
+Copy.defaultProps = {
+  feedback: 'Copied!',
+  feedbackTimeout: 2000,
+  onClick: function onClick() {}
+};
+
+export { Copy as default };

package/es/components/CopyButton/CopyButton.js

@@ -0,0 +1,67 @@
+/**
+ * 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 cx from 'classnames';
+import { Copy as Copy$1 } from '@carbon/icons-react';
+import Copy from '../Copy/Copy.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["iconDescription", "className"];
+function CopyButton(_ref) {
+  var iconDescription = _ref.iconDescription,
+      className = _ref.className,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement(Copy, _extends({
+    className: cx(className, "".concat(prefix, "--copy-btn")),
+    "aria-label": iconDescription,
+    title: iconDescription
+  }, other), /*#__PURE__*/React__default.createElement(Copy$1, {
+    className: "".concat(prefix, "--snippet__icon")
+  }));
+}
+CopyButton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the underlying `<button>`
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the string that is displayed when the button is clicked and the
+   * content is copied
+   */
+  feedback: PropTypes.string,
+
+  /**
+   * Specify the time it takes for the feedback message to timeout
+   */
+  feedbackTimeout: PropTypes.number,
+
+  /**
+   * Provide a description for the icon representing the copy action that can
+   * be read by screen readers
+   */
+  iconDescription: PropTypes.string,
+
+  /**
+   * Specify an optional `onClick` handler that is called when the underlying
+   * `<button>` is clicked
+   */
+  onClick: PropTypes.func
+};
+CopyButton.defaultProps = {
+  iconDescription: 'Copy to clipboard',
+  feedback: 'Copied!',
+  feedbackTimeout: 2000,
+  onClick: function onClick() {}
+};
+
+export { CopyButton as default };

package/es/components/DangerButton/DangerButton.js

@@ -0,0 +1,20 @@
+/**
+ * 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 Button from '../Button/Button.js';
+
+var DangerButton = function DangerButton(props) {
+  return /*#__PURE__*/React__default.createElement(Button, _extends({
+    kind: "danger"
+  }, props));
+};
+
+var DangerButton$1 = DangerButton;
+
+export { DangerButton$1 as default };