@lumx/react 2.2.18-alpha-hooks.1 → 2.2.20-alpha-type.1

package/src/components/thumbnail/Thumbnail.tsx

@@ -13,7 +13,7 @@ import classNames from 'classnames';
 
 import { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, Falsy, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
 import { mdiImageBroken } from '@lumx/icons';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -34,7 +34,7 @@ export interface ThumbnailProps extends GenericProps {
     /** Image aspect ratio. */
     aspectRatio?: AspectRatio;
     /** Badge. */
-    badge?: ReactElement;
+    badge?: ReactElement | Falsy;
     /** Image cross origin resource policy. */
     crossOrigin?: ImgHTMLProps['crossOrigin'];
     /** Fallback icon (SVG path) or react node when image fails to load. */

package/src/components/thumbnail/index.ts

@@ -1,2 +1,3 @@
 export * from './Thumbnail';
 export * from './types';
+export { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';

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/useCallbackOnEscape.ts

@@ -1,25 +1,33 @@
 import { DOCUMENT } from '@lumx/react/constants';
 import { Callback, onEscapePressed } from '@lumx/react/utils';
 import { useEffect } from 'react';
+import { Listener, makeListenerTowerContext } from '@lumx/react/utils/makeListenerTowerContext';
+
+const LISTENERS = makeListenerTowerContext();
 
 /**
- * Triggers a callback when the escape key is pressed.
+ * Register a global listener on 'Escape' key pressed.
+ *
+ * If multiple listener are registered, only the last one is maintained. When a listener is unregistered, the previous
+ * one gets activated again.
  *
  * @param callback      Callback
  * @param closeOnEscape Disables the hook when false
- * @param rootElement   Element on which to listen the escape key
  */
-export function useCallbackOnEscape(
-    callback: Callback | undefined,
-    closeOnEscape = true,
-    rootElement = DOCUMENT?.body,
-) {
+export function useCallbackOnEscape(callback: Callback | undefined, closeOnEscape = true) {
     useEffect(() => {
-        if (closeOnEscape && callback && rootElement) {
-            const onKeyDown = onEscapePressed(callback);
-            rootElement.addEventListener('keydown', onKeyDown);
-            return () => rootElement.removeEventListener('keydown', onKeyDown);
+        const rootElement = DOCUMENT?.body;
+        if (!closeOnEscape || !callback || !rootElement) {
+            return undefined;
         }
-        return undefined;
-    }, [callback, closeOnEscape, rootElement]);
+        const onKeyDown = onEscapePressed(callback);
+
+        const listener: Listener = {
+            enable: () => rootElement.addEventListener('keydown', onKeyDown),
+            disable: () => rootElement.removeEventListener('keydown', onKeyDown),
+        };
+
+        LISTENERS.register(listener);
+        return () => LISTENERS.unregister(listener);
+    }, [callback, closeOnEscape]);
 }

package/src/hooks/useFocusTrap.ts

@@ -1,94 +1,85 @@
 import { useEffect } from 'react';
 
 import { DOCUMENT } from '@lumx/react/constants';
+import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
+import { Falsy } from '@lumx/react/utils';
+import { Listener, makeListenerTowerContext } from '@lumx/react/utils/makeListenerTowerContext';
 
-/** 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])`;
+const FOCUS_TRAPS = makeListenerTowerContext();
 
 /**
- * Get first and last elements focusable in an element.
+ * Trap 'Tab' focus switch inside the `focusZoneElement`.
  *
- * @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 };
-}
-
-/**
- * Add a key down event handler to the given root element (document.body by default) to trap the move of focus
- * (TAB and SHIFT-TAB keys) inside the given focusZoneElement.
- * Will focus the given focus element when activating the focus trap.
+ * If multiple focus trap are activated, only the last one is maintained and when a focus trap closes, the previous one
+ * gets activated again.
  *
  * @param focusZoneElement The element in which to trap the focus.
- * @param focusElement     The element to focus when the focus trap is activated.
- * @param rootElement      The element on which the key down event will be placed.
+ * @param focusElement     The element to focus when the focus trap is activated (otherwise the first focusable element
+ *                         will be focused).
  */
-export function useFocusTrap(
-    focusZoneElement: HTMLElement | null,
-    focusElement?: HTMLElement | null,
-    rootElement = DOCUMENT?.body,
-): void {
+export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement?: HTMLElement | null): void {
     useEffect(() => {
-        if (rootElement && focusZoneElement) {
-            (document.activeElement as HTMLElement)?.blur();
-            if (focusElement) {
-                focusElement.focus();
+        // Body element can be undefined in SSR context.
+        const rootElement = DOCUMENT?.body;
+
+        if (!rootElement || !focusZoneElement) {
+            return undefined;
+        }
+
+        // Trap 'Tab' key down focus switch into the focus zone.
+        const trapTabFocusInFocusZone = (evt: KeyboardEvent) => {
+            const { key } = evt;
+            if (key !== 'Tab') {
+                return;
             }
+            const focusable = getFirstAndLastFocusable(focusZoneElement);
 
-            const onKeyDown = (evt: KeyboardEvent) => {
-                const { key } = evt;
-                if (key !== 'Tab') {
-                    return;
-                }
-                const focusable = getFocusable(focusZoneElement);
+            // Prevent focus switch if no focusable available.
+            if (!focusable.first) {
+                evt.preventDefault();
+                return;
+            }
 
-                // Prevent focus switch if no focusable available.
-                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 (
-                    // 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 (
+                // Focus order reversed
+                evt.shiftKey &&
+                // Previous focus is at the start of the focus zone.
+                document.activeElement === focusable.first
+            ) {
+                focusable.last.focus();
+                evt.preventDefault();
+            }
+        };
+
+        const focusTrap: Listener = {
+            enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),
+            disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone),
+        };
 
-                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();
-                }
-            };
-            rootElement.addEventListener('keydown', onKeyDown);
-            return () => rootElement.removeEventListener('keydown', onKeyDown);
+        // SETUP:
+        if (focusElement && focusZoneElement.contains(focusElement)) {
+            // Focus the given element.
+            focusElement.focus();
+        } else {
+            // Focus the first focusable element in the zone.
+            getFirstAndLastFocusable(focusZoneElement).first?.focus();
         }
-        return undefined;
-    }, [focusElement, focusZoneElement, rootElement]);
+        FOCUS_TRAPS.register(focusTrap);
+
+        // TEARDOWN:
+        return () => FOCUS_TRAPS.unregister(focusTrap);
+    }, [focusElement, focusZoneElement]);
 }

package/src/index.ts

@@ -15,6 +15,7 @@ export * from './components/dropdown';
 export * from './components/expansion-panel';
 export * from './components/flag';
 export * from './components/flex-box';
+export * from './components/generic-block';
 export * from './components/grid';
 export * from './components/icon';
 export * from './components/image-block';

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * File generated when storybook is started. Do not edit directly!
+ */
+export default { title: 'LumX components/generic-block/GenericBlock Demos' };
+
+export { App as Default } from './default';