@lumx/react 3.10.1-alpha.0 → 3.10.1-alpha.2

package/_internal/components/lightbox/index.ts-7a16cdc7.js

@@ -0,0 +1,149 @@
+import { h as getRootClassName, i as forwardRef, j as _objectWithoutProperties, D as DOCUMENT, _ as _extends, g as classNames, n as DIALOG_TRANSITION_DURATION } from '../../1da25128.js';
+import React__default, { useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { u as useFocusTrap } from '../../646f0db6.js';
+import { u as useDisableBodyScroll } from '../../36bd7352.js';
+import { m as mergeRefs } from '../../f52adbae.js';
+import { u as useCallbackOnEscape } from '../../cae46566.js';
+import { u as useTransitionVisibility } from '../../fb975afe.js';
+import { T as ThemeProvider } from '../../3181f000.js';
+import { h as handleBasicClasses } from '../../f57e1239.js';
+import { I as IconButton } from '../../23bdba2d.js';
+import { ClickAwayProvider } from '../../../utils/index.js';
+import { i as mdiClose } from '../../c6c99f76.js';
+
+const _excluded = ["aria-labelledby", "ariaLabelledBy", "aria-label", "ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "focusElement", "preventAutoClose", "theme", "zIndex"];
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Lightbox';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Lightbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Lightbox = forwardRef((props, ref) => {
+  const {
+      'aria-labelledby': propAriaLabelledBy,
+      ariaLabelledBy = propAriaLabelledBy,
+      'aria-label': propAriaLabel,
+      ariaLabel = propAriaLabel,
+      children,
+      className,
+      closeButtonProps,
+      isOpen,
+      onClose,
+      parentElement,
+      focusElement,
+      preventAutoClose,
+      theme,
+      zIndex
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  if (!DOCUMENT) {
+    // Can't render in SSR.
+    return null;
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const childrenRef = useRef(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const wrapperRef = useRef(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const closeButtonRef = useRef(null);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useDisableBodyScroll(isOpen && wrapperRef.current);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const isVisible = useTransitionVisibility(wrapperRef, !!isOpen, DIALOG_TRANSITION_DURATION);
+
+  // Handle focus trap.
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFocusTrap(
+  // Focus trap zone
+  isOpen && wrapperRef.current,
+  // Focus element (fallback on close button and then on the dialog)
+  (focusElement === null || focusElement === void 0 ? void 0 : focusElement.current) || closeButtonRef.current || wrapperRef.current);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const previousOpen = useRef(isOpen);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    if (isOpen !== previousOpen.current) {
+      previousOpen.current = isOpen;
+
+      // Focus the parent element on close.
+      if (!isOpen && parentElement && parentElement.current) {
+        parentElement.current.focus();
+      }
+    }
+  }, [isOpen, parentElement]);
+
+  // Close lightbox on escape key pressed.
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useCallbackOnEscape(onClose);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const clickAwayRefs = useRef([wrapperRef]);
+  if (!isOpen && !isVisible) return null;
+  return /*#__PURE__*/createPortal(
+  /*#__PURE__*/
+  /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
+  React__default.createElement("div", _extends({
+    ref: mergeRefs(ref, wrapperRef)
+  }, forwardedProps, {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-modal": "true",
+    role: "dialog",
+    tabIndex: -1,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      isHidden: !isOpen,
+      isShown: isOpen || isVisible,
+      theme
+    })),
+    style: {
+      zIndex
+    }
+  }), closeButtonProps && /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME}__close`
+  }, /*#__PURE__*/React__default.createElement(IconButton, _extends({}, closeButtonProps, {
+    ref: closeButtonRef,
+    emphasis: "low",
+    hasBackground: true,
+    icon: mdiClose,
+    theme: "dark",
+    type: "button",
+    onClick: onClose
+  }))), /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: undefined
+  }, /*#__PURE__*/React__default.createElement(ClickAwayProvider, {
+    callback: !preventAutoClose && onClose,
+    childrenRefs: clickAwayRefs
+  }, /*#__PURE__*/React__default.createElement("div", {
+    ref: childrenRef,
+    className: `${CLASSNAME}__wrapper`,
+    role: "presentation"
+  }, children)))), document.body);
+});
+Lightbox.displayName = COMPONENT_NAME;
+Lightbox.className = CLASSNAME;
+
+export { Lightbox };
+//# sourceMappingURL=index.ts-7a16cdc7.js.map

package/_internal/components/lightbox/index.ts-7a16cdc7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.ts-7a16cdc7.js","sources":["../../../../src/components/lightbox/Lightbox.tsx"],"sourcesContent":["import React, { RefObject, useRef, useEffect, AriaAttributes } from 'react';\n\nimport classNames from 'classnames';\nimport { createPortal } from 'react-dom';\n\nimport { mdiClose } from '@lumx/icons';\nimport { IconButton, IconButtonProps } from '@lumx/react';\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';\n\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';\nimport { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface LightboxProps extends GenericProps, HasTheme, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {\n    /** Props to pass to the close button (minus those already set by the Lightbox props). */\n    closeButtonProps?: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Reference to the element that triggered modal opening to set focus on. */\n    parentElement: RefObject<any>;\n    /** Reference to the element that should get the focus when the lightbox opens. By default, the close button or the lightbox itself will take focus. */\n    focusElement?: RefObject<HTMLElement>;\n    /** Whether to keep the dialog open on clickaway or escape press. */\n    preventAutoClose?: boolean;\n    /** Z-axis position. */\n    zIndex?: number;\n    /** On close callback. */\n    onClose?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Lightbox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Lightbox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Lightbox = forwardRef<LightboxProps, HTMLDivElement>((props, ref) => {\n    const {\n        'aria-labelledby': propAriaLabelledBy,\n        ariaLabelledBy = propAriaLabelledBy,\n        'aria-label': propAriaLabel,\n        ariaLabel = propAriaLabel,\n        children,\n        className,\n        closeButtonProps,\n        isOpen,\n        onClose,\n        parentElement,\n        focusElement,\n        preventAutoClose,\n        theme,\n        zIndex,\n        ...forwardedProps\n    } = props;\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const childrenRef = useRef<any>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useDisableBodyScroll(isOpen && wrapperRef.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const isVisible = useTransitionVisibility(wrapperRef, !!isOpen, DIALOG_TRANSITION_DURATION);\n\n    // Handle focus trap.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useFocusTrap(\n        // Focus trap zone\n        isOpen && wrapperRef.current,\n        // Focus element (fallback on close button and then on the dialog)\n        focusElement?.current || closeButtonRef.current || wrapperRef.current,\n    );\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const previousOpen = useRef(isOpen);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n        if (isOpen !== previousOpen.current) {\n            previousOpen.current = isOpen;\n\n            // Focus the parent element on close.\n            if (!isOpen && parentElement && parentElement.current) {\n                parentElement.current.focus();\n            }\n        }\n    }, [isOpen, parentElement]);\n\n    // Close lightbox on escape key pressed.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useCallbackOnEscape(onClose);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const clickAwayRefs = useRef([wrapperRef]);\n\n    if (!isOpen && !isVisible) return null;\n\n    return createPortal(\n        /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n        <div\n            ref={mergeRefs(ref, wrapperRef)}\n            {...forwardedProps}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            aria-modal=\"true\"\n            role=\"dialog\"\n            tabIndex={-1}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    isHidden: !isOpen,\n                    isShown: isOpen || isVisible,\n                    theme,\n                }),\n            )}\n            style={{ zIndex }}\n        >\n            {closeButtonProps && (\n                <div className={`${CLASSNAME}__close`}>\n                    <IconButton\n                        {...closeButtonProps}\n                        ref={closeButtonRef}\n                        emphasis=\"low\"\n                        hasBackground\n                        icon={mdiClose}\n                        theme=\"dark\"\n                        type=\"button\"\n                        onClick={onClose}\n                    />\n                </div>\n            )}\n            <ThemeProvider value={undefined}>\n                <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>\n                    <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role=\"presentation\">\n                        {children}\n                    </div>\n                </ClickAwayProvider>\n            </ThemeProvider>\n        </div>,\n        document.body,\n    );\n});\nLightbox.displayName = COMPONENT_NAME;\nLightbox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","Lightbox","forwardRef","props","ref","propAriaLabelledBy","ariaLabelledBy","propAriaLabel","ariaLabel","children","className","closeButtonProps","isOpen","onClose","parentElement","focusElement","preventAutoClose","theme","zIndex","forwardedProps","_objectWithoutProperties","_excluded","DOCUMENT","childrenRef","useRef","wrapperRef","closeButtonRef","useDisableBodyScroll","current","isVisible","useTransitionVisibility","DIALOG_TRANSITION_DURATION","useFocusTrap","previousOpen","useEffect","focus","useCallbackOnEscape","clickAwayRefs","createPortal","React","createElement","_extends","mergeRefs","role","tabIndex","classNames","handleBasicClasses","prefix","isHidden","isShown","style","IconButton","emphasis","hasBackground","icon","mdiClose","type","onClick","ThemeProvider","value","undefined","ClickAwayProvider","callback","childrenRefs","document","body","displayName"],"mappings":"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"}

package/_internal/components/link/index.ts-26435006.d.ts

@@ -0,0 +1,37 @@
+import { G as GenericProps, a as ColorPalette, f as ColorVariant, k as Typography, C as Comp } from '../../8d67e1e3.js';
+import React from 'react';
+
+type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+/**
+ * Defines the props of the component.
+ */
+interface LinkProps extends GenericProps {
+    /** Color variant. */
+    color?: ColorPalette;
+    /** Lightened or darkened variant of the selected icon color. */
+    colorVariant?: ColorVariant;
+    /** Link href. */
+    href?: HTMLAnchorProps['href'];
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Left icon (SVG path). */
+    leftIcon?: string;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
+    /** Right icon (SVG path). */
+    rightIcon?: string;
+    /** Link target. */
+    target?: HTMLAnchorProps['target'];
+    /** Typography variant. */
+    typography?: Typography;
+}
+/**
+ * Link component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement>;
+
+export { Link, type LinkProps };

package/_internal/components/link/index.ts-d04f4e53.js

@@ -0,0 +1,120 @@
+import { h as getRootClassName, i as forwardRef, j as _objectWithoutProperties, g as classNames, _ as _extends, k as _objectSpread2, S as Size, e as Typography } from '../../1da25128.js';
+import React__default, { useMemo } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { r as renderLink } from '../../2c5dbb03.js';
+import { h as handleBasicClasses } from '../../f57e1239.js';
+import { I as Icon } from '../../c6c99f76.js';
+
+const _excluded = ["children", "className", "color", "colorVariant", "disabled", "isDisabled", "href", "leftIcon", "linkAs", "rightIcon", "target", "typography"];
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Link';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const getIconSize = typography => {
+  switch (typography) {
+    case Typography.display1:
+      return Size.m;
+    case Typography.headline:
+    case Typography.title:
+    case Typography.custom.title1:
+    case Typography.custom.title2:
+    case Typography.custom.title3:
+    case Typography.custom.title4:
+    case Typography.custom.title5:
+    case Typography.custom.title6:
+    case Typography.body2:
+    case Typography.subtitle2:
+      return Size.s;
+    case Typography.body1:
+    case Typography.subtitle1:
+      return Size.xs;
+    case Typography.caption:
+    case Typography.overline:
+      return Size.xxs;
+    default:
+      return Size.s;
+  }
+};
+
+/**
+ * Link component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Link = forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      color,
+      colorVariant,
+      disabled,
+      isDisabled = disabled,
+      href,
+      leftIcon,
+      linkAs,
+      rightIcon,
+      target,
+      typography
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const renderedChildren = useMemo(() => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, leftIcon && !isEmpty(leftIcon) && /*#__PURE__*/React__default.createElement(Icon, {
+    icon: leftIcon,
+    className: `${CLASSNAME}__left-icon`,
+    size: getIconSize(typography)
+  }), children && /*#__PURE__*/React__default.createElement("span", {
+    className: classNames(`${CLASSNAME}__content`, {
+      [`lumx-typography-${typography}`]: typography
+    })
+  }, children), rightIcon && !isEmpty(rightIcon) && /*#__PURE__*/React__default.createElement(Icon, {
+    icon: rightIcon,
+    className: `${CLASSNAME}__right-icon`,
+    size: getIconSize(typography)
+  })), [leftIcon, typography, children, rightIcon]);
+
+  /**
+   * If there is no linkAs prop and no href, we returned a <button> instead of a <a>.
+   * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.
+   */
+  if (!linkAs && isEmpty(href) || isDisabled) {
+    return /*#__PURE__*/React__default.createElement("button", _extends({
+      type: "button"
+    }, forwardedProps, {
+      ref: ref,
+      disabled: isDisabled,
+      className: classNames(className, handleBasicClasses({
+        prefix: CLASSNAME,
+        color,
+        colorVariant
+      }))
+    }), renderedChildren);
+  }
+  return renderLink(_objectSpread2(_objectSpread2({
+    linkAs
+  }, forwardedProps), {}, {
+    href,
+    target,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      color,
+      colorVariant
+    })),
+    ref: ref
+  }), renderedChildren);
+});
+Link.displayName = COMPONENT_NAME;
+Link.className = CLASSNAME;
+
+export { Link };
+//# sourceMappingURL=index.ts-d04f4e53.js.map

package/_internal/components/link/index.ts-d04f4e53.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.ts-d04f4e53.js","sources":["../../../../src/components/link/Link.tsx"],"sourcesContent":["import React, { RefObject, useMemo } from 'react';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport classNames from 'classnames';\n\nimport { ColorPalette, ColorVariant, Icon, Size, Typography } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';\nimport { renderLink } from '@lumx/react/utils/renderLink';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\ntype HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface LinkProps extends GenericProps {\n    /** Color variant. */\n    color?: ColorPalette;\n    /** Lightened or darkened variant of the selected icon color. */\n    colorVariant?: ColorVariant;\n    /** Link href. */\n    href?: HTMLAnchorProps['href'];\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Left icon (SVG path). */\n    leftIcon?: string;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Right icon (SVG path). */\n    rightIcon?: string;\n    /** Link target. */\n    target?: HTMLAnchorProps['target'];\n    /** Typography variant. */\n    typography?: Typography;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Link';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nconst getIconSize = (typography?: Typography) => {\n    switch (typography) {\n        case Typography.display1:\n            return Size.m;\n\n        case Typography.headline:\n        case Typography.title:\n        case Typography.custom.title1:\n        case Typography.custom.title2:\n        case Typography.custom.title3:\n        case Typography.custom.title4:\n        case Typography.custom.title5:\n        case Typography.custom.title6:\n        case Typography.body2:\n        case Typography.subtitle2:\n            return Size.s;\n\n        case Typography.body1:\n        case Typography.subtitle1:\n            return Size.xs;\n\n        case Typography.caption:\n        case Typography.overline:\n            return Size.xxs;\n\n        default:\n            return Size.s;\n    }\n};\n\n/**\n * Link component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>((props, ref) => {\n    const {\n        children,\n        className,\n        color,\n        colorVariant,\n        disabled,\n        isDisabled = disabled,\n        href,\n        leftIcon,\n        linkAs,\n        rightIcon,\n        target,\n        typography,\n        ...forwardedProps\n    } = props;\n    const renderedChildren = useMemo(\n        () => (\n            <>\n                {leftIcon && !isEmpty(leftIcon) && (\n                    <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} size={getIconSize(typography)} />\n                )}\n\n                {children && (\n                    <span\n                        className={classNames(`${CLASSNAME}__content`, {\n                            [`lumx-typography-${typography}`]: typography,\n                        })}\n                    >\n                        {children}\n                    </span>\n                )}\n\n                {rightIcon && !isEmpty(rightIcon) && (\n                    <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} size={getIconSize(typography)} />\n                )}\n            </>\n        ),\n        [leftIcon, typography, children, rightIcon],\n    );\n\n    /**\n     * If there is no linkAs prop and no href, we returned a <button> instead of a <a>.\n     * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.\n     */\n    if ((!linkAs && isEmpty(href)) || isDisabled) {\n        return (\n            <button\n                type=\"button\"\n                {...forwardedProps}\n                ref={ref as RefObject<HTMLButtonElement>}\n                disabled={isDisabled}\n                className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant }))}\n            >\n                {renderedChildren}\n            </button>\n        );\n    }\n    return renderLink(\n        {\n            linkAs,\n            ...forwardedProps,\n            href,\n            target,\n            className: classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant })),\n            ref: ref as RefObject<HTMLAnchorElement>,\n        },\n        renderedChildren,\n    );\n});\nLink.displayName = COMPONENT_NAME;\nLink.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","getIconSize","typography","Typography","display1","Size","m","headline","title","custom","title1","title2","title3","title4","title5","title6","body2","subtitle2","s","body1","subtitle1","xs","caption","overline","xxs","Link","forwardRef","props","ref","children","className","color","colorVariant","disabled","isDisabled","href","leftIcon","linkAs","rightIcon","target","forwardedProps","_objectWithoutProperties","_excluded","renderedChildren","useMemo","React","createElement","Fragment","isEmpty","Icon","icon","size","classNames","_extends","type","handleBasicClasses","prefix","renderLink","_objectSpread","displayName"],"mappings":"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"}

package/_internal/components/link-preview/index.ts-e560a274.d.ts

@@ -0,0 +1,36 @@
+import { G as GenericProps, H as HasTheme, S as Size, m as HeadingElement, C as Comp } from '../../8d67e1e3.js';
+import { LinkProps } from '../link/index.ts-26435006.js';
+import { T as ThumbnailProps } from '../../35f100be.js';
+import 'react';
+
+/**
+ * Defines the props of the component.
+ */
+interface LinkPreviewProps extends GenericProps, HasTheme {
+    /** Description. */
+    description?: string;
+    /** Link URL. */
+    link: string;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
+    /** Props to pass to the link (minus those already set by the LinkPreview props). */
+    linkProps?: Omit<LinkProps, 'color' | 'colorVariant' | 'href' | 'target'>;
+    /** Size variant. */
+    size?: Extract<Size, 'regular' | 'big'>;
+    /** Thumbnail for the link preview. */
+    thumbnailProps?: ThumbnailProps;
+    /** Title. */
+    title?: string;
+    /** Customize the title heading tag. */
+    titleHeading?: HeadingElement;
+}
+/**
+ * LinkPreview component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const LinkPreview: Comp<LinkPreviewProps, HTMLDivElement>;
+
+export { LinkPreview, type LinkPreviewProps };

package/_internal/components/link-preview/index.ts-fee89f66.js

@@ -0,0 +1,109 @@
+import { h as getRootClassName, S as Size, i as forwardRef, T as Theme, j as _objectWithoutProperties, _ as _extends, g as classNames, k as _objectSpread2, f as AspectRatio, C as ColorPalette, a as ColorVariant } from '../../1da25128.js';
+import React__default from 'react';
+import { u as useTheme } from '../../3181f000.js';
+import { h as handleBasicClasses } from '../../f57e1239.js';
+import { Link } from '../link/index.ts-d04f4e53.js';
+import { T as Thumbnail } from '../../4c28d012.js';
+
+const _excluded = ["className", "description", "link", "linkAs", "linkProps", "size", "theme", "thumbnailProps", "title", "titleHeading"];
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'LinkPreview';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  size: Size.regular,
+  titleHeading: 'h2'
+};
+
+/**
+ * LinkPreview component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const LinkPreview = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+      className,
+      description,
+      link,
+      linkAs,
+      linkProps,
+      size,
+      theme = defaultTheme,
+      thumbnailProps,
+      title,
+      titleHeading
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
+  const TitleHeading = titleHeading;
+  return /*#__PURE__*/React__default.createElement("article", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      size: size === Size.big && thumbnailProps ? Size.big : Size.regular,
+      theme
+    }))
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME}__wrapper`
+  }, thumbnailProps && /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME}__thumbnail`
+  }, /*#__PURE__*/React__default.createElement(Thumbnail, _extends({}, thumbnailProps, {
+    linkAs: linkAs,
+    linkProps: _objectSpread2(_objectSpread2({}, linkProps), {}, {
+      href: link,
+      target: '_blank',
+      // Avoid redundant links in focus order
+      tabIndex: -1
+    }),
+    aspectRatio: AspectRatio.free,
+    fillHeight: true
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME}__container`
+  }, title && /*#__PURE__*/React__default.createElement(TitleHeading, {
+    className: `${CLASSNAME}__title`
+  }, /*#__PURE__*/React__default.createElement(Link, _extends({}, linkProps, {
+    linkAs: linkAs,
+    target: "_blank",
+    href: link,
+    color: theme === Theme.light ? ColorPalette.dark : ColorPalette.light,
+    colorVariant: ColorVariant.N
+  }), title)), description && /*#__PURE__*/React__default.createElement("p", {
+    className: `${CLASSNAME}__description`
+  }, description), /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME}__link`
+  }, /*#__PURE__*/React__default.createElement(Link, _extends({}, linkProps, {
+    linkAs: linkAs,
+    className: classNames(`${CLASSNAME}__link`, linkProps === null || linkProps === void 0 ? void 0 : linkProps.className),
+    target: "_blank",
+    href: link,
+    color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
+    colorVariant: ColorVariant.N
+    // Avoid redundant links in focus order
+    ,
+    tabIndex: title ? '-1' : undefined
+  }), link)))));
+});
+LinkPreview.displayName = COMPONENT_NAME;
+LinkPreview.className = CLASSNAME;
+LinkPreview.defaultProps = DEFAULT_PROPS;
+
+export { LinkPreview };
+//# sourceMappingURL=index.ts-fee89f66.js.map

package/_internal/components/link-preview/index.ts-fee89f66.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.ts-fee89f66.js","sources":["../../../../src/components/link-preview/LinkPreview.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n    AspectRatio,\n    ColorPalette,\n    ColorVariant,\n    Link,\n    LinkProps,\n    Size,\n    Theme,\n    Thumbnail,\n    ThumbnailProps,\n} from '@lumx/react';\n\nimport { GenericProps, HeadingElement, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface LinkPreviewProps extends GenericProps, HasTheme {\n    /** Description. */\n    description?: string;\n    /** Link URL. */\n    link: string;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Props to pass to the link (minus those already set by the LinkPreview props). */\n    linkProps?: Omit<LinkProps, 'color' | 'colorVariant' | 'href' | 'target'>;\n    /** Size variant. */\n    size?: Extract<Size, 'regular' | 'big'>;\n    /** Thumbnail for the link preview. */\n    thumbnailProps?: ThumbnailProps;\n    /** Title. */\n    title?: string;\n    /** Customize the title heading tag. */\n    titleHeading?: HeadingElement;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'LinkPreview';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS = {\n    size: Size.regular,\n    titleHeading: 'h2',\n} as const;\n\n/**\n * LinkPreview component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const LinkPreview = forwardRef<LinkPreviewProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        className,\n        description,\n        link,\n        linkAs,\n        linkProps,\n        size,\n        theme = defaultTheme,\n        thumbnailProps,\n        title,\n        titleHeading,\n        ...forwardedProps\n    } = props;\n    // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).\n    const TitleHeading = titleHeading as HeadingElement;\n\n    return (\n        <article\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    size: size === Size.big && thumbnailProps ? Size.big : Size.regular,\n                    theme,\n                }),\n            )}\n        >\n            <div className={`${CLASSNAME}__wrapper`}>\n                {thumbnailProps && (\n                    <div className={`${CLASSNAME}__thumbnail`}>\n                        <Thumbnail\n                            {...thumbnailProps}\n                            linkAs={linkAs}\n                            linkProps={{\n                                ...linkProps,\n                                href: link,\n                                target: '_blank',\n                                // Avoid redundant links in focus order\n                                tabIndex: -1,\n                            }}\n                            aspectRatio={AspectRatio.free}\n                            fillHeight\n                        />\n                    </div>\n                )}\n\n                <div className={`${CLASSNAME}__container`}>\n                    {title && (\n                        <TitleHeading className={`${CLASSNAME}__title`}>\n                            <Link\n                                {...linkProps}\n                                linkAs={linkAs}\n                                target=\"_blank\"\n                                href={link}\n                                color={theme === Theme.light ? ColorPalette.dark : ColorPalette.light}\n                                colorVariant={ColorVariant.N}\n                            >\n                                {title}\n                            </Link>\n                        </TitleHeading>\n                    )}\n\n                    {description && <p className={`${CLASSNAME}__description`}>{description}</p>}\n\n                    <div className={`${CLASSNAME}__link`}>\n                        <Link\n                            {...linkProps}\n                            linkAs={linkAs}\n                            className={classNames(`${CLASSNAME}__link`, linkProps?.className)}\n                            target=\"_blank\"\n                            href={link}\n                            color={theme === Theme.light ? ColorPalette.primary : ColorPalette.light}\n                            colorVariant={ColorVariant.N}\n                            // Avoid redundant links in focus order\n                            tabIndex={title ? '-1' : undefined}\n                        >\n                            {link}\n                        </Link>\n                    </div>\n                </div>\n            </div>\n        </article>\n    );\n});\n\nLinkPreview.displayName = COMPONENT_NAME;\nLinkPreview.className = CLASSNAME;\nLinkPreview.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","regular","titleHeading","LinkPreview","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","description","link","linkAs","linkProps","theme","thumbnailProps","title","forwardedProps","_objectWithoutProperties","_excluded","TitleHeading","React","createElement","_extends","classNames","handleBasicClasses","prefix","big","Thumbnail","_objectSpread","href","target","tabIndex","aspectRatio","AspectRatio","free","fillHeight","Link","color","ColorPalette","dark","colorVariant","ColorVariant","N","primary","undefined","displayName","defaultProps"],"mappings":"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"}

package/_internal/components/list/index.ts-ab57902e.d.ts

@@ -0,0 +1,118 @@
+import React, { RefObject, SetStateAction, ReactNode, Key, SyntheticEvent, Ref } from 'react';
+import { G as GenericProps, S as Size, C as Comp } from '../../8d67e1e3.js';
+
+type Listener = (evt: KeyboardEvent) => void;
+interface UseKeyboardListNavigationType {
+    /** the current active index */
+    activeItemIndex: number;
+    /** callback to be used when a key is pressed. usually used with the native prop `onKeyDown` */
+    onKeyboardNavigation: Listener;
+    /** Resets the active index to the initial state */
+    resetActiveIndex(): void;
+    /** Sets the active index to a given value */
+    setActiveItemIndex(value: SetStateAction<number>): void;
+}
+type useKeyboardListNavigationType = <I>(items: I[], ref: RefObject<HTMLElement>, onListItemSelected: (itemSelected: I) => void, onListItemNavigated?: (itemSelected: I) => void, onEnterPressed?: (itemSelected: string) => void, onBackspacePressed?: Listener, keepFocusAfterSelection?: boolean, initialIndex?: number, preventTabOnEnteredValue?: boolean) => UseKeyboardListNavigationType;
+
+/**
+ * Defines the props of the component.
+ */
+interface ListProps extends GenericProps {
+    /** List content (should be ListItem, ListSubheader or ListDivider). */
+    children: ReactNode;
+    /**
+     * Whether the list items are clickable.
+     * @deprecated not needed anymore.
+     */
+    isClickable?: boolean;
+    /** Item padding size. */
+    itemPadding?: Extract<Size, 'big' | 'huge'>;
+    /** Tab index of the list. Default to -1 */
+    tabIndex?: number;
+    /**
+     * On list item selected callback.
+     *
+     * @param key   React key of the selected item.
+     * @param index Index of the selected item among the sibling items.
+     * @param evt   Source event (either mouse or keyboard event).
+     */
+    onListItemSelected?(key: Key, index: number, evt: SyntheticEvent): void;
+}
+declare const List: Comp<ListProps, HTMLUListElement> & {
+    useKeyboardListNavigation: useKeyboardListNavigationType;
+};
+
+type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+/**
+ * Defines the props of the component.
+ */
+interface ListItemProps extends GenericProps {
+    /** A component to be rendered after the content. */
+    after?: ReactNode;
+    /** A component to be rendered before the content. */
+    before?: ReactNode;
+    /** Content. */
+    children: string | ReactNode;
+    /** Whether the list item should be highlighted or not. */
+    isHighlighted?: boolean;
+    /** Whether the component is selected or not. */
+    isSelected?: boolean;
+    /** Whether link/button is disabled or not. */
+    isDisabled?: boolean;
+    /** Reference to the <li> element. */
+    listItemRef?: Ref<HTMLLIElement>;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
+    /** Props that will be passed on to the Link */
+    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    /** Reference to the link element. */
+    linkRef?: Ref<HTMLAnchorElement>;
+    /** Size variant. */
+    size?: ListItemSize;
+    /** On selected callback. */
+    onItemSelected?(evt: SyntheticEvent): void;
+}
+/**
+ * Check if the list item is clickable.
+ * @return `true` if the list item is clickable; `false` otherwise.
+ */
+declare function isClickable({ linkProps, onItemSelected }: Partial<ListItemProps>): boolean;
+/**
+ * ListItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const ListItem: Comp<ListItemProps, HTMLLIElement>;
+
+/**
+ * Defines the props of the component.
+ */
+type ListDividerProps = GenericProps;
+/**
+ * ListDivider component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const ListDivider: Comp<GenericProps, HTMLLIElement>;
+
+/**
+ * Defines the props of the component.
+ */
+interface ListSubheaderProps extends GenericProps {
+    /** Content. */
+    children: string | ReactNode;
+}
+/**
+ * ListSubheader component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const ListSubheader: Comp<ListSubheaderProps, HTMLLIElement>;
+
+export { List, ListDivider, type ListDividerProps, ListItem, type ListItemProps, type ListItemSize, type ListProps, ListSubheader, type ListSubheaderProps, isClickable };