From 87631725932f11c1a50895ab419dc9211c719032 Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 1 Sep 2022 21:28:49 +0200 Subject: [PATCH] fix(Tooltip): convert to TypeScript --- .../tooltip/{Tooltip.js => Tooltip.tsx} | 126 ++++------------ ...oltipContainer.js => TooltipContainer.tsx} | 136 +++++++++++------- .../src/components/tooltip/TooltipHelpers.js | 16 --- .../src/components/tooltip/TooltipHelpers.tsx | 38 +++++ .../{TooltipPortal.js => TooltipPortal.tsx} | 78 +++++----- ...tipWithEvents.js => TooltipWithEvents.tsx} | 63 ++++---- .../{Tooltip.test.js => Tooltip.test.tsx} | 72 +++++++++- ...tip.test.js.snap => Tooltip.test.tsx.snap} | 15 -- ...Tooltip.stories.js => Tooltip.stories.tsx} | 9 +- .../src/components/tooltip/types.ts | 20 +++ 10 files changed, 310 insertions(+), 263 deletions(-) rename packages/dnb-eufemia/src/components/tooltip/{Tooltip.js => Tooltip.tsx} (52%) rename packages/dnb-eufemia/src/components/tooltip/{TooltipContainer.js => TooltipContainer.tsx} (77%) delete mode 100644 packages/dnb-eufemia/src/components/tooltip/TooltipHelpers.js create mode 100644 packages/dnb-eufemia/src/components/tooltip/TooltipHelpers.tsx rename packages/dnb-eufemia/src/components/tooltip/{TooltipPortal.js => TooltipPortal.tsx} (71%) rename packages/dnb-eufemia/src/components/tooltip/{TooltipWithEvents.js => TooltipWithEvents.tsx} (83%) rename packages/dnb-eufemia/src/components/tooltip/__tests__/{Tooltip.test.js => Tooltip.test.tsx} (73%) rename packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/{Tooltip.test.js.snap => Tooltip.test.tsx.snap} (95%) rename packages/dnb-eufemia/src/components/tooltip/stories/{Tooltip.stories.js => Tooltip.stories.tsx} (93%) create mode 100644 packages/dnb-eufemia/src/components/tooltip/types.ts diff --git a/packages/dnb-eufemia/src/components/tooltip/Tooltip.js b/packages/dnb-eufemia/src/components/tooltip/Tooltip.tsx similarity index 52% rename from packages/dnb-eufemia/src/components/tooltip/Tooltip.js rename to packages/dnb-eufemia/src/components/tooltip/Tooltip.tsx index c4371d04343..200bbcf93bc 100644 --- a/packages/dnb-eufemia/src/components/tooltip/Tooltip.js +++ b/packages/dnb-eufemia/src/components/tooltip/Tooltip.tsx @@ -4,101 +4,36 @@ */ import React from 'react' -import PropTypes from 'prop-types' import classnames from 'classnames' import Context from '../../shared/Context' import { makeUniqueId, - extendPropsWithContext, registerElement, validateDOMAttributes, processChildren, + isTrue, } from '../../shared/component-helper' -import { - spacingPropTypes, - createSpacingClasses, -} from '../space/SpacingHelper' +import { createSpacingClasses } from '../space/SpacingHelper' import TooltipContainer from './TooltipContainer' import TooltipWithEvents from './TooltipWithEvents' import TooltipPortal from './TooltipPortal' -import { injectTooltipSemantic } from './TooltipHelpers' +import { defaultProps, injectTooltipSemantic } from './TooltipHelpers' +import { ISpacingProps } from '../../shared/interfaces' +import { TooltipProps } from './types' +import { includeValidProps } from '../form-row/FormRowHelpers' export { injectTooltipSemantic } -export default class Tooltip extends React.PureComponent { +export default class Tooltip extends React.PureComponent< + TooltipProps & ISpacingProps +> { + _id: string + static tagName = 'dnb-tooltip' static contextType = Context - static propTypes = { - id: PropTypes.string, - group: PropTypes.string, - size: PropTypes.oneOf(['basis', 'large']), - active: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), - position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']), - arrow: PropTypes.oneOf([ - null, - 'center', - 'top', - 'right', - 'bottom', - 'left', - ]), - align: PropTypes.oneOf([null, 'center', 'right', 'left']), - animate_position: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.bool, - ]), - fixed_position: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.bool, - ]), - skip_portal: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), - no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), - show_delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - hide_delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - target_selector: PropTypes.string, - target_element: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.node, - ]), - - ...spacingPropTypes, - - class: PropTypes.string, - className: PropTypes.string, - children: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.func, - PropTypes.node, - ]), - tooltip: PropTypes.node, - } - - static defaultProps = { - id: null, - group: 'main', - size: 'basis', - active: null, - position: 'top', - arrow: 'center', - align: null, - animate_position: false, - fixed_position: false, - skip_portal: null, - no_animation: false, - show_delay: 300, - hide_delay: 500, - target_selector: null, - target_element: null, - - class: null, - className: null, - children: null, - tooltip: null, - } - static enableWebComponent() { - registerElement(Tooltip?.tagName, Tooltip, Tooltip.defaultProps) + registerElement(Tooltip?.tagName, Tooltip, defaultProps) } static getContent(props) { @@ -123,19 +58,18 @@ export default class Tooltip extends React.PureComponent { const inherited = this.getPropsFromTooltipProp() // use only the props from context, who are available here anyway - const props = extendPropsWithContext( - this.props, - Tooltip.defaultProps, - inherited, - this.context.getTranslation(this.props).Tooltip, - this.context.FormRow, - this.context.Tooltip - ) + const props = { + ...defaultProps, + ...this.props, + ...inherited, + ...this.context.getTranslation(this.props).Tooltip, + ...includeValidProps(this.context.FormRow), + ...this.context.Tooltip, + } const { target_element, target_selector, - class: class_name, className, id, // eslint-disable-line tooltip, // eslint-disable-line @@ -154,13 +88,15 @@ export default class Tooltip extends React.PureComponent { ...params } = props + props.internal_id = this._id + props.group = this.props.id || group || 'main-' + this._id + const content = Tooltip.getContent(props) const classes = classnames( 'dnb-tooltip', size === 'large' && 'dnb-tooltip--large', createSpacingClasses(props), - class_name, className ) @@ -172,14 +108,8 @@ export default class Tooltip extends React.PureComponent { // also used for code markup simulation validateDOMAttributes(this.props, attributes) - const newProps = { - ...this.props, - ...inherited, - internal_id: this._id, - group: this.props.id || group, - } - if (newProps.active === null) { - delete newProps.active + if (!isTrue(props.active)) { + delete props.active } return ( @@ -188,7 +118,7 @@ export default class Tooltip extends React.PureComponent { {content} @@ -196,7 +126,7 @@ export default class Tooltip extends React.PureComponent { {content} @@ -205,7 +135,7 @@ export default class Tooltip extends React.PureComponent { {content} diff --git a/packages/dnb-eufemia/src/components/tooltip/TooltipContainer.js b/packages/dnb-eufemia/src/components/tooltip/TooltipContainer.tsx similarity index 77% rename from packages/dnb-eufemia/src/components/tooltip/TooltipContainer.js rename to packages/dnb-eufemia/src/components/tooltip/TooltipContainer.tsx index d09f0cd15da..15407762708 100644 --- a/packages/dnb-eufemia/src/components/tooltip/TooltipContainer.js +++ b/packages/dnb-eufemia/src/components/tooltip/TooltipContainer.tsx @@ -4,62 +4,82 @@ */ import React from 'react' -import PropTypes from 'prop-types' import { isTrue } from '../../shared/component-helper' import { getOffsetLeft } from '../../shared/helpers' import classnames from 'classnames' +import { TooltipProps } from './types' + +type TooltipContainerProps = { + targetElement: HTMLElement + clientX?: number + style?: React.CSSProperties + useHover?: boolean + internal_id?: string + attributes?: Record +} -export default class TooltipContainer extends React.PureComponent { - static propTypes = { - internal_id: PropTypes.string, - targetElement: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.func, - PropTypes.object, - PropTypes.node, - ]), - clientX: PropTypes.number, - active: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), - position: PropTypes.string, - arrow: PropTypes.string, - align: PropTypes.string, - animate_position: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.bool, - ]), - fixed_position: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.bool, - ]), - no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), - useHover: PropTypes.bool, - style: PropTypes.object, - attributes: PropTypes.object, - children: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.func, - PropTypes.node, - ]), - } - - static defaultProps = { - internal_id: null, - targetElement: null, - clientX: null, - active: false, - position: 'center', - arrow: null, - align: null, - animate_position: null, - fixed_position: null, - no_animation: null, - useHover: true, - style: null, - attributes: null, - children: null, - } +type TooltipContainerState = { + w?: number + h?: number + width: number + height: number + hover: boolean +} - _rootRef = React.createRef() +export default class TooltipContainer extends React.PureComponent< + TooltipProps & TooltipContainerProps, + TooltipContainerState +> { + // static propTypes = { + // internal_id: PropTypes.string, + // targetElement: PropTypes.oneOfType([ + // PropTypes.string, + // PropTypes.func, + // PropTypes.object, + // PropTypes.node, + // ]), + // clientX: PropTypes.number, + // active: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), + // position: PropTypes.string, + // arrow: PropTypes.string, + // align: PropTypes.string, + // animate_position: PropTypes.oneOfType([ + // PropTypes.string, + // PropTypes.bool, + // ]), + // fixed_position: PropTypes.oneOfType([ + // PropTypes.string, + // PropTypes.bool, + // ]), + // no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), + // useHover: PropTypes.bool, + // style: PropTypes.object, + // attributes: PropTypes.object, + // children: PropTypes.oneOfType([ + // PropTypes.string, + // PropTypes.func, + // PropTypes.node, + // ]), + // } + + // static defaultProps = { + // internal_id: null, + // targetElement: null, + // clientX: null, + // active: false, + // position: 'center', + // arrow: null, + // align: null, + // animate_position: null, + // fixed_position: null, + // no_animation: null, + // useHover: true, + // style: null, + // attributes: null, + // children: null, + // } + + _rootRef = React.createRef() offset = 16 state = { hide: null, @@ -68,6 +88,10 @@ export default class TooltipContainer extends React.PureComponent { height: 0, } + _ddt: NodeJS.Timeout + resizeObserver: ResizeObserver + _style: React.CSSProperties + static getDerivedStateFromProps(props, state) { if (state.leaveInDOM && !props.active && !state.hover) { state.hide = true @@ -247,13 +271,15 @@ export default class TooltipContainer extends React.PureComponent { } } - checkWindowPosition(style) { + checkWindowPosition(style: React.CSSProperties) { if (style.left < 0) { style.left = this.offset } else { try { const rightOffset = - style.left + this.state.width - window.innerWidth + parseFloat(String(style.left)) + + this.state.width - + window.innerWidth if (rightOffset > 0) { style.left = window.innerWidth - this.state.width - this.offset } @@ -287,13 +313,13 @@ export default class TooltipContainer extends React.PureComponent { } handleMouseEnter = () => { - if (isTrue(this.props.active) && this.props.useHover) { + if (isTrue(this.props.active) && this.props.useHover !== false) { this.setState({ hover: true }) } } handleMouseLeave = () => { - if (this.props.useHover) { + if (this.props.useHover !== false) { this.setState({ hover: false }) } } diff --git a/packages/dnb-eufemia/src/components/tooltip/TooltipHelpers.js b/packages/dnb-eufemia/src/components/tooltip/TooltipHelpers.js deleted file mode 100644 index debf9c28a4b..00000000000 --- a/packages/dnb-eufemia/src/components/tooltip/TooltipHelpers.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Web Tooltip Component - * - */ - -import classnames from 'classnames' - -export function injectTooltipSemantic(params) { - params.tabIndex = '0' - params.className = classnames( - 'dnb-tooltip__wrapper', - 'dnb-tab-focus', - params.className - ) - return params -} diff --git a/packages/dnb-eufemia/src/components/tooltip/TooltipHelpers.tsx b/packages/dnb-eufemia/src/components/tooltip/TooltipHelpers.tsx new file mode 100644 index 00000000000..492ec7277d5 --- /dev/null +++ b/packages/dnb-eufemia/src/components/tooltip/TooltipHelpers.tsx @@ -0,0 +1,38 @@ +/** + * Web Tooltip Component + * + */ + +import classnames from 'classnames' + +export function injectTooltipSemantic(params) { + params.tabIndex = '0' + params.className = classnames( + 'dnb-tooltip__wrapper', + 'dnb-tab-focus', + params.className + ) + return params +} + +export const defaultProps = { + id: null, + group: null, + size: 'basis', + active: null, + position: 'top', + arrow: 'center', + align: null, + animate_position: false, + fixed_position: false, + skip_portal: null, + no_animation: false, + show_delay: 300, + hide_delay: 500, + target_selector: null, + target_element: null, + + className: null, + children: null, + tooltip: null, +} diff --git a/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.js b/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.tsx similarity index 71% rename from packages/dnb-eufemia/src/components/tooltip/TooltipPortal.js rename to packages/dnb-eufemia/src/components/tooltip/TooltipPortal.tsx index 3fe69bc3c69..a5f94e621b1 100644 --- a/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.js +++ b/packages/dnb-eufemia/src/components/tooltip/TooltipPortal.tsx @@ -5,36 +5,41 @@ import React from 'react' import ReactDOM from 'react-dom' -import PropTypes from 'prop-types' import { combineDescribedBy, warn } from '../../shared/component-helper' import TooltipContainer from './TooltipContainer' +import { TooltipProps } from './types' -let tooltipPortal -if (typeof window !== 'undefined') { - window.tooltipPortal = window.tooltipPortal || {} - tooltipPortal = window.tooltipPortal +type TooltipType = { + node: HTMLElement + count: number + timeout?: NodeJS.Timeout +} + +let tooltipPortal: Record +if (typeof globalThis !== 'undefined') { + globalThis.tooltipPortal = globalThis.tooltipPortal || {} + tooltipPortal = globalThis.tooltipPortal } else { tooltipPortal = {} } -export default class TooltipPortal extends React.PureComponent { - static propTypes = { - internal_id: PropTypes.string, - target: PropTypes.oneOfType([PropTypes.string, PropTypes.object]) - .isRequired, - active: PropTypes.bool, - group: PropTypes.string, - hide_delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - } +type TooltipPortalProps = { + target: HTMLElement + active: boolean + group?: string + internal_id?: string +} - static defaultProps = { - internal_id: null, - active: false, - group: 'main', - hide_delay: 500, - } +type TooltipPortalState = { + isMounted: boolean + isActive: boolean +} - state = { isMounted: false } +export default class TooltipPortal extends React.PureComponent< + TooltipProps & TooltipPortalProps, + TooltipPortalState +> { + state: TooltipPortalState = { isMounted: false, isActive: null } init = () => { const { group, active } = this.props @@ -46,7 +51,7 @@ export default class TooltipPortal extends React.PureComponent { tooltipPortal[group].count++ - this.setState({ isMounted: true, active }, () => { + this.setState({ isMounted: true, isActive: active }, () => { if (!this.isMainGorup()) { this.renderPortal() } @@ -61,42 +66,47 @@ export default class TooltipPortal extends React.PureComponent { } } - componentDidUpdate(prevProps) { + componentDidUpdate(prevProps: TooltipProps & TooltipPortalProps) { const { group, active, hide_delay } = this.props + if (this.props.children !== prevProps.children) { + this.renderPortal() + } + if (tooltipPortal[group] && active !== prevProps.active) { + clearTimeout(tooltipPortal[group].timeout) + if (active && !prevProps.active) { - this.setState({ active: true }, () => { + this.setState({ isActive: true }, () => { if (!this.isMainGorup()) { this.renderPortal() } }) } else if (!active && prevProps.active) { - this.timeout = tooltipPortal[group].timeout = setTimeout(() => { - this.setState({ active: false }, () => { + tooltipPortal[group].timeout = setTimeout(() => { + this.setState({ isActive: false }, () => { if (!this.isMainGorup()) { this.renderPortal() } }) - }, parseFloat(hide_delay)) + }, parseFloat(String(hide_delay))) } } } isMainGorup() { const { group } = this.props - return group === 'main' + return group.includes('main') } componentWillUnmount() { const { group } = this.props - clearTimeout(this.timeout) - if (tooltipPortal[group]) { tooltipPortal[group].count-- if (!this.isMainGorup()) { + clearTimeout(tooltipPortal[group].timeout) ReactDOM.unmountComponentAtNode(tooltipPortal[group].node) } @@ -136,7 +146,7 @@ export default class TooltipPortal extends React.PureComponent { } } - handleAria(elem) { + handleAria(elem: HTMLElement) { try { if (!elem.classList.contains('dnb-tooltip__wrapper')) { const existing = { @@ -167,7 +177,7 @@ export default class TooltipPortal extends React.PureComponent { , tooltipPortal[group].node ) @@ -176,7 +186,7 @@ export default class TooltipPortal extends React.PureComponent { , tooltipPortal[group].node ) @@ -188,6 +198,6 @@ export default class TooltipPortal extends React.PureComponent { return this.renderPortal() } - return null + return <> } } diff --git a/packages/dnb-eufemia/src/components/tooltip/TooltipWithEvents.js b/packages/dnb-eufemia/src/components/tooltip/TooltipWithEvents.tsx similarity index 83% rename from packages/dnb-eufemia/src/components/tooltip/TooltipWithEvents.js rename to packages/dnb-eufemia/src/components/tooltip/TooltipWithEvents.tsx index 699f583bd3b..a436355c193 100644 --- a/packages/dnb-eufemia/src/components/tooltip/TooltipWithEvents.js +++ b/packages/dnb-eufemia/src/components/tooltip/TooltipWithEvents.tsx @@ -4,42 +4,40 @@ */ import React from 'react' -import PropTypes from 'prop-types' import { combineDescribedBy, getInnerRef, warn, } from '../../shared/component-helper' -import TooltipPortal from './TooltipPortal' import { injectTooltipSemantic } from './TooltipHelpers' +import TooltipPortal from './TooltipPortal' +import { TooltipProps } from './types' -export default class TooltipWithEvents extends React.PureComponent { - static propTypes = { - internal_id: PropTypes.string, - show_delay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - target: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.object, - PropTypes.func, - PropTypes.node, - ]), - children: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.func, - PropTypes.node, - ]), - } +type TooltipWithEventsProps = { + target: HTMLElement + active: boolean + clientX: number + internal_id: string +} - static defaultProps = { - internal_id: null, - show_delay: 1, - target: null, - children: null, - } +type TooltipWithEventsState = { + isActive: boolean + isNotSemanticElement: boolean + _isMounted: boolean + clientX: number +} + +export default class TooltipWithEvents extends React.PureComponent< + TooltipProps & TooltipWithEventsProps +> { + _onEnterTimeout: NodeJS.Timeout + _ref: HTMLElement - state = { + state: TooltipWithEventsState = { isActive: false, isNotSemanticElement: false, + _isMounted: false, + clientX: null, } constructor(props) { @@ -141,11 +139,11 @@ export default class TooltipWithEvents extends React.PureComponent { } } - onMouseEnter = (e) => { + onMouseEnter = (e: MouseEvent) => { try { const isTouch = this.isTouch(e) if (isTouch) { - const elem = e.currentTarget + const elem = e.currentTarget as HTMLElement elem.style.userSelect = 'none' } } catch (e) { @@ -155,10 +153,13 @@ export default class TooltipWithEvents extends React.PureComponent { clearTimeout(this._onEnterTimeout) this._onEnterTimeout = setTimeout( () => { - this.setState({ isActive: true, clientX: e.clientX }) + this.setState({ isActive: true }) + + // TODO: check if clientX really used in TooltipPortal + // this.setState({ isActive: true, clientX: e.clientX }) }, - typeof window !== 'undefined' && !window.IS_TEST - ? parseFloat(this.props.show_delay) || 1 + typeof globalThis !== 'undefined' && !globalThis.IS_TEST + ? parseFloat(String(this.props.show_delay)) || 1 : 1 ) // have min 1 to make sure we are after onMouseLeave } @@ -212,7 +213,7 @@ export default class TooltipWithEvents extends React.PureComponent { key="tooltip" active={this.state.isActive} target={getInnerRef(this._ref).current} - clientX={this.state.clientX} + // clientX={this.state.clientX // TODO: check if clientX really used in TooltipPortal {...props} > {children} diff --git a/packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.test.js b/packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.test.tsx similarity index 73% rename from packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.test.js rename to packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.test.tsx index 1b5c6af92e8..66613e1ba36 100644 --- a/packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.test.js +++ b/packages/dnb-eufemia/src/components/tooltip/__tests__/Tooltip.test.tsx @@ -13,12 +13,21 @@ import { } from '../../../core/jest/jestSetup' import Tooltip from '../Tooltip' import Anchor from '../../../elements/Anchor' +import { TooltipProps } from '../types' global.ResizeObserver = class { - constructor() {} - disconnect() {} - observe() {} - unobserve() {} + constructor() { + // + } + disconnect() { + // + } + observe() { + // + } + unobserve() { + // + } } const defaultProps = { @@ -33,7 +42,7 @@ beforeEach(() => { describe('Tooltip', () => { describe('with target', () => { - const Component = (props = {}) => ( + const Component = (props: TooltipProps = {}) => ( <> @@ -74,7 +83,7 @@ describe('Tooltip', () => { }) describe('with target_element', () => { - const Component = (props = {}) => ( + const Component = (props: TooltipProps = {}) => ( { expect(toJson(Comp)).toMatchSnapshot() }) + it('should show when active prop is true', async () => { + const Component = () => { + const [active, setActive] = React.useState(false) + + return ( + { + setActive(true) + }} + onMouseLeave={() => { + setActive(false) + }} + > + Text + + } + > + Tooltip + + ) + } + + const Comp = mount() + + const mainElem = document.body.querySelector('.dnb-tooltip') + + Comp.find('button').simulate('mouseenter') + + expect(mainElem.classList.contains('dnb-tooltip--active')).toBe(true) + + Comp.find('button').simulate('mouseleave') + Comp.find('button').simulate('mouseenter') + + await wait(2) + + expect(mainElem.classList.contains('dnb-tooltip--active')).toBe(true) + + Comp.find('button').simulate('mouseleave') + + await wait(2) + + expect(mainElem.classList.contains('dnb-tooltip--hide')).toBe(true) + }) + it('should validate with ARIA rules as a tooltip', async () => { const Comp = mount() expect(await axeComponent(Comp)).toHaveNoViolations() @@ -175,4 +233,4 @@ describe('Tooltip scss', () => { }) }) -const wait = (t) => new Promise((r) => setTimeout(r, t)) +const wait = (t: number) => new Promise((r) => setTimeout(r, t)) diff --git a/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.js.snap b/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap similarity index 95% rename from packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.js.snap rename to packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap index 6e3924e69a2..2a252b2814e 100644 --- a/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.js.snap +++ b/packages/dnb-eufemia/src/components/tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap @@ -209,27 +209,14 @@ exports[`Tooltip with target_element have to match default tooltip snapshot 1`] > Button } - target_selector={null} - tooltip={null} > { animate_position group="animate_position" hide_delay={1e3} - target_element={ - - Top - - } + target_element={Top} > Tooltip 1 @@ -40,7 +35,7 @@ export const TooltipSandbox = () => { group="animate_position" position="bottom" size="large" - target_element={Bottom} + target_element={Bottom} > Tooltip 2 diff --git a/packages/dnb-eufemia/src/components/tooltip/types.ts b/packages/dnb-eufemia/src/components/tooltip/types.ts new file mode 100644 index 00000000000..22a335a96af --- /dev/null +++ b/packages/dnb-eufemia/src/components/tooltip/types.ts @@ -0,0 +1,20 @@ +export type TooltipProps = { + id?: string + group?: string + size?: 'basis' | 'large' + active?: boolean + position?: 'top' | 'right' | 'bottom' | 'left' + arrow?: null | 'center' | 'top' | 'right' | 'bottom' | 'left' + align?: null | 'center' | 'right' | 'left' + animate_position?: boolean + fixed_position?: boolean + skip_portal?: boolean + no_animation?: boolean + show_delay?: number + hide_delay?: number + target_selector?: string + target_element?: React.ReactNode + tooltip?: React.ReactNode + className?: string + children?: React.ReactNode +}