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

package/_internal/components/toolbar/index-7041a5a6.js

@@ -1,61 +0,0 @@
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Toolbar';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {};
-
-/**
- * Toolbar component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Toolbar = forwardRef((props, ref) => {
-  const {
-    after,
-    before,
-    className,
-    label,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      hasAfter: Boolean(after),
-      hasBefore: Boolean(before),
-      hasLabel: Boolean(label),
-      prefix: CLASSNAME
-    })),
-    children: [before && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__before`,
-      children: before
-    }), label && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__label`,
-      children: label
-    }), after && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__after`,
-      children: after
-    })]
-  });
-});
-Toolbar.displayName = COMPONENT_NAME;
-Toolbar.className = CLASSNAME;
-Toolbar.defaultProps = DEFAULT_PROPS;
-
-export { Toolbar };

package/_internal/components/tooltip/index-8bb97e60.js

@@ -1,327 +0,0 @@
-import React__default, { useMemo, cloneElement, useState, useRef, useEffect } from 'react';
-import classNames from 'classnames';
-import { I as IS_BROWSER, D as DOCUMENT, V as VISUALLY_HIDDEN } from '../../d0e3f49e.js';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { m as mergeRefs, u as useMergeRefs } from '../../f0d7d6ea.js';
-import { T as TooltipContextProvider } from '../../9d1336a1.js';
-import { u as useId } from '../../3a1facc0.js';
-import { a as POPOVER_ZINDEX, P as Placement, u as usePopper } from '../../4f4c0582.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { u as useCallbackOnEscape } from '../../76ddefd4.js';
-import { TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
-import { Portal } from '../../utils/Portal/index-6e0a7404.js';
-
-/**
- * Make sure tooltip appear above popovers.
- */
-const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;
-
-/**
- * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
- * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)
- * will be wrapped in a <span>.
- */
-const useInjectTooltipRef = options => {
-  const {
-    children,
-    setAnchorElement,
-    isMounted,
-    id,
-    label,
-    ariaLinkMode
-  } = options;
-  // Only add link when mounted
-  const linkId = isMounted ? id : undefined;
-  return useMemo(() => {
-    if (!label) return children;
-
-    // Non-disabled element
-    if (/*#__PURE__*/React__default.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {
-      const ref = mergeRefs(children.ref, setAnchorElement);
-      const props = {
-        ...children.props,
-        ref
-      };
-
-      // Do not add label/description if the tooltip label is already in aria-label
-      if (linkId && label !== props['aria-label']) {
-        if (props[ariaLinkMode]) props[ariaLinkMode] += ' ';else props[ariaLinkMode] = '';
-        props[ariaLinkMode] += linkId;
-      }
-      return /*#__PURE__*/cloneElement(children, props);
-    }
-    const aria = linkId ? {
-      [ariaLinkMode]: linkId
-    } : undefined;
-    return /*#__PURE__*/jsx("div", {
-      className: "lumx-tooltip-anchor-wrapper",
-      ref: setAnchorElement,
-      ...aria,
-      children: children
-    });
-  }, [label, children, setAnchorElement, linkId, ariaLinkMode]);
-};
-
-/** Return true if the browser does not support pointer hover */
-const isHoverNotSupported = () => !!window.matchMedia?.('(hover: none)').matches;
-
-/** Check if the focus is visible on the given element */
-const isFocusVisible = element => {
-  try {
-    return element?.matches?.(':focus-visible, [data-focus-visible-added]');
-  } catch (_ignored) {
-    // Can fail on non browser env
-    return true;
-  }
-};
-
-/**
- * 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.
- */
-function useTooltipOpen(delay, anchorElement) {
-  const [isOpen, setIsOpen] = useState(false);
-  const onPopperMount = useRef(null);
-
-  // Global close on escape
-  const [closeCallback, setCloseCallback] = useState(undefined);
-  useCallbackOnEscape(isOpen ? closeCallback : undefined);
-  useEffect(() => {
-    if (!anchorElement) {
-      return undefined;
-    }
-    let timer;
-    let openStartTime;
-    let shouldOpen;
-
-    // Run timer to defer updating the isOpen state.
-    const deferUpdate = duration => {
-      if (timer) clearTimeout(timer);
-      const update = () => {
-        setIsOpen(!!shouldOpen);
-      };
-      // Skip timeout in fake browsers
-      if (!IS_BROWSER) update();else timer = setTimeout(update, duration);
-    };
-    const hoverNotSupported = isHoverNotSupported();
-    const hasTouch = 'ontouchstart' in window;
-
-    // Adapt open/close delay
-    const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);
-    const closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close;
-
-    // Open (or/and cancel closing) of tooltip.
-    const open = () => {
-      if (shouldOpen && !timer) return;
-      shouldOpen = true;
-      openStartTime = Date.now();
-      deferUpdate(openDelay);
-    };
-
-    // Close or cancel opening of tooltip
-    const getClose = (overrideDelay = closeDelay) => {
-      if (!shouldOpen && !timer) return;
-      shouldOpen = false;
-      deferUpdate(overrideDelay);
-    };
-    const close = () => getClose(closeDelay);
-    const closeImmediately = () => getClose(0);
-    setCloseCallback(() => closeImmediately);
-
-    // Adapt event to browsers with or without `hover` support.
-    const events = [];
-    if (hoverNotSupported) {
-      /**
-       * Handle touchend event
-       * If end comes before the open delay => cancel tooltip (close immediate).
-       * Else if end comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.
-       */
-      const longPressEnd = evt => {
-        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();
-        }
-      };
-      events.push([anchorElement, hasTouch ? 'touchstart' : 'mousedown', open], [anchorElement, hasTouch ? 'touchend' : 'mouseup', longPressEnd]);
-    } else {
-      events.push([anchorElement, 'mouseenter', open], [anchorElement, 'mouseleave', close], [anchorElement, 'mouseup', closeImmediately]);
-      onPopperMount.current = popperElement => {
-        if (!popperElement) return;
-        // Popper element hover
-        popperElement.addEventListener('mouseenter', open);
-        popperElement.addEventListener('mouseleave', close);
-        // Add to event list to remove on unmount
-        events.push([popperElement, 'mouseenter', open], [popperElement, 'mouseleave', close]);
-      };
-    }
-
-    // Events always applied no matter the browser:.
-    events.push(
-    // Open on focus (only if focus is visible).
-    [anchorElement, 'focusin', e => {
-      // Skip if focus is not visible
-      if (!isFocusVisible(e.target)) return;
-      open();
-    }],
-    // Close on lost focus.
-    [anchorElement, 'focusout', closeImmediately]);
-
-    // Attach events
-    for (const [node, eventType, eventHandler] of events) {
-      node.addEventListener(eventType, eventHandler);
-    }
-    return () => {
-      // Clear pending timers.
-      if (timer) clearTimeout(timer);
-
-      // Detach events.
-      for (const [node, eventType, eventHandler] of events) {
-        node.removeEventListener(eventType, eventHandler);
-      }
-    };
-  }, [anchorElement, delay]);
-  return {
-    isOpen,
-    onPopperMount: onPopperMount.current
-  };
-}
-
-/* eslint-disable react-hooks/rules-of-hooks */
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Tooltip';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  placement: Placement.BOTTOM,
-  closeMode: 'unmount',
-  ariaLinkMode: 'aria-describedby',
-  zIndex: TOOLTIP_ZINDEX
-};
-
-/**
- * Arrow size (in pixel).
- */
-const ARROW_SIZE = 8;
-
-/**
- * Tooltip component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Tooltip = forwardRef((props, ref) => {
-  const {
-    label,
-    children,
-    className,
-    delay,
-    placement = DEFAULT_PROPS.placement,
-    forceOpen,
-    closeMode = DEFAULT_PROPS.closeMode,
-    ariaLinkMode = DEFAULT_PROPS.ariaLinkMode,
-    zIndex = DEFAULT_PROPS.zIndex,
-    ...forwardedProps
-  } = props;
-  // Disable in SSR.
-  if (!DOCUMENT) {
-    return /*#__PURE__*/jsx(Fragment, {
-      children: children
-    });
-  }
-  const id = useId();
-  const [popperElement, setPopperElement] = useState(null);
-  const [anchorElement, setAnchorElement] = useState(null);
-  const {
-    styles,
-    attributes,
-    update
-  } = usePopper(anchorElement, popperElement, {
-    placement,
-    modifiers: [{
-      name: 'offset',
-      options: {
-        offset: [0, ARROW_SIZE]
-      }
-    }]
-  });
-  const position = attributes?.popper?.['data-popper-placement'] ?? placement;
-  const {
-    isOpen: isActivated,
-    onPopperMount
-  } = useTooltipOpen(delay, anchorElement);
-  const isOpen = (isActivated || forceOpen) && !!label;
-  const isMounted = !!label && (isOpen || closeMode === 'hide');
-  const isHidden = !isOpen && closeMode === 'hide';
-  const wrappedChildren = useInjectTooltipRef({
-    children,
-    setAnchorElement,
-    isMounted,
-    id,
-    label,
-    ariaLinkMode: ariaLinkMode
-  });
-
-  // Update on open
-  React__default.useEffect(() => {
-    if (isOpen || popperElement) update?.();
-  }, [isOpen, update, popperElement]);
-  const labelLines = label ? label.split('\n') : [];
-  const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(TooltipContextProvider, {
-      children: wrappedChildren
-    }), isMounted && /*#__PURE__*/jsx(Portal, {
-      children: /*#__PURE__*/jsxs("div", {
-        ref: tooltipRef,
-        ...forwardedProps,
-        id: id,
-        role: "tooltip",
-        className: classNames(className, handleBasicClasses({
-          prefix: CLASSNAME,
-          position,
-          isInitializing: !styles.popper?.transform
-        }), isHidden && VISUALLY_HIDDEN),
-        style: {
-          ...(isHidden ? undefined : styles.popper),
-          zIndex
-        },
-        ...attributes.popper,
-        children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME}__arrow`
-        }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME}__inner`,
-          children: labelLines.map(line => /*#__PURE__*/jsx("p", {
-            children: line
-          }, line))
-        })]
-      })
-    })]
-  });
-});
-Tooltip.displayName = COMPONENT_NAME;
-Tooltip.className = CLASSNAME;
-Tooltip.defaultProps = DEFAULT_PROPS;
-
-export { Tooltip };

package/_internal/components/uploader/index-8f6f55de.js

@@ -1,153 +0,0 @@
-import React__default from 'react';
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useBooleanState } from '../../2a3d237c.js';
-import { u as useId } from '../../3a1facc0.js';
-import { u as useTheme } from '../../3181f000.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { V as VISUALLY_HIDDEN } from '../../d0e3f49e.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useDisableStateProps } from '../../utils/disabled/index-075b99c3.js';
-import { AspectRatio, Size, Theme } from '@lumx/core/js/constants';
-import { I as Icon } from '../../bace1bf1.js';
-
-const UploaderVariant = {
-  square: 'square',
-  rounded: 'rounded',
-  circle: 'circle'
-};
-
-/**
- * Uploader sizes.
- */
-
-/**
- * Extend native HTML input props with specialized `onChange` providing the a `File` array.
- */
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Uploader';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  aspectRatio: AspectRatio.horizontal,
-  size: Size.xl,
-  variant: UploaderVariant.square
-};
-
-/**
- * Uploader component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Uploader = forwardRef((props, ref) => {
-  const {
-    disabledStateProps,
-    otherProps,
-    isAnyDisabled
-  } = useDisableStateProps(props);
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    aspectRatio = DEFAULT_PROPS.aspectRatio,
-    className,
-    label,
-    icon,
-    size = DEFAULT_PROPS.size,
-    theme = defaultTheme,
-    variant = DEFAULT_PROPS.variant,
-    fileInputProps,
-    onClick,
-    ...forwardedProps
-  } = otherProps;
-  // Adjust to square aspect ratio when using circle variants.
-  const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
-  const handleClick = React__default.useCallback(evt => {
-    if (isAnyDisabled) {
-      evt.preventDefault();
-    } else {
-      onClick?.(evt);
-    }
-  }, [isAnyDisabled, onClick]);
-  const generatedInputId = useId();
-  const inputId = fileInputProps?.id || generatedInputId;
-  const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);
-  const wrapper = fileInputProps ? {
-    Component: 'label',
-    props: {
-      htmlFor: inputId
-    }
-  } : {
-    Component: 'button',
-    props: {
-      type: 'button',
-      ...disabledStateProps
-    }
-  };
-  const onChange = React__default.useMemo(() => {
-    if (isAnyDisabled || !fileInputProps?.onChange) return undefined;
-    return evt => {
-      const fileList = evt.target.files;
-      const files = fileList ? Array.from(fileList) : [];
-      fileInputProps.onChange(files, evt);
-    };
-  }, [isAnyDisabled, fileInputProps]);
-  return /*#__PURE__*/jsxs(wrapper.Component, {
-    ref: ref,
-    ...wrapper.props,
-    ...forwardedProps,
-    onClick: handleClick,
-    className: classNames(className, handleBasicClasses({
-      aspectRatio: adjustedAspectRatio,
-      prefix: CLASSNAME,
-      size,
-      theme,
-      variant,
-      isDragHovering,
-      isDisabled: isAnyDisabled
-    })),
-    children: [/*#__PURE__*/jsx("span", {
-      className: `${CLASSNAME}__background`
-    }), /*#__PURE__*/jsxs("span", {
-      className: `${CLASSNAME}__wrapper`,
-      children: [icon && /*#__PURE__*/jsx(Icon, {
-        className: `${CLASSNAME}__icon`,
-        icon: icon,
-        size: Size.s
-      }), label && /*#__PURE__*/jsx("span", {
-        className: `${CLASSNAME}__label`,
-        children: label
-      })]
-    }), fileInputProps && /*#__PURE__*/jsx("input", {
-      type: "file",
-      id: inputId,
-      className: `${CLASSNAME}__input ${VISUALLY_HIDDEN}`,
-      ...disabledStateProps,
-      ...fileInputProps,
-      readOnly: isAnyDisabled,
-      onChange: onChange,
-      onDragEnter: setDragHovering,
-      onDragLeave: unsetDragHovering,
-      onDrop: unsetDragHovering
-    })]
-  });
-});
-Uploader.displayName = COMPONENT_NAME;
-Uploader.className = CLASSNAME;
-Uploader.defaultProps = DEFAULT_PROPS;
-
-export { Uploader, UploaderVariant };

package/_internal/components/user-block/index-70d4ce8f.js

@@ -1,145 +0,0 @@
-import React__default from 'react';
-import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import set from 'lodash/set';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../../8bce732e.js';
-import { u as useTheme } from '../../3181f000.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Orientation, Size, Theme, ColorPalette } from '@lumx/core/js/constants';
-import { Avatar } from '../avatar/index-b8bc3cae.js';
-import { Link } from '../link/index-008bae4b.js';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'UserBlock';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  orientation: Orientation.horizontal,
-  size: Size.m
-};
-
-/**
- * UserBlock component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const UserBlock = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    avatarProps,
-    className,
-    fields,
-    linkProps,
-    linkAs,
-    multipleActions,
-    name,
-    nameProps,
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    orientation = DEFAULT_PROPS.orientation,
-    simpleAction,
-    size = DEFAULT_PROPS.size,
-    theme = defaultTheme,
-    children,
-    additionalFields,
-    after,
-    ...forwardedProps
-  } = props;
-  let componentSize = size;
-
-  // Special case - When using vertical orientation force the size to be Sizes.l.
-  if (orientation === Orientation.vertical) {
-    componentSize = Size.l;
-  }
-  const shouldDisplayActions = orientation === Orientation.vertical;
-  const isLink = Boolean(linkProps?.href || linkAs);
-  const isClickable = !!onClick || isLink;
-  const nameBlock = React__default.useMemo(() => {
-    if (isEmpty(name)) {
-      return null;
-    }
-    let NameComponent = 'span';
-    const nProps = {
-      ...nameProps,
-      className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className)
-    };
-    if (isClickable) {
-      NameComponent = Link;
-      Object.assign(nProps, {
-        ...linkProps,
-        onClick,
-        linkAs,
-        color: ColorPalette.dark
-      });
-    }
-    // Disable avatar focus since the name block is the same link / same button.
-    if (avatarProps) {
-      set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);
-    }
-    return /*#__PURE__*/jsx(NameComponent, {
-      ...nProps,
-      children: name
-    });
-  }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
-  const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;
-  const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/jsx("div", {
-    className: `${CLASSNAME}__fields`,
-    children: fields.map((field, idx) => /*#__PURE__*/jsx("span", {
-      className: `${CLASSNAME}__field`,
-      children: field
-    }, idx))
-  });
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME,
-      orientation,
-      size: componentSize,
-      theme,
-      isClickable
-    })),
-    onMouseLeave: onMouseLeave,
-    onMouseEnter: onMouseEnter,
-    children: [avatarProps && /*#__PURE__*/jsx(Avatar, {
-      linkAs: linkAs,
-      linkProps: linkProps,
-      alt: "",
-      ...avatarProps,
-      className: classNames(`${CLASSNAME}__avatar`, avatarProps.className),
-      size: componentSize,
-      onClick: onClick,
-      theme: theme
-    }), (fields || name || children || additionalFields) && /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME}__wrapper`,
-      children: [children || nameBlock, fieldsBlock, shouldDisplayFields ? additionalFields : null]
-    }), shouldDisplayActions && simpleAction && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__action`,
-      children: simpleAction
-    }), shouldDisplayActions && multipleActions && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__actions`,
-      children: multipleActions
-    }), after ? /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__after`,
-      children: after
-    }) : null]
-  });
-});
-UserBlock.displayName = COMPONENT_NAME;
-UserBlock.className = CLASSNAME;
-UserBlock.defaultProps = DEFAULT_PROPS;
-
-export { UserBlock };

package/_internal/d0e3f49e.js

@@ -1,23 +0,0 @@
-import '@lumx/core/js/constants';
-
-/**
- * Optional global `window` instance (not defined when running SSR).
- */
-const WINDOW = typeof window !== 'undefined' ? window : undefined;
-
-/**
- * Optional global `document` instance (not defined when running SSR).
- */
-const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
-
-/**
- * Check if we are running in a true browser
- */
-const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
-
-/**
- * Visually hidden a11y utility class name
- */
-const VISUALLY_HIDDEN = 'visually-hidden';
-
-export { DOCUMENT as D, IS_BROWSER as I, VISUALLY_HIDDEN as V, WINDOW as W };