@lumx/react 3.0.6-alpha.1 → 3.0.6

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.0.6-alpha.1",
-        "@lumx/icons": "^3.0.6-alpha.1",
+        "@lumx/core": "^3.0.6",
+        "@lumx/icons": "^3.0.6",
         "@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.6-alpha.1",
-    "gitHead": "e230447f554272d8cd29c103842f961ec424c5f4"
+    "version": "3.0.6",
+    "gitHead": "1fed89f798ebc21e67fff1b6aee01e4aa86431a6"
 }

package/src/components/autocomplete/Autocomplete.tsx

@@ -41,7 +41,10 @@ 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?: DropdownProps['fitToAnchorWidth'];

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/dropdown/Dropdown.tsx

@@ -34,7 +34,10 @@ 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?: PopoverProps['fitToAnchorWidth'];

package/src/components/popover/Popover.tsx

@@ -16,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.
@@ -86,7 +87,12 @@ export interface PopoverProps extends GenericProps {
     closeOnEscape?: boolean;
     /** Shadow elevation. */
     elevation?: Elevation;
-    /** manage popover size to not be bigger (`width` & `maxWidth`) or smaller (`width`, `minWidth`, `true`) than the anchor. */
+    /**
+     * 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;
@@ -110,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;
 }
 
 /**
@@ -230,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
@@ -238,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
@@ -335,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]);
@@ -345,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';

package/src/utils/type.ts

@@ -91,3 +91,23 @@ export const isComponentType = (type: ReactElement['type']) => (node: ReactNode)
  * (excluding `NaN` as it can't be distinguished from `number`)
  */
 export type Falsy = false | undefined | null | 0 | '';
+
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+export type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string
+    ? {
+          /**
+           * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+           * Although it is not recommended, aria-label can be used instead if no visible element is available.
+           */
+          'aria-labelledby': T;
+          /** The label of the dialog. */
+          'aria-label'?: undefined;
+      }
+    : {
+          'aria-label': string;
+          'aria-labelledby'?: undefined;
+      };