@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.21

package/src/components/date-picker/DatePickerField.test.tsx

@@ -0,0 +1,70 @@
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+import { render, screen } from '@testing-library/react';
+import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { TextField } from '@lumx/react';
+
+import userEvent from '@testing-library/user-event';
+import { DatePickerField, DatePickerFieldProps } from './DatePickerField';
+import { CLASSNAME } from './constants';
+
+const mockedDate = new Date(1487721600000);
+Date.now = vi.fn(() => mockedDate.valueOf());
+vi.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
+    getYearDisplayName: () => 'année',
+}));
+
+const setup = (propsOverride: Partial<DatePickerFieldProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const props: DatePickerFieldProps = {
+        label: 'DatePickerField',
+        locale: 'fr',
+        onChange: vi.fn(),
+        value: mockedDate,
+        nextButtonProps: { label: 'Next month' },
+        previousButtonProps: { label: 'Previous month' },
+        ...propsOverride,
+    };
+    render(<DatePickerField {...props} />, { wrapper });
+    const textField = getByClassName(document.body, TextField.className as string);
+    const inputNative = getByTagName(textField, 'input');
+    const getDatePicker = () => queryByClassName(document.body, CLASSNAME);
+    return { props, textField, inputNative, getDatePicker };
+};
+
+describe(`<${DatePickerField.displayName}>`, () => {
+    it('should render', () => {
+        const { inputNative, props } = setup();
+        expect(inputNative).toBe(screen.queryByRole('textbox', { name: props.label }));
+        expect(inputNative).toHaveValue('22 février 2017');
+    });
+
+    it('should open on click', async () => {
+        const { getDatePicker, inputNative } = setup();
+        expect(getDatePicker()).not.toBeInTheDocument();
+
+        await userEvent.click(inputNative);
+        expect(getDatePicker()).toBeInTheDocument();
+    });
+
+    it('should open on Enter pressed', async () => {
+        const { getDatePicker, inputNative } = setup();
+        expect(getDatePicker()).not.toBeInTheDocument();
+
+        await userEvent.tab();
+        expect(inputNative).toHaveFocus();
+        await userEvent.keyboard('[Enter]');
+        expect(getDatePicker()).toBeInTheDocument();
+    });
+
+    commonTestsSuiteRTL(setup, {
+        baseClassName: TextField.className as string,
+        forwardRef: 'textField',
+        forwardAttributes: 'inputNative',
+        forwardClassName: 'textField',
+        applyTheme: {
+            affects: [{ element: 'textField' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
+});

package/src/components/date-picker/DatePickerField.tsx

@@ -0,0 +1,135 @@
+import React, { SyntheticEvent, useCallback, useRef } from 'react';
+
+import { DatePicker, IconButtonProps, Placement, PopoverDialog, TextField, TextFieldProps } from '@lumx/react';
+import { GenericProps } from '@lumx/react/utils/type';
+import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
+import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
+
+/**
+ * Defines the props of the component.
+ */
+export interface DatePickerFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'>, GenericProps {
+    /** Default month. */
+    defaultMonth?: Date;
+    /** Locale (language or region) to use. */
+    locale?: string;
+    /** Date after which dates can't be selected. */
+    maxDate?: Date;
+    /** Date before which dates can't be selected. */
+    minDate?: Date;
+    /** Props to pass to the next month button (minus those already set by the DatePickerControlled props). */
+    nextButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+    /** Props to pass to the previous month button (minus those already set by the DatePickerControlled props). */
+    previousButtonProps: Pick<IconButtonProps, 'label'> &
+        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+    /** Currently selected date. */
+    value: Date | undefined;
+    /** On change callback. */
+    onChange(value: Date | undefined, name?: string, event?: SyntheticEvent): void;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'DatePickerField';
+
+/**
+ * DatePickerField component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const DatePickerField = forwardRef<DatePickerFieldProps, HTMLDivElement>((props, ref) => {
+    const { disabledStateProps, otherProps } = useDisableStateProps(props);
+    const {
+        defaultMonth,
+        locale = getCurrentLocale(),
+        maxDate,
+        minDate,
+        name,
+        nextButtonProps,
+        onChange,
+        previousButtonProps,
+        value,
+        ...forwardedProps
+    } = otherProps;
+    const anchorRef = useRef(null);
+
+    const [isOpen, close, , toggleOpen] = useBooleanState(false);
+
+    const handleKeyboardNav = useCallback(
+        (evt: React.KeyboardEvent) => {
+            if (evt.key === 'Enter' || evt.key === ' ') {
+                toggleOpen();
+            }
+        },
+        [toggleOpen],
+    );
+    const onTextFieldChange = useCallback(
+        (textFieldValue: string, textFieldName?: string, event?: SyntheticEvent) => {
+            if (!textFieldValue) {
+                onChange(undefined, textFieldName, event);
+            }
+        },
+        [onChange],
+    );
+    const onDatePickerChange = useCallback(
+        (newDate?: Date) => {
+            onChange(newDate, name);
+            close();
+        },
+        [name, onChange, close],
+    );
+
+    // Format date for text field
+    const textFieldValue = value?.toLocaleDateString(locale, { year: 'numeric', month: 'long', day: 'numeric' }) || '';
+
+    const todayOrSelectedDateRef = React.useRef(null);
+
+    return (
+        <>
+            <TextField
+                ref={ref}
+                {...forwardedProps}
+                name={name}
+                forceFocusStyle={isOpen}
+                textFieldRef={anchorRef}
+                value={textFieldValue}
+                onClick={toggleOpen}
+                onChange={onTextFieldChange}
+                onKeyPress={handleKeyboardNav}
+                {...disabledStateProps}
+                readOnly
+                aria-haspopup="dialog"
+            />
+            {isOpen ? (
+                <PopoverDialog
+                    // Can't use `aria-labelledby` targeting the text field label element (not correctly read on some screen readers)
+                    aria-label={forwardedProps.label}
+                    anchorRef={anchorRef}
+                    placement={Placement.BOTTOM_START}
+                    isOpen={isOpen}
+                    onClose={close}
+                    // On open, focus the selected day or today
+                    focusElement={todayOrSelectedDateRef}
+                >
+                    <DatePicker
+                        locale={locale}
+                        maxDate={maxDate}
+                        minDate={minDate}
+                        value={value}
+                        todayOrSelectedDateRef={todayOrSelectedDateRef}
+                        onChange={onDatePickerChange}
+                        defaultMonth={defaultMonth}
+                        nextButtonProps={nextButtonProps}
+                        previousButtonProps={previousButtonProps}
+                    />
+                </PopoverDialog>
+            ) : null}
+        </>
+    );
+});
+DatePickerField.displayName = COMPONENT_NAME;

package/src/components/date-picker/constants.ts

@@ -0,0 +1,11 @@
+import { getRootClassName } from '@lumx/core/js/utils/className';
+
+/**
+ * Component display name.
+ */
+export const COMPONENT_NAME = 'DatePicker';
+
+/**
+ * Component default class name and class prefix.
+ */
+export const CLASSNAME = getRootClassName(COMPONENT_NAME);

package/src/components/date-picker/index.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './DatePicker';
+export * from './DatePickerControlled';
+export * from './DatePickerField';

package/src/components/date-picker/types.ts

@@ -0,0 +1,28 @@
+import { IconButtonProps } from '@lumx/react';
+import { GenericProps } from '@lumx/react/utils/type';
+import { Ref } from 'react';
+
+/**
+ * Defines the props of the component.
+ */
+export interface DatePickerProps extends GenericProps {
+    /** Default month. */
+    defaultMonth?: Date;
+    /** Locale (language or region) to use. */
+    locale?: string;
+    /** Date after which dates can't be selected. */
+    maxDate?: Date;
+    /** Date before which dates can't be selected. */
+    minDate?: Date;
+    /** Props to pass to the next month button (minus those already set by the DatePickerControlled props). */
+    nextButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+    /** Props to pass to the previous month button (minus those already set by the DatePickerControlled props). */
+    previousButtonProps: Pick<IconButtonProps, 'label'> &
+        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+    /** Reference to the <button> element corresponding to the current date or the selected date. */
+    todayOrSelectedDateRef?: Ref<HTMLButtonElement>;
+    /** Currently selected date. */
+    value: Date | undefined;
+    /** On change callback. */
+    onChange(value: Date | undefined): void;
+}

package/src/components/dialog/Dialog.stories.tsx

@@ -0,0 +1,318 @@
+/* eslint-disable react-hooks/rules-of-hooks,react/jsx-key */
+import React, { useRef, useState } from 'react';
+
+import over from 'lodash/over';
+import { mdiClose } from '@lumx/icons';
+import {
+    AlertDialog,
+    Button,
+    Checkbox,
+    DatePickerField,
+    Emphasis,
+    FlexBox,
+    Heading,
+    IconButton,
+    List,
+    ListItem,
+    Select,
+    Size,
+    TextField,
+    Toolbar,
+} from '@lumx/react';
+import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
+import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withChromaticForceScreenSize } from '@lumx/react/stories/decorators/withChromaticForceScreenSize';
+
+import { Dialog } from './Dialog';
+import { loremIpsum } from '../../stories/utils/lorem';
+
+const dialogSizes = [Size.tiny, Size.regular, Size.big, Size.huge];
+
+export default {
+    title: 'LumX components/dialog/Dialog',
+    component: Dialog,
+    parameters: {
+        // Delay Chromatic snapshot to wait for dialog to open.
+        chromatic: {
+            pauseAnimationAtEnd: true,
+            delay: DIALOG_TRANSITION_DURATION,
+        },
+    },
+    decorators: [
+        // Force minimum chromatic screen size to make sure the dialog appears in view.
+        withChromaticForceScreenSize(),
+    ],
+    args: Dialog.defaultProps,
+    argTypes: {
+        size: getSelectArgType(dialogSizes),
+        onVisibilityChange: { action: true },
+        children: { control: false },
+    },
+    render(props: any) {
+        const buttonRef = useRef<HTMLButtonElement>(null);
+        const [isOpen, close, open] = useBooleanState(true);
+        return (
+            <>
+                <Button ref={buttonRef} onClick={open}>
+                    Open dialog
+                </Button>
+                <Dialog {...props} isOpen={isOpen} onClose={close} parentElement={buttonRef} />
+            </>
+        );
+    },
+};
+
+/**
+ * Default dialog
+ */
+export const Default = {
+    args: { children: loremIpsum('short') },
+};
+
+/**
+ * Loading state
+ */
+export const Loading = {
+    args: { ...Default.args, isLoading: true },
+};
+
+/**
+ * Basic header/footer props
+ */
+export const WithHeaderFooter = {
+    args: { ...Default.args, header: 'Dialog header', footer: 'Dialog footer' },
+};
+
+/**
+ * More complex header/footer in children
+ */
+export const WithHeaderFooterChildren = {
+    args: {
+        children: [
+            <header>
+                <Toolbar
+                    label={<Heading typography="title">Dialog heading</Heading>}
+                    after={<IconButton label="Close" emphasis="low" icon={mdiClose} />}
+                />
+            </header>,
+            <div className="lumx-spacing-padding-huge">{loremIpsum('short')}</div>,
+            <footer>
+                <Toolbar after={<Button>Close</Button>} />
+            </footer>,
+        ],
+    },
+};
+
+/**
+ * Forcing header/footer dividers
+ */
+export const ForceDivider = {
+    args: { ...WithHeaderFooter.args, forceFooterDivider: true, forceHeaderDivider: true },
+};
+
+/**
+ * Long scrollable content
+ */
+export const LongContent = {
+    args: { ...WithHeaderFooter.args, children: loremIpsum('long') },
+};
+
+/**
+ * Prevent auto close (click outside & close on escape)
+ */
+export const PreventAutoClose = {
+    args: { ...Default.args, preventAutoClose: true },
+};
+
+/**
+ * Prevent close on escape
+ */
+export const PreventCloseOnEscape = {
+    args: { ...Default.args, preventCloseOnEscape: true },
+};
+
+/**
+ * Prevent close on click outside
+ */
+export const PreventCloseOnClick = {
+    args: { ...Default.args, preventCloseOnClick: true },
+};
+
+/**
+ * Dialog needing a confirmation before close using an AlertDialog
+ */
+export const WithConfirmClose = () => {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const closeButtonRef = useRef<HTMLButtonElement>(null);
+    const [isOpen, close, open] = useBooleanState(true);
+    const [isAlertDialogOpen, closeAlertDialog, openAlertDialog] = useBooleanState(false);
+
+    return (
+        <>
+            <Button ref={buttonRef} onClick={open}>
+                Open dialog
+            </Button>
+            <Dialog isOpen={isOpen} onClose={openAlertDialog} parentElement={buttonRef}>
+                <FlexBox orientation="vertical" vAlign="center" className="lumx-spacing-padding-huge">
+                    {loremIpsum('tiny')}
+                    <Button ref={closeButtonRef} onClick={openAlertDialog}>
+                        Close
+                    </Button>
+                </FlexBox>
+            </Dialog>
+            <AlertDialog
+                isOpen={isAlertDialogOpen}
+                onClose={closeAlertDialog}
+                parentElement={closeButtonRef}
+                title="Confirm close"
+                confirmProps={{ onClick: over([close, closeAlertDialog]), label: 'Confirm' }}
+                cancelProps={{ onClick: closeAlertDialog, label: 'Cancel' }}
+            >
+                {loremIpsum('tiny')}
+            </AlertDialog>
+        </>
+    );
+};
+
+/**
+ * Test dialog focus trap (focus is contained inside the dialog) with all kinds of focusable and non-focusable items
+ */
+export const FocusTrap = () => {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const [isOpen, close, open] = useBooleanState(true);
+    const [textValue, setTextValue] = useState('value');
+    const [checkboxValue, setCheckboxValue] = useState(false);
+    const inputRef = useRef(null);
+
+    const selectChoices = ['First item', 'Second item', 'Third item'];
+    const [value, setValue] = React.useState<string>(selectChoices[0]);
+    const [isSelectOpen, setSelectOpen] = useState(false);
+    const toggleSelect = () => setSelectOpen(!isSelectOpen);
+    const closeSelect = () => setSelectOpen(false);
+    const selectItem = (item: any) => () => {
+        closeSelect();
+        setValue(item);
+    };
+    const [date, setDate] = useState<Date | undefined>(new Date('2020-05-18'));
+    const [date2, setDate2] = useState<Date | undefined>();
+
+    const datePickerDialogButtonRef = useRef<HTMLButtonElement>(null);
+    const [isDatePickerDialogOpen, closeDatePickerDialog, openDatePickerDialog] = useBooleanState(false);
+
+    return (
+        <>
+            <Button ref={buttonRef} onClick={open}>
+                Open dialog
+            </Button>
+            <Dialog isOpen={isOpen} onClose={close} parentElement={buttonRef} focusElement={inputRef}>
+                <header>
+                    <Toolbar
+                        label={<span className="lumx-typography-title">Dialog header</span>}
+                        after={<IconButton label="Close" icon={mdiClose} onClick={close} emphasis={Emphasis.low} />}
+                    />
+                </header>
+                <div className="lumx-spacing-padding-horizontal-huge lumx-spacing-padding-bottom-huge">
+                    {/* Testing hidden input do not count in th focus trap*/}
+                    <input hidden type="file" />
+                    <input type="hidden" />
+
+                    <div className="lumx-spacing-margin-bottom-huge">
+                        The text field should capture the focus on open and a focus trap should be in place.
+                    </div>
+
+                    <TextField
+                        className="lumx-spacing-margin-bottom-huge"
+                        inputRef={inputRef}
+                        value={textValue}
+                        onChange={setTextValue}
+                        label="Text input"
+                        maxLength={10}
+                    />
+
+                    <Checkbox
+                        className="lumx-spacing-margin-bottom-huge"
+                        isChecked={checkboxValue}
+                        onChange={setCheckboxValue}
+                        label="Checkbox input"
+                    />
+
+                    <FlexBox orientation="horizontal" hAlign="bottom" gap="regular">
+                        <Button ref={datePickerDialogButtonRef} onClick={openDatePickerDialog}>
+                            Open date picker
+                        </Button>
+                        <Dialog
+                            isOpen={isDatePickerDialogOpen}
+                            parentElement={datePickerDialogButtonRef}
+                            onClose={closeDatePickerDialog}
+                        >
+                            <header>
+                                <Toolbar
+                                    label={<h1 className="lumx-typography-title">Date picker</h1>}
+                                    after={
+                                        <IconButton
+                                            label="Close"
+                                            icon={mdiClose}
+                                            onClick={closeDatePickerDialog}
+                                            emphasis={Emphasis.low}
+                                        />
+                                    }
+                                />
+                            </header>
+                            <div className="lumx-spacing-padding">
+                                <DatePickerField
+                                    locale="fr"
+                                    label="Start date"
+                                    placeholder="Pick a date"
+                                    onChange={setDate}
+                                    value={date}
+                                    nextButtonProps={{ label: 'Next month' }}
+                                    previousButtonProps={{ label: 'Previous month' }}
+                                />
+                                <DatePickerField
+                                    locale="fr"
+                                    label="Start date"
+                                    placeholder="Pick a date"
+                                    onChange={setDate2}
+                                    value={date2}
+                                    nextButtonProps={{ label: 'Next month' }}
+                                    previousButtonProps={{ label: 'Previous month' }}
+                                    defaultMonth={new Date('2020-05-18')}
+                                />
+                            </div>
+                        </Dialog>
+
+                        <Select
+                            className="lumx-spacing-margin-left-huge"
+                            isOpen={isSelectOpen}
+                            value={value}
+                            label="Select label"
+                            onInputClick={toggleSelect}
+                            onDropdownClose={closeSelect}
+                        >
+                            <List isClickable>
+                                {selectChoices.map((choice) => (
+                                    <ListItem
+                                        key={choice}
+                                        isSelected={value === choice}
+                                        onItemSelected={selectItem(choice)}
+                                        size={Size.tiny}
+                                    >
+                                        {choice}
+                                    </ListItem>
+                                ))}
+                            </List>
+                        </Select>
+
+                        <Button isDisabled>Disabled button (focus ignored)</Button>
+                    </FlexBox>
+
+                    {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+                    <div tabIndex={0}>Focus div</div>
+
+                    <Button isDisabled={false}>Button explicitly not disabled (should focus)</Button>
+                </div>
+            </Dialog>
+        </>
+    );
+};

package/src/components/dialog/Dialog.test.tsx

@@ -0,0 +1,97 @@
+import { Dialog, DialogProps } from '@lumx/react/components/dialog/Dialog';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render, screen } from '@testing-library/react';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+import userEvent from '@testing-library/user-event';
+import { ThemeSentinel } from '@lumx/react/testing/utils/ThemeSentinel';
+import { Heading, HeadingLevelProvider } from '@lumx/react';
+
+const CLASSNAME = Dialog.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<DialogProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(
+        <Dialog isOpen {...props}>
+            {props.children || <ThemeSentinel />}
+        </Dialog>,
+        { wrapper },
+    );
+    const dialog = queryByClassName(document.body, CLASSNAME);
+    const container = dialog && queryByClassName(dialog, `${CLASSNAME}__container`);
+    const themeSentinel = screen.queryByTestId(ThemeSentinel.testId);
+    return { props, dialog, container, themeSentinel };
+};
+
+describe(`<${Dialog.displayName}>`, () => {
+    it('should render default', () => {
+        const { dialog, container } = setup();
+        expect(dialog).toBeInTheDocument();
+        expect(container).toBe(screen.queryByRole('dialog'));
+        expect(container).toHaveAttribute('aria-modal', 'true');
+    });
+
+    it('should have reset the heading level context', () => {
+        setup(
+            // Heading inside the dialog
+            { children: <Heading>Title</Heading> },
+            {
+                // This level context should not affect headings inside the dialog
+                wrapper({ children }) {
+                    return <HeadingLevelProvider level={3}>{children}</HeadingLevelProvider>;
+                },
+            },
+        );
+        // Heading inside should use the dialog heading level 2
+        expect(screen.queryByRole('heading', { name: 'Title', level: 2 })).toBeInTheDocument();
+    });
+
+    describe('Events', () => {
+        it('should trigger `onClose` when pressing `escape` key', async () => {
+            const onClose = vi.fn();
+            setup({ isOpen: true, onClose });
+
+            await userEvent.keyboard('[Escape]');
+            expect(onClose).toHaveBeenCalled();
+        });
+
+        it('should not trigger `onClose` when pressing any other key', async () => {
+            const onClose = vi.fn();
+            setup({ isOpen: true, onClose });
+
+            await userEvent.keyboard('a');
+            expect(onClose).not.toHaveBeenCalled();
+        });
+
+        it('should not trigger `onClose` when pressing `escape` key with `preventAutoClose` set to `true`', async () => {
+            const onClose = vi.fn();
+            setup({ isOpen: true, onClose, preventAutoClose: true });
+
+            await userEvent.keyboard('[Escape]');
+            expect(onClose).not.toHaveBeenCalled();
+        });
+
+        it('should not trigger `onClose` when pressing `escape` key with `preventCloseOnEscape` set to `true`', async () => {
+            const onClose = vi.fn();
+            setup({ isOpen: true, onClose, preventCloseOnEscape: true });
+
+            await userEvent.keyboard('[Escape]');
+            expect(onClose).not.toHaveBeenCalled();
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardAttributes: 'dialog',
+        forwardRef: 'dialog',
+        forwardClassName: 'dialog',
+        applyTheme: {
+            // Theme should not affect the children components
+            affects: [{ not: { element: 'themeSentinel' } }],
+            viaProp: true,
+            viaContext: true,
+        },
+    });
+});