@lumx/react 3.6.5 → 3.6.6-alpha.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.6.5",
-        "@lumx/icons": "^3.6.5",
+        "@lumx/core": "^3.6.6-alpha.0",
+        "@lumx/icons": "^3.6.6-alpha.0",
         "@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.5"
+    "version": "3.6.6-alpha.0"
 }

package/src/components/chip/ChipGroup.stories.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { Chip, ChipGroup, Size } from '@lumx/react';
+
+export default {
+    title: 'LumX components/chip/ChipGroup',
+    component: ChipGroup,
+    args: ChipGroup.defaultProps,
+    argTypes: {},
+};
+
+const chips = (
+    <>
+        <Chip size={Size.s}>Apricot</Chip>
+        <Chip size={Size.s}>Apple</Chip>
+        <Chip size={Size.s}>Banana</Chip>
+        <Chip size={Size.s}>Blueberry</Chip>
+        <Chip size={Size.s}>Lemon</Chip>
+        <Chip size={Size.s}>Orange</Chip>
+        <Chip size={Size.s}>Peach</Chip>
+        <Chip size={Size.s}>Pear</Chip>
+        <Chip size={Size.s}>Pineapple</Chip>
+        <Chip size={Size.s}>Melon</Chip>
+        <Chip size={Size.s}>Raspberry</Chip>
+        <Chip size={Size.s}>Strawberry</Chip>
+        <Chip size={Size.s}>Watermelon</Chip>
+    </>
+);
+
+/**
+ * Default chip group
+ */
+export const Default = {
+    args: {
+        children: chips,
+    },
+};
+
+/**
+ * Small chip group
+ */
+export const Small = {
+    args: {
+        children: chips,
+        style: {
+            width: '200px',
+        },
+    },
+};

package/src/components/chip/ChipGroup.test.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { Alignment } from '@lumx/react';
 import { ChipGroup, ChipGroupProps } from './ChipGroup';
 import { Chip } from './Chip';
 
@@ -29,12 +28,6 @@ describe('<ChipGroup />', () => {
             const { chipGroup } = setup();
             expect(chipGroup).toBeInTheDocument();
             expect(chipGroup).toHaveClass(CLASSNAME);
-            expect(chipGroup).toHaveClass(`${CLASSNAME}--align-left`);
-        });
-
-        it('should render with align', () => {
-            const { chipGroup } = setup({ align: Alignment.right });
-            expect(chipGroup).toHaveClass(`${CLASSNAME}--align-right`);
         });
     });
 

package/src/components/chip/ChipGroup.tsx

@@ -1,4 +1,4 @@
-import { Alignment, HorizontalAlignment } from '@lumx/react/components';
+import { HorizontalAlignment } from '@lumx/react/components';
 import React, { forwardRef, ReactNode } from 'react';
 
 import classNames from 'classnames';
@@ -12,7 +12,10 @@ import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation
  * Defines the props of the component.
  */
 export interface ChipGroupProps extends GenericProps {
-    /** Chip horizontal alignment. */
+    /**
+     * Chip horizontal alignment.
+     * @deprecated
+     */
     align?: HorizontalAlignment;
     /** List of Chip. */
     children: ReactNode;
@@ -21,9 +24,7 @@ export interface ChipGroupProps extends GenericProps {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<ChipGroupProps> = {
-    align: Alignment.left,
-};
+const DEFAULT_PROPS: Partial<ChipGroupProps> = {};
 
 /**
  * Component display name.
@@ -45,7 +46,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 const InternalChipGroup: Comp<ChipGroupProps, HTMLDivElement> = forwardRef((props, ref) => {
     const { align, children, className, ...forwardedProps } = props;
     const chipGroupClassName = handleBasicClasses({
-        align,
         prefix: CLASSNAME,
     });
 

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

@@ -38,7 +38,7 @@ describe(`<${DatePickerControlled.displayName}>`, () => {
         expect(month).toHaveTextContent('février 2017');
 
         const selected = queryByClassName(datePickerControlled, `${CLASSNAME}__month-day--is-selected`);
-        expect(selected).toBe(screen.queryByRole('button', { name: '22' }));
+        expect(selected).toBe(screen.queryByRole('button', { name: /22 février 2017/i }));
     });
 
     commonTestsSuiteRTL(setup, {

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

@@ -8,6 +8,7 @@ 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 { CLASSNAME } from './constants';
 
 /**
@@ -53,6 +54,15 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
         return getMonthCalendar(localeObj, selectedMonth, minDate, maxDate);
     }, [locale, minDate, maxDate, selectedMonth]);
 
+    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]);
+
     return (
         <div ref={ref} className={`${CLASSNAME}`}>
             <Toolbar
@@ -74,16 +84,19 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
                     />
                 }
                 label={
-                    <span className={`${CLASSNAME}__month`}>
+                    <span className={`${CLASSNAME}__month`} aria-live={labelAriaLive}>
                         {selectedMonth.toLocaleDateString(locale, { year: 'numeric', month: 'long' })}
                     </span>
                 }
             />
             <div className={`${CLASSNAME}__calendar`}>
                 <div className={`${CLASSNAME}__week-days ${CLASSNAME}__days-wrapper`}>
-                    {weekDays.map(({ letter, number }) => (
+                    {weekDays.map(({ letter, number, long }) => (
                         <div key={number} className={`${CLASSNAME}__day-wrapper`}>
-                            <span className={`${CLASSNAME}__week-day`}>{letter.toLocaleUpperCase()}</span>
+                            <span className={`${CLASSNAME}__week-day`} aria-hidden>
+                                {letter.toLocaleUpperCase()}
+                            </span>
+                            <span className="visually-hidden">{long}</span>
                         </div>
                     ))}
                 </div>
@@ -109,7 +122,16 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
                                             type="button"
                                             onClick={() => onChange(date)}
                                         >
-                                            <span>{date.toLocaleDateString(locale, { day: 'numeric' })}</span>
+                                            <span aria-hidden>
+                                                {date.toLocaleDateString(locale, { day: 'numeric' })}
+                                            </span>
+                                            <span className="visually-hidden">
+                                                {date.toLocaleDateString(locale, {
+                                                    day: 'numeric',
+                                                    month: 'long',
+                                                    year: 'numeric',
+                                                })}
+                                            </span>
                                         </button>
                                     )}
                                 </div>

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

@@ -1,27 +1,22 @@
-import React, { forwardRef, SyntheticEvent, useCallback, useRef, useState } from 'react';
+import React, { forwardRef, SyntheticEvent, useCallback, useRef } from 'react';
 
-import { DatePicker, IconButtonProps, Placement, Popover, TextField } from '@lumx/react';
-import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
-import { useFocus } from '@lumx/react/hooks/useFocus';
+import { DatePicker, IconButtonProps, Placement, PopoverDialog, TextField, TextFieldProps } from '@lumx/react';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
+import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 
 /**
  * Defines the props of the component.
  */
-export interface DatePickerFieldProps extends GenericProps {
+export interface DatePickerFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'>, GenericProps {
     /** Default month. */
     defaultMonth?: Date;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
     /** 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;
-    /** Native input name property. */
-    name?: string;
     /** 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). */
@@ -60,44 +55,39 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
         value,
         ...forwardedProps
     } = props;
-    const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);
     const anchorRef = useRef(null);
 
-    const [isOpen, setIsOpen] = useState(false);
+    const [isOpen, close, , toggleOpen] = useBooleanState(false);
 
-    const toggleSimpleMenu = () => {
-        setIsOpen(!isOpen);
-    };
-
-    const onClose = useCallback(() => {
-        setIsOpen(false);
-    }, []);
-
-    useFocus(anchorRef.current, isOpen);
-    const handleKeyboardNav = (evt: React.KeyboardEvent) => {
-        if ((evt.key === 'Enter' || evt.key === ' ') && toggleSimpleMenu) {
-            toggleSimpleMenu();
-        }
-    };
-
-    // Handle focus trap.
-    const [todayOrSelectedDate, setTodayOrSelectedDate] = useState<HTMLButtonElement | null>(null);
-    useFocusTrap(isOpen && wrapperElement, todayOrSelectedDate);
-
-    const onTextFieldChange = (textFieldValue: string, textFieldName?: string, event?: SyntheticEvent) => {
-        if (!textFieldValue) {
-            onChange(undefined, textFieldName, event);
-        }
-    };
-
-    const onDatePickerChange = (newDate?: Date) => {
-        onChange(newDate, name);
-        onClose();
-    };
+    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
@@ -107,34 +97,36 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
                 forceFocusStyle={isOpen}
                 textFieldRef={anchorRef}
                 value={textFieldValue}
-                onClick={toggleSimpleMenu}
+                onClick={toggleOpen}
                 onChange={onTextFieldChange}
                 onKeyPress={handleKeyboardNav}
                 isDisabled={isDisabled}
                 readOnly
+                aria-haspopup="dialog"
             />
             {isOpen ? (
-                <Popover
+                <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={onClose}
-                    closeOnClickAway
-                    closeOnEscape
+                    onClose={close}
+                    // On open, focus the selected day or today
+                    focusElement={todayOrSelectedDateRef}
                 >
                     <DatePicker
-                        ref={setWrapperElement}
                         locale={locale}
                         maxDate={maxDate}
                         minDate={minDate}
                         value={value}
+                        todayOrSelectedDateRef={todayOrSelectedDateRef}
                         onChange={onDatePickerChange}
-                        todayOrSelectedDateRef={setTodayOrSelectedDate}
                         defaultMonth={defaultMonth}
                         nextButtonProps={nextButtonProps}
                         previousButtonProps={previousButtonProps}
                     />
-                </Popover>
+                </PopoverDialog>
             ) : null}
         </>
     );

package/src/components/popover-dialog/PopoverDialog.test.tsx

@@ -22,6 +22,17 @@ describe(`<${PopoverDialog.displayName}>`, () => {
         expect(within(dialog).getAllByRole('button')[0]).toHaveFocus();
     });
 
+    it('should work with aria-label', async () => {
+        const label = 'Test Label';
+        render(<WithButtonTrigger aria-label={label} />);
+
+        // Open popover
+        const triggerElement = screen.getByRole('button', { name: 'Open popover' });
+        await userEvent.click(triggerElement);
+
+        expect(await screen.findByRole('dialog', { name: label })).toBeInTheDocument();
+    });
+
     it('should trap focus', async () => {
         const label = 'Test Label';
         render(<WithButtonTrigger label={label} />);

package/src/components/popover-dialog/PopoverDialog.tsx

@@ -35,7 +35,15 @@ const DEFAULT_PROPS: Partial<PopoverDialogProps> = {};
  * * Closes on click away and escape.
  */
 export const PopoverDialog: Comp<PopoverDialogProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { children, isOpen, focusElement, label, className, ...forwardedProps } = props;
+    const {
+        children,
+        isOpen,
+        focusElement,
+        'aria-label': ariaLabel,
+        label = ariaLabel,
+        className,
+        ...forwardedProps
+    } = props;
 
     return (
         <Popover

package/src/components/text-field/TextField.tsx

@@ -15,7 +15,18 @@ import get from 'lodash/get';
 import { uid } from 'uid';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons';
-import { Emphasis, Icon, IconButton, IconButtonProps, InputHelper, InputLabel, Kind, Size, Theme } from '@lumx/react';
+import {
+    Emphasis,
+    Icon,
+    IconButton,
+    IconButtonProps,
+    InputHelper,
+    InputLabel,
+    InputLabelProps,
+    Kind,
+    Size,
+    Theme,
+} from '@lumx/react';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -53,6 +64,8 @@ export interface TextFieldProps extends GenericProps, HasTheme {
     isValid?: boolean;
     /** Label text. */
     label?: string;
+    /** Additional label props. */
+    labelProps?: InputLabelProps;
     /** Max string length the input accepts (constrains the input and displays a character counter). */
     maxLength?: number;
     /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */
@@ -266,6 +279,7 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
         isRequired,
         isValid,
         label,
+        labelProps,
         maxLength,
         minimumRows,
         multiline,
@@ -355,6 +369,7 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
                 <div className={`${CLASSNAME}__header`}>
                     {label && (
                         <InputLabel
+                            {...labelProps}
                             htmlFor={textFieldId}
                             className={`${CLASSNAME}__label`}
                             isRequired={isRequired}

package/src/components/thumbnail/Thumbnail.tsx

@@ -180,7 +180,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                 fillHeight && `${CLASSNAME}--fill-height`,
             )}
         >
-            <div className={`${CLASSNAME}__background`}>
+            <span className={`${CLASSNAME}__background`}>
                 <img
                     {...imgProps}
                     style={{
@@ -203,15 +203,15 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                     loading={loading}
                 />
                 {!isLoading && hasError && (
-                    <div className={`${CLASSNAME}__fallback`}>
+                    <span className={`${CLASSNAME}__fallback`}>
                         {hasIconErrorFallback ? (
                             <Icon icon={fallback as string} size={Size.xxs} theme={theme} />
                         ) : (
                             fallback
                         )}
-                    </div>
+                    </span>
                 )}
-            </div>
+            </span>
             {badge &&
                 React.cloneElement(badge, { className: classNames(`${CLASSNAME}__badge`, badge.props.className) })}
         </Wrapper>

package/src/hooks/usePreviousValue.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+/**
+ * Returns the value from the previous render.
+ */
+export function usePreviousValue<V>(value: V): V | undefined {
+    const prevValueRef = React.useRef<V>();
+    const prevValue = prevValueRef.current;
+    React.useEffect(() => {
+        prevValueRef.current = value;
+    }, [value]);
+    return prevValue;
+}

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

@@ -10,13 +10,13 @@ describe(getMonthCalendar.name, () => {
 
         expect(month).toEqual({
             weekDays: [
-                { letter: 'L', number: 1 },
-                { letter: 'M', number: 2 },
-                { letter: 'M', number: 3 },
-                { letter: 'J', number: 4 },
-                { letter: 'V', number: 5 },
-                { letter: 'S', number: 6 },
-                { letter: 'D', number: 0 },
+                { long: 'lundi', letter: 'L', number: 1 },
+                { long: 'mardi', letter: 'M', number: 2 },
+                { long: 'mercredi', letter: 'M', number: 3 },
+                { long: 'jeudi', letter: 'J', number: 4 },
+                { long: 'vendredi', letter: 'V', number: 5 },
+                { long: 'samedi', letter: 'S', number: 6 },
+                { long: 'dimanche', letter: 'D', number: 0 },
             ],
             weeks: [
                 {
@@ -70,13 +70,13 @@ describe(getMonthCalendar.name, () => {
 
         expect(month).toEqual({
             weekDays: [
-                { letter: 'S', number: 0 },
-                { letter: 'M', number: 1 },
-                { letter: 'T', number: 2 },
-                { letter: 'W', number: 3 },
-                { letter: 'T', number: 4 },
-                { letter: 'F', number: 5 },
-                { letter: 'S', number: 6 },
+                { long: 'Sunday', letter: 'S', number: 0 },
+                { long: 'Monday', letter: 'M', number: 1 },
+                { long: 'Tuesday', letter: 'T', number: 2 },
+                { long: 'Wednesday', letter: 'W', number: 3 },
+                { long: 'Thursday', letter: 'T', number: 4 },
+                { long: 'Friday', letter: 'F', number: 5 },
+                { long: 'Saturday', letter: 'S', number: 6 },
             ],
             weeks: [
                 {

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

@@ -10,39 +10,39 @@ describe(getWeekDays.name, () => {
     it('should list french week days', () => {
         const weekDays = getWeekDays(french);
         expect(weekDays).toEqual([
-            { letter: 'L', number: 1 },
-            { letter: 'M', number: 2 },
-            { letter: 'M', number: 3 },
-            { letter: 'J', number: 4 },
-            { letter: 'V', number: 5 },
-            { letter: 'S', number: 6 },
-            { letter: 'D', number: 0 },
+            { long: 'lundi', letter: 'L', number: 1 },
+            { long: 'mardi', letter: 'M', number: 2 },
+            { long: 'mercredi', letter: 'M', number: 3 },
+            { long: 'jeudi', letter: 'J', number: 4 },
+            { long: 'vendredi', letter: 'V', number: 5 },
+            { long: 'samedi', letter: 'S', number: 6 },
+            { long: 'dimanche', letter: 'D', number: 0 },
         ]);
     });
 
     it('should list US week days', () => {
         const weekDays = getWeekDays(englishUS);
         expect(weekDays).toEqual([
-            { letter: 'S', number: 0 },
-            { letter: 'M', number: 1 },
-            { letter: 'T', number: 2 },
-            { letter: 'W', number: 3 },
-            { letter: 'T', number: 4 },
-            { letter: 'F', number: 5 },
-            { letter: 'S', number: 6 },
+            { long: 'Sunday', letter: 'S', number: 0 },
+            { long: 'Monday', letter: 'M', number: 1 },
+            { long: 'Tuesday', letter: 'T', number: 2 },
+            { long: 'Wednesday', letter: 'W', number: 3 },
+            { long: 'Thursday', letter: 'T', number: 4 },
+            { long: 'Friday', letter: 'F', number: 5 },
+            { long: 'Saturday', letter: 'S', number: 6 },
         ]);
     });
 
     it('should list fa-ir week days', () => {
         const weekDays = getWeekDays(farsi);
         expect(weekDays).toEqual([
-            { letter: 'ش', number: 6 },
-            { letter: 'ی', number: 0 },
-            { letter: 'د', number: 1 },
-            { letter: 'س', number: 2 },
-            { letter: 'چ', number: 3 },
-            { letter: 'پ', number: 4 },
-            { letter: 'ج', number: 5 },
+            { long: 'شنبه', letter: 'ش', number: 6 },
+            { long: 'یکشنبه', letter: 'ی', number: 0 },
+            { long: 'دوشنبه', letter: 'د', number: 1 },
+            { long: 'سه‌شنبه', letter: 'س', number: 2 },
+            { long: 'چهارشنبه', letter: 'چ', number: 3 },
+            { long: 'پنجشنبه', letter: 'پ', number: 4 },
+            { long: 'جمعه', letter: 'ج', number: 5 },
         ]);
     });
 });

package/src/utils/date/getWeekDays.ts

@@ -1,7 +1,7 @@
 import { Locale } from '@lumx/react/utils/locale/types';
 import { getFirstDayOfWeek } from './getFirstDayOfWeek';
 
-export type WeekDayInfo = { letter: string; number: number };
+export type WeekDayInfo = { letter: string; number: number; long: string };
 
 export const DAYS_PER_WEEK = 7;
 
@@ -22,10 +22,12 @@ export const getWeekDays = (locale: Locale): Array<WeekDayInfo> => {
     for (let i = 0; i < DAYS_PER_WEEK; i++) {
         // Single letter week day (ex: "M" for "Monday", "L" for "Lundi", etc.)
         const letter = iterDate.toLocaleDateString(locale.code, { weekday: 'narrow' });
+        // Weed day long notation
+        const long = iterDate.toLocaleDateString(locale.code, { weekday: 'long' });
         // Day number (1-based index starting on Monday)
         const number = iterDate.getDay();
 
-        weekDays.push({ letter, number });
+        weekDays.push({ letter, number, long });
         iterDate.setDate(iterDate.getDate() + 1);
     }
     return weekDays;