@lumx/react 3.9.2-alpha.9 → 3.9.3

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.9.2-alpha.9",
-        "@lumx/icons": "^3.9.2-alpha.9",
+        "@lumx/core": "^3.9.3",
+        "@lumx/icons": "^3.9.3",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -39,6 +39,7 @@
         "@testing-library/user-event": "^14.4.3",
         "@types/body-scroll-lock": "^2.6.1",
         "@types/classnames": "^2.2.9",
+        "@types/dom-view-transitions": "^1.0.5",
         "@types/jest": "^29.2.1",
         "@types/lodash": "^4.14.149",
         "@types/react": "^17.0.2",
@@ -110,5 +111,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.9.2-alpha.9"
+    "version": "3.9.3"
 }

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

@@ -3,8 +3,9 @@ import React from '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 { VISUALLY_HIDDEN } from '@lumx/react/constants';
+
 import { DatePickerControlled, DatePickerControlledProps } from './DatePickerControlled';
 import { CLASSNAME } from './constants';
 
@@ -39,7 +40,7 @@ const queries = {
         screen.getByRole('spinbutton', {
             name: /année/i,
         }),
-    getAccessibleMonthYear: (container: HTMLElement) => getByClassName(container, 'visually-hidden'),
+    getAccessibleMonthYear: (container: HTMLElement) => getByClassName(container, VISUALLY_HIDDEN),
 };
 
 describe(`<${DatePickerControlled.displayName}>`, () => {

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

@@ -1,6 +1,6 @@
 import React, { KeyboardEventHandler, forwardRef } from 'react';
 import classNames from 'classnames';
-import { DatePickerProps, Emphasis, FlexBox, IconButton, Text, TextField, Toolbar } from '@lumx/react';
+import { DatePickerProps, Emphasis, FlexBox, IconButton, Text, TextField, TextFieldProps, 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';
@@ -13,6 +13,7 @@ import { getYearDisplayName } from '@lumx/react/utils/date/getYearDisplayName';
 import { onEnterPressed } from '@lumx/react/utils/event';
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { formatDayNumber } from '@lumx/react/utils/date/formatDayNumber';
+import { VISUALLY_HIDDEN } from '@lumx/react/constants';
 import { CLASSNAME } from './constants';
 
 /**
@@ -61,36 +62,58 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
         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;
+    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(() => {
-        if (isYearValid) {
-            const yearNumber = selectedMonth.getFullYear();
-            const offset = (Number(textFieldYearValue) - yearNumber) * 12;
-            if (onMonthChange) {
-                onMonthChange(addMonthResetDay(selectedMonth, offset));
+    const updateMonthOffset = React.useCallback(
+        (newYearValue: string) => {
+            const yearNumber = Number(newYearValue);
+            if (yearNumber < 0 && yearNumber >= 9999) {
+                return;
             }
-        }
-    }, [isYearValid, selectedMonth, textFieldYearValue, onMonthChange]);
 
-    const monthYear = selectedMonth.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
+            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);
 
-    // Year can only be validated by pressing Enter key or on Blur. The below handles the press Enter key case
-    const handleKeyPress: KeyboardEventHandler = React.useMemo(
-        () => onEnterPressed(updateMonthOffset),
+            // 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],
     );
 
-    // Required to update year in the TextField when the user changes year by using prev next month arrows
+    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(() => {
-        if (Number(textFieldYearValue) !== selectedMonth.getFullYear()) {
-            setTextFieldYearValue(selectedMonth.getFullYear().toString());
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedMonth]);
+        setCurrentYear(String(selectedYear));
+    }, [selectedYear]);
 
     const prevSelectedMonth = usePreviousValue(selectedMonth);
     const monthHasChanged = prevSelectedMonth && !isSameDay(selectedMonth, prevSelectedMonth);
@@ -101,7 +124,7 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
         if (monthHasChanged) setLabelAriaLive('polite');
     }, [monthHasChanged]);
 
-    const label = getYearDisplayName(locale);
+    const yearLabel = getYearDisplayName(locale);
 
     return (
         <div ref={ref} className={`${CLASSNAME}`}>
@@ -125,7 +148,7 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
                 }
                 label={
                     <>
-                        <span aria-live={labelAriaLive} className={onMonthChange ? 'visually-hidden' : ''} dir="auto">
+                        <span aria-live={labelAriaLive} className={onMonthChange ? VISUALLY_HIDDEN : ''} dir="auto">
                             {monthYear}
                         </span>
                         {onMonthChange && (
@@ -137,21 +160,21 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
                                 vAlign="center"
                                 dir="auto"
                             >
-                                {RegExp(`(.*)(${selectedYear})(.*)`)
+                                {RegExp(`(.*)(${formattedYear})(.*)`)
                                     .exec(monthYear)
                                     ?.slice(1)
                                     .filter((part) => part !== '')
                                     .map((part) =>
-                                        part === selectedYear ? (
+                                        part === formattedYear ? (
                                             <TextField
-                                                value={textFieldYearValue}
-                                                aria-label={label}
-                                                onChange={setTextFieldYearValue}
+                                                value={currentYear}
+                                                aria-label={yearLabel}
+                                                onChange={onYearChange}
                                                 type="number"
                                                 max={9999}
                                                 min={0}
-                                                onBlur={updateMonthOffset}
-                                                onKeyPress={handleKeyPress}
+                                                onBlur={updateYear}
+                                                onKeyPress={updateYearOnEnterPressed}
                                                 key="year"
                                                 className={`${CLASSNAME}__year`}
                                             />
@@ -200,7 +223,7 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
                                             onClick={() => onChange(date)}
                                         >
                                             <span aria-hidden>{formatDayNumber(locale, date)}</span>
-                                            <span className="visually-hidden">
+                                            <span className={VISUALLY_HIDDEN}>
                                                 {date.toLocaleDateString(locale, {
                                                     day: 'numeric',
                                                     month: 'long',

package/src/components/image-lightbox/ImageLightbox.tsx

@@ -55,6 +55,8 @@ const Inner: Comp<ImageLightboxProps, HTMLDivElement> = forwardRef((props, ref)
             closeButtonProps={closeButtonProps}
             focusElement={currentPaginationItemRef}
             {...forwardedProps}
+            // Disable the close on click away as we want a custom one here
+            preventAutoClose
         >
             <ClickAwayProvider childrenRefs={clickAwayChildrenRefs} callback={onClickAway}>
                 <ImageSlideshow

package/src/components/image-lightbox/useImageLightbox.tsx

@@ -109,7 +109,7 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
                         isOpen: true,
                         onClose: () => {
                             close();
-                            prevProps?.onClose?.();
+                            propsRef.current?.onClose?.();
                         },
                         images,
                         activeImageIndex: activeImageIndex || 0,

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

@@ -68,6 +68,8 @@ export interface TextFieldProps extends GenericProps, HasTheme {
     placeholder?: string;
     /** Reference to the wrapper. */
     textFieldRef?: Ref<HTMLDivElement>;
+    /** Native input type (only when `multiline` is disabled). */
+    type?: React.ComponentProps<'input'>['type'];
     /** Value. */
     value?: string;
     /** On blur callback. */
@@ -160,7 +162,7 @@ interface InputNativeProps {
     maxLength?: number;
     placeholder?: string;
     rows: number;
-    type: string;
+    type: TextFieldProps['type'];
     name?: string;
     value?: string;
     setFocus(focus: boolean): void;

package/src/components/tooltip/Tooltip.test.tsx

@@ -5,8 +5,9 @@ import { screen, render } from '@testing-library/react';
 import { queryAllByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import userEvent from '@testing-library/user-event';
-
 import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
+import { VISUALLY_HIDDEN } from '@lumx/react/constants';
+
 import { Tooltip, TooltipProps } from './Tooltip';
 
 const CLASSNAME = Tooltip.className as string;
@@ -142,11 +143,11 @@ describe(`<${Tooltip.displayName}>`, () => {
                     forceOpen: false,
                 });
                 expect(tooltip).toBeInTheDocument();
-                expect(tooltip).toHaveClass('lumx-tooltip--is-hidden');
+                expect(tooltip).toHaveClass(VISUALLY_HIDDEN);
 
                 const anchor = screen.getByRole('button', { name: 'Anchor' });
                 await userEvent.hover(anchor);
-                expect(tooltip).not.toHaveClass('lumx-tooltip--is-hidden');
+                expect(tooltip).not.toHaveClass(VISUALLY_HIDDEN);
             });
         });
 

package/src/components/tooltip/Tooltip.tsx

@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
 
-import { DOCUMENT } from '@lumx/react/constants';
+import { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';
 import { Comp, GenericProps, HasCloseMode } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -106,6 +106,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
     const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);
     const isOpen = (isActivated || forceOpen) && !!label;
     const isMounted = !!label && (isOpen || closeMode === 'hide');
+    const isHidden = !isOpen && closeMode === 'hide';
     const wrappedChildren = useInjectTooltipRef({
         children,
         setAnchorElement,
@@ -139,8 +140,8 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
                             handleBasicClasses({
                                 prefix: CLASSNAME,
                                 position,
-                                hidden: !isOpen && closeMode === 'hide',
                             }),
+                            isHidden && VISUALLY_HIDDEN,
                         )}
                         style={{ ...styles.popper, zIndex }}
                         {...attributes.popper}

package/src/constants.ts

@@ -20,3 +20,8 @@ export const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
  * Check if we are running in a true browser
  */
 export const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
+
+/**
+ * Visually hidden a11y utility class name
+ */
+export const VISUALLY_HIDDEN = 'visually-hidden';

package/src/utils/DOM/startViewTransition.ts

@@ -5,9 +5,21 @@ import { MaybeElementOrRef } from '@lumx/react/utils/type';
 import { unref } from '../react/unref';
 import { getPrefersReducedMotion } from '../browser/getPrefersReducedMotion';
 
-function setTransitionViewName(elementRef: MaybeElementOrRef<HTMLElement>, name: string | null | undefined) {
-    const element = unref(elementRef) as any;
-    if (element) element.style.viewTransitionName = name;
+function setupViewTransitionName(elementRef: MaybeElementOrRef<HTMLElement>, name: string) {
+    let originalName: string | null = null;
+    return {
+        set() {
+            const element = unref(elementRef);
+            if (!element) return;
+            originalName = element.style.viewTransitionName;
+            element.style.viewTransitionName = name;
+        },
+        unset() {
+            const element = unref(elementRef);
+            if (!element || originalName === null) return;
+            element.style.viewTransitionName = originalName;
+        },
+    };
 }
 
 /**
@@ -37,20 +49,20 @@ export async function startViewTransition({
         return;
     }
 
-    // Set transition name on source element
-    setTransitionViewName(viewTransitionName.source, viewTransitionName.name);
+    // Setup set/unset transition name on source & target
+    const sourceTransitionName = setupViewTransitionName(viewTransitionName.source, viewTransitionName.name);
+    const targetTransitionName = setupViewTransitionName(viewTransitionName.target, viewTransitionName.name);
+
+    sourceTransitionName.set();
 
     // Start view transition, apply changes & flush to DOM
     await start(() => {
-        // Un-set transition name on source element
-        setTransitionViewName(viewTransitionName.source, null);
+        sourceTransitionName.unset();
 
         flushSync(changes);
 
-        // Set transition name on target element
-        setTransitionViewName(viewTransitionName.target, viewTransitionName.name);
+        targetTransitionName.set();
     }).updateCallbackDone;
 
-    // Un-set transition name on target element
-    setTransitionViewName(viewTransitionName.target, null);
+    targetTransitionName.unset();
 }