@lumx/react 3.20.1-alpha.36 → 3.20.1-alpha.38

package/_internal/3864a6c1.js

@@ -1,436 +0,0 @@
-import React__default, { useState, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
-import classNames from 'classnames';
-import { u as useCallbackOnEscape } from './76ddefd4.js';
-import { D as DOCUMENT, W as WINDOW } from './d0e3f49e.js';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useMergeRefs } from './f0d7d6ea.js';
-import { g as getFirstAndLastFocusable, u as useFocusTrap } from './6f084a40.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { f as forwardRef } from './8bce732e.js';
-import { T as ThemeProvider } from './3181f000.js';
-import memoize from 'lodash/memoize';
-import { A as ARROW_SIZE, u as usePopper, d as detectOverflow, F as FitAnchorWidth, P as Placement, a as POPOVER_ZINDEX } from './4f4c0582.js';
-import { Portal } from './utils/Portal/index-6e0a7404.js';
-import { ClickAwayProvider } from './utils/ClickAwayProvider/index-1234ce76.js';
-
-/**
- * Hook focusing an element when defined and `focus` boolean `true`.
- *
- * @param element       Element to focus.
- * @param shouldFocus   Boolean flag to trigger the focus
- */
-function useFocus(element, shouldFocus = true) {
-  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]);
-}
-
-/**
- * HOC component wrapping a component to skip render if predicate return falsy
- */
-const skipRender = (predicate, Component) => {
-  const Wrapper = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-    if (!DOCUMENT) {
-      // Can't render in SSR.
-      return null;
-    }
-    return /*#__PURE__*/jsx(Component, {
-      ref: ref,
-      ...props
-    });
-  });
-  Wrapper.displayName = Component.displayName;
-  return Wrapper;
-};
-
-/**
- * Helper component using useLayoutEffect to trigger a callback on before unmount.
- *
- * The callback must be wrapped in a React ref to avoid updating the `useLayoutEffect` before the un-mount
- */
-const OnBeforeUnmount = ({
-  callbackRef
-}) => {
-  useLayoutEffect(() => {
-    return () => {
-      // On unmount
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      callbackRef.current?.();
-    };
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
-  return null;
-};
-
-/**
- * Provides an unmount sentinel to inject in the popover to detect when it closes and restore the focus to the
- * anchor if needed.
- */
-function useRestoreFocusOnClose({
-  focusAnchorOnClose,
-  anchorRef,
-  parentElement
-}, popoverElement) {
-  const onBeforeUnmountRef = React__default.useRef();
-  React__default.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 /*#__PURE__*/jsx(OnBeforeUnmount, {
-    callbackRef: onBeforeUnmountRef
-  });
-}
-
-/**
- * Popper js modifier to fit popover min width to the anchor width.
- */
-const sameWidth = memoize(anchorWidthOption => ({
-  name: 'sameWidth',
-  enabled: true,
-  phase: 'beforeWrite',
-  requires: ['computeStyles'],
-  fn({
-    state
-  }) {
-    // eslint-disable-next-line no-param-reassign
-    state.styles.popper[anchorWidthOption] = `${state.rects.reference.width}px`;
-  },
-  effect({
-    state
-  }) {
-    // 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
-  }) {
-    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
-  }) {
-    const {
-      height
-    } = state.modifiersData.maxSize;
-    // eslint-disable-next-line no-param-reassign
-    state.elements.popper.style.maxHeight = `${height - ARROW_SIZE}px`;
-  }
-};
-function usePopoverStyle({
-  offset,
-  hasArrow,
-  fitToAnchorWidth,
-  fitWithinViewportHeight,
-  boundaryRef,
-  anchorRef,
-  placement,
-  style,
-  zIndex
-}) {
-  const [popperElement, setPopperElement] = useState(null);
-  const [arrowElement, setArrowElement] = useState(null);
-  const actualOffset = [offset?.along ?? 0, (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE : 0)];
-  const modifiers = [{
-    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;
-    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
-  };
-}
-
-/**
- * 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 = {
-  elevation: 3,
-  placement: Placement.AUTO,
-  focusAnchorOnClose: true,
-  usePortal: true,
-  zIndex: POPOVER_ZINDEX
-};
-
-// Inner component (must be wrapped before export)
-const _InnerPopover = forwardRef((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(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(setPopperElement, ref, popoverRef);
-  return isOpen ? /*#__PURE__*/jsx(Portal, {
-    enabled: usePortal,
-    children: /*#__PURE__*/jsxs(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,
-      children: [unmountSentinel, /*#__PURE__*/jsxs(ClickAwayProvider, {
-        callback: closeOnClickAway && onClose,
-        childrenRefs: clickAwayRefs,
-        children: [hasArrow && /*#__PURE__*/jsx("div", {
-          ref: setArrowElement,
-          className: `${CLASSNAME}__arrow`,
-          style: styles.arrow,
-          children: /*#__PURE__*/jsx("svg", {
-            viewBox: "0 0 14 14",
-            "aria-hidden": true,
-            children: /*#__PURE__*/jsx("path", {
-              d: "M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z"
-            })
-          })
-        }), /*#__PURE__*/jsx(ThemeProvider, {
-          value: theme,
-          children: children
-        })]
-      })]
-    })
-  }) : null;
-});
-_InnerPopover.displayName = COMPONENT_NAME;
-
-/**
- * Popover component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Popover = skipRender(
-// Skip render in SSR
-() => Boolean(DOCUMENT), _InnerPopover);
-Popover.displayName = COMPONENT_NAME;
-Popover.className = CLASSNAME;
-Popover.defaultProps = DEFAULT_PROPS;
-
-export { Popover as P, useFocus as u };

package/_internal/3a1facc0.js

@@ -1,17 +0,0 @@
-import React__default from 'react';
-
-let i = 0;
-
-/**
- * Generate a unique id (for use in a11y or other id based DOM linking).
- *
- * (Tries to emulate React 18 useId hook, to remove once we upgrade React)
- */
-function useId() {
-  return React__default.useMemo(() => {
-    i += 1;
-    return `:lumx${i}:`;
-  }, []);
-}
-
-export { useId as u };

package/_internal/49bbeed3.js

@@ -1,5 +0,0 @@
-const mdiAlert = 'M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z';
-
-const mdiInformation = 'M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';
-
-export { mdiInformation as a, mdiAlert as m };

package/_internal/4daccdd5.js

@@ -1,24 +0,0 @@
-import concat from 'lodash/concat';
-import dropRight from 'lodash/dropRight';
-import last from 'lodash/last';
-import partition from 'lodash/partition';
-import reduce from 'lodash/reduce';
-
-/**
- * Similar to lodash `partition` function but working with multiple predicates.
- *
- * @example
- * const isString = (s) => typeof s === 'string'
- * const isNumber = (s) => typeof s === 'number'
- * const [strings, numbers, others] = partitionMulti(['a', 1, 'b', false], [isString, isNumber])
- * //=> [['a', 'b'], [1], [false]]
- *
- * @param  elements array of elements
- * @param  predicates array of predicates to apply on elements
- * @return partitioned elements by the given predicates
- */
-function partitionMulti(elements, predicates) {
-  return reduce(predicates, (partitioned, predicate) => concat(dropRight(partitioned), partition(last(partitioned), predicate)), [elements]);
-}
-
-export { partitionMulti as p };