@lumx/react 2.2.18 → 2.2.19

package/esm/_internal/Tooltip2.js

@@ -211,20 +211,16 @@ var ARROW_SIZE = 8;
 var Tooltip = forwardRef(function (props, ref) {
   var _ref, _attributes$popper;
 
-  if (!DOCUMENT) {
-    // Can't render in SSR.
-    return null;
-  }
-
   var label = props.label,
       children = props.children,
       className = props.className,
       delay = props.delay,
       placement = props.placement,
       forceOpen = props.forceOpen,
-      forwardedProps = _objectWithoutProperties(props, ["label", "children", "className", "delay", "placement", "forceOpen"]);
+      forwardedProps = _objectWithoutProperties(props, ["label", "children", "className", "delay", "placement", "forceOpen"]); // Disable in SSR or without a label.
+
 
-  if (!label) {
+  if (!DOCUMENT || !label) {
     return React.createElement(React.Fragment, null, children);
   }
 

package/esm/_internal/Tooltip2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip2.js","sources":["../../../src/components/tooltip/useInjectTooltipRef.tsx","../../../src/utils/browserDoesNotSupportHover.ts","../../../src/components/tooltip/useTooltipOpen.tsx","../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport get from 'lodash/get';\nimport React, { cloneElement, ReactNode, useMemo } from 'react';\n\n/**\n * Add ref and ARIA attribute(s) in tooltip children or wrapped children.\n * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)\n * will be wrapped in a <span>.\n *\n * @param  children         Original tooltip anchor.\n * @param  setAnchorElement Set tooltip anchor element.\n * @param  isOpen           Whether the tooltip is open or not.\n * @param  id               Tooltip id.\n * @return tooltip anchor.\n */\nexport const useInjectTooltipRef = (\n    children: ReactNode,\n    setAnchorElement: (e: HTMLDivElement) => void,\n    isOpen: boolean,\n    id: string,\n): ReactNode => {\n    return useMemo(() => {\n        const ariaProps = { 'aria-describedby': isOpen ? id : undefined };\n        if (\n            children &&\n            get(children, '$$typeof') &&\n            get(children, 'props.disabled') !== true &&\n            get(children, 'props.isDisabled') !== true\n        ) {\n            const element = children as any;\n\n            return cloneElement(element, {\n                ...element.props,\n                ...ariaProps,\n                ref: mergeRefs(element.ref, setAnchorElement),\n            });\n        }\n        return (\n            <div className=\"lumx-tooltip-anchor-wrapper\" ref={setAnchorElement} {...ariaProps}>\n                {children}\n            </div>\n        );\n    }, [isOpen, id, children, setAnchorElement]);\n};\n","/** Return true if the browser does not support pointer hover */\nexport const browserDoesNotSupportHover = (): boolean => !!window.matchMedia?.('(hover: none)').matches;\n","import { onEscapePressed } from '@lumx/react/utils';\nimport { useEffect, useState } from 'react';\nimport { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';\nimport { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';\n\n/**\n * Hook controlling tooltip visibility using mouse hover the anchor and delay.\n *\n * @param  delay         Delay in millisecond to display the tooltip.\n * @param  anchorElement Tooltip anchor element.\n * @return whether or not to show the tooltip.\n */\nexport function useTooltipOpen(delay: number | undefined, anchorElement: HTMLElement | null): boolean {\n    const [isOpen, setIsOpen] = useState(false);\n\n    useEffect(() => {\n        if (!anchorElement) {\n            return undefined;\n        }\n        let timer: number | undefined;\n        let openStartTime: number | undefined;\n        let shouldOpen: boolean | undefined;\n\n        // Run timer to defer updating the isOpen state.\n        const deferUpdate = (duration: number) => {\n            if (timer) clearTimeout(timer);\n            timer = setTimeout(() => {\n                setIsOpen(!!shouldOpen);\n            }, duration) as any;\n        };\n\n        const hoverNotSupported = browserDoesNotSupportHover();\n        const hasTouch = 'ontouchstart' in window;\n\n        // Adapt open/close delay\n        const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);\n        const closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close;\n\n        // Open (or/and cancel closing) of tooltip.\n        const open = () => {\n            if (shouldOpen && !timer) return;\n            shouldOpen = true;\n            openStartTime = Date.now();\n            deferUpdate(openDelay);\n        };\n\n        // Close or cancel opening of tooltip\n        const close = (overrideDelay = closeDelay) => {\n            if (!shouldOpen && !timer) return;\n            shouldOpen = false;\n            deferUpdate(overrideDelay);\n        };\n        const closeImmediately = () => close(0);\n\n        /**\n         * Handle touchend event\n         * If `touchend` comes before the open delay => cancel tooltip (close immediate).\n         * Else if `touchend` comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.\n         */\n        const touchEnd = (evt: Event) => {\n            if (!openStartTime) return;\n            if (Date.now() - openStartTime >= openDelay) {\n                // Tooltip take priority, event prevented.\n                evt.stopPropagation();\n                evt.preventDefault();\n                anchorElement.focus();\n                // Close with delay.\n                close();\n            } else {\n                // Close immediately.\n                closeImmediately();\n            }\n        };\n\n        // Adapt event to browsers with or without `hover` support.\n        const events: Array<[Node, Event['type'], any]> = hoverNotSupported\n            ? [\n                  [anchorElement, hasTouch ? 'touchstart' : 'mousedown', open],\n                  [anchorElement, hasTouch ? 'touchend' : 'mouseup', touchEnd],\n              ]\n            : [\n                  [anchorElement, 'mouseenter', open],\n                  [anchorElement, 'mouseleave', close],\n                  [anchorElement, 'mouseup', closeImmediately],\n              ];\n\n        // Events always applied no matter the browser:.\n        events.push(\n            // Open on focus.\n            [anchorElement, 'focusin', open],\n            // Close on lost focus.\n            [anchorElement, 'focusout', closeImmediately],\n            // Close on ESC keydown\n            [anchorElement, 'keydown', onEscapePressed(closeImmediately)],\n        );\n\n        // Attach events\n        for (const [node, eventType, eventHandler] of events) {\n            node.addEventListener(eventType, eventHandler);\n        }\n        return () => {\n            // Clear pending timers.\n            if (timer) clearTimeout(timer);\n\n            // Detach events.\n            for (const [node, eventType, eventHandler] of events) {\n                node.removeEventListener(eventType, eventHandler);\n            }\n        };\n    }, [anchorElement, delay]);\n\n    return isOpen;\n}\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport React, { forwardRef, ReactNode, useMemo, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { uid } from 'uid';\n\nimport classNames from 'classnames';\n\nimport { Placement } from '@lumx/react/components/popover/Popover';\n\nimport { DOCUMENT } from '@lumx/react/constants';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport { useInjectTooltipRef } from './useInjectTooltipRef';\nimport { useTooltipOpen } from './useTooltipOpen';\n\n/** Position of the tooltip relative to the anchor element. */\nexport type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface TooltipProps extends GenericProps {\n    /** Anchor (element on which we activate the tooltip). */\n    children: ReactNode;\n    /** Delay (in ms) before closing the tooltip. */\n    delay?: number;\n    /** Whether the tooltip is displayed even without the mouse hovering the anchor. */\n    forceOpen?: boolean;\n    /** Label text. */\n    label?: string | null | false;\n    /** Placement of the tooltip relative to the anchor. */\n    placement?: TooltipPlacement;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tooltip';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TooltipProps> = {\n    placement: Placement.BOTTOM,\n};\n\n/**\n * Arrow size (in pixel).\n */\nconst ARROW_SIZE = 8;\n\n/**\n * Tooltip component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n    const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;\n    if (!label) {\n        return <>{children}</>;\n    }\n\n    const id = useMemo(() => `tooltip-${uid()}`, []);\n\n    const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);\n    const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);\n    const { styles, attributes } = usePopper(anchorElement, popperElement, {\n        placement,\n        modifiers: [\n            {\n                name: 'offset',\n                options: { offset: [0, ARROW_SIZE] },\n            },\n        ],\n    });\n\n    const position = attributes?.popper?.['data-popper-placement'] ?? placement;\n    const isOpen = useTooltipOpen(delay, anchorElement) || forceOpen;\n    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen as boolean, id);\n\n    return (\n        <>\n            {wrappedChildren}\n            {isOpen &&\n                createPortal(\n                    <div\n                        ref={mergeRefs(ref, setPopperElement)}\n                        {...forwardedProps}\n                        id={id}\n                        role=\"tooltip\"\n                        aria-label={label}\n                        className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, position }))}\n                        style={styles.popper}\n                        {...attributes.popper}\n                    >\n                        <div className={`${CLASSNAME}__arrow`} />\n                        <div className={`${CLASSNAME}__inner`}>\n                            {label.indexOf('\\n') !== -1\n                                ? label.split('\\n').map((sentence: string) => <p key={sentence}>{sentence}</p>)\n                                : label}\n                        </div>\n                    </div>,\n                    document.body,\n                )}\n        </>\n    );\n});\nTooltip.displayName = COMPONENT_NAME;\nTooltip.className = CLASSNAME;\nTooltip.defaultProps = DEFAULT_PROPS;\n"],"names":["useInjectTooltipRef","children","setAnchorElement","isOpen","id","useMemo","ariaProps","undefined","get","element","cloneElement","props","ref","mergeRefs","browserDoesNotSupportHover","window","matchMedia","matches","useTooltipOpen","delay","anchorElement","useState","setIsOpen","useEffect","timer","openStartTime","shouldOpen","deferUpdate","duration","clearTimeout","setTimeout","hoverNotSupported","hasTouch","openDelay","TOOLTIP_LONG_PRESS_DELAY","open","TOOLTIP_HOVER_DELAY","closeDelay","close","Date","now","overrideDelay","closeImmediately","touchEnd","evt","stopPropagation","preventDefault","focus","events","push","onEscapePressed","node","eventType","eventHandler","addEventListener","removeEventListener","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","placement","Placement","BOTTOM","ARROW_SIZE","Tooltip","forwardRef","DOCUMENT","label","className","forceOpen","forwardedProps","uid","popperElement","setPopperElement","usePopper","modifiers","name","options","offset","styles","attributes","position","popper","wrappedChildren","createPortal","classNames","handleBasicClasses","prefix","indexOf","split","map","sentence","document","body","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Tooltip2.js","sources":["../../../src/components/tooltip/useInjectTooltipRef.tsx","../../../src/utils/browserDoesNotSupportHover.ts","../../../src/components/tooltip/useTooltipOpen.tsx","../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport get from 'lodash/get';\nimport React, { cloneElement, ReactNode, useMemo } from 'react';\n\n/**\n * Add ref and ARIA attribute(s) in tooltip children or wrapped children.\n * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)\n * will be wrapped in a <span>.\n *\n * @param  children         Original tooltip anchor.\n * @param  setAnchorElement Set tooltip anchor element.\n * @param  isOpen           Whether the tooltip is open or not.\n * @param  id               Tooltip id.\n * @return tooltip anchor.\n */\nexport const useInjectTooltipRef = (\n    children: ReactNode,\n    setAnchorElement: (e: HTMLDivElement) => void,\n    isOpen: boolean,\n    id: string,\n): ReactNode => {\n    return useMemo(() => {\n        const ariaProps = { 'aria-describedby': isOpen ? id : undefined };\n        if (\n            children &&\n            get(children, '$$typeof') &&\n            get(children, 'props.disabled') !== true &&\n            get(children, 'props.isDisabled') !== true\n        ) {\n            const element = children as any;\n\n            return cloneElement(element, {\n                ...element.props,\n                ...ariaProps,\n                ref: mergeRefs(element.ref, setAnchorElement),\n            });\n        }\n        return (\n            <div className=\"lumx-tooltip-anchor-wrapper\" ref={setAnchorElement} {...ariaProps}>\n                {children}\n            </div>\n        );\n    }, [isOpen, id, children, setAnchorElement]);\n};\n","/** Return true if the browser does not support pointer hover */\nexport const browserDoesNotSupportHover = (): boolean => !!window.matchMedia?.('(hover: none)').matches;\n","import { onEscapePressed } from '@lumx/react/utils';\nimport { useEffect, useState } from 'react';\nimport { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';\nimport { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';\n\n/**\n * Hook controlling tooltip visibility using mouse hover the anchor and delay.\n *\n * @param  delay         Delay in millisecond to display the tooltip.\n * @param  anchorElement Tooltip anchor element.\n * @return whether or not to show the tooltip.\n */\nexport function useTooltipOpen(delay: number | undefined, anchorElement: HTMLElement | null): boolean {\n    const [isOpen, setIsOpen] = useState(false);\n\n    useEffect(() => {\n        if (!anchorElement) {\n            return undefined;\n        }\n        let timer: number | undefined;\n        let openStartTime: number | undefined;\n        let shouldOpen: boolean | undefined;\n\n        // Run timer to defer updating the isOpen state.\n        const deferUpdate = (duration: number) => {\n            if (timer) clearTimeout(timer);\n            timer = setTimeout(() => {\n                setIsOpen(!!shouldOpen);\n            }, duration) as any;\n        };\n\n        const hoverNotSupported = browserDoesNotSupportHover();\n        const hasTouch = 'ontouchstart' in window;\n\n        // Adapt open/close delay\n        const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);\n        const closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close;\n\n        // Open (or/and cancel closing) of tooltip.\n        const open = () => {\n            if (shouldOpen && !timer) return;\n            shouldOpen = true;\n            openStartTime = Date.now();\n            deferUpdate(openDelay);\n        };\n\n        // Close or cancel opening of tooltip\n        const close = (overrideDelay = closeDelay) => {\n            if (!shouldOpen && !timer) return;\n            shouldOpen = false;\n            deferUpdate(overrideDelay);\n        };\n        const closeImmediately = () => close(0);\n\n        /**\n         * Handle touchend event\n         * If `touchend` comes before the open delay => cancel tooltip (close immediate).\n         * Else if `touchend` comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.\n         */\n        const touchEnd = (evt: Event) => {\n            if (!openStartTime) return;\n            if (Date.now() - openStartTime >= openDelay) {\n                // Tooltip take priority, event prevented.\n                evt.stopPropagation();\n                evt.preventDefault();\n                anchorElement.focus();\n                // Close with delay.\n                close();\n            } else {\n                // Close immediately.\n                closeImmediately();\n            }\n        };\n\n        // Adapt event to browsers with or without `hover` support.\n        const events: Array<[Node, Event['type'], any]> = hoverNotSupported\n            ? [\n                  [anchorElement, hasTouch ? 'touchstart' : 'mousedown', open],\n                  [anchorElement, hasTouch ? 'touchend' : 'mouseup', touchEnd],\n              ]\n            : [\n                  [anchorElement, 'mouseenter', open],\n                  [anchorElement, 'mouseleave', close],\n                  [anchorElement, 'mouseup', closeImmediately],\n              ];\n\n        // Events always applied no matter the browser:.\n        events.push(\n            // Open on focus.\n            [anchorElement, 'focusin', open],\n            // Close on lost focus.\n            [anchorElement, 'focusout', closeImmediately],\n            // Close on ESC keydown\n            [anchorElement, 'keydown', onEscapePressed(closeImmediately)],\n        );\n\n        // Attach events\n        for (const [node, eventType, eventHandler] of events) {\n            node.addEventListener(eventType, eventHandler);\n        }\n        return () => {\n            // Clear pending timers.\n            if (timer) clearTimeout(timer);\n\n            // Detach events.\n            for (const [node, eventType, eventHandler] of events) {\n                node.removeEventListener(eventType, eventHandler);\n            }\n        };\n    }, [anchorElement, delay]);\n\n    return isOpen;\n}\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport React, { forwardRef, ReactNode, useMemo, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { uid } from 'uid';\n\nimport classNames from 'classnames';\n\nimport { Placement } from '@lumx/react/components/popover/Popover';\n\nimport { DOCUMENT } from '@lumx/react/constants';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport { useInjectTooltipRef } from './useInjectTooltipRef';\nimport { useTooltipOpen } from './useTooltipOpen';\n\n/** Position of the tooltip relative to the anchor element. */\nexport type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface TooltipProps extends GenericProps {\n    /** Anchor (element on which we activate the tooltip). */\n    children: ReactNode;\n    /** Delay (in ms) before closing the tooltip. */\n    delay?: number;\n    /** Whether the tooltip is displayed even without the mouse hovering the anchor. */\n    forceOpen?: boolean;\n    /** Label text. */\n    label?: string | null | false;\n    /** Placement of the tooltip relative to the anchor. */\n    placement?: TooltipPlacement;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tooltip';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TooltipProps> = {\n    placement: Placement.BOTTOM,\n};\n\n/**\n * Arrow size (in pixel).\n */\nconst ARROW_SIZE = 8;\n\n/**\n * Tooltip component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;\n    // Disable in SSR or without a label.\n    if (!DOCUMENT || !label) {\n        return <>{children}</>;\n    }\n\n    const id = useMemo(() => `tooltip-${uid()}`, []);\n\n    const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);\n    const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);\n    const { styles, attributes } = usePopper(anchorElement, popperElement, {\n        placement,\n        modifiers: [\n            {\n                name: 'offset',\n                options: { offset: [0, ARROW_SIZE] },\n            },\n        ],\n    });\n\n    const position = attributes?.popper?.['data-popper-placement'] ?? placement;\n    const isOpen = useTooltipOpen(delay, anchorElement) || forceOpen;\n    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen as boolean, id);\n\n    return (\n        <>\n            {wrappedChildren}\n            {isOpen &&\n                createPortal(\n                    <div\n                        ref={mergeRefs(ref, setPopperElement)}\n                        {...forwardedProps}\n                        id={id}\n                        role=\"tooltip\"\n                        aria-label={label}\n                        className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, position }))}\n                        style={styles.popper}\n                        {...attributes.popper}\n                    >\n                        <div className={`${CLASSNAME}__arrow`} />\n                        <div className={`${CLASSNAME}__inner`}>\n                            {label.indexOf('\\n') !== -1\n                                ? label.split('\\n').map((sentence: string) => <p key={sentence}>{sentence}</p>)\n                                : label}\n                        </div>\n                    </div>,\n                    document.body,\n                )}\n        </>\n    );\n});\nTooltip.displayName = COMPONENT_NAME;\nTooltip.className = CLASSNAME;\nTooltip.defaultProps = DEFAULT_PROPS;\n"],"names":["useInjectTooltipRef","children","setAnchorElement","isOpen","id","useMemo","ariaProps","undefined","get","element","cloneElement","props","ref","mergeRefs","browserDoesNotSupportHover","window","matchMedia","matches","useTooltipOpen","delay","anchorElement","useState","setIsOpen","useEffect","timer","openStartTime","shouldOpen","deferUpdate","duration","clearTimeout","setTimeout","hoverNotSupported","hasTouch","openDelay","TOOLTIP_LONG_PRESS_DELAY","open","TOOLTIP_HOVER_DELAY","closeDelay","close","Date","now","overrideDelay","closeImmediately","touchEnd","evt","stopPropagation","preventDefault","focus","events","push","onEscapePressed","node","eventType","eventHandler","addEventListener","removeEventListener","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","placement","Placement","BOTTOM","ARROW_SIZE","Tooltip","forwardRef","label","className","forceOpen","forwardedProps","DOCUMENT","uid","popperElement","setPopperElement","usePopper","modifiers","name","options","offset","styles","attributes","position","popper","wrappedChildren","createPortal","classNames","handleBasicClasses","prefix","indexOf","split","map","sentence","document","body","displayName","defaultProps"],"mappings":";;;;;;;;;;AAIA;;;;;;;;;;;;AAWO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAC/BC,QAD+B,EAE/BC,gBAF+B,EAG/BC,MAH+B,EAI/BC,EAJ+B,EAKnB;AACZ,SAAOC,OAAO,CAAC,YAAM;AACjB,QAAMC,SAAS,GAAG;AAAE,0BAAoBH,MAAM,GAAGC,EAAH,GAAQG;AAApC,KAAlB;;AACA,QACIN,QAAQ,IACRO,GAAG,CAACP,QAAD,EAAW,UAAX,CADH,IAEAO,GAAG,CAACP,QAAD,EAAW,gBAAX,CAAH,KAAoC,IAFpC,IAGAO,GAAG,CAACP,QAAD,EAAW,kBAAX,CAAH,KAAsC,IAJ1C,EAKE;AACE,UAAMQ,OAAO,GAAGR,QAAhB;AAEA,aAAOS,YAAY,CAACD,OAAD,qBACZA,OAAO,CAACE,KADI,MAEZL,SAFY;AAGfM,QAAAA,GAAG,EAAEC,SAAS,CAACJ,OAAO,CAACG,GAAT,EAAcV,gBAAd;AAHC,SAAnB;AAKH;;AACD,WACI;AAAK,MAAA,SAAS,EAAC,6BAAf;AAA6C,MAAA,GAAG,EAAEA;AAAlD,OAAwEI,SAAxE,GACKL,QADL,CADJ;AAKH,GArBa,EAqBX,CAACE,MAAD,EAASC,EAAT,EAAaH,QAAb,EAAuBC,gBAAvB,CArBW,CAAd;AAsBH,CA5BM;;ACfP;AACO,IAAMY,0BAA0B,GAAG,SAA7BA,0BAA6B;AAAA;;AAAA,SAAe,CAAC,wBAAC,WAAAC,MAAM,EAACC,UAAR,uDAAC,iCAAoB,eAApB,EAAqCC,OAAtC,CAAhB;AAAA,CAAnC;;ACIP;;;;;;;;AAOO,SAASC,cAAT,CAAwBC,KAAxB,EAAmDC,aAAnD,EAA+F;AAAA,kBACtEC,QAAQ,CAAC,KAAD,CAD8D;AAAA;AAAA,MAC3FlB,MAD2F;AAAA,MACnFmB,SADmF;;AAGlGC,EAAAA,SAAS,CAAC,YAAM;AACZ,QAAI,CAACH,aAAL,EAAoB;AAChB,aAAOb,SAAP;AACH;;AACD,QAAIiB,KAAJ;AACA,QAAIC,aAAJ;AACA,QAAIC,UAAJ,CANY;;AASZ,QAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,QAAD,EAAsB;AACtC,UAAIJ,KAAJ,EAAWK,YAAY,CAACL,KAAD,CAAZ;AACXA,MAAAA,KAAK,GAAGM,UAAU,CAAC,YAAM;AACrBR,QAAAA,SAAS,CAAC,CAAC,CAACI,UAAH,CAAT;AACH,OAFiB,EAEfE,QAFe,CAAlB;AAGH,KALD;;AAOA,QAAMG,iBAAiB,GAAGjB,0BAA0B,EAApD;AACA,QAAMkB,QAAQ,GAAG,kBAAkBjB,MAAnC,CAjBY;;AAoBZ,QAAMkB,SAAS,GAAGd,KAAK,KAAKY,iBAAiB,GAAGG,wBAAwB,CAACC,IAA5B,GAAmCC,mBAAmB,CAACD,IAA7E,CAAvB;AACA,QAAME,UAAU,GAAGN,iBAAiB,GAAGG,wBAAwB,CAACI,KAA5B,GAAoCF,mBAAmB,CAACE,KAA5F,CArBY;;AAwBZ,QAAMH,IAAI,GAAG,SAAPA,IAAO,GAAM;AACf,UAAIT,UAAU,IAAI,CAACF,KAAnB,EAA0B;AAC1BE,MAAAA,UAAU,GAAG,IAAb;AACAD,MAAAA,aAAa,GAAGc,IAAI,CAACC,GAAL,EAAhB;AACAb,MAAAA,WAAW,CAACM,SAAD,CAAX;AACH,KALD,CAxBY;;;AAgCZ,QAAMK,KAAK,GAAG,SAARA,KAAQ,GAAgC;AAAA,UAA/BG,aAA+B,uEAAfJ,UAAe;AAC1C,UAAI,CAACX,UAAD,IAAe,CAACF,KAApB,EAA2B;AAC3BE,MAAAA,UAAU,GAAG,KAAb;AACAC,MAAAA,WAAW,CAACc,aAAD,CAAX;AACH,KAJD;;AAKA,QAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,aAAMJ,KAAK,CAAC,CAAD,CAAX;AAAA,KAAzB;AAEA;;;;;;;AAKA,QAAMK,QAAQ,GAAG,SAAXA,QAAW,CAACC,GAAD,EAAgB;AAC7B,UAAI,CAACnB,aAAL,EAAoB;;AACpB,UAAIc,IAAI,CAACC,GAAL,KAAaf,aAAb,IAA8BQ,SAAlC,EAA6C;AACzC;AACAW,QAAAA,GAAG,CAACC,eAAJ;AACAD,QAAAA,GAAG,CAACE,cAAJ;AACA1B,QAAAA,aAAa,CAAC2B,KAAd,GAJyC;;AAMzCT,QAAAA,KAAK;AACR,OAPD,MAOO;AACH;AACAI,QAAAA,gBAAgB;AACnB;AACJ,KAbD,CA5CY;;;AA4DZ,QAAMM,MAAyC,GAAGjB,iBAAiB,GAC7D,CACI,CAACX,aAAD,EAAgBY,QAAQ,GAAG,YAAH,GAAkB,WAA1C,EAAuDG,IAAvD,CADJ,EAEI,CAACf,aAAD,EAAgBY,QAAQ,GAAG,UAAH,GAAgB,SAAxC,EAAmDW,QAAnD,CAFJ,CAD6D,GAK7D,CACI,CAACvB,aAAD,EAAgB,YAAhB,EAA8Be,IAA9B,CADJ,EAEI,CAACf,aAAD,EAAgB,YAAhB,EAA8BkB,KAA9B,CAFJ,EAGI,CAAClB,aAAD,EAAgB,SAAhB,EAA2BsB,gBAA3B,CAHJ,CALN,CA5DY;;AAwEZM,IAAAA,MAAM,CAACC,IAAP;AAEI,KAAC7B,aAAD,EAAgB,SAAhB,EAA2Be,IAA3B,CAFJ;AAII,KAACf,aAAD,EAAgB,UAAhB,EAA4BsB,gBAA5B,CAJJ;AAMI,KAACtB,aAAD,EAAgB,SAAhB,EAA2B8B,eAAe,CAACR,gBAAD,CAA1C,CANJ,EAxEY;;AAkFZ,+BAA8CM,MAA9C,6BAAsD;AAAA;AAAA,UAA1CG,IAA0C;AAAA,UAApCC,SAAoC;AAAA,UAAzBC,YAAyB;;AAClDF,MAAAA,IAAI,CAACG,gBAAL,CAAsBF,SAAtB,EAAiCC,YAAjC;AACH;;AACD,WAAO,YAAM;AACT;AACA,UAAI7B,KAAJ,EAAWK,YAAY,CAACL,KAAD,CAAZ,CAFF;;AAAA;AAAA;AAAA;;AAAA;AAKT,6BAA8CwB,MAA9C,8HAAsD;AAAA;AAAA,cAA1CG,IAA0C;AAAA,cAApCC,SAAoC;AAAA,cAAzBC,YAAyB;;AAClDF,UAAAA,IAAI,CAACI,mBAAL,CAAyBH,SAAzB,EAAoCC,YAApC;AACH;AAPQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQZ,KARD;AASH,GA9FQ,EA8FN,CAACjC,aAAD,EAAgBD,KAAhB,CA9FM,CAAT;AAgGA,SAAOhB,MAAP;AACH;;AC9FD;;AAmBA;;;AAGA,IAAMqD,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAoC,GAAG;AACzCC,EAAAA,SAAS,EAAEC,SAAS,CAACC;AADoB,CAA7C;AAIA;;;;AAGA,IAAMC,UAAU,GAAG,CAAnB;AAEA;;;;;;;;IAOaC,OAA2C,GAAGC,UAAU,CAAC,UAACtD,KAAD,EAAQC,GAAR,EAAgB;AAAA;;AAAA,MAC1EsD,KAD0E,GACKvD,KADL,CAC1EuD,KAD0E;AAAA,MACnEjE,QADmE,GACKU,KADL,CACnEV,QADmE;AAAA,MACzDkE,SADyD,GACKxD,KADL,CACzDwD,SADyD;AAAA,MAC9ChD,KAD8C,GACKR,KADL,CAC9CQ,KAD8C;AAAA,MACvCyC,SADuC,GACKjD,KADL,CACvCiD,SADuC;AAAA,MAC5BQ,SAD4B,GACKzD,KADL,CAC5ByD,SAD4B;AAAA,MACdC,cADc,4BACK1D,KADL;;;AAGlF,MAAI,CAAC2D,QAAD,IAAa,CAACJ,KAAlB,EAAyB;AACrB,WAAO,0CAAGjE,QAAH,CAAP;AACH;;AAED,MAAMG,EAAE,GAAGC,OAAO,CAAC;AAAA,6BAAiBkE,GAAG,EAApB;AAAA,GAAD,EAA2B,EAA3B,CAAlB;;AAPkF,kBASxClD,QAAQ,CAAqB,IAArB,CATgC;AAAA;AAAA,MAS3EmD,aAT2E;AAAA,MAS5DC,gBAT4D;;AAAA,mBAUxCpD,QAAQ,CAAqB,IAArB,CAVgC;AAAA;AAAA,MAU3ED,aAV2E;AAAA,MAU5DlB,gBAV4D;;AAAA,mBAWnDwE,SAAS,CAACtD,aAAD,EAAgBoD,aAAhB,EAA+B;AACnEZ,IAAAA,SAAS,EAATA,SADmE;AAEnEe,IAAAA,SAAS,EAAE,CACP;AACIC,MAAAA,IAAI,EAAE,QADV;AAEIC,MAAAA,OAAO,EAAE;AAAEC,QAAAA,MAAM,EAAE,CAAC,CAAD,EAAIf,UAAJ;AAAV;AAFb,KADO;AAFwD,GAA/B,CAX0C;AAAA,MAW1EgB,MAX0E,cAW1EA,MAX0E;AAAA,MAWlEC,UAXkE,cAWlEA,UAXkE;;AAqBlF,MAAMC,QAAQ,WAAGD,UAAH,aAAGA,UAAH,6CAAGA,UAAU,CAAEE,MAAf,uDAAG,mBAAqB,uBAArB,CAAH,uCAAoDtB,SAAlE;AACA,MAAMzD,MAAM,GAAGe,cAAc,CAACC,KAAD,EAAQC,aAAR,CAAd,IAAwCgD,SAAvD;AACA,MAAMe,eAAe,GAAGnF,mBAAmB,CAACC,QAAD,EAAWC,gBAAX,EAA6BC,MAA7B,EAAgDC,EAAhD,CAA3C;AAEA,SACI,0CACK+E,eADL,EAEKhF,MAAM,IACHiF,YAAY,CACR;AACI,IAAA,GAAG,EAAEvE,SAAS,CAACD,GAAD,EAAM6D,gBAAN;AADlB,KAEQJ,cAFR;AAGI,IAAA,EAAE,EAAEjE,EAHR;AAII,IAAA,IAAI,EAAC,SAJT;AAKI,kBAAY8D,KALhB;AAMI,IAAA,SAAS,EAAEmB,UAAU,CAAClB,SAAD,EAAYmB,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE9B,SAAV;AAAqBwB,MAAAA,QAAQ,EAARA;AAArB,KAAD,CAA9B,CANzB;AAOI,IAAA,KAAK,EAAEF,MAAM,CAACG;AAPlB,KAQQF,UAAU,CAACE,MARnB,GAUI;AAAK,IAAA,SAAS,YAAKzB,SAAL;AAAd,IAVJ,EAWI;AAAK,IAAA,SAAS,YAAKA,SAAL;AAAd,KACKS,KAAK,CAACsB,OAAN,CAAc,IAAd,MAAwB,CAAC,CAAzB,GACKtB,KAAK,CAACuB,KAAN,CAAY,IAAZ,EAAkBC,GAAlB,CAAsB,UAACC,QAAD;AAAA,WAAsB;AAAG,MAAA,GAAG,EAAEA;AAAR,OAAmBA,QAAnB,CAAtB;AAAA,GAAtB,CADL,GAEKzB,KAHV,CAXJ,CADQ,EAkBR0B,QAAQ,CAACC,IAlBD,CAHpB,CADJ;AA0BH,CAnDoE;AAoDrE7B,OAAO,CAAC8B,WAAR,GAAsBtC,cAAtB;AACAQ,OAAO,CAACG,SAAR,GAAoBV,SAApB;AACAO,OAAO,CAAC+B,YAAR,GAAuBpC,aAAvB;;;;"}

package/esm/_internal/UserBlock.js

@@ -5,6 +5,7 @@ import { g as getRootClassName, c as classnames, h as handleBasicClasses } from
 import isEmpty from 'lodash/isEmpty';
 import { A as Avatar } from './Avatar2.js';
 import { L as Link } from './Link2.js';
+import set from 'lodash/set';
 
 /**
  * Component display name.
@@ -77,10 +78,15 @@ var UserBlock = forwardRef(function (props, ref) {
         linkAs: linkAs,
         color: ColorPalette.dark
       }));
+    } // Disable avatar focus since the name block is the same link / same button.
+
+
+    if (avatarProps) {
+      set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);
     }
 
     return React.createElement(NameComponent, nProps, name);
-  }, [isClickable, linkAs, linkProps, name, nameProps, onClick]);
+  }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
   var fieldsBlock = fields && componentSize !== Size.s && React.createElement("div", {
     className: "".concat(CLASSNAME, "__fields")
   }, fields.map(function (field, idx) {
@@ -103,7 +109,8 @@ var UserBlock = forwardRef(function (props, ref) {
     onMouseEnter: onMouseEnter
   }), avatarProps && React.createElement(Avatar, _extends({
     linkAs: linkAs,
-    linkProps: linkProps
+    linkProps: linkProps,
+    alt: ""
   }, avatarProps, {
     className: classnames("".concat(CLASSNAME, "__avatar"), avatarProps.className),
     size: componentSize,

package/esm/_internal/UserBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserBlock.js","sources":["../../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\nimport isEmpty from 'lodash/isEmpty';\nimport classNames from 'classnames';\n\nimport { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps {\n    /** Props to pass to the avatar. */\n    avatarProps?: AvatarProps;\n    /** Additional fields used to describe the user. */\n    fields?: string[];\n    /** Props to pass to the link wrapping the avatar thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Multiple action toolbar content. */\n    multipleActions?: ReactNode;\n    /** User name. */\n    name?: string;\n    /** Props to pass to the name block. */\n    nameProps?: GenericProps;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Simple action toolbar content. */\n    simpleAction?: ReactNode;\n    /** Size variant. */\n    size?: UserBlockSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** On click callback. */\n    onClick?(): void;\n    /** On mouse enter callback. */\n    onMouseEnter?(): void;\n    /** On mouse leave callback. */\n    onMouseLeave?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<UserBlockProps> = {\n    orientation: Orientation.horizontal,\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * UserBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        avatarProps,\n        className,\n        fields,\n        linkProps,\n        linkAs,\n        multipleActions,\n        name,\n        nameProps,\n        onClick,\n        onMouseEnter,\n        onMouseLeave,\n        orientation,\n        simpleAction,\n        size,\n        theme,\n        ...forwardedProps\n    } = props;\n    let componentSize = size;\n\n    // Special case - When using vertical orientation force the size to be Sizes.l.\n    if (orientation === Orientation.vertical) {\n        componentSize = Size.l;\n    }\n\n    const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n    const isLink = Boolean(linkProps?.href || linkAs);\n    const isClickable = !!onClick || isLink;\n\n    const nameBlock: ReactNode = React.useMemo(() => {\n        if (isEmpty(name)) {\n            return null;\n        }\n        let NameComponent: any = 'span';\n        const nProps: any = {\n            ...nameProps,\n            className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className),\n        };\n        if (isClickable) {\n            NameComponent = Link;\n            Object.assign(nProps, {\n                ...linkProps,\n                onClick,\n                linkAs,\n                color: ColorPalette.dark,\n            });\n        }\n        return <NameComponent {...nProps}>{name}</NameComponent>;\n    }, [isClickable, linkAs, linkProps, name, nameProps, onClick]);\n\n    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (\n        <div className={`${CLASSNAME}__fields`}>\n            {fields.map((field: string, idx: number) => (\n                <span key={idx} className={`${CLASSNAME}__field`}>\n                    {field}\n                </span>\n            ))}\n        </div>\n    );\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),\n            )}\n            onMouseLeave={onMouseLeave}\n            onMouseEnter={onMouseEnter}\n        >\n            {avatarProps && (\n                <Avatar\n                    linkAs={linkAs}\n                    linkProps={linkProps}\n                    {...avatarProps}\n                    className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}\n                    size={componentSize}\n                    onClick={onClick}\n                    theme={theme}\n                />\n            )}\n            {(fields || name) && (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {nameBlock}\n                    {fieldsBlock}\n                </div>\n            )}\n            {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n            {shouldDisplayActions && multipleActions && (\n                <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n            )}\n        </div>\n    );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","theme","Theme","light","UserBlock","forwardRef","props","ref","avatarProps","className","fields","linkProps","linkAs","multipleActions","name","nameProps","onClick","onMouseEnter","onMouseLeave","simpleAction","forwardedProps","componentSize","vertical","l","shouldDisplayActions","isLink","Boolean","href","isClickable","nameBlock","React","useMemo","isEmpty","NameComponent","nProps","classNames","Link","Object","assign","color","ColorPalette","dark","fieldsBlock","s","map","field","idx","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":";;;;;;;;AAgDA;;;AAGA,IAAMA,cAAc,GAAG,WAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAsC,GAAG;AAC3CC,EAAAA,WAAW,EAAEC,WAAW,CAACC,UADkB;AAE3CC,EAAAA,IAAI,EAAEC,IAAI,CAACC,CAFgC;AAG3CC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AAH8B,CAA/C;AAMA;;;;;;;;IAOaC,SAA+C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAElFC,WAFkF,GAkBlFF,KAlBkF,CAElFE,WAFkF;AAAA,MAGlFC,SAHkF,GAkBlFH,KAlBkF,CAGlFG,SAHkF;AAAA,MAIlFC,MAJkF,GAkBlFJ,KAlBkF,CAIlFI,MAJkF;AAAA,MAKlFC,SALkF,GAkBlFL,KAlBkF,CAKlFK,SALkF;AAAA,MAMlFC,MANkF,GAkBlFN,KAlBkF,CAMlFM,MANkF;AAAA,MAOlFC,eAPkF,GAkBlFP,KAlBkF,CAOlFO,eAPkF;AAAA,MAQlFC,IARkF,GAkBlFR,KAlBkF,CAQlFQ,IARkF;AAAA,MASlFC,SATkF,GAkBlFT,KAlBkF,CASlFS,SATkF;AAAA,MAUlFC,OAVkF,GAkBlFV,KAlBkF,CAUlFU,OAVkF;AAAA,MAWlFC,YAXkF,GAkBlFX,KAlBkF,CAWlFW,YAXkF;AAAA,MAYlFC,YAZkF,GAkBlFZ,KAlBkF,CAYlFY,YAZkF;AAAA,MAalFvB,WAbkF,GAkBlFW,KAlBkF,CAalFX,WAbkF;AAAA,MAclFwB,YAdkF,GAkBlFb,KAlBkF,CAclFa,YAdkF;AAAA,MAelFrB,IAfkF,GAkBlFQ,KAlBkF,CAelFR,IAfkF;AAAA,MAgBlFG,KAhBkF,GAkBlFK,KAlBkF,CAgBlFL,KAhBkF;AAAA,MAiB/EmB,cAjB+E,4BAkBlFd,KAlBkF;;AAmBtF,MAAIe,aAAa,GAAGvB,IAApB,CAnBsF;;AAsBtF,MAAIH,WAAW,KAAKC,WAAW,CAAC0B,QAAhC,EAA0C;AACtCD,IAAAA,aAAa,GAAGtB,IAAI,CAACwB,CAArB;AACH;;AAED,MAAMC,oBAA6B,GAAG7B,WAAW,KAAKC,WAAW,CAAC0B,QAAlE;AAEA,MAAMG,MAAM,GAAGC,OAAO,CAAC,CAAAf,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEgB,IAAX,KAAmBf,MAApB,CAAtB;AACA,MAAMgB,WAAW,GAAG,CAAC,CAACZ,OAAF,IAAaS,MAAjC;AAEA,MAAMI,SAAoB,GAAGC,KAAK,CAACC,OAAN,CAAc,YAAM;AAC7C,QAAIC,OAAO,CAAClB,IAAD,CAAX,EAAmB;AACf,aAAO,IAAP;AACH;;AACD,QAAImB,aAAkB,GAAG,MAAzB;;AACA,QAAMC,MAAW,sBACVnB,SADU;AAEbN,MAAAA,SAAS,EAAE0B,UAAU,WAAI3C,SAAJ,aAAuBmB,SAAvB,aAAuBA,SAAvB,uBAAuBA,SAAS,CAAEF,SAAlC,EAA6CM,SAA7C,aAA6CA,SAA7C,uBAA6CA,SAAS,CAAEN,SAAxD;AAFR,MAAjB;;AAIA,QAAImB,WAAJ,EAAiB;AACbK,MAAAA,aAAa,GAAGG,IAAhB;AACAC,MAAAA,MAAM,CAACC,MAAP,CAAcJ,MAAd,qBACOvB,SADP;AAEIK,QAAAA,OAAO,EAAPA,OAFJ;AAGIJ,QAAAA,MAAM,EAANA,MAHJ;AAII2B,QAAAA,KAAK,EAAEC,YAAY,CAACC;AAJxB;AAMH;;AACD,WAAO,oBAAC,aAAD,EAAmBP,MAAnB,EAA4BpB,IAA5B,CAAP;AACH,GAnB4B,EAmB1B,CAACc,WAAD,EAAchB,MAAd,EAAsBD,SAAtB,EAAiCG,IAAjC,EAAuCC,SAAvC,EAAkDC,OAAlD,CAnB0B,CAA7B;AAqBA,MAAM0B,WAAsB,GAAGhC,MAAM,IAAIW,aAAa,KAAKtB,IAAI,CAAC4C,CAAjC,IAC3B;AAAK,IAAA,SAAS,YAAKnD,SAAL;AAAd,KACKkB,MAAM,CAACkC,GAAP,CAAW,UAACC,KAAD,EAAgBC,GAAhB;AAAA,WACR;AAAM,MAAA,GAAG,EAAEA,GAAX;AAAgB,MAAA,SAAS,YAAKtD,SAAL;AAAzB,OACKqD,KADL,CADQ;AAAA,GAAX,CADL,CADJ;AAUA,SACI;AACI,IAAA,GAAG,EAAEtC;AADT,KAEQa,cAFR;AAGI,IAAA,SAAS,EAAEe,UAAU,CACjB1B,SADiB,EAEjBsC,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAExD,SAAV;AAAqBG,MAAAA,WAAW,EAAXA,WAArB;AAAkCG,MAAAA,IAAI,EAAEuB,aAAxC;AAAuDpB,MAAAA,KAAK,EAALA,KAAvD;AAA8D2B,MAAAA,WAAW,EAAXA;AAA9D,KAAD,CAFD,CAHzB;AAOI,IAAA,YAAY,EAAEV,YAPlB;AAQI,IAAA,YAAY,EAAED;AARlB,MAUKT,WAAW,IACR,oBAAC,MAAD;AACI,IAAA,MAAM,EAAEI,MADZ;AAEI,IAAA,SAAS,EAAED;AAFf,KAGQH,WAHR;AAII,IAAA,SAAS,EAAE2B,UAAU,WAAI3C,SAAJ,eAAyBgB,WAAW,CAACC,SAArC,CAJzB;AAKI,IAAA,IAAI,EAAEY,aALV;AAMI,IAAA,OAAO,EAAEL,OANb;AAOI,IAAA,KAAK,EAAEf;AAPX,KAXR,EAqBK,CAACS,MAAM,IAAII,IAAX,KACG;AAAK,IAAA,SAAS,YAAKtB,SAAL;AAAd,KACKqC,SADL,EAEKa,WAFL,CAtBR,EA2BKlB,oBAAoB,IAAIL,YAAxB,IAAwC;AAAK,IAAA,SAAS,YAAK3B,SAAL;AAAd,KAAyC2B,YAAzC,CA3B7C,EA4BKK,oBAAoB,IAAIX,eAAxB,IACG;AAAK,IAAA,SAAS,YAAKrB,SAAL;AAAd,KAA0CqB,eAA1C,CA7BR,CADJ;AAkCH,CAhGwE;AAiGzET,SAAS,CAAC6C,WAAV,GAAwB1D,cAAxB;AACAa,SAAS,CAACK,SAAV,GAAsBjB,SAAtB;AACAY,SAAS,CAAC8C,YAAV,GAAyBxD,aAAzB;;;;"}
+{"version":3,"file":"UserBlock.js","sources":["../../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\nimport isEmpty from 'lodash/isEmpty';\nimport classNames from 'classnames';\nimport set from 'lodash/set';\n\nimport { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps {\n    /** Props to pass to the avatar. */\n    avatarProps?: Omit<AvatarProps, 'alt'>;\n    /** Additional fields used to describe the user. */\n    fields?: string[];\n    /** Props to pass to the link wrapping the avatar thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Multiple action toolbar content. */\n    multipleActions?: ReactNode;\n    /** User name. */\n    name?: string;\n    /** Props to pass to the name block. */\n    nameProps?: GenericProps;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Simple action toolbar content. */\n    simpleAction?: ReactNode;\n    /** Size variant. */\n    size?: UserBlockSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** On click callback. */\n    onClick?(): void;\n    /** On mouse enter callback. */\n    onMouseEnter?(): void;\n    /** On mouse leave callback. */\n    onMouseLeave?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<UserBlockProps> = {\n    orientation: Orientation.horizontal,\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * UserBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        avatarProps,\n        className,\n        fields,\n        linkProps,\n        linkAs,\n        multipleActions,\n        name,\n        nameProps,\n        onClick,\n        onMouseEnter,\n        onMouseLeave,\n        orientation,\n        simpleAction,\n        size,\n        theme,\n        ...forwardedProps\n    } = props;\n    let componentSize = size;\n\n    // Special case - When using vertical orientation force the size to be Sizes.l.\n    if (orientation === Orientation.vertical) {\n        componentSize = Size.l;\n    }\n\n    const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n    const isLink = Boolean(linkProps?.href || linkAs);\n    const isClickable = !!onClick || isLink;\n\n    const nameBlock: ReactNode = React.useMemo(() => {\n        if (isEmpty(name)) {\n            return null;\n        }\n        let NameComponent: any = 'span';\n        const nProps: any = {\n            ...nameProps,\n            className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className),\n        };\n        if (isClickable) {\n            NameComponent = Link;\n            Object.assign(nProps, {\n                ...linkProps,\n                onClick,\n                linkAs,\n                color: ColorPalette.dark,\n            });\n        }\n        // Disable avatar focus since the name block is the same link / same button.\n        if (avatarProps) {\n            set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);\n        }\n        return <NameComponent {...nProps}>{name}</NameComponent>;\n    }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);\n\n    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (\n        <div className={`${CLASSNAME}__fields`}>\n            {fields.map((field: string, idx: number) => (\n                <span key={idx} className={`${CLASSNAME}__field`}>\n                    {field}\n                </span>\n            ))}\n        </div>\n    );\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),\n            )}\n            onMouseLeave={onMouseLeave}\n            onMouseEnter={onMouseEnter}\n        >\n            {avatarProps && (\n                <Avatar\n                    linkAs={linkAs}\n                    linkProps={linkProps}\n                    alt=\"\"\n                    {...(avatarProps as any)}\n                    className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}\n                    size={componentSize}\n                    onClick={onClick}\n                    theme={theme}\n                />\n            )}\n            {(fields || name) && (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {nameBlock}\n                    {fieldsBlock}\n                </div>\n            )}\n            {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n            {shouldDisplayActions && multipleActions && (\n                <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n            )}\n        </div>\n    );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","theme","Theme","light","UserBlock","forwardRef","props","ref","avatarProps","className","fields","linkProps","linkAs","multipleActions","name","nameProps","onClick","onMouseEnter","onMouseLeave","simpleAction","forwardedProps","componentSize","vertical","l","shouldDisplayActions","isLink","Boolean","href","isClickable","nameBlock","React","useMemo","isEmpty","NameComponent","nProps","classNames","Link","Object","assign","color","ColorPalette","dark","set","fieldsBlock","s","map","field","idx","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/useFocusTrap.js

@@ -2,8 +2,14 @@ import { useEffect } from 'react';
 import { D as DOCUMENT } from './constants.js';
 
 /** CSS selector listing all tabbable elements. */
+var TABBABLE_ELEMENTS_SELECTOR = "a[href], button, textarea, input:not([type=\"hidden\"]), [tabindex]";
+/** CSS selector matching element that are disabled (should not receive focus). */
 
-var TABBABLE_ELEMENTS_SELECTOR = "a[href]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\nbutton:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ntextarea:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"text\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"radio\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"checkbox\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\n[tabindex]:not([tabindex=\"-1\"], [disabled], [aria-disabled])";
+var DISABLED_SELECTOR = "[tabindex=\"-1\"], [disabled]:not([disabled=\"false\"]), [aria-disabled]:not([aria-disabled=\"false\"])";
+
+var isNotDisabled = function isNotDisabled(element) {
+  return !element.matches(DISABLED_SELECTOR);
+};
 /**
  * Get first and last elements focusable in an element.
  *
@@ -11,20 +17,24 @@ var TABBABLE_ELEMENTS_SELECTOR = "a[href]:not([tabindex=\"-1\"], [disabled], [ar
  * @return first and last focusable elements
  */
 
-function getFocusable(parentElement) {
-  var focusableElements = parentElement.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR);
 
-  if (focusableElements.length <= 0) {
-    return {};
+function getFirstAndLastFocusable(parentElement) {
+  var focusableElements = Array.from(parentElement.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)); // First non disabled element.
+
+  var first = focusableElements.find(isNotDisabled); // Last non disabled element.
+
+  var last = focusableElements.reverse().find(isNotDisabled);
+
+  if (last && first) {
+    return {
+      first: first,
+      last: last
+    };
   }
 
-  var first = focusableElements[0];
-  var last = focusableElements[focusableElements.length - 1];
-  return {
-    first: first,
-    last: last
-  };
+  return {};
 }
+
 /**
  * Add a key down event handler to the given root element (document.body by default) to trap the move of focus
  * (TAB and SHIFT-TAB keys) inside the given focusZoneElement.
@@ -35,7 +45,6 @@ function getFocusable(parentElement) {
  * @param rootElement      The element on which the key down event will be placed.
  */
 
-
 function useFocusTrap(focusZoneElement, focusElement) {
   var rootElement = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DOCUMENT === null || DOCUMENT === void 0 ? void 0 : DOCUMENT.body;
   useEffect(function () {
@@ -55,7 +64,7 @@ function useFocusTrap(focusZoneElement, focusElement) {
           return;
         }
 
-        var focusable = getFocusable(focusZoneElement); // Prevent focus switch if no focusable available.
+        var focusable = getFirstAndLastFocusable(focusZoneElement); // Prevent focus switch if no focusable available.
 
         if (!focusable.first) {
           evt.preventDefault();

package/esm/_internal/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","sources":["../../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { DOCUMENT } from '@lumx/react/constants';\n\n/** CSS selector listing all tabbable elements. */\nconst TABBABLE_ELEMENTS_SELECTOR = `a[href]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\nbutton:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ntextarea:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"text\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"radio\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\ninput[type=\"checkbox\"]:not([tabindex=\"-1\"], [disabled], [aria-disabled]),\n[tabindex]:not([tabindex=\"-1\"], [disabled], [aria-disabled])`;\n\n/**\n * Get first and last elements focusable in an element.\n *\n * @param parentElement The element in which to search focusable elements.\n * @return first and last focusable elements\n */\nfunction getFocusable(parentElement: HTMLElement) {\n    const focusableElements = parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR);\n\n    if (focusableElements.length <= 0) {\n        return {};\n    }\n\n    const first = focusableElements[0];\n    const last = focusableElements[focusableElements.length - 1];\n    return { first, last };\n}\n\n/**\n * Add a key down event handler to the given root element (document.body by default) to trap the move of focus\n * (TAB and SHIFT-TAB keys) inside the given focusZoneElement.\n * Will focus the given focus element when activating the focus trap.\n *\n * @param focusZoneElement The element in which to trap the focus.\n * @param focusElement     The element to focus when the focus trap is activated.\n * @param rootElement      The element on which the key down event will be placed.\n */\nexport function useFocusTrap(\n    focusZoneElement: HTMLElement | null,\n    focusElement?: HTMLElement | null,\n    rootElement = DOCUMENT?.body,\n): void {\n    useEffect(() => {\n        if (rootElement && focusZoneElement) {\n            (document.activeElement as HTMLElement)?.blur();\n            if (focusElement) {\n                focusElement.focus();\n            }\n\n            const onKeyDown = (evt: KeyboardEvent) => {\n                const { key } = evt;\n                if (key !== 'Tab') {\n                    return;\n                }\n                const focusable = getFocusable(focusZoneElement);\n\n                // Prevent focus switch if no focusable available.\n                if (!focusable.first) {\n                    evt.preventDefault();\n                    return;\n                }\n\n                if (\n                    // No previous focus\n                    !document.activeElement ||\n                    // Previous focus is at the end of the focus zone.\n                    (!evt.shiftKey && document.activeElement === focusable.last) ||\n                    // Previous focus is outside the focus zone\n                    !focusZoneElement.contains(document.activeElement)\n                ) {\n                    focusable.first.focus();\n                    evt.preventDefault();\n                    return;\n                }\n\n                if (\n                    // Focus order reversed\n                    evt.shiftKey &&\n                    // Previous focus is at the start of the focus zone.\n                    document.activeElement === focusable.first\n                ) {\n                    focusable.last.focus();\n                    evt.preventDefault();\n                }\n            };\n            rootElement.addEventListener('keydown', onKeyDown);\n            return () => rootElement.removeEventListener('keydown', onKeyDown);\n        }\n        return undefined;\n    }, [focusElement, focusZoneElement, rootElement]);\n}\n"],"names":["TABBABLE_ELEMENTS_SELECTOR","getFocusable","parentElement","focusableElements","querySelectorAll","length","first","last","useFocusTrap","focusZoneElement","focusElement","rootElement","DOCUMENT","body","useEffect","document","activeElement","blur","focus","onKeyDown","evt","key","focusable","preventDefault","shiftKey","contains","addEventListener","removeEventListener","undefined"],"mappings":";;;AAIA;;AACA,IAAMA,0BAA0B,meAAhC;AAQA;;;;;;;AAMA,SAASC,YAAT,CAAsBC,aAAtB,EAAkD;AAC9C,MAAMC,iBAAiB,GAAGD,aAAa,CAACE,gBAAd,CAA4CJ,0BAA5C,CAA1B;;AAEA,MAAIG,iBAAiB,CAACE,MAAlB,IAA4B,CAAhC,EAAmC;AAC/B,WAAO,EAAP;AACH;;AAED,MAAMC,KAAK,GAAGH,iBAAiB,CAAC,CAAD,CAA/B;AACA,MAAMI,IAAI,GAAGJ,iBAAiB,CAACA,iBAAiB,CAACE,MAAlB,GAA2B,CAA5B,CAA9B;AACA,SAAO;AAAEC,IAAAA,KAAK,EAALA,KAAF;AAASC,IAAAA,IAAI,EAAJA;AAAT,GAAP;AACH;AAED;;;;;;;;;;;AASO,SAASC,YAAT,CACHC,gBADG,EAEHC,YAFG,EAIC;AAAA,MADJC,WACI,uEADUC,QACV,aADUA,QACV,uBADUA,QAAQ,CAAEC,IACpB;AACJC,EAAAA,SAAS,CAAC,YAAM;AACZ,QAAIH,WAAW,IAAIF,gBAAnB,EAAqC;AAAA;;AACjC,cAACM,QAAQ,CAACC,aAAV,8CAAyCC,IAAzC;;AACA,UAAIP,YAAJ,EAAkB;AACdA,QAAAA,YAAY,CAACQ,KAAb;AACH;;AAED,UAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,GAAD,EAAwB;AAAA,YAC9BC,GAD8B,GACtBD,GADsB,CAC9BC,GAD8B;;AAEtC,YAAIA,GAAG,KAAK,KAAZ,EAAmB;AACf;AACH;;AACD,YAAMC,SAAS,GAAGrB,YAAY,CAACQ,gBAAD,CAA9B,CALsC;;AAQtC,YAAI,CAACa,SAAS,CAAChB,KAAf,EAAsB;AAClBc,UAAAA,GAAG,CAACG,cAAJ;AACA;AACH;;AAED;AAEI,SAACR,QAAQ,CAACC,aAAV;AAEC,SAACI,GAAG,CAACI,QAAL,IAAiBT,QAAQ,CAACC,aAAT,KAA2BM,SAAS,CAACf,IAFvD;AAIA,SAACE,gBAAgB,CAACgB,QAAjB,CAA0BV,QAAQ,CAACC,aAAnC,CANL,EAOE;AACEM,UAAAA,SAAS,CAAChB,KAAV,CAAgBY,KAAhB;AACAE,UAAAA,GAAG,CAACG,cAAJ;AACA;AACH;;AAED;AAEIH,QAAAA,GAAG,CAACI,QAAJ;AAEAT,QAAAA,QAAQ,CAACC,aAAT,KAA2BM,SAAS,CAAChB,KAJzC,EAKE;AACEgB,UAAAA,SAAS,CAACf,IAAV,CAAeW,KAAf;AACAE,UAAAA,GAAG,CAACG,cAAJ;AACH;AACJ,OAnCD;;AAoCAZ,MAAAA,WAAW,CAACe,gBAAZ,CAA6B,SAA7B,EAAwCP,SAAxC;AACA,aAAO;AAAA,eAAMR,WAAW,CAACgB,mBAAZ,CAAgC,SAAhC,EAA2CR,SAA3C,CAAN;AAAA,OAAP;AACH;;AACD,WAAOS,SAAP;AACH,GA/CQ,EA+CN,CAAClB,YAAD,EAAeD,gBAAf,EAAiCE,WAAjC,CA/CM,CAAT;AAgDH;;;;"}
+{"version":3,"file":"useFocusTrap.js","sources":["../../../src/utils/focus/getFirstAndLastFocusable.ts","../../../src/hooks/useFocusTrap.ts"],"sourcesContent":["/** CSS selector listing all tabbable elements. */\nconst TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type=\"hidden\"]), [tabindex]`;\n\n/** CSS selector matching element that are disabled (should not receive focus). */\nconst DISABLED_SELECTOR = `[tabindex=\"-1\"], [disabled]:not([disabled=\"false\"]), [aria-disabled]:not([aria-disabled=\"false\"])`;\n\nconst isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);\n\n/**\n * Get first and last elements focusable in an element.\n *\n * @param parentElement The element in which to search focusable elements.\n * @return first and last focusable elements\n */\nexport function getFirstAndLastFocusable(parentElement: HTMLElement) {\n    const focusableElements = Array.from(parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR));\n\n    // First non disabled element.\n    const first = focusableElements.find(isNotDisabled);\n    // Last non disabled element.\n    const last = focusableElements.reverse().find(isNotDisabled);\n\n    if (last && first) {\n        return { first, last };\n    }\n    return {};\n}\n","import { useEffect } from 'react';\n\nimport { DOCUMENT } from '@lumx/react/constants';\nimport { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';\n\n/**\n * Add a key down event handler to the given root element (document.body by default) to trap the move of focus\n * (TAB and SHIFT-TAB keys) inside the given focusZoneElement.\n * Will focus the given focus element when activating the focus trap.\n *\n * @param focusZoneElement The element in which to trap the focus.\n * @param focusElement     The element to focus when the focus trap is activated.\n * @param rootElement      The element on which the key down event will be placed.\n */\nexport function useFocusTrap(\n    focusZoneElement: HTMLElement | null,\n    focusElement?: HTMLElement | null,\n    rootElement = DOCUMENT?.body,\n): void {\n    useEffect(() => {\n        if (rootElement && focusZoneElement) {\n            (document.activeElement as HTMLElement)?.blur();\n            if (focusElement) {\n                focusElement.focus();\n            }\n\n            const onKeyDown = (evt: KeyboardEvent) => {\n                const { key } = evt;\n                if (key !== 'Tab') {\n                    return;\n                }\n                const focusable = getFirstAndLastFocusable(focusZoneElement);\n\n                // Prevent focus switch if no focusable available.\n                if (!focusable.first) {\n                    evt.preventDefault();\n                    return;\n                }\n\n                if (\n                    // No previous focus\n                    !document.activeElement ||\n                    // Previous focus is at the end of the focus zone.\n                    (!evt.shiftKey && document.activeElement === focusable.last) ||\n                    // Previous focus is outside the focus zone\n                    !focusZoneElement.contains(document.activeElement)\n                ) {\n                    focusable.first.focus();\n                    evt.preventDefault();\n                    return;\n                }\n\n                if (\n                    // Focus order reversed\n                    evt.shiftKey &&\n                    // Previous focus is at the start of the focus zone.\n                    document.activeElement === focusable.first\n                ) {\n                    focusable.last.focus();\n                    evt.preventDefault();\n                }\n            };\n            rootElement.addEventListener('keydown', onKeyDown);\n            return () => rootElement.removeEventListener('keydown', onKeyDown);\n        }\n        return undefined;\n    }, [focusElement, focusZoneElement, rootElement]);\n}\n"],"names":["TABBABLE_ELEMENTS_SELECTOR","DISABLED_SELECTOR","isNotDisabled","element","matches","getFirstAndLastFocusable","parentElement","focusableElements","Array","from","querySelectorAll","first","find","last","reverse","useFocusTrap","focusZoneElement","focusElement","rootElement","DOCUMENT","body","useEffect","document","activeElement","blur","focus","onKeyDown","evt","key","focusable","preventDefault","shiftKey","contains","addEventListener","removeEventListener","undefined"],"mappings":";;;AAAA;AACA,IAAMA,0BAA0B,wEAAhC;AAEA;;AACA,IAAMC,iBAAiB,4GAAvB;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,OAAD;AAAA,SAA0B,CAACA,OAAO,CAACC,OAAR,CAAgBH,iBAAhB,CAA3B;AAAA,CAAtB;AAEA;;;;;;;;AAMO,SAASI,wBAAT,CAAkCC,aAAlC,EAA8D;AACjE,MAAMC,iBAAiB,GAAGC,KAAK,CAACC,IAAN,CAAWH,aAAa,CAACI,gBAAd,CAA4CV,0BAA5C,CAAX,CAA1B,CADiE;;AAIjE,MAAMW,KAAK,GAAGJ,iBAAiB,CAACK,IAAlB,CAAuBV,aAAvB,CAAd,CAJiE;;AAMjE,MAAMW,IAAI,GAAGN,iBAAiB,CAACO,OAAlB,GAA4BF,IAA5B,CAAiCV,aAAjC,CAAb;;AAEA,MAAIW,IAAI,IAAIF,KAAZ,EAAmB;AACf,WAAO;AAAEA,MAAAA,KAAK,EAALA,KAAF;AAASE,MAAAA,IAAI,EAAJA;AAAT,KAAP;AACH;;AACD,SAAO,EAAP;AACH;;ACrBD;;;;;;;;;;AASO,SAASE,YAAT,CACHC,gBADG,EAEHC,YAFG,EAIC;AAAA,MADJC,WACI,uEADUC,QACV,aADUA,QACV,uBADUA,QAAQ,CAAEC,IACpB;AACJC,EAAAA,SAAS,CAAC,YAAM;AACZ,QAAIH,WAAW,IAAIF,gBAAnB,EAAqC;AAAA;;AACjC,cAACM,QAAQ,CAACC,aAAV,8CAAyCC,IAAzC;;AACA,UAAIP,YAAJ,EAAkB;AACdA,QAAAA,YAAY,CAACQ,KAAb;AACH;;AAED,UAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,GAAD,EAAwB;AAAA,YAC9BC,GAD8B,GACtBD,GADsB,CAC9BC,GAD8B;;AAEtC,YAAIA,GAAG,KAAK,KAAZ,EAAmB;AACf;AACH;;AACD,YAAMC,SAAS,GAAGxB,wBAAwB,CAACW,gBAAD,CAA1C,CALsC;;AAQtC,YAAI,CAACa,SAAS,CAAClB,KAAf,EAAsB;AAClBgB,UAAAA,GAAG,CAACG,cAAJ;AACA;AACH;;AAED;AAEI,SAACR,QAAQ,CAACC,aAAV;AAEC,SAACI,GAAG,CAACI,QAAL,IAAiBT,QAAQ,CAACC,aAAT,KAA2BM,SAAS,CAAChB,IAFvD;AAIA,SAACG,gBAAgB,CAACgB,QAAjB,CAA0BV,QAAQ,CAACC,aAAnC,CANL,EAOE;AACEM,UAAAA,SAAS,CAAClB,KAAV,CAAgBc,KAAhB;AACAE,UAAAA,GAAG,CAACG,cAAJ;AACA;AACH;;AAED;AAEIH,QAAAA,GAAG,CAACI,QAAJ;AAEAT,QAAAA,QAAQ,CAACC,aAAT,KAA2BM,SAAS,CAAClB,KAJzC,EAKE;AACEkB,UAAAA,SAAS,CAAChB,IAAV,CAAeY,KAAf;AACAE,UAAAA,GAAG,CAACG,cAAJ;AACH;AACJ,OAnCD;;AAoCAZ,MAAAA,WAAW,CAACe,gBAAZ,CAA6B,SAA7B,EAAwCP,SAAxC;AACA,aAAO;AAAA,eAAMR,WAAW,CAACgB,mBAAZ,CAAgC,SAAhC,EAA2CR,SAA3C,CAAN;AAAA,OAAP;AACH;;AACD,WAAOS,SAAP;AACH,GA/CQ,EA+CN,CAAClB,YAAD,EAAeD,gBAAf,EAAiCE,WAAjC,CA/CM,CAAT;AAgDH;;;;"}

package/esm/_internal/user-block.js

@@ -12,5 +12,6 @@ import './Avatar2.js';
 import './renderLink.js';
 import './Link2.js';
 import './Thumbnail2.js';
+import 'lodash/set';
 export { U as UserBlock } from './UserBlock.js';
 //# sourceMappingURL=user-block.js.map

package/esm/_internal/user-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/esm/index.js

@@ -85,5 +85,6 @@ export { T as ThumbnailAspectRatio, a as ThumbnailVariant } from './_internal/ty
 export { T as Toolbar } from './_internal/Toolbar2.js';
 export { T as Tooltip } from './_internal/Tooltip2.js';
 export { a as Uploader, U as UploaderVariant } from './_internal/Uploader2.js';
+import 'lodash/set';
 export { U as UserBlock } from './_internal/UserBlock.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.2.18",
-        "@lumx/icons": "^2.2.18",
+        "@lumx/core": "^2.2.19",
+        "@lumx/icons": "^2.2.19",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -72,7 +72,7 @@
         "rollup-plugin-typescript-paths": "^1.2.2",
         "test-data-bot": "^0.8.0",
         "ts-jest": "^26.2.0",
-        "tsconfig-paths-webpack-plugin": "^3.2.0",
+        "tsconfig-paths-webpack-plugin": "^3.3.0",
         "typescript": "^4.1.2",
         "yargs": "^15.4.1",
         "yarn": "^1.19.1"
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.2.18",
-    "gitHead": "76dbe9453429551c6332560fc8cdb7abab8eeb04"
+    "version": "2.2.19",
+    "gitHead": "075b14a949b8ed5897d5fa8087ea4ff993d90eb5"
 }

package/src/components/dialog/Dialog.stories.tsx

@@ -283,7 +283,8 @@ export const ScrollableDialogWithHeaderAndFooter = ({ theme }: any) => {
     );
 };
 
-export const DialogWithFocusableElements = ({ theme }: any) => {
+/** Test dialog focus trap (focus is contained inside the dialog) with all kinds of focusable and non-focusable items */
+export const DialogFocusTrap = ({ theme }: any) => {
     const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
     const [textValue, setTextValue] = useState('value');
     const [checkboxValue, setCheckboxValue] = useState(false);
@@ -372,6 +373,8 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
 
                     {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
                     <div tabIndex={0}>Focus div</div>
+
+                    <Button isDisabled={false}>Button explicitly not disabled (should focus)</Button>
                 </div>
             </Dialog>
         </>

package/src/components/dialog/__snapshots__/Dialog.test.tsx.snap

@@ -1,82 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Dialog> Snapshots and structure should render story DialogWithAlertDialog 1`] = `
-<Fragment>
-  <Button
-    emphasis="high"
-    onClick={[Function]}
-    size="m"
-    theme="light"
-  >
-    Open dialog
-  </Button>
-  <Dialog
-    isOpen={true}
-    onClose={[Function]}
-    parentElement={
-      Object {
-        "current": undefined,
-      }
-    }
-    size="big"
-  >
-    <div
-      className="lumx-spacing-padding"
-    >
-      
-Nihil hic munitissimus habendi senatus locus, nihil horum? At nos hinc posthac, sitientis piros
-Afros. Magna pars studiorum, prodita quaerimus. Integer legentibus erat a ante historiarum
-dapibus. Praeterea iter est quasdam res quas ex communi. Ullamco laboris nisi ut aliquid ex ea
-commodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum
-festiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam
-habebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.
-Phasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.
-Paullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed
-immemorabili. Nec dubitamus multa iter quae et nos invenerat. Tu quoque, Brute, fili mi, nihil
-timor populi, nihil! Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cras mattis
-iudicium purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
-Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani,
-tertiam. Cras mattis iudicium purus sit amet fermentum
-    </div>
-    <footer>
-      <Toolbar
-        after={
-          <Button
-            emphasis="low"
-            onClick={[Function]}
-            size="m"
-            theme="light"
-          >
-            Close
-          </Button>
-        }
-      />
-    </footer>
-  </Dialog>
-  <AlertDialog
-    confirmProps={
-      Object {
-        "label": "Confirm",
-        "onClick": [Function],
-      }
-    }
-    isOpen={false}
-    kind="info"
-    onClose={[Function]}
-    parentElement={
-      Object {
-        "current": undefined,
-      }
-    }
-    size="tiny"
-    title="Default (info)"
-  >
-    Consequat deserunt officia aute laborum tempor anim sint est.
-  </AlertDialog>
-</Fragment>
-`;
-
-exports[`<Dialog> Snapshots and structure should render story DialogWithFocusableElements 1`] = `
+exports[`<Dialog> Snapshots and structure should render story DialogFocusTrap 1`] = `
 <Fragment>
   <Button
     emphasis="high"
@@ -226,11 +150,95 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithFocusabl
       >
         Focus div
       </div>
+      <Button
+        emphasis="high"
+        isDisabled={false}
+        size="m"
+        theme="light"
+      >
+        Button explicitly not disabled (should focus)
+      </Button>
     </div>
   </Dialog>
 </Fragment>
 `;
 
+exports[`<Dialog> Snapshots and structure should render story DialogWithAlertDialog 1`] = `
+<Fragment>
+  <Button
+    emphasis="high"
+    onClick={[Function]}
+    size="m"
+    theme="light"
+  >
+    Open dialog
+  </Button>
+  <Dialog
+    isOpen={true}
+    onClose={[Function]}
+    parentElement={
+      Object {
+        "current": undefined,
+      }
+    }
+    size="big"
+  >
+    <div
+      className="lumx-spacing-padding"
+    >
+      
+Nihil hic munitissimus habendi senatus locus, nihil horum? At nos hinc posthac, sitientis piros
+Afros. Magna pars studiorum, prodita quaerimus. Integer legentibus erat a ante historiarum
+dapibus. Praeterea iter est quasdam res quas ex communi. Ullamco laboris nisi ut aliquid ex ea
+commodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum
+festiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam
+habebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.
+Phasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.
+Paullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed
+immemorabili. Nec dubitamus multa iter quae et nos invenerat. Tu quoque, Brute, fili mi, nihil
+timor populi, nihil! Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cras mattis
+iudicium purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
+Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani,
+tertiam. Cras mattis iudicium purus sit amet fermentum
+    </div>
+    <footer>
+      <Toolbar
+        after={
+          <Button
+            emphasis="low"
+            onClick={[Function]}
+            size="m"
+            theme="light"
+          >
+            Close
+          </Button>
+        }
+      />
+    </footer>
+  </Dialog>
+  <AlertDialog
+    confirmProps={
+      Object {
+        "label": "Confirm",
+        "onClick": [Function],
+      }
+    }
+    isOpen={false}
+    kind="info"
+    onClose={[Function]}
+    parentElement={
+      Object {
+        "current": undefined,
+      }
+    }
+    size="tiny"
+    title="Default (info)"
+  >
+    Consequat deserunt officia aute laborum tempor anim sint est.
+  </AlertDialog>
+</Fragment>
+`;
+
 exports[`<Dialog> Snapshots and structure should render story DialogWithHeaderFooterAndDivider 1`] = `
 <Fragment>
   <Button

package/src/components/tooltip/Tooltip.tsx

@@ -65,12 +65,9 @@ const ARROW_SIZE = 8;
  * @return React element.
  */
 export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, ref) => {
-    if (!DOCUMENT) {
-        // Can't render in SSR.
-        return null;
-    }
     const { label, children, className, delay, placement, forceOpen, ...forwardedProps } = props;
-    if (!label) {
+    // Disable in SSR or without a label.
+    if (!DOCUMENT || !label) {
         return <>{children}</>;
     }
 

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

@@ -17,7 +17,7 @@ export const Default = ({ theme }: any) => (
         theme={theme}
         name="Emmitt O. Lum"
         fields={['Creative developer', 'Denpasar']}
-        avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
+        avatarProps={{ image: avatarImageKnob() }}
         onMouseEnter={logAction('Mouse entered')}
         onMouseLeave={logAction('Mouse left')}
     />
@@ -30,7 +30,7 @@ export const Sizes = ({ theme }: any) =>
             theme={theme}
             name="Emmitt O. Lum"
             fields={['Creative developer', 'Denpasar']}
-            avatarProps={{ image: avatarImageKnob(), alt: 'Avatar' }}
+            avatarProps={{ image: avatarImageKnob() }}
             size={size}
             onMouseEnter={logAction('Mouse entered')}
             onMouseLeave={logAction('Mouse left')}
@@ -41,8 +41,9 @@ export const Clickable = ({ theme }: any) => {
     const baseProps = {
         theme,
         name: 'Emmitt O. Lum',
+        nameProps: { 'aria-label': 'Emmitt O. Lum - open user profile' },
         fields: ['Creative developer', 'Denpasar'],
-        avatarProps: { image: avatarImageKnob(), alt: 'Avatar' },
+        avatarProps: { image: avatarImageKnob() },
     } as any;
     return (
         <>
@@ -65,7 +66,6 @@ export const WithBadge = ({ theme }: any) => (
         fields={['Creative developer', 'Denpasar']}
         avatarProps={{
             image: avatarImageKnob(),
-            alt: 'Avatar',
             badge: (
                 <Badge color={ColorPalette.blue}>
                     <Icon icon={mdiStar} />

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

@@ -1,6 +1,7 @@
 import React, { forwardRef, ReactNode } from 'react';
 import isEmpty from 'lodash/isEmpty';
 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';
@@ -17,7 +18,7 @@ export type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;
  */
 export interface UserBlockProps extends GenericProps {
     /** Props to pass to the avatar. */
-    avatarProps?: AvatarProps;
+    avatarProps?: Omit<AvatarProps, 'alt'>;
     /** Additional fields used to describe the user. */
     fields?: string[];
     /** Props to pass to the link wrapping the avatar thumbnail. */
@@ -121,8 +122,12 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
                 color: ColorPalette.dark,
             });
         }
+        // Disable avatar focus since the name block is the same link / same button.
+        if (avatarProps) {
+            set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);
+        }
         return <NameComponent {...nProps}>{name}</NameComponent>;
-    }, [isClickable, linkAs, linkProps, name, nameProps, onClick]);
+    }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
 
     const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (
         <div className={`${CLASSNAME}__fields`}>
@@ -149,7 +154,8 @@ export const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props
                 <Avatar
                     linkAs={linkAs}
                     linkProps={linkProps}
-                    {...avatarProps}
+                    alt=""
+                    {...(avatarProps as any)}
                     className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}
                     size={componentSize}
                     onClick={onClick}

package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap

@@ -6,17 +6,23 @@ Array [
     className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
   >
     <Avatar
-      alt="Avatar"
+      alt=""
       className="lumx-user-block__avatar"
       image="/demo-assets/avatar1.jpg"
       onClick={[Function]}
       size="m"
       theme="light"
+      thumbnailProps={
+        Object {
+          "tabIndex": -1,
+        }
+      }
     />
     <div
       className="lumx-user-block__wrapper"
     >
       <Link
+        aria-label="Emmitt O. Lum - open user profile"
         className="lumx-user-block__name"
         color="dark"
         onClick={[Function]}
@@ -45,7 +51,7 @@ Array [
     className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
   >
     <Avatar
-      alt="Avatar"
+      alt=""
       className="lumx-user-block__avatar"
       image="/demo-assets/avatar1.jpg"
       linkProps={
@@ -55,11 +61,17 @@ Array [
       }
       size="m"
       theme="light"
+      thumbnailProps={
+        Object {
+          "tabIndex": -1,
+        }
+      }
     />
     <div
       className="lumx-user-block__wrapper"
     >
       <Link
+        aria-label="Emmitt O. Lum - open user profile"
         className="lumx-user-block__name"
         color="dark"
         href="https://example.com"
@@ -88,17 +100,23 @@ Array [
     className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
   >
     <Avatar
-      alt="Avatar"
+      alt=""
       className="lumx-user-block__avatar"
       image="/demo-assets/avatar1.jpg"
       linkAs={[Function]}
       size="m"
       theme="light"
+      thumbnailProps={
+        Object {
+          "tabIndex": -1,
+        }
+      }
     />
     <div
       className="lumx-user-block__wrapper"
     >
       <Link
+        aria-label="Emmitt O. Lum - open user profile"
         className="lumx-user-block__name"
         color="dark"
         linkAs={[Function]}
@@ -133,11 +151,16 @@ exports[`<UserBlock> Snapshots and structure should render story 'Default' 1`] =
   onMouseLeave={[Function]}
 >
   <Avatar
-    alt="Avatar"
+    alt=""
     className="lumx-user-block__avatar"
     image="/demo-assets/avatar1.jpg"
     size="m"
     theme="light"
+    thumbnailProps={
+      Object {
+        "tabIndex": -1,
+      }
+    }
   />
   <div
     className="lumx-user-block__wrapper"
@@ -175,11 +198,16 @@ Array [
     onMouseLeave={[Function]}
   >
     <Avatar
-      alt="Avatar"
+      alt=""
       className="lumx-user-block__avatar"
       image="/demo-assets/avatar1.jpg"
       size="s"
       theme="light"
+      thumbnailProps={
+        Object {
+          "tabIndex": -1,
+        }
+      }
     />
     <div
       className="lumx-user-block__wrapper"
@@ -197,11 +225,16 @@ Array [
     onMouseLeave={[Function]}
   >
     <Avatar
-      alt="Avatar"
+      alt=""
       className="lumx-user-block__avatar"
       image="/demo-assets/avatar1.jpg"
       size="m"
       theme="light"
+      thumbnailProps={
+        Object {
+          "tabIndex": -1,
+        }
+      }
     />
     <div
       className="lumx-user-block__wrapper"
@@ -235,11 +268,16 @@ Array [
     onMouseLeave={[Function]}
   >
     <Avatar
-      alt="Avatar"
+      alt=""
       className="lumx-user-block__avatar"
       image="/demo-assets/avatar1.jpg"
       size="l"
       theme="light"
+      thumbnailProps={
+        Object {
+          "tabIndex": -1,
+        }
+      }
     />
     <div
       className="lumx-user-block__wrapper"
@@ -275,7 +313,7 @@ exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`]
   className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
 >
   <Avatar
-    alt="Avatar"
+    alt=""
     badge={
       <Badge
         color="blue"
@@ -289,6 +327,11 @@ exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`]
     image="/demo-assets/avatar1.jpg"
     size="m"
     theme="light"
+    thumbnailProps={
+      Object {
+        "tabIndex": -1,
+      }
+    }
   />
   <div
     className="lumx-user-block__wrapper"

package/src/hooks/useBooleanState.tsx

@@ -1,19 +1,13 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
 export const useBooleanState = (defaultValue: boolean): [boolean, () => void, () => void, () => void] => {
     const [booleanValue, setBoolean] = useState<boolean>(defaultValue);
 
-    const setToFalse = () => {
-        setBoolean(false);
-    };
+    const setToFalse = useCallback(() => setBoolean(false), []);
 
-    const setToTrue = () => {
-        setBoolean(true);
-    };
+    const setToTrue = useCallback(() => setBoolean(true), []);
 
-    const toggleBoolean = () => {
-        setBoolean(!booleanValue);
-    };
+    const toggleBoolean = useCallback(() => setBoolean((previousValue) => !previousValue), []);
 
     return [booleanValue, setToFalse, setToTrue, toggleBoolean];
 };

package/src/hooks/useFocusTrap.ts

@@ -1,33 +1,7 @@
 import { useEffect } from 'react';
 
 import { DOCUMENT } from '@lumx/react/constants';
-
-/** CSS selector listing all tabbable elements. */
-const TABBABLE_ELEMENTS_SELECTOR = `a[href]:not([tabindex="-1"], [disabled], [aria-disabled]),
-button:not([tabindex="-1"], [disabled], [aria-disabled]),
-textarea:not([tabindex="-1"], [disabled], [aria-disabled]),
-input[type="text"]:not([tabindex="-1"], [disabled], [aria-disabled]),
-input[type="radio"]:not([tabindex="-1"], [disabled], [aria-disabled]),
-input[type="checkbox"]:not([tabindex="-1"], [disabled], [aria-disabled]),
-[tabindex]:not([tabindex="-1"], [disabled], [aria-disabled])`;
-
-/**
- * Get first and last elements focusable in an element.
- *
- * @param parentElement The element in which to search focusable elements.
- * @return first and last focusable elements
- */
-function getFocusable(parentElement: HTMLElement) {
-    const focusableElements = parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR);
-
-    if (focusableElements.length <= 0) {
-        return {};
-    }
-
-    const first = focusableElements[0];
-    const last = focusableElements[focusableElements.length - 1];
-    return { first, last };
-}
+import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
 
 /**
  * Add a key down event handler to the given root element (document.body by default) to trap the move of focus
@@ -55,7 +29,7 @@ export function useFocusTrap(
                 if (key !== 'Tab') {
                     return;
                 }
-                const focusable = getFocusable(focusZoneElement);
+                const focusable = getFirstAndLastFocusable(focusZoneElement);
 
                 // Prevent focus switch if no focusable available.
                 if (!focusable.first) {

package/src/stories/generated/Dialog/Demos.stories.tsx

@@ -6,4 +6,5 @@ export default { title: 'LumX components/dialog/Dialog Demos' };
 export { App as Alert } from './alert';
 export { App as Confirm } from './confirm';
 export { App as Default } from './default';
+export { App as Isloading } from './isloading';
 export { App as Sizes } from './sizes';

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

@@ -0,0 +1,128 @@
+import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
+
+function htmlToElement(html: string): any {
+    const template = document.createElement('template');
+    template.innerHTML = html.trim();
+    return template.content.firstChild;
+}
+
+describe(getFirstAndLastFocusable.name, () => {
+    it('should get empty', () => {
+        const element = htmlToElement(`<div></div>`);
+        const focusable = getFirstAndLastFocusable(element);
+        expect(focusable).toEqual({});
+    });
+
+    it('should get single item', () => {
+        const element = htmlToElement(`<div><button /></div>`);
+        const focusable = getFirstAndLastFocusable(element);
+        expect(focusable.last).toBe(focusable.first);
+    });
+
+    it('should get first and last', () => {
+        const element = htmlToElement(`
+            <div>
+                <div>Non focusable div</div>
+                <button>Simple button</button>
+                <div>Non focusable div</div>
+                <input />
+                <div>Non focusable div</div>
+            </div>
+        `);
+        const focusable = getFirstAndLastFocusable(element);
+        expect(focusable.first).toMatchInlineSnapshot(`
+            <button>
+              Simple button
+            </button>
+        `);
+        expect(focusable.first).toMatchInlineSnapshot(`
+            <button>
+              Simple button
+            </button>
+        `);
+    });
+
+    describe('match focusable elements', () => {
+        it('should match input element', () => {
+            const element = htmlToElement(`<div><input /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<input />`);
+        });
+
+        it('should match link element', () => {
+            const element = htmlToElement(`<div><a href="#" /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <a
+                  href="#"
+                />
+            `);
+        });
+
+        it('should match textarea element', () => {
+            const element = htmlToElement(`<div><textarea /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <textarea>
+                  &lt;/div&gt;
+                </textarea>
+            `);
+        });
+
+        it('should match element with tabindex', () => {
+            const element = htmlToElement(`<div><span tabindex="0" /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <span
+                  tabindex="0"
+                />
+            `);
+        });
+
+        it('should keep disabled=false', () => {
+            const element = htmlToElement(`<div><button disabled="false" /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <button
+                  disabled="false"
+                />
+            `);
+        });
+
+        it('should keep aria-disabled=false', () => {
+            const element = htmlToElement(`<div><button aria-disabled="false" /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <button
+                  aria-disabled="false"
+                />
+            `);
+        });
+    });
+
+    describe('skip disabled elements', () => {
+        it('should skip disabled', () => {
+            const element = htmlToElement(`<div><button disabled /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+        });
+
+        it('should skip aria-disabled', () => {
+            const element = htmlToElement(`<div><button aria-disabled /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+        });
+
+        it('should skip tabindex=-1', () => {
+            const element = htmlToElement(`<div><button tabindex="-1" /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+        });
+
+        it('should skip input type hidden', () => {
+            const element = htmlToElement(`<div><input type="hidden" /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+        });
+    });
+});

package/src/utils/focus/getFirstAndLastFocusable.ts

@@ -0,0 +1,27 @@
+/** CSS selector listing all tabbable elements. */
+const TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type="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 isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);
+
+/**
+ * Get first and last elements focusable in an element.
+ *
+ * @param parentElement The element in which to search focusable elements.
+ * @return first and last focusable elements
+ */
+export function getFirstAndLastFocusable(parentElement: HTMLElement) {
+    const focusableElements = Array.from(parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR));
+
+    // First non disabled element.
+    const first = focusableElements.find(isNotDisabled);
+    // Last non disabled element.
+    const last = focusableElements.reverse().find(isNotDisabled);
+
+    if (last && first) {
+        return { first, last };
+    }
+    return {};
+}

package/types.d.ts

@@ -2646,7 +2646,7 @@ export declare type UserBlockSize = Extract<Size, "s" | "m" | "l">;
  */
 export interface UserBlockProps extends GenericProps {
 	/** Props to pass to the avatar. */
-	avatarProps?: AvatarProps;
+	avatarProps?: Omit<AvatarProps, "alt">;
 	/** Additional fields used to describe the user. */
 	fields?: string[];
 	/** Props to pass to the link wrapping the avatar thumbnail. */