@carbon/react 0.17.0 → 1.0.1

package/lib/components/ToolbarSearch/ToolbarSearch.js

@@ -0,0 +1,178 @@
+/**
+ * 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 iconsReact = require('@carbon/icons-react');
+var ClickListener = require('../../internal/ClickListener.js');
+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 = ["className", "type", "id", "placeHolderText", "labelText", "role", "labelId"];
+var didWarnAboutDeprecation = false;
+
+var ToolbarSearch = /*#__PURE__*/function (_Component) {
+  _rollupPluginBabelHelpers.inherits(ToolbarSearch, _Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(ToolbarSearch);
+
+  function ToolbarSearch(props) {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, ToolbarSearch);
+
+    _this = _super.call(this, props);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {
+      expanded: false
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "expandSearch", function () {
+      _this.setState({
+        expanded: !_this.state.expanded
+      });
+
+      _this.input.focus();
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleClickOutside", function () {
+      _this.setState({
+        expanded: false
+      });
+    });
+
+    if (process.env.NODE_ENV !== "production") {
+      process.env.NODE_ENV !== "production" ? warning.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;
+  }
+
+  _rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
+
+      var searchClasses = cx__default["default"]((_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--search ").concat(prefix, "--search--sm ").concat(prefix, "--toolbar-search"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--toolbar-search--active"), this.state.expanded), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames));
+      return /*#__PURE__*/React__default["default"].createElement(ClickListener["default"], {
+        onClickOutside: this.handleClickOutside
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: searchClasses,
+        role: role
+      }, /*#__PURE__*/React__default["default"].createElement("label", {
+        htmlFor: id,
+        className: "".concat(prefix, "--label"),
+        id: labelId
+      }, labelText), /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["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["default"].createElement("button", {
+        type: "button",
+        className: "".concat(prefix, "--toolbar-search__btn"),
+        title: labelText,
+        onClick: this.expandSearch
+      }, /*#__PURE__*/React__default["default"].createElement(iconsReact.Search, {
+        className: "".concat(prefix, "--search-magnifier"),
+        "aria-label": labelText
+      }))));
+    }
+  }]);
+
+  return ToolbarSearch;
+}(React.Component);
+
+_rollupPluginBabelHelpers.defineProperty(ToolbarSearch, "contextType", usePrefix.PrefixContext);
+
+_rollupPluginBabelHelpers.defineProperty(ToolbarSearch, "propTypes", {
+  /**
+   * The child nodes.
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * The CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * The ID of the `<input>`.
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * The ID of the `<label>`.
+   */
+  labelId: PropTypes__default["default"].string,
+
+  /**
+   * The text in the `<label>`.
+   */
+  labelText: PropTypes__default["default"].node,
+
+  /**
+   * The placeholder text of the `<input>`.
+   */
+  placeHolderText: PropTypes__default["default"].string,
+
+  /**
+   * Optional prop to specify the role of the ToolbarSearch
+   */
+  role: PropTypes__default["default"].string,
+
+  /**
+   * `true` to use the small version of the UI.
+   */
+  small: PropTypes__default["default"].bool,
+
+  /**
+   * The `type` of the `<input>`.
+   */
+  type: PropTypes__default["default"].string
+});
+
+_rollupPluginBabelHelpers.defineProperty(ToolbarSearch, "defaultProps", {
+  type: 'search',
+  id: 'search__input',
+  labelText: '',
+  placeHolderText: '',
+  role: 'search',
+  labelId: 'search__label'
+});
+
+exports["default"] = ToolbarSearch;

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

@@ -0,0 +1,132 @@
+/**
+ * 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 index = require('../../Popover/index.js');
+var useId = require('../../../internal/useId.js');
+var usePrefix = require('../../../internal/usePrefix.js');
+var deprecate = require('../../../prop-types/deprecate.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 _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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var _useState = React.useState(defaultOpen),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setOpen = _useState2[1];
+
+  var prefix = usePrefix.usePrefix();
+  var tooltipId = useId.useFallbackId(id);
+
+  function onKeyDown(event) {
+    if (isOpen && match.match(event, keys.Escape)) {
+      event.stopPropagation();
+      setOpen(false);
+    }
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(index.Popover, {
+    align: align,
+    className: className,
+    dropShadow: false,
+    highContrast: true,
+    onMouseLeave: function onMouseLeave() {
+      setOpen(false);
+    },
+    open: isOpen
+  }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: cx__default["default"]("".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["default"].createElement(index.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__default["default"].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__default["default"].node.isRequired,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the tooltip should be open when it first renders
+   */
+  defaultOpen: PropTypes__default["default"].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__default["default"].node.isRequired,
+
+  /**
+   * Provide a value that will be assigned as the id of the tooltip
+   */
+  id: PropTypes__default["default"].string,
+
+  /**
+   * [Deprecated in v11] Please use the `definition` prop instead.
+   *
+   * Provide the text that will be displayed in the tooltip when it is rendered.
+   */
+  tooltipText: deprecate["default"](PropTypes__default["default"].node, 'The tooltipText prop has been deprecated. Please use the `definition` prop instead.'),
+
+  /**
+   * The CSS class name of the trigger element
+   */
+  triggerClassName: PropTypes__default["default"].string
+};
+
+exports.DefinitionTooltip = DefinitionTooltip;

package/lib/components/Tooltip/next/Tooltip.js

@@ -0,0 +1,164 @@
+/**
+ * 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 index = require('../../Popover/index.js');
+var useDelayedState = require('../../../internal/useDelayedState.js');
+var useId = require('../../../internal/useId.js');
+var useNoInteractiveChildren = require('../../../internal/useNoInteractiveChildren.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 _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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var containerRef = React.useRef(null);
+  var tooltipRef = React.useRef(null);
+
+  var _useDelayedState = useDelayedState.useDelayedState(defaultOpen),
+      _useDelayedState2 = _rollupPluginBabelHelpers.slicedToArray(_useDelayedState, 2),
+      open = _useDelayedState2[0],
+      setOpen = _useDelayedState2[1];
+
+  var id = useId.useId('tooltip');
+  var prefix = usePrefix.usePrefix();
+  var child = React__default["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.match(event, keys.Escape)) {
+      event.stopPropagation();
+      setOpen(false);
+    }
+  }
+
+  function onMouseEnter() {
+    setOpen(true, enterDelayMs);
+  }
+
+  function onMouseLeave() {
+    setOpen(false, leaveDelayMs);
+  }
+
+  useNoInteractiveChildren.useNoInteractiveChildren(tooltipRef, 'The Tooltip component must have no interactive content rendered by the' + '`label` or `description` prop');
+  return /*#__PURE__*/React__default["default"].createElement(index.Popover, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    align: align,
+    className: cx__default["default"]("".concat(prefix, "--tooltip"), customClassName),
+    dropShadow: false,
+    highContrast: true,
+    onKeyDown: onKeyDown,
+    onMouseLeave: onMouseLeave,
+    open: open,
+    ref: containerRef
+  }), /*#__PURE__*/React__default["default"].cloneElement(child, triggerProps), /*#__PURE__*/React__default["default"].createElement(index.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__default["default"].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__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the tooltip should be open when it first renders
+   */
+  defaultOpen: PropTypes__default["default"].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__default["default"].node,
+
+  /**
+   * Specify the duration in milliseconds to delay before displaying the tooltip
+   */
+  enterDelayMs: PropTypes__default["default"].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__default["default"].node,
+
+  /**
+   * Specify the duration in milliseconds to delay before hiding the tooltip
+   */
+  leaveDelayMs: PropTypes__default["default"].number
+};
+
+exports.Tooltip = Tooltip;