@lumx/react 3.0.5 → 3.0.6-alpha.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.0.5",
-        "@lumx/icons": "^3.0.5",
+        "@lumx/core": "^3.0.6-alpha.0",
+        "@lumx/icons": "^3.0.6-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -114,6 +114,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.0.5",
-    "gitHead": "83eccabdc29dbf61fd519c88729002a5bb8d4790"
+    "version": "3.0.6-alpha.0",
+    "gitHead": "22ae75c6b11ab36e3f9e194af19a5fdef291ce3c"
 }

package/src/components/autocomplete/Autocomplete.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, ReactNode, SyntheticEvent, useRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Dropdown, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
+import { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';
 
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
@@ -41,10 +41,13 @@ export interface AutocompleteProps extends GenericProps, HasTheme {
      */
     placement?: Placement;
     /**
-     * Whether the dropdown should fit to the anchor width or not.
+     * Manage dropdown width:
+     *   - `maxWidth`: dropdown not bigger than anchor
+     *   - `minWidth` or `true`: dropdown not smaller than anchor
+     *   - `width`: dropdown equal to the anchor.
      * @see {@link DropdownProps#fitToAnchorWidth}
      */
-    fitToAnchorWidth?: boolean;
+    fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];
     /**
      * The error related to the component.
      * @see {@link TextFieldProps#error}
@@ -160,7 +163,7 @@ export interface AutocompleteProps extends GenericProps, HasTheme {
      * Only the props not managed by the Autocomplete can be set.
      * @see {@link TextFieldProps}
      */
-    textFieldProps?: TextFieldProps;
+    textFieldProps?: Partial<TextFieldProps>;
 }
 
 /**

package/src/components/badge/Badge.tsx

@@ -1,4 +1,4 @@
-import { Color, ColorPalette } from '@lumx/react';
+import { ColorPalette } from '@lumx/react';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
@@ -11,7 +11,7 @@ export interface BadgeProps extends GenericProps {
     /** Badge content. */
     children?: ReactNode;
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
 }
 
 /**

package/src/components/button/Button.stories.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { mdiSend } from '@lumx/icons';
-import { Button, ColorPalette, IconButton } from '@lumx/react';
+import { Button, ColorPalette, IconButton, Text } from '@lumx/react';
 import { squareImageKnob } from '@lumx/react/stories/knobs/image';
 import { buttonSize } from '@lumx/react/stories/knobs/buttonKnob';
 import { emphasis } from '@lumx/react/stories/knobs/emphasisKnob';
@@ -30,6 +30,32 @@ export const SimpleButton = ({ theme }: any) => {
     );
 };
 
+export const SimpleButtonWithTruncatedText = ({ theme }: any) => {
+    const buttonText =
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Potenti nullam ac tortor vitae. Lorem ipsum dolor sit amet. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Mollis aliquam ut porttitor leo a diam sollicitudin tempor. Ultrices tincidunt arcu non sodales neque sodales.';
+    return (
+        <Button
+            aria-pressed={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
+            emphasis={emphasis('Emphasis', DEFAULT_PROPS.emphasis)}
+            theme={theme}
+            rightIcon={select('Right icon', { none: undefined, mdiSend }, undefined)}
+            leftIcon={select('Left icon', { none: undefined, mdiSend }, undefined)}
+            size={buttonSize()}
+            isSelected={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
+            isDisabled={boolean('isDisabled', Boolean(DEFAULT_PROPS.isDisabled))}
+            color={select('color', ColorPalette, DEFAULT_PROPS.color)}
+            href={text('Button link', '')}
+            hasBackground={boolean('hasBackground', Boolean(DEFAULT_PROPS.hasBackground))}
+            fullWidth
+            title={buttonText}
+        >
+            <Text as="span" truncate>
+                {text('Button content', buttonText)}
+            </Text>
+        </Button>
+    );
+};
+
 export const WithHref = () => <Button href="https://google.com">Button with redirection</Button>;
 
 export const Disabled = () => <Button isDisabled>Disabled button</Button>;

package/src/components/button/Button.tsx

@@ -3,8 +3,8 @@ import React, { forwardRef, ReactNode } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
-import { Emphasis, Icon, Size, Theme } from '@lumx/react';
-import { Comp } from '@lumx/react/utils/type';
+import { Emphasis, Icon, Size, Theme, Text } from '@lumx/react';
+import { Comp, isComponent } from '@lumx/react/utils/type';
 import { getBasicClass, getRootClassName } from '@lumx/react/utils/className';
 import { BaseButtonProps, ButtonRoot } from './ButtonRoot';
 
@@ -71,7 +71,7 @@ export const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement> =
             variant="button"
         >
             {leftIcon && !isEmpty(leftIcon) && <Icon icon={leftIcon} />}
-            {children && <span>{children}</span>}
+            {children && (isComponent(Text)(children) ? children : <span>{children}</span>)}
             {rightIcon && !isEmpty(rightIcon) && <Icon icon={rightIcon} />}
         </ButtonRoot>
     );

package/src/components/button/ButtonRoot.tsx

@@ -4,7 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
-import { Color, ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
+import { ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
@@ -22,7 +22,7 @@ export interface BaseButtonProps
         Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>,
         HasTheme {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Emphasis variant. */
     emphasis?: Emphasis;
     /** Whether or not the button has a background color in low emphasis. */

package/src/components/chip/Chip.tsx

@@ -1,4 +1,4 @@
-import { Color, ColorPalette, Size, Theme } from '@lumx/react';
+import { ColorPalette, Size, Theme } from '@lumx/react';
 import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
@@ -24,7 +24,7 @@ export interface ChipProps extends GenericProps, HasTheme {
     /** A component to be rendered before the content. */
     before?: ReactNode;
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Whether the component is clickable or not. */
     isClickable?: boolean;
     /** Whether the component is disabled or not. */

package/src/components/dropdown/Dropdown.tsx

@@ -34,10 +34,13 @@ export interface DropdownProps extends GenericProps {
      */
     closeOnEscape?: boolean;
     /**
-     * Whether the dropdown should fit to the anchor width (if dropdown is smaller) or not.
+     * Manage dropdown width:
+     *   - `maxWidth`: dropdown not bigger than anchor
+     *   - `minWidth` or `true`: dropdown not smaller than anchor
+     *   - `width`: dropdown equal to the anchor.
      * @see {@link PopoverProps#fitToAnchorWidth}
      */
-    fitToAnchorWidth?: boolean;
+    fitToAnchorWidth?: PopoverProps['fitToAnchorWidth'];
     /**
      * Whether the dropdown should shrink to fit within the viewport height or not.
      * @see {@link PopoverProps#fitWithinViewportHeight}

package/src/components/icon/Icon.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Color, ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
+import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mdiAlertCircle } from '@lumx/icons';
@@ -14,7 +14,7 @@ export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'x
  */
 export interface IconProps extends GenericProps, HasTheme {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Whether the icon has a shape. */

package/src/components/index.ts

@@ -34,7 +34,6 @@ export const ColorPalette = {
     grey: 'grey',
 } as const;
 export type ColorPalette = ValueOf<typeof ColorPalette>;
-export type Color = ColorPalette | string;
 
 /**
  * See SCSS variable $lumx-color-variants

package/src/components/link/Link.tsx

@@ -4,7 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
-import { Color, ColorVariant, Icon, Size, Typography } from '@lumx/react';
+import { ColorPalette, ColorVariant, Icon, Size, Typography } from '@lumx/react';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
@@ -16,7 +16,7 @@ type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAn
  */
 export interface LinkProps extends GenericProps {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Link href. */

package/src/components/popover/Popover.stories.tsx

@@ -314,3 +314,73 @@ export const NestedWithoutPortal = () => {
         </div>
     );
 };
+
+export const FitToAnchorWidth = ({ theme }: any) => {
+    const demoPopperStyle = {
+        alignItems: 'center',
+        display: 'flex',
+        height: 100,
+        justifyContent: 'center',
+        width: 200,
+    };
+
+    const container = {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        gap: 150,
+        marginTop: 150,
+    } as const;
+
+    const maxWidthAnchorRef = useRef(null);
+    const widthSmallAnchorRef = useRef(null);
+    const widthLargeAnchorRef = useRef(null);
+    const minWidthAnchorRef = useRef(null);
+    const defaultWidthAnchorRef = useRef(null);
+
+    return (
+        <div style={container}>
+            <div>
+                <Chip ref={maxWidthAnchorRef} theme={theme} size={Size.s}>
+                    Anchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={maxWidthAnchorRef} fitToAnchorWidth="maxWidth" isOpen placement="top">
+                <div style={demoPopperStyle}>Popover maxWidth</div>
+            </Popover>
+            <div>
+                <Chip ref={widthSmallAnchorRef} theme={theme} size={Size.s}>
+                    Anchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={widthSmallAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
+                <div style={demoPopperStyle}>Popover width small anchor</div>
+            </Popover>
+            <div>
+                <Chip ref={widthLargeAnchorRef} theme={theme} size={Size.s}>
+                    VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={widthLargeAnchorRef} fitToAnchorWidth="width" isOpen placement="top">
+                <div style={demoPopperStyle}>Popover width large anchor</div>
+            </Popover>
+            <div>
+                <Chip ref={minWidthAnchorRef} theme={theme} size={Size.s}>
+                    VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={minWidthAnchorRef} fitToAnchorWidth="minWidth" isOpen placement="top">
+                <div style={demoPopperStyle}>Popover minWidth</div>
+            </Popover>
+            <div>
+                <Chip ref={defaultWidthAnchorRef} theme={theme} size={Size.s}>
+                    VeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLargeAnchor
+                </Chip>
+            </div>
+            <Popover theme={theme} anchorRef={defaultWidthAnchorRef} isOpen placement="top">
+                <div style={demoPopperStyle}>Popover default</div>
+            </Popover>
+        </div>
+    );
+};

package/src/components/popover/Popover.tsx

@@ -4,6 +4,7 @@ import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 
 import classNames from 'classnames';
+import memoize from 'lodash/memoize';
 
 import { DOCUMENT, WINDOW } from '@lumx/react/constants';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
@@ -15,6 +16,7 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
+import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 
 /**
  * Different possible placements for the popover.
@@ -62,6 +64,13 @@ export type Elevation = 1 | 2 | 3 | 4 | 5;
  */
 const ARROW_SIZE = 8;
 
+const AnchorWidthOptions = {
+    MAX_WIDTH: 'maxWidth',
+    MIN_WIDTH: 'minWidth',
+    WIDTH: 'width',
+} as const;
+type AnchorWidthOption = ValueOf<typeof AnchorWidthOptions>;
+
 /**
  * Defines the props of the component.
  */
@@ -78,8 +87,13 @@ export interface PopoverProps extends GenericProps {
     closeOnEscape?: boolean;
     /** Shadow elevation. */
     elevation?: Elevation;
-    /** Whether the dropdown should fit to the anchor width (if dropdown is smaller). */
-    fitToAnchorWidth?: boolean;
+    /**
+     * Manage popover width:
+     *   - `maxWidth`: popover not bigger than anchor
+     *   - `minWidth` or `true`: popover not smaller than anchor
+     *   - `width`: popover equal to the anchor.
+     */
+    fitToAnchorWidth?: AnchorWidthOption | boolean;
     /** Shrink popover if even after flipping there is not enough space. */
     fitWithinViewportHeight?: boolean;
     /** Element to focus when opening the popover. */
@@ -102,6 +116,8 @@ export interface PopoverProps extends GenericProps {
     zIndex?: number;
     /** On close callback (on click away or Escape pressed). */
     onClose?(): void;
+    /** Whether the popover should trap the focus within itself. Default to false. */
+    withFocusTrap?: boolean;
 }
 
 /**
@@ -127,20 +143,20 @@ const DEFAULT_PROPS: Partial<PopoverProps> = {
 /**
  * Popper js modifier to fit popover min width to the anchor width.
  */
-const sameWidth = {
+const sameWidth = memoize((anchorWidthOption: AnchorWidthOption) => ({
     name: 'sameWidth',
     enabled: true,
     phase: 'beforeWrite',
     requires: ['computeStyles'],
     fn({ state }: any) {
         // eslint-disable-next-line no-param-reassign
-        state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+        state.styles.popper[anchorWidthOption] = `${state.rects.reference.width}px`;
     },
     effect({ state }: any) {
         // eslint-disable-next-line no-param-reassign
-        state.elements.popper.style.minWidth = `${state.elements.reference.offsetWidth}px`;
+        state.elements.popper.style[anchorWidthOption] = `${state.elements.reference.offsetWidth}px`;
     },
-};
+}));
 
 /**
  * Popper js modifier to compute max size of the popover.
@@ -222,6 +238,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
         usePortal,
         zIndex,
         focusAnchorOnClose = true,
+        withFocusTrap,
         ...forwardedProps
     } = props;
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -230,6 +247,8 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
     const [arrowElement, setArrowElement] = useState<null | HTMLElement>(null);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const clickAwayRef = useRef<HTMLDivElement>(null);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const contentRef = useRef<HTMLDivElement>(null);
 
     /**
      * Track whether the focus is currently set in the
@@ -290,7 +309,9 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
     }
 
     if (fitToAnchorWidth) {
-        modifiers.push(sameWidth);
+        const anchorWidthOption =
+            typeof fitToAnchorWidth === 'string' ? fitToAnchorWidth : AnchorWidthOptions.MIN_WIDTH;
+        modifiers.push(sameWidth(anchorWidthOption));
     }
     if (fitWithinViewportHeight) {
         modifiers.push({ ...maxSize, options: { boundary: boundaryRef?.current } }, applyMaxHeight);
@@ -325,8 +346,12 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useCallbackOnEscape(handleClose, isOpen && closeOnEscape);
+
+    /** Only set focus within if the focus trap is disabled as they interfere with one another. */
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useFocus(focusElement?.current, !withFocusTrap && isOpen && (state?.rects?.popper?.y ?? -1) >= 0);
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocus(focusElement?.current, isOpen && (state?.rects?.popper?.y ?? -1) >= 0);
+    useFocusTrap(withFocusTrap && isOpen && contentRef?.current, focusElement?.current);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const clickAwayRefs = useRef([clickAwayRef, anchorRef]);
@@ -335,7 +360,7 @@ export const Popover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, re
         ? renderPopover(
               <div
                   {...forwardedProps}
-                  ref={mergeRefs<HTMLDivElement>(setPopperElement, ref, clickAwayRef)}
+                  ref={mergeRefs<HTMLDivElement>(setPopperElement, ref, clickAwayRef, contentRef)}
                   className={classNames(
                       className,
                       handleBasicClasses({ prefix: CLASSNAME, elevation: Math.min(elevation || 0, 5), position }),

package/src/components/popover-dialog/PopoverDialog.stories.tsx

@@ -0,0 +1,75 @@
+import { mdiMenu } from '@lumx/icons/index';
+import { mdiSettings } from '@lumx/icons/v4-to-v5-aliases';
+import React, { useRef, useState } from 'react';
+import { PopoverDialog, PopoverDialogProps } from '.';
+import { Emphasis, Orientation, Size, Typography } from '..';
+import { Button, IconButton } from '../button';
+import { FlexBox } from '../flex-box';
+import { Heading } from '../heading';
+import { List, ListItem } from '../list';
+import { Placement } from '../popover/Popover';
+import { Toolbar } from '../toolbar';
+
+const WithButton = (Story: any, context: any) => {
+    const anchorRef = useRef(null);
+    const [isOpen, setIsOpen] = useState<boolean>(context?.args?.isOpen || false);
+
+    return (
+        <>
+            <Button ref={anchorRef} onClick={() => setIsOpen((current) => !current)}>
+                Open popover
+            </Button>
+            <Story anchorRef={anchorRef} isOpen={isOpen} onClose={() => setIsOpen(false)} />
+        </>
+    );
+};
+
+const dialogHeaderId = 'dialog-header';
+
+const DemoPopoverContent = () => (
+    <FlexBox orientation={Orientation.vertical}>
+        <Toolbar
+            label={
+                <Heading id="dialogHeaderId" typography={Typography.headline}>
+                    Title
+                </Heading>
+            }
+            after={<IconButton label="Settings" icon={mdiSettings} emphasis={Emphasis.low} />}
+        />
+        <List>
+            <ListItem size={Size.huge} after={<IconButton label="Menu" icon={mdiMenu} size={Size.s} />}>
+                List Item With Actions
+            </ListItem>
+            <ListItem
+                size={Size.huge}
+                linkProps={{
+                    href: 'http://google.com',
+                }}
+            >
+                Clickable list item
+            </ListItem>
+        </List>
+    </FlexBox>
+);
+
+export default {
+    title: 'LumX components/popover-dialog/PopoverDialog',
+    component: PopoverDialog,
+    decorators: [WithButton],
+    args: {
+        children: <DemoPopoverContent />,
+        'aria-labelledby': dialogHeaderId,
+        placement: Placement.BOTTOM,
+    },
+};
+
+const Template = (args: PopoverDialogProps, context: any) => {
+    const { anchorRef, isOpen, onClose } = context;
+    return (
+        <PopoverDialog {...args} anchorRef={anchorRef} isOpen={isOpen} onClose={onClose}>
+            {args.children}
+        </PopoverDialog>
+    );
+};
+
+export const Default = Template.bind({});

package/src/components/popover-dialog/PopoverDialog.test.tsx

@@ -0,0 +1,65 @@
+import React, { useRef, useState } from 'react';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { PopoverDialog } from './PopoverDialog';
+
+const DialogWithButton = (forwardedProps: any) => {
+    const anchorRef = useRef(null);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    return (
+        <>
+            <button type="button" ref={anchorRef} onClick={() => setIsOpen((current) => !current)}>
+                Open popover
+            </button>
+
+            <PopoverDialog {...forwardedProps} anchorRef={anchorRef} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+                <button type="button">Button 1</button>
+                <button type="button">Button 2</button>
+            </PopoverDialog>
+            {/* This should never have focus while popover is opened */}
+            <button type="button">External button</button>
+        </>
+    );
+};
+
+describe(`<${PopoverDialog.displayName}>`, () => {
+    it('should behave like a dialog', async () => {
+        const label = 'Test Label';
+
+        render(<DialogWithButton label={label} />);
+
+        /** Open the popover */
+        const triggerElement = screen.getByRole('button', { name: 'Open popover' });
+        await userEvent.click(triggerElement);
+
+        const dialog = await screen.findByRole('dialog', { name: label });
+        const withinDialog = within(dialog);
+
+        /** Get buttons within dialog */
+        const dialogButtons = withinDialog.getAllByRole('button');
+
+        // First button should have focus by default on opening
+        expect(dialogButtons[0]).toHaveFocus();
+
+        // Tab to next button
+        await userEvent.tab();
+
+        // Second button should have focus
+        expect(dialogButtons[1]).toHaveFocus();
+
+        // Tab to next button
+        await userEvent.tab();
+
+        // As there is no more button, focus should loop back to first button.
+        expect(dialogButtons[0]).toHaveFocus();
+
+        // Close the popover
+        await userEvent.keyboard('{escape}');
+
+        expect(screen.queryByRole('dialog', { name: label })).not.toBeInTheDocument();
+        /** Anchor should retrieve the focus */
+        expect(triggerElement).toHaveFocus();
+    });
+});

package/src/components/popover-dialog/PopoverDialog.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+
+import { Comp, HasAriaLabelOrLabelledBy } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+import { Popover, PopoverProps } from '../popover/Popover';
+
+/**
+ * PopoverDialog props.
+ * The PopoverDialog has the same props as the Popover but requires an accessible label.
+ */
+export type PopoverDialogProps = PopoverProps & HasAriaLabelOrLabelledBy;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'PopoverDialog';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<PopoverDialogProps> = {};
+
+/**
+ * PopoverDialog component.
+ * Defines a popover that acts like a dialog
+ * * Has a dialog aria role
+ * * Sets a focus trap within the popover
+ * * Closes on click away and escape.
+ */
+export const PopoverDialog: Comp<PopoverDialogProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { children, isOpen, focusElement, label, className, ...forwardedProps } = props;
+
+    return (
+        <Popover
+            {...forwardedProps}
+            ref={ref}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
+            role="dialog"
+            aria-modal="true"
+            /**
+             * If a label is set, set as aria-label.
+             * If it is undefined, the label can be set using the `aria-label` and `aria-labelledby` props
+             */
+            aria-label={label}
+            isOpen={isOpen}
+            focusElement={focusElement}
+            closeOnClickAway
+            closeOnEscape
+            withFocusTrap
+        >
+            {children}
+        </Popover>
+    );
+});
+
+PopoverDialog.displayName = COMPONENT_NAME;
+PopoverDialog.className = CLASSNAME;
+PopoverDialog.defaultProps = DEFAULT_PROPS;

package/src/components/popover-dialog/index.tsx

@@ -0,0 +1 @@
+export * from './PopoverDialog';

package/src/index.ts

@@ -35,6 +35,7 @@ export * from './components/message';
 export * from './components/mosaic';
 export * from './components/notification';
 export * from './components/popover';
+export * from './components/popover-dialog';
 export * from './components/post-block';
 export * from './components/progress';
 export * from './components/progress-tracker';

package/src/stories/generated/PopoverDialog/Demos.stories.tsx

@@ -0,0 +1,6 @@
+/**
+ * File generated when storybook is started. Do not edit directly!
+ */
+export default { title: 'LumX components/popover-dialog/PopoverDialog Demos' };
+
+export { App as Default } from './default';