@carbon/react 0.17.0 → 1.0.0-rc.0

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -0,0 +1,221 @@
+/**
+ * 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, createClass as _createClass, 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 { warning } from '../../internal/warning.js';
+import deprecate from '../../prop-types/deprecate.js';
+import * as FeatureFlags from '@carbon/feature-flags';
+import { PrefixContext } from '../../internal/usePrefix.js';
+import { match } from '../../internal/keyboard/match.js';
+import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
+
+var _excluded = ["href", "className", "itemText", "hasDivider", "isDelete", "disabled", "closeMenu", "onClick", "handleOverflowMenuItemFocus", "onKeyDown", "primaryFocus", "wrapperClassName", "requireTitle", "index", "title"];
+
+var OverflowMenuItem = /*#__PURE__*/function (_React$Component) {
+  _inherits(OverflowMenuItem, _React$Component);
+
+  var _super = _createSuper(OverflowMenuItem);
+
+  function OverflowMenuItem() {
+    var _this;
+
+    _classCallCheck(this, OverflowMenuItem);
+
+    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), "overflowMenuItem", /*#__PURE__*/React__default.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "setTabFocus", function (evt) {
+      if (match(evt, ArrowDown)) {
+        _this.props.handleOverflowMenuItemFocus({
+          currentIndex: _this.props.index,
+          direction: 1
+        });
+      }
+
+      if (match(evt, ArrowUp)) {
+        _this.props.handleOverflowMenuItemFocus({
+          currentIndex: _this.props.index,
+          direction: -1
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (evt) {
+      var _this$props = _this.props,
+          onClick = _this$props.onClick,
+          closeMenu = _this$props.closeMenu;
+      onClick(evt);
+
+      if (closeMenu) {
+        closeMenu();
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(OverflowMenuItem, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          href = _this$props2.href,
+          className = _this$props2.className,
+          itemText = _this$props2.itemText,
+          hasDivider = _this$props2.hasDivider,
+          isDelete = _this$props2.isDelete,
+          disabled = _this$props2.disabled,
+          closeMenu = _this$props2.closeMenu;
+          _this$props2.onClick;
+          _this$props2.handleOverflowMenuItemFocus;
+          var _onKeyDown = _this$props2.onKeyDown,
+          primaryFocus = _this$props2.primaryFocus,
+          wrapperClassName = _this$props2.wrapperClassName,
+          requireTitle = _this$props2.requireTitle,
+          index = _this$props2.index,
+          title = _this$props2.title,
+          other = _objectWithoutProperties(_this$props2, _excluded);
+
+      if (process.env.NODE_ENV !== "production") {
+        process.env.NODE_ENV !== "production" ? warning(closeMenu, '`<OverflowMenuItem>` detected missing `closeMenu` prop. ' + '`closeMenu` is required to let `<OverflowMenu>` close the menu upon actions on `<OverflowMenuItem>`. ' + 'Please make sure `<OverflowMenuItem>` is a direct child of `<OverflowMenu>.') : void 0;
+      }
+
+      return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, function (prefix) {
+        var _classNames;
+
+        var overflowMenuBtnClasses = cx("".concat(prefix, "--overflow-menu-options__btn"), className);
+        var overflowMenuItemClasses = cx("".concat(prefix, "--overflow-menu-options__option"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--overflow-menu--divider"), hasDivider), _defineProperty(_classNames, "".concat(prefix, "--overflow-menu-options__option--danger"), isDelete), _defineProperty(_classNames, "".concat(prefix, "--overflow-menu-options__option--disabled"), disabled), _classNames), wrapperClassName);
+        var TagToUse = href ? 'a' : 'button';
+
+        var OverflowMenuItemContent = function () {
+          if (typeof itemText !== 'string') {
+            return itemText;
+          }
+
+          return /*#__PURE__*/React__default.createElement("div", {
+            className: "".concat(prefix, "--overflow-menu-options__option-content")
+          }, itemText);
+        }();
+
+        return /*#__PURE__*/React__default.createElement("li", {
+          className: overflowMenuItemClasses,
+          role: "none"
+        }, /*#__PURE__*/React__default.createElement(TagToUse, _extends({}, other, {
+          'data-floating-menu-primary-focus': primaryFocus || null,
+          role: "menuitem",
+          href: href,
+          className: overflowMenuBtnClasses,
+          disabled: disabled,
+          onClick: _this2.handleClick,
+          onKeyDown: function onKeyDown(evt) {
+            _this2.setTabFocus(evt);
+
+            _onKeyDown(evt);
+          },
+          ref: _this2.overflowMenuItem,
+          title: requireTitle ? title || itemText : null,
+          tabIndex: "-1",
+          index: index
+        }), OverflowMenuItemContent));
+      });
+    }
+  }]);
+
+  return OverflowMenuItem;
+}(React__default.Component);
+
+_defineProperty(OverflowMenuItem, "propTypes", {
+  /**
+   * The CSS class name to be placed on the button element
+   */
+  className: PropTypes.string,
+
+  /**
+   * A callback to tell the parent menu component that the menu should be closed.
+   */
+  closeMenu: PropTypes.func,
+
+  /**
+   * `true` to make this menu item disabled.
+   */
+  disabled: PropTypes.bool,
+  handleOverflowMenuItemFocus: PropTypes.func,
+
+  /**
+   * `true` to make this menu item a divider.
+   */
+  hasDivider: PropTypes.bool,
+
+  /**
+   * If given, overflow item will render as a link with the given href
+   */
+  href: PropTypes.string,
+  index: PropTypes.number,
+
+  /**
+   * `true` to make this menu item a "danger button".
+   */
+  isDelete: PropTypes.bool,
+
+  /**
+   * The text in the menu item.
+   */
+  itemText: PropTypes.node.isRequired,
+
+  /**
+   * event handlers
+   */
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  onMouseUp: PropTypes.func,
+
+  /**
+   * `true` if this menu item should get focus when the menu gets open.
+   */
+  primaryFocus: deprecate(PropTypes.bool, 'The `primaryFocus` prop has been deprecated as it is no longer used. ' + 'Feel free to remove this prop from <OverflowMenuItem>. This prop will ' + 'be removed in the next major release of `carbon-components-react`. ' + 'Opt for `selectorPrimaryFocus` in `<OverflowMenu>` instead'),
+
+  /**
+   * `true` if this menu item has long text and requires a browser tooltip
+   */
+  requireTitle: PropTypes.bool,
+
+  /**
+   * Specify a title for the OverflowMenuItem
+   */
+  title: PropTypes.string,
+
+  /**
+   * The CSS class name to be placed on the wrapper list item element
+   */
+  wrapperClassName: PropTypes.string
+});
+
+_defineProperty(OverflowMenuItem, "defaultProps", {
+  hasDivider: false,
+  isDelete: false,
+  disabled: false,
+  itemText: FeatureFlags.enabled('enable-v11-release') ? null : 'Provide itemText',
+  onClick: function onClick() {},
+  onKeyDown: function onKeyDown() {}
+});
+
+export { OverflowMenuItem as default };

package/es/components/OverflowMenuItem/index.js

@@ -0,0 +1,12 @@
+/**
+ * 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 OverflowMenuItem$1 from './OverflowMenuItem.js';
+
+var OverflowMenuItem = OverflowMenuItem$1;
+
+export { OverflowMenuItem as default };

package/es/components/OverflowMenuV2/index.js

@@ -0,0 +1,137 @@
+/**
+ * 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 React__default, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { OverflowMenuVertical } from '@carbon/icons-react';
+import { useId } from '../../internal/useId.js';
+import '../Menu/index.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { matches } from '../../internal/keyboard/match.js';
+import Menu from '../Menu/Menu.js';
+import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft } from '../../internal/keyboard/keys.js';
+
+var _excluded = ["children", "className", "renderIcon", "size"];
+var defaultSize = 'md';
+
+function OverflowMenuV2(_ref) {
+  var _classNames;
+
+  var children = _ref.children,
+      className = _ref.className,
+      _ref$renderIcon = _ref.renderIcon,
+      IconElement = _ref$renderIcon === void 0 ? OverflowMenuVertical : _ref$renderIcon,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? defaultSize : _ref$size,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var id = useId('overflowmenu');
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = useState([[0, 0], [0, 0]]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      position = _useState4[0],
+      setPosition = _useState4[1];
+
+  var triggerRef = useRef(null);
+  var prefix = usePrefix();
+
+  function openMenu() {
+    if (triggerRef.current) {
+      var _triggerRef$current$g = triggerRef.current.getBoundingClientRect(),
+          left = _triggerRef$current$g.left,
+          top = _triggerRef$current$g.top,
+          right = _triggerRef$current$g.right,
+          bottom = _triggerRef$current$g.bottom;
+
+      setPosition([[left, right], [top, bottom]]);
+    }
+
+    setOpen(true);
+  }
+
+  function closeMenu() {
+    setOpen(false);
+  }
+
+  function handleClick() {
+    if (open) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  }
+
+  function handleMousedown(e) {
+    // prevent default for mousedown on trigger element to avoid
+    // the "blur" event from firing on the menu as this would close
+    // it and immediately re-open since "click" event is fired after
+    // "blur" event.
+    e.preventDefault();
+  }
+
+  function handleKeyPress(e) {
+    if (open && matches(e, [ArrowUp, ArrowRight, ArrowDown, ArrowLeft])) {
+      e.preventDefault();
+    }
+  }
+
+  var containerClasses = cx("".concat(prefix, "--overflow-menu__container"));
+  var triggerClasses = cx("".concat(prefix, "--overflow-menu"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--overflow-menu--open"), open), _defineProperty(_classNames, className, className), _classNames), size !== defaultSize && "".concat(prefix, "--overflow-menu--").concat(size));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: containerClasses,
+    "aria-owns": id
+  }, /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
+    type: "button",
+    "aria-haspopup": true,
+    "aria-expanded": open,
+    className: triggerClasses,
+    onClick: handleClick,
+    onMouseDown: handleMousedown,
+    onKeyDown: handleKeyPress,
+    ref: triggerRef
+  }), /*#__PURE__*/React__default.createElement(IconElement, {
+    className: "".concat(prefix, "--overflow-menu__icon")
+  })), /*#__PURE__*/React__default.createElement(Menu, {
+    id: id,
+    size: size,
+    open: open,
+    onClose: closeMenu,
+    x: position[0],
+    y: position[1]
+  }, children));
+}
+
+OverflowMenuV2.propTypes = {
+  /**
+   * Specify the children of the OverflowMenu
+   */
+  children: PropTypes.node,
+
+  /**
+   * Optional className for the trigger button
+   */
+  className: PropTypes.string,
+
+  /**
+   * Function called to override icon rendering.
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Specify the size of the menu, from a list of available sizes.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+};
+
+export { OverflowMenuV2 };

package/es/components/Pagination/Pagination.Skeleton.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, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import SkeletonText from '../SkeletonText/SkeletonText.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _SkeletonText, _SkeletonText2, _SkeletonText3, _SkeletonText4;
+
+var _excluded = ["className"];
+
+function PaginationSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx("".concat(prefix, "--pagination"), "".concat(prefix, "--skeleton"), className)
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--pagination__left")
+  }, _SkeletonText || (_SkeletonText = /*#__PURE__*/React__default.createElement(SkeletonText, {
+    width: "70px"
+  })), _SkeletonText2 || (_SkeletonText2 = /*#__PURE__*/React__default.createElement(SkeletonText, {
+    width: "35px"
+  })), _SkeletonText3 || (_SkeletonText3 = /*#__PURE__*/React__default.createElement(SkeletonText, {
+    width: "105px"
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--pagination__right ").concat(prefix, "--pagination--inline")
+  }, _SkeletonText4 || (_SkeletonText4 = /*#__PURE__*/React__default.createElement(SkeletonText, {
+    width: "70px"
+  }))));
+}
+
+PaginationSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string
+};
+
+export { PaginationSkeleton as default };