@lumx/react 3.6.6 → 3.6.7-alpha.1

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.6.6",
-        "@lumx/icons": "^3.6.6",
+        "@lumx/core": "^3.6.7-alpha.1",
+        "@lumx/icons": "^3.6.7-alpha.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -112,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.6.6"
+    "version": "3.6.7-alpha.1"
 }

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

@@ -10,6 +10,9 @@ 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<DatePickerProps> = {}) => {
     const props: DatePickerProps = {

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

@@ -23,18 +23,14 @@ export const DatePicker: Comp<DatePickerProps, HTMLDivElement> = forwardRef((pro
         referenceDate = new Date();
     }
 
-    const [monthOffset, setMonthOffset] = useState(0);
-
-    const setPrevMonth = () => setMonthOffset(monthOffset - 1);
-    const setNextMonth = () => setMonthOffset(monthOffset + 1);
+    const [selectedMonth, setSelectedMonth] = useState(referenceDate);
+    const setPrevMonth = () => setSelectedMonth((current) => addMonthResetDay(current, -1));
+    const setNextMonth = () => setSelectedMonth((current) => addMonthResetDay(current, +1));
 
     const onDatePickerChange = (newDate?: Date) => {
         onChange(newDate);
-        setMonthOffset(0);
     };
 
-    const selectedMonth = addMonthResetDay(referenceDate, monthOffset);
-
     return (
         <DatePickerControlled
             ref={ref}
@@ -46,6 +42,7 @@ export const DatePicker: Comp<DatePickerProps, HTMLDivElement> = forwardRef((pro
             onNextMonthChange={setNextMonth}
             selectedMonth={selectedMonth}
             onChange={onDatePickerChange}
+            onMonthChange={setSelectedMonth}
         />
     );
 });

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

@@ -1,14 +1,18 @@
 import React from 'react';
 
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
+import userEvent from '@testing-library/user-event';
 import { DatePickerControlled, DatePickerControlledProps } from './DatePickerControlled';
 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',
+}));
 
 type SetupProps = Partial<DatePickerControlledProps>;
 
@@ -22,6 +26,7 @@ const setup = (propsOverride: SetupProps = {}) => {
         value: mockedDate,
         nextButtonProps: { label: 'Next month' },
         previousButtonProps: { label: 'Previous month' },
+        onMonthChange: jest.fn(),
         ...propsOverride,
     };
     render(<DatePickerControlled {...props} />);
@@ -29,18 +34,57 @@ const setup = (propsOverride: SetupProps = {}) => {
     return { props, datePickerControlled };
 };
 
+const queries = {
+    getYear: () =>
+        screen.getByRole('spinbutton', {
+            name: /année/i,
+        }),
+    getAccessibleMonthYear: (container: HTMLElement) => getByClassName(container, 'visually-hidden'),
+};
+
 describe(`<${DatePickerControlled.displayName}>`, () => {
     it('should render', () => {
         const { datePickerControlled } = setup();
         expect(datePickerControlled).toBeInTheDocument();
 
         const month = queryByClassName(datePickerControlled, `${CLASSNAME}__month`);
-        expect(month).toHaveTextContent('février 2017');
+        expect(month).toHaveTextContent('février');
+
+        expect(queries.getYear()).toBeInTheDocument();
+        expect(queries.getYear()).toHaveAttribute('value', '2017');
+        expect(queries.getYear()).toHaveAttribute('aria-label', 'année');
+
+        const toolbar = getByClassName(document.body, 'lumx-toolbar__label');
+        expect(queries.getAccessibleMonthYear(toolbar)).toBeInTheDocument();
+        expect(queries.getAccessibleMonthYear(toolbar)).toHaveTextContent('février 2017');
 
         const selected = queryByClassName(datePickerControlled, `${CLASSNAME}__month-day--is-selected`);
         expect(selected).toBe(screen.queryByRole('button', { name: /22 février 2017/i }));
     });
 
+    it('should validate year when pressing Enter', async () => {
+        const { datePickerControlled, props } = setup();
+        expect(datePickerControlled).toBeInTheDocument();
+
+        expect(queries.getYear()).toHaveAttribute('value', '2017');
+
+        await userEvent.type(queries.getYear(), '{Backspace}6{Enter}'); // set year to 2016
+        await waitFor(() => expect(props.onMonthChange).toHaveBeenCalledTimes(1));
+        expect(props.onMonthChange).toHaveBeenCalledWith(new Date(1454284800000)); // 2017 - 12 months = 2016
+    });
+
+    it('should validate year when on Blur', async () => {
+        const { datePickerControlled, props } = setup();
+        expect(datePickerControlled).toBeInTheDocument();
+
+        expect(queries.getYear()).toHaveAttribute('value', '2017');
+
+        await userEvent.type(queries.getYear(), '{Backspace}5'); // change value to 2015
+        await userEvent.tab(); // set year to 2015
+        await waitFor(() => expect(props.onMonthChange).toHaveBeenCalledTimes(1));
+        expect(props.onMonthChange).toHaveBeenCalledWith(new Date(1422748800000)); // 2017 - 24 months = 2015
+    });
+
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,
         forwardRef: 'datePickerControlled',

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

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
+import React, { KeyboardEventHandler, forwardRef } from 'react';
 import classNames from 'classnames';
-import { DatePickerProps, Emphasis, IconButton, Toolbar } from '@lumx/react';
+import { DatePickerProps, Emphasis, FlexBox, IconButton, Text, TextField, Toolbar } from '@lumx/react';
 import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
 import { Comp } from '@lumx/react/utils/type';
 import { getMonthCalendar } from '@lumx/react/utils/date/getMonthCalendar';
@@ -9,6 +9,9 @@ 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/react/utils/event';
+import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { CLASSNAME } from './constants';
 
 /**
@@ -21,6 +24,8 @@ export interface DatePickerControlledProps extends DatePickerProps {
     onPrevMonthChange(): void;
     /** On next month change callback. */
     onNextMonthChange(): void;
+    /** On month/year change callback. */
+    onMonthChange?: (newMonth: Date) => void;
 }
 
 /**
@@ -48,12 +53,43 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
         selectedMonth,
         todayOrSelectedDateRef,
         value,
+        onMonthChange,
     } = 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.toLocaleDateString(locale, { year: 'numeric' }).slice(0, 4);
+    const [textFieldYearValue, setTextFieldYearValue] = React.useState(selectedYear);
+    const isYearValid = Number(textFieldYearValue) > 0 && Number(textFieldYearValue) <= 9999;
+
+    // Updates month offset when validating year. Adds or removes 12 months per year when updating year value.
+    const updateMonthOffset = React.useCallback(() => {
+        if (isYearValid) {
+            const yearNumber = selectedMonth.getFullYear();
+            const offset = (Number(textFieldYearValue) - yearNumber) * 12;
+            if (onMonthChange) {
+                onMonthChange(addMonthResetDay(selectedMonth, offset));
+            }
+        }
+    }, [isYearValid, selectedMonth, textFieldYearValue, onMonthChange]);
+
+    const monthYear = selectedMonth.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
+
+    // Year can only be validatd by pressing Enter key or on Blur. The below handles the press Enter key case
+    const handleKeyPress: KeyboardEventHandler = React.useMemo(() => onEnterPressed(updateMonthOffset), [
+        updateMonthOffset,
+    ]);
+
+    // Required to update year in the TextField when the user changes year by using prev next month arrows
+    React.useEffect(() => {
+        if (Number(textFieldYearValue) !== selectedMonth.getFullYear()) {
+            setTextFieldYearValue(selectedMonth.getFullYear().toString());
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedMonth]);
+
     const prevSelectedMonth = usePreviousValue(selectedMonth);
     const monthHasChanged = prevSelectedMonth && !isSameDay(selectedMonth, prevSelectedMonth);
 
@@ -63,6 +99,8 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
         if (monthHasChanged) setLabelAriaLive('polite');
     }, [monthHasChanged]);
 
+    const label = getYearDisplayName(locale);
+
     return (
         <div ref={ref} className={`${CLASSNAME}`}>
             <Toolbar
@@ -84,9 +122,46 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
                     />
                 }
                 label={
-                    <span className={`${CLASSNAME}__month`} aria-live={labelAriaLive}>
-                        {selectedMonth.toLocaleDateString(locale, { year: 'numeric', month: 'long' })}
-                    </span>
+                    <>
+                        <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(`(.*)(${selectedYear})(.*)`)
+                                    .exec(monthYear)
+                                    ?.slice(1)
+                                    .filter((part) => part !== '')
+                                    .map((part) =>
+                                        part === selectedYear ? (
+                                            <TextField
+                                                value={textFieldYearValue}
+                                                aria-label={label}
+                                                onChange={setTextFieldYearValue}
+                                                type="number"
+                                                max={9999}
+                                                min={0}
+                                                onBlur={updateMonthOffset}
+                                                onKeyPress={handleKeyPress}
+                                                key="year"
+                                                className={`${CLASSNAME}__year`}
+                                            />
+                                        ) : (
+                                            <Text as="p" key={part}>
+                                                {part}
+                                            </Text>
+                                        ),
+                                    )}
+                            </FlexBox>
+                        )}
+                    </>
                 }
             />
             <div className={`${CLASSNAME}__calendar`}>

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

@@ -11,6 +11,9 @@ 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> = {}) => {
     const props: DatePickerFieldProps = {

package/src/components/message/Message.stories.tsx

@@ -5,6 +5,7 @@ import { loremIpsum } from '@lumx/react/stories/utils/lorem';
 import { iconArgType } from '@lumx/react/stories/controls/icons';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+import { withNestedProps } from '../../stories/decorators/withNestedProps';
 
 export default {
     title: 'LumX components/message/Message',
@@ -54,3 +55,18 @@ export const CustomIcon = {
         icon: mdiDelete,
     },
 };
+
+/**
+ * With close button (has background and kind info)
+ */
+export const ClosableMessage = {
+    args: {
+        'closeButtonProps.label': 'Close',
+        hasBackground: true,
+        kind: 'info',
+    },
+    argTypes: {
+        'closeButtonProps.onClick': { action: true },
+    },
+    decorators: [withNestedProps()],
+};

package/src/components/message/Message.test.tsx

@@ -2,9 +2,11 @@ import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { Kind } from '@lumx/react';
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { queryByRole, render } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { mdiAbTesting } from '@lumx/icons';
+
+import userEvent from '@testing-library/user-event';
 import { Message, MessageProps } from './Message';
 
 const CLASSNAME = Message.className as string;
@@ -19,7 +21,8 @@ const setup = (propsOverride: SetupProps = {}) => {
     render(<Message {...props} />);
     const message = getByClassName(document.body, CLASSNAME);
     const icon = queryByClassName(message, `${CLASSNAME}__icon`);
-    return { message, icon, props };
+    const closeButton = queryByRole(message, 'button', { name: props.closeButtonProps?.label });
+    return { message, icon, closeButton, props };
 };
 
 describe(`<${Message.displayName}>`, () => {
@@ -44,9 +47,28 @@ describe(`<${Message.displayName}>`, () => {
         });
 
         it.each(Object.values(Kind))('should render kind %s', (kind) => {
-            const { message, icon } = setup({ kind });
+            const { message, icon, closeButton } = setup({ kind });
             expect(message.className).toEqual(expect.stringMatching(/\blumx-message--color-\w+\b/));
             expect(icon).toBeInTheDocument();
+            expect(closeButton).not.toBeInTheDocument();
+        });
+
+        it('should render close button', async () => {
+            const onClick = jest.fn();
+            const { closeButton } = setup({
+                hasBackground: true,
+                kind: 'info',
+                closeButtonProps: {
+                    label: 'Close',
+                    onClick,
+                },
+            });
+
+            expect(closeButton).toBeInTheDocument();
+
+            await userEvent.click(closeButton as HTMLElement);
+
+            expect(onClick).toHaveBeenCalled();
         });
     });
 

package/src/components/message/Message.tsx

@@ -1,5 +1,5 @@
-import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
-import { ColorPalette, Icon, Kind, Size } from '@lumx/react';
+import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@lumx/icons';
+import { ColorPalette, Emphasis, Icon, IconButton, Kind, Size } from '@lumx/react';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
@@ -17,6 +17,17 @@ export interface MessageProps extends GenericProps {
     kind?: Kind;
     /** Message custom icon SVG path. */
     icon?: string;
+    /**
+     * Displays a close button.
+     *
+     * NB: only available if `kind === 'info' && hasBackground === true`
+     */
+    closeButtonProps?: {
+        /** The callback called when the button is clicked */
+        onClick: () => void;
+        /** The label of the close button. */
+        label: string;
+    };
 }
 
 /**
@@ -47,8 +58,10 @@ const CONFIG = {
  * @return React element.
  */
 export const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { children, className, hasBackground, kind, icon: customIcon, ...forwardedProps } = props;
+    const { children, className, hasBackground, kind, icon: customIcon, closeButtonProps, ...forwardedProps } = props;
     const { color, icon } = CONFIG[kind as Kind] || {};
+    const { onClick, label: closeButtonLabel } = closeButtonProps || {};
+    const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
 
     return (
         <div
@@ -67,8 +80,18 @@ export const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, re
                 <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} color={color} />
             )}
             <div className={`${CLASSNAME}__text`}>{children}</div>
+            {isCloseButtonDisplayed && (
+                <IconButton
+                    className={`${CLASSNAME}__close-button`}
+                    icon={mdiClose}
+                    onClick={onClick}
+                    label={closeButtonLabel}
+                    emphasis={Emphasis.low}
+                />
+            )}
         </div>
     );
 });
+
 Message.displayName = COMPONENT_NAME;
 Message.className = CLASSNAME;

package/src/components/popover/Popover.tsx

@@ -60,6 +60,8 @@ export interface PopoverProps extends GenericProps, HasTheme {
     placement?: Placement;
     /** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
     usePortal?: boolean;
+    /** The element in which the focus trap should be set. Default to popover. */
+    focusTrapZone?: RefObject<HTMLElement>;
     /** Z-axis position. */
     zIndex?: number;
     /** On close callback (on click away or Escape pressed). */
@@ -115,6 +117,7 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
         boundaryRef,
         fitToAnchorWidth,
         fitWithinViewportHeight,
+        focusTrapZone,
         offset,
         placement,
         style,
@@ -146,12 +149,13 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
     });
 
     const unmountSentinel = useRestoreFocusOnClose({ focusAnchorOnClose, anchorRef, parentElement }, popperElement);
-
+    const focusZoneElement = focusTrapZone?.current || popoverRef?.current;
+    console.log('focusZone', focusZoneElement);
     useCallbackOnEscape(onClose, isOpen && closeOnEscape);
 
     /** Only set focus within if the focus trap is disabled as they interfere with one another. */
     useFocus(focusElement?.current, !withFocusTrap && isOpen && isPositioned);
-    useFocusTrap(withFocusTrap && isOpen && popoverRef?.current, focusElement?.current);
+    useFocusTrap(withFocusTrap && isOpen && focusZoneElement, focusElement?.current);
 
     const clickAwayRefs = useRef([popoverRef, anchorRef]);
     const mergedRefs = useMergeRefs<HTMLDivElement>(setPopperElement, ref, popoverRef);

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

@@ -3,6 +3,7 @@
  */
 export default { title: 'LumX components/message/Message Demos' };
 
+export { App as Closable } from './closable';
 export { App as Error } from './error';
 export { App as Info } from './info';
 export { App as Success } from './success';

package/src/utils/date/getYearDisplayName.test.ts

@@ -0,0 +1,20 @@
+import { getYearDisplayName } from './getYearDisplayName';
+
+describe(getYearDisplayName, () => {
+    beforeEach(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        jest.spyOn(Intl, 'DisplayNames').mockImplementation(() => ({
+            resolvedOptions: () => ({
+                fallback: 'code',
+                locale: 'fr',
+                style: 'short',
+                type: 'dateTimeField',
+            }),
+            of: () => 'année',
+        }));
+    });
+    it('should return a label', () => {
+        expect(getYearDisplayName('fr-FR')).toEqual('année');
+    });
+});

package/src/utils/date/getYearDisplayName.ts

@@ -0,0 +1,12 @@
+export const getYearDisplayName = (locale: string) => {
+    let label: string | undefined;
+    try {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const displayNames = new Intl.DisplayNames(locale, { type: 'dateTimeField' });
+        label = displayNames.of('year');
+    } catch (error) {
+        label = '';
+    }
+    return label;
+};