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

package/_internal/{c0a6dba6.js → 230173a8.js}

@@ -4,5 +4,9 @@ const TABBABLE_ELEMENTS_SELECTOR = 'a[href], button, textarea, input:not([type="
 /** CSS selector matching element that are disabled (should not receive focus). */
 const DISABLED_SELECTOR = '[hidden], [tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])';
 
-export { DISABLED_SELECTOR, TABBABLE_ELEMENTS_SELECTOR };
-//# sourceMappingURL=c0a6dba6.js.map
+const isNotDisabled = element => !element.matches(DISABLED_SELECTOR);
+function getFocusableElements(element) {
+  return Array.from(element.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
+}
+
+export { getFocusableElements as g };

package/_internal/{3e2f0517.js → 2a3d237c.js}

@@ -8,5 +8,4 @@ const useBooleanState = defaultValue => {
   return [booleanValue, setToFalse, setToTrue, toggleBoolean];
 };
 
-export { useBooleanState };
-//# sourceMappingURL=3e2f0517.js.map
+export { useBooleanState as u };

package/_internal/{a6dc95cd.js → 2c2b6a89.js}

@@ -1,6 +1,9 @@
-import { forwardRefPolymorphic } from './ebd44733.js';
+import React__default from 'react';
 import { jsx } from 'react/jsx-runtime';
 
+/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
+const forwardRefPolymorphic = React__default.forwardRef;
+
 /**
  * Render clickable element (link, button or custom element)
  * (also does some basic disabled state handling)
@@ -45,5 +48,4 @@ const RawClickable = forwardRefPolymorphic((props, ref) => {
   });
 });
 
-export { RawClickable };
-//# sourceMappingURL=a6dc95cd.js.map
+export { RawClickable as R, forwardRefPolymorphic as f };

package/_internal/{d8ee966d.js → 3181f000.js}

@@ -10,5 +10,4 @@ function useTheme() {
   return React__default.useContext(ThemeContext);
 }
 
-export { ThemeContext, ThemeProvider, useTheme };
-//# sourceMappingURL=d8ee966d.js.map
+export { ThemeProvider as T, useTheme as u };

package/_internal/{8e8c5ab6.js → 36bd7352.js}

@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
 // Older browsers don't support event options, feature detect it.
@@ -188,5 +190,29 @@ var enableBodyScroll = function enableBodyScroll(targetElement) {
   }
 };
 
-export { disableBodyScroll, enableBodyScroll };
-//# sourceMappingURL=8e8c5ab6.js.map
+/**
+ * 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.
+ */
+const useDisableBodyScroll = modalElement => {
+  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]);
+};
+
+export { useDisableBodyScroll as u };

package/_internal/3864a6c1.js

@@ -0,0 +1,436 @@
+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/{11687649.js → 3a1facc0.js}

@@ -14,5 +14,4 @@ function useId() {
   }, []);
 }
 
-export { useId };
-//# sourceMappingURL=11687649.js.map
+export { useId as u };

package/_internal/{68f13c1c.js → 49bbeed3.js}

@@ -1,4 +1,5 @@
+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 };
-//# sourceMappingURL=68f13c1c.js.map
+export { mdiInformation as a, mdiAlert as m };

package/_internal/{cb19eca6.js → 4daccdd5.js}

@@ -21,5 +21,4 @@ function partitionMulti(elements, predicates) {
   return reduce(predicates, (partitioned, predicate) => concat(dropRight(partitioned), partition(last(partitioned), predicate)), [elements]);
 }
 
-export { partitionMulti };
-//# sourceMappingURL=cb19eca6.js.map
+export { partitionMulti as p };