@lumx/react 3.21.1 → 3.21.2-alpha.0

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

@@ -1,259 +0,0 @@
-import React, { KeyboardEventHandler } from 'react';
-
-import classNames from 'classnames';
-
-import {
-    Button,
-    DatePickerProps,
-    Emphasis,
-    FlexBox,
-    IconButton,
-    Text,
-    TextField,
-    TextFieldProps,
-    Toolbar,
-} from '@lumx/react';
-import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
-import { getMonthCalendar } from '@lumx/react/utils/date/getMonthCalendar';
-import { isSameDay } from '@lumx/react/utils/date/isSameDay';
-import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
-import { parseLocale } from '@lumx/react/utils/locale/parseLocale';
-import { Locale } from '@lumx/react/utils/locale/types';
-import { usePreviousValue } from '@lumx/react/hooks/usePreviousValue';
-import { getYearDisplayName } from '@lumx/react/utils/date/getYearDisplayName';
-import { onEnterPressed } from '@lumx/core/js/utils';
-import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
-import { formatDayNumber } from '@lumx/react/utils/date/formatDayNumber';
-import { VISUALLY_HIDDEN } from '@lumx/react/constants';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { CLASSNAME } from './constants';
-
-/**
- * Defines the props of the component.
- */
-export interface DatePickerControlledProps extends DatePickerProps {
-    /** Selected month to display. */
-    selectedMonth: Date;
-    /** On previous month change callback. */
-    onPrevMonthChange(): void;
-    /** On next month change callback. */
-    onNextMonthChange(): void;
-    /** On month/year change callback. */
-    onMonthChange?: (newMonth: Date) => void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'DatePickerControlled';
-
-/**
- * DatePickerControlled component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const DatePickerControlled = forwardRef<DatePickerControlledProps, HTMLDivElement>((props, ref) => {
-    const {
-        locale = getCurrentLocale(),
-        maxDate,
-        minDate,
-        nextButtonProps,
-        onChange,
-        onNextMonthChange,
-        onPrevMonthChange,
-        previousButtonProps,
-        selectedMonth,
-        todayOrSelectedDateRef,
-        value,
-        onMonthChange,
-        style,
-    } = props;
-    const { weeks, weekDays } = React.useMemo(() => {
-        const localeObj = parseLocale(locale) as Locale;
-        return getMonthCalendar(localeObj, selectedMonth, minDate, maxDate);
-    }, [locale, minDate, maxDate, selectedMonth]);
-
-    const selectedYear = selectedMonth.getFullYear();
-    const formattedYear = selectedMonth.toLocaleDateString(locale, { year: 'numeric' }).slice(0, 4);
-    const [currentYear, setCurrentYear] = React.useState(String(selectedYear));
-
-    // Updates month offset when validating year. Adds or removes 12 months per year when updating year value.
-    const updateMonthOffset = React.useCallback(
-        (newYearValue: string) => {
-            const yearNumber = Number(newYearValue);
-            if (yearNumber < 0 && yearNumber >= 9999) {
-                return;
-            }
-
-            const previousYearNumber = selectedMonth.getFullYear();
-            const offset = (yearNumber - previousYearNumber) * 12;
-            onMonthChange?.(addMonthResetDay(selectedMonth, offset));
-        },
-        [selectedMonth, onMonthChange],
-    );
-
-    const onYearChange = React.useCallback<TextFieldProps['onChange']>(
-        (newYearValue, _, event) => {
-            setCurrentYear(newYearValue);
-
-            // Detect if change is coming from the spin up/down arrows
-            const inputType = (event?.nativeEvent as any)?.inputType;
-            if (
-                // Chrome/Safari
-                !inputType ||
-                // Firefox
-                inputType === 'insertReplacementText'
-            ) {
-                updateMonthOffset(newYearValue);
-            }
-        },
-        [updateMonthOffset],
-    );
-
-    const updateYear = React.useCallback(() => {
-        updateMonthOffset(currentYear);
-    }, [updateMonthOffset, currentYear]);
-
-    const updateYearOnEnterPressed: KeyboardEventHandler = React.useMemo(
-        () => onEnterPressed(updateYear),
-        [updateYear],
-    );
-
-    const monthYear = selectedMonth.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
-
-    // Update current year when selected year changes
-    React.useEffect(() => {
-        setCurrentYear(String(selectedYear));
-    }, [selectedYear]);
-
-    const prevSelectedMonth = usePreviousValue(selectedMonth);
-    const monthHasChanged = prevSelectedMonth && !isSameDay(selectedMonth, prevSelectedMonth);
-
-    // Only set the aria-live after the month has changed otherwise it can get announced on mount when used in the popover dialog
-    const [labelAriaLive, setLabelAriaLive] = React.useState<'polite'>();
-    React.useEffect(() => {
-        if (monthHasChanged) setLabelAriaLive('polite');
-    }, [monthHasChanged]);
-
-    const yearLabel = getYearDisplayName(locale);
-
-    return (
-        <div ref={ref} className={`${CLASSNAME}`} style={style}>
-            <Toolbar
-                className={`${CLASSNAME}__toolbar`}
-                after={
-                    <IconButton
-                        {...nextButtonProps}
-                        emphasis={Emphasis.low}
-                        icon={mdiChevronRight}
-                        onClick={onNextMonthChange}
-                    />
-                }
-                before={
-                    <IconButton
-                        {...previousButtonProps}
-                        emphasis={Emphasis.low}
-                        icon={mdiChevronLeft}
-                        onClick={onPrevMonthChange}
-                    />
-                }
-                label={
-                    <>
-                        <span aria-live={labelAriaLive} className={onMonthChange ? VISUALLY_HIDDEN : ''} dir="auto">
-                            {monthYear}
-                        </span>
-                        {onMonthChange && (
-                            <FlexBox
-                                className={`${CLASSNAME}__month`}
-                                orientation="horizontal"
-                                hAlign="center"
-                                gap="regular"
-                                vAlign="center"
-                                dir="auto"
-                            >
-                                {RegExp(`(.*)(${formattedYear})(.*)`)
-                                    .exec(monthYear)
-                                    ?.slice(1)
-                                    .filter((part) => part !== '')
-                                    .map((part) =>
-                                        part === formattedYear ? (
-                                            <TextField
-                                                value={currentYear}
-                                                aria-label={yearLabel}
-                                                onChange={onYearChange}
-                                                type="number"
-                                                max={9999}
-                                                min={0}
-                                                onBlur={updateYear}
-                                                onKeyPress={updateYearOnEnterPressed}
-                                                key="year"
-                                                className={`${CLASSNAME}__year`}
-                                            />
-                                        ) : (
-                                            <Text as="p" key={part}>
-                                                {part}
-                                            </Text>
-                                        ),
-                                    )}
-                            </FlexBox>
-                        )}
-                    </>
-                }
-            />
-            <div className={`${CLASSNAME}__calendar`}>
-                <div className={`${CLASSNAME}__week-days ${CLASSNAME}__days-wrapper`}>
-                    {weekDays.map(({ letter, number, long }) => (
-                        <div key={number} className={`${CLASSNAME}__day-wrapper`}>
-                            <span className={`${CLASSNAME}__week-day`} aria-hidden>
-                                {letter.toLocaleUpperCase()}
-                            </span>
-                            <span className="visually-hidden">{long}</span>
-                        </div>
-                    ))}
-                </div>
-
-                <div className={`${CLASSNAME}__month-days ${CLASSNAME}__days-wrapper`}>
-                    {weeks.flatMap((week, weekIndex) => {
-                        return weekDays.map((weekDay, dayIndex) => {
-                            const { date, isOutOfRange } = week[weekDay.number] || {};
-                            const key = `${weekIndex}-${dayIndex}`;
-                            const isToday = !isOutOfRange && date && isSameDay(date, new Date());
-                            const isSelected = date && value && isSameDay(value, date);
-
-                            return (
-                                <div key={key} className={`${CLASSNAME}__day-wrapper`}>
-                                    {date && (
-                                        <Button
-                                            ref={isSelected || (!value && isToday) ? todayOrSelectedDateRef : null}
-                                            className={classNames(`${CLASSNAME}__month-day`, {
-                                                [`${CLASSNAME}__month-day--is-today`]: isToday,
-                                            })}
-                                            disabled={isOutOfRange}
-                                            isSelected={isSelected}
-                                            emphasis="low"
-                                            onClick={() => onChange(date)}
-                                        >
-                                            <span aria-hidden>{formatDayNumber(locale, date)}</span>
-                                            <span className={VISUALLY_HIDDEN}>
-                                                {date.toLocaleDateString(locale, {
-                                                    day: 'numeric',
-                                                    month: 'long',
-                                                    year: 'numeric',
-                                                })}
-                                            </span>
-                                        </Button>
-                                    )}
-                                </div>
-                            );
-                        });
-                    })}
-                </div>
-            </div>
-        </div>
-    );
-});
-DatePickerControlled.displayName = COMPONENT_NAME;
-DatePickerControlled.className = CLASSNAME;

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

@@ -1,100 +0,0 @@
-import { DatePickerField } from '@lumx/react';
-import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-
-export default {
-    title: 'LumX components/date-picker/DatePickerField',
-    component: DatePickerField,
-    args: {
-        ...DatePickerField.defaultProps,
-        'nextButtonProps.label': 'Next month',
-        'previousButtonProps.label': 'Previous month',
-    },
-    decorators: [withValueOnChange(), withNestedProps()],
-};
-
-/**
- * Default date picker fields with only the required fields
- */
-export const Default = {};
-
-/**
- * With label, placeholder and helper
- */
-export const LabelPlaceholderAndHelper = {
-    args: {
-        label: 'Date picker label',
-        placeholder: 'Pick a date',
-        helper: loremIpsum('tiny'),
-    },
-};
-
-/**
- * Error state
- */
-export const Error = {
-    args: {
-        ...LabelPlaceholderAndHelper.args,
-        hasError: true,
-    },
-};
-
-/**
- * With default value selected
- */
-export const DefaultValue = {
-    args: {
-        ...LabelPlaceholderAndHelper.args,
-        value: new Date('2019-02-28'),
-    },
-};
-/**
- * With default value selected and restricted range
- */
-export const Restricted = {
-    args: {
-        ...LabelPlaceholderAndHelper.args,
-        value: new Date(new Date().setDate(10)),
-        minDate: new Date(new Date().setDate(4)),
-        maxDate: new Date(new Date().setDate(24)),
-    },
-};
-
-/**
- * With default value selected and restricted range
- */
-export const RestrictedEmpty = {
-    args: {
-        ...LabelPlaceholderAndHelper.args,
-        minDate: new Date(new Date().setDate(4)),
-        maxDate: new Date(new Date().setDate(24)),
-    },
-};
-/**
- * With default month
- */
-export const DefaultMonth = {
-    args: {
-        ...LabelPlaceholderAndHelper.args,
-        defaultMonth: new Date('2019-07-14'),
-    },
-};
-
-/**
- * Disabled states
- */
-export const Disabled = {
-    args: DefaultValue.args,
-    decorators: [
-        withCombinations({
-            combinations: {
-                rows: {
-                    disabled: { disabled: true },
-                    'aria-disabled': { 'aria-disabled': true },
-                },
-            },
-        }),
-    ],
-};

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 = 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

@@ -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;
-}