@lumx/react 3.21.1 → 3.21.2-alpha.0

package/src/components/popover/Popover.tsx

@@ -1,201 +0,0 @@
-import React, { ReactNode, RefObject, useRef } from 'react';
-
-import classNames from 'classnames';
-
-import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
-import { useFocus } from '@lumx/react/hooks/useFocus';
-import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
-import { DOCUMENT } from '@lumx/react/constants';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
-import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
-import { skipRender } from '@lumx/react/utils/react/skipRender';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';
-import { Portal } from '@lumx/react/utils';
-import { useRestoreFocusOnClose } from './useRestoreFocusOnClose';
-import { usePopoverStyle } from './usePopoverStyle';
-import { Elevation, FitAnchorWidth, Offset, Placement, POPOVER_ZINDEX } from './constants';
-
-/**
- * Defines the props of the component.
- */
-export interface PopoverProps extends GenericProps, HasTheme {
-    /** Reference to the DOM element used to set the position of the popover. */
-    anchorRef: React.RefObject<HTMLElement>;
-    /** Customize the root element. (Must accept ref forwarding and props forwarding!). */
-    as?: React.ElementType;
-    /** Element which will act as boundary when opening the popover. */
-    boundaryRef?: RefObject<HTMLElement>;
-    /** Content. */
-    children: ReactNode;
-    /** Whether a click anywhere out of the popover would close it. */
-    closeOnClickAway?: boolean;
-    /** Whether an escape key press would close the popover. */
-    closeOnEscape?: boolean;
-    /** Shadow elevation. */
-    elevation?: Elevation;
-    /**
-     * Manage popover width:
-     *   - `maxWidth`: popover not bigger than anchor
-     *   - `minWidth` or `true`: popover not smaller than anchor
-     *   - `width`: popover equal to the anchor.
-     */
-    fitToAnchorWidth?: FitAnchorWidth | boolean;
-    /** Shrink popover if even after flipping there is not enough space. */
-    fitWithinViewportHeight?: boolean;
-    /** Element to focus when opening the popover. */
-    focusElement?: RefObject<HTMLElement>;
-    /** Whether the focus should go back on the anchor when popover closes and focus is within. */
-    focusAnchorOnClose?: boolean;
-    /** Whether we put an arrow or not. */
-    hasArrow?: boolean;
-    /** Whether the popover is open or not. */
-    isOpen: boolean;
-    /** Offset placement relative to anchor. */
-    offset?: Offset;
-    /** Reference to the parent element that triggered the popover (will get back focus on close or else fallback on the anchor element). */
-    parentElement?: RefObject<HTMLElement>;
-    /** Placement relative to anchor. */
-    placement?: Placement;
-    /** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
-    usePortal?: boolean;
-    /** The element in which the focus trap should be set. Default to popover. */
-    focusTrapZoneElement?: RefObject<HTMLElement>;
-    /** Z-axis position. */
-    zIndex?: number;
-    /** On close callback (on click away or Escape pressed). */
-    onClose?(): void;
-    /** Whether the popover should trap the focus within itself. Default to false. */
-    withFocusTrap?: boolean;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Popover';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<PopoverProps> = {
-    elevation: 3,
-    placement: Placement.AUTO,
-    focusAnchorOnClose: true,
-    usePortal: true,
-    zIndex: POPOVER_ZINDEX,
-};
-
-// Inner component (must be wrapped before export)
-const _InnerPopover = forwardRef<PopoverProps, HTMLDivElement>((props, ref) => {
-    const {
-        anchorRef,
-        as: Component = 'div',
-        children,
-        className,
-        closeOnClickAway,
-        closeOnEscape,
-        elevation = DEFAULT_PROPS.elevation,
-        focusElement,
-        hasArrow,
-        isOpen,
-        onClose,
-        parentElement,
-        usePortal = DEFAULT_PROPS.usePortal,
-        focusAnchorOnClose = DEFAULT_PROPS.focusAnchorOnClose,
-        withFocusTrap,
-        boundaryRef,
-        fitToAnchorWidth,
-        fitWithinViewportHeight,
-        focusTrapZoneElement,
-        offset,
-        placement = DEFAULT_PROPS.placement,
-        style,
-        theme,
-        zIndex = DEFAULT_PROPS.zIndex,
-        ...forwardedProps
-    } = props;
-    const popoverRef = useRef<HTMLDivElement>(null);
-
-    const { styles, attributes, isPositioned, position, setArrowElement, setPopperElement, popperElement } =
-        usePopoverStyle({
-            offset,
-            hasArrow,
-            fitToAnchorWidth,
-            fitWithinViewportHeight,
-            boundaryRef,
-            anchorRef,
-            placement,
-            style,
-            zIndex,
-        });
-
-    const unmountSentinel = useRestoreFocusOnClose({ focusAnchorOnClose, anchorRef, parentElement }, popperElement);
-    const focusZoneElement = focusTrapZoneElement?.current || popoverRef?.current;
-
-    useCallbackOnEscape(onClose, isOpen && closeOnEscape);
-
-    /** Only set focus within if the focus trap is disabled as they interfere with one another. */
-    useFocus(focusElement?.current, !withFocusTrap && isOpen && isPositioned);
-    useFocusTrap(withFocusTrap && isOpen && focusZoneElement, focusElement?.current);
-
-    const clickAwayRefs = useRef([popoverRef, anchorRef]);
-    const mergedRefs = useMergeRefs<HTMLDivElement>(setPopperElement, ref, popoverRef);
-
-    return isOpen ? (
-        <Portal enabled={usePortal}>
-            <Component
-                {...forwardedProps}
-                ref={mergedRefs}
-                className={classNames(
-                    className,
-                    handleBasicClasses({
-                        prefix: CLASSNAME,
-                        theme,
-                        elevation: Math.min(elevation || 0, 5),
-                        position,
-                        isInitializing: !styles.popover?.transform,
-                    }),
-                )}
-                style={styles.popover}
-                {...attributes.popper}
-            >
-                {unmountSentinel}
-                <ClickAwayProvider callback={closeOnClickAway && onClose} childrenRefs={clickAwayRefs}>
-                    {hasArrow && (
-                        <div ref={setArrowElement} className={`${CLASSNAME}__arrow`} style={styles.arrow}>
-                            <svg viewBox="0 0 14 14" aria-hidden>
-                                <path d="M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z" />
-                            </svg>
-                        </div>
-                    )}
-                    <ThemeProvider value={theme}>{children}</ThemeProvider>
-                </ClickAwayProvider>
-            </Component>
-        </Portal>
-    ) : null;
-});
-_InnerPopover.displayName = COMPONENT_NAME;
-
-/**
- * Popover component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Popover: Comp<PopoverProps, HTMLDivElement> = skipRender(
-    // Skip render in SSR
-    () => Boolean(DOCUMENT),
-    _InnerPopover,
-);
-Popover.displayName = COMPONENT_NAME;
-Popover.className = CLASSNAME;
-Popover.defaultProps = DEFAULT_PROPS;

package/src/components/popover/constants.ts

@@ -1,62 +0,0 @@
-import { ValueOf } from '@lumx/react/utils/type';
-
-/**
- * Different possible placements for the popover.
- */
-export const Placement = {
-    AUTO: 'auto',
-    AUTO_END: 'auto-end',
-    AUTO_START: 'auto-start',
-
-    TOP: 'top',
-    TOP_END: 'top-end',
-    TOP_START: 'top-start',
-
-    RIGHT: 'right',
-    RIGHT_END: 'right-end',
-    RIGHT_START: 'right-start',
-
-    BOTTOM: 'bottom',
-    BOTTOM_END: 'bottom-end',
-    BOTTOM_START: 'bottom-start',
-
-    LEFT: 'left',
-    LEFT_END: 'left-end',
-    LEFT_START: 'left-start',
-} as const;
-export type Placement = ValueOf<typeof Placement>;
-
-/**
- * Offset of the popover.
- */
-export interface Offset {
-    /** Offset size along the reference. */
-    along?: number;
-    /** Offset size away from the reference. */
-    away?: number;
-}
-
-/**
- * Popover elevation index.
- */
-export type Elevation = 1 | 2 | 3 | 4 | 5;
-
-/**
- * Popover fit anchor width options.
- */
-export const FitAnchorWidth = {
-    MAX_WIDTH: 'maxWidth',
-    MIN_WIDTH: 'minWidth',
-    WIDTH: 'width',
-} as const;
-export type FitAnchorWidth = ValueOf<typeof FitAnchorWidth>;
-
-/**
- * Arrow size (in pixel).
- */
-export const ARROW_SIZE = 14;
-
-/**
- * Popover default z-index
- */
-export const POPOVER_ZINDEX = 9999;

package/src/components/popover/index.ts

@@ -1,3 +0,0 @@
-export * from './Popover';
-export type { Offset, Elevation } from './constants';
-export { Placement } from './constants';

package/src/components/popover/usePopoverStyle.tsx

@@ -1,184 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import memoize from 'lodash/memoize';
-import { detectOverflow } from '@popperjs/core';
-
-import { DOCUMENT, WINDOW } from '@lumx/react/constants';
-import { PopoverProps } from '@lumx/react/components/popover/Popover';
-import { usePopper } from '@lumx/react/hooks/usePopper';
-import { ARROW_SIZE, FitAnchorWidth, Placement } from './constants';
-
-/**
- * Popper js modifier to fit popover min width to the anchor width.
- */
-const sameWidth = memoize((anchorWidthOption: FitAnchorWidth) => ({
-    name: 'sameWidth',
-    enabled: true,
-    phase: 'beforeWrite',
-    requires: ['computeStyles'],
-    fn({ state }: any) {
-        // eslint-disable-next-line no-param-reassign
-        state.styles.popper[anchorWidthOption] = `${state.rects.reference.width}px`;
-    },
-    effect({ state }: any) {
-        // eslint-disable-next-line no-param-reassign
-        state.elements.popper.style[anchorWidthOption] = `${state.elements.reference.offsetWidth}px`;
-    },
-}));
-
-/**
- * Popper js modifier to compute max size of the popover.
- */
-const maxSize = {
-    name: 'maxSize',
-    enabled: true,
-    phase: 'main',
-    requiresIfExists: ['offset', 'preventOverflow', 'flip'],
-    fn({ state, name, options }: any) {
-        const overflow = detectOverflow(state, options);
-
-        const { y = 0, x = 0 } = state.modifiersData.preventOverflow;
-        const { width, height } = state.rects.popper;
-
-        const [basePlacement] = state.placement.split('-');
-
-        const widthProp = basePlacement === 'left' ? 'left' : 'right';
-        const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
-        // eslint-disable-next-line no-param-reassign
-        state.modifiersData[name] = {
-            width: width - overflow[widthProp] - x,
-            height: height - overflow[heightProp] - y,
-        };
-    },
-};
-
-/**
- * Popper js modifier to apply the max height.
- */
-const applyMaxHeight = {
-    name: 'applyMaxHeight',
-    enabled: true,
-    phase: 'beforeWrite',
-    requires: ['maxSize'],
-    fn({ state }: any) {
-        const { height } = state.modifiersData.maxSize;
-        // eslint-disable-next-line no-param-reassign
-        state.elements.popper.style.maxHeight = `${height - ARROW_SIZE}px`;
-    },
-};
-
-type Options = Pick<
-    PopoverProps,
-    | 'offset'
-    | 'hasArrow'
-    | 'fitToAnchorWidth'
-    | 'fitWithinViewportHeight'
-    | 'boundaryRef'
-    | 'anchorRef'
-    | 'placement'
-    | 'style'
-    | 'zIndex'
->;
-
-interface Output {
-    styles: { arrow?: React.CSSProperties; popover?: React.CSSProperties };
-    attributes: any;
-    isPositioned: boolean;
-    position?: Placement;
-    setArrowElement?: React.Ref<HTMLDivElement>;
-    setPopperElement?: React.Ref<HTMLDivElement>;
-    popperElement: HTMLElement | null;
-}
-
-export function usePopoverStyle({
-    offset,
-    hasArrow,
-    fitToAnchorWidth,
-    fitWithinViewportHeight,
-    boundaryRef,
-    anchorRef,
-    placement,
-    style,
-    zIndex,
-}: Options): Output {
-    const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);
-    const [arrowElement, setArrowElement] = useState<null | HTMLElement>(null);
-
-    const actualOffset: [number, number] = [offset?.along ?? 0, (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE : 0)];
-    const modifiers: any = [
-        {
-            name: 'offset',
-            options: { offset: actualOffset },
-        },
-    ];
-    if (hasArrow && arrowElement) {
-        modifiers.push({
-            name: 'arrow',
-            options: {
-                element: arrowElement,
-                padding: ARROW_SIZE / 2,
-            },
-        });
-    }
-    if (fitToAnchorWidth) {
-        const fitWidth = typeof fitToAnchorWidth === 'string' ? fitToAnchorWidth : FitAnchorWidth.MIN_WIDTH;
-        modifiers.push(sameWidth(fitWidth));
-    }
-    if (fitWithinViewportHeight) {
-        modifiers.push({ ...maxSize, options: { boundary: boundaryRef?.current } }, applyMaxHeight);
-    }
-    if (boundaryRef) {
-        modifiers.push(
-            { name: 'flip', options: { boundary: boundaryRef.current } },
-            { name: 'preventOverflow', options: { boundary: boundaryRef.current } },
-        );
-    }
-
-    const { styles, attributes, state, update } = usePopper(anchorRef.current, popperElement, { placement, modifiers });
-
-    // Auto update popover
-    useEffect(() => {
-        const { current: anchorElement } = anchorRef;
-        if (!update || !popperElement || !anchorElement || !WINDOW?.ResizeObserver) {
-            return undefined;
-        }
-        let running: ReturnType<typeof setTimeout> | undefined;
-        function updateRateLimited() {
-            if (running) return;
-            update?.();
-            running = setTimeout(() => {
-                running = undefined;
-            }, 100);
-        }
-        updateRateLimited();
-
-        // On anchor or popover resize
-        const resizeObserver = new ResizeObserver(updateRateLimited);
-        resizeObserver.observe(anchorElement);
-        resizeObserver.observe(popperElement);
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [anchorRef, popperElement, update]);
-
-    const position = state?.placement ?? placement;
-
-    const popoverStyle = useMemo(() => {
-        const newStyles = { ...style, ...styles.popper, zIndex };
-
-        if (fitWithinViewportHeight && !newStyles.maxHeight) {
-            newStyles.maxHeight = WINDOW?.innerHeight || DOCUMENT?.documentElement.clientHeight;
-        }
-
-        return newStyles;
-    }, [style, styles.popper, zIndex, fitWithinViewportHeight]);
-
-    return {
-        styles: { arrow: styles.arrow, popover: popoverStyle },
-        attributes,
-        isPositioned: (state?.rects?.popper?.y ?? -1) >= 0,
-        position,
-        setArrowElement,
-        setPopperElement,
-        popperElement,
-    };
-}

package/src/components/popover/useRestoreFocusOnClose.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { getFirstAndLastFocusable } from '@lumx/react/utils/browser/focus/getFirstAndLastFocusable';
-import { OnBeforeUnmount } from '@lumx/react/utils/react/OnBeforeUnmount';
-import type { PopoverProps } from './Popover';
-
-/**
- * Provides an unmount sentinel to inject in the popover to detect when it closes and restore the focus to the
- * anchor if needed.
- */
-export function useRestoreFocusOnClose(
-    {
-        focusAnchorOnClose,
-        anchorRef,
-        parentElement,
-    }: Pick<PopoverProps, 'focusAnchorOnClose' | 'anchorRef' | 'parentElement'>,
-    popoverElement?: HTMLElement | null,
-) {
-    const onBeforeUnmountRef = React.useRef<(() => void) | undefined>();
-
-    React.useEffect(() => {
-        if (!popoverElement || !focusAnchorOnClose) {
-            onBeforeUnmountRef.current = undefined;
-            return;
-        }
-
-        onBeforeUnmountRef.current = () => {
-            const isFocusWithin = popoverElement?.contains(document.activeElement);
-            if (!isFocusWithin) return;
-
-            // On next render
-            setTimeout(() => {
-                const anchor = anchorRef.current;
-                const elementToFocus =
-                    // Provided parent element
-                    parentElement?.current ||
-                    // Or first focusable element in anchor
-                    (anchor ? getFirstAndLastFocusable(anchor).first : undefined) ||
-                    // Fallback to anchor
-                    anchor;
-
-                elementToFocus?.focus({ preventScroll: true });
-            }, 0);
-        };
-    }, [anchorRef, focusAnchorOnClose, parentElement, popoverElement]);
-
-    return <OnBeforeUnmount callbackRef={onBeforeUnmountRef} />;
-}

package/src/components/popover-dialog/PopoverDialog.stories.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
-import { mdiMenuDown } from '@lumx/icons';
-import { PopoverDialog } from '.';
-import { Button, IconButton } from '../button';
-
-export default {
-    title: 'LumX components/popover-dialog/PopoverDialog',
-    component: PopoverDialog,
-    parameters: { chromatic: { disableSnapshot: true } },
-};
-
-/**
- * Example PopoverDialog using a button as a trigger
- */
-export const WithButtonTrigger = (props: any) => {
-    const anchorRef = React.useRef(null);
-    const [isOpen, close, open] = useBooleanState(false);
-
-    return (
-        <>
-            <Button ref={anchorRef} onClick={open}>
-                Open popover
-            </Button>
-            <PopoverDialog
-                anchorRef={anchorRef}
-                isOpen={isOpen}
-                onClose={close}
-                placement="bottom"
-                className="lumx-spacing-padding-huge"
-                {...props}
-            >
-                <Button onClick={close}>Close</Button>
-                <Button emphasis="medium">Other button</Button>
-            </PopoverDialog>
-        </>
-    );
-};
-
-/**
- * Example PopoverDialog using an icon button as a trigger
- */
-export const WithIconButtonTrigger = ({ children, ...props }: any) => {
-    const anchorRef = React.useRef(null);
-    const [isOpen, close, open] = useBooleanState(false);
-
-    return (
-        <>
-            <IconButton label="Open popover" ref={anchorRef} onClick={open} icon={mdiMenuDown} />
-            <PopoverDialog
-                anchorRef={anchorRef}
-                isOpen={isOpen}
-                onClose={close}
-                placement="bottom"
-                className="lumx-spacing-padding-huge"
-                label="Example popover"
-                {...props}
-            >
-                <Button onClick={close}>Close</Button>
-                {children}
-            </PopoverDialog>
-        </>
-    );
-};