@carbon/react 0.17.0 → 1.0.0-rc.0

package/es/components/ToggleSmall/ToggleSmall.js

@@ -0,0 +1,104 @@
+/**
+ * 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 cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { warning } from '../../internal/warning.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Enter } from '../../internal/keyboard/keys.js';
+
+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 = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+
+  if (process.env.NODE_ENV !== "production") {
+    process.env.NODE_ENV !== "production" ? 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("".concat(prefix, "--form-item"), _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.createElement("div", {
+    className: wrapperClasses
+  }, /*#__PURE__*/React__default.createElement("input", _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(evt, Enter)) {
+        input.checked = !input.checked;
+        _onChange && _onChange(evt);
+        onToggle(input.checked, id, evt);
+      }
+    }
+  })), /*#__PURE__*/React__default.createElement("label", {
+    className: "".concat(prefix, "--toggle-input__label"),
+    htmlFor: id,
+    "aria-label": ariaLabel
+  }, labelText, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--toggle__switch")
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    className: "".concat(prefix, "--toggle__check"),
+    width: "6px",
+    height: "5px",
+    viewBox: "0 0 6 5"
+  }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
+    d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
+  }))), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--toggle__text--off"),
+    "aria-hidden": "true"
+  }, labelA), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--toggle__text--on"),
+    "aria-hidden": "true"
+  }, labelB))));
+};
+
+ToggleSmall.propTypes = (_ToggleSmall$propType = {}, _defineProperty(_ToggleSmall$propType, 'aria-label', PropTypes.string.isRequired), _defineProperty(_ToggleSmall$propType, "className", PropTypes.string), _defineProperty(_ToggleSmall$propType, "defaultToggled", PropTypes.bool), _defineProperty(_ToggleSmall$propType, "id", PropTypes.string.isRequired), _defineProperty(_ToggleSmall$propType, "labelA", PropTypes.node.isRequired), _defineProperty(_ToggleSmall$propType, "labelB", PropTypes.node.isRequired), _defineProperty(_ToggleSmall$propType, "labelText", PropTypes.node), _defineProperty(_ToggleSmall$propType, "onChange", PropTypes.func), _defineProperty(_ToggleSmall$propType, "onToggle", PropTypes.func), _defineProperty(_ToggleSmall$propType, "toggled", PropTypes.bool), _ToggleSmall$propType);
+ToggleSmall.defaultProps = {
+  defaultToggled: false,
+  onToggle: function onToggle() {},
+  labelA: 'Off',
+  labelB: 'On'
+};
+var ToggleSmall$1 = ToggleSmall;
+
+export { ToggleSmall$1 as default };

package/es/components/Toolbar/Toolbar.js

@@ -0,0 +1,121 @@
+/**
+ * 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 React__default from 'react';
+import PropTypes from 'prop-types';
+import ToolbarSearch from '../ToolbarSearch/ToolbarSearch.js';
+import cx from 'classnames';
+import { warning } from '../../internal/warning.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["children", "className"];
+var didWarnAboutDeprecation = false;
+
+var Toolbar = function Toolbar(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var wrapperClasses = cx("".concat(prefix, "--toolbar"), className);
+
+  if (process.env.NODE_ENV !== "production") {
+    process.env.NODE_ENV !== "production" ? 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.createElement("div", _extends({
+    className: wrapperClasses
+  }, other), children);
+};
+
+Toolbar.propTypes = {
+  /**
+   * Specify a collection of ToolbarItem's that should render in the Toolbar
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the containing Toolbar node
+   */
+  className: PropTypes.string
+};
+var ToolbarItem = function ToolbarItem(_ref2) {
+  var children = _ref2.children,
+      type = _ref2.type,
+      placeHolderText = _ref2.placeHolderText;
+  var toolbarItem = type === 'search' ? /*#__PURE__*/React__default.createElement(ToolbarSearch, {
+    placeHolderText: placeHolderText
+  }) : children;
+  return toolbarItem;
+};
+ToolbarItem.propTypes = {
+  /**
+   * Specify the contents of the ToolbarItem
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify the placeholder text for the ToolbarSearch component. Useful if
+   * `type` is set to 'search'
+   */
+  placeHolderText: PropTypes.string,
+
+  /**
+   * Specify the type of the ToolbarItem. The `search` type will render a
+   * `ToolbarSearch` component
+   */
+  type: PropTypes.string
+};
+ToolbarItem.defaultProps = {
+  placeHolderText: 'Provide placeHolderText'
+}; // eslint-disable-next-line react/display-name
+
+var ToolbarTitle = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
+  var title = _ref3.title;
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__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.string
+}; // eslint-disable-next-line react/display-name
+
+var ToolbarOption = /*#__PURE__*/React__default.forwardRef(function (_ref4, ref) {
+  var children = _ref4.children;
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__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.node
+}; // eslint-disable-next-line react/display-name
+
+var ToolbarDivider = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("hr", {
+    ref: ref,
+    className: "".concat(prefix, "--toolbar-menu__divider")
+  });
+});
+ToolbarDivider.displayName = 'ToolbarDivider';
+var Toolbar$1 = Toolbar;
+
+export { ToolbarDivider, ToolbarItem, ToolbarOption, ToolbarTitle, Toolbar$1 as default };

package/es/components/ToolbarSearch/ToolbarSearch.js

@@ -0,0 +1,168 @@
+/**
+ * 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 React__default, { Component } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Search } from '@carbon/icons-react';
+import ClickListener from '../../internal/ClickListener.js';
+import { warning } from '../../internal/warning.js';
+import { PrefixContext } from '../../internal/usePrefix.js';
+
+var _excluded = ["className", "type", "id", "placeHolderText", "labelText", "role", "labelId"];
+var didWarnAboutDeprecation = false;
+
+var ToolbarSearch = /*#__PURE__*/function (_Component) {
+  _inherits(ToolbarSearch, _Component);
+
+  var _super = _createSuper(ToolbarSearch);
+
+  function ToolbarSearch(props) {
+    var _this;
+
+    _classCallCheck(this, ToolbarSearch);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      expanded: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "expandSearch", function () {
+      _this.setState({
+        expanded: !_this.state.expanded
+      });
+
+      _this.input.focus();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClickOutside", function () {
+      _this.setState({
+        expanded: false
+      });
+    });
+
+    if (process.env.NODE_ENV !== "production") {
+      process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, 'The ToolbarSearch component has been deprecated and will be removed in the next major release of `carbon-components-react`') : void 0;
+      didWarnAboutDeprecation = true;
+    }
+
+    return _this;
+  }
+
+  _createClass(ToolbarSearch, [{
+    key: "render",
+    value: function render() {
+      var _classNames,
+          _this2 = this;
+
+      var prefix = this.context;
+
+      var _this$props = this.props,
+          className = _this$props.className,
+          type = _this$props.type,
+          id = _this$props.id,
+          placeHolderText = _this$props.placeHolderText,
+          labelText = _this$props.labelText,
+          role = _this$props.role,
+          labelId = _this$props.labelId,
+          other = _objectWithoutProperties(_this$props, _excluded);
+
+      var searchClasses = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--search ").concat(prefix, "--search--sm ").concat(prefix, "--toolbar-search"), true), _defineProperty(_classNames, "".concat(prefix, "--toolbar-search--active"), this.state.expanded), _defineProperty(_classNames, className, className), _classNames));
+      return /*#__PURE__*/React__default.createElement(ClickListener, {
+        onClickOutside: this.handleClickOutside
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: searchClasses,
+        role: role
+      }, /*#__PURE__*/React__default.createElement("label", {
+        htmlFor: id,
+        className: "".concat(prefix, "--label"),
+        id: labelId
+      }, labelText), /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
+        type: type,
+        className: "".concat(prefix, "--search-input"),
+        id: id,
+        "aria-labelledby": labelId,
+        placeholder: placeHolderText,
+        ref: function ref(input) {
+          _this2.input = input;
+        }
+      })), /*#__PURE__*/React__default.createElement("button", {
+        type: "button",
+        className: "".concat(prefix, "--toolbar-search__btn"),
+        title: labelText,
+        onClick: this.expandSearch
+      }, /*#__PURE__*/React__default.createElement(Search, {
+        className: "".concat(prefix, "--search-magnifier"),
+        "aria-label": labelText
+      }))));
+    }
+  }]);
+
+  return ToolbarSearch;
+}(Component);
+
+_defineProperty(ToolbarSearch, "contextType", PrefixContext);
+
+_defineProperty(ToolbarSearch, "propTypes", {
+  /**
+   * The child nodes.
+   */
+  children: PropTypes.node,
+
+  /**
+   * The CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * The ID of the `<input>`.
+   */
+  id: PropTypes.string,
+
+  /**
+   * The ID of the `<label>`.
+   */
+  labelId: PropTypes.string,
+
+  /**
+   * The text in the `<label>`.
+   */
+  labelText: PropTypes.node,
+
+  /**
+   * The placeholder text of the `<input>`.
+   */
+  placeHolderText: PropTypes.string,
+
+  /**
+   * Optional prop to specify the role of the ToolbarSearch
+   */
+  role: PropTypes.string,
+
+  /**
+   * `true` to use the small version of the UI.
+   */
+  small: PropTypes.bool,
+
+  /**
+   * The `type` of the `<input>`.
+   */
+  type: PropTypes.string
+});
+
+_defineProperty(ToolbarSearch, "defaultProps", {
+  type: 'search',
+  id: 'search__input',
+  labelText: '',
+  placeHolderText: '',
+  role: 'search',
+  labelId: 'search__label'
+});
+
+export { ToolbarSearch as default };

package/es/components/Tooltip/next/DefinitionTooltip.js

@@ -0,0 +1,122 @@
+/**
+ * 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, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default, { useState } from 'react';
+import { Popover, PopoverContent } from '../../Popover/index.js';
+import { useFallbackId } from '../../../internal/useId.js';
+import { usePrefix } from '../../../internal/usePrefix.js';
+import deprecate from '../../../prop-types/deprecate.js';
+import { match } from '../../../internal/keyboard/match.js';
+import { Escape } from '../../../internal/keyboard/keys.js';
+
+var _excluded = ["align", "className", "children", "definition", "defaultOpen", "id", "tooltipText", "triggerClassName"];
+
+function DefinitionTooltip(_ref) {
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'bottom-left' : _ref$align,
+      className = _ref.className,
+      children = _ref.children,
+      definition = _ref.definition,
+      _ref$defaultOpen = _ref.defaultOpen,
+      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+      id = _ref.id,
+      tooltipText = _ref.tooltipText,
+      triggerClassName = _ref.triggerClassName,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(defaultOpen),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setOpen = _useState2[1];
+
+  var prefix = usePrefix();
+  var tooltipId = useFallbackId(id);
+
+  function onKeyDown(event) {
+    if (isOpen && match(event, Escape)) {
+      event.stopPropagation();
+      setOpen(false);
+    }
+  }
+
+  return /*#__PURE__*/React__default.createElement(Popover, {
+    align: align,
+    className: className,
+    dropShadow: false,
+    highContrast: true,
+    onMouseLeave: function onMouseLeave() {
+      setOpen(false);
+    },
+    open: isOpen
+  }, /*#__PURE__*/React__default.createElement("button", _extends({}, rest, {
+    className: cx("".concat(prefix, "--definition-term"), triggerClassName),
+    "aria-controls": tooltipId,
+    "aria-expanded": isOpen,
+    onBlur: function onBlur() {
+      setOpen(false);
+    },
+    onClick: function onClick() {
+      setOpen(!isOpen);
+    },
+    onKeyDown: onKeyDown,
+    type: "button"
+  }), children), /*#__PURE__*/React__default.createElement(PopoverContent, {
+    className: "".concat(prefix, "--definition-tooltip"),
+    id: tooltipId
+  }, tooltipText !== null && tooltipText !== void 0 ? tooltipText : definition));
+}
+
+DefinitionTooltip.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right']),
+
+  /**
+   * The `children` prop will be used as the value that is being defined
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the tooltip should be open when it first renders
+   */
+  defaultOpen: PropTypes.bool,
+
+  /**
+   * The `definition` prop is used as the content inside of the tooltip that
+   * appears when a user interacts with the element rendered by the `children`
+   * prop
+   */
+  definition: PropTypes.node.isRequired,
+
+  /**
+   * Provide a value that will be assigned as the id of the tooltip
+   */
+  id: PropTypes.string,
+
+  /**
+   * [Deprecated] Please use the `definition` prop instead.
+   *
+   * Provide the text that will be displayed in the tooltip when it is rendered.
+   */
+  tooltipText: deprecate(PropTypes.node, 'The tooltipText prop has been deprecated. Please use the `definition` prop instead.'),
+
+  /**
+   * The CSS class name of the trigger element
+   */
+  triggerClassName: PropTypes.string
+};
+
+export { DefinitionTooltip };

package/es/components/Tooltip/next/Tooltip.js

@@ -0,0 +1,154 @@
+/**
+ * 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, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default, { useRef } from 'react';
+import { Popover, PopoverContent } from '../../Popover/index.js';
+import { useDelayedState } from '../../../internal/useDelayedState.js';
+import { useId } from '../../../internal/useId.js';
+import { useNoInteractiveChildren } from '../../../internal/useNoInteractiveChildren.js';
+import { usePrefix } from '../../../internal/usePrefix.js';
+import { match } from '../../../internal/keyboard/match.js';
+import { Escape } from '../../../internal/keyboard/keys.js';
+
+var _excluded = ["align", "className", "children", "label", "description", "enterDelayMs", "leaveDelayMs", "defaultOpen"];
+
+function Tooltip(_ref) {
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'top' : _ref$align,
+      customClassName = _ref.className,
+      children = _ref.children,
+      label = _ref.label,
+      description = _ref.description,
+      _ref$enterDelayMs = _ref.enterDelayMs,
+      enterDelayMs = _ref$enterDelayMs === void 0 ? 100 : _ref$enterDelayMs,
+      _ref$leaveDelayMs = _ref.leaveDelayMs,
+      leaveDelayMs = _ref$leaveDelayMs === void 0 ? 300 : _ref$leaveDelayMs,
+      _ref$defaultOpen = _ref.defaultOpen,
+      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var containerRef = useRef(null);
+  var tooltipRef = useRef(null);
+
+  var _useDelayedState = useDelayedState(defaultOpen),
+      _useDelayedState2 = _slicedToArray(_useDelayedState, 2),
+      open = _useDelayedState2[0],
+      setOpen = _useDelayedState2[1];
+
+  var id = useId('tooltip');
+  var prefix = usePrefix();
+  var child = React__default.Children.only(children);
+  var triggerProps = {
+    onFocus: function onFocus() {
+      return setOpen(true);
+    },
+    onBlur: function onBlur() {
+      return setOpen(false);
+    },
+    // This should be placed on the trigger in case the element is disabled
+    onMouseEnter: onMouseEnter
+  };
+
+  if (label) {
+    triggerProps['aria-labelledby'] = id;
+  } else {
+    triggerProps['aria-describedby'] = id;
+  }
+
+  function onKeyDown(event) {
+    if (open && match(event, Escape)) {
+      event.stopPropagation();
+      setOpen(false);
+    }
+  }
+
+  function onMouseEnter() {
+    setOpen(true, enterDelayMs);
+  }
+
+  function onMouseLeave() {
+    setOpen(false, leaveDelayMs);
+  }
+
+  useNoInteractiveChildren(tooltipRef, 'The Tooltip component must have no interactive content rendered by the' + '`label` or `description` prop');
+  return /*#__PURE__*/React__default.createElement(Popover, _extends({}, rest, {
+    align: align,
+    className: cx("".concat(prefix, "--tooltip"), customClassName),
+    dropShadow: false,
+    highContrast: true,
+    onKeyDown: onKeyDown,
+    onMouseLeave: onMouseLeave,
+    open: open,
+    ref: containerRef
+  }), /*#__PURE__*/React__default.cloneElement(child, triggerProps), /*#__PURE__*/React__default.createElement(PopoverContent, {
+    "aria-hidden": "true",
+    className: "".concat(prefix, "--tooltip-content"),
+    id: id,
+    ref: tooltipRef,
+    role: "tooltip"
+  }, label || description));
+}
+
+Tooltip.propTypes = {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+
+  /**
+   * Pass in the child to which the tooltip will be applied
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the tooltip should be open when it first renders
+   */
+  defaultOpen: PropTypes.bool,
+
+  /**
+   * Provide the description to be rendered inside of the Tooltip. The
+   * description will use `aria-describedby` and will describe the child node
+   * in addition to the text rendered inside of the child. This means that if you
+   * have text in the child node, that it will be announced alongside the
+   * description to the screen reader.
+   *
+   * Note: if label and description are both provided, label will be used and
+   * description will not be used
+   */
+  description: PropTypes.node,
+
+  /**
+   * Specify the duration in milliseconds to delay before displaying the tooltip
+   */
+  enterDelayMs: PropTypes.number,
+
+  /**
+   * Provide the label to be rendered inside of the Tooltip. The label will use
+   * `aria-labelledby` and will fully describe the child node that is provided.
+   * This means that if you have text in the child node, that it will not be
+   * announced to the screen reader.
+   *
+   * Note: if label and description are both provided, description will not be
+   * used
+   */
+  label: PropTypes.node,
+
+  /**
+   * Specify the duration in milliseconds to delay before hiding the tooltip
+   */
+  leaveDelayMs: PropTypes.number
+};
+
+export { Tooltip };