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

package/_internal/5cef5e8c.js

@@ -1,74 +0,0 @@
-import classNames from 'classnames';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { u as useTheme } from './3181f000.js';
-import { FlexBox } from './components/flex-box/index-0d6b6b43.js';
-import { T as Text } from './e913a3af.js';
-
-/** Internal component used to render image captions */
-const ImageCaption = props => {
-  const defaultTheme = useTheme();
-  const {
-    baseClassName,
-    theme = defaultTheme,
-    as = 'figcaption',
-    title,
-    titleProps,
-    description,
-    descriptionProps,
-    tags,
-    captionStyle,
-    align,
-    truncate
-  } = props;
-  if (!title && !description && !tags) return null;
-  const titleColor = {
-    color: theme === 'dark' ? 'light' : 'dark'
-  };
-  const baseColor = {
-    color: theme === 'dark' ? 'light' : 'dark',
-    colorVariant: 'L2'
-  };
-
-  // Display description as string or HTML
-  const descriptionContent = typeof description === 'string' ? {
-    children: description
-  } : {
-    dangerouslySetInnerHTML: description
-  };
-  return /*#__PURE__*/jsxs(FlexBox, {
-    as: as,
-    className: classNames(baseClassName && `${baseClassName}__wrapper`),
-    style: captionStyle,
-    orientation: "vertical",
-    vAlign: align,
-    hAlign: align === 'center' ? align : undefined,
-    gap: "regular",
-    children: [(title || description) && /*#__PURE__*/jsxs(Text, {
-      as: "p",
-      className: classNames(baseClassName && `${baseClassName}__caption`),
-      truncate: truncate,
-      ...baseColor,
-      children: [title && /*#__PURE__*/jsx(Text, {
-        ...titleProps,
-        as: "span",
-        className: classNames(titleProps?.className, baseClassName && `${baseClassName}__title`),
-        typography: "subtitle1",
-        ...titleColor,
-        children: title
-      }), ' ', description && /*#__PURE__*/jsx(Text, {
-        ...descriptionProps,
-        as: "span",
-        className: classNames(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
-        typography: "body1",
-        ...descriptionContent
-      })]
-    }), tags && /*#__PURE__*/jsx(FlexBox, {
-      className: classNames(baseClassName && `${baseClassName}__tags`),
-      orientation: "horizontal",
-      vAlign: align,
-      children: tags
-    })]
-  });
-};
-
-export { ImageCaption as I };

package/_internal/6a60381c.js

@@ -1,117 +0,0 @@
-import classNames from 'classnames';
-import './d0e3f49e.js';
-import { handleBasicClasses } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from './8bce732e.js';
-import { R as RawClickable } from './2c2b6a89.js';
-import { jsx } from 'react/jsx-runtime';
-import { useDisableStateProps } from './utils/disabled/index-075b99c3.js';
-import { Emphasis, Theme, ColorPalette, CSS_PREFIX } from '@lumx/core/js/constants';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ButtonRoot';
-const BUTTON_WRAPPER_CLASSNAME = `${CSS_PREFIX}-button-wrapper`;
-const BUTTON_CLASSNAME = `${CSS_PREFIX}-button`;
-
-/**
- * Render a button wrapper with the ButtonRoot inside.
- *
- * @param  props Component props.
- * @return React element.
- */
-const renderButtonWrapper = props => {
-  const {
-    color,
-    emphasis,
-    variant,
-    fullWidth
-  } = props;
-  const adaptedColor = emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);
-  const wrapperClassName = classNames(handleBasicClasses({
-    color: adaptedColor,
-    prefix: BUTTON_WRAPPER_CLASSNAME,
-    variant,
-    fullWidth
-  }));
-  const buttonProps = {
-    ...props,
-    hasBackground: false
-  };
-  return /*#__PURE__*/jsx("div", {
-    className: wrapperClassName,
-    children: /*#__PURE__*/jsx(ButtonRoot, {
-      ...buttonProps
-    })
-  });
-};
-
-/**
- * ButtonRoot component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const ButtonRoot = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const {
-    'aria-label': ariaLabel,
-    children,
-    className,
-    color,
-    emphasis,
-    hasBackground,
-    isSelected,
-    isActive,
-    isFocused,
-    isHovered,
-    linkAs,
-    size,
-    theme,
-    variant,
-    fullWidth,
-    ...forwardedProps
-  } = otherProps;
-  const adaptedColor = color || emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light || emphasis === Emphasis.high && ColorPalette.primary || ColorPalette.dark;
-  if (hasBackground) {
-    return renderButtonWrapper({
-      ...props,
-      ref,
-      variant,
-      color: adaptedColor
-    });
-  }
-  const buttonClassName = classNames(className, handleBasicClasses({
-    color: adaptedColor,
-    emphasis,
-    isSelected,
-    isDisabled: props.isDisabled || props['aria-disabled'],
-    isActive,
-    isFocused,
-    isHovered,
-    prefix: BUTTON_CLASSNAME,
-    size,
-    theme: emphasis === Emphasis.high && theme,
-    variant,
-    fullWidth
-  }));
-  return /*#__PURE__*/jsx(RawClickable, {
-    as: linkAs || (forwardedProps.href ? 'a' : 'button'),
-    ...forwardedProps,
-    ...disabledStateProps,
-    "aria-disabled": isAnyDisabled,
-    "aria-label": ariaLabel,
-    ref: ref,
-    className: buttonClassName,
-    children: children
-  });
-});
-ButtonRoot.displayName = COMPONENT_NAME;
-ButtonRoot.defaultProps = {};
-
-export { ButtonRoot as B };

package/_internal/6f084a40.js

@@ -1,111 +0,0 @@
-import { useEffect } from 'react';
-import { D as DOCUMENT } from './d0e3f49e.js';
-import { g as getFocusableElements } from './230173a8.js';
-import { m as makeListenerTowerContext } from './76ddefd4.js';
-
-/**
- * Get first and last elements focusable in an element.
- *
- * @param parentElement The element in which to search focusable elements.
- * @return first and last focusable elements
- */
-function getFirstAndLastFocusable(parentElement) {
-  const focusableElements = getFocusableElements(parentElement);
-
-  // First non disabled element.
-  const first = focusableElements[0];
-  // Last non disabled element.
-  const last = focusableElements[focusableElements.length - 1];
-  if (last && first) {
-    return {
-      first,
-      last
-    };
-  }
-  return {};
-}
-
-const FOCUS_TRAPS = makeListenerTowerContext();
-
-/**
- * Trap 'Tab' focus switch inside the `focusZoneElement`.
- *
- * If multiple focus trap are activated, only the last one is maintained and when a focus trap closes, the previous one
- * gets activated again.
- *
- * @param focusZoneElement The element in which to trap the focus.
- * @param focusElement     The element to focus when the focus trap is activated (otherwise the first focusable element
- *                         will be focused).
- */
-function useFocusTrap(focusZoneElement, focusElement) {
-  useEffect(() => {
-    // Body element can be undefined in SSR context.
-    const rootElement = DOCUMENT?.body;
-    if (!rootElement || !focusZoneElement) {
-      return undefined;
-    }
-
-    // Use the shadow root as focusZoneElement when available
-    const focusZoneElementOrShadowRoot = focusZoneElement.shadowRoot || focusZoneElement;
-
-    // Trap 'Tab' key down focus switch into the focus zone.
-    const trapTabFocusInFocusZone = evt => {
-      const {
-        key
-      } = evt;
-      if (key !== 'Tab') {
-        return;
-      }
-      const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);
-
-      // Prevent focus switch if no focusable available.
-      if (!focusable.first) {
-        evt.preventDefault();
-        return;
-      }
-      const activeElement = focusZoneElement.shadowRoot ? focusZoneElement.shadowRoot.activeElement : document.activeElement;
-      if (
-      // No previous focus
-      !activeElement ||
-      // Previous focus is at the end of the focus zone.
-      !evt.shiftKey && activeElement === focusable.last ||
-      // Previous focus is outside the focus zone
-      !focusZoneElementOrShadowRoot.contains(activeElement)) {
-        focusable.first.focus();
-        evt.preventDefault();
-        return;
-      }
-      if (
-      // Focus order reversed
-      evt.shiftKey &&
-      // Previous focus is at the start of the focus zone.
-      activeElement === focusable.first) {
-        focusable.last.focus();
-        evt.preventDefault();
-      }
-    };
-    const focusTrap = {
-      enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),
-      disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone)
-    };
-
-    // SETUP:
-    if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {
-      // Focus the given element.
-      focusElement.focus({
-        preventScroll: true
-      });
-    } else {
-      // Focus the first focusable element in the zone.
-      getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first?.focus({
-        preventScroll: true
-      });
-    }
-    FOCUS_TRAPS.register(focusTrap);
-
-    // TEARDOWN:
-    return () => FOCUS_TRAPS.unregister(focusTrap);
-  }, [focusElement, focusZoneElement]);
-}
-
-export { getFirstAndLastFocusable as g, useFocusTrap as u };

package/_internal/76ddefd4.js

@@ -1,61 +0,0 @@
-import { D as DOCUMENT } from './d0e3f49e.js';
-import { onEscapePressed } from '@lumx/core/js/utils';
-import { useEffect } from 'react';
-import last from 'lodash/last';
-import pull from 'lodash/pull';
-
-/**
- * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
- * listener are disabled).
- * When a listener gets unregistered, the previously registered listener gets enabled again.
- */
-function makeListenerTowerContext() {
-  const LISTENERS = [];
-  return {
-    register(listener) {
-      // Disable previous listener.
-      last(LISTENERS)?.disable();
-      // Keep track of current listener.
-      LISTENERS.push(listener);
-      // Enable current listener.
-      listener.enable();
-    },
-    unregister(listener) {
-      // Disable current listener.
-      listener.disable();
-      // Remove current listener.
-      pull(LISTENERS, listener);
-      // Enable previous listener.
-      last(LISTENERS)?.enable();
-    }
-  };
-}
-
-const LISTENERS = makeListenerTowerContext();
-
-/**
- * Register a global listener on 'Escape' key pressed.
- *
- * If multiple listener are registered, only the last one is maintained. When a listener is unregistered, the previous
- * one gets activated again.
- *
- * @param callback      Callback
- * @param closeOnEscape Disables the hook when false
- */
-function useCallbackOnEscape(callback, closeOnEscape = true) {
-  useEffect(() => {
-    const rootElement = DOCUMENT?.body;
-    if (!closeOnEscape || !callback || !rootElement) {
-      return undefined;
-    }
-    const onKeyDown = onEscapePressed(callback);
-    const listener = {
-      enable: () => rootElement.addEventListener('keydown', onKeyDown),
-      disable: () => rootElement.removeEventListener('keydown', onKeyDown)
-    };
-    LISTENERS.register(listener);
-    return () => LISTENERS.unregister(listener);
-  }, [callback, closeOnEscape]);
-}
-
-export { makeListenerTowerContext as m, useCallbackOnEscape as u };

package/_internal/78df9309.js

@@ -1,19 +0,0 @@
-import get from 'lodash/get';
-
-/**
- * Properties of a component to use to determine it's name.
- * In the order of preference.
- */
-const NAME_PROPERTIES = ['type', 'type.displayName', 'displayName', 'name', 'type.name', 'props.mdxType', '_reactInternalFiber.elementType.name'];
-/**
- * Create a predicate function that checks if a ReactNode is a react element from the given component.
- *
- * @param  component React function component or the component name
- * @return predicate returning true if value is instance of the component
- */
-const isComponent = component => instance => {
-  const componentName = typeof component === 'string' ? component : component.displayName;
-  return !!get(instance, '$$typeof') && NAME_PROPERTIES.some(nameProperty => get(instance, nameProperty) === componentName);
-};
-
-export { isComponent as i };

package/_internal/7ad474e4.js

@@ -1,98 +0,0 @@
-import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import { getRootClassName, getBasicClass } from '@lumx/core/js/utils/className';
-import { u as useTheme, T as ThemeProvider } from './3181f000.js';
-import { f as forwardRef } from './8bce732e.js';
-import { B as ButtonRoot } from './6a60381c.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { i as isComponent } from './78df9309.js';
-import { T as Text } from './e913a3af.js';
-import { Emphasis, Size, Theme } from '@lumx/core/js/constants';
-import { I as Icon } from './bace1bf1.js';
-
-const ButtonEmphasis = Emphasis;
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Button';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  emphasis: Emphasis.high,
-  size: Size.m
-};
-
-/**
- * Button component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Button = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    children,
-    className,
-    emphasis = DEFAULT_PROPS.emphasis,
-    leftIcon,
-    rightIcon,
-    size = DEFAULT_PROPS.size,
-    theme = defaultTheme,
-    ...forwardedProps
-  } = props;
-  const buttonClassName = classNames(className, getBasicClass({
-    prefix: CLASSNAME,
-    type: 'hasLeftIcon',
-    value: !isEmpty(leftIcon)
-  }), getBasicClass({
-    prefix: CLASSNAME,
-    type: 'hasRightIcon',
-    value: !isEmpty(rightIcon)
-  }));
-  return /*#__PURE__*/jsxs(ButtonRoot, {
-    ref: ref,
-    emphasis,
-    size,
-    theme,
-    ...forwardedProps,
-    className: buttonClassName,
-    variant: "button",
-    children: [leftIcon && !isEmpty(leftIcon) &&
-    /*#__PURE__*/
-    // Theme is handled in the button scss
-    jsx(ThemeProvider, {
-      value: undefined,
-      children: /*#__PURE__*/jsx(Icon, {
-        icon: leftIcon
-      })
-    }), children && (isComponent(Text)(children) ? children : /*#__PURE__*/jsx("span", {
-      children: children
-    })), rightIcon && !isEmpty(rightIcon) &&
-    /*#__PURE__*/
-    // Theme is handled in the button scss
-    jsx(ThemeProvider, {
-      value: undefined,
-      children: /*#__PURE__*/jsx(Icon, {
-        icon: rightIcon
-      })
-    })]
-  });
-});
-Button.displayName = COMPONENT_NAME;
-Button.className = CLASSNAME;
-Button.defaultProps = DEFAULT_PROPS;
-
-export { ButtonEmphasis as B, Button as a };

package/_internal/7b293665.js

@@ -1,19 +0,0 @@
-import React__default, { Children } from 'react';
-import { i as isComponentType } from './e806b848.js';
-import { I as Icon } from './bace1bf1.js';
-
-/** Force wrap spaces around icons to make sure they are never stuck against text. */
-function wrapChildrenIconWithSpaces(children) {
-  if (children === null || children === undefined) return undefined;
-  return Children.toArray(children).flatMap(child => {
-    if (isComponentType(Icon)(child)) {
-      return [' ', child, ' '];
-    }
-    if (/*#__PURE__*/React__default.isValidElement(child) && child.props && typeof child.props === 'object' && 'children' in child.props) {
-      return /*#__PURE__*/React__default.cloneElement(child, undefined, wrapChildrenIconWithSpaces(child.props.children));
-    }
-    return child;
-  });
-}
-
-export { wrapChildrenIconWithSpaces as w };

package/_internal/7daf0f24.js

@@ -1,76 +0,0 @@
-import { useEffect } from 'react';
-
-const useRovingTabIndex = ({
-  parentRef,
-  elementSelector,
-  keepTabIndex,
-  onElementFocus,
-  extraDependencies = []
-}) => {
-  useEffect(() => {
-    const parent = parentRef?.current;
-    if (!parent) {
-      return undefined;
-    }
-    const elements = parent.querySelectorAll(elementSelector);
-    const initialFocusableElement = parent?.querySelector(`${elementSelector}[tabindex="0"]`);
-    const handleKeyDown = index => evt => {
-      let newTabFocus = index;
-      if (!(evt.key === 'ArrowRight' || evt.key === 'ArrowLeft')) {
-        return;
-      }
-      if (evt.key === 'ArrowRight') {
-        // Move right
-        newTabFocus += 1;
-        // If we're at the end, go to the start
-        if (newTabFocus >= elements.length) {
-          newTabFocus = 0;
-        }
-      } else if (evt.key === 'ArrowLeft') {
-        // Move left
-        newTabFocus -= 1;
-        if (newTabFocus < 0) {
-          // If we're at the start, move to the end
-          newTabFocus = elements.length - 1;
-        }
-      }
-      const newElement = elements[newTabFocus];
-      newElement?.focus();
-
-      // When an element is focused using roving tab index, trigger the onElementFocus callback
-      if (newElement && onElementFocus) {
-        onElementFocus(newElement);
-      }
-      if (keepTabIndex) {
-        evt.currentTarget.setAttribute('tabindex', '-1');
-        newElement?.setAttribute('tabindex', '0');
-      }
-    };
-    if (elements?.length > 0) {
-      elements.forEach((el, key) => {
-        // if no element has tabindex set to 0, set the first element as focusable
-        if (!initialFocusableElement && key === 0) {
-          el.setAttribute('tabindex', '0');
-          // set all other to -1
-        } else if (initialFocusableElement !== el) {
-          el.setAttribute('tabindex', '-1');
-        }
-        // add event listener
-        el.addEventListener('keydown', handleKeyDown(key));
-      });
-    }
-
-    // Cleanup listeners
-    return () => {
-      if (elements?.length > 0) {
-        elements.forEach((el, key) => {
-          el.removeEventListener('keydown', handleKeyDown(key));
-        });
-      }
-    };
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [parentRef, ...extraDependencies]);
-};
-
-export { useRovingTabIndex as u };