@lumx/react 2.2.20 → 2.2.22-alpha-icons-tree-shake.1

package/src/components/generic-block/GenericBlock.test.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
+import { commonTestsSuite } from '@lumx/react/testing/utils';
 
 import { GenericBlock, GenericBlockProps } from './GenericBlock';
-import * as stories from '../../stories/generated/GenericBlock/Demos.stories';
 
 const CLASSNAME = GenericBlock.className as string;
 
@@ -20,7 +19,132 @@ const setup = (props: Partial<GenericBlockProps> = {}, shallowRendering = true)
 describe(`<${GenericBlock.displayName}>`, () => {
     // 1. Test render via snapshot.
     describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, GenericBlock);
+        it('should render default', () => {
+            const wrapper = shallow(
+                <GenericBlock figure="figure" actions="actions">
+                    Content
+                </GenericBlock>,
+            );
+
+            expect(wrapper.prop('gap')).toBe('big');
+            expect(wrapper.prop('hAlign')).toBe('top');
+            expect(wrapper.prop('orientation')).toBe('horizontal');
+            expect(wrapper.prop('vAlign')).toBe('center');
+
+            const figure = wrapper.find('.lumx-generic-block__figure');
+            expect(figure).toBeDefined();
+
+            const content = wrapper.find('.lumx-generic-block__content');
+            expect(content.prop('fillSpace')).toBe(true);
+            expect(content.prop('vAlign')).toBe('left');
+            expect(content.prop('orientation')).toBe('vertical');
+
+            const actions = wrapper.find('.lumx-generic-block__actions');
+            expect(actions.prop('vAlign')).toBe('right');
+        });
+
+        it('should render vertical', () => {
+            const wrapper = shallow(
+                <GenericBlock figure="figure" actions="actions" orientation="vertical">
+                    Content
+                </GenericBlock>,
+            );
+
+            expect(wrapper.prop('gap')).toBe('big');
+            expect(wrapper.prop('hAlign')).toBe('top');
+            expect(wrapper.prop('orientation')).toBe('vertical');
+            expect(wrapper.prop('vAlign')).toBe('center');
+
+            const figure = wrapper.find('.lumx-generic-block__figure');
+            expect(figure).toBeDefined();
+
+            const content = wrapper.find('.lumx-generic-block__content');
+            expect(content.prop('fillSpace')).toBe(true);
+            expect(content.prop('vAlign')).toBe('center');
+            expect(content.prop('orientation')).toBe('vertical');
+
+            const actions = wrapper.find('.lumx-generic-block__actions');
+            expect(actions.prop('vAlign')).toBe('center');
+        });
+
+        it('should combine figure props', () => {
+            const wrapper = shallow(
+                <GenericBlock figure="Figure 1" figureProps={{ className: 'figure1', vAlign: 'left' }}>
+                    <GenericBlock.Figure className="figure2" fillSpace>
+                        Figure 2
+                    </GenericBlock.Figure>
+                </GenericBlock>,
+            );
+
+            const figure = wrapper.find('.lumx-generic-block__figure');
+            expect(figure).toHaveClassName('figure1');
+            expect(figure).toHaveClassName('figure2');
+            expect(figure.prop('fillSpace')).toBe(true);
+            expect(figure.prop('vAlign')).toBe('left');
+            expect(figure).toHaveText('Figure 1Figure 2');
+
+            expect(wrapper.find('.lumx-generic-block__content')).toHaveLength(0);
+            expect(wrapper.find('.lumx-generic-block__actions')).toHaveLength(0);
+        });
+
+        it('should combine content props', () => {
+            const wrapper = shallow(
+                <GenericBlock contentProps={{ className: 'content1', vAlign: 'left' }}>
+                    Content 1
+                    <GenericBlock.Content className="content2" fillSpace>
+                        Content 2
+                    </GenericBlock.Content>
+                </GenericBlock>,
+            );
+
+            const content = wrapper.find('.lumx-generic-block__content');
+            expect(content).toHaveClassName('content1');
+            expect(content).toHaveClassName('content2');
+            expect(content.prop('fillSpace')).toBe(true);
+            expect(content.prop('vAlign')).toBe('left');
+            expect(content).toHaveText('Content 2Content 1');
+
+            expect(wrapper.find('.lumx-generic-block__figure')).toHaveLength(0);
+            expect(wrapper.find('.lumx-generic-block__actions')).toHaveLength(0);
+        });
+
+        it('should combine actions props', () => {
+            const wrapper = shallow(
+                <GenericBlock actions="Actions 1" actionsProps={{ className: 'actions1', vAlign: 'left' }}>
+                    <GenericBlock.Actions className="actions2" fillSpace>
+                        Actions 2
+                    </GenericBlock.Actions>
+                </GenericBlock>,
+            );
+
+            const actions = wrapper.find('.lumx-generic-block__actions');
+            expect(actions).toHaveClassName('actions1');
+            expect(actions).toHaveClassName('actions2');
+            expect(actions.prop('fillSpace')).toBe(true);
+            expect(actions.prop('vAlign')).toBe('left');
+            expect(actions).toHaveText('Actions 1Actions 2');
+
+            expect(wrapper.find('.lumx-generic-block__figure')).toHaveLength(0);
+            expect(wrapper.find('.lumx-generic-block__content')).toHaveLength(0);
+        });
+
+        it('should forward refs', () => {
+            const rootRef = createRef<HTMLDivElement>();
+            const figureRef = createRef<HTMLDivElement>();
+            const contentRef = createRef<HTMLDivElement>();
+            const actionsRef = createRef<HTMLDivElement>();
+            shallow(
+                <GenericBlock ref={rootRef}>
+                    <GenericBlock.Figure ref={figureRef} />
+                    <GenericBlock.Content ref={contentRef} />
+                    <GenericBlock.Actions ref={actionsRef} />
+                </GenericBlock>,
+            );
+            expect(rootRef.current).toBeDefined();
+            expect(figureRef.current).toBeDefined();
+            expect(contentRef.current).toBeDefined();
+            expect(actionsRef.current).toBeDefined();
+        });
     });
 
     // Common tests suite.

package/src/components/generic-block/GenericBlock.tsx

@@ -1,29 +1,47 @@
-import React, { forwardRef, ReactNode } from 'react';
+import React, { Children, forwardRef, ReactElement, ReactNode } from 'react';
 import classNames from 'classnames';
-import { Comp, getRootClassName } from '@lumx/react/utils';
+import isEmpty from 'lodash/isEmpty';
+import { Comp, getRootClassName, isComponentType, partitionMulti } from '@lumx/react/utils';
 import { Orientation, Size, FlexBox, FlexBoxProps, Alignment, HorizontalAlignment } from '@lumx/react';
 
 export interface GenericBlockProps extends FlexBoxProps {
-    /** Component to use as visual element. */
+    /**
+     * Component to use as visual element.
+     */
     figure?: ReactNode;
-    /** Actions to set after the main content. */
+    /**
+     * Actions to set after the main content.
+     */
     actions?: ReactNode;
-    /** Main content to display */
+    /**
+     * Main content to display or sections components
+     * ({@see GenericBlock.Figure}, {@see GenericBlock.Content} & {@see GenericBlock.Actions})
+     */
     children: ReactNode;
-    /** Orientation of the 3 sections */
+    /**
+     * Orientation of the 3 sections
+     */
     orientation?: FlexBoxProps['orientation'];
-    /** Horizontal alignment. */
+    /**
+     * Horizontal alignment.
+     */
     hAlign?: FlexBoxProps['hAlign'];
-    /** Vertical alignment. */
+    /**
+     * Vertical alignment.
+     */
     vAlign?: FlexBoxProps['vAlign'];
     /**
      * The props to forward to the content.
      * By default, the content will have the same alignment as wrapper.
      */
     contentProps?: Omit<FlexBoxProps, 'children'>;
-    /** props to forward to the actions element. */
+    /**
+     * props to forward to the actions element.
+     */
     actionsProps?: Omit<FlexBoxProps, 'children'>;
-    /** props to forward to the figure element. */
+    /**
+     * props to forward to the figure element.
+     */
     figureProps?: Omit<FlexBoxProps, 'children'>;
 }
 
@@ -41,24 +59,53 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<GenericBlockProps> = {
-    gap: Size.regular,
-    orientation: Orientation.vertical,
-    hAlign: Alignment.center,
+    gap: Size.big,
+    orientation: Orientation.horizontal,
+    hAlign: Alignment.top,
     vAlign: Alignment.center,
 };
 
+type BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;
+
+interface GenericBlock extends BaseGenericBlock {
+    /**
+     * Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject
+     * the "figure" section of the block (instead of using `figure` and `figureProps` props).
+     */
+    Figure: Comp<FlexBoxProps>;
+    /**
+     * Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject
+     * the "content" section of the block (instead of using `content` and `contentProps` props).
+     */
+    Content: Comp<FlexBoxProps>;
+    /**
+     * Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject
+     * the "actions" section of the block (instead of using `actions` and `actionsProps` props).
+     */
+    Actions: Comp<FlexBoxProps>;
+}
+
+const Figure = (() => null) as any;
+const isFigure = isComponentType(Figure);
+
+const Content = (() => null) as any;
+const isContent = isComponentType(Content);
+
+const Actions = (() => null) as any;
+const isActions = isComponentType(Actions);
+
 /**
  * The GenericBlock is a layout component made of 3 sections that can be
  * displayed either horizontally of vertically with the same gap between each section.
  *
  * The sections are:
- * * (Optional) `Figure` => A visual element to display before the main content.
- * * (Required) `Content` => The main content displayed
- * * (Optional) `Actions` => One or more actions to set after the element.
+ * - `Figure` => A visual element to display before the main content.
+ * - `Content` => The main content displayed
+ * - `Actions` => One or more actions to set after the element.
  *
  * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
  */
-export const GenericBlock: Comp<GenericBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
+const BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {
     const {
         className,
         figure,
@@ -72,6 +119,23 @@ export const GenericBlock: Comp<GenericBlockProps, HTMLDivElement> = forwardRef(
         ...forwardedProps
     } = props;
 
+    const sections = React.useMemo(() => {
+        // Split children by section type
+        const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(
+            Children.toArray(children),
+            [isFigure, isContent, isActions],
+        );
+        return {
+            figureChild,
+            figureChildProps: (figureChild as ReactElement)?.props,
+            contentChild,
+            contentChildProps: (contentChild as ReactElement)?.props,
+            actionsChild,
+            actionsChildProps: (actionsChild as ReactElement)?.props,
+            otherChildren: otherChildren.filter((child) => !isEmpty(child)),
+        };
+    }, [children]);
+
     let actionsVAlign: HorizontalAlignment = Alignment.center;
     if (orientation === Orientation.horizontal) {
         actionsVAlign = Alignment.right;
@@ -89,32 +153,62 @@ export const GenericBlock: Comp<GenericBlockProps, HTMLDivElement> = forwardRef(
             orientation={orientation}
             {...forwardedProps}
         >
-            <FlexBox {...figureProps} className={classNames(figureProps?.className, `${CLASSNAME}__figure`)}>
-                {figure}
-            </FlexBox>
+            {(figure || sections.figureChildProps?.children) && (
+                <FlexBox
+                    ref={(sections.figureChild as any)?.ref}
+                    {...figureProps}
+                    {...sections.figureChildProps}
+                    className={classNames(
+                        figureProps?.className,
+                        sections.figureChildProps?.className,
+                        `${CLASSNAME}__figure`,
+                    )}
+                >
+                    {figure}
+                    {sections.figureChildProps?.children}
+                </FlexBox>
+            )}
 
-            {children && (
+            {(sections.contentChildProps?.children || sections.otherChildren.length > 0) && (
                 <FlexBox
+                    ref={(sections.contentChild as any)?.ref}
                     orientation={Orientation.vertical}
                     fillSpace
                     vAlign={contentVAlign}
                     {...contentProps}
-                    className={classNames(contentProps?.className, `${CLASSNAME}__content`)}
+                    {...sections.contentChildProps}
+                    className={classNames(
+                        contentProps?.className,
+                        sections.contentChildProps?.className,
+                        `${CLASSNAME}__content`,
+                    )}
                 >
-                    {children}
+                    {sections.contentChildProps?.children}
+                    {sections.otherChildren}
                 </FlexBox>
             )}
 
-            <FlexBox
-                vAlign={actionsVAlign}
-                {...actionsProps}
-                className={classNames(actionsProps?.className, `${CLASSNAME}__actions`)}
-            >
-                {actions}
-            </FlexBox>
+            {(actions || sections.actionsChildProps?.children) && (
+                <FlexBox
+                    ref={(sections.actionsChild as any)?.ref}
+                    vAlign={actionsVAlign}
+                    {...actionsProps}
+                    {...sections.actionsChildProps}
+                    className={classNames(
+                        actionsProps?.className,
+                        sections.actionsChildProps?.className,
+                        `${CLASSNAME}__actions`,
+                    )}
+                >
+                    {actions}
+                    {sections.actionsChildProps?.children}
+                </FlexBox>
+            )}
         </FlexBox>
     );
 });
-GenericBlock.displayName = COMPONENT_NAME;
-GenericBlock.className = CLASSNAME;
-GenericBlock.defaultProps = DEFAULT_PROPS;
+BaseGenericBlock.displayName = COMPONENT_NAME;
+BaseGenericBlock.className = CLASSNAME;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS;
+
+export const GenericBlock: GenericBlock = Object.assign(BaseGenericBlock, { Figure, Content, Actions });

package/src/components/icon/Icon.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { Color, ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 import { mdiAlertCircle } from '@lumx/icons';
 
 export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
@@ -11,7 +11,7 @@ export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'x
 /**
  * Defines the props of the component.
  */
-export interface IconProps extends GenericProps {
+export interface IconProps extends GenericProps, HasTheme {
     /** Color variant. */
     color?: Color;
     /** Lightened or darkened variant of the selected icon color. */
@@ -25,8 +25,6 @@ export interface IconProps extends GenericProps {
     icon: string;
     /** Size variant. */
     size?: IconSizes;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
     alt?: string;
 }

package/src/components/image-block/ImageBlock.tsx

@@ -6,7 +6,7 @@ import isObject from 'lodash/isObject';
 
 import { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
 import { ThumbnailProps } from '../thumbnail/Thumbnail';
 
 /**
@@ -26,7 +26,7 @@ export type ImageBlockSize = Extract<Size, 'xl' | 'xxl'>;
 /**
  * Defines the props of the component.
  */
-export interface ImageBlockProps extends GenericProps {
+export interface ImageBlockProps extends GenericProps, HasTheme {
     /** Action toolbar content. */
     actions?: ReactNode;
     /** Alignment. */
@@ -47,8 +47,6 @@ export interface ImageBlockProps extends GenericProps {
     size?: ImageBlockSize;
     /** Tag content. */
     tags?: ReactNode;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */
     thumbnailProps?: Omit<ThumbnailProps, 'image' | 'size' | 'theme' | 'align' | 'fillHeight'>;
     /** Image title to display in the caption. */

package/src/components/input-helper/InputHelper.tsx

@@ -1,5 +1,5 @@
 import { Kind, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
 
@@ -8,13 +8,11 @@ import { INPUT_HELPER_CONFIGURATION } from './constants';
 /**
  * Defines the props of the component.
  */
-export interface InputHelperProps extends GenericProps {
+export interface InputHelperProps extends GenericProps, HasTheme {
     /** Helper content. */
     children: string | ReactNode;
     /** Helper variant. */
     kind?: Kind;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
 }
 
 /**

package/src/components/input-label/InputLabel.tsx

@@ -1,20 +1,18 @@
 import { Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 import classNames from 'classnames';
 import React, { forwardRef, ReactNode } from 'react';
 
 /**
  * Defines the props of the component.
  */
-export interface InputLabelProps extends GenericProps {
+export interface InputLabelProps extends GenericProps, HasTheme {
     /** Label content. */
     children: string | ReactNode;
     /** Native htmlFor property. */
     htmlFor: string;
     /** Whether the component is required or not. */
     isRequired?: boolean;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
 }
 
 /**

package/src/components/lightbox/Lightbox.tsx

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 
 import { mdiClose } from '@lumx/icons';
-import { ColorPalette, Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
+import { ColorPalette, Emphasis, IconButton, IconButtonProps } from '@lumx/react';
 import { DOCUMENT } from '@lumx/react/constants';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
@@ -20,7 +20,7 @@ const LIGHTBOX_TRANSITION_DURATION = 400;
 /**
  * Defines the props of the component.
  */
-export interface LightboxProps extends GenericProps {
+export interface LightboxProps extends GenericProps, HasTheme {
     /** Props to pass to the close button (minus those already set by the Lightbox props). */
     closeButtonProps?: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
@@ -30,8 +30,6 @@ export interface LightboxProps extends GenericProps {
     parentElement: RefObject<any>;
     /** Whether to keep the dialog open on clickaway or escape press. */
     preventAutoClose?: boolean;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Z-axis position. */
     zIndex?: number;
     /** On close callback. */
@@ -143,7 +141,7 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
                     onClick={onClose}
                 />
             )}
-            <ClickAwayProvider callback={!preventAutoClose && onClose} refs={clickAwayRefs}>
+            <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>
                 <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role="presentation">
                     {children}
                 </div>

package/src/components/lightbox/__snapshots__/Lightbox.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`<Lightbox> Snapshots and structure should render story 'Default' 1`] =
     />
     <ClickAwayProvider
       callback={[Function]}
-      refs={
+      childrenRefs={
         Object {
           "current": Array [
             Object {

package/src/components/link-preview/LinkPreview.tsx

@@ -14,12 +14,12 @@ import {
     ThumbnailProps,
 } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HeadingElement } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HeadingElement, HasTheme } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.
  */
-export interface LinkPreviewProps extends GenericProps {
+export interface LinkPreviewProps extends GenericProps, HasTheme {
     /** Description. */
     description?: string;
     /** Link URL. */
@@ -30,8 +30,6 @@ export interface LinkPreviewProps extends GenericProps {
     linkProps?: Omit<LinkProps, 'color' | 'colorVariant' | 'href' | 'target'>;
     /** Size variant. */
     size?: Extract<Size, 'regular' | 'big'>;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Thumbnail for the link preview. */
     thumbnailProps?: ThumbnailProps;
     /** Title. */

package/src/components/mosaic/Mosaic.tsx

@@ -1,16 +1,14 @@
 import React, { forwardRef, MouseEventHandler, useMemo } from 'react';
 
 import { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 import classNames from 'classnames';
 import take from 'lodash/take';
 
 /**
  * Defines the props of the component.
  */
-export interface MosaicProps extends GenericProps {
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
+export interface MosaicProps extends GenericProps, HasTheme {
     /** Thumbnails. */
     thumbnails: ThumbnailProps[];
     /** On image click callback. */

package/src/components/notification/Notification.tsx

@@ -9,22 +9,20 @@ import { Button, Emphasis, Icon, Kind, Size, Theme } from '@lumx/react';
 
 import { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constants';
 import { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/constants';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
 
 /**
  * Defines the props of the component.
  */
-export interface NotificationProps extends GenericProps {
+export interface NotificationProps extends GenericProps, HasTheme {
     /** Action button label. */
     actionLabel?: string;
     /** Content. */
     content?: React.ReactNode;
     /** Whether the component is open or not. */
     isOpen?: boolean;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Notification type. */
     type?: Kind;
     /** Z-axis position. */

package/src/components/popover/Popover.tsx

@@ -342,7 +342,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
                   style={popoverStyle}
                   {...attributes.popper}
               >
-                  <ClickAwayProvider callback={closeOnClickAway && handleClose} refs={clickAwayRefs}>
+                  <ClickAwayProvider callback={closeOnClickAway && handleClose} childrenRefs={clickAwayRefs}>
                       {hasArrow && <div ref={setArrowElement} className={`${CLASSNAME}__arrow`} style={styles.arrow} />}
                       {children}
                   </ClickAwayProvider>