@lumx/react 2.2.20 → 2.2.22

package/src/components/skeleton/SkeletonRectangle.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React, { forwardRef } from 'react';
 
 import { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
 
 /**
  * Skeleton variants.
@@ -13,13 +13,11 @@ export type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;
 /**
  * Defines the props of the component.
  */
-export interface SkeletonRectangleProps extends GenericProps {
+export interface SkeletonRectangleProps extends GenericProps, HasTheme {
     /** Aspect ratio (use with width and not height). */
     aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;
     /** Height size. */
     height?: GlobalSize;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Border variant. */
     variant?: SkeletonRectangleVariant;
     /** Width size. */

package/src/components/skeleton/SkeletonTypography.tsx

@@ -2,14 +2,12 @@ import classNames from 'classnames';
 import React, { CSSProperties, forwardRef } from 'react';
 
 import { Theme, TypographyInterface, ColorPalette } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.
  */
-export interface SkeletonTypographyProps extends GenericProps {
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
+export interface SkeletonTypographyProps extends GenericProps, HasTheme {
     /** Typography variant. */
     typography: TypographyInterface;
     /** Width CSS property. */

package/src/components/slider/Slider.tsx

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
 
 import useEventCallback from '@lumx/react/hooks/useEventCallback';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 import { uid } from 'uid';
 import { clamp } from '@lumx/react/utils/clamp';
@@ -14,7 +14,7 @@ import { clamp } from '@lumx/react/utils/clamp';
 /**
  * Defines the props of the component.
  */
-export interface SliderProps extends GenericProps {
+export interface SliderProps extends GenericProps, HasTheme {
     /** Helper text. */
     helper?: string;
     /** Whether the min and max labels should be hidden or not. */
@@ -33,8 +33,6 @@ export interface SliderProps extends GenericProps {
     precision?: number;
     /** Range step value. */
     steps?: number;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Selected ranged value. */
     value: number;
     /** On change callback. */

package/src/components/slideshow/Slides.tsx

@@ -3,18 +3,13 @@ import React, { CSSProperties, forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
-import { Theme } from '@lumx/react';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
-export interface SlidesProps extends GenericProps {
+export interface SlidesProps extends GenericProps, HasTheme {
     /** current slide active */
     activeIndex: number;
     /** slides id to be added to the wrapper */
     id?: string;
-    /** custom classname */
-    className?: string;
-    /** custom theme */
-    theme?: Theme;
     /** Whether the automatic rotation of the slideshow is enabled or not. */
     autoPlay?: boolean;
     /** Whether the image has to fill its container height or not. */

package/src/components/slideshow/SlideshowControls.tsx

@@ -5,7 +5,7 @@ import range from 'lodash/range';
 
 import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 import { WINDOW } from '@lumx/react/constants';
 import { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
 
@@ -17,7 +17,7 @@ import { usePaginationVisibleRange } from './usePaginationVisibleRange';
 /**
  * Defines the props of the component.
  */
-export interface SlideshowControlsProps extends GenericProps {
+export interface SlideshowControlsProps extends GenericProps, HasTheme {
     /** Index of the current slide. */
     activeIndex?: number;
     /** Props to pass to the next button (minus those already set by the SlideshowControls props). */
@@ -30,8 +30,6 @@ export interface SlideshowControlsProps extends GenericProps {
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
     /** Number of slides. */
     slidesCount: number;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** On next button click callback. */
     onNextClick?(loopback?: boolean): void;
     /** On pagination change callback. */

package/src/components/switch/Switch.tsx

@@ -7,12 +7,12 @@ import isEmpty from 'lodash/isEmpty';
 
 import { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.
  */
-export interface SwitchProps extends GenericProps {
+export interface SwitchProps extends GenericProps, HasTheme {
     /** Helper text. */
     helper?: string;
     /** Whether it is checked or not. */
@@ -23,8 +23,6 @@ export interface SwitchProps extends GenericProps {
     name?: string;
     /** Position of the switch relative to the label. */
     position?: Extract<Alignment, 'right' | 'left'>;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Native input value property. */
     value?: string;
     /** On change callback. */

package/src/components/table/Table.tsx

@@ -4,18 +4,16 @@ import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 /**
  * Defines the props of the component.
  */
-export interface TableProps extends GenericProps {
+export interface TableProps extends GenericProps, HasTheme {
     /** Whether the table has checkbox or thumbnail on first cell or not. */
     hasBefore?: boolean;
     /** Whether the table has dividers or not. */
     hasDividers?: boolean;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
 }
 
 /**

package/src/components/tabs/TabList.tsx

@@ -1,6 +1,6 @@
 import { Alignment, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import classNames from 'classnames';
@@ -15,7 +15,7 @@ export enum TabListLayout {
 /**
  * Defines the props of the component.
  */
-export interface TabListProps extends GenericProps {
+export interface TabListProps extends GenericProps, HasTheme {
     /** ARIA label (purpose of the set of tabs). */
     ['aria-label']: string;
     /** Tab list. */
@@ -24,8 +24,6 @@ export interface TabListProps extends GenericProps {
     layout?: TabListLayout;
     /** Position of the tabs in the list (requires 'clustered' layout). */
     position?: Alignment;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
 }
 
 /**

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode, RefObject, SyntheticEvent, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, ReactNode, Ref, SyntheticEvent, useEffect, useMemo, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 import get from 'lodash/get';
@@ -6,13 +6,13 @@ 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 { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 /**
  * Defines the props of the component.
  */
-export interface TextFieldProps extends GenericProps {
+export interface TextFieldProps extends GenericProps, HasTheme {
     /** Chip Group to be rendered before the main text input. */
     chips?: HTMLElement | ReactNode;
     /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */
@@ -33,7 +33,7 @@ export interface TextFieldProps extends GenericProps {
     /** Native input id property (generated if not provided to link the label element). */
     id?: string;
     /** Reference to the <input> or <textarea> element. */
-    inputRef?: RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement>;
+    inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Whether the component is required or not. */
@@ -53,9 +53,7 @@ export interface TextFieldProps extends GenericProps {
     /** Placeholder text. */
     placeholder?: string;
     /** Reference to the wrapper. */
-    textFieldRef?: RefObject<HTMLDivElement>;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
+    textFieldRef?: Ref<HTMLDivElement>;
     /** Value. */
     value?: string;
     /** On blur callback. */
@@ -139,7 +137,7 @@ const useComputeNumberOfRows = (
 
 interface InputNativeProps {
     id?: string;
-    inputRef?: RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement>;
+    inputRef?: TextFieldProps['inputRef'];
     isDisabled?: boolean;
     isRequired?: boolean;
     multiline?: boolean;

package/src/components/thumbnail/Thumbnail.tsx

@@ -13,7 +13,7 @@ import classNames from 'classnames';
 
 import { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, Falsy, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 import { mdiImageBroken } from '@lumx/icons';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -26,7 +26,7 @@ type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
 /**
  * Defines the props of the component.
  */
-export interface ThumbnailProps extends GenericProps {
+export interface ThumbnailProps extends GenericProps, HasTheme {
     /** Alignment of the thumbnail in it's parent (requires flex parent). */
     align?: HorizontalAlignment;
     /** Image alternative text. */
@@ -34,7 +34,7 @@ export interface ThumbnailProps extends GenericProps {
     /** Image aspect ratio. */
     aspectRatio?: AspectRatio;
     /** Badge. */
-    badge?: ReactElement;
+    badge?: ReactElement | Falsy;
     /** Image cross origin resource policy. */
     crossOrigin?: ImgHTMLProps['crossOrigin'];
     /** Fallback icon (SVG path) or react node when image fails to load. */
@@ -59,8 +59,6 @@ export interface ThumbnailProps extends GenericProps {
     onClick?: MouseEventHandler<HTMLDivElement>;
     /** On key press callback. */
     onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Variant of the component. */
     variant?: ThumbnailVariant;
     /** Props to pass to the link wrapping the thumbnail. */

package/src/components/uploader/Uploader.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef, MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
 import { AspectRatio, Icon, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
 
 /**
  * Uploader variants.
@@ -23,7 +23,7 @@ export type UploaderSize = Extract<Size, 'xl' | 'xxl'>;
 /**
  * Defines the props of the component.
  */
-export interface UploaderProps extends GenericProps {
+export interface UploaderProps extends GenericProps, HasTheme {
     /** Image aspect ratio. */
     aspectRatio?: AspectRatio;
     /** Icon (SVG path). */
@@ -32,8 +32,6 @@ export interface UploaderProps extends GenericProps {
     label?: string;
     /** Size variant. */
     size?: UploaderSize;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** Variant. */
     variant?: UploaderVariant;
     /** On click callback. */

package/src/components/user-block/UserBlock.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import set from 'lodash/set';
 
 import { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
 
 import { AvatarProps } from '../avatar/Avatar';
 
@@ -16,7 +16,7 @@ export type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;
 /**
  * Defines the props of the component.
  */
-export interface UserBlockProps extends GenericProps {
+export interface UserBlockProps extends GenericProps, HasTheme {
     /** Props to pass to the avatar. */
     avatarProps?: Omit<AvatarProps, 'alt'>;
     /** Additional fields used to describe the user. */
@@ -37,8 +37,6 @@ export interface UserBlockProps extends GenericProps {
     simpleAction?: ReactNode;
     /** Size variant. */
     size?: UserBlockSize;
-    /** Theme adapting the component to light or dark background. */
-    theme?: Theme;
     /** On click callback. */
     onClick?(): void;
     /** On mouse enter callback. */

package/src/hooks/useClickAway.tsx

@@ -17,9 +17,9 @@ export interface ClickAwayParameters {
      */
     callback: EventListener | Falsy;
     /**
-     * Elements from which we want to detect the click away.
+     * Elements considered within the click away context (clicking outside them will trigger the click away callback).
      */
-    refs: RefObject<Array<RefObject<HTMLElement>>>;
+    childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;
 }
 
 /**
@@ -27,9 +27,9 @@ export interface ClickAwayParameters {
  *
  * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.
  */
-export function useClickAway({ callback, refs }: ClickAwayParameters): void {
+export function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {
     useEffect(() => {
-        const { current: currentRefs } = refs;
+        const { current: currentRefs } = childrenRefs;
         if (!callback || !currentRefs || isEmpty(currentRefs)) {
             return undefined;
         }
@@ -43,5 +43,5 @@ export function useClickAway({ callback, refs }: ClickAwayParameters): void {
         return () => {
             EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));
         };
-    }, [callback, refs]);
+    }, [callback, childrenRefs]);
 }

package/src/testing/utils/commonTestsSuite.ts

@@ -47,8 +47,8 @@ export function commonTestsSuite(
                 const wrappersToTest = isArray(tests.className)
                     ? tests.className
                     : [tests.className as string, tests.className as string];
-                expect(wrappers[wrappersToTest[0]]).toHaveClassName(params.className);
-                expect(wrappers[wrappersToTest[1]]).toHaveClassName(modifiedProps.className);
+                expect(wrappers[wrappersToTest[0]]).toHaveClassName(params.className as string);
+                expect(wrappers[wrappersToTest[1]]).toHaveClassName(modifiedProps.className as string);
             });
         }
 

package/src/utils/ClickAwayProvider/ClickAwayProvider.stories.jsx

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { Button } from '@lumx/react';
+import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
+import React, { useCallback, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+export default {
+    title: 'LumX components/ClickAwayProvider',
+    parameters: {
+        // Disables Chromatic snapshot (not relevant for this story).
+        chromatic: { disable: true },
+    },
+};
+
+// eslint-disable-next-line react/display-name
+const Card = React.forwardRef(({ top, children, close }, ref) => (
+    <ClickAwayProvider callback={close} childrenRefs={useRef([ref])}>
+        {createPortal(
+            <div
+                className="lumx-spacing-padding"
+                ref={ref}
+                style={{ position: 'absolute', top, border: '1px solid red' }}
+            >
+                {children}
+            </div>,
+            document.body,
+        )}
+    </ClickAwayProvider>
+));
+
+const ButtonWithCard = ({ level, parentRef }) => {
+    const ref3 = useRef();
+    const [isOpen3, setOpen3] = useState(false);
+    const open3 = useCallback(() => setOpen3(true), []);
+    const close3 = useCallback(() => setOpen3(false), []);
+    const nextLevel = level + 1;
+
+    return (
+        <>
+            Level {level} - <Button onClick={open3}>Open level {nextLevel}</Button>
+            {isOpen3 && (
+                <Card ref={ref3} close={close3} top={parentRef?.current?.getBoundingClientRect().bottom || '130px'}>
+                    {nextLevel === 4 ? `Level ${nextLevel}` : <ButtonWithCard level={nextLevel} parentRef={ref3} />}
+                </Card>
+            )}
+        </>
+    );
+};
+
+/**
+ * This story showcases the detection of click away inside a nested React portal tree (i.e. not nested in the DOM)
+ */
+export const NestedClickAway = () => (
+    <>
+        <p>Clicking inside a level should close all child levels but not parent levels</p>
+        <ButtonWithCard level={0} />
+    </>
+);

package/src/utils/ClickAwayProvider/ClickAwayProvider.tsx

@@ -1,33 +1,65 @@
-import React, { createContext, useContext, useEffect } from 'react';
-import pull from 'lodash/pull';
+import React, { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';
 import { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';
 
-const ClickAwayAncestorContext = createContext<ClickAwayParameters['refs'] | null>(null);
+interface ContextValue {
+    childrenRefs: Array<RefObject<HTMLElement>>;
+    addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;
+}
+
+const ClickAwayAncestorContext = createContext<ContextValue | null>(null);
+
+interface ClickAwayProviderProps extends ClickAwayParameters {
+    /**
+     * (Optional) Element that should be considered as part of the parent
+     */
+    parentRef?: RefObject<HTMLElement>;
+}
 
 /**
  * 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.
+ * we take into account both the DOM tree and the React tree to detect click away.
  *
  * @return the react component.
  */
-export const ClickAwayProvider: React.FC<ClickAwayParameters> = ({ children, callback, refs }) => {
-    const ancestorChildrenRefs = useContext(ClickAwayAncestorContext);
+export const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({
+    children,
+    callback,
+    childrenRefs,
+    parentRef,
+}) => {
+    const parentContext = useContext(ClickAwayAncestorContext);
+    const currentContext = useMemo(() => {
+        const context: ContextValue = {
+            childrenRefs: [],
+            /**
+             * Add element refs to the current context and propagate to the parent context.
+             */
+            addRefs(...newChildrenRefs) {
+                // Add element refs that should be considered as inside the click away context.
+                context.childrenRefs.push(...newChildrenRefs);
+
+                if (parentContext) {
+                    // Also add then to the parent context
+                    parentContext.addRefs(...newChildrenRefs);
+                    if (parentRef) {
+                        // The parent element is also considered as inside the parent click away context but not inside the current context
+                        parentContext.addRefs(parentRef);
+                    }
+                }
+            },
+        };
+        return context;
+    }, [parentContext, parentRef]);
 
     useEffect(() => {
-        const { current: currentRefs } = refs;
-        const { current: currentAncestorChildrenRefs } = ancestorChildrenRefs || {};
-        if (!currentAncestorChildrenRefs || !currentRefs) {
-            return undefined;
+        const { current: currentRefs } = childrenRefs;
+        if (!currentRefs) {
+            return;
         }
-        // Push current refs to parent.
-        currentAncestorChildrenRefs.push(...currentRefs);
-        return () => {
-            // Pull current refs from parent.
-            pull(currentAncestorChildrenRefs, ...currentRefs);
-        };
-    }, [ancestorChildrenRefs, refs]);
+        currentContext.addRefs(...currentRefs);
+    }, [currentContext, childrenRefs]);
 
-    useClickAway({ callback, refs });
-    return <ClickAwayAncestorContext.Provider value={refs}>{children}</ClickAwayAncestorContext.Provider>;
+    useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });
+    return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;
 };
 ClickAwayProvider.displayName = 'ClickAwayProvider';

package/src/utils/focus/getFirstAndLastFocusable.test.ts

@@ -124,5 +124,11 @@ describe(getFirstAndLastFocusable.name, () => {
             const focusable = getFirstAndLastFocusable(element);
             expect(focusable.first).toMatchInlineSnapshot(`<button />`);
         });
+
+        it('should skip hidden input', () => {
+            const element = htmlToElement(`<div><input hidden /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+        });
     });
 });

package/src/utils/focus/getFirstAndLastFocusable.ts

@@ -1,8 +1,8 @@
 /** CSS selector listing all tabbable elements. */
-const TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type="hidden"]), [tabindex]`;
+const TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type="hidden"]):not([hidden]), [tabindex]`;
 
 /** CSS selector matching element that are disabled (should not receive focus). */
-const DISABLED_SELECTOR = `[tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])`;
+const DISABLED_SELECTOR = `[hidden], [tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])`;
 
 const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);
 

package/src/utils/type.ts

@@ -1,5 +1,6 @@
 import get from 'lodash/get';
-import { ReactElement, ReactNode, Ref } from 'react';
+import React, { ReactElement, ReactNode, Ref } from 'react';
+import { Theme } from '@lumx/react';
 
 /** Get types of the values of a record. */
 export type ValueOf<T extends Record<any, any>> = T[keyof T];
@@ -34,13 +35,23 @@ export type Comp<P, T = HTMLElement> = {
 /** Union type of all heading elements */
 export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
+export interface HasTheme {
+    /**
+     * Theme adapting the component to light or dark background.
+     */
+    theme?: Theme;
+}
+
 /**
  * Define a generic props types.
  */
 export interface GenericProps {
+    /**
+     * Class name forwarded to the root element of the component.
+     */
+    className?: string;
     /**
      * Any prop (particularly any supported prop for a HTML element).
-     * E.g. classNames, onClick, disabled, ...
      */
     [propName: string]: any;
 }
@@ -66,6 +77,12 @@ export const isComponent = <C>(component: Comp<C, any> | string) => (instance: R
     );
 };
 
+/**
+ * Similar to `isComponent` but more precise as it's not based on the component `displayName` but on the component function reference.
+ */
+export const isComponentType = (type: ReactElement['type']) => (node: ReactNode): node is ReactElement =>
+    React.isValidElement(node) && node.type === type;
+
 /**
  * JS falsy values.
  * (excluding `NaN` as it can't be distinguished from `number`)