@instructure/ui-tooltip 8.14.0 → 8.14.1-snapshot.7

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 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.

package/es/Tooltip/TooltipLocator.js

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { parseQueryArguments } from '@instructure/ui-test-queries'; // eslint-disable-next-line no-restricted-imports
+import { parseQueryArguments } from '@instructure/ui-test-queries'; // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
+// eslint-disable-next-line no-restricted-imports
 
 import { PopoverLocator } from '@instructure/ui-popover/es/Popover/PopoverLocator';
 import { Tooltip } from './index';
@@ -41,5 +42,6 @@ export const customMethods = {
 
     return PopoverLocator.findContent(element, '[role="tooltip"]', options);
   }
-};
+}; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 export const TooltipLocator = locator(Tooltip.selector, customMethods);

package/es/Tooltip/index.js

@@ -41,32 +41,35 @@ import { allowedProps, propTypes } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 
 let Tooltip = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Tooltip extends Component {
-  constructor() {
-    super(...arguments);
-    this._id = uid('Tooltip');
-    this.state = {
-      hasFocus: false
-    };
+  constructor(props) {
+    super(props);
+    this._id = void 0;
     this.ref = null;
 
     this.handleRef = el => {
       this.ref = el;
     };
 
-    this.handleFocus = event => {
+    this.handleFocus = () => {
       this.setState({
         hasFocus: true
       });
     };
 
-    this.handleBlur = event => {
+    this.handleBlur = () => {
       this.setState({
         hasFocus: false
       });
     };
+
+    this._id = uid('Tooltip');
+    this.state = {
+      hasFocus: false
+    };
   }
 
   componentDidMount() {
@@ -75,16 +78,16 @@ let Tooltip = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     (_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) {
+  componentDidUpdate() {
     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$props3 = this.props,
-          children = _this$props3.children,
-          as = _this$props3.as;
+    const _ref = this.props,
+          children = _ref.children,
+          as = _ref.as;
     const hasFocus = this.state.hasFocus;
     const triggerProps = {
       'aria-describedby': this._id
@@ -95,7 +98,6 @@ let Tooltip = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
       const props = omitProps(this.props, Tooltip.allowedProps);
       return jsx(Trigger, Object.assign({}, props, triggerProps), children);
     } else if (typeof children === 'function') {
-      // TODO: try to remove cast when typing Tooltip (React children types are badly calculated)
       return children({
         focused: hasFocus,
         getTriggerProps: props => ({ ...triggerProps,
@@ -103,27 +105,27 @@ let Tooltip = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
         })
       });
     } else {
-      return ensureSingleChild(this.props.children, triggerProps);
+      return ensureSingleChild(children, triggerProps);
     }
   }
 
   render() {
-    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);
+    const _this$props3 = this.props,
+          renderTip = _this$props3.renderTip,
+          isShowingContent = _this$props3.isShowingContent,
+          defaultIsShowingContent = _this$props3.defaultIsShowingContent,
+          on = _this$props3.on,
+          color = _this$props3.color,
+          placement = _this$props3.placement,
+          mountNode = _this$props3.mountNode,
+          constrain = _this$props3.constrain,
+          offsetX = _this$props3.offsetX,
+          offsetY = _this$props3.offsetY,
+          positionTarget = _this$props3.positionTarget,
+          onShowContent = _this$props3.onShowContent,
+          onHideContent = _this$props3.onHideContent,
+          styles = _this$props3.styles,
+          rest = _objectWithoutProperties(_this$props3, _excluded);
 
     return jsx(Popover, Object.assign({}, passthroughProps(rest), {
       isShowingContent: isShowingContent,
@@ -156,14 +158,9 @@ let Tooltip = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   defaultIsShowingContent: false,
   color: 'primary',
   placement: 'top',
-  mountNode: null,
   constrain: 'window',
   offsetX: 0,
-  offsetY: 0,
-  onShowContent: event => {},
-  onHideContent: (event, _ref) => {
-    let documentClick = _ref.documentClick;
-  }
+  offsetY: 0
 }, _temp)) || _class) || _class);
 export default Tooltip;
 export { Tooltip };

package/es/Tooltip/props.js

@@ -25,90 +25,21 @@ 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'];

package/lib/Tooltip/TooltipLocator.js

@@ -36,6 +36,7 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@ins... Remove this comment to see the full error message
 // eslint-disable-next-line no-restricted-imports
 const customMethods = {
   findTrigger: function () {
@@ -52,7 +53,8 @@ const customMethods = {
 
     return _PopoverLocator.PopoverLocator.findContent(element, '[role="tooltip"]', options);
   }
-};
+}; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
 exports.customMethods = customMethods;
 const TooltipLocator = (0, _locator.locator)(_index.Tooltip.selector, customMethods);
 exports.TooltipLocator = TooltipLocator;

package/lib/Tooltip/index.js

@@ -43,31 +43,34 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let Tooltip = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Tooltip extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this._id = (0, _uid.uid)('Tooltip');
-    this.state = {
-      hasFocus: false
-    };
+  constructor(props) {
+    super(props);
+    this._id = void 0;
     this.ref = null;
 
     this.handleRef = el => {
       this.ref = el;
     };
 
-    this.handleFocus = event => {
+    this.handleFocus = () => {
       this.setState({
         hasFocus: true
       });
     };
 
-    this.handleBlur = event => {
+    this.handleBlur = () => {
       this.setState({
         hasFocus: false
       });
     };
+
+    this._id = (0, _uid.uid)('Tooltip');
+    this.state = {
+      hasFocus: false
+    };
   }
 
   componentDidMount() {
@@ -76,16 +79,16 @@ let Tooltip = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
     (_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) {
+  componentDidUpdate() {
     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$props3 = this.props,
-          children = _this$props3.children,
-          as = _this$props3.as;
+    const _ref = this.props,
+          children = _ref.children,
+          as = _ref.as;
     const hasFocus = this.state.hasFocus;
     const triggerProps = {
       'aria-describedby': this._id
@@ -96,7 +99,6 @@ let Tooltip = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
       const props = (0, _omitProps.omitProps)(this.props, Tooltip.allowedProps);
       return (0, _emotion.jsx)(Trigger, Object.assign({}, props, triggerProps), children);
     } else if (typeof children === 'function') {
-      // TODO: try to remove cast when typing Tooltip (React children types are badly calculated)
       return children({
         focused: hasFocus,
         getTriggerProps: props => ({ ...triggerProps,
@@ -104,27 +106,27 @@ let Tooltip = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
         })
       });
     } else {
-      return (0, _ensureSingleChild.ensureSingleChild)(this.props.children, triggerProps);
+      return (0, _ensureSingleChild.ensureSingleChild)(children, triggerProps);
     }
   }
 
   render() {
-    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);
+    const _this$props3 = this.props,
+          renderTip = _this$props3.renderTip,
+          isShowingContent = _this$props3.isShowingContent,
+          defaultIsShowingContent = _this$props3.defaultIsShowingContent,
+          on = _this$props3.on,
+          color = _this$props3.color,
+          placement = _this$props3.placement,
+          mountNode = _this$props3.mountNode,
+          constrain = _this$props3.constrain,
+          offsetX = _this$props3.offsetX,
+          offsetY = _this$props3.offsetY,
+          positionTarget = _this$props3.positionTarget,
+          onShowContent = _this$props3.onShowContent,
+          onHideContent = _this$props3.onHideContent,
+          styles = _this$props3.styles,
+          rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     return (0, _emotion.jsx)(_Popover.Popover, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
       isShowingContent: isShowingContent,
       defaultIsShowingContent: defaultIsShowingContent,
@@ -156,14 +158,9 @@ let Tooltip = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   defaultIsShowingContent: false,
   color: 'primary',
   placement: 'top',
-  mountNode: null,
   constrain: 'window',
   offsetX: 0,
-  offsetY: 0,
-  onShowContent: event => {},
-  onHideContent: (event, _ref) => {
-    let documentClick = _ref.documentClick;
-  }
+  offsetY: 0
 }, _temp)) || _class) || _class);
 exports.Tooltip = Tooltip;
 var _default = Tooltip;

package/lib/Tooltip/props.js

@@ -37,90 +37,21 @@ var _element = require("@instructure/ui-prop-types/lib/element.js");
  * SOFTWARE.
  */
 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.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
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tooltip",
-  "version": "8.14.0",
+  "version": "8.14.1-snapshot.7+845d7ec6c",
   "description": "A component for showing small text-only overlays on hover/focus.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,23 +25,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.14.0",
-    "@instructure/shared-types": "8.14.0",
-    "@instructure/ui-popover": "8.14.0",
-    "@instructure/ui-position": "8.14.0",
-    "@instructure/ui-prop-types": "8.14.0",
-    "@instructure/ui-react-utils": "8.14.0",
-    "@instructure/ui-testable": "8.14.0",
-    "@instructure/uid": "8.14.0",
+    "@instructure/emotion": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/shared-types": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-popover": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-position": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-prop-types": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-react-utils": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-testable": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/uid": "8.14.1-snapshot.7+845d7ec6c",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.14.0",
-    "@instructure/ui-color-utils": "8.14.0",
-    "@instructure/ui-test-locator": "8.14.0",
-    "@instructure/ui-test-queries": "8.14.0",
-    "@instructure/ui-test-utils": "8.14.0",
-    "@instructure/ui-themes": "8.14.0"
+    "@instructure/ui-babel-preset": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-color-utils": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-test-locator": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-test-queries": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-test-utils": "8.14.1-snapshot.7+845d7ec6c",
+    "@instructure/ui-themes": "8.14.1-snapshot.7+845d7ec6c"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -49,5 +49,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "845d7ec6c159d8946b22caa9d8fb3d0175167a6f"
 }

package/src/Tooltip/index.tsx

@@ -35,22 +35,24 @@ import {
 import { uid } from '@instructure/uid'
 import { testable } from '@instructure/ui-testable'
 import { Popover } from '@instructure/ui-popover'
+import type { PopoverProps } from '@instructure/ui-popover'
 import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-import type { TooltipProps, TooltipRenderChildren } from './props'
+import type { TooltipProps, TooltipState } from './props'
 import { allowedProps, propTypes } from './props'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
-class Tooltip extends Component<TooltipProps> {
+class Tooltip extends Component<TooltipProps, TooltipState> {
   static readonly componentId = 'Tooltip'
 
   static allowedProps = allowedProps
@@ -60,18 +62,12 @@ class Tooltip extends Component<TooltipProps> {
     defaultIsShowingContent: false,
     color: 'primary',
     placement: 'top',
-    mountNode: null,
     constrain: 'window',
     offsetX: 0,
-    offsetY: 0,
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onShowContent: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onHideContent: (event, { documentClick }) => {}
+    offsetY: 0
   } as const
 
-  _id = uid('Tooltip')
-  state = { hasFocus: false }
+  private readonly _id: string
 
   ref: Element | null = null
 
@@ -79,28 +75,34 @@ class Tooltip extends Component<TooltipProps> {
     this.ref = el
   }
 
+  constructor(props: TooltipProps) {
+    super(props)
+
+    this._id = uid('Tooltip')
+
+    this.state = { hasFocus: false }
+  }
+
   componentDidMount() {
     this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate() {
     this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-  handleFocus = (event) => {
+  handleFocus: PopoverProps['onFocus'] = () => {
     this.setState({ hasFocus: true })
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-  handleBlur = (event) => {
+  handleBlur: PopoverProps['onBlur'] = () => {
     this.setState({ hasFocus: false })
   }
 
   renderTrigger() {
-    const { children, as } = this.props
+    const { children, as } = this.props as TooltipProps
     const { hasFocus } = this.state
+
     const triggerProps = {
       'aria-describedby': this._id
     }
@@ -114,8 +116,7 @@ class Tooltip extends Component<TooltipProps> {
         </Trigger>
       )
     } else if (typeof children === 'function') {
-      // TODO: try to remove cast when typing Tooltip (React children types are badly calculated)
-      return (children as TooltipRenderChildren)({
+      return children({
         focused: hasFocus,
         getTriggerProps: (props) => ({
           ...triggerProps,
@@ -123,7 +124,7 @@ class Tooltip extends Component<TooltipProps> {
         })
       })
     } else {
-      return ensureSingleChild(this.props.children, triggerProps)
+      return ensureSingleChild(children, triggerProps)
     }
   }