@lumx/react 3.0.1 → 3.0.2-alpha-react-utils.2

package/src/components/slideshow/useSlideFocusManagement.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect } from 'react';
+import { getFocusableElements } from '@lumx/react/utils/focus/getFocusableElements';
+
+export interface UseSlideFocusManagementProps {
+    isSlideDisplayed?: boolean;
+    slideRef: React.RefObject<HTMLDivElement>;
+}
+
+/**
+ * Classname set on elements whose focus was blocked.
+ * This is to easily find elements that have been tempered with,
+ * and not elements whose focus was already initially blocked.
+ * */
+const BLOCKED_FOCUS_CLASSNAME = `focus-blocked`;
+
+/**
+ * Manage how slides must behave when visible or not.
+ * When not visible, they should be hidden from screen readers and not focusable.
+ */
+export const useSlideFocusManagement = ({ isSlideDisplayed, slideRef }: UseSlideFocusManagementProps) => {
+    useEffect(() => {
+        const element = slideRef?.current;
+
+        if (!element) {
+            return undefined;
+        }
+
+        /**
+         * Display given slide to screen readers and, if focus was blocked, restore focus on elements.
+         */
+        const enableSlide = () => {
+            // Hide from screen readers
+            element.setAttribute('aria-hidden', 'false');
+            // Find elements we have blocked focus on
+            element.querySelectorAll(`.${BLOCKED_FOCUS_CLASSNAME}`).forEach((focusableElement) => {
+                focusableElement.removeAttribute('tabindex');
+                focusableElement.classList.remove(BLOCKED_FOCUS_CLASSNAME);
+            });
+        };
+
+        /**
+         * Hide given slide from screen readers and block focus on all focusable elements within.
+         */
+        const blockSlide = () => {
+            element.setAttribute('aria-hidden', 'true');
+            getFocusableElements(element).forEach((focusableElement) => {
+                focusableElement.setAttribute('tabindex', '-1');
+                focusableElement.classList.add(BLOCKED_FOCUS_CLASSNAME);
+            });
+        };
+
+        const handleDisplay = () => {
+            if (!element) {
+                return;
+            }
+            if (isSlideDisplayed) {
+                enableSlide();
+            } else {
+                blockSlide();
+            }
+        };
+
+        // Callback function to execute when mutations are observed
+        const callback: MutationCallback = (mutationsList) => {
+            if (element) {
+                for (const mutation of mutationsList) {
+                    if (mutation.type === 'childList') {
+                        handleDisplay();
+                    }
+                }
+            }
+        };
+
+        // Create an observer instance linked to the callback function
+        const observer = new MutationObserver(callback);
+
+        if (element) {
+            handleDisplay();
+
+            /** If slide is hidden, start observing for elements to block focus  */
+            if (!isSlideDisplayed) {
+                observer.observe(element, { attributes: true, childList: true, subtree: true });
+            }
+        }
+
+        return () => {
+            if (!isSlideDisplayed) {
+                observer.disconnect();
+            }
+        };
+    }, [isSlideDisplayed, slideRef]);
+};

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

@@ -7,7 +7,7 @@ import { build, oneOf } from 'test-data-bot';
 import without from 'lodash/without';
 
 import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Theme, Alignment } from '@lumx/react';
 import { Switch, SwitchProps } from './Switch';

package/src/components/switch/Switch.tsx

@@ -7,7 +7,8 @@ import isEmpty from 'lodash/isEmpty';
 
 import { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/table/Table.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/table/TableBody.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/table/TableCell.tsx

@@ -3,7 +3,9 @@ import React, { forwardRef, useCallback } from 'react';
 import classNames from 'classnames';
 
 import { Icon, Size } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, onEnterPressed, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { onEnterPressed } from '@lumx/react/utils/event';
 
 import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';
 

package/src/components/table/TableHeader.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/table/TableRow.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/tabs/Tab.test.tsx

@@ -1,6 +1,6 @@
 import { mdiCheck } from '@lumx/icons';
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';

package/src/components/tabs/Tab.tsx

@@ -1,6 +1,7 @@
 import { Icon, IconProps, Size } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 
 import classNames from 'classnames';
 import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, ReactNode, useCallback } from 'react';

package/src/components/tabs/TabList.test.tsx

@@ -1,7 +1,7 @@
 import { Tab, Alignment } from '@lumx/react';
 
 import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';

package/src/components/tabs/TabList.tsx

@@ -1,6 +1,7 @@
 import { Alignment, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import classNames from 'classnames';

package/src/components/tabs/TabPanel.tsx

@@ -1,6 +1,7 @@
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 
 import classNames from 'classnames';
 import React, { forwardRef } from 'react';

package/src/components/text/Text.stories.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { ColorPalette, ColorVariant, TypographyCustom, TypographyInterface } from '@lumx/react';
+import { Text } from './Text';
+
+export default { title: 'LumX components/text/Text' };
+
+export const Default = () => <Text as="p">Some text</Text>;
+
+const withResizableBox = (Story: any) => (
+    <div
+        style={{
+            width: 150,
+            height: 60,
+            border: '1px solid red',
+            resize: 'both',
+            overflow: 'hidden',
+        }}
+    >
+        <Story />
+    </div>
+);
+
+export const Truncate = () => (
+    <Text as="p" truncate>
+        Some very very very long text
+    </Text>
+);
+Truncate.decorators = [withResizableBox];
+
+export const TruncateMultiline = () => (
+    <Text as="p" truncate={{ lines: 2 }}>
+        Some very very very very very very very very very long text
+    </Text>
+);
+TruncateMultiline.decorators = [withResizableBox];
+
+export const AllTypography = () => {
+    const typographies = [undefined, ...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
+    return (
+        <table>
+            {typographies.map((typography) => (
+                <tr key={typography}>
+                    <td>{typography}</td>
+                    <td>
+                        <Text as="p" typography={typography}>
+                            Some text
+                        </Text>
+                    </td>
+                </tr>
+            ))}
+        </table>
+    );
+};
+
+export const AllColor = () => {
+    const colorVariants = [undefined, ...Object.values(ColorVariant)];
+    const colors = [undefined, ...Object.values(ColorPalette)];
+    return (
+        <table style={{ borderCollapse: 'separate', borderSpacing: 5 }}>
+            <tr>
+                <td />
+                {colorVariants.map((colorVariant) => (
+                    <td key={colorVariant}>{colorVariant}</td>
+                ))}
+            </tr>
+            {colors.map((color) => (
+                <tr key={color}>
+                    <td>{color}</td>
+                    {colorVariants.map((colorVariant) => (
+                        <td key={colorVariant}>
+                            <Text as="p" color={color} colorVariant={colorVariant}>
+                                Some text
+                            </Text>
+                        </td>
+                    ))}
+                </tr>
+            ))}
+        </table>
+    );
+};

package/src/components/text/Text.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { commonTestsSuite } from '@lumx/react/testing/utils';
+import { Text, TextProps } from './Text';
+
+const setup = (props: Partial<TextProps> = {}) => {
+    const wrapper = shallow(<Text as="span" {...props} />);
+    return { props, wrapper };
+};
+
+describe(`<${Text.displayName}>`, () => {
+    describe('Snapshots and structure', () => {
+        it('should render default', () => {
+            const { wrapper } = setup({ children: 'Some text' });
+            expect(wrapper).toHaveDisplayName('span');
+            expect(wrapper.prop('className')).toBe(Text.className);
+        });
+
+        it('should render with as', () => {
+            const { wrapper } = setup({ children: 'Some text', as: 'p' });
+            expect(wrapper).toHaveDisplayName('p');
+            expect(wrapper.prop('className')).toBe(Text.className);
+        });
+
+        it('should render with typography', () => {
+            const { wrapper } = setup({ typography: 'body2', children: 'Some text' });
+            expect(wrapper).toHaveDisplayName('span');
+            expect(wrapper).toHaveClassName('lumx-typography-body2');
+        });
+
+        it('should render with color', () => {
+            const { wrapper } = setup({ color: 'blue', children: 'Some text' });
+            expect(wrapper).toHaveDisplayName('span');
+            expect(wrapper).toHaveClassName('lumx-color-font-blue-N');
+        });
+
+        it('should render with color and variant', () => {
+            const { wrapper } = setup({ color: 'blue', colorVariant: 'D2', children: 'Some text' });
+            expect(wrapper).toHaveDisplayName('span');
+            expect(wrapper).toHaveClassName('lumx-color-font-blue-D2');
+        });
+
+        it('should render truncated', () => {
+            const { wrapper } = setup({ truncate: true });
+            expect(wrapper).toHaveDisplayName('span');
+            expect(wrapper).toHaveClassName('lumx-text--is-truncated');
+        });
+
+        it('should render truncated multiline', () => {
+            const { wrapper } = setup({ truncate: { lines: 2 } });
+            expect(wrapper).toHaveDisplayName('span');
+            expect(wrapper).toHaveClassName('lumx-text--is-truncated-multiline');
+            expect(wrapper).toHaveStyle({ '--lumx-text-truncate-lines': 2 });
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: Text.className });
+});

package/src/components/text/Text.tsx

@@ -0,0 +1,95 @@
+import React, { forwardRef } from 'react';
+
+import { Color, ColorVariant, Typography } from '@lumx/react';
+import { Comp, GenericProps, HeadingElement } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import classNames from 'classnames';
+
+type TextComponents = 'span' | 'p' | HeadingElement;
+
+/**
+ * Defines the props of the component.
+ */
+export interface TextProps extends GenericProps {
+    /**
+     * Color variant.
+     */
+    color?: Color;
+    /**
+     * Lightened or darkened variant of the selected color.
+     */
+    colorVariant?: ColorVariant;
+    /**
+     * Typography variant.
+     */
+    typography?: Typography;
+    /**
+     * Custom component to render the text.
+     */
+    as: TextComponents;
+    /**
+     * Control whether the text should truncate or not.
+     * Setting as `true` will make the text truncate on a single line.
+     * Setting as `{ lines: number }` will make the text truncate on a multiple lines.
+     */
+    truncate?: boolean | { lines: number };
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Text';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {} as const;
+
+/**
+ * Text component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Text: Comp<TextProps> = forwardRef((props, ref) => {
+    const { as, children, className, color, colorVariant, typography, truncate, style, ...forwardedProps } = props;
+
+    const Component = as as TextComponents;
+    const colorClass = color && `lumx-color-font-${color}-${colorVariant || ColorVariant.N}`;
+    const typographyClass = typography && `lumx-typography-${typography}`;
+
+    // Truncate mode
+    const truncateLinesStyle = typeof truncate === 'object' &&
+        truncate.lines > 1 && { '--lumx-text-truncate-lines': truncate.lines };
+    const isTruncatedMultiline = !!truncateLinesStyle;
+    const isTruncated = !!truncate;
+
+    return (
+        <Component
+            ref={ref as React.Ref<any>}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    prefix: CLASSNAME,
+                    isTruncated: isTruncated && !isTruncatedMultiline,
+                    isTruncatedMultiline,
+                }),
+                typographyClass,
+                colorClass,
+            )}
+            style={{ ...truncateLinesStyle, ...style }}
+            {...forwardedProps}
+        >
+            {children}
+        </Component>
+    );
+});
+Text.displayName = COMPONENT_NAME;
+Text.className = CLASSNAME;
+Text.defaultProps = DEFAULT_PROPS;

package/src/components/text/index.ts

@@ -0,0 +1 @@
+export * from './Text';

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

@@ -5,7 +5,7 @@ import 'jest-enzyme';
 import { build } from 'test-data-bot';
 
 import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Kind } from '@lumx/react';
 import { TextField, TextFieldProps } from './TextField';

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

@@ -6,7 +6,8 @@ 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, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 /**

package/src/components/thumbnail/Thumbnail.tsx

@@ -13,7 +13,8 @@ import classNames from 'classnames';
 
 import { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';
 
-import { Comp, Falsy, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { mdiImageBroken } from '@lumx/icons';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';

package/src/components/thumbnail/types.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AspectRatio, Size } from '@lumx/react';
-import { ValueOf } from '@lumx/react/utils';
+import { ValueOf } from '@lumx/react/utils/type';
 
 /**
  *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).

package/src/components/toolbar/Toolbar.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/tooltip/Tooltip.tsx

@@ -10,7 +10,8 @@ import { Placement } from '@lumx/react/components/popover/Popover';
 
 import { DOCUMENT } from '@lumx/react/constants';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import { useInjectTooltipRef } from './useInjectTooltipRef';

package/src/components/tooltip/useTooltipOpen.tsx

@@ -1,4 +1,4 @@
-import { onEscapePressed } from '@lumx/react/utils';
+import { onEscapePressed } from '@lumx/react/utils/event';
 import { useEffect, useState } from 'react';
 import { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';
 import { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';

package/src/components/uploader/Uploader.test.tsx

@@ -4,7 +4,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Uploader, UploaderProps } from './Uploader';
 

package/src/components/uploader/Uploader.tsx

@@ -3,7 +3,8 @@ import React, { forwardRef, MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
 import { AspectRatio, Icon, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Uploader variants.

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

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 import set from 'lodash/set';
 
 import { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { AvatarProps } from '../avatar/Avatar';
 

package/src/hooks/useCallbackOnEscape.ts

@@ -1,5 +1,6 @@
 import { DOCUMENT } from '@lumx/react/constants';
-import { Callback, onEscapePressed } from '@lumx/react/utils';
+import { Callback } from '@lumx/react/utils/type';
+import { onEscapePressed } from '@lumx/react/utils/event';
 import { useEffect } from 'react';
 import { Listener, makeListenerTowerContext } from '@lumx/react/utils/makeListenerTowerContext';
 

package/src/hooks/useClickAway.tsx

@@ -1,6 +1,6 @@
 import { RefObject, useEffect } from 'react';
 
-import { Falsy } from '@lumx/react/utils';
+import { Falsy } from '@lumx/react/utils/type';
 
 import isEmpty from 'lodash/isEmpty';
 

package/src/hooks/useDisableBodyScroll.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
-import { Falsy } from '@lumx/react/utils';
+import { Falsy } from '@lumx/react/utils/type';
 
 /**
  * Disables the scroll on the body to make it only usable in the current modal element.

package/src/hooks/useFocusTrap.ts

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 import { DOCUMENT } from '@lumx/react/constants';
 import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
-import { Falsy } from '@lumx/react/utils';
+import { Falsy } from '@lumx/react/utils/type';
 import { Listener, makeListenerTowerContext } from '@lumx/react/utils/makeListenerTowerContext';
 
 const FOCUS_TRAPS = makeListenerTowerContext();

package/src/hooks/useInterval.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 import isFunction from 'lodash/isFunction';
-import { Callback } from '../utils';
+import { Callback } from '@lumx/react/utils/type';
 
 /**
  * Making setInterval Declarative with React Hooks.

package/src/hooks/useOnResize.ts

@@ -1,4 +1,4 @@
-import { Callback, Falsy } from '@lumx/react/utils';
+import { Callback, Falsy } from '@lumx/react/utils/type';
 import { MutableRefObject, RefObject, useEffect, useRef } from 'react';
 import { WINDOW } from '@lumx/react/constants';
 import { ResizeObserver as Polyfill } from '@juggle/resize-observer';

package/src/hooks/useRovingTabIndex.tsx

@@ -4,6 +4,8 @@ interface UseRovingTabIndexOptions {
     parentRef: RefObject<HTMLElement>;
     elementSelector: string;
     keepTabIndex?: boolean;
+    /** Action to trigger when an element is focused using roving tab index */
+    onElementFocus?: (element: HTMLElement) => void;
     /** List of values to be used as extra dependencies of the useEffect */
     extraDependencies?: any[];
 }
@@ -12,6 +14,7 @@ export const useRovingTabIndex = ({
     parentRef,
     elementSelector,
     keepTabIndex,
+    onElementFocus,
     extraDependencies = [],
 }: UseRovingTabIndexOptions): void => {
     useEffect(
@@ -47,6 +50,12 @@ export const useRovingTabIndex = ({
                 }
                 const newElement = elements[newTabFocus];
                 newElement?.focus();
+
+                // When an element is focused using roving tab index, trigger the onElementFocus callback
+                if (newElement && onElementFocus) {
+                    onElementFocus(newElement);
+                }
+
                 if (keepTabIndex) {
                     (evt.currentTarget as HTMLElement).setAttribute('tabindex', '-1');
                     newElement?.setAttribute('tabindex', '0');