@instructure/ui-tooltip 8.8.1-snapshot.8 → 8.9.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.9.0](https://github.com/instructure/instructure-ui/compare/v8.8.0...v8.9.0) (2021-09-15)
+
+### Bug Fixes
+
+- fix shared-types TS errors ([7b83164](https://github.com/instructure/instructure-ui/commit/7b83164f4c5872f3a217e010563f59bf584ae4fc))
+
 # [8.8.0](https://github.com/instructure/instructure-ui/compare/v8.7.0...v8.8.0) (2021-08-27)
 
 ### Features

package/es/Tooltip/index.js

@@ -29,22 +29,20 @@ var _dec, _dec2, _class, _class2, _temp;
 
 /** @jsx jsx */
 import { Component } from 'react';
-import PropTypes from 'prop-types';
 import { getElementType, omitProps, ensureSingleChild, passthroughProps, callRenderProp } from '@instructure/ui-react-utils';
-import { PositionPropTypes } from '@instructure/ui-position';
 import { uid } from '@instructure/uid';
 import { testable } from '@instructure/ui-testable';
 import { Popover } from '@instructure/ui-popover';
-import { element } from '@instructure/ui-prop-types';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-
+import { allowedProps, propTypes } from './props';
 /**
 ---
 category: components
 ---
 **/
+
 let Tooltip = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Tooltip extends Component {
   constructor(...args) {
     super(...args);
@@ -67,17 +65,21 @@ let Tooltip = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   renderTrigger() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          as = _this$props.as;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          as = _this$props3.as;
     const hasFocus = this.state.hasFocus;
     const triggerProps = {
       'aria-describedby': this._id
@@ -102,22 +104,22 @@ let Tooltip = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   }
 
   render() {
-    const _this$props2 = this.props,
-          renderTip = _this$props2.renderTip,
-          isShowingContent = _this$props2.isShowingContent,
-          defaultIsShowingContent = _this$props2.defaultIsShowingContent,
-          on = _this$props2.on,
-          color = _this$props2.color,
-          placement = _this$props2.placement,
-          mountNode = _this$props2.mountNode,
-          constrain = _this$props2.constrain,
-          offsetX = _this$props2.offsetX,
-          offsetY = _this$props2.offsetY,
-          positionTarget = _this$props2.positionTarget,
-          onShowContent = _this$props2.onShowContent,
-          onHideContent = _this$props2.onHideContent,
-          styles = _this$props2.styles,
-          rest = _objectWithoutProperties(_this$props2, _excluded);
+    const _this$props4 = this.props,
+          renderTip = _this$props4.renderTip,
+          isShowingContent = _this$props4.isShowingContent,
+          defaultIsShowingContent = _this$props4.defaultIsShowingContent,
+          on = _this$props4.on,
+          color = _this$props4.color,
+          placement = _this$props4.placement,
+          mountNode = _this$props4.mountNode,
+          constrain = _this$props4.constrain,
+          offsetX = _this$props4.offsetX,
+          offsetY = _this$props4.offsetY,
+          positionTarget = _this$props4.positionTarget,
+          onShowContent = _this$props4.onShowContent,
+          onHideContent = _this$props4.onHideContent,
+          styles = _this$props4.styles,
+          rest = _objectWithoutProperties(_this$props4, _excluded);
 
     return jsx(Popover, Object.assign({}, passthroughProps(rest), {
       isShowingContent: isShowingContent,
@@ -140,113 +142,19 @@ let Tooltip = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       onBlur: this.handleBlur
     }), jsx("span", {
       id: this._id,
-      css: styles.tooltip,
+      css: styles === null || styles === void 0 ? void 0 : styles.tooltip,
       role: "tooltip"
     }, callRenderProp(renderTip)));
   }
 
-}, _class2.displayName = "Tooltip", _class2.componentId = 'Tooltip', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: PropTypes.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: PropTypes.object,
-
-  /**
-   * @param {Object} renderProps
-   * @param {Boolean} renderProps.focused - Is the Tooltip trigger focused?
-   * @param {Function} renderProps.getTriggerProps - Props to be spread onto the trigger element
-   */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-
-  /**
-   * The content to render in the tooltip
-   */
-  renderTip: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-
-  /**
-   * Whether or not the tooltip content is shown, when controlled
-   */
-  isShowingContent: PropTypes.bool,
-
-  /**
-   * Whether or not to show the content by default, when uncontrolled
-   */
-  defaultIsShowingContent: PropTypes.bool,
-
-  /**
-   * the element type to render as (assumes a single child if 'as' is undefined)
-   */
-  as: PropTypes.elementType,
-  // eslint-disable-line react/require-default-props
-
-  /**
-   * The action that causes the Content to display (`click`, `hover`, `focus`)
-   */
-  on: PropTypes.oneOfType([PropTypes.oneOf(['click', 'hover', 'focus']), PropTypes.arrayOf(PropTypes.oneOf(['click', 'hover', 'focus']))]),
-
-  /**
-   * The color of the tooltip content
-   */
-  color: PropTypes.oneOf(['primary', 'primary-inverse']),
-
-  /**
-   * Specifies where the Tooltip will be placed in relation to the target element.
-   * Ex. placement="bottom" will render the Tooltip below the triggering element
-   * (Note: if there is not room, it will position opposite. Ex. "top" will
-   * automatically switch to "bottom")
-   */
-  placement: PositionPropTypes.placement,
-
-  /**
-   * An element or a function returning an element to use as the mount node
-   * for the `<Tooltip />` (defaults to `document.body`)
-   */
-  mountNode: PositionPropTypes.mountNode,
-
-  /**
-   * The parent in which to constrain the tooltip.
-   * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
-   * or a function returning an element
-   */
-  constrain: PositionPropTypes.constrain,
-
-  /**
-   * The horizontal offset for the positioned content
-   */
-  offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * The vertical offset for the positioned content
-   */
-  offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-  /**
-   * Target element for positioning the Tooltip (if it differs from children/trigger)
-   */
-  positionTarget: PropTypes.oneOfType([element, PropTypes.func]),
-
-  /**
-   * Callback fired when content is shown. When controlled, this callback is
-   * fired when the tooltip expects to be shown
-   */
-  onShowContent: PropTypes.func,
-
-  /**
-   * Callback fired when content is hidden. When controlled, this callback is
-   * fired when the tooltip expects to be hidden
-   */
-  onHideContent: PropTypes.func
-}, _class2.defaultProps = {
-  isShowingContent: void 0,
+}, _class2.displayName = "Tooltip", _class2.componentId = 'Tooltip', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   defaultIsShowingContent: false,
-  on: void 0,
   color: 'primary',
   placement: 'top',
   mountNode: null,
   constrain: 'window',
   offsetX: 0,
   offsetY: 0,
-  positionTarget: void 0,
   onShowContent: event => {},
   onHideContent: (event, {
     documentClick

package/es/Tooltip/props.js

@@ -0,0 +1,115 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import PropTypes from 'prop-types';
+import { PositionPropTypes } from '@instructure/ui-position';
+import { element } from '@instructure/ui-prop-types';
+const propTypes = {
+  /**
+   * @param {Object} renderProps
+   * @param {Boolean} renderProps.focused - Is the Tooltip trigger focused?
+   * @param {Function} renderProps.getTriggerProps - Props to be spread onto the trigger element
+   */
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+
+  /**
+   * The content to render in the tooltip
+   */
+  renderTip: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+
+  /**
+   * Whether or not the tooltip content is shown, when controlled
+   */
+  isShowingContent: PropTypes.bool,
+
+  /**
+   * Whether or not to show the content by default, when uncontrolled
+   */
+  defaultIsShowingContent: PropTypes.bool,
+
+  /**
+   * the element type to render as (assumes a single child if 'as' is undefined)
+   */
+  as: PropTypes.elementType,
+  // eslint-disable-line react/require-default-props
+
+  /**
+   * The action that causes the Content to display (`click`, `hover`, `focus`)
+   */
+  on: PropTypes.oneOfType([PropTypes.oneOf(['click', 'hover', 'focus']), PropTypes.arrayOf(PropTypes.oneOf(['click', 'hover', 'focus']))]),
+
+  /**
+   * The color of the tooltip content
+   */
+  color: PropTypes.oneOf(['primary', 'primary-inverse']),
+
+  /**
+   * Specifies where the Tooltip will be placed in relation to the target element.
+   * Ex. placement="bottom" will render the Tooltip below the triggering element
+   * (Note: if there is not room, it will position opposite. Ex. "top" will
+   * automatically switch to "bottom")
+   */
+  placement: PositionPropTypes.placement,
+
+  /**
+   * An element or a function returning an element to use as the mount node
+   * for the `<Tooltip />` (defaults to `document.body`)
+   */
+  mountNode: PositionPropTypes.mountNode,
+
+  /**
+   * The parent in which to constrain the tooltip.
+   * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
+   * or a function returning an element
+   */
+  constrain: PositionPropTypes.constrain,
+
+  /**
+   * The horizontal offset for the positioned content
+   */
+  offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * The vertical offset for the positioned content
+   */
+  offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Target element for positioning the Tooltip (if it differs from children/trigger)
+   */
+  positionTarget: PropTypes.oneOfType([element, PropTypes.func]),
+
+  /**
+   * Callback fired when content is shown. When controlled, this callback is
+   * fired when the tooltip expects to be shown
+   */
+  onShowContent: PropTypes.func,
+
+  /**
+   * Callback fired when content is hidden. When controlled, this callback is
+   * fired when the tooltip expects to be hidden
+   */
+  onHideContent: PropTypes.func
+};
+const allowedProps = ['children', 'renderTip', 'isShowingContent', 'defaultIsShowingContent', 'as', 'on', 'color', 'placement', 'mountNode', 'constrain', 'offsetX', 'offsetY', 'positionTarget', 'onShowContent', 'onHideContent'];
+export { propTypes, allowedProps };

package/lib/Tooltip/index.js

@@ -11,8 +11,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("react");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
 
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
@@ -23,22 +21,20 @@ var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProp
 
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 
-var _PositionPropTypes = require("@instructure/ui-position/lib/PositionPropTypes.js");
-
 var _uid = require("@instructure/uid");
 
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 
 var _Popover = require("@instructure/ui-popover/lib/Popover");
 
-var _element = require("@instructure/ui-prop-types/lib/element.js");
-
 var _emotion = require("@instructure/emotion");
 
 var _styles = _interopRequireDefault(require("./styles"));
 
 var _theme = _interopRequireDefault(require("./theme"));
 
+var _props = require("./props");
+
 const _excluded = ["renderTip", "isShowingContent", "defaultIsShowingContent", "on", "color", "placement", "mountNode", "constrain", "offsetX", "offsetY", "positionTarget", "onShowContent", "onHideContent", "styles"];
 
 var _dec, _dec2, _class, _class2, _temp;
@@ -70,17 +66,21 @@ let Tooltip = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles();
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   renderTrigger() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          as = _this$props.as;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          as = _this$props3.as;
     const hasFocus = this.state.hasFocus;
     const triggerProps = {
       'aria-describedby': this._id
@@ -105,22 +105,22 @@ let Tooltip = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   render() {
-    const _this$props2 = this.props,
-          renderTip = _this$props2.renderTip,
-          isShowingContent = _this$props2.isShowingContent,
-          defaultIsShowingContent = _this$props2.defaultIsShowingContent,
-          on = _this$props2.on,
-          color = _this$props2.color,
-          placement = _this$props2.placement,
-          mountNode = _this$props2.mountNode,
-          constrain = _this$props2.constrain,
-          offsetX = _this$props2.offsetX,
-          offsetY = _this$props2.offsetY,
-          positionTarget = _this$props2.positionTarget,
-          onShowContent = _this$props2.onShowContent,
-          onHideContent = _this$props2.onHideContent,
-          styles = _this$props2.styles,
-          rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
+    const _this$props4 = this.props,
+          renderTip = _this$props4.renderTip,
+          isShowingContent = _this$props4.isShowingContent,
+          defaultIsShowingContent = _this$props4.defaultIsShowingContent,
+          on = _this$props4.on,
+          color = _this$props4.color,
+          placement = _this$props4.placement,
+          mountNode = _this$props4.mountNode,
+          constrain = _this$props4.constrain,
+          offsetX = _this$props4.offsetX,
+          offsetY = _this$props4.offsetY,
+          positionTarget = _this$props4.positionTarget,
+          onShowContent = _this$props4.onShowContent,
+          onHideContent = _this$props4.onHideContent,
+          styles = _this$props4.styles,
+          rest = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
     return (0, _emotion.jsx)(_Popover.Popover, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
       isShowingContent: isShowingContent,
       defaultIsShowingContent: defaultIsShowingContent,
@@ -142,113 +142,19 @@ let Tooltip = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
       onBlur: this.handleBlur
     }), (0, _emotion.jsx)("span", {
       id: this._id,
-      css: styles.tooltip,
+      css: styles === null || styles === void 0 ? void 0 : styles.tooltip,
       role: "tooltip"
     }, (0, _callRenderProp.callRenderProp)(renderTip)));
   }
 
-}, _class2.displayName = "Tooltip", _class2.componentId = 'Tooltip', _class2.propTypes = {
-  // eslint-disable-next-line react/require-default-props
-  makeStyles: _propTypes.default.func,
-  // eslint-disable-next-line react/require-default-props
-  styles: _propTypes.default.object,
-
-  /**
-   * @param {Object} renderProps
-   * @param {Boolean} renderProps.focused - Is the Tooltip trigger focused?
-   * @param {Function} renderProps.getTriggerProps - Props to be spread onto the trigger element
-   */
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
-
-  /**
-   * The content to render in the tooltip
-   */
-  renderTip: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
-
-  /**
-   * Whether or not the tooltip content is shown, when controlled
-   */
-  isShowingContent: _propTypes.default.bool,
-
-  /**
-   * Whether or not to show the content by default, when uncontrolled
-   */
-  defaultIsShowingContent: _propTypes.default.bool,
-
-  /**
-   * the element type to render as (assumes a single child if 'as' is undefined)
-   */
-  as: _propTypes.default.elementType,
-  // eslint-disable-line react/require-default-props
-
-  /**
-   * The action that causes the Content to display (`click`, `hover`, `focus`)
-   */
-  on: _propTypes.default.oneOfType([_propTypes.default.oneOf(['click', 'hover', 'focus']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['click', 'hover', 'focus']))]),
-
-  /**
-   * The color of the tooltip content
-   */
-  color: _propTypes.default.oneOf(['primary', 'primary-inverse']),
-
-  /**
-   * Specifies where the Tooltip will be placed in relation to the target element.
-   * Ex. placement="bottom" will render the Tooltip below the triggering element
-   * (Note: if there is not room, it will position opposite. Ex. "top" will
-   * automatically switch to "bottom")
-   */
-  placement: _PositionPropTypes.PositionPropTypes.placement,
-
-  /**
-   * An element or a function returning an element to use as the mount node
-   * for the `<Tooltip />` (defaults to `document.body`)
-   */
-  mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
-
-  /**
-   * The parent in which to constrain the tooltip.
-   * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
-   * or a function returning an element
-   */
-  constrain: _PositionPropTypes.PositionPropTypes.constrain,
-
-  /**
-   * The horizontal offset for the positioned content
-   */
-  offsetX: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /**
-   * The vertical offset for the positioned content
-   */
-  offsetY: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /**
-   * Target element for positioning the Tooltip (if it differs from children/trigger)
-   */
-  positionTarget: _propTypes.default.oneOfType([_element.element, _propTypes.default.func]),
-
-  /**
-   * Callback fired when content is shown. When controlled, this callback is
-   * fired when the tooltip expects to be shown
-   */
-  onShowContent: _propTypes.default.func,
-
-  /**
-   * Callback fired when content is hidden. When controlled, this callback is
-   * fired when the tooltip expects to be hidden
-   */
-  onHideContent: _propTypes.default.func
-}, _class2.defaultProps = {
-  isShowingContent: void 0,
+}, _class2.displayName = "Tooltip", _class2.componentId = 'Tooltip', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   defaultIsShowingContent: false,
-  on: void 0,
   color: 'primary',
   placement: 'top',
   mountNode: null,
   constrain: 'window',
   offsetX: 0,
   offsetY: 0,
-  positionTarget: void 0,
   onShowContent: event => {},
   onHideContent: (event, {
     documentClick