From 3d1d50efad678054ae26c2279ea57398fdff30a9 Mon Sep 17 00:00:00 2001 From: Sergey Pavlyuk Date: Fri, 1 Mar 2024 15:21:42 +0300 Subject: [PATCH 1/3] feat(Popup): add transition callbacks --- src/components/Popup/Popup.tsx | 22 ++++++++++++++++++++++ src/components/Popup/README.md | 4 ++++ 2 files changed, 26 insertions(+) diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx index 8ada3b5ef9..058717a7e6 100644 --- a/src/components/Popup/Popup.tsx +++ b/src/components/Popup/Popup.tsx @@ -20,6 +20,8 @@ import './Popup.scss'; export type PopupPlacement = PopperPlacement; export type PopupAnchorRef = PopperAnchorRef; +type VoidFunction = () => void; + export interface PopupProps extends DOMProps, LayerExtendableProps, PopperProps, QAProps { open?: boolean; children?: React.ReactNode; @@ -32,6 +34,10 @@ export interface PopupProps extends DOMProps, LayerExtendableProps, PopperProps, onMouseLeave?: React.MouseEventHandler; onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; + onTransitionEnter?: VoidFunction; + onTransitionEntered?: VoidFunction; + onTransitionExit?: VoidFunction; + onTransitionExited?: VoidFunction; disablePortal?: boolean; container?: HTMLElement; contentClassName?: string; @@ -71,6 +77,10 @@ export function Popup({ onMouseLeave, onFocus, onBlur, + onTransitionEnter, + onTransitionEntered, + onTransitionExit, + onTransitionExited, disablePortal, container, strategy, @@ -132,6 +142,18 @@ export function Popup({ mountOnEnter={!keepMounted} unmountOnExit={!keepMounted} appear={true} + onEnter={() => { + onTransitionEnter?.(); + }} + onEntered={() => { + onTransitionEntered?.(); + }} + onExit={() => { + onTransitionExit?.(); + }} + onExited={() => { + onTransitionExited?.(); + }} >
| onMouseEnter | `mouseenter` event handler | `Function` | | | onMouseLeave | `mouseleave` event handler | `Function` | | | onOutsideClick | Outside click event handler | `Function` | | +| onTransitionEnter | On start open popup animation | `Function` | | +| onTransitionEntered | On finish open popup animation | `Function` | | +| onTransitionExit | On start close popup animation | `Function` | | +| onTransitionExited | On finish close popup animation | `Function` | | | open | Manages `Popup` visibility | `boolean` | `false` | | placement | `Popper.js` placement | `PopupPlacement` `Array` | | | qa | Test attribute (`data-qa`) | `string` | | From b81aff41ca426b11ab3bdb441f60bb86ac81c556 Mon Sep 17 00:00:00 2001 From: Sergey Pavlyuk Date: Fri, 1 Mar 2024 15:51:32 +0300 Subject: [PATCH 2/3] fix(Popup): add jsdoc comments --- src/components/Popup/Popup.tsx | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx index 058717a7e6..84731cb02b 100644 --- a/src/components/Popup/Popup.tsx +++ b/src/components/Popup/Popup.tsx @@ -23,37 +23,59 @@ export type PopupAnchorRef = PopperAnchorRef; type VoidFunction = () => void; export interface PopupProps extends DOMProps, LayerExtendableProps, PopperProps, QAProps { - open?: boolean; children?: React.ReactNode; + /** Manages `Popup` visibility */ + open?: boolean; + /** `Popup` will not be removed from the DOM upon hiding */ keepMounted?: boolean; + /** Render an arrow pointing to the anchor */ hasArrow?: boolean; + /** Do not use `LayerManager` on stacking popups */ disableLayer?: boolean; /** @deprecated Add onClick handler to children */ onClick?: React.MouseEventHandler; + /** `mouseenter` event handler */ onMouseEnter?: React.MouseEventHandler; + /** `mouseleave` event handler */ onMouseLeave?: React.MouseEventHandler; + /** `focus` event handler */ onFocus?: React.FocusEventHandler; + /** `blur` event handler */ onBlur?: React.FocusEventHandler; + /** On start open popup animation void callback */ onTransitionEnter?: VoidFunction; + /** On finish open popup animation void callback */ onTransitionEntered?: VoidFunction; + /** On start close popup animation void callback */ onTransitionExit?: VoidFunction; + /** On finish close popup animation void callback */ onTransitionExited?: VoidFunction; + /** Do not use `Portal` for children */ disablePortal?: boolean; + /** DOM element children to be mounted to */ container?: HTMLElement; + /** HTML `class` attribute for content node */ contentClassName?: string; + /** If true, the focus will return to the anchor element */ restoreFocus?: boolean; + /** Element the focus will be restored to, depends on `restoreFocus` */ restoreFocusRef?: React.RefObject; + /** `aria-label` attribute, use this attribute only if you didn't have visible caption */ 'aria-label'?: React.AriaAttributes['aria-label']; + /** `aria-labelledby` attribute, prefer this attribute if you have visible caption */ 'aria-labelledby'?: React.AriaAttributes['aria-labelledby']; + /** `aria-role` attribute */ role?: React.AriaRole; + /** HTML `id` attribute */ id?: string; + /** Enable focus trapping behavior */ focusTrap?: boolean; + /** While open, the focus will be set to the first interactive element in the content */ autoFocus?: boolean; } const b = block('popup'); const ARROW_SIZE = 8; - export function Popup({ keepMounted = false, hasArrow = false, From b07c7a101601e47844f5d7a53a16f6fcd1670ceb Mon Sep 17 00:00:00 2001 From: Sergey Pavlyuk Date: Fri, 1 Mar 2024 17:22:20 +0300 Subject: [PATCH 3/3] fix(Popup): remove duplicate VoidFunction --- src/components/Popup/Popup.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx index 84731cb02b..f0e436b897 100644 --- a/src/components/Popup/Popup.tsx +++ b/src/components/Popup/Popup.tsx @@ -20,8 +20,6 @@ import './Popup.scss'; export type PopupPlacement = PopperPlacement; export type PopupAnchorRef = PopperAnchorRef; -type VoidFunction = () => void; - export interface PopupProps extends DOMProps, LayerExtendableProps, PopperProps, QAProps { children?: React.ReactNode; /** Manages `Popup` visibility */