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

package/_internal/b83e864b.js

@@ -1,76 +0,0 @@
-import { B as ButtonRoot } from './6a60381c.js';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { u as useTheme, T as ThemeProvider } from './3181f000.js';
-import { f as forwardRef } from './8bce732e.js';
-import { jsx } from 'react/jsx-runtime';
-import { Tooltip } from './components/tooltip/index-8bb97e60.js';
-import { Emphasis, Size, Theme } from '@lumx/core/js/constants';
-import { I as Icon } from './bace1bf1.js';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'IconButton';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  emphasis: Emphasis.high,
-  size: Size.m
-};
-
-/**
- * IconButton component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const IconButton = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    emphasis = DEFAULT_PROPS.emphasis,
-    image,
-    icon,
-    label,
-    size = DEFAULT_PROPS.size,
-    theme = defaultTheme,
-    tooltipProps,
-    hideTooltip,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx(Tooltip, {
-    label: hideTooltip ? '' : label,
-    ...tooltipProps,
-    children: /*#__PURE__*/jsx(ButtonRoot, {
-      ref: ref,
-      emphasis,
-      size,
-      theme,
-      ...forwardedProps,
-      "aria-label": label,
-      variant: "icon",
-      children: image ? /*#__PURE__*/jsx("img", {
-        // no need to set alt as an aria-label is already set on the button
-        alt: "",
-        src: image
-      }) : /*#__PURE__*/jsx(ThemeProvider, {
-        value: undefined,
-        children: /*#__PURE__*/jsx(Icon, {
-          icon: icon
-        })
-      })
-    })
-  });
-});
-IconButton.displayName = COMPONENT_NAME;
-IconButton.className = CLASSNAME;
-IconButton.defaultProps = DEFAULT_PROPS;
-
-export { IconButton as I };

package/_internal/bace1bf1.js

@@ -1,103 +0,0 @@
-import classNames from 'classnames';
-import { getRootClassName, resolveColorWithVariants, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from './8bce732e.js';
-import { u as useTheme } from './3181f000.js';
-import { jsx } from 'react/jsx-runtime';
-import { Theme, ColorPalette, Size } from '@lumx/core/js/constants';
-
-const mdiAlertCircle = 'M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 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';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Icon';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {};
-
-/**
- * Icon component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Icon = forwardRef((props, ref) => {
-  const defaultTheme = useTheme();
-  const {
-    className,
-    color: propColor,
-    colorVariant: propColorVariant,
-    hasShape,
-    icon,
-    size,
-    theme = defaultTheme,
-    alt,
-    ...forwardedProps
-  } = props;
-  const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
-
-  // Color
-  let iconColor = color;
-  if (!iconColor && (hasShape || theme)) {
-    iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-  }
-
-  // Color variant
-  let iconColorVariant = colorVariant;
-  if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {
-    iconColorVariant = 'L2';
-  }
-
-  // Size
-  let iconSize = size;
-  if (size && hasShape) {
-    if (size === Size.xxs || size === Size.xs) {
-      iconSize = Size.s;
-    } else if (size === Size.xxl) {
-      iconSize = Size.xl;
-    }
-  } else if (hasShape) {
-    iconSize = Size.m;
-  }
-  return /*#__PURE__*/jsx("i", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      color: iconColor,
-      colorVariant: iconColorVariant,
-      hasShape,
-      prefix: CLASSNAME,
-      theme,
-      size: iconSize
-    }), !hasShape && `${CLASSNAME}--no-shape`, !hasShape && iconColor === ColorPalette.yellow && icon === mdiAlertCircle && `${CLASSNAME}--has-dark-layer`, `${CLASSNAME}--path`),
-    children: /*#__PURE__*/jsx("svg", {
-      "aria-hidden": alt ? undefined : 'true',
-      role: alt ? 'img' : undefined,
-      "aria-label": alt,
-      height: "1em",
-      preserveAspectRatio: "xMidYMid meet",
-      style: {
-        verticalAlign: '-0.125em'
-      },
-      viewBox: "0 0 24 24",
-      width: "1em",
-      children: /*#__PURE__*/jsx("path", {
-        d: icon,
-        fill: "currentColor"
-      })
-    })
-  });
-});
-Icon.displayName = COMPONENT_NAME;
-Icon.className = CLASSNAME;
-Icon.defaultProps = DEFAULT_PROPS;
-
-export { Icon as I, mdiAlertCircle as m };

package/_internal/c57190eb.js

@@ -1,146 +0,0 @@
-import classNames from 'classnames';
-import isFunction from 'lodash/isFunction';
-import { useCallback } from 'react';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { onEnterPressed } from '@lumx/core/js/utils';
-import { f as forwardRef } from './8bce732e.js';
-import { u as useTheme } from './3181f000.js';
-import { useDisableStateProps } from './utils/disabled/index-075b99c3.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Size, Theme, ColorPalette } from '@lumx/core/js/constants';
-
-/**
- * Wrap mouse event handler to stop event propagation.
- *
- * @param  handler   The mouse handler to wrap.
- * @return Mouse handler stopping propagation.
- */
-function useStopPropagation(handler) {
-  return useCallback(evt => {
-    if (!evt || !isFunction(handler)) {
-      return;
-    }
-    handler(evt);
-    evt.stopPropagation();
-  }, [handler]);
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Chip';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  size: Size.m
-};
-
-/**
- * Chip component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Chip = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    isAnyDisabled,
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const {
-    after,
-    before,
-    children,
-    className,
-    color,
-    isClickable: propIsClickable,
-    isHighlighted,
-    isSelected,
-    onAfterClick,
-    onBeforeClick,
-    onClick,
-    size = DEFAULT_PROPS.size,
-    theme = defaultTheme,
-    href,
-    onKeyDown,
-    ...forwardedProps
-  } = otherProps;
-  const hasAfterClick = isFunction(onAfterClick);
-  const hasBeforeClick = isFunction(onBeforeClick);
-  const hasOnClick = isFunction(props.onClick);
-  const isButton = hasOnClick && !href;
-  const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
-
-  // Adapt color to the theme.
-  const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
-  const handleOnBeforeClick = useStopPropagation(onBeforeClick);
-  const handleOnAfterClick = useStopPropagation(onAfterClick);
-  const handleKeyDown = evt => {
-    onKeyDown?.(evt);
-    if (hasOnClick) {
-      onEnterPressed(onClick)(evt);
-    }
-  };
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsxs("a", {
-      role: isButton ? 'button' : undefined,
-      tabIndex: isClickable && !disabledStateProps.disabled ? 0 : undefined,
-      ...forwardedProps,
-      href: !disabledStateProps.disabled ? href : undefined,
-      ref: ref,
-      className: classNames(className, handleBasicClasses({
-        clickable: isClickable,
-        color: chipColor,
-        isDisabled: isAnyDisabled,
-        hasAfter: Boolean(after),
-        hasBefore: Boolean(before),
-        highlighted: Boolean(isHighlighted),
-        prefix: CLASSNAME,
-        selected: Boolean(isSelected),
-        size,
-        unselected: Boolean(!isSelected)
-      })),
-      "aria-disabled": isClickable && isAnyDisabled || undefined,
-      onClick: hasOnClick ? onClick : undefined,
-      onKeyDown: handleKeyDown,
-      children: [before &&
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-      jsx("div", {
-        className: classNames(`${CLASSNAME}__before`, {
-          [`${CLASSNAME}__before--is-clickable`]: hasBeforeClick
-        }),
-        onClick: handleOnBeforeClick,
-        children: before
-      }), /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME}__label`,
-        children: children
-      }), after &&
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-      jsx("div", {
-        className: classNames(`${CLASSNAME}__after`, {
-          [`${CLASSNAME}__after--is-clickable`]: hasAfterClick
-        }),
-        onClick: handleOnAfterClick,
-        children: after
-      })]
-    })
-  );
-});
-Chip.displayName = COMPONENT_NAME;
-Chip.className = CLASSNAME;
-Chip.defaultProps = DEFAULT_PROPS;
-
-export { Chip as C };

package/_internal/components/alert-dialog/index-284fed80.js

@@ -1,163 +0,0 @@
-import React__default from 'react';
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useId } from '../../3a1facc0.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { m as mdiAlert, a as mdiInformation } from '../../49bbeed3.js';
-import { m as mdiCheckCircle } from '../../de24f857.js';
-import { m as mdiAlertCircle, I as Icon } from '../../bace1bf1.js';
-import { Dialog } from '../dialog/index-c7066813.js';
-import { Toolbar } from '../toolbar/index-7041a5a6.js';
-import { a as Button } from '../../7ad474e4.js';
-import { Kind, ColorPalette, Size, Emphasis } from '@lumx/core/js/constants';
-
-/**
- * Associative map from message kind to color and icon.
- */
-const CONFIG = {
-  [Kind.error]: {
-    color: ColorPalette.red,
-    icon: mdiAlert
-  },
-  [Kind.info]: {
-    color: ColorPalette.blue,
-    icon: mdiInformation
-  },
-  [Kind.success]: {
-    color: ColorPalette.green,
-    icon: mdiCheckCircle
-  },
-  [Kind.warning]: {
-    color: ColorPalette.yellow,
-    icon: mdiAlertCircle
-  }
-};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'AlertDialog';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  size: Size.tiny,
-  kind: Kind.info
-};
-
-/**
- * AlertDialog component.
- *
- * An alert dialog is a modal dialog that interrupts the user's workflow to
- * communicate an important message and acquire a response.
- *
- * It should not have a complex content.
- * Children of this component should only be strings, paragraphs or links.
- */
-const AlertDialog = forwardRef((props, ref) => {
-  const {
-    id,
-    title,
-    className,
-    cancelProps,
-    confirmProps,
-    kind = DEFAULT_PROPS.kind,
-    size = DEFAULT_PROPS.size,
-    dialogProps,
-    children,
-    ...forwardedProps
-  } = props;
-  const cancelButtonRef = React__default.useRef(null);
-  const confirmationButtonRef = React__default.useRef(null);
-  const {
-    color,
-    icon
-  } = CONFIG[kind] || {};
-
-  // Define a unique ID to target title and description for aria attributes.
-  const generatedId = useId();
-  const uniqueId = id || generatedId;
-  const titleId = `${uniqueId}-title`;
-  const descriptionId = `${uniqueId}-description`;
-
-  // If content is a string, set in a paragraph.
-  const DescriptionElement = typeof children === 'string' ? 'p' : 'div';
-  const {
-    label: confirmLabel,
-    onClick: confirmOnClick,
-    ...forwardedConfirmProps
-  } = confirmProps;
-  const {
-    label: cancelLabel,
-    onClick: cancelOnClick,
-    ...forwardedCancelProps
-  } = cancelProps || {};
-  return /*#__PURE__*/jsxs(Dialog, {
-    ref: ref,
-    focusElement: cancelProps ? cancelButtonRef : confirmationButtonRef,
-    size: size,
-    dialogProps: {
-      id: uniqueId,
-      role: 'alertdialog',
-      'aria-labelledby': titleId,
-      'aria-describedby': descriptionId,
-      ...dialogProps
-    },
-    className: classNames(className, handleBasicClasses({
-      kind,
-      prefix: CLASSNAME
-    })),
-    ...forwardedProps,
-    children: [/*#__PURE__*/jsx("header", {
-      children: /*#__PURE__*/jsx(Toolbar, {
-        className: "lumx-spacing-margin-horizontal",
-        before: /*#__PURE__*/jsx(Icon, {
-          icon: icon,
-          size: Size.s,
-          color: color
-        }),
-        label: /*#__PURE__*/jsx("h2", {
-          id: titleId,
-          className: "lumx-typography-title",
-          children: title
-        })
-      })
-    }), children && /*#__PURE__*/jsx(DescriptionElement, {
-      id: descriptionId,
-      className: "lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge",
-      children: children
-    }), /*#__PURE__*/jsx("footer", {
-      children: /*#__PURE__*/jsx(Toolbar, {
-        className: "lumx-spacing-margin-horizontal",
-        after: /*#__PURE__*/jsxs(Fragment, {
-          children: [cancelProps && /*#__PURE__*/jsx(Button, {
-            ...forwardedCancelProps,
-            ref: cancelButtonRef,
-            emphasis: Emphasis.medium,
-            onClick: cancelOnClick,
-            children: cancelLabel
-          }), /*#__PURE__*/jsx(Button, {
-            ...forwardedConfirmProps,
-            ref: confirmationButtonRef,
-            color: color,
-            className: "lumx-spacing-margin-left-regular",
-            onClick: confirmOnClick,
-            children: confirmLabel
-          })]
-        })
-      })
-    })]
-  });
-});
-AlertDialog.displayName = COMPONENT_NAME;
-AlertDialog.className = CLASSNAME;
-AlertDialog.defaultProps = DEFAULT_PROPS;
-
-export { AlertDialog };

package/_internal/components/autocomplete/__mockData__/index-96fc7ea7.js

@@ -1,27 +0,0 @@
-const CITIES = [{
-  text: 'Los Angeles',
-  id: 'losangeles'
-}, {
-  text: 'San Francisco',
-  id: 'sanfrancisco'
-}, {
-  text: 'Paris',
-  id: 'paris'
-}, {
-  text: 'Montpellier',
-  id: 'montpellier'
-}, {
-  text: 'Bordeaux',
-  id: 'bordeaux'
-}, {
-  text: 'Toulouse',
-  id: 'toulouse'
-}, {
-  text: 'Lyon',
-  id: 'lyon'
-}, {
-  text: 'Montevideo',
-  id: 'montevideo'
-}];
-
-export { CITIES };