diff --git a/packages/plasma-new-hope/src/components/Popover/Popover.styles.ts b/packages/plasma-new-hope/src/components/Popover/Popover.styles.ts index 70b9b63d03..640a557f48 100644 --- a/packages/plasma-new-hope/src/components/Popover/Popover.styles.ts +++ b/packages/plasma-new-hope/src/components/Popover/Popover.styles.ts @@ -35,6 +35,14 @@ export const StyledPopover = styled.div<Pick<PopoverProps, 'zIndex'>>` position: absolute; z-index: ${({ zIndex }) => zIndex || DEFAULT_Z_INDEX}; + /* пустой блок между target и popover, чтобы ловить onMouseEnter */ + &:before { + content: ''; + display: block; + position: absolute; + background: transparent; + } + &[data-popper-placement^='top'] > .${classes.arrow} { bottom: calc(0px - var(${String(tokens.arrowHeight)})); } @@ -110,4 +118,52 @@ export const StyledPopover = styled.div<Pick<PopoverProps, 'zIndex'>>` bottom: var(${String(tokens.arrowEdgeMargin)}) !important; transform: unset !important; } + + &[data-popper-placement^='top'], + &[data-popper-placement^='top-start'], + &[data-popper-placement^='top-end'] { + &:before { + top: unset; + left: 0; + right: 0; + height: var(--plasma-popover-arrow-height); + bottom: calc(-1 * var(${String(tokens.arrowHeight)})); + } + } + + &[data-popper-placement^='bottom'], + &[data-popper-placement^='bottom-start'], + &[data-popper-placement^='bottom-end'] { + &:before { + top: calc(-1 * var(--plasma-popover-arrow-height)); + left: 0; + right: 0; + bottom: var(${String(tokens.arrowHeight)}); + height: var(--plasma-popover-arrow-height); + } + } + + &[data-popper-placement^='left'], + &[data-popper-placement^='left-start'], + &[data-popper-placement^='left-end'] { + &:before { + width: var(--plasma-popover-arrow-height); + height: 100%; + top: 0; + right: calc(-1 * var(--plasma-popover-arrow-height)); + bottom: 0; + } + } + + &[data-popper-placement^='right'], + &[data-popper-placement^='right-start'], + &[data-popper-placement^='right-end'] { + &:before { + width: var(--plasma-popover-arrow-height); + height: 100%; + top: 0; + left: calc(-1 * var(--plasma-popover-arrow-height)); + bottom: 0; + } + } `; diff --git a/packages/plasma-new-hope/src/components/Tooltip/Tooltip.tsx b/packages/plasma-new-hope/src/components/Tooltip/Tooltip.tsx index 577a9c2209..d3dee36c85 100644 --- a/packages/plasma-new-hope/src/components/Tooltip/Tooltip.tsx +++ b/packages/plasma-new-hope/src/components/Tooltip/Tooltip.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, forwardRef, useState } from 'react'; +import React, { useEffect, forwardRef, useState, useRef } from 'react'; import { styled } from '@linaria/react'; import { RootProps, component } from '../../engines'; @@ -62,16 +62,21 @@ export const tooltipRoot = (Root: RootProps<HTMLDivElement, Omit<TooltipProps, ' zIndex = '9200', className, style, + hoverTimeout = 300, + trigger, ...rest }, outerRef, ) => { const [ref, setRef] = useState<HTMLDivElement | null>(null); + const timeoutRef = useRef<number | undefined>(); + const [isOpened, setIsOpened] = useState(false); + const [isHovered, setIsHovered] = useState(false); // TODO убрать после отказа от старого API const innerIsOpen = Boolean(isVisible || isOpen || opened); const innerHasArrow = arrow || hasArrow; - const showTooltip = innerIsOpen && Boolean(text?.length); + const showTooltip = innerIsOpen && Boolean(text); const animatedClass = animated ? classes.animated : undefined; @@ -89,9 +94,39 @@ export const tooltipRoot = (Root: RootProps<HTMLDivElement, Omit<TooltipProps, ' }; }, []); + const onMouseEnter = () => { + clearTimeout(timeoutRef.current); + setIsHovered(true); + }; + + const onMouseLeave = () => { + timeoutRef.current = setTimeout(() => { + setIsHovered(false); + }, hoverTimeout); + }; + + useEffect(() => { + return () => clearTimeout(timeoutRef.current); + }, [trigger]); + + const onToggle = (isOpen: boolean) => { + if (trigger === 'hover') { + if (isOpen) { + clearTimeout(timeoutRef.current); + setIsOpened(true); + } else { + timeoutRef.current = setTimeout(() => { + setIsOpened(false); + }, hoverTimeout); + } + } else { + setIsOpened(isOpen); + } + }; + return ( <StyledPopover - opened={showTooltip} + opened={showTooltip || isOpened || isHovered} placement={placement} offset={offset} zIndex={zIndex} @@ -102,9 +137,19 @@ export const tooltipRoot = (Root: RootProps<HTMLDivElement, Omit<TooltipProps, ' aria-live="polite" role="tooltip" className={cx(ref?.classList.toString(), animatedClass)} + trigger={trigger !== 'none' ? trigger : undefined} + onToggle={trigger === 'hover' || trigger === 'click' ? onToggle : undefined} {...rest} > - <Root view={view} size={size} ref={setRef} className={className} style={style}> + <Root + view={view} + size={size} + ref={setRef} + className={className} + style={style} + onMouseEnter={trigger === 'hover' ? onMouseEnter : undefined} + onMouseLeave={trigger === 'hover' ? onMouseLeave : undefined} + > <TooltipRoot ref={outerRef} id={id} diff --git a/packages/plasma-new-hope/src/components/Tooltip/Tooltip.types.ts b/packages/plasma-new-hope/src/components/Tooltip/Tooltip.types.ts index 5271af2409..70130494e8 100644 --- a/packages/plasma-new-hope/src/components/Tooltip/Tooltip.types.ts +++ b/packages/plasma-new-hope/src/components/Tooltip/Tooltip.types.ts @@ -6,7 +6,7 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> { /** * Текст тултипа. */ - text: string; + text: string | ReactNode; /** * Видимость тултипа. */ @@ -94,4 +94,13 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> { * @deprecated */ children?: ReactNode; + /** + * Действие по target для отображения тултипа + */ + trigger?: 'click' | 'hover' | 'none'; + /** + * Время автоматического скрытия тултипа по ховеру в ms + * @defalut 300 + */ + hoverTimeout?: number; } diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx index fa0222bd13..d8e22af87e 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { styled } from '@linaria/react'; import type { StoryObj, Meta } from '@storybook/react'; +import { disableProps } from '@salutejs/plasma-sb-utils'; import { WithTheme } from '../../../_helpers'; import { Button } from '../Button/Button'; @@ -34,6 +35,9 @@ const meta: Meta<TooltipProps> = { title: 'b2c/Overlay/Tooltip', decorators: [WithTheme], component: Tooltip, + argTypes: { + ...disableProps(['isVisible', 'isOpen', 'onDismiss']), + }, parameters: { docs: { story: { inline: false, iframeHeight: '20rem' } }, }, @@ -147,7 +151,7 @@ export const Default: StoryObj<TooltipProps> = { const StyledRow = styled.div` display: flex; width: 150vw; - height: 150vh; + height: auto; padding: 10rem; `; @@ -170,7 +174,6 @@ const StoryLive = (args: TooltipProps) => { {...args} id="example-tooltip-firstname" text={text} - opened frame="theme-root" /> </StyledRow> @@ -193,12 +196,22 @@ export const Live: StoryObj<TooltipProps> = { type: 'select', }, }, + trigger: { + options: ['click', 'hover', 'none'], + control: { + type: 'select', + }, + }, }, args: { placement: 'bottom', maxWidth: 10, minWidth: 3, hasArrow: true, + trigger: 'hover', + hoverTimeout: 300, + closeOnOverlayClick: true, + closeOnEsc: true, size: 'm', }, render: (args) => <StoryLive {...args} />, diff --git a/packages/plasma-web/src/components/Tooltip/Tooltip.component-test.tsx b/packages/plasma-web/src/components/Tooltip/Tooltip.component-test.tsx index e19422d5ec..94d16fe61e 100644 --- a/packages/plasma-web/src/components/Tooltip/Tooltip.component-test.tsx +++ b/packages/plasma-web/src/components/Tooltip/Tooltip.component-test.tsx @@ -319,4 +319,67 @@ describe('plasma-web: Tooltip', () => { cy.matchImageSnapshot('multiple'); }); + + describe('trigger', () => { + it('trigger:click', () => { + mount( + <CypressTestDecoratorWithTypo> + <span id="outer" /> + <Tooltip + target={<Button text="hello" />} + text="World" + placement="bottom" + trigger="click" + closeOnOverlayClick + /> + </CypressTestDecoratorWithTypo>, + ); + + cy.contains('World').should('not.visible'); + + cy.contains('hello').click(); + cy.contains('World').should('be.visible'); + + cy.contains('hello').click(); + cy.contains('World').should('not.visible'); + + cy.contains('hello').click(); + cy.contains('World').should('be.visible'); + cy.get('#outer').click({ force: true }); + + cy.matchImageSnapshot(); + }); + + it('trigger:hover', () => { + mount( + <CypressTestDecoratorWithTypo> + <Tooltip target={<Button text="hello" />} text="World" placement="bottom" trigger="hover" /> + </CypressTestDecoratorWithTypo>, + ); + + cy.contains('World').should('not.visible'); + + cy.get('button').first().trigger('mouseover', { force: true }); + cy.contains('World').should('be.visible'); + + cy.get('button').first().trigger('mouseout', { force: true }); + cy.contains('World').should('not.visible'); + }); + + it('trigger:none', () => { + mount( + <CypressTestDecoratorWithTypo> + <Tooltip target={<Button text="hello" />} text="World" placement="bottom" trigger="none" /> + </CypressTestDecoratorWithTypo>, + ); + + cy.contains('World').should('not.visible'); + + cy.get('button').first().trigger('mouseover', { force: true }); + cy.contains('World').should('not.visible'); + + cy.contains('hello').click(); + cy.contains('World').should('not.visible'); + }); + }); }); diff --git a/packages/sdds-cs/api/sdds-cs.api.md b/packages/sdds-cs/api/sdds-cs.api.md index 51af1f0c54..6453612a12 100644 --- a/packages/sdds-cs/api/sdds-cs.api.md +++ b/packages/sdds-cs/api/sdds-cs.api.md @@ -510,7 +510,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -540,7 +540,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -634,7 +634,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -664,7 +664,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -1883,7 +1883,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -1945,7 +1945,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2135,7 +2135,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2197,7 +2197,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3059,7 +3059,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3102,7 +3102,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3145,7 +3145,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3188,7 +3188,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3434,7 +3434,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3469,7 +3469,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3578,7 +3578,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3613,7 +3613,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; diff --git a/packages/sdds-dfa/api/sdds-dfa.api.md b/packages/sdds-dfa/api/sdds-dfa.api.md index 1c8b82a338..b0f0844661 100644 --- a/packages/sdds-dfa/api/sdds-dfa.api.md +++ b/packages/sdds-dfa/api/sdds-dfa.api.md @@ -489,7 +489,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -519,7 +519,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -613,7 +613,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -643,7 +643,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -1927,7 +1927,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2003,7 +2003,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2235,7 +2235,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2311,7 +2311,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3228,7 +3228,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3271,7 +3271,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3314,7 +3314,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3357,7 +3357,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3617,7 +3617,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3652,7 +3652,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3761,7 +3761,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3796,7 +3796,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; diff --git a/packages/sdds-finportal/api/sdds-finportal.api.md b/packages/sdds-finportal/api/sdds-finportal.api.md index c85c380c7e..37f281a146 100644 --- a/packages/sdds-finportal/api/sdds-finportal.api.md +++ b/packages/sdds-finportal/api/sdds-finportal.api.md @@ -530,7 +530,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -560,7 +560,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -654,7 +654,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -684,7 +684,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2004,7 +2004,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2080,7 +2080,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2312,7 +2312,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2388,7 +2388,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3324,7 +3324,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3367,7 +3367,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3410,7 +3410,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3453,7 +3453,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3713,7 +3713,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3748,7 +3748,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3857,7 +3857,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3892,7 +3892,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; diff --git a/packages/sdds-insol/api/sdds-insol.api.md b/packages/sdds-insol/api/sdds-insol.api.md index 0d986745e3..c5928d2914 100644 --- a/packages/sdds-insol/api/sdds-insol.api.md +++ b/packages/sdds-insol/api/sdds-insol.api.md @@ -530,7 +530,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -560,7 +560,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -654,7 +654,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -684,7 +684,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2009,7 +2009,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2086,7 +2086,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2321,7 +2321,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2398,7 +2398,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3338,7 +3338,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3381,7 +3381,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3424,7 +3424,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3467,7 +3467,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3728,7 +3728,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3763,7 +3763,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3872,7 +3872,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3907,7 +3907,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; diff --git a/packages/sdds-serv/api/sdds-serv.api.md b/packages/sdds-serv/api/sdds-serv.api.md index 73e44ff2dc..ea82372e3f 100644 --- a/packages/sdds-serv/api/sdds-serv.api.md +++ b/packages/sdds-serv/api/sdds-serv.api.md @@ -530,7 +530,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -560,7 +560,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -654,7 +654,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -684,7 +684,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2004,7 +2004,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2080,7 +2080,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2312,7 +2312,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -2388,7 +2388,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3324,7 +3324,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3367,7 +3367,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3410,7 +3410,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3453,7 +3453,7 @@ requiredPlacement?: "right" | "left" | undefined; optional?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintOpened?: boolean | undefined; hintView?: string | undefined; hintSize?: string | undefined; @@ -3713,7 +3713,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3748,7 +3748,7 @@ clear?: boolean | undefined; hasDivider?: boolean | undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3857,7 +3857,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode; @@ -3892,7 +3892,7 @@ clear?: false | undefined; hasDivider?: undefined; } & { hintText: string; -hintTrigger?: "hover" | "click" | undefined; +hintTrigger?: "click" | "hover" | undefined; hintView?: string | undefined; hintSize?: string | undefined; hintTargetIcon?: ReactNode;