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

package/_internal/components/dialog/index-c7066813.js

@@ -1,238 +0,0 @@
-import React__default, { useState, useEffect, useRef, useMemo, Children } from 'react';
-import classNames from 'classnames';
-import { D as DOCUMENT } from '../../d0e3f49e.js';
-import { u as useCallbackOnEscape } from '../../76ddefd4.js';
-import { u as useFocusTrap } from '../../6f084a40.js';
-import { p as partitionMulti } from '../../4daccdd5.js';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { m as mergeRefs } from '../../f0d7d6ea.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { u as useDisableBodyScroll } from '../../36bd7352.js';
-import { u as useTransitionVisibility } from '../../a38bdcd0.js';
-import { T as ThemeProvider } from '../../3181f000.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Portal } from '../../utils/Portal/index-6e0a7404.js';
-import { H as HeadingLevelProvider } from '../../ebdcb0c7.js';
-import { ClickAwayProvider } from '../../utils/ClickAwayProvider/index-1234ce76.js';
-import { Progress, ProgressVariant } from '../progress/index-6f578c31.js';
-import { i as isComponent } from '../../78df9309.js';
-import { Size, DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
-
-/**
- * Convenient hook to create interaction observers.
- *
- * @param elements Elements to observe.
- * @param options  IntersectionObserver options.
- * @return Map of intersections.
- */
-function useIntersectionObserver(elements, options) {
-  const [intersections, setIntersections] = useState(() => new Map());
-  useEffect(() => {
-    if (elements.length < 1 || !elements.some(Boolean)) {
-      return undefined;
-    }
-    const observer = new IntersectionObserver(entries => {
-      for (const entry of entries) {
-        intersections.set(entry.target, entry);
-      }
-      setIntersections(new Map(intersections));
-    }, options);
-    for (const element of elements) {
-      if (element) {
-        observer.observe(element);
-      }
-    }
-    return () => observer.disconnect();
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [...elements]);
-  return intersections;
-}
-
-const isHeader = isComponent('header');
-const isFooter = isComponent('footer');
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Dialog';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  size: Size.big,
-  disableBodyScroll: true
-};
-
-/**
- * Dialog component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Dialog = forwardRef((props, ref) => {
-  if (!DOCUMENT) {
-    // Can't render in SSR.
-    return null;
-  }
-  const {
-    children,
-    className,
-    header,
-    focusElement,
-    forceFooterDivider,
-    forceHeaderDivider,
-    footer,
-    isLoading,
-    isOpen,
-    onClose,
-    parentElement,
-    contentRef,
-    preventAutoClose,
-    size = DEFAULT_PROPS.size,
-    zIndex,
-    dialogProps,
-    onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS.disableBodyScroll,
-    preventCloseOnClick,
-    preventCloseOnEscape,
-    ...forwardedProps
-  } = props;
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const previousOpen = React__default.useRef(isOpen);
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  React__default.useEffect(() => {
-    if (isOpen !== previousOpen.current) {
-      previousOpen.current = isOpen;
-
-      // Focus the parent element on close.
-      if (!isOpen && parentElement && parentElement.current) {
-        parentElement.current.focus();
-      }
-    }
-  }, [isOpen, parentElement]);
-  const shouldPreventCloseOnEscape = preventAutoClose || preventCloseOnEscape;
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useCallbackOnEscape(onClose, isOpen && !shouldPreventCloseOnEscape);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const wrapperRef = useRef(null);
-  /**
-   * Since the `contentRef` comes from the parent and is optional,
-   * we need to create a stable contentRef that will always be available.
-   */
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const localContentRef = useRef(null);
-  // Handle focus trap.
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useDisableBodyScroll(disableBodyScroll && isOpen && localContentRef.current);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [sentinelTop, setSentinelTop] = useState(null);
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [sentinelBottom, setSentinelBottom] = useState(null);
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], {
-    threshold: [0, 1]
-  });
-  const hasTopIntersection = sentinelTop && !(intersections.get(sentinelTop)?.isIntersecting ?? true);
-  const hasBottomIntersection = sentinelBottom && !(intersections.get(sentinelBottom)?.isIntersecting ?? true);
-
-  // Separate header, footer and dialog content from children.
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [[headerChild], [footerChild], content] = useMemo(() => partitionMulti(Children.toArray(children), [isHeader, isFooter]), [children]);
-  const headerChildProps = headerChild?.props;
-  const headerChildContent = headerChildProps?.children;
-  const footerChildProps = footerChild?.props;
-  const footerChildContent = footerChildProps?.children;
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const clickAwayRefs = useRef([wrapperRef]);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const rootRef = useRef(null);
-
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);
-  const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;
-  return isOpen || isVisible ? /*#__PURE__*/jsx(Portal, {
-    children: /*#__PURE__*/jsxs("div", {
-      ref: mergeRefs(rootRef, ref),
-      ...forwardedProps,
-      className: classNames(className, handleBasicClasses({
-        isHidden: !isOpen,
-        isLoading,
-        isShown: isOpen || isVisible,
-        prefix: CLASSNAME,
-        size
-      })),
-      style: {
-        zIndex
-      },
-      children: [/*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME}__overlay`
-      }), /*#__PURE__*/jsx(HeadingLevelProvider, {
-        level: 2,
-        children: /*#__PURE__*/jsx(ThemeProvider, {
-          value: undefined,
-          children: /*#__PURE__*/jsx("div", {
-            className: `${CLASSNAME}__container`,
-            role: "dialog",
-            "aria-modal": "true",
-            ...dialogProps,
-            children: /*#__PURE__*/jsx(ClickAwayProvider, {
-              callback: !shouldPreventCloseOnClickAway && onClose,
-              childrenRefs: clickAwayRefs,
-              parentRef: rootRef,
-              children: /*#__PURE__*/jsxs("section", {
-                className: `${CLASSNAME}__wrapper`,
-                ref: wrapperRef,
-                children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", {
-                  ...headerChildProps,
-                  className: classNames(`${CLASSNAME}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME}__header--has-divider`, headerChildProps?.className),
-                  children: [header, headerChildContent]
-                }), /*#__PURE__*/jsxs("div", {
-                  ref: mergeRefs(contentRef, localContentRef),
-                  className: `${CLASSNAME}__content`,
-                  children: [/*#__PURE__*/jsx("div", {
-                    className: `${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`,
-                    ref: setSentinelTop
-                  }), content, /*#__PURE__*/jsx("div", {
-                    className: `${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`,
-                    ref: setSentinelBottom
-                  })]
-                }), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", {
-                  ...footerChildProps,
-                  className: classNames(`${CLASSNAME}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME}__footer--has-divider`, footerChildProps?.className),
-                  children: [footer, footerChildContent]
-                }), isLoading && /*#__PURE__*/jsx("div", {
-                  className: `${CLASSNAME}__progress-overlay`,
-                  children: /*#__PURE__*/jsx(Progress, {
-                    variant: ProgressVariant.circular
-                  })
-                })]
-              })
-            })
-          })
-        })
-      })]
-    })
-  }) : null;
-});
-Dialog.displayName = COMPONENT_NAME;
-Dialog.className = CLASSNAME;
-Dialog.defaultProps = DEFAULT_PROPS;
-
-export { Dialog };

package/_internal/components/divider/index-b6934baf.js

@@ -1,50 +0,0 @@
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useTheme } from '../../3181f000.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsx } from 'react/jsx-runtime';
-import { Theme } from '@lumx/core/js/constants';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Divider';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {};
-
-/**
- * Divider component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Divider = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    className,
-    theme = defaultTheme,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx("hr", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME,
-      theme
-    }))
-  });
-});
-Divider.displayName = COMPONENT_NAME;
-Divider.className = CLASSNAME;
-Divider.defaultProps = DEFAULT_PROPS;
-
-export { Divider };

package/_internal/components/drag-handle/index-80e5af6c.js

@@ -1,52 +0,0 @@
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useTheme } from '../../3181f000.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsx } from 'react/jsx-runtime';
-import { I as Icon } from '../../bace1bf1.js';
-import { Theme, ColorPalette, Size } from '@lumx/core/js/constants';
-
-const mdiDragVertical = 'M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'DragHandle';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * DragHandle component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const DragHandle = forwardRef((props, ref) => {
-  const defaultTheme = useTheme();
-  const {
-    className,
-    theme = defaultTheme,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME,
-      theme
-    })),
-    children: /*#__PURE__*/jsx(Icon, {
-      icon: mdiDragVertical,
-      color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
-      size: Size.xs
-    })
-  });
-});
-DragHandle.displayName = COMPONENT_NAME;
-DragHandle.className = CLASSNAME;
-
-export { DragHandle };

package/_internal/components/dropdown/index-cebfc268.js

@@ -1,147 +0,0 @@
-import { useEffect, useRef, useMemo, cloneElement } from 'react';
-import classNames from 'classnames';
-import { L as List } from '../../0ea95af1.js';
-import { P as Popover } from '../../3864a6c1.js';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { P as Placement } from '../../4f4c0582.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsx } from 'react/jsx-runtime';
-import { i as isComponent } from '../../78df9309.js';
-
-// The error margin in px we want to have for triggering infinite scroll
-const SCROLL_TRIGGER_MARGIN = 5;
-
-/**
- * Listen to clicks away from a given element and callback the passed in function.
- *
- * @param  ref               A reference to the element on which you want to listen scroll event.
- * @param  [callback]        A callback function to call when the bottom of the reference element is reached.
- * @param  [callbackOnMount] A callback function to call when the component is mounted.
- */
-const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTriggerMargin = SCROLL_TRIGGER_MARGIN) => {
-  useEffect(() => {
-    const {
-      current
-    } = ref;
-    if (!callback || !current) {
-      return undefined;
-    }
-    const isAtBottom = () => Boolean(current && current.scrollHeight - (current.scrollTop + current.clientHeight) <= scrollTriggerMargin);
-    const onScroll = e => {
-      if (isAtBottom()) {
-        callback(e);
-      }
-    };
-    if (isAtBottom()) {
-      onScroll();
-    }
-    current.addEventListener('scroll', onScroll);
-    current.addEventListener('resize', onScroll);
-    return () => {
-      current.removeEventListener('scroll', onScroll);
-      current.removeEventListener('resize', onScroll);
-    };
-  }, [ref, callback, scrollTriggerMargin]);
-  useEffect(() => {
-    if (callback && callbackOnMount) {
-      callback();
-    }
-  }, [callback, callbackOnMount]);
-};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Dropdown';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  closeOnClick: true,
-  closeOnClickAway: true,
-  closeOnEscape: true,
-  fitToAnchorWidth: true,
-  fitWithinViewportHeight: true,
-  placement: Placement.BOTTOM_START,
-  shouldFocusOnOpen: true,
-  focusAnchorOnClose: true
-};
-
-/**
- * Dropdown component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Dropdown = forwardRef((props, ref) => {
-  const {
-    anchorRef,
-    children,
-    className,
-    closeOnClick = DEFAULT_PROPS.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS.closeOnEscape,
-    fitToAnchorWidth = DEFAULT_PROPS.fitToAnchorWidth,
-    fitWithinViewportHeight = DEFAULT_PROPS.fitWithinViewportHeight,
-    isOpen,
-    offset,
-    focusAnchorOnClose = DEFAULT_PROPS.focusAnchorOnClose,
-    onClose,
-    onInfiniteScroll,
-    placement = DEFAULT_PROPS.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS.shouldFocusOnOpen,
-    zIndex,
-    ...forwardedProps
-  } = props;
-  const innerRef = useRef(null);
-  const listElement = useRef(null);
-  useInfiniteScroll(innerRef, onInfiniteScroll);
-  const popperElement = useMemo(() => {
-    return !Array.isArray(children) && isComponent(List)(children) ? /*#__PURE__*/cloneElement(children, {
-      ...children.props,
-      ref: listElement,
-      onClick(evt) {
-        children.props.onClick?.(evt);
-        if (closeOnClick) {
-          onClose?.();
-        }
-      },
-      isClickable: true
-    }) : children;
-  }, [children, closeOnClick, onClose]);
-  return isOpen ? /*#__PURE__*/jsx(Popover, {
-    ref: ref,
-    ...forwardedProps,
-    focusAnchorOnClose: focusAnchorOnClose,
-    anchorRef: anchorRef,
-    className: classNames(className, CLASSNAME),
-    elevation: 0,
-    closeOnClickAway: closeOnClickAway,
-    closeOnEscape: closeOnEscape,
-    fitToAnchorWidth: fitToAnchorWidth,
-    fitWithinViewportHeight: fitWithinViewportHeight,
-    focusElement: shouldFocusOnOpen ? listElement : undefined,
-    isOpen: isOpen,
-    offset: offset,
-    onClose: onClose,
-    placement: placement,
-    zIndex: zIndex,
-    children: /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__menu`,
-      ref: innerRef,
-      children: popperElement
-    })
-  }) : null;
-});
-Dropdown.displayName = COMPONENT_NAME;
-Dropdown.className = CLASSNAME;
-Dropdown.defaultProps = DEFAULT_PROPS;
-
-export { Dropdown };

package/_internal/components/expansion-panel/index-9d45a211.js

@@ -1,167 +0,0 @@
-import React__default, { Children, useRef } from 'react';
-import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { p as partitionMulti } from '../../4daccdd5.js';
-import { u as useTheme } from '../../3181f000.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { I as IS_BROWSER } from '../../d0e3f49e.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { m as mdiChevronUp, a as mdiChevronDown } from '../../0b9c76cb.js';
-import { i as isComponent } from '../../78df9309.js';
-import { DragHandle } from '../drag-handle/index-80e5af6c.js';
-import { Theme, ColorPalette, Emphasis } from '@lumx/core/js/constants';
-import { I as IconButton } from '../../b83e864b.js';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ExpansionPanel';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  closeMode: 'unmount'
-};
-const isDragHandle = isComponent(DragHandle);
-const isHeader = isComponent('header');
-const isFooter = isComponent('footer');
-
-/**
- * ExpansionPanel component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const ExpansionPanel = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    className,
-    closeMode = DEFAULT_PROPS.closeMode,
-    children: anyChildren,
-    hasBackground,
-    hasHeaderDivider,
-    isOpen,
-    label,
-    onClose,
-    onOpen,
-    onToggleOpen,
-    theme = defaultTheme,
-    toggleButtonProps,
-    ...forwardedProps
-  } = props;
-  const children = Children.toArray(anyChildren);
-
-  // Partition children by types.
-  const [[dragHandle], [header], [footer], content] = partitionMulti(children, [isDragHandle, isHeader, isFooter]);
-
-  // Either take the header in children or create one with the label.
-  const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
-  const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
-    className: `${CLASSNAME}__label`,
-    children: label
-  });
-  const toggleOpen = event => {
-    const shouldOpen = !isOpen;
-    if (onOpen && shouldOpen) {
-      onOpen(event);
-    }
-    if (onClose && !shouldOpen) {
-      onClose(event);
-    }
-    if (onToggleOpen) {
-      onToggleOpen(shouldOpen, event);
-    }
-  };
-  const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-  const rootClassName = classNames(className, handleBasicClasses({
-    hasBackground,
-    hasHeader: Boolean(!isEmpty(headerProps.children)),
-    hasHeaderDivider,
-    isClose: !isOpen,
-    isDraggable: Boolean(dragHandle),
-    isOpen,
-    prefix: CLASSNAME,
-    theme
-  }));
-  const wrapperRef = useRef(null);
-
-  // Children stay visible while the open/close transition is running
-  const [isChildrenVisible, setChildrenVisible] = React__default.useState(isOpen);
-  const isOpenRef = React__default.useRef(isOpen);
-  React__default.useEffect(() => {
-    if (isOpen || closeMode === 'hide') {
-      setChildrenVisible(true);
-    } else if (!IS_BROWSER) {
-      // Outside a browser we can't wait for the transition
-      setChildrenVisible(false);
-    }
-    isOpenRef.current = isOpen;
-  }, [closeMode, isOpen]);
-
-  // Change children's visibility on the transition end
-  React__default.useEffect(() => {
-    const {
-      current: wrapper
-    } = wrapperRef;
-    if (!IS_BROWSER || !wrapper) {
-      return undefined;
-    }
-    const onTransitionEnd = () => {
-      setChildrenVisible(isOpenRef.current || closeMode === 'hide');
-    };
-    wrapper.addEventListener('transitionend', onTransitionEnd);
-    return () => wrapper.removeEventListener('transitionend', onTransitionEnd);
-  }, [closeMode]);
-  return /*#__PURE__*/jsxs("section", {
-    ref: ref,
-    ...forwardedProps,
-    className: rootClassName,
-    children: [/*#__PURE__*/jsxs("header", {
-      className: `${CLASSNAME}__header`,
-      onClick: toggleOpen,
-      children: [dragHandle && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME}__header-drag`,
-        children: dragHandle
-      }), /*#__PURE__*/jsx("div", {
-        ...headerProps,
-        className: `${CLASSNAME}__header-content`,
-        children: headerContent
-      }), /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME}__header-toggle`,
-        children: /*#__PURE__*/jsx(IconButton, {
-          ...toggleButtonProps,
-          color: color,
-          emphasis: Emphasis.low,
-          icon: isOpen ? mdiChevronUp : mdiChevronDown,
-          "aria-expanded": isOpen || 'false'
-        })
-      })]
-    }), /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__wrapper`,
-      ref: wrapperRef,
-      children: (isOpen || isChildrenVisible) && /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME}__container`,
-        children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME}__content`,
-          children: content
-        }), footer && /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME}__footer`,
-          children: footer
-        })]
-      })
-    })]
-  });
-});
-ExpansionPanel.displayName = COMPONENT_NAME;
-ExpansionPanel.className = CLASSNAME;
-ExpansionPanel.defaultProps = DEFAULT_PROPS;
-
-export { ExpansionPanel };