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

package/_internal/components/message/index-17b568f2.js

@@ -1,98 +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';
-import { Kind, ColorPalette, Size, Emphasis } from '@lumx/core/js/constants';
-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 { I as IconButton } from '../../b83e864b.js';
-import { m as mdiClose } from '../../eaf6c45a.js';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Message';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * 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
-  }
-};
-
-/**
- * Message component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Message = forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    hasBackground,
-    kind,
-    icon: customIcon,
-    closeButtonProps,
-    ...forwardedProps
-  } = props;
-  const {
-    color,
-    icon
-  } = CONFIG[kind] || {};
-  const {
-    onClick,
-    label: closeButtonLabel
-  } = closeButtonProps || {};
-  const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    className: classNames(className, handleBasicClasses({
-      color,
-      hasBackground,
-      prefix: CLASSNAME
-    })),
-    ...forwardedProps,
-    children: [(customIcon || icon) && /*#__PURE__*/jsx(Icon, {
-      className: `${CLASSNAME}__icon`,
-      icon: customIcon || icon,
-      size: Size.xs,
-      color: color
-    }), /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__text`,
-      children: children
-    }), isCloseButtonDisplayed && /*#__PURE__*/jsx(IconButton, {
-      className: `${CLASSNAME}__close-button`,
-      icon: mdiClose,
-      onClick: onClick,
-      label: closeButtonLabel,
-      emphasis: Emphasis.low
-    })]
-  });
-});
-Message.displayName = COMPONENT_NAME;
-Message.className = CLASSNAME;
-
-export { Message };

package/_internal/components/mosaic/index-2d40e01c.js

@@ -1,95 +0,0 @@
-import { useMemo } from 'react';
-import classNames from 'classnames';
-import take from 'lodash/take';
-import { u as useTheme } from '../../3181f000.js';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Theme, Alignment, AspectRatio } from '@lumx/core/js/constants';
-import { T as Thumbnail } from '../../035c132d.js';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Mosaic';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {};
-
-/**
- * Mosaic component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Mosaic = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    className,
-    theme = defaultTheme,
-    thumbnails,
-    onImageClick,
-    ...forwardedProps
-  } = props;
-  const handleImageClick = useMemo(() => {
-    if (!onImageClick) return undefined;
-    return (index, onClick) => event => {
-      onClick?.(event);
-      onImageClick?.(index);
-    };
-  }, [onImageClick]);
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME,
-      theme
-    }), {
-      [`${CLASSNAME}--has-1-thumbnail`]: thumbnails?.length === 1,
-      [`${CLASSNAME}--has-2-thumbnails`]: thumbnails?.length === 2,
-      [`${CLASSNAME}--has-3-thumbnails`]: thumbnails?.length === 3,
-      [`${CLASSNAME}--has-4-thumbnails`]: thumbnails?.length >= 4
-    }),
-    children: /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__wrapper`,
-      children: take(thumbnails, 4).map((thumbnail, index) => {
-        const {
-          image,
-          onClick,
-          align,
-          ...thumbnailProps
-        } = thumbnail;
-        return /*#__PURE__*/jsxs("div", {
-          className: `${CLASSNAME}__thumbnail`,
-          children: [/*#__PURE__*/jsx(Thumbnail, {
-            ...thumbnailProps,
-            align: align || Alignment.left,
-            image: image,
-            theme: theme,
-            aspectRatio: AspectRatio.free,
-            fillHeight: true,
-            onClick: handleImageClick?.(index, onClick) || onClick
-          }), thumbnails.length > 4 && index === 3 && /*#__PURE__*/jsx("div", {
-            className: `${CLASSNAME}__overlay`,
-            children: /*#__PURE__*/jsxs("span", {
-              children: ["+", thumbnails.length - 4]
-            })
-          })]
-        }, index);
-      })
-    })
-  });
-});
-Mosaic.displayName = COMPONENT_NAME;
-Mosaic.className = CLASSNAME;
-Mosaic.defaultProps = DEFAULT_PROPS;
-
-export { Mosaic };

package/_internal/components/navigation/index-dc17c639.js

@@ -1,225 +0,0 @@
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useTheme, T as ThemeProvider } from '../../3181f000.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { createContext, useState, useRef, useContext } from 'react';
-import { u as useId } from '../../3a1facc0.js';
-import { f as forwardRefPolymorphic, R as RawClickable } from '../../2c2b6a89.js';
-import { u as useOverflowTooltipLabel, T as Text } from '../../e913a3af.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Tooltip } from '../tooltip/index-8bb97e60.js';
-import { P as Placement } from '../../4f4c0582.js';
-import { I as Icon } from '../../bace1bf1.js';
-import { Size, Orientation, Theme } from '@lumx/core/js/constants';
-import { P as Popover } from '../../3864a6c1.js';
-import { m as mdiChevronUp, a as mdiChevronDown } from '../../0b9c76cb.js';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$2 = 'NavigationItem';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
-const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
-  const {
-    className,
-    icon,
-    label,
-    isCurrentPage,
-    as: Element = 'a',
-    ...forwardedProps
-  } = props;
-  const theme = useTheme();
-  const {
-    tooltipLabel,
-    labelRef
-  } = useOverflowTooltipLabel(label);
-  return /*#__PURE__*/jsx("li", {
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$2,
-      theme
-    })),
-    children: /*#__PURE__*/jsx(Tooltip, {
-      label: tooltipLabel,
-      placement: Placement.TOP,
-      children: /*#__PURE__*/jsxs(RawClickable, {
-        as: Element,
-        className: handleBasicClasses({
-          prefix: `${CLASSNAME$2}__link`,
-          isSelected: isCurrentPage
-        }),
-        ref: ref,
-        "aria-current": isCurrentPage ? 'page' : undefined,
-        ...forwardedProps,
-        children: [icon ? /*#__PURE__*/jsx(Icon, {
-          className: `${CLASSNAME$2}__icon`,
-          icon: icon,
-          size: Size.xs,
-          theme: theme
-        }) : null, /*#__PURE__*/jsx(Text, {
-          as: "span",
-          truncate: true,
-          className: `${CLASSNAME$2}__label`,
-          ref: labelRef,
-          children: label
-        })]
-      })
-    })
-  });
-}), {
-  displayName: COMPONENT_NAME$2,
-  className: CLASSNAME$2
-});
-
-const NavigationContext = /*#__PURE__*/createContext({
-  orientation: Orientation.vertical
-});
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1 = 'NavigationSection';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
-const NavigationSection = forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    label,
-    icon,
-    ...forwardedProps
-  } = props;
-  const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef(null);
-  const sectionId = useId();
-  const {
-    orientation
-  } = useContext(NavigationContext) || {};
-  const theme = useTheme();
-  const isDropdown = orientation === Orientation.horizontal;
-  return /*#__PURE__*/jsxs("li", {
-    className: classNames(className, CLASSNAME$1, CLASSNAME$2, handleBasicClasses({
-      prefix: CLASSNAME$2,
-      theme
-    })),
-    ref: ref,
-    children: [/*#__PURE__*/jsxs(RawClickable, {
-      as: "button",
-      ...forwardedProps,
-      "aria-controls": sectionId,
-      "aria-expanded": isOpen,
-      className: classNames(`${CLASSNAME$2}__link`),
-      ref: buttonRef,
-      onClick: event => {
-        setIsOpen(!isOpen);
-        event.stopPropagation();
-      },
-      children: [icon ? /*#__PURE__*/jsx(Icon, {
-        className: `${CLASSNAME$2}__icon`,
-        icon: icon,
-        size: Size.xs
-      }) : null, /*#__PURE__*/jsx(Text, {
-        as: "span",
-        truncate: true,
-        className: `${CLASSNAME$2}__label`,
-        ref: ref,
-        children: label
-      }), /*#__PURE__*/jsx(Icon, {
-        className: classNames(`${CLASSNAME$2}__icon`, `${CLASSNAME$1}__chevron`),
-        icon: isOpen ? mdiChevronUp : mdiChevronDown
-      })]
-    }), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
-      anchorRef: buttonRef,
-      isOpen: isOpen,
-      placement: Placement.BOTTOM_START,
-      usePortal: false,
-      closeOnClickAway: true,
-      closeOnEscape: true,
-      onClick: () => setIsOpen(false),
-      onClose: () => setIsOpen(false),
-      zIndex: 996,
-      children: /*#__PURE__*/jsx(ThemeProvider, {
-        value: Theme.light,
-        children: /*#__PURE__*/jsx("ul", {
-          className: `${CLASSNAME$1}__drawer--popover`,
-          id: sectionId,
-          children: /*#__PURE__*/jsx(NavigationContext.Provider, {
-            value: {
-              orientation: Orientation.vertical
-            },
-            children: children
-          })
-        })
-      })
-    }) : /*#__PURE__*/jsx("ul", {
-      className: `${CLASSNAME$1}__drawer`,
-      id: sectionId,
-      children: children
-    }))]
-  });
-});
-NavigationSection.displayName = COMPONENT_NAME$1;
-NavigationSection.className = CLASSNAME$1;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Navigation';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props
- */
-const DEFAULT_PROPS = {
-  orientation: Orientation.vertical
-};
-const Navigation = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    children,
-    className,
-    theme = defaultTheme,
-    orientation = DEFAULT_PROPS.orientation,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx(ThemeProvider, {
-    value: theme,
-    children: /*#__PURE__*/jsx("nav", {
-      className: classNames(className, handleBasicClasses({
-        prefix: CLASSNAME,
-        theme,
-        orientation
-      })),
-      ref: ref,
-      ...forwardedProps,
-      children: /*#__PURE__*/jsx(NavigationContext.Provider, {
-        value: {
-          orientation
-        },
-        children: /*#__PURE__*/jsx("ul", {
-          className: `${CLASSNAME}__list`,
-          children: children
-        })
-      })
-    })
-  });
-});
-Navigation.displayName = COMPONENT_NAME;
-Navigation.className = CLASSNAME;
-Navigation.defaultProps = DEFAULT_PROPS;
-
-// Sub components
-Navigation.Section = NavigationSection;
-Navigation.Item = NavigationItem;
-
-export { Navigation };

package/_internal/components/notification/index-a1101015.js

@@ -1,146 +0,0 @@
-import { useRef } from 'react';
-import classNames from 'classnames';
-import isFunction from 'lodash/isFunction';
-import { D as DOCUMENT } from '../../d0e3f49e.js';
-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 { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useTransitionVisibility } from '../../a38bdcd0.js';
-import { m as mergeRefs } from '../../f0d7d6ea.js';
-import { u as useTheme } from '../../3181f000.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Portal } from '../../utils/Portal/index-6e0a7404.js';
-import { Theme, Size, Emphasis, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
-import { a as Button } from '../../7ad474e4.js';
-
-/**
- * Notification icon and colors according to their type.
- */
-const NOTIFICATION_CONFIGURATION = {
-  error: {
-    color: 'red',
-    icon: mdiAlert
-  },
-  info: {
-    color: 'blue',
-    icon: mdiInformation
-  },
-  success: {
-    color: 'green',
-    icon: mdiCheckCircle
-  },
-  warning: {
-    color: 'yellow',
-    icon: mdiAlertCircle
-  }
-};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Notification';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  zIndex: 9999,
-  usePortal: true
-};
-
-/* eslint-disable react-hooks/rules-of-hooks, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
-/**
- * Notification component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Notification = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    actionLabel,
-    className,
-    content,
-    isOpen,
-    onActionClick,
-    onClick,
-    theme = defaultTheme,
-    type,
-    zIndex = DEFAULT_PROPS.zIndex,
-    usePortal = DEFAULT_PROPS.usePortal,
-    style,
-    ...forwardedProps
-  } = props;
-  if (!DOCUMENT) {
-    // Can't render in SSR.
-    return null;
-  }
-  const {
-    color,
-    icon
-  } = NOTIFICATION_CONFIGURATION[type] || {};
-  const rootRef = useRef(null);
-  const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);
-  const hasAction = Boolean(onActionClick) && Boolean(actionLabel);
-  const handleCallback = evt => {
-    if (isFunction(onActionClick)) {
-      onActionClick();
-    }
-    evt.stopPropagation();
-  };
-  if (!type || !isVisible) {
-    return null;
-  }
-  return /*#__PURE__*/jsx(Portal, {
-    enabled: usePortal,
-    children: /*#__PURE__*/jsxs("div", {
-      ref: mergeRefs(ref, rootRef),
-      role: "alert",
-      ...forwardedProps,
-      className: classNames(className, handleBasicClasses({
-        color,
-        hasAction,
-        isHidden: !isOpen,
-        prefix: CLASSNAME
-      })),
-      onClick: onClick,
-      style: {
-        ...style,
-        zIndex
-      },
-      children: [/*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME}__icon`,
-        children: /*#__PURE__*/jsx(Icon, {
-          icon: icon,
-          size: Size.s
-        })
-      }), /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME}__content`,
-        children: content
-      }), hasAction && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME}__action`,
-        children: /*#__PURE__*/jsx(Button, {
-          emphasis: Emphasis.medium,
-          theme: theme,
-          onClick: handleCallback,
-          children: /*#__PURE__*/jsx("span", {
-            children: actionLabel
-          })
-        })
-      })]
-    })
-  });
-});
-Notification.displayName = COMPONENT_NAME;
-Notification.className = CLASSNAME;
-Notification.defaultProps = DEFAULT_PROPS;
-
-export { Notification };

package/_internal/components/popover/index-dbca63f1.js

@@ -1,2 +0,0 @@
-export { P as Popover } from '../../3864a6c1.js';
-export { P as Placement } from '../../4f4c0582.js';

package/_internal/components/popover-dialog/index-654d2abc.js

@@ -1,66 +0,0 @@
-import classNames from 'classnames';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../../8bce732e.js';
-import { P as Popover } from '../../3864a6c1.js';
-import { jsx } from 'react/jsx-runtime';
-import { H as HeadingLevelProvider } from '../../ebdcb0c7.js';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'PopoverDialog';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {};
-
-/**
- * PopoverDialog component.
- * Defines a popover that acts like a dialog
- * * Has a dialog aria role
- * * Sets a focus trap within the popover
- * * Closes on click away and escape.
- */
-const PopoverDialog = forwardRef((props, ref) => {
-  const {
-    children,
-    isOpen,
-    focusElement,
-    'aria-label': ariaLabel,
-    label = ariaLabel,
-    className,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx(Popover, {
-    ...forwardedProps,
-    ref: ref,
-    className: classNames(className, CLASSNAME),
-    role: "dialog",
-    "aria-modal": "true"
-    /**
-     * If a label is set, set as aria-label.
-     * If it is undefined, the label can be set using the `aria-label` and `aria-labelledby` props
-     */,
-    "aria-label": label,
-    isOpen: isOpen,
-    focusElement: focusElement,
-    closeOnClickAway: true,
-    closeOnEscape: true,
-    withFocusTrap: true,
-    children: /*#__PURE__*/jsx(HeadingLevelProvider, {
-      level: 2,
-      children: children
-    })
-  });
-});
-PopoverDialog.displayName = COMPONENT_NAME;
-PopoverDialog.className = CLASSNAME;
-PopoverDialog.defaultProps = DEFAULT_PROPS;
-
-export { PopoverDialog };