@lumx/react 2.0.0-alpha.0 → 2.0.1

package/src/components/slideshow/useSwipeNavigate.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { detectHorizontalSwipe } from '@lumx/core/js/utils';
+
+const isTouchDevice = () => 'ontouchstart' in window;
+
+/**
+ * Listen swipe to navigate left and right.
+ */
+export function useSwipeNavigate(element?: HTMLElement | null, onNext?: () => void, onPrevious?: () => void): void {
+    useEffect(() => {
+        if (!element || !isTouchDevice()) return undefined;
+
+        return detectHorizontalSwipe(element, (swipe) => {
+            const callback = swipe === 'right' ? onPrevious : onNext;
+            callback?.();
+        });
+    }, [onPrevious, onNext, element]);
+}

package/src/components/switch/Switch.tsx

@@ -100,12 +100,14 @@ export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref)
             <div className={`${CLASSNAME}__input-wrapper`}>
                 <input
                     type="checkbox"
+                    role="switch"
                     id={switchId}
                     className={`${CLASSNAME}__input-native`}
                     name={name}
                     value={value}
                     disabled={isDisabled}
                     checked={isChecked}
+                    aria-checked={Boolean(isChecked)}
                     onChange={handleChange}
                 />
 

package/src/components/switch/__snapshots__/Switch.test.tsx.snap

@@ -8,9 +8,11 @@ exports[`<Switch> Conditions should not display the \`helper\` if no \`label\` i
     className="lumx-switch__input-wrapper"
   >
     <input
+      aria-checked={false}
       className="lumx-switch__input-native"
       id="switch-uid"
       onChange={[Function]}
+      role="switch"
       type="checkbox"
     />
     <div
@@ -35,9 +37,11 @@ exports[`<Switch> Snapshots and structure should render correctly with a \`label
     className="lumx-switch__input-wrapper"
   >
     <input
+      aria-checked={false}
       className="lumx-switch__input-native"
       id="switch-uid"
       onChange={[Function]}
+      role="switch"
       type="checkbox"
     />
     <div
@@ -80,9 +84,11 @@ exports[`<Switch> Snapshots and structure should render correctly with only a \`
     className="lumx-switch__input-wrapper"
   >
     <input
+      aria-checked={false}
       className="lumx-switch__input-native"
       id="switch-uid"
       onChange={[Function]}
+      role="switch"
       type="checkbox"
     />
     <div
@@ -118,9 +124,11 @@ exports[`<Switch> Snapshots and structure should render correctly without any la
     className="lumx-switch__input-wrapper"
   >
     <input
+      aria-checked={false}
       className="lumx-switch__input-native"
       id="switch-uid"
       onChange={[Function]}
+      role="switch"
       type="checkbox"
     />
     <div

package/src/hooks/useClickAway.tsx

@@ -8,7 +8,7 @@ const EVENT_TYPES = ['mousedown', 'touchstart'];
 
 function isClickAway(target: HTMLElement, refs: Array<RefObject<HTMLElement>>): boolean {
     // The target element is not contained in any of the listed element references.
-    return !refs.some((e) => e && e.current && e.current.contains(target));
+    return !refs.some((e) => e?.current?.contains(target));
 }
 
 export interface ClickAwayParameters {
@@ -19,7 +19,7 @@ export interface ClickAwayParameters {
     /**
      * Elements from which we want to detect the click away.
      */
-    refs: Array<RefObject<HTMLElement>>;
+    refs: RefObject<Array<RefObject<HTMLElement>>>;
 }
 
 /**
@@ -29,12 +29,13 @@ export interface ClickAwayParameters {
  */
 export function useClickAway({ callback, refs }: ClickAwayParameters): void {
     useEffect(() => {
-        if (!callback || !refs || isEmpty(refs)) {
+        const { current: currentRefs } = refs;
+        if (!callback || !currentRefs || isEmpty(currentRefs)) {
             return undefined;
         }
         const listener: EventListener = (evt) => {
-            if (isClickAway(evt.target as HTMLElement, refs)) {
-                setTimeout(() => callback(evt));
+            if (isClickAway(evt.target as HTMLElement, currentRefs)) {
+                callback(evt);
             }
         };
 

package/src/hooks/useDelayedVisibility.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 /**
  * Returns true if the component is visible taking into account the component's
@@ -6,9 +6,14 @@ import { useEffect, useState } from 'react';
  *
  * @param isComponentVisible Whether the component intends to be visible or not.
  * @param transitionDuration time in ms that the transition takes for the specific component.
+ * @param onVisibilityChange Callback called when the visibility changes.
  * @return true if the component should be rendered
  */
-export function useDelayedVisibility(isComponentVisible: boolean, transitionDuration: number): boolean {
+export function useDelayedVisibility(
+    isComponentVisible: boolean,
+    transitionDuration: number,
+    onVisibilityChange?: (isVisible: boolean) => void,
+): boolean {
     // Delay visibility to account for the 400ms of CSS opacity animation.
     const [isVisible, setVisible] = useState(isComponentVisible);
 
@@ -20,5 +25,20 @@ export function useDelayedVisibility(isComponentVisible: boolean, transitionDura
         }
     }, [isComponentVisible, transitionDuration]);
 
+    /**
+     * Since we don't want onVisibiltyChange function to trigger itself if when it changes,
+     * we store the previous visibility and only trigger when visibility is different
+     * than previous value.
+     */
+
+    const previousVisibility = useRef(isVisible);
+
+    useEffect(() => {
+        if (onVisibilityChange && previousVisibility.current !== isVisible) {
+            onVisibilityChange(isVisible);
+            previousVisibility.current = isVisible;
+        }
+    }, [isVisible, onVisibilityChange]);
+
     return isComponentVisible || isVisible;
 }

package/src/hooks/useDisableBodyScroll.ts

@@ -2,12 +2,27 @@ import { useEffect } from 'react';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import { Falsy } from '@lumx/react/utils';
 
+/**
+ * Disables the scroll on the body to make it only usable in the current modal element.
+ * When the modal element is not provided anymore, the scroll is restored.
+ *
+ * @param modalElement The modal element.
+ */
 export const useDisableBodyScroll = (modalElement: Element | Falsy): void => {
     useEffect(() => {
         if (!modalElement) {
             return undefined;
         }
+        // Fixing the document overflow style to prevent a bug that scrolls the window to the top.
+        const previousDocumentOverflow = document.documentElement.style.overflow;
+        document.documentElement.style.overflow = 'visible';
         disableBodyScroll(modalElement);
-        return () => enableBodyScroll(modalElement);
+        return () => {
+            enableBodyScroll(modalElement);
+            // Restore the previous overflow style.
+            requestAnimationFrame(() => {
+                document.documentElement.style.overflow = previousDocumentOverflow;
+            });
+        };
     }, [modalElement]);
 };

package/src/hooks/useInfiniteScroll.tsx

@@ -7,6 +7,9 @@ type useInfiniteScrollType = (
 ) => void;
 type EventCallback = (evt?: Event) => void;
 
+// The error margin in px we want to have for triggering infinite scroll
+const SCROLL_TRIGGER_MARGIN = 5;
+
 /**
  * Listen to clicks away from a given element and callback the passed in function.
  *
@@ -14,14 +17,22 @@ type EventCallback = (evt?: Event) => void;
  * @param  [callback]        A callback function to call when the bottom of the reference element is reached.
  * @param  [callbackOnMount] A callback function to call when the component is mounted.
  */
-export const useInfiniteScroll: useInfiniteScrollType = (ref, callback, callbackOnMount = false) => {
+export const useInfiniteScroll: useInfiniteScrollType = (
+    ref,
+    callback,
+    callbackOnMount = false,
+    scrollTriggerMargin = SCROLL_TRIGGER_MARGIN,
+) => {
     useEffect(() => {
         const { current } = ref;
         if (!callback || !current) {
             return undefined;
         }
 
-        const isAtBottom = () => Boolean(current && current.scrollTop + current.clientHeight >= current.scrollHeight);
+        const isAtBottom = () =>
+            Boolean(
+                current && current.scrollHeight - (current.scrollTop + current.clientHeight) <= scrollTriggerMargin,
+            );
 
         const onScroll = (e?: Event): void => {
             if (isAtBottom()) {
@@ -39,7 +50,7 @@ export const useInfiniteScroll: useInfiniteScrollType = (ref, callback, callback
             current.removeEventListener('scroll', onScroll);
             current.removeEventListener('resize', onScroll);
         };
-    }, [ref, callback]);
+    }, [ref, callback, scrollTriggerMargin]);
 
     useEffect(() => {
         if (callback && callbackOnMount) {

package/src/hooks/useListenFocus.tsx

@@ -0,0 +1,26 @@
+import { RefObject, useEffect, useState } from 'react';
+
+/**
+ * Listen on element focus to store the focus status.
+ */
+export function useListenFocus(ref: RefObject<HTMLElement>) {
+    const [isFocus, setFocus] = useState(false);
+
+    useEffect(() => {
+        const { current: element } = ref;
+        if (!element) {
+            return undefined;
+        }
+
+        const onFocus = () => setFocus(true);
+        const onBlur = () => setFocus(false);
+        element.addEventListener('focus', onFocus);
+        element.addEventListener('blur', onBlur);
+        return () => {
+            element.removeEventListener('focus', onFocus);
+            element.removeEventListener('blur', onBlur);
+        };
+    }, [ref, setFocus]);
+
+    return isFocus;
+}

package/src/utils/ClickAwayProvider/ClickAwayProvider.tsx

@@ -1,42 +1,33 @@
-import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
-
+import React, { createContext, useContext, useEffect } from 'react';
+import pull from 'lodash/pull';
 import { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';
 
-import uniq from 'lodash/uniq';
-
-type appendChildrenRefsType = (refs: ClickAwayParameters['refs']) => void;
-const ClickAwayAncestorContext = createContext<appendChildrenRefsType | null>(null);
+const ClickAwayAncestorContext = createContext<ClickAwayParameters['refs'] | null>(null);
 
 /**
- * Component combining the `useClickAway` hook with a React context to hook into the React
- * component tree and make sure we take into account both the DOM tree and the React tree we trying to detect click away.
+ * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure
+ * we take into account both the DOM tree and the React tree we trying to detect click away.
  *
  * @return the react component.
  */
 export const ClickAwayProvider: React.FC<ClickAwayParameters> = ({ children, callback, refs }) => {
-    const appendAncestorChildrenRefs = useContext(ClickAwayAncestorContext);
-    const [childrenRefs, setChildrenRefs] = useState<ClickAwayParameters['refs']>([]);
-
-    const appendChildrenRefs = useCallback(
-        (newChildrenRefs: ClickAwayParameters['refs']) => {
-            setTimeout(() => {
-                setChildrenRefs(uniq([...childrenRefs, ...newChildrenRefs]));
-            });
-        },
-        [childrenRefs, setChildrenRefs],
-    );
-
-    const clickAwayRefs = useMemo(() => {
-        // Use current refs and children refs in click away detection.
-        const concatenatedRefs = [...refs, ...childrenRefs];
-
-        // Forward refs to parent click away context.
-        appendAncestorChildrenRefs?.(concatenatedRefs);
-
-        return concatenatedRefs;
-    }, [refs, childrenRefs, appendAncestorChildrenRefs]);
-
-    useClickAway({ callback, refs: clickAwayRefs });
-    return <ClickAwayAncestorContext.Provider value={appendChildrenRefs}>{children}</ClickAwayAncestorContext.Provider>;
+    const ancestorChildrenRefs = useContext(ClickAwayAncestorContext);
+
+    useEffect(() => {
+        const { current: currentRefs } = refs;
+        const { current: currentAncestorChildrenRefs } = ancestorChildrenRefs || {};
+        if (!currentAncestorChildrenRefs || !currentRefs) {
+            return undefined;
+        }
+        // Push current refs to parent.
+        currentAncestorChildrenRefs.push(...currentRefs);
+        return () => {
+            // Pull current refs from parent.
+            pull(currentAncestorChildrenRefs, ...currentRefs);
+        };
+    }, [ancestorChildrenRefs, refs]);
+
+    useClickAway({ callback, refs });
+    return <ClickAwayAncestorContext.Provider value={refs}>{children}</ClickAwayAncestorContext.Provider>;
 };
 ClickAwayProvider.displayName = 'ClickAwayProvider';

package/types.d.ts

@@ -152,16 +152,16 @@ export interface AlertDialogProps extends Omit<DialogProps, "header" | "footer">
 	kind?: Kind;
 	/** Dialog title. */
 	title?: string;
-	/** The props to the confirm button */
-	confirmProps: {
+	/** Props forwarded to the confirm button */
+	confirmProps: ButtonProps & {
 		onClick(): void;
 		label: string;
 	};
 	/**
-	 * The props to the cancel button.
+	 * Props forwarded to the cancel button.
 	 * Will not render a cancel button if undefined.
 	 */
-	cancelProps?: {
+	cancelProps?: ButtonProps & {
 		onClick(): void;
 		label: string;
 	};
@@ -240,6 +240,11 @@ export interface AutocompleteProps extends GenericProps {
 	 * @see {@link TextFieldProps#isDisabled}
 	 */
 	isDisabled?: boolean;
+	/**
+	 * Whether the component is required or not.
+	 * @see {@link TextFieldProps#isRequired}
+	 */
+	isRequired?: boolean;
 	/**
 	 * Whether the text field is displayed with valid style or not.
 	 * @see {@link TextFieldProps#isValid}
@@ -755,6 +760,8 @@ export interface DialogProps extends GenericProps {
 	dialogProps?: GenericProps;
 	/** On close callback. */
 	onClose?(): void;
+	/** Callback called when the open animation starts and the close animation finishes. */
+	onVisibilityChange?(isVisible: boolean): void;
 }
 export declare type DialogSizes = Extract<Size, "tiny" | "regular" | "big" | "huge">;
 /**
@@ -1473,6 +1480,8 @@ export interface MessageProps extends GenericProps {
 	hasBackground?: boolean;
 	/** Message variant. */
 	kind?: Kind;
+	/** Message custom icon SVG path. */
+	icon?: string;
 }
 /**
  * Message component.
@@ -2027,8 +2036,8 @@ export interface SlideshowControlsProps extends GenericProps {
 	activeIndex?: number;
 	/** Props to pass to the next button (minus those already set by the SlideshowControls props). */
 	nextButtonProps: Pick<IconButtonProps, "label"> & Omit<IconButtonProps, "label" | "onClick" | "icon" | "emphasis" | "color">;
-	/** Reference to the parent element. */
-	parentRef: RefObject<HTMLDivElement>;
+	/** Reference to the parent element on which we want to listen touch swipe. */
+	parentRef?: RefObject<HTMLDivElement> | HTMLDivElement;
 	/** Props to pass to the previous button (minus those already set by the SlideshowControls props). */
 	previousButtonProps: Pick<IconButtonProps, "label"> & Omit<IconButtonProps, "label" | "onClick" | "icon" | "emphasis" | "color">;
 	/** Number of slides. */
@@ -2036,11 +2045,11 @@ export interface SlideshowControlsProps extends GenericProps {
 	/** Theme adapting the component to light or dark background. */
 	theme?: Theme;
 	/** On next button click callback. */
-	onNextClick?(): void;
+	onNextClick?(loopback?: boolean): void;
 	/** On pagination change callback. */
 	onPaginationClick?(index: number): void;
 	/** On previous button click callback. */
-	onPreviousClick?(): void;
+	onPreviousClick?(loopback?: boolean): void;
 }
 /**
  * SlideshowControls component.

package/src/components/slideshow/useKeyOrSwipeNavigate.ts

@@ -1,37 +0,0 @@
-import { useEffect } from 'react';
-import { detectSwipe } from '@lumx/core/js/utils';
-
-/**
- * Listen keyboard and swipe to navigate left and right.
- */
-export function useKeyOrSwipeNavigate(
-    element?: HTMLElement | null,
-    onNext?: () => void,
-    onPrevious?: () => void,
-): void {
-    useEffect(() => {
-        if (!element) return undefined;
-
-        const onNavigate = (evt: KeyboardEvent | string) => {
-            let callback;
-            if (typeof evt === 'string' ? evt === 'right' : evt?.key === 'ArrowRight') {
-                callback = onPrevious;
-            } else if (typeof evt === 'string' ? evt === 'left' : evt?.key === 'ArrowLeft') {
-                callback = onNext;
-            }
-
-            callback?.();
-            if (callback && typeof evt !== 'string') {
-                evt.preventDefault();
-                evt.stopPropagation();
-            }
-        };
-
-        element.addEventListener('keydown', onNavigate);
-        const removeSwipeListeners = detectSwipe(element, onNavigate);
-        return () => {
-            element.removeEventListener('keydown', onNavigate);
-            removeSwipeListeners();
-        };
-    }, [onPrevious, onNext, element]);
-}