@lumx/react 2.2.3-alpha-export-hook1 → 2.2.5

package/src/components/slideshow/useSwipeNavigate.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { detectHorizontalSwipe } from '@lumx/core/js/utils/detectHorizontalSwipe';
+import { detectHorizontalSwipe } from '@lumx/core/js/utils';
 
 const isTouchDevice = () => 'ontouchstart' in window;
 

package/src/components/tabs/TabList.tsx

@@ -1,11 +1,11 @@
-import classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
-
 import { Alignment, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { Comp, GenericProps, handleBasicClasses } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import { useRovingTabIndex } from '@lumx/react/_internal/hooks/useRovingTabIndex';
+
+import classNames from 'classnames';
+import React, { forwardRef, ReactNode } from 'react';
+import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
 
 export enum TabListLayout {
     clustered = 'clustered',

package/src/components/thumbnail/Thumbnail.tsx

@@ -188,7 +188,13 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                         ...focusPointStyle,
                     }}
                     ref={mergeRefs(setImgElement, propImgRef)}
-                    className={classNames(`${CLASSNAME}__image`, isLoading && `${CLASSNAME}__image--is-loading`)}
+                    className={classNames(
+                        handleBasicClasses({
+                            prefix: `${CLASSNAME}__image`,
+                            isLoading,
+                            hasDefinedSize: Boolean(imgProps?.height && imgProps.width),
+                        }),
+                    )}
                     crossOrigin={crossOrigin}
                     src={image}
                     alt={alt}

package/src/components/tooltip/Tooltip.tsx

@@ -8,13 +8,13 @@ import classNames from 'classnames';
 
 import { Placement } from '@lumx/react/components/popover/Popover';
 
-import { DOCUMENT, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';
+import { DOCUMENT } from '@lumx/react/constants';
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
-import { useOpenHoverOrLongPress } from '@lumx/react/hooks/useOpenHoverOrLongPress';
 import { useInjectTooltipRef } from './useInjectTooltipRef';
+import { useTooltipOpen } from './useTooltipOpen';
 
 /** Position of the tooltip relative to the anchor element. */
 export type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;
@@ -49,6 +49,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<TooltipProps> = {
+    delay: 500,
     placement: Placement.BOTTOM,
 };
 
@@ -89,11 +90,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
     });
 
     const position = attributes?.popper?.['data-popper-placement'] ?? placement;
-    const isOpen =
-        useOpenHoverOrLongPress(anchorElement, {
-            hover: { openDelay: delay ?? TOOLTIP_HOVER_DELAY.openDelay, closeDelay: TOOLTIP_HOVER_DELAY.closeDelay },
-            longPress: TOOLTIP_LONG_PRESS_DELAY,
-        }) || forceOpen;
+    const isOpen = useTooltipOpen(delay as number, anchorElement) || forceOpen;
     const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen as boolean, id);
 
     return (

package/src/components/tooltip/useTooltipOpen.tsx

@@ -0,0 +1,112 @@
+import { Callback, onEscapePressed } from '@lumx/react/utils';
+import { useEffect, useRef, useState } from 'react';
+import pull from 'lodash/pull';
+import debounce from 'lodash/debounce';
+
+type Tooltip = { open: Callback; close: Callback; anchorElement: HTMLElement };
+
+/**
+ * This singleton handle a global `mouseover` event listener on the `document` in order to toggle tooltips when
+ * entering and leaving their anchor element.
+ */
+const tooltipMouseToggle = (() => {
+    /** List of tooltips to toggle on anchor enter/leave. */
+    let tooltips: Array<Tooltip> | undefined;
+
+    /** Global listener added on the document. */
+    let globalListener: undefined | ((evt: MouseEvent) => void);
+
+    function addGlobalListener() {
+        if (globalListener) return;
+        globalListener = debounce((evt) => {
+            if (!tooltips || !evt.target) return;
+            for (const { open, close, anchorElement } of tooltips) {
+                if (anchorElement.contains(evt.target as any)) {
+                    open();
+                } else {
+                    close();
+                }
+            }
+        }, 10);
+        document.addEventListener('mouseover', globalListener);
+    }
+
+    function removeGlobalListener() {
+        if (!globalListener) return;
+        document.removeEventListener('mouseover', globalListener);
+        globalListener = undefined;
+    }
+
+    return {
+        addTooltip(tooltip: Tooltip) {
+            if (!tooltips) {
+                tooltips = [];
+                addGlobalListener();
+            }
+            tooltips.push(tooltip);
+        },
+        removeTooltip(actions: Tooltip) {
+            if (!tooltips) return;
+            pull(tooltips, actions);
+            if (tooltips.length === 0) {
+                removeGlobalListener();
+                tooltips = undefined;
+            }
+        },
+    };
+})();
+
+/**
+ * Hook controlling tooltip visibility using mouse hover the anchor and delay.
+ *
+ * @param  delay         Delay in millisecond to display the tooltip.
+ * @param  anchorElement Tooltip anchor element.
+ * @return whether or not to show the tooltip.
+ */
+export function useTooltipOpen(delay: number, anchorElement: HTMLElement | null): boolean {
+    const timer = useRef<number>();
+    const shouldOpen = useRef<boolean>(false);
+    const [isOpen, setIsOpen] = useState(false);
+
+    useEffect(() => {
+        if (!anchorElement) {
+            return undefined;
+        }
+        const tooltip: Tooltip = {
+            anchorElement,
+            open() {
+                if (!shouldOpen.current) {
+                    shouldOpen.current = true;
+                    timer.current = setTimeout(() => {
+                        setIsOpen(shouldOpen.current);
+                    }, delay) as any;
+                }
+            },
+            close() {
+                if (timer.current) {
+                    clearTimeout(timer.current);
+                    timer.current = undefined;
+                }
+                if (shouldOpen.current) {
+                    shouldOpen.current = false;
+                    setIsOpen(shouldOpen.current);
+                }
+            },
+        };
+        const keydown = onEscapePressed(tooltip.close);
+
+        tooltipMouseToggle.addTooltip(tooltip);
+        anchorElement.addEventListener('focusin', tooltip.open);
+        anchorElement.addEventListener('focusout', tooltip.close);
+        anchorElement.addEventListener('keydown', keydown);
+        return () => {
+            tooltipMouseToggle.removeTooltip(tooltip);
+            anchorElement.removeEventListener('focusin', tooltip.open);
+            anchorElement.removeEventListener('focusout', tooltip.close);
+            anchorElement.removeEventListener('keydown', keydown);
+            tooltip.close();
+        };
+    }, [anchorElement, delay, timer, shouldOpen]);
+
+    return isOpen;
+}

package/src/constants.ts

@@ -1,10 +1,4 @@
-export {
-    CSS_PREFIX,
-    DIALOG_TRANSITION_DURATION,
-    NOTIFICATION_TRANSITION_DURATION,
-    TOOLTIP_HOVER_DELAY,
-    TOOLTIP_LONG_PRESS_DELAY,
-} from '@lumx/core/js/constants';
+export { CSS_PREFIX, DIALOG_TRANSITION_DURATION, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
 
 /**
  * Optional global `window` instance (not defined when running SSR).

package/src/{_internal/hooks → hooks}/useInterval.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 import isFunction from 'lodash/isFunction';
-import { Callback } from '../../utils';
+import { Callback } from '../utils';
 
 /**
  * Making setInterval Declarative with React Hooks.

package/src/utils/ClickAwayProvider/ClickAwayProvider.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useEffect } from 'react';
 import pull from 'lodash/pull';
-import { ClickAwayParameters, useClickAway } from '@lumx/react/_internal/hooks/useClickAway';
+import { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';
 
 const ClickAwayAncestorContext = createContext<ClickAwayParameters['refs'] | null>(null);
 

package/types.d.ts

@@ -668,7 +668,7 @@ export interface ChipGroupProps extends GenericProps {
 	children: ReactNode;
 }
 export declare const ChipGroup: Comp<ChipGroupProps, HTMLDivElement> & {
-	useChipGroupNavigation: import("../../_internal/hooks/useChipGroupNavigation").useChipGroupNavigationType<any>;
+	useChipGroupNavigation: import("../../hooks/useChipGroupNavigation").useChipGroupNavigationType<any>;
 };
 /**
  * Comment block variants.
@@ -1482,7 +1482,7 @@ export interface ListProps extends GenericProps {
 	onListItemSelected?(key: Key, index: number, evt: SyntheticEvent): void;
 }
 export declare const List: Comp<ListProps, HTMLUListElement> & {
-	useKeyboardListNavigation: import("../../_internal/hooks/useKeyboardListNavigation").useKeyboardListNavigationType;
+	useKeyboardListNavigation: import("../../hooks/useKeyboardListNavigation").useKeyboardListNavigationType;
 };
 export declare type ListItemSize = Extract<Size, "tiny" | "regular" | "big" | "huge">;
 /**

package/esm/_internal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../node_modules/uid/dist/index.mjs"],"sourcesContent":["var IDX=256, HEX=[], SIZE=256, BUFFER;\nwhile (IDX--) HEX[IDX] = (IDX + 256).toString(16).substring(1);\n\nexport function uid(len) {\n\tvar i=0, tmp=(len || 11);\n\tif (!BUFFER || ((IDX + tmp) > SIZE*2)) {\n\t\tfor (BUFFER='',IDX=0; i < SIZE; i++) {\n\t\t\tBUFFER += HEX[Math.random() * 256 | 0];\n\t\t}\n\t}\n\n\treturn BUFFER.substring(IDX, IDX++ + tmp);\n}\n"],"names":[],"mappings":"AAAA,IAAI,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC;AACtC,OAAO,GAAG,EAAE,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAC/D;AACO,SAAS,GAAG,CAAC,GAAG,EAAE;AACzB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC;AAC1B,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE;AACxC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE;AACvC,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE;AACF;AACA,CAAC,OAAO,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC;AAC3C;;;;"}

package/esm/_internal/mdi.js

@@ -1,22 +0,0 @@
-// Material Design Icons v5.8.55
-var mdiAlert = "M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z";
-var mdiAlertCircle = "M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z";
-var mdiArrowDown = "M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z";
-var mdiArrowUp = "M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z";
-var mdiCheck = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z";
-var mdiCheckCircle = "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z";
-var mdiChevronDown = "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z";
-var mdiChevronLeft = "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z";
-var mdiChevronRight = "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z";
-var mdiChevronUp = "M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z";
-var mdiClose = "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
-var mdiCloseCircle = "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z";
-var mdiDragVertical = "M9,3H11V5H9V3M13,3H15V5H13V3M9,7H11V9H9V7M13,7H15V9H13V7M9,11H11V13H9V11M13,11H15V13H13V11M9,15H11V17H9V15M13,15H15V17H13V15M9,19H11V21H9V19M13,19H15V21H13V19Z";
-var mdiImageBroken = "M19,3A2,2 0 0,1 21,5V11H19V13H19L17,13V15H15V17H13V19H11V21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19M21,15V19A2,2 0 0,1 19,21H19L15,21V19H17V17H19V15H21M19,8.5A0.5,0.5 0 0,0 18.5,8H5.5A0.5,0.5 0 0,0 5,8.5V15.5A0.5,0.5 0 0,0 5.5,16H11V15H13V13H15V11H17V9H19V8.5Z";
-var mdiInformation = "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z";
-var mdiMenuDown = "M7,10L12,15L17,10H7Z";
-var mdiRadioboxBlank = "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z";
-var mdiRadioboxMarked = "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z";
-
-export { mdiInformation as a, mdiCheckCircle as b, mdiAlertCircle as c, mdiClose as d, mdiCheck as e, mdiChevronRight as f, mdiChevronLeft as g, mdiDragVertical as h, mdiChevronUp as i, mdiChevronDown as j, mdiRadioboxMarked as k, mdiRadioboxBlank as l, mdiAlert as m, mdiCloseCircle as n, mdiMenuDown as o, mdiArrowUp as p, mdiArrowDown as q, mdiImageBroken as r };
-//# sourceMappingURL=mdi.js.map