feat(Popover): accept function as a children (#900)

Co-authored-by: kkmch <[email protected]>
gravity-ui · Sep 4, 2023 · ca5bcc7 · ca5bcc7
1 parent 60bf6cc
commit ca5bcc7
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 30 deletions.
diff --git a/src/components/Link/Link.scss b/src/components/Link/Link.scss
@@ -12,7 +12,6 @@ $block: '.#{variables.$ns}link';
     &:focus {
         outline: 2px solid var(--g-color-line-focus);
     }
-
     &:focus:not(:focus-visible) {
         outline: 0;
     }

diff --git a/src/components/Popover/__stories__/Popover.stories.tsx b/src/components/Popover/__stories__/Popover.stories.tsx
@@ -206,27 +206,31 @@ WithCustomAnchor.args = {
     content: 'Popover content',
 };
 
+const tooltipId = 'tooltipId';
+const popoverId = 'popoverId';
+
 const AccessibleTemplate: StoryFn<PopoverProps> = () => {
-    const [openTooltip, setOpenTooltip] = React.useState(false);
     const [openPopover, setOpenPopover] = React.useState(false);
     const ref = React.useRef<HTMLButtonElement>(null);
 
     return (
         <div className={cnPopoverDemo('variants')}>
-            <Base content="Accessible tooltip" tooltipId="tooltipId" onOpenChange={setOpenTooltip}>
-                <Button
-                    extraProps={{
-                        'aria-controls': 'tooltipId',
-                        'aria-describedby': 'tooltipId',
-                        'aria-expanded': openTooltip,
-                    }}
-                >
-                    Tooltip
-                </Button>
+            <Base content="Accessible tooltip" tooltipId={tooltipId}>
+                {({onClick}) => (
+                    <Button
+                        extraProps={{
+                            'aria-controls': tooltipId,
+                            'aria-describedby': tooltipId,
+                        }}
+                        onClick={onClick}
+                    >
+                        Tooltip
+                    </Button>
+                )}
             </Base>
             <Base
                 content="Accessible popover with actions"
-                tooltipId="popoverId"
+                tooltipId={popoverId}
                 onOpenChange={setOpenPopover}
                 tooltipActionButton={{
                     text: 'Action with more',
@@ -238,21 +242,24 @@ const AccessibleTemplate: StoryFn<PopoverProps> = () => {
                 }}
                 autoclosable={false}
                 openOnHover={false}
-                focusTrap={true}
+                focusTrap
                 // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus={true}
+                autoFocus
                 restoreFocusRef={ref}
             >
-                <Button
-                    ref={ref}
-                    extraProps={{
-                        'aria-controls': 'popoverId',
-                        'aria-describedby': 'popoverId',
-                        'aria-expanded': openPopover,
-                    }}
-                >
-                    Popover
-                </Button>
+                {({onClick}) => (
+                    <Button
+                        ref={ref}
+                        extraProps={{
+                            'aria-controls': popoverId,
+                            'aria-describedby': popoverId,
+                            'aria-expanded': openPopover,
+                        }}
+                        onClick={onClick}
+                    >
+                        Popover
+                    </Button>
+                )}
             </Base>
         </div>
     );

diff --git a/src/components/Popover/components/Trigger/Trigger.tsx b/src/components/Popover/components/Trigger/Trigger.tsx
@@ -2,7 +2,12 @@ import React from 'react';
 
 import {useActionHandlers} from '../../../utils/useActionHandlers';
 
-export type TriggerProps = {
+interface TriggerArgs {
+    onClick: React.MouseEventHandler;
+    onKeyDown: React.KeyboardEventHandler;
+}
+
+export interface TriggerProps {
     /**
      * Tooltip's opened state
      */
@@ -34,8 +39,8 @@ export type TriggerProps = {
     /**
      * Tooltip's trigger content
      */
-    children?: React.ReactNode;
-};
+    children?: React.ReactNode | ((triggerArgs: TriggerArgs) => React.ReactNode);
+}
 
 export const Trigger = ({
     open,
@@ -75,7 +80,9 @@ export const Trigger = ({
 
     const {onKeyDown} = useActionHandlers(handleClick);
 
-    return (
+    return typeof children === 'function' ? (
+        <React.Fragment>{children({onClick: handleClick, onKeyDown})}</React.Fragment>
+    ) : (
         // The event handler should only be used to capture bubbled events
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         <div

diff --git a/src/components/constants.ts b/src/components/constants.ts
@@ -4,5 +4,6 @@ export const KeyCode = {
     TAB: 'Tab',
     // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values#whitespace_keys
     SPACEBAR: ' ',
+    SPACEBAR_OLD: 'Spacebar',
     ESCAPE: 'Escape',
 };
diff --git a/src/components/utils/useActionHandlers.ts b/src/components/utils/useActionHandlers.ts
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {KeyCode} from '../constants';
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyFunction = (...args: any[]) => any;
 
@@ -15,7 +17,10 @@ interface UseActionHandlersResult<T> {
 export function useActionHandlers<T>(callback?: AnyFunction): UseActionHandlersResult<T> {
     const onKeyDown = React.useCallback(
         (event: React.KeyboardEvent<T>) => {
-            if (callback && ['Enter', ' ', 'Spacebar'].includes(event.key)) {
+            if (
+                callback &&
+                [KeyCode.ENTER, KeyCode.SPACEBAR, KeyCode.SPACEBAR_OLD].includes(event.key)
+            ) {
                 callback(event);
             }
         },