@lumx/react 3.20.1-alpha.1 → 3.20.1-alpha.11

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

@@ -1,72 +0,0 @@
-import React from 'react';
-
-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 = jest.fn(() => mockedDate.valueOf());
-jest.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
-    getYearDisplayName: () => 'année',
-}));
-
-const setup = (propsOverride: Partial<DatePickerFieldProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props: DatePickerFieldProps = {
-        label: 'DatePickerField',
-        locale: 'fr',
-        onChange: jest.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

@@ -1,135 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

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

@@ -1,28 +0,0 @@
-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

@@ -1,318 +0,0 @@
-/* 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

@@ -1,99 +0,0 @@
-import React from 'react';
-
-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 = jest.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 = jest.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 = jest.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 = jest.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,
-        },
-    });
-});