@lumx/react 3.1.1 → 3.1.3-alpha.0

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

@@ -1,362 +0,0 @@
-// 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

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

package/dist/src/constants.ts

@@ -1,17 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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],
-    );
-}