@lumx/react 2.2.16 → 2.2.18

package/esm/_internal/FlexBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexBox.js","sources":["../../../src/components/flex-box/FlexBox.tsx"],"sourcesContent":["import { Alignment, HorizontalAlignment, Orientation, VerticalAlignment } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport classNames from 'classnames';\nimport castArray from 'lodash/castArray';\nimport React, { forwardRef, ReactNode } from 'react';\nimport { Size } from '..';\n\nexport type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;\nexport type GapSize = Extract<Size, 'regular' | 'big' | 'huge'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface FlexBoxProps extends GenericProps {\n    /** Children elements. */\n    children?: ReactNode;\n    /** Whether the \"content filling space\" is enabled or not. */\n    fillSpace?: boolean;\n    /** Gap space between flexbox items. */\n    gap?: GapSize;\n    /** Flex horizontal alignment. */\n    hAlign?: VerticalAlignment;\n    /** Whether the \"auto margin\" is enabled all around or not. */\n    marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];\n    /** Whether the \"content shrink\" is disabled or not. */\n    noShrink?: boolean;\n    /** Flex direction. */\n    orientation?: Orientation;\n    /** Flex vertical alignment. */\n    vAlign?: HorizontalAlignment;\n    /** Whether the \"flex wrap\" is enabled or not. */\n    wrap?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'FlexBox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * FlexBox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        children,\n        className,\n        fillSpace,\n        gap,\n        hAlign,\n        marginAuto,\n        noShrink,\n        orientation,\n        vAlign,\n        wrap,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),\n                    vAlign,\n                    hAlign,\n                    gap,\n                }),\n                wrap && `${CLASSNAME}--wrap`,\n                fillSpace && `${CLASSNAME}--fill-space`,\n                noShrink && `${CLASSNAME}--no-shrink`,\n                marginAuto && castArray(marginAuto).map((align) => `${CLASSNAME}--margin-auto-${align}`),\n            )}\n        >\n            {children}\n        </div>\n    );\n});\nFlexBox.displayName = COMPONENT_NAME;\nFlexBox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","FlexBox","forwardRef","props","ref","children","className","fillSpace","gap","hAlign","marginAuto","noShrink","orientation","vAlign","wrap","forwardedProps","classNames","handleBasicClasses","prefix","Orientation","horizontal","castArray","map","align","displayName"],"mappings":";;;;;;AAkCA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,OAA2C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE9EC,QAF8E,GAa9EF,KAb8E,CAE9EE,QAF8E;AAAA,MAG9EC,SAH8E,GAa9EH,KAb8E,CAG9EG,SAH8E;AAAA,MAI9EC,SAJ8E,GAa9EJ,KAb8E,CAI9EI,SAJ8E;AAAA,MAK9EC,GAL8E,GAa9EL,KAb8E,CAK9EK,GAL8E;AAAA,MAM9EC,MAN8E,GAa9EN,KAb8E,CAM9EM,MAN8E;AAAA,MAO9EC,UAP8E,GAa9EP,KAb8E,CAO9EO,UAP8E;AAAA,MAQ9EC,QAR8E,GAa9ER,KAb8E,CAQ9EQ,QAR8E;AAAA,MAS9EC,WAT8E,GAa9ET,KAb8E,CAS9ES,WAT8E;AAAA,MAU9EC,MAV8E,GAa9EV,KAb8E,CAU9EU,MAV8E;AAAA,MAW9EC,IAX8E,GAa9EX,KAb8E,CAW9EW,IAX8E;AAAA,MAY3EC,cAZ2E,4BAa9EZ,KAb8E;;AAelF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQW,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CACjBV,SADiB,EAEjBW,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEnB,SADO;AAEfa,MAAAA,WAAW,EAAEA,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAkBE,IAAI,IAAIL,MAAR,IAAkBI,MAAlB,GAA2BM,WAAW,CAACC,UAAvC,GAAoD,IAFlE;AAGfP,MAAAA,MAAM,EAANA,MAHe;AAIfJ,MAAAA,MAAM,EAANA,MAJe;AAKfD,MAAAA,GAAG,EAAHA;AALe,KAAD,CAFD,EASjBM,IAAI,cAAOf,SAAP,WATa,EAUjBQ,SAAS,cAAOR,SAAP,iBAVQ,EAWjBY,QAAQ,cAAOZ,SAAP,gBAXS,EAYjBW,UAAU,IAAIW,SAAS,CAACX,UAAD,CAAT,CAAsBY,GAAtB,CAA0B,UAACC,KAAD;AAAA,uBAAcxB,SAAd,2BAAwCwB,KAAxC;AAAA,KAA1B,CAZG;AAHzB,MAkBKlB,QAlBL,CADJ;AAsBH,CArCoE;AAsCrEJ,OAAO,CAACuB,WAAR,GAAsB1B,cAAtB;AACAG,OAAO,CAACK,SAAR,GAAoBP,SAApB;;;;"}
+{"version":3,"file":"FlexBox.js","sources":["../../../src/components/flex-box/FlexBox.tsx"],"sourcesContent":["import { Alignment, HorizontalAlignment, Orientation, VerticalAlignment } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport classNames from 'classnames';\nimport castArray from 'lodash/castArray';\nimport React, { forwardRef, ReactNode } from 'react';\nimport { Size } from '..';\n\nexport type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;\nexport type GapSize = Extract<Size, 'regular' | 'medium' | 'big' | 'huge'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface FlexBoxProps extends GenericProps {\n    /** Children elements. */\n    children?: ReactNode;\n    /** Whether the \"content filling space\" is enabled or not. */\n    fillSpace?: boolean;\n    /** Gap space between flexbox items. */\n    gap?: GapSize;\n    /** Flex horizontal alignment. */\n    hAlign?: VerticalAlignment;\n    /** Whether the \"auto margin\" is enabled all around or not. */\n    marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];\n    /** Whether the \"content shrink\" is disabled or not. */\n    noShrink?: boolean;\n    /** Flex direction. */\n    orientation?: Orientation;\n    /** Flex vertical alignment. */\n    vAlign?: HorizontalAlignment;\n    /** Whether the \"flex wrap\" is enabled or not. */\n    wrap?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'FlexBox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * FlexBox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const FlexBox: Comp<FlexBoxProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        children,\n        className,\n        fillSpace,\n        gap,\n        hAlign,\n        marginAuto,\n        noShrink,\n        orientation,\n        vAlign,\n        wrap,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),\n                    vAlign,\n                    hAlign,\n                    gap,\n                }),\n                wrap && `${CLASSNAME}--wrap`,\n                fillSpace && `${CLASSNAME}--fill-space`,\n                noShrink && `${CLASSNAME}--no-shrink`,\n                marginAuto && castArray(marginAuto).map((align) => `${CLASSNAME}--margin-auto-${align}`),\n            )}\n        >\n            {children}\n        </div>\n    );\n});\nFlexBox.displayName = COMPONENT_NAME;\nFlexBox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","FlexBox","forwardRef","props","ref","children","className","fillSpace","gap","hAlign","marginAuto","noShrink","orientation","vAlign","wrap","forwardedProps","classNames","handleBasicClasses","prefix","Orientation","horizontal","castArray","map","align","displayName"],"mappings":";;;;;;AAkCA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,OAA2C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE9EC,QAF8E,GAa9EF,KAb8E,CAE9EE,QAF8E;AAAA,MAG9EC,SAH8E,GAa9EH,KAb8E,CAG9EG,SAH8E;AAAA,MAI9EC,SAJ8E,GAa9EJ,KAb8E,CAI9EI,SAJ8E;AAAA,MAK9EC,GAL8E,GAa9EL,KAb8E,CAK9EK,GAL8E;AAAA,MAM9EC,MAN8E,GAa9EN,KAb8E,CAM9EM,MAN8E;AAAA,MAO9EC,UAP8E,GAa9EP,KAb8E,CAO9EO,UAP8E;AAAA,MAQ9EC,QAR8E,GAa9ER,KAb8E,CAQ9EQ,QAR8E;AAAA,MAS9EC,WAT8E,GAa9ET,KAb8E,CAS9ES,WAT8E;AAAA,MAU9EC,MAV8E,GAa9EV,KAb8E,CAU9EU,MAV8E;AAAA,MAW9EC,IAX8E,GAa9EX,KAb8E,CAW9EW,IAX8E;AAAA,MAY3EC,cAZ2E,4BAa9EZ,KAb8E;;AAelF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQW,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CACjBV,SADiB,EAEjBW,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEnB,SADO;AAEfa,MAAAA,WAAW,EAAEA,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAkBE,IAAI,IAAIL,MAAR,IAAkBI,MAAlB,GAA2BM,WAAW,CAACC,UAAvC,GAAoD,IAFlE;AAGfP,MAAAA,MAAM,EAANA,MAHe;AAIfJ,MAAAA,MAAM,EAANA,MAJe;AAKfD,MAAAA,GAAG,EAAHA;AALe,KAAD,CAFD,EASjBM,IAAI,cAAOf,SAAP,WATa,EAUjBQ,SAAS,cAAOR,SAAP,iBAVQ,EAWjBY,QAAQ,cAAOZ,SAAP,gBAXS,EAYjBW,UAAU,IAAIW,SAAS,CAACX,UAAD,CAAT,CAAsBY,GAAtB,CAA0B,UAACC,KAAD;AAAA,uBAAcxB,SAAd,2BAAwCwB,KAAxC;AAAA,KAA1B,CAZG;AAHzB,MAkBKlB,QAlBL,CADJ;AAsBH,CArCoE;AAsCrEJ,OAAO,CAACuB,WAAR,GAAsB1B,cAAtB;AACAG,OAAO,CAACK,SAAR,GAAoBP,SAApB;;;;"}

package/esm/_internal/SideNavigationItem.js

@@ -65,7 +65,8 @@ var CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
  */
 
 var DEFAULT_PROPS = {
-  emphasis: Emphasis.high
+  emphasis: Emphasis.high,
+  closeMode: 'unmount'
 };
 /**
  * SideNavigationItem component.
@@ -88,17 +89,20 @@ var SideNavigationItem = forwardRef(function (props, ref) {
       onActionClick = props.onActionClick,
       onClick = props.onClick,
       toggleButtonProps = props.toggleButtonProps,
-      forwardedProps = _objectWithoutProperties(props, ["children", "className", "emphasis", "icon", "isOpen", "isSelected", "label", "linkAs", "linkProps", "onActionClick", "onClick", "toggleButtonProps"]);
+      _props$closeMode = props.closeMode,
+      closeMode = _props$closeMode === void 0 ? 'unmount' : _props$closeMode,
+      forwardedProps = _objectWithoutProperties(props, ["children", "className", "emphasis", "icon", "isOpen", "isSelected", "label", "linkAs", "linkProps", "onActionClick", "onClick", "toggleButtonProps", "closeMode"]);
 
   var content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
   var hasContent = !isEmpty(content);
   var shouldSplitActions = Boolean(onActionClick);
+  var showChildren = hasContent && isOpen;
   return React.createElement("li", _extends({
     ref: ref
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
       emphasis: emphasis,
-      isOpen: isOpen,
+      isOpen: showChildren,
       isSelected: isSelected,
       prefix: CLASSNAME$1
     }))
@@ -135,7 +139,7 @@ var SideNavigationItem = forwardRef(function (props, ref) {
     className: "".concat(CLASSNAME$1, "__chevron"),
     icon: isOpen ? mdiChevronUp : mdiChevronDown,
     size: Size.xs
-  })), hasContent && isOpen && React.createElement("ul", {
+  })), (closeMode === 'hide' || showChildren) && React.createElement("ul", {
     className: "".concat(CLASSNAME$1, "__children")
   }, content));
 });

package/esm/_internal/SideNavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationItem.js","sources":["../../../src/components/side-navigation/SideNavigation.tsx","../../../src/components/side-navigation/SideNavigationItem.tsx"],"sourcesContent":["import React, { Children, forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { SideNavigationItem, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, isComponent } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface SideNavigationProps extends GenericProps {\n    /** SideNavigationItem elements. */\n    children: ReactNode;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SideNavigation';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SideNavigation component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SideNavigation: Comp<SideNavigationProps, HTMLUListElement> = forwardRef((props, ref) => {\n    const { children, className, theme, ...forwardedProps } = props;\n    const content = Children.toArray(children).filter(isComponent(SideNavigationItem));\n\n    return (\n        <ul\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                theme === Theme.dark && 'lumx-color-font-light-N',\n                handleBasicClasses({ prefix: CLASSNAME }),\n            )}\n        >\n            {content}\n        </ul>\n    );\n});\nSideNavigation.displayName = COMPONENT_NAME;\nSideNavigation.className = CLASSNAME;\n","import React, { Children, forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\n\nimport { mdiChevronDown, mdiChevronUp } from '@lumx/icons';\n\nimport { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';\n\nimport {\n    Callback,\n    Comp,\n    GenericProps,\n    getRootClassName,\n    handleBasicClasses,\n    isComponent,\n    onEnterPressed,\n} from '@lumx/react/utils';\nimport { renderLink } from '@lumx/react/utils/renderLink';\n\n/**\n * Defines the props of the component.\n */\nexport interface SideNavigationItemProps extends GenericProps {\n    /** SideNavigationItem elements. */\n    children?: ReactNode;\n    /** Emphasis variant. */\n    emphasis?: Emphasis;\n    /** Label content. */\n    label: string | ReactNode;\n    /** Icon (SVG path). */\n    icon?: string;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Whether the component is selected or not. */\n    isSelected?: boolean;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Props to pass to the link (minus those already set by the SideNavigationItem props). */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */\n    toggleButtonProps: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color' | 'size'>;\n    /** On action button click callback. */\n    onActionClick?(evt: React.MouseEvent): void;\n    /** On click callback. */\n    onClick?(evt: React.MouseEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SideNavigationItem';\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<SideNavigationItemProps> = {\n    emphasis: Emphasis.high,\n};\n\n/**\n * SideNavigationItem component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement> = forwardRef((props, ref) => {\n    const {\n        children,\n        className,\n        emphasis,\n        icon,\n        isOpen,\n        isSelected,\n        label,\n        linkAs,\n        linkProps,\n        onActionClick,\n        onClick,\n        toggleButtonProps,\n        ...forwardedProps\n    } = props;\n\n    const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));\n    const hasContent = !isEmpty(content);\n    const shouldSplitActions = Boolean(onActionClick);\n\n    return (\n        <li\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    emphasis,\n                    isOpen,\n                    isSelected,\n                    prefix: CLASSNAME,\n                }),\n            )}\n        >\n            {shouldSplitActions ? (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {renderLink(\n                        {\n                            linkAs,\n                            ...linkProps,\n                            className: `${CLASSNAME}__link`,\n                            onClick,\n                            tabIndex: 0,\n                        },\n                        icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,\n                        <span>{label}</span>,\n                    )}\n\n                    <IconButton\n                        {...toggleButtonProps}\n                        className={`${CLASSNAME}__toggle`}\n                        icon={isOpen ? mdiChevronUp : mdiChevronDown}\n                        size={Size.m}\n                        emphasis={Emphasis.low}\n                        onClick={onActionClick}\n                    />\n                </div>\n            ) : (\n                renderLink(\n                    {\n                        linkAs,\n                        ...linkProps,\n                        className: `${CLASSNAME}__link`,\n                        tabIndex: 0,\n                        onClick,\n                        onKeyDown: onClick ? onEnterPressed(onClick as Callback) : undefined,\n                    },\n                    icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,\n                    <span>{label}</span>,\n                    hasContent && (\n                        <Icon\n                            className={`${CLASSNAME}__chevron`}\n                            icon={isOpen ? mdiChevronUp : mdiChevronDown}\n                            size={Size.xs}\n                        />\n                    ),\n                )\n            )}\n\n            {hasContent && isOpen && <ul className={`${CLASSNAME}__children`}>{content}</ul>}\n        </li>\n    );\n});\nSideNavigationItem.displayName = COMPONENT_NAME;\nSideNavigationItem.className = CLASSNAME;\nSideNavigationItem.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","SideNavigation","forwardRef","props","ref","children","className","theme","forwardedProps","content","Children","toArray","filter","isComponent","SideNavigationItem","classNames","Theme","dark","handleBasicClasses","prefix","displayName","DEFAULT_PROPS","emphasis","Emphasis","high","icon","isOpen","isSelected","label","linkAs","linkProps","onActionClick","onClick","toggleButtonProps","hasContent","isEmpty","shouldSplitActions","Boolean","renderLink","tabIndex","Size","xs","mdiChevronUp","mdiChevronDown","m","low","onKeyDown","onEnterPressed","undefined","defaultProps"],"mappings":"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"}
+{"version":3,"file":"SideNavigationItem.js","sources":["../../../src/components/side-navigation/SideNavigation.tsx","../../../src/components/side-navigation/SideNavigationItem.tsx"],"sourcesContent":["import React, { Children, forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { SideNavigationItem, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses, isComponent } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface SideNavigationProps extends GenericProps {\n    /** SideNavigationItem elements. */\n    children: ReactNode;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SideNavigation';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SideNavigation component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SideNavigation: Comp<SideNavigationProps, HTMLUListElement> = forwardRef((props, ref) => {\n    const { children, className, theme, ...forwardedProps } = props;\n    const content = Children.toArray(children).filter(isComponent(SideNavigationItem));\n\n    return (\n        <ul\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                theme === Theme.dark && 'lumx-color-font-light-N',\n                handleBasicClasses({ prefix: CLASSNAME }),\n            )}\n        >\n            {content}\n        </ul>\n    );\n});\nSideNavigation.displayName = COMPONENT_NAME;\nSideNavigation.className = CLASSNAME;\n","import React, { Children, forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\n\nimport { mdiChevronDown, mdiChevronUp } from '@lumx/icons';\n\nimport { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';\n\nimport {\n    Callback,\n    Comp,\n    GenericProps,\n    getRootClassName,\n    handleBasicClasses,\n    isComponent,\n    onEnterPressed,\n} from '@lumx/react/utils';\nimport { renderLink } from '@lumx/react/utils/renderLink';\n\n/**\n * Defines the props of the component.\n */\nexport interface SideNavigationItemProps extends GenericProps {\n    /** SideNavigationItem elements. */\n    children?: ReactNode;\n    /** Emphasis variant. */\n    emphasis?: Emphasis;\n    /** Label content. */\n    label: string | ReactNode;\n    /** Icon (SVG path). */\n    icon?: string;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Whether the component is selected or not. */\n    isSelected?: boolean;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Props to pass to the link (minus those already set by the SideNavigationItem props). */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */\n    toggleButtonProps: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color' | 'size'>;\n    /**\n     * Choose how the children are hidden when closed\n     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).\n     */\n    closeMode?: 'hide' | 'unmount';\n    /** On action button click callback. */\n    onActionClick?(evt: React.MouseEvent): void;\n    /** On click callback. */\n    onClick?(evt: React.MouseEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SideNavigationItem';\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<SideNavigationItemProps> = {\n    emphasis: Emphasis.high,\n    closeMode: 'unmount',\n};\n\n/**\n * SideNavigationItem component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement> = forwardRef((props, ref) => {\n    const {\n        children,\n        className,\n        emphasis,\n        icon,\n        isOpen,\n        isSelected,\n        label,\n        linkAs,\n        linkProps,\n        onActionClick,\n        onClick,\n        toggleButtonProps,\n        closeMode = 'unmount',\n        ...forwardedProps\n    } = props;\n\n    const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));\n    const hasContent = !isEmpty(content);\n    const shouldSplitActions = Boolean(onActionClick);\n    const showChildren = hasContent && isOpen;\n\n    return (\n        <li\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    emphasis,\n                    isOpen: showChildren,\n                    isSelected,\n                    prefix: CLASSNAME,\n                }),\n            )}\n        >\n            {shouldSplitActions ? (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {renderLink(\n                        {\n                            linkAs,\n                            ...linkProps,\n                            className: `${CLASSNAME}__link`,\n                            onClick,\n                            tabIndex: 0,\n                        },\n                        icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,\n                        <span>{label}</span>,\n                    )}\n\n                    <IconButton\n                        {...toggleButtonProps}\n                        className={`${CLASSNAME}__toggle`}\n                        icon={isOpen ? mdiChevronUp : mdiChevronDown}\n                        size={Size.m}\n                        emphasis={Emphasis.low}\n                        onClick={onActionClick}\n                    />\n                </div>\n            ) : (\n                renderLink(\n                    {\n                        linkAs,\n                        ...linkProps,\n                        className: `${CLASSNAME}__link`,\n                        tabIndex: 0,\n                        onClick,\n                        onKeyDown: onClick ? onEnterPressed(onClick as Callback) : undefined,\n                    },\n                    icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,\n                    <span>{label}</span>,\n                    hasContent && (\n                        <Icon\n                            className={`${CLASSNAME}__chevron`}\n                            icon={isOpen ? mdiChevronUp : mdiChevronDown}\n                            size={Size.xs}\n                        />\n                    ),\n                )\n            )}\n\n            {(closeMode === 'hide' || showChildren) && <ul className={`${CLASSNAME}__children`}>{content}</ul>}\n        </li>\n    );\n});\nSideNavigationItem.displayName = COMPONENT_NAME;\nSideNavigationItem.className = CLASSNAME;\nSideNavigationItem.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","SideNavigation","forwardRef","props","ref","children","className","theme","forwardedProps","content","Children","toArray","filter","isComponent","SideNavigationItem","classNames","Theme","dark","handleBasicClasses","prefix","displayName","DEFAULT_PROPS","emphasis","Emphasis","high","closeMode","icon","isOpen","isSelected","label","linkAs","linkProps","onActionClick","onClick","toggleButtonProps","hasContent","isEmpty","shouldSplitActions","Boolean","showChildren","renderLink","tabIndex","Size","xs","mdiChevronUp","mdiChevronDown","m","low","onKeyDown","onEnterPressed","undefined","defaultProps"],"mappings":"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"}

package/esm/_internal/Tooltip2.js

@@ -136,13 +136,15 @@ function useTooltipOpen(delay, anchorElement) {
       var _events$_i = _slicedToArray(_events[_i], 3),
           node = _events$_i[0],
           eventType = _events$_i[1],
-          evenHandler = _events$_i[2];
+          eventHandler = _events$_i[2];
 
-      node.addEventListener(eventType, evenHandler);
+      node.addEventListener(eventType, eventHandler);
     }
 
     return function () {
-      // Detach events.
+      // Clear pending timers.
+      if (timer) clearTimeout(timer); // Detach events.
+
       var _iteratorNormalCompletion = true;
       var _didIteratorError = false;
       var _iteratorError = undefined;
@@ -152,9 +154,9 @@ function useTooltipOpen(delay, anchorElement) {
           var _step$value = _slicedToArray(_step.value, 3),
               node = _step$value[0],
               eventType = _step$value[1],
-              evenHandler = _step$value[2];
+              eventHandler = _step$value[2];
 
-          node.removeEventListener(eventType, evenHandler);
+          node.removeEventListener(eventType, eventHandler);
         }
       } catch (err) {
         _didIteratorError = true;

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, evenHandler] of events) {\n            node.addEventListener(eventType, evenHandler);\n        }\n        return () => {\n            // Detach events.\n            for (const [node, eventType, evenHandler] of events) {\n                node.removeEventListener(eventType, evenHandler);\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","evenHandler","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    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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"}

package/esm/_internal/components.js

@@ -58,6 +58,7 @@ var Size = {
   xxl: 'xxl',
   tiny: 'tiny',
   regular: 'regular',
+  medium: 'medium',
   big: 'big',
   huge: 'huge'
 };

package/esm/_internal/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":["../../../src/components/index.ts"],"sourcesContent":["import { ValueOf } from '@lumx/react/utils';\n\n/**\n * Alignments.\n */\nexport const Alignment = {\n    bottom: 'bottom',\n    center: 'center',\n    end: 'end',\n    left: 'left',\n    right: 'right',\n    spaceAround: 'space-around',\n    spaceBetween: 'space-between',\n    start: 'start',\n    top: 'top',\n} as const;\nexport type Alignment = ValueOf<typeof Alignment>;\nexport type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;\nexport type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;\n\n/**\n * See SCSS variable $lumx-color-palette\n */\nexport const ColorPalette = {\n    primary: 'primary',\n    secondary: 'secondary',\n    blue: 'blue',\n    dark: 'dark',\n    green: 'green',\n    yellow: 'yellow',\n    red: 'red',\n    light: 'light',\n    grey: 'grey',\n} as const;\nexport type ColorPalette = ValueOf<typeof ColorPalette>;\nexport type Color = ColorPalette | string;\n\n/**\n * See SCSS variable $lumx-color-variants\n */\nexport const ColorVariant = {\n    D1: 'D1',\n    D2: 'D2',\n    L1: 'L1',\n    L2: 'L2',\n    L3: 'L3',\n    L4: 'L4',\n    L5: 'L5',\n    L6: 'L6',\n    N: 'N',\n} as const;\nexport type ColorVariant = ValueOf<typeof ColorVariant>;\n\nexport const Theme = {\n    light: 'light',\n    dark: 'dark',\n} as const;\nexport type Theme = ValueOf<typeof Theme>;\n\nexport const Size = {\n    xxs: 'xxs',\n    xs: 'xs',\n    s: 's',\n    m: 'm',\n    l: 'l',\n    xl: 'xl',\n    xxl: 'xxl',\n    tiny: 'tiny',\n    regular: 'regular',\n    big: 'big',\n    huge: 'huge',\n} as const;\nexport type Size = ValueOf<typeof Size>;\nexport type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\nexport const Orientation = {\n    horizontal: 'horizontal',\n    vertical: 'vertical',\n} as const;\nexport type Orientation = ValueOf<typeof Orientation>;\n\nexport const Emphasis = {\n    low: 'low',\n    medium: 'medium',\n    high: 'high',\n} as const;\nexport type Emphasis = ValueOf<typeof Emphasis>;\n\n/**\n * List of typographies that can't be customized.\n */\nexport const TypographyInterface = {\n    overline: 'overline',\n    caption: 'caption',\n    body1: 'body1',\n    body2: 'body2',\n    subtitle1: 'subtitle1',\n    subtitle2: 'subtitle2',\n    title: 'title',\n    headline: 'headline',\n    display1: 'display1',\n} as const;\nexport type TypographyInterface = ValueOf<typeof TypographyInterface>;\n\n/**\n * List of title typographies that can be customized (via CSS variables).\n */\nexport const TypographyTitleCustom = {\n    title1: 'custom-title1',\n    title2: 'custom-title2',\n    title3: 'custom-title3',\n    title4: 'custom-title4',\n    title5: 'custom-title5',\n    title6: 'custom-title6',\n} as const;\nexport type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;\n\n/**\n * List of typographies that can be customized (via CSS variables).\n */\nconst TypographyCustom = {\n    ...TypographyTitleCustom,\n    intro: 'intro',\n    'body-large': 'body-large',\n    body: 'body',\n    quote: 'quote',\n    'publish-info': 'publish-info',\n    button: 'button',\n} as const;\nexport type TypographyCustom = ValueOf<typeof TypographyCustom>;\n\n/**\n * List of all typographies.\n */\nexport const Typography = {\n    ...TypographyInterface,\n    custom: TypographyCustom,\n} as const;\nexport type Typography = TypographyInterface | TypographyCustom;\n\n/**\n * All available aspect ratios.\n */\nexport const AspectRatio = {\n    /** Intrinsic content ratio. */\n    original: 'original',\n    /** Ratio 16:9 */\n    wide: 'wide',\n    /** Ratio 3:2 */\n    horizontal: 'horizontal',\n    /** Ratio 3:2 */\n    vertical: 'vertical',\n    /** Ratio 1:1 */\n    square: 'square',\n    /** Ratio constrained by the parent. */\n    free: 'free',\n} as const;\nexport type AspectRatio = ValueOf<typeof AspectRatio>;\n\n/**\n * Semantic info about the purpose of the component\n */\nexport const Kind = {\n    info: 'info',\n    success: 'success',\n    warning: 'warning',\n    error: 'error',\n} as const;\nexport type Kind = ValueOf<typeof Kind>;\n"],"names":["Alignment","bottom","center","end","left","right","spaceAround","spaceBetween","start","top","ColorPalette","primary","secondary","blue","dark","green","yellow","red","light","grey","ColorVariant","D1","D2","L1","L2","L3","L4","L5","L6","N","Theme","Size","xxs","xs","s","m","l","xl","xxl","tiny","regular","big","huge","Orientation","horizontal","vertical","Emphasis","low","medium","high","TypographyInterface","overline","caption","body1","body2","subtitle1","subtitle2","title","headline","display1","TypographyTitleCustom","title1","title2","title3","title4","title5","title6","TypographyCustom","intro","body","quote","button","Typography","custom","AspectRatio","original","wide","square","free","Kind","info","success","warning","error"],"mappings":"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"}
+{"version":3,"file":"components.js","sources":["../../../src/components/index.ts"],"sourcesContent":["import { ValueOf } from '@lumx/react/utils';\n\n/**\n * Alignments.\n */\nexport const Alignment = {\n    bottom: 'bottom',\n    center: 'center',\n    end: 'end',\n    left: 'left',\n    right: 'right',\n    spaceAround: 'space-around',\n    spaceBetween: 'space-between',\n    start: 'start',\n    top: 'top',\n} as const;\nexport type Alignment = ValueOf<typeof Alignment>;\nexport type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;\nexport type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;\n\n/**\n * See SCSS variable $lumx-color-palette\n */\nexport const ColorPalette = {\n    primary: 'primary',\n    secondary: 'secondary',\n    blue: 'blue',\n    dark: 'dark',\n    green: 'green',\n    yellow: 'yellow',\n    red: 'red',\n    light: 'light',\n    grey: 'grey',\n} as const;\nexport type ColorPalette = ValueOf<typeof ColorPalette>;\nexport type Color = ColorPalette | string;\n\n/**\n * See SCSS variable $lumx-color-variants\n */\nexport const ColorVariant = {\n    D1: 'D1',\n    D2: 'D2',\n    L1: 'L1',\n    L2: 'L2',\n    L3: 'L3',\n    L4: 'L4',\n    L5: 'L5',\n    L6: 'L6',\n    N: 'N',\n} as const;\nexport type ColorVariant = ValueOf<typeof ColorVariant>;\n\nexport const Theme = {\n    light: 'light',\n    dark: 'dark',\n} as const;\nexport type Theme = ValueOf<typeof Theme>;\n\nexport const Size = {\n    xxs: 'xxs',\n    xs: 'xs',\n    s: 's',\n    m: 'm',\n    l: 'l',\n    xl: 'xl',\n    xxl: 'xxl',\n    tiny: 'tiny',\n    regular: 'regular',\n    medium: 'medium',\n    big: 'big',\n    huge: 'huge',\n} as const;\nexport type Size = ValueOf<typeof Size>;\nexport type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\nexport const Orientation = {\n    horizontal: 'horizontal',\n    vertical: 'vertical',\n} as const;\nexport type Orientation = ValueOf<typeof Orientation>;\n\nexport const Emphasis = {\n    low: 'low',\n    medium: 'medium',\n    high: 'high',\n} as const;\nexport type Emphasis = ValueOf<typeof Emphasis>;\n\n/**\n * List of typographies that can't be customized.\n */\nexport const TypographyInterface = {\n    overline: 'overline',\n    caption: 'caption',\n    body1: 'body1',\n    body2: 'body2',\n    subtitle1: 'subtitle1',\n    subtitle2: 'subtitle2',\n    title: 'title',\n    headline: 'headline',\n    display1: 'display1',\n} as const;\nexport type TypographyInterface = ValueOf<typeof TypographyInterface>;\n\n/**\n * List of title typographies that can be customized (via CSS variables).\n */\nexport const TypographyTitleCustom = {\n    title1: 'custom-title1',\n    title2: 'custom-title2',\n    title3: 'custom-title3',\n    title4: 'custom-title4',\n    title5: 'custom-title5',\n    title6: 'custom-title6',\n} as const;\nexport type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;\n\n/**\n * List of typographies that can be customized (via CSS variables).\n */\nconst TypographyCustom = {\n    ...TypographyTitleCustom,\n    intro: 'intro',\n    'body-large': 'body-large',\n    body: 'body',\n    quote: 'quote',\n    'publish-info': 'publish-info',\n    button: 'button',\n} as const;\nexport type TypographyCustom = ValueOf<typeof TypographyCustom>;\n\n/**\n * List of all typographies.\n */\nexport const Typography = {\n    ...TypographyInterface,\n    custom: TypographyCustom,\n} as const;\nexport type Typography = TypographyInterface | TypographyCustom;\n\n/**\n * All available aspect ratios.\n */\nexport const AspectRatio = {\n    /** Intrinsic content ratio. */\n    original: 'original',\n    /** Ratio 16:9 */\n    wide: 'wide',\n    /** Ratio 3:2 */\n    horizontal: 'horizontal',\n    /** Ratio 3:2 */\n    vertical: 'vertical',\n    /** Ratio 1:1 */\n    square: 'square',\n    /** Ratio constrained by the parent. */\n    free: 'free',\n} as const;\nexport type AspectRatio = ValueOf<typeof AspectRatio>;\n\n/**\n * Semantic info about the purpose of the component\n */\nexport const Kind = {\n    info: 'info',\n    success: 'success',\n    warning: 'warning',\n    error: 'error',\n} as const;\nexport type Kind = ValueOf<typeof Kind>;\n"],"names":["Alignment","bottom","center","end","left","right","spaceAround","spaceBetween","start","top","ColorPalette","primary","secondary","blue","dark","green","yellow","red","light","grey","ColorVariant","D1","D2","L1","L2","L3","L4","L5","L6","N","Theme","Size","xxs","xs","s","m","l","xl","xxl","tiny","regular","medium","big","huge","Orientation","horizontal","vertical","Emphasis","low","high","TypographyInterface","overline","caption","body1","body2","subtitle1","subtitle2","title","headline","display1","TypographyTitleCustom","title1","title2","title3","title4","title5","title6","TypographyCustom","intro","body","quote","button","Typography","custom","AspectRatio","original","wide","square","free","Kind","info","success","warning","error"],"mappings":"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"}

package/esm/_internal/useFocusTrap.js

@@ -1,6 +1,9 @@
 import { useEffect } from 'react';
 import { D as DOCUMENT } from './constants.js';
 
+/** CSS selector listing all tabbable elements. */
+
+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])";
 /**
  * Get first and last elements focusable in an element.
  *
@@ -9,7 +12,7 @@ import { D as DOCUMENT } from './constants.js';
  */
 
 function getFocusable(parentElement) {
-  var focusableElements = parentElement.querySelectorAll('a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]), textarea:not([tabindex="-1"]), input[type="text"]:not([tabindex="-1"]), input[type="radio"]:not([tabindex="-1"]), input[type="checkbox"]:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])');
+  var focusableElements = parentElement.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR);
 
   if (focusableElements.length <= 0) {
     return {};
@@ -52,23 +55,26 @@ function useFocusTrap(focusZoneElement, focusElement) {
           return;
         }
 
-        var _getFocusable = getFocusable(focusZoneElement),
-            first = _getFocusable.first,
-            last = _getFocusable.last; // Prevent focus switch if no focusable available.
+        var focusable = getFocusable(focusZoneElement); // Prevent focus switch if no focusable available.
 
+        if (!focusable.first) {
+          evt.preventDefault();
+          return;
+        }
 
-        if (!first) {
+        if ( // No previous focus
+        !document.activeElement || // Previous focus is at the end of the focus zone.
+        !evt.shiftKey && document.activeElement === focusable.last || // Previous focus is outside the focus zone
+        !focusZoneElement.contains(document.activeElement)) {
+          focusable.first.focus();
           evt.preventDefault();
           return;
         }
 
-        if (evt.shiftKey) {
-          if (document.activeElement === first) {
-            last === null || last === void 0 ? void 0 : last.focus();
-            evt.preventDefault();
-          }
-        } else if (document.activeElement === last) {
-          first === null || first === void 0 ? void 0 : first.focus();
+        if ( // Focus order reversed
+        evt.shiftKey && // Previous focus is at the start of the focus zone.
+        document.activeElement === focusable.first) {
+          focusable.last.focus();
           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/**\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>(\n        'a[href]:not([tabindex=\"-1\"]), button:not([tabindex=\"-1\"]), textarea:not([tabindex=\"-1\"]), input[type=\"text\"]:not([tabindex=\"-1\"]), input[type=\"radio\"]:not([tabindex=\"-1\"]), input[type=\"checkbox\"]:not([tabindex=\"-1\"]), [tabindex]:not([tabindex=\"-1\"])',\n    );\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 { first, last } = getFocusable(focusZoneElement);\n\n                // Prevent focus switch if no focusable available.\n                if (!first) {\n                    evt.preventDefault();\n                    return;\n                }\n\n                if (evt.shiftKey) {\n                    if (document.activeElement === first) {\n                        last?.focus();\n                        evt.preventDefault();\n                    }\n                } else if (document.activeElement === last) {\n                    first?.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":["getFocusable","parentElement","focusableElements","querySelectorAll","length","first","last","useFocusTrap","focusZoneElement","focusElement","rootElement","DOCUMENT","body","useEffect","document","activeElement","blur","focus","onKeyDown","evt","key","preventDefault","shiftKey","addEventListener","removeEventListener","undefined"],"mappings":";;;AAIA;;;;;;;AAMA,SAASA,YAAT,CAAsBC,aAAtB,EAAkD;AAC9C,MAAMC,iBAAiB,GAAGD,aAAa,CAACE,gBAAd,CACtB,2PADsB,CAA1B;;AAIA,MAAID,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;;AAJqC,4BAKdpB,YAAY,CAACQ,gBAAD,CALE;AAAA,YAK9BH,KAL8B,iBAK9BA,KAL8B;AAAA,YAKvBC,IALuB,iBAKvBA,IALuB;;;AAQtC,YAAI,CAACD,KAAL,EAAY;AACRc,UAAAA,GAAG,CAACE,cAAJ;AACA;AACH;;AAED,YAAIF,GAAG,CAACG,QAAR,EAAkB;AACd,cAAIR,QAAQ,CAACC,aAAT,KAA2BV,KAA/B,EAAsC;AAClCC,YAAAA,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAEW,KAAN;AACAE,YAAAA,GAAG,CAACE,cAAJ;AACH;AACJ,SALD,MAKO,IAAIP,QAAQ,CAACC,aAAT,KAA2BT,IAA/B,EAAqC;AACxCD,UAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEY,KAAP;AACAE,UAAAA,GAAG,CAACE,cAAJ;AACH;AACJ,OAtBD;;AAuBAX,MAAAA,WAAW,CAACa,gBAAZ,CAA6B,SAA7B,EAAwCL,SAAxC;AACA,aAAO;AAAA,eAAMR,WAAW,CAACc,mBAAZ,CAAgC,SAAhC,EAA2CN,SAA3C,CAAN;AAAA,OAAP;AACH;;AACD,WAAOO,SAAP;AACH,GAlCQ,EAkCN,CAAChB,YAAD,EAAeD,gBAAf,EAAiCE,WAAjC,CAlCM,CAAT;AAmCH;;;;"}
+{"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;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.2.16",
-        "@lumx/icons": "^2.2.16",
+        "@lumx/core": "^2.2.18",
+        "@lumx/icons": "^2.2.18",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.2.16",
-    "gitHead": "0dfe6e9bceccdcabcd8c9b41627e01b2ef3332df"
+    "version": "2.2.18",
+    "gitHead": "76dbe9453429551c6332560fc8cdb7abab8eeb04"
 }

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

@@ -333,7 +333,7 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
                         label="Checkbox input"
                     />
 
-                    <FlexBox orientation="horizontal">
+                    <FlexBox orientation="horizontal" hAlign="bottom" gap="regular">
                         <DatePickerField
                             locale="fr"
                             label="Start date"
@@ -366,6 +366,8 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
                                 ))}
                             </List>
                         </Select>
+
+                        <Button isDisabled>Disabled button (focus ignored)</Button>
                     </FlexBox>
 
                     {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}

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

@@ -152,6 +152,8 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithFocusabl
         theme="light"
       />
       <FlexBox
+        gap="regular"
+        hAlign="bottom"
         orientation="horizontal"
       >
         <DatePickerField
@@ -210,6 +212,14 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithFocusabl
             </ListItem>
           </List>
         </Select>
+        <Button
+          emphasis="high"
+          isDisabled={true}
+          size="m"
+          theme="light"
+        >
+          Disabled button (focus ignored)
+        </Button>
       </FlexBox>
       <div
         tabIndex={0}

package/src/components/flex-box/FlexBox.stories.tsx

@@ -1,5 +1,5 @@
 import { mdiPencil } from '@lumx/icons';
-import { Alignment, Button, Icon, Orientation } from '@lumx/react';
+import { Alignment, Button, Icon, Orientation, Size } from '@lumx/react';
 import { boolean, number, select, text } from '@storybook/addon-knobs';
 import fromPairs from 'lodash/fromPairs';
 import React from 'react';
@@ -18,6 +18,7 @@ const flexViewKnobConfigs: Array<
     ['fillSpace', boolean],
     ['noShrink', boolean],
     ['wrap', boolean],
+    ['gap', select, [DEFAULT_PROPS.gap, Size.regular, Size.medium, Size.big, Size.huge]],
     ['hAlign', select, [DEFAULT_PROPS.hAlign, Alignment.center, Alignment.top, Alignment.bottom]],
     ['vAlign', select, [DEFAULT_PROPS.vAlign, Alignment.center, Alignment.right, Alignment.left]],
     ['orientation', select, [undefined, Orientation.horizontal, Orientation.vertical]],
@@ -52,7 +53,7 @@ const setupFlexBoxKnobs = (group: string, knobs: FlexBoxPropName[] = []) =>
 const flexChildKnobs: FlexBoxPropName[] = ['fillSpace', 'noShrink', 'marginAuto'];
 
 export const Flex = () => (
-    <FlexBox {...setupFlexBoxKnobs('-flex container', ['orientation', 'hAlign', 'vAlign', 'wrap'])}>
+    <FlexBox {...setupFlexBoxKnobs('-flex container', ['orientation', 'hAlign', 'vAlign', 'wrap', 'gap'])}>
         <FlexBox {...setupFlexBoxKnobs('start', flexChildKnobs)}>
             <Icon icon={mdiPencil} />
         </FlexBox>
@@ -78,6 +79,16 @@ const vAlign = (prefix?: string) =>
         Alignment.center,
     );
 
+const orientation = (prefix?: string) =>
+    select(
+        `${prefix ? `${prefix}: ` : ''}Set orientation`,
+        [Orientation.vertical, Orientation.horizontal],
+        Orientation.vertical,
+    );
+
+const gapSize = (prefix?: string) =>
+    select(`${prefix ? `${prefix}: ` : ''}Gap size`, [Size.regular, Size.medium, Size.big, Size.huge], Size.regular);
+
 export const HorizontalFlex = () => (
     <FlexBox
         orientation={Orientation.horizontal}
@@ -122,6 +133,21 @@ export const VerticalFlex = () => (
     </FlexBox>
 );
 
+export const GapSizeFlex = () => (
+    <FlexBox orientation={orientation()} gap={gapSize()}>
+        <Button>Item 1</Button>
+        <FlexBox vAlign={Alignment.left}>
+            <Button>Item 2</Button>
+        </FlexBox>
+        <FlexBox>
+            <Button>Item 3</Button>
+        </FlexBox>
+        <FlexBox vAlign={Alignment.right}>
+            <Button>Item 4</Button>
+        </FlexBox>
+    </FlexBox>
+);
+
 export const WrapFlex = () => (
     <FlexBox
         orientation={Orientation.horizontal}

package/src/components/flex-box/FlexBox.tsx

@@ -6,7 +6,7 @@ import React, { forwardRef, ReactNode } from 'react';
 import { Size } from '..';
 
 export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
-export type GapSize = Extract<Size, 'regular' | 'big' | 'huge'>;
+export type GapSize = Extract<Size, 'regular' | 'medium' | 'big' | 'huge'>;
 
 /**
  * Defines the props of the component.

package/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap

@@ -89,6 +89,86 @@ Array [
 ]
 `;
 
+exports[`<FlexBox> Snapshots and structure should render story 'GapSizeFlex' 1`] = `
+Array [
+  <div
+    className="lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--gap-regular"
+  >
+    <Button
+      emphasis="high"
+      size="m"
+      theme="light"
+    >
+      Item 1
+    </Button>
+    <FlexBox
+      vAlign="left"
+    >
+      <Button
+        emphasis="high"
+        size="m"
+        theme="light"
+      >
+        Item 2
+      </Button>
+    </FlexBox>
+    <FlexBox>
+      <Button
+        emphasis="high"
+        size="m"
+        theme="light"
+      >
+        Item 3
+      </Button>
+    </FlexBox>
+    <FlexBox
+      vAlign="right"
+    >
+      <Button
+        emphasis="high"
+        size="m"
+        theme="light"
+      >
+        Item 4
+      </Button>
+    </FlexBox>
+  </div>,
+  <div
+    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left"
+  >
+    <Button
+      emphasis="high"
+      size="m"
+      theme="light"
+    >
+      Item 2
+    </Button>
+  </div>,
+  <div
+    className="lumx-flex-box"
+  >
+    <Button
+      emphasis="high"
+      size="m"
+      theme="light"
+    >
+      Item 3
+    </Button>
+  </div>,
+  <div
+    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-right"
+  >
+    <Button
+      emphasis="high"
+      size="m"
+      theme="light"
+    >
+      Item 4
+    </Button>
+  </div>,
+]
+`;
+
 exports[`<FlexBox> Snapshots and structure should render story 'HorizontalFlex' 1`] = `
 Array [
   <div

package/src/components/index.ts

@@ -67,6 +67,7 @@ export const Size = {
     xxl: 'xxl',
     tiny: 'tiny',
     regular: 'regular',
+    medium: 'medium',
     big: 'big',
     huge: 'huge',
 } as const;

package/src/components/side-navigation/SideNavigation.stories.tsx

@@ -163,3 +163,29 @@ export const With3LevelsAndMultiActions = () => {
         </SideNavigation>
     );
 };
+
+/** Using closeMode="hide" keeps children in DOM on close */
+export const CloseModeHide = () => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const toggleL1 = () => setIsOpen(!isOpen);
+
+    return (
+        <SideNavigation>
+            <SideNavigationItem
+                closeMode="hide"
+                label="Level 1"
+                emphasis={Emphasis.high}
+                isOpen={isOpen}
+                onClick={toggleL1}
+                toggleButtonProps={{ label: 'Toggle' }}
+            >
+                <SideNavigationItem
+                    closeMode="hide"
+                    label="Level 2"
+                    emphasis={Emphasis.medium}
+                    toggleButtonProps={{ label: 'Toggle' }}
+                />
+            </SideNavigationItem>
+        </SideNavigation>
+    );
+};

package/src/components/side-navigation/SideNavigationItem.test.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from 'react';
 
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
+import without from 'lodash/without';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
 import { getBasicClass } from '@lumx/react/utils';
@@ -51,13 +52,28 @@ describe(`<${SideNavigationItem.displayName}>`, () => {
             expect(root).toHaveClassName(CLASSNAME);
         });
 
-        it('should render correctly with splitted actions', () => {
+        it('should render correctly with split actions', () => {
             const { root, wrapper } = setup({ linkProps: { href: 'http://toto.com' }, onClick: () => null });
             expect(wrapper).toMatchSnapshot();
 
             expect(root).toExist();
             expect(root).toHaveClassName(CLASSNAME);
         });
+
+        it('should unmount children by default when closed', () => {
+            const { children } = setup({
+                children: <SideNavigationItem label="Child 1" toggleButtonProps={{ label: 'Toggle' }} />,
+            });
+            expect(children).not.toExist();
+        });
+
+        it('should keep children in DOM when closed and with closeMode="hide"', () => {
+            const { children } = setup({
+                closeMode: 'hide',
+                children: <SideNavigationItem key="1" label="Child 1" toggleButtonProps={{ label: 'Toggle' }} />,
+            });
+            expect(children).toExist();
+        });
     });
 
     // 2. Test defaultProps value and important props custom values.
@@ -67,7 +83,8 @@ describe(`<${SideNavigationItem.displayName}>`, () => {
         it('should use default props', () => {
             const { root } = setup();
 
-            for (const prop of Object.keys(DEFAULT_PROPS)) {
+            const propNames = without(Object.keys(DEFAULT_PROPS), 'closeMode');
+            for (const prop of propNames) {
                 const className = getBasicClass({ prefix: CLASSNAME, type: prop, value: DEFAULT_PROPS[prop] });
                 if (className) {
                     expect(root).toHaveClassName(className);

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -41,6 +41,11 @@ export interface SideNavigationItemProps extends GenericProps {
     /** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */
     toggleButtonProps: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color' | 'size'>;
+    /**
+     * Choose how the children are hidden when closed
+     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+     */
+    closeMode?: 'hide' | 'unmount';
     /** On action button click callback. */
     onActionClick?(evt: React.MouseEvent): void;
     /** On click callback. */
@@ -62,6 +67,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<SideNavigationItemProps> = {
     emphasis: Emphasis.high,
+    closeMode: 'unmount',
 };
 
 /**
@@ -85,12 +91,14 @@ export const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement> =
         onActionClick,
         onClick,
         toggleButtonProps,
+        closeMode = 'unmount',
         ...forwardedProps
     } = props;
 
     const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
     const hasContent = !isEmpty(content);
     const shouldSplitActions = Boolean(onActionClick);
+    const showChildren = hasContent && isOpen;
 
     return (
         <li
@@ -100,7 +108,7 @@ export const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement> =
                 className,
                 handleBasicClasses({
                     emphasis,
-                    isOpen,
+                    isOpen: showChildren,
                     isSelected,
                     prefix: CLASSNAME,
                 }),
@@ -151,7 +159,7 @@ export const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement> =
                 )
             )}
 
-            {hasContent && isOpen && <ul className={`${CLASSNAME}__children`}>{content}</ul>}
+            {(closeMode === 'hide' || showChildren) && <ul className={`${CLASSNAME}__children`}>{content}</ul>}
         </li>
     );
 });

package/src/components/side-navigation/__snapshots__/SideNavigationItem.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`<SideNavigationItem> Snapshots and structure should render correctly 1`
 </li>
 `;
 
-exports[`<SideNavigationItem> Snapshots and structure should render correctly with splitted actions 1`] = `
+exports[`<SideNavigationItem> Snapshots and structure should render correctly with split actions 1`] = `
 <li
   className="lumx-side-navigation-item lumx-side-navigation-item--emphasis-high"
 >

package/src/components/tooltip/useTooltipOpen.tsx

@@ -95,13 +95,16 @@ export function useTooltipOpen(delay: number | undefined, anchorElement: HTMLEle
         );
 
         // Attach events
-        for (const [node, eventType, evenHandler] of events) {
-            node.addEventListener(eventType, evenHandler);
+        for (const [node, eventType, eventHandler] of events) {
+            node.addEventListener(eventType, eventHandler);
         }
         return () => {
+            // Clear pending timers.
+            if (timer) clearTimeout(timer);
+
             // Detach events.
-            for (const [node, eventType, evenHandler] of events) {
-                node.removeEventListener(eventType, evenHandler);
+            for (const [node, eventType, eventHandler] of events) {
+                node.removeEventListener(eventType, eventHandler);
             }
         };
     }, [anchorElement, delay]);

package/src/hooks/useFocusTrap.ts

@@ -2,6 +2,15 @@ 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.
  *
@@ -9,9 +18,7 @@ import { DOCUMENT } from '@lumx/react/constants';
  * @return first and last focusable elements
  */
 function getFocusable(parentElement: HTMLElement) {
-    const focusableElements = parentElement.querySelectorAll<HTMLElement>(
-        'a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]), textarea:not([tabindex="-1"]), input[type="text"]:not([tabindex="-1"]), input[type="radio"]:not([tabindex="-1"]), input[type="checkbox"]:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])',
-    );
+    const focusableElements = parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR);
 
     if (focusableElements.length <= 0) {
         return {};
@@ -48,21 +55,34 @@ export function useFocusTrap(
                 if (key !== 'Tab') {
                     return;
                 }
-                const { first, last } = getFocusable(focusZoneElement);
+                const focusable = getFocusable(focusZoneElement);
 
                 // Prevent focus switch if no focusable available.
-                if (!first) {
+                if (!focusable.first) {
+                    evt.preventDefault();
+                    return;
+                }
+
+                if (
+                    // No previous focus
+                    !document.activeElement ||
+                    // Previous focus is at the end of the focus zone.
+                    (!evt.shiftKey && document.activeElement === focusable.last) ||
+                    // Previous focus is outside the focus zone
+                    !focusZoneElement.contains(document.activeElement)
+                ) {
+                    focusable.first.focus();
                     evt.preventDefault();
                     return;
                 }
 
-                if (evt.shiftKey) {
-                    if (document.activeElement === first) {
-                        last?.focus();
-                        evt.preventDefault();
-                    }
-                } else if (document.activeElement === last) {
-                    first?.focus();
+                if (
+                    // Focus order reversed
+                    evt.shiftKey &&
+                    // Previous focus is at the start of the focus zone.
+                    document.activeElement === focusable.first
+                ) {
+                    focusable.last.focus();
                     evt.preventDefault();
                 }
             };

package/types.d.ts

@@ -95,6 +95,7 @@ export declare const Size: {
 	readonly xxl: "xxl";
 	readonly tiny: "tiny";
 	readonly regular: "regular";
+	readonly medium: "medium";
 	readonly big: "big";
 	readonly huge: "huge";
 };
@@ -1091,7 +1092,7 @@ export interface FlagProps extends GenericProps {
  */
 export declare const Flag: Comp<FlagProps, HTMLDivElement>;
 export declare type MarginAutoAlignment = Extract<Alignment, "top" | "bottom" | "right" | "left">;
-export declare type GapSize = Extract<Size, "regular" | "big" | "huge">;
+export declare type GapSize = Extract<Size, "regular" | "medium" | "big" | "huge">;
 /**
  * Defines the props of the component.
  */
@@ -1956,6 +1957,11 @@ export interface SideNavigationItemProps extends GenericProps {
 	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
 	/** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */
 	toggleButtonProps: Pick<IconButtonProps, "label"> & Omit<IconButtonProps, "label" | "onClick" | "icon" | "emphasis" | "color" | "size">;
+	/**
+	 * Choose how the children are hidden when closed
+	 * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+	 */
+	closeMode?: "hide" | "unmount";
 	/** On action button click callback. */
 	onActionClick?(evt: React.MouseEvent): void;
 	/** On click callback. */