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

package/src/components/select/WithSelectContext.tsx

@@ -10,7 +10,7 @@ import { Placement } from '@lumx/react/components/popover/Popover';
 
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
+import { useListenFocus } from '@lumx/react/_internal/hooks/useListenFocus';
 import { CoreSelectProps, SelectVariant } from './constants';
 
 /** The display name of the component. */

package/src/components/slider/Slider.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
 
-import useEventCallback from '@lumx/react/hooks/useEventCallback';
+import useEventCallback from '@lumx/react/_internal/hooks/useEventCallback';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
 import { uid } from 'uid';

package/src/components/slideshow/Slideshow.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { SlideshowControls, SlideshowControlsProps, Theme } from '@lumx/react';
 
 import { AUTOPLAY_DEFAULT_INTERVAL, FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
-import { useInterval } from '@lumx/react/hooks/useInterval';
+import { useInterval } from '@lumx/react/_internal/hooks/useInterval';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 

package/src/components/slideshow/useSwipeNavigate.ts

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

package/src/components/switch/Switch.test.tsx

@@ -142,6 +142,16 @@ describe(`<${Switch.displayName}>`, () => {
                 }
             });
         });
+
+        it('should use the given props while passing custom props to input', () => {
+            const { wrapper } = setup({
+                inputProps: {
+                    'aria-labelledby': 'labelledby-id',
+                },
+            });
+
+            expect(wrapper).toMatchSnapshot();
+        });
     });
 
     // 3. Test events.

package/src/components/switch/Switch.tsx

@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, SyntheticEvent, useMemo } from 'react';
+import React, { Children, forwardRef, InputHTMLAttributes, SyntheticEvent, useMemo } from 'react';
 
 import classNames from 'classnames';
 import { uid } from 'uid';
@@ -29,6 +29,8 @@ export interface SwitchProps extends GenericProps {
     value?: string;
     /** On change callback. */
     onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
+    /** optional props for input */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
 
 /**
@@ -71,6 +73,7 @@ export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref)
         position,
         theme,
         value,
+        inputProps = {},
         ...forwardedProps
     } = props;
     const switchId = useMemo(() => id || `switch-${uid()}`, [id]);
@@ -109,6 +112,7 @@ export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref)
                     checked={isChecked}
                     aria-checked={Boolean(isChecked)}
                     onChange={handleChange}
+                    {...inputProps}
                 />
 
                 <div className={`${CLASSNAME}__input-placeholder`}>

package/src/components/switch/__snapshots__/Switch.test.tsx.snap

@@ -29,6 +29,36 @@ exports[`<Switch> Conditions should not display the \`helper\` if no \`label\` i
 </div>
 `;
 
+exports[`<Switch> Props should use the given props while passing custom props to input 1`] = `
+<div
+  className="lumx-switch lumx-switch--position-left lumx-switch--theme-light lumx-switch--is-unchecked"
+>
+  <div
+    className="lumx-switch__input-wrapper"
+  >
+    <input
+      aria-checked={false}
+      aria-labelledby="labelledby-id"
+      className="lumx-switch__input-native"
+      id="switch-uid"
+      onChange={[Function]}
+      role="switch"
+      type="checkbox"
+    />
+    <div
+      className="lumx-switch__input-placeholder"
+    >
+      <div
+        className="lumx-switch__input-background"
+      />
+      <div
+        className="lumx-switch__input-indicator"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<Switch> Snapshots and structure should render correctly with a \`label\` and a \`helper\` 1`] = `
 <div
   className="lumx-switch lumx-switch--position-left lumx-switch--theme-light lumx-switch--is-unchecked"

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 classNames from 'classnames';
-import React, { forwardRef, ReactNode } from 'react';
-import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
+import { useRovingTabIndex } from '@lumx/react/_internal/hooks/useRovingTabIndex';
 
 export enum TabListLayout {
     clustered = 'clustered',

package/src/components/tooltip/Tooltip.tsx

@@ -8,13 +8,13 @@ import classNames from 'classnames';
 
 import { Placement } from '@lumx/react/components/popover/Popover';
 
-import { DOCUMENT } from '@lumx/react/constants';
+import { DOCUMENT, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } 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,7 +49,6 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * Component default props.
  */
 const DEFAULT_PROPS: Partial<TooltipProps> = {
-    delay: 500,
     placement: Placement.BOTTOM,
 };
 
@@ -90,7 +89,11 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
     });
 
     const position = attributes?.popper?.['data-popper-placement'] ?? placement;
-    const isOpen = useTooltipOpen(delay as number, anchorElement) || forceOpen;
+    const isOpen =
+        useOpenHoverOrLongPress(anchorElement, {
+            hover: { openDelay: delay ?? TOOLTIP_HOVER_DELAY.openDelay, closeDelay: TOOLTIP_HOVER_DELAY.closeDelay },
+            longPress: TOOLTIP_LONG_PRESS_DELAY,
+        }) || forceOpen;
     const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen as boolean, id);
 
     return (

package/src/constants.ts

@@ -1,4 +1,10 @@
-export { CSS_PREFIX, DIALOG_TRANSITION_DURATION, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
+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).

package/src/hooks/useOpenHoverOrLongPress.ts

@@ -0,0 +1,140 @@
+import { onEscapePressed } from '@lumx/react/utils';
+import { useEffect, useState } from 'react';
+import { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';
+
+interface OpenCloseConfig {
+    openDelay: number;
+    closeDelay: number;
+}
+
+interface Config {
+    hover: OpenCloseConfig;
+    longPress: OpenCloseConfig;
+}
+
+export const DEFAULT_CONFIG: Config = {
+    hover: {
+        openDelay: 500,
+        closeDelay: 0,
+    },
+    longPress: {
+        openDelay: 250,
+        closeDelay: 3000,
+    },
+};
+
+/**
+ * Hook controlling an open/close action on hover on device supporting pointer hover
+ * and on long press on device not supporting pointer hover.
+ *
+ * @param  anchorElement Anchor element on which the hover or longPress is watched.
+ * @param  config        Open/close delay configuration.
+ * @return true/false boolean.
+ */
+export function useOpenHoverOrLongPress(
+    anchorElement: HTMLElement | null,
+    config: { hover?: Partial<OpenCloseConfig>; longPress?: Partial<OpenCloseConfig> } = {},
+): boolean {
+    const [isOpen, setIsOpen] = useState(false);
+    const activation = browserDoesNotSupportHover() ? 'longPress' : 'hover';
+    const { openDelay: defaultOpenDelay, closeDelay: defaultCloseDelay } = DEFAULT_CONFIG[activation];
+    const { openDelay = defaultOpenDelay, closeDelay = defaultCloseDelay } = config?.[activation] || {};
+
+    useEffect(() => {
+        if (!anchorElement) {
+            return undefined;
+        }
+        let timer: number | undefined;
+        let openStartTime: number | undefined;
+        let shouldOpen: boolean | undefined;
+
+        // Run timer to defer updating the isOpen state.
+        const deferUpdate = (duration: number) => {
+            if (timer) clearTimeout(timer);
+            timer = setTimeout(() => {
+                setIsOpen(!!shouldOpen);
+            }, duration) as any;
+        };
+
+        const hasTouch = 'ontouchstart' in window;
+
+        // Open (or/and cancel closing).
+        const open = () => {
+            if (shouldOpen && !timer) return;
+            shouldOpen = true;
+            openStartTime = Date.now();
+            deferUpdate(openDelay);
+        };
+
+        // Close or cancel opening
+        const close = (overrideDelay = closeDelay) => {
+            if (!shouldOpen && !timer) return;
+            shouldOpen = false;
+            deferUpdate(overrideDelay);
+        };
+        const closeImmediately = () => close(0);
+
+        /**
+         * Handle touchend event
+         * If `touchend` comes before the open delay => cancel open (close immediate).
+         * Else if `touchend` comes after the open delay => open takes priority, the anchor's default touch end event is prevented.
+         */
+        const touchEnd = (evt: Event) => {
+            if (!openStartTime) return;
+            if (Date.now() - openStartTime >= openDelay) {
+                // Tooltip take priority, event prevented.
+                evt.stopPropagation();
+                evt.preventDefault();
+                anchorElement.focus();
+                // Close with delay.
+                close();
+            } else {
+                // Close immediately.
+                closeImmediately();
+            }
+        };
+
+        const events: Array<[Node, Event['type'], any]> = [];
+
+        // Long press activation.
+        if (activation === 'longPress') {
+            events.push(
+                [anchorElement, hasTouch ? 'touchstart' : 'mousedown', open],
+                [anchorElement, hasTouch ? 'touchend' : 'mouseup', touchEnd],
+            );
+        }
+
+        // Hover activation.
+        if (activation === 'hover') {
+            events.push(
+                [anchorElement, 'mouseenter', open],
+                [anchorElement, 'mouseleave', close],
+                [anchorElement, 'mouseup', closeImmediately],
+            );
+        }
+
+        // Events always applied no matter the browser:
+        events.push(
+            // Open on focus.
+            [anchorElement, 'focusin', open],
+            // Close on lost focus.
+            [anchorElement, 'focusout', closeImmediately],
+            // Close on ESC keydown
+            [anchorElement, 'keydown', onEscapePressed(closeImmediately)],
+        );
+
+        // Attach events
+        for (const [node, eventType, evenHandler] of events) {
+            node.addEventListener(eventType, evenHandler);
+        }
+        return () => {
+            // Detach events.
+            for (const [node, eventType, evenHandler] of events) {
+                node.removeEventListener(eventType, evenHandler);
+            }
+            closeImmediately();
+        };
+    }, [activation, anchorElement, closeDelay, openDelay]);
+
+    return isOpen;
+}

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/hooks/useClickAway';
+import { ClickAwayParameters, useClickAway } from '@lumx/react/_internal/hooks/useClickAway';
 
 const ClickAwayAncestorContext = createContext<ClickAwayParameters['refs'] | null>(null);
 

package/src/utils/browserDoesNotSupportHover.test.js

@@ -0,0 +1,24 @@
+import { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';
+
+const originalMatchMedia = global.matchMedia;
+
+describe('browserDoesNotSupportHover', () => {
+    afterAll(() => {
+        global.matchMedia = originalMatchMedia;
+    });
+
+    it('should return `false` on browsers that do not support matchMedia', () => {
+        global.matchMedia = undefined;
+        expect(browserDoesNotSupportHover()).toBe(false);
+    });
+
+    it('should return `false` on browsers that support matchMedia and does support hover', () => {
+        global.matchMedia = () => ({ matches: false });
+        expect(browserDoesNotSupportHover()).toBe(false);
+    });
+
+    it('should return `true` on browsers that support matchMedia and does not support hover', () => {
+        global.matchMedia = () => ({ matches: true });
+        expect(browserDoesNotSupportHover()).toBe(true);
+    });
+});

package/src/utils/browserDoesNotSupportHover.ts

@@ -0,0 +1,2 @@
+/** Return true if the browser does not support pointer hover */
+export const browserDoesNotSupportHover = (): boolean => !!window.matchMedia?.('(hover: none)').matches;

package/types.d.ts

@@ -599,6 +599,8 @@ export interface CheckboxProps extends GenericProps {
 	value?: string;
 	/** On change callback. */
 	onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
+	/** optional props for input */
+	inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
 /**
  * Checkbox component.
@@ -666,7 +668,7 @@ export interface ChipGroupProps extends GenericProps {
 	children: ReactNode;
 }
 export declare const ChipGroup: Comp<ChipGroupProps, HTMLDivElement> & {
-	useChipGroupNavigation: import("../../hooks/useChipGroupNavigation").useChipGroupNavigationType<any>;
+	useChipGroupNavigation: import("../../_internal/hooks/useChipGroupNavigation").useChipGroupNavigationType<any>;
 };
 /**
  * Comment block variants.
@@ -1480,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("../../hooks/useKeyboardListNavigation").useKeyboardListNavigationType;
+	useKeyboardListNavigation: import("../../_internal/hooks/useKeyboardListNavigation").useKeyboardListNavigationType;
 };
 export declare type ListItemSize = Extract<Size, "tiny" | "regular" | "big" | "huge">;
 /**
@@ -2167,6 +2169,8 @@ export interface SwitchProps extends GenericProps {
 	value?: string;
 	/** On change callback. */
 	onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
+	/** optional props for input */
+	inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
 /**
  * Switch component.

package/esm/index2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index2.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/src/components/tooltip/useTooltipOpen.tsx

@@ -1,112 +0,0 @@
-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;
-}