@lumx/react 3.0.7 → 3.1.0

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

@@ -0,0 +1,362 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<UserBlock> Snapshots and structure should render story 'Clickable' 1`] = `
+[
+  <div
+    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=""
+      className="lumx-user-block__avatar"
+      image="/demo-assets/avatar1.jpg"
+      onClick={[Function]}
+      size="m"
+      theme="light"
+      thumbnailProps={
+        {
+          "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]}
+      >
+        Emmitt O. Lum
+      </Link>
+      <div
+        className="lumx-user-block__fields"
+      >
+        <span
+          className="lumx-user-block__field"
+          key="0"
+        >
+          Creative developer
+        </span>
+        <span
+          className="lumx-user-block__field"
+          key="1"
+        >
+          Denpasar
+        </span>
+      </div>
+    </div>
+  </div>,
+  <div
+    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=""
+      className="lumx-user-block__avatar"
+      image="/demo-assets/avatar1.jpg"
+      linkProps={
+        {
+          "href": "https://example.com",
+        }
+      }
+      size="m"
+      theme="light"
+      thumbnailProps={
+        {
+          "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"
+      >
+        Emmitt O. Lum
+      </Link>
+      <div
+        className="lumx-user-block__fields"
+      >
+        <span
+          className="lumx-user-block__field"
+          key="0"
+        >
+          Creative developer
+        </span>
+        <span
+          className="lumx-user-block__field"
+          key="1"
+        >
+          Denpasar
+        </span>
+      </div>
+    </div>
+  </div>,
+  <div
+    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=""
+      className="lumx-user-block__avatar"
+      image="/demo-assets/avatar1.jpg"
+      linkAs={[Function]}
+      size="m"
+      theme="light"
+      thumbnailProps={
+        {
+          "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]}
+      >
+        Emmitt O. Lum
+      </Link>
+      <div
+        className="lumx-user-block__fields"
+      >
+        <span
+          className="lumx-user-block__field"
+          key="0"
+        >
+          Creative developer
+        </span>
+        <span
+          className="lumx-user-block__field"
+          key="1"
+        >
+          Denpasar
+        </span>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`<UserBlock> Snapshots and structure should render story 'Default' 1`] = `
+<div
+  className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <Avatar
+    alt=""
+    className="lumx-user-block__avatar"
+    image="/demo-assets/avatar1.jpg"
+    size="m"
+    theme="light"
+    thumbnailProps={
+      {
+        "tabIndex": -1,
+      }
+    }
+  />
+  <div
+    className="lumx-user-block__wrapper"
+  >
+    <span
+      className="lumx-user-block__name"
+    >
+      Emmitt O. Lum
+    </span>
+    <div
+      className="lumx-user-block__fields"
+    >
+      <span
+        className="lumx-user-block__field"
+        key="0"
+      >
+        Creative developer
+      </span>
+      <span
+        className="lumx-user-block__field"
+        key="1"
+      >
+        Denpasar
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<UserBlock> Snapshots and structure should render story 'Sizes' 1`] = `
+[
+  <div
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+  >
+    <Avatar
+      alt=""
+      className="lumx-user-block__avatar"
+      image="/demo-assets/avatar1.jpg"
+      size="s"
+      theme="light"
+      thumbnailProps={
+        {
+          "tabIndex": -1,
+        }
+      }
+    />
+    <div
+      className="lumx-user-block__wrapper"
+    >
+      <span
+        className="lumx-user-block__name"
+      >
+        Emmitt O. Lum
+      </span>
+    </div>
+  </div>,
+  <div
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+  >
+    <Avatar
+      alt=""
+      className="lumx-user-block__avatar"
+      image="/demo-assets/avatar1.jpg"
+      size="m"
+      theme="light"
+      thumbnailProps={
+        {
+          "tabIndex": -1,
+        }
+      }
+    />
+    <div
+      className="lumx-user-block__wrapper"
+    >
+      <span
+        className="lumx-user-block__name"
+      >
+        Emmitt O. Lum
+      </span>
+      <div
+        className="lumx-user-block__fields"
+      >
+        <span
+          className="lumx-user-block__field"
+          key="0"
+        >
+          Creative developer
+        </span>
+        <span
+          className="lumx-user-block__field"
+          key="1"
+        >
+          Denpasar
+        </span>
+      </div>
+    </div>
+  </div>,
+  <div
+    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-l lumx-user-block--theme-light"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+  >
+    <Avatar
+      alt=""
+      className="lumx-user-block__avatar"
+      image="/demo-assets/avatar1.jpg"
+      size="l"
+      theme="light"
+      thumbnailProps={
+        {
+          "tabIndex": -1,
+        }
+      }
+    />
+    <div
+      className="lumx-user-block__wrapper"
+    >
+      <span
+        className="lumx-user-block__name"
+      >
+        Emmitt O. Lum
+      </span>
+      <div
+        className="lumx-user-block__fields"
+      >
+        <span
+          className="lumx-user-block__field"
+          key="0"
+        >
+          Creative developer
+        </span>
+        <span
+          className="lumx-user-block__field"
+          key="1"
+        >
+          Denpasar
+        </span>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`] = `
+<div
+  className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
+>
+  <Avatar
+    alt=""
+    badge={
+      <Badge
+        color="blue"
+      >
+        <Icon
+          icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
+        />
+      </Badge>
+    }
+    className="lumx-user-block__avatar"
+    image="/demo-assets/avatar1.jpg"
+    size="m"
+    theme="light"
+    thumbnailProps={
+      {
+        "tabIndex": -1,
+      }
+    }
+  />
+  <div
+    className="lumx-user-block__wrapper"
+  >
+    <span
+      className="lumx-user-block__name"
+    >
+      Emmitt O. Lum
+    </span>
+    <div
+      className="lumx-user-block__fields"
+    >
+      <span
+        className="lumx-user-block__field"
+        key="0"
+      >
+        Creative developer
+      </span>
+      <span
+        className="lumx-user-block__field"
+        key="1"
+      >
+        Denpasar
+      </span>
+    </div>
+  </div>
+</div>
+`;

package/dist/src/components/user-block/index.ts

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

package/dist/src/constants.ts

@@ -0,0 +1,17 @@
+export {
+    CSS_PREFIX,
+    DIALOG_TRANSITION_DURATION,
+    NOTIFICATION_TRANSITION_DURATION,
+    TOOLTIP_HOVER_DELAY,
+    TOOLTIP_LONG_PRESS_DELAY,
+} from '@lumx/core/js/constants';
+
+/**
+ * Optional global `window` instance (not defined when running SSR).
+ */
+export const WINDOW = typeof window !== `undefined` ? window : undefined;
+
+/**
+ * Optional global `document` instance (not defined when running SSR).
+ */
+export const DOCUMENT = typeof document !== `undefined` ? document : undefined;

package/dist/src/hooks/useBooleanState.tsx

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

package/dist/src/hooks/useCallbackOnEscape.ts

@@ -0,0 +1,34 @@
+import { DOCUMENT } from '@lumx/react/constants';
+import { Callback } from '@lumx/react/utils/type';
+import { onEscapePressed } from '@lumx/react/utils/event';
+import { useEffect } from 'react';
+import { Listener, makeListenerTowerContext } from '@lumx/react/utils/makeListenerTowerContext';
+
+const LISTENERS = makeListenerTowerContext();
+
+/**
+ * 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
+ */
+export function useCallbackOnEscape(callback: Callback | undefined, closeOnEscape = true) {
+    useEffect(() => {
+        const rootElement = DOCUMENT?.body;
+        if (!closeOnEscape || !callback || !rootElement) {
+            return undefined;
+        }
+        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/dist/src/hooks/useChipGroupNavigation.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+
+interface UseChipGroupNavigation {
+    /** the current active chip index */
+    activeChip: number;
+
+    /** callback to be executed when the backspace was pressed */
+    onBackspacePressed(): void;
+
+    /** function that allows to reset the navigation */
+    resetChipNavigation(): void;
+}
+
+export type useChipGroupNavigationType<C = any> = (
+    chips: C[],
+    onChipDeleted: (chip: C) => void,
+    initialActiveChip?: number,
+) => UseChipGroupNavigation;
+
+const INITIAL_STATE_ACTIVE_CHIP = -1;
+
+/**
+ * Hook that provides the necessary information to manage chips navigation.
+ * @param chips             List of chips selected.
+ * @param onChipDeleted     Callback executed when a chip must be eliminated.
+ * @param initialActiveChip Initial active chip index.
+ *
+ * @return chip navigation tools.
+ */
+export const useChipGroupNavigation: useChipGroupNavigationType = (
+    chips,
+    onChipDeleted,
+    initialActiveChip = INITIAL_STATE_ACTIVE_CHIP,
+) => {
+    const [wasBackspacePressed, setWasBackspacePressed] = useState(false);
+    const [activeChip, setActiveChip] = useState(initialActiveChip);
+
+    /**
+     * Resets the active index and backspace control to their initial state
+     */
+    const resetChipNavigation = () => {
+        setWasBackspacePressed(false);
+        setActiveChip(initialActiveChip);
+    };
+
+    /**
+     * Callback to be executed when the backspace was pressed. If there are no chips
+     * selected, it will return immediately. If there are it will check if the
+     * backspace was already pressed. if it was, it means that the user wants to eliminate
+     * the chip, so we execute the `onChipDeleted` function and reset internal state.
+     *
+     * If it was not pressed before, we set the `wasBackspacePressed` flag to true and
+     * highlight the last chip.
+     */
+    const onBackspacePressed = () => {
+        if (chips.length === 0) {
+            return;
+        }
+
+        if (wasBackspacePressed) {
+            const chipDeleted: any = chips[chips.length - 1];
+            onChipDeleted(chipDeleted);
+            resetChipNavigation();
+        } else {
+            setActiveChip(chips.length - 1);
+            setWasBackspacePressed(true);
+        }
+    };
+
+    return {
+        activeChip,
+        onBackspacePressed,
+        resetChipNavigation,
+    };
+};

package/dist/src/hooks/useClickAway.tsx

@@ -0,0 +1,47 @@
+import { RefObject, useEffect } from 'react';
+
+import { Falsy } from '@lumx/react/utils/type';
+
+import isEmpty from 'lodash/isEmpty';
+
+const EVENT_TYPES = ['mousedown', 'touchstart'];
+
+function isClickAway(target: HTMLElement, refs: Array<RefObject<HTMLElement>>): boolean {
+    // The target element is not contained in any of the listed element references.
+    return !refs.some((e) => e?.current?.contains(target));
+}
+
+export interface ClickAwayParameters {
+    /**
+     * A callback function to call when the user clicks away from the elements.
+     */
+    callback: EventListener | Falsy;
+    /**
+     * Elements considered within the click away context (clicking outside them will trigger the click away callback).
+     */
+    childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;
+}
+
+/**
+ * Listen to clicks away from the given elements and callback the passed in function.
+ *
+ * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.
+ */
+export function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {
+    useEffect(() => {
+        const { current: currentRefs } = childrenRefs;
+        if (!callback || !currentRefs || isEmpty(currentRefs)) {
+            return undefined;
+        }
+        const listener: EventListener = (evt) => {
+            if (isClickAway(evt.target as HTMLElement, currentRefs)) {
+                callback(evt);
+            }
+        };
+
+        EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));
+        return () => {
+            EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));
+        };
+    }, [callback, childrenRefs]);
+}

package/dist/src/hooks/useDisableBodyScroll.ts

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+import { Falsy } from '@lumx/react/utils/type';
+
+/**
+ * Disables the scroll on the body to make it only usable in the current modal element.
+ * When the modal element is not provided anymore, the scroll is restored.
+ *
+ * @param modalElement The modal element.
+ */
+export const useDisableBodyScroll = (modalElement: Element | Falsy): void => {
+    useEffect(() => {
+        if (!modalElement) {
+            return undefined;
+        }
+        // Fixing the document overflow style to prevent a bug that scrolls the window to the top.
+        const previousDocumentOverflow = document.documentElement.style.overflow;
+        document.documentElement.style.overflow = 'visible';
+        disableBodyScroll(modalElement);
+        return () => {
+            enableBodyScroll(modalElement);
+            // Restore the previous overflow style.
+            requestAnimationFrame(() => {
+                document.documentElement.style.overflow = previousDocumentOverflow;
+            });
+        };
+    }, [modalElement]);
+};

package/dist/src/hooks/useEventCallback.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+/**
+ * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ *
+ * @param fn A function to run
+ * @return A React callback
+ */
+export default function useEventCallback(fn: (...args: any[]) => any): (event: any) => any {
+    const ref = React.useRef(fn);
+    useEnhancedEffect(() => {
+        ref.current = fn;
+    });
+    return React.useCallback((event: any) => ref.current(event), []);
+}

package/dist/src/hooks/useFocus.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Hook focusing an element when defined and `focus` boolean `true`.
+ *
+ * @param element       Element to focus.
+ * @param shouldFocus   Boolean flag to trigger the focus
+ */
+export function useFocus(element: HTMLElement | null | undefined, shouldFocus = true): void {
+    const [wasFocus, setWasFocus] = useState(false);
+    useEffect(
+        () => {
+            if (shouldFocus && wasFocus !== shouldFocus && element) {
+                element.focus();
+                setWasFocus(shouldFocus);
+            }
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [element, shouldFocus],
+    );
+}