@lumx/react 2.2.17 → 2.2.19

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

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

package/src/components/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/Tooltip.tsx

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

package/src/components/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/components/user-block/UserBlock.stories.tsx

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

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

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

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

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

package/src/hooks/useBooleanState.tsx

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

package/src/hooks/useFocusTrap.ts

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

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

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