@lumx/react 3.20.1-alpha.31 → 3.20.1-alpha.33

package/_internal/packages/lumx-react/src/components/link/Link-f8b5025c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link-f8b5025c.js","sources":["../../../../../../../src/components/link/Link.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ColorVariant, ColorWithVariants, Icon, Typography } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport {\n    getRootClassName,\n    getTypographyClassName,\n    handleBasicClasses,\n    resolveColorWithVariants,\n} from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\n\ntype HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface LinkProps extends GenericProps, HasAriaDisabled {\n    /** Color variant. */\n    color?: ColorWithVariants;\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    /**\n     * Left icon (SVG path).\n     * @deprecated Instead, simply nest `<Icon />` in the children\n     */\n    leftIcon?: string;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /**\n     * Right icon (SVG path).\n     * @deprecated Instead, simply nest `<Icon />` in the children\n     */\n    rightIcon?: string;\n    /** Link target. */\n    target?: HTMLAnchorProps['target'];\n    /** Typography variant. */\n    typography?: Typography;\n    /** Children */\n    children?: React.ReactNode;\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\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 { disabledStateProps, otherProps } = useDisableStateProps(props);\n    const {\n        children,\n        className,\n        color: propColor,\n        colorVariant: propColorVariant,\n        leftIcon,\n        rightIcon,\n        typography,\n        linkAs,\n        ...forwardedProps\n    } = otherProps;\n    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);\n\n    return (\n        <RawClickable\n            ref={ref as any}\n            as={linkAs || (forwardedProps.href ? 'a' : 'button')}\n            {...forwardedProps}\n            {...disabledStateProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, color, colorVariant, hasTypography: !!typography }),\n                typography && getTypographyClassName(typography),\n            )}\n        >\n            {wrapChildrenIconWithSpaces(\n                <>\n                    {leftIcon && <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} />}\n                    {children && <span className={`${CLASSNAME}__content`}>{children}</span>}\n                    {rightIcon && <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} />}\n                </>,\n            )}\n        </RawClickable>\n    );\n});\nLink.displayName = COMPONENT_NAME;\nLink.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","Link","forwardRef","props","ref","disabledStateProps","otherProps","useDisableStateProps","children","className","color","propColor","colorVariant","propColorVariant","leftIcon","rightIcon","typography","linkAs","forwardedProps","resolveColorWithVariants","_jsx","RawClickable","as","href","classNames","handleBasicClasses","prefix","hasTypography","getTypographyClassName","wrapChildrenIconWithSpaces","_jsxs","_Fragment","Icon","icon","displayName"],"mappings":";;;;;;;;;AAkDA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,MAAM,CAAA;;AAE7B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,IAAI,GAAGC,UAAU,CAAmD,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC7F,MAAM;IAAEC,kBAAkB;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,oBAAoB,CAACJ,KAAK,CAAC,CAAA;EACtE,MAAM;IACFK,QAAQ;IACRC,SAAS;AACTC,IAAAA,KAAK,EAAEC,SAAS;AAChBC,IAAAA,YAAY,EAAEC,gBAAgB;IAC9BC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,MAAM;IACN,GAAGC,cAAAA;AACP,GAAC,GAAGZ,UAAU,CAAA;EACd,MAAM,CAACI,KAAK,EAAEE,YAAY,CAAC,GAAGO,wBAAwB,CAACR,SAAS,EAAEE,gBAAgB,CAAC,CAAA;EAEnF,oBACIO,GAAA,CAACC,YAAY,EAAA;AACTjB,IAAAA,GAAG,EAAEA,GAAW;IAChBkB,EAAE,EAAEL,MAAM,KAAKC,cAAc,CAACK,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAE;AAAA,IAAA,GACjDL,cAAc;AAAA,IAAA,GACdb,kBAAkB;AACtBI,IAAAA,SAAS,EAAEe,UAAU,CACjBf,SAAS,EACTgB,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE3B,SAAS;MAAEW,KAAK;MAAEE,YAAY;MAAEe,aAAa,EAAE,CAAC,CAACX,UAAAA;KAAY,CAAC,EAC3FA,UAAU,IAAIY,sBAAsB,CAACZ,UAAU,CACnD,CAAE;AAAAR,IAAAA,QAAA,EAEDqB,0BAA0B,cACvBC,IAAA,CAAAC,QAAA,EAAA;AAAAvB,MAAAA,QAAA,EACKM,CAAAA,QAAQ,iBAAIM,GAAA,CAACY,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEnB,QAAS;QAACL,SAAS,EAAE,GAAGV,SAAS,CAAA,WAAA,CAAA;AAAc,OAAE,CAAC,EAC1ES,QAAQ,iBAAIY,GAAA,CAAA,MAAA,EAAA;QAAMX,SAAS,EAAE,CAAGV,EAAAA,SAAS,CAAY,SAAA,CAAA;AAAAS,QAAAA,QAAA,EAAEA,QAAAA;AAAQ,OAAO,CAAC,EACvEO,SAAS,iBAAIK,GAAA,CAACY,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAElB,SAAU;QAACN,SAAS,EAAE,GAAGV,SAAS,CAAA,YAAA,CAAA;AAAe,OAAE,CAAC,CAAA;AAAA,KAChF,CACN,CAAA;AAAC,GACS,CAAC,CAAA;AAEvB,CAAC,EAAC;AACFE,IAAI,CAACiC,WAAW,GAAGpC,cAAc,CAAA;AACjCG,IAAI,CAACQ,SAAS,GAAGV,SAAS;;;;"}

package/_internal/{components/link-preview-79500604.js → packages/lumx-react/src/components/link-preview/LinkPreview-777017cb.js}

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useTheme } from '../ThemeContext-3181f000.js';
-import { f as forwardRef } from '../forwardRef-8bce732e.js';
+import { useTheme } from '../../utils/theme/ThemeContext-d8ee966d.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Link } from './link-9c3feb34.js';
+import { Link } from '../link/Link-f8b5025c.js';
 import { Size, Theme, AspectRatio, ColorPalette, ColorVariant } from '@lumx/core/js/constants';
-import { T as Thumbnail } from '../Thumbnail-d2001ccb.js';
+import { Thumbnail } from '../thumbnail/Thumbnail-49bab66c.js';
 
 /**
  * Component display name.
@@ -115,4 +115,4 @@ LinkPreview.className = CLASSNAME;
 LinkPreview.defaultProps = DEFAULT_PROPS;
 
 export { LinkPreview };
-//# sourceMappingURL=link-preview-79500604.js.map
+//# sourceMappingURL=LinkPreview-777017cb.js.map

package/_internal/packages/lumx-react/src/components/link-preview/LinkPreview-777017cb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkPreview-777017cb.js","sources":["../../../../../../../src/components/link-preview/LinkPreview.tsx"],"sourcesContent":["import 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/core/js/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 = DEFAULT_PROPS.size,\n        theme = defaultTheme,\n        thumbnailProps,\n        title,\n        titleHeading = DEFAULT_PROPS.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","TitleHeading","_jsx","classNames","handleBasicClasses","prefix","big","children","_jsxs","Thumbnail","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/packages/lumx-react/src/components/list/List-83b50e25.js

@@ -0,0 +1,75 @@
+import { useRef } from 'react';
+import classNames from 'classnames';
+import { useKeyboardListNavigation } from '../../hooks/useKeyboardListNavigation-2040beb8.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { mergeRefs } from '../../utils/react/mergeRefs-27df0cb6.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { useInteractiveList } from './useInteractiveList-2c23640c.js';
+import { jsx } from 'react/jsx-runtime';
+import { Size } from '@lumx/core/js/constants';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'List';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  tabIndex: -1
+};
+
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+/**
+ * List component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const InternalList = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    isClickable,
+    itemPadding,
+    onListItemSelected,
+    tabIndex = DEFAULT_PROPS.tabIndex,
+    ...forwardedProps
+  } = props;
+  const listElementRef = useRef(null);
+  const {
+    items,
+    hasClickableItem
+  } = useInteractiveList({
+    items: children,
+    ref: listElementRef,
+    onListItemSelected
+  });
+  const clickable = hasClickableItem || isClickable;
+  return /*#__PURE__*/jsx("ul", {
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      itemPadding: itemPadding ?? (clickable ? Size.big : undefined)
+    })),
+    tabIndex: tabIndex,
+    ref: mergeRefs(ref, listElementRef),
+    children: items
+  });
+});
+InternalList.displayName = COMPONENT_NAME;
+InternalList.className = CLASSNAME;
+InternalList.defaultProps = DEFAULT_PROPS;
+const List = Object.assign(InternalList, {
+  useKeyboardListNavigation
+});
+
+export { List };
+//# sourceMappingURL=List-83b50e25.js.map

package/_internal/packages/lumx-react/src/components/list/List-83b50e25.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List-83b50e25.js","sources":["../../../../../../../src/components/list/List.tsx"],"sourcesContent":["import { Key, ReactNode, SyntheticEvent, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Size } from '@lumx/react';\nimport { useKeyboardListNavigation } from '@lumx/react/hooks/useKeyboardListNavigation';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useInteractiveList } from './useInteractiveList';\n\n/**\n * Defines the props of the component.\n */\nexport interface ListProps extends GenericProps {\n    /** List content (should be ListItem, ListSubheader or ListDivider). */\n    children: ReactNode;\n    /**\n     * Whether the list items are clickable.\n     * @deprecated not needed anymore.\n     */\n    isClickable?: boolean;\n    /** Item padding size. */\n    itemPadding?: Extract<Size, 'big' | 'huge'>;\n    /** Tab index of the list. Default to -1 */\n    tabIndex?: number;\n    /**\n     * On list item selected callback.\n     *\n     * @param key   React key of the selected item.\n     * @param index Index of the selected item among the sibling items.\n     * @param evt   Source event (either mouse or keyboard event).\n     */\n    onListItemSelected?(key: Key, index: number, evt: SyntheticEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'List';\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: Partial<ListProps> = {\n    tabIndex: -1,\n};\n\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\n/**\n * List component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nconst InternalList = forwardRef<ListProps, HTMLUListElement>((props, ref) => {\n    const {\n        children,\n        className,\n        isClickable,\n        itemPadding,\n        onListItemSelected,\n        tabIndex = DEFAULT_PROPS.tabIndex,\n        ...forwardedProps\n    } = props;\n    const listElementRef = useRef<HTMLUListElement>(null);\n\n    const { items, hasClickableItem } = useInteractiveList({\n        items: children,\n        ref: listElementRef,\n        onListItemSelected,\n    });\n    const clickable = hasClickableItem || isClickable;\n\n    return (\n        <ul\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    itemPadding: itemPadding ?? (clickable ? Size.big : undefined),\n                }),\n            )}\n            tabIndex={tabIndex}\n            ref={mergeRefs(ref, listElementRef)}\n        >\n            {items}\n        </ul>\n    );\n});\nInternalList.displayName = COMPONENT_NAME;\nInternalList.className = CLASSNAME;\nInternalList.defaultProps = DEFAULT_PROPS;\n\nexport const List = Object.assign(InternalList, { useKeyboardListNavigation });\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","tabIndex","InternalList","forwardRef","props","ref","children","className","isClickable","itemPadding","onListItemSelected","forwardedProps","listElementRef","useRef","items","hasClickableItem","useInteractiveList","clickable","_jsx","classNames","handleBasicClasses","prefix","Size","big","undefined","mergeRefs","displayName","defaultProps","List","Object","assign","useKeyboardListNavigation"],"mappings":";;;;;;;;;;AAsCA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,MAAM,CAAA;;AAE7B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAiC,GAAG;AACtCC,EAAAA,QAAQ,EAAE,CAAC,CAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,YAAY,GAAGC,UAAU,CAA8B,CAACC,KAAK,EAAEC,GAAG,KAAK;EACzE,MAAM;IACFC,QAAQ;IACRC,SAAS;IACTC,WAAW;IACXC,WAAW;IACXC,kBAAkB;IAClBT,QAAQ,GAAGD,aAAa,CAACC,QAAQ;IACjC,GAAGU,cAAAA;AACP,GAAC,GAAGP,KAAK,CAAA;AACT,EAAA,MAAMQ,cAAc,GAAGC,MAAM,CAAmB,IAAI,CAAC,CAAA;EAErD,MAAM;IAAEC,KAAK;AAAEC,IAAAA,gBAAAA;GAAkB,GAAGC,kBAAkB,CAAC;AACnDF,IAAAA,KAAK,EAAER,QAAQ;AACfD,IAAAA,GAAG,EAAEO,cAAc;AACnBF,IAAAA,kBAAAA;AACJ,GAAC,CAAC,CAAA;AACF,EAAA,MAAMO,SAAS,GAAGF,gBAAgB,IAAIP,WAAW,CAAA;AAEjD,EAAA,oBACIU,GAAA,CAAA,IAAA,EAAA;AAAA,IAAA,GACQP,cAAc;AAClBJ,IAAAA,SAAS,EAAEY,UAAU,CACjBZ,SAAS,EACTa,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEvB,SAAS;MACjBW,WAAW,EAAEA,WAAW,KAAKQ,SAAS,GAAGK,IAAI,CAACC,GAAG,GAAGC,SAAS,CAAA;AACjE,KAAC,CACL,CAAE;AACFvB,IAAAA,QAAQ,EAAEA,QAAS;AACnBI,IAAAA,GAAG,EAAEoB,SAAS,CAACpB,GAAG,EAAEO,cAAc,CAAE;AAAAN,IAAAA,QAAA,EAEnCQ,KAAAA;AAAK,GACN,CAAC,CAAA;AAEb,CAAC,CAAC,CAAA;AACFZ,YAAY,CAACwB,WAAW,GAAG7B,cAAc,CAAA;AACzCK,YAAY,CAACK,SAAS,GAAGT,SAAS,CAAA;AAClCI,YAAY,CAACyB,YAAY,GAAG3B,aAAa,CAAA;AAElC,MAAM4B,IAAI,GAAGC,MAAM,CAACC,MAAM,CAAC5B,YAAY,EAAE;AAAE6B,EAAAA,yBAAAA;AAA0B,CAAC;;;;"}

package/_internal/packages/lumx-react/src/components/list/ListDivider-0cf94491.js

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ListDivider';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * ListDivider component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ListDivider = forwardRef((props, ref) => {
+  const {
+    className,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("li", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, CLASSNAME)
+  });
+});
+ListDivider.displayName = COMPONENT_NAME;
+ListDivider.className = CLASSNAME;
+
+export { ListDivider };
+//# sourceMappingURL=ListDivider-0cf94491.js.map

package/_internal/packages/lumx-react/src/components/list/ListDivider-0cf94491.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListDivider-0cf94491.js","sources":["../../../../../../../src/components/list/ListDivider.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport type ListDividerProps = GenericProps;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ListDivider';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * ListDivider component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ListDivider = forwardRef<ListDividerProps, HTMLLIElement>((props, ref) => {\n    const { className, ...forwardedProps } = props;\n\n    return <li ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)} />;\n});\nListDivider.displayName = COMPONENT_NAME;\nListDivider.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","ListDivider","forwardRef","props","ref","className","forwardedProps","_jsx","classNames","displayName"],"mappings":";;;;;AAWA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,aAAa,CAAA;;AAEpC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,WAAW,GAAGC,UAAU,CAAkC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACnF,MAAM;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGH,KAAK,CAAA;AAE9C,EAAA,oBAAOI,GAAA,CAAA,IAAA,EAAA;AAAIH,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKE,cAAc;AAAED,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAEN,SAAS,CAAA;AAAE,GAAE,CAAC,CAAA;AAC5F,CAAC,EAAC;AACFE,WAAW,CAACQ,WAAW,GAAGX,cAAc,CAAA;AACxCG,WAAW,CAACI,SAAS,GAAGN,SAAS;;;;"}

package/_internal/packages/lumx-react/src/components/list/ListItem-6278e6a0.js

@@ -0,0 +1,126 @@
+import { useMemo } from 'react';
+import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+import { onEnterPressed, onButtonPressed } from '@lumx/core/js/utils';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { renderLink } from '../../utils/react/renderLink-09d97180.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { useDisableStateProps } from '../../utils/disabled/useDisableStateProps-2391c02d.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Size } from '@lumx/core/js/constants';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ListItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  size: Size.regular
+};
+
+/**
+ * Check if the list item is clickable.
+ * @return `true` if the list item is clickable; `false` otherwise.
+ */
+function isClickable({
+  linkProps,
+  onItemSelected
+}) {
+  return !isEmpty(linkProps?.href) || !!onItemSelected;
+}
+
+/**
+ * ListItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ListItem = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    after,
+    before,
+    children,
+    className,
+    isHighlighted,
+    isSelected,
+    linkAs,
+    linkProps = {},
+    linkRef,
+    onItemSelected,
+    size = DEFAULT_PROPS.size,
+    ...forwardedProps
+  } = otherProps;
+  const role = linkAs || linkProps.href ? 'link' : 'button';
+  const onKeyDown = useMemo(() => {
+    if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected);
+    if (onItemSelected && role === 'button') return onButtonPressed(onItemSelected);
+    return undefined;
+  }, [role, onItemSelected]);
+  const content = /*#__PURE__*/jsxs(Fragment, {
+    children: [before && /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME}__before`,
+      children: before
+    }), /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME}__content`,
+      children: children
+    }), after && /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME}__after`,
+      children: after
+    })]
+  });
+  return /*#__PURE__*/jsx("li", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      size
+    })),
+    children: isClickable({
+      linkProps,
+      onItemSelected
+    }) ? (/* Clickable list item */
+    renderLink({
+      linkAs,
+      tabIndex: !disabledStateProps.disabled ? 0 : undefined,
+      role,
+      'aria-disabled': isAnyDisabled,
+      ...linkProps,
+      href: isAnyDisabled ? undefined : linkProps.href,
+      className: classNames(handleBasicClasses({
+        prefix: `${CLASSNAME}__link`,
+        isHighlighted,
+        isSelected,
+        isDisabled: isAnyDisabled
+      })),
+      onClick: isAnyDisabled ? undefined : onItemSelected,
+      onKeyDown: isAnyDisabled ? undefined : onKeyDown,
+      ref: linkRef
+    }, content)) :
+    /*#__PURE__*/
+    /* Non clickable list item */
+    jsx("div", {
+      className: `${CLASSNAME}__wrapper`,
+      children: content
+    })
+  });
+});
+ListItem.displayName = COMPONENT_NAME;
+ListItem.className = CLASSNAME;
+ListItem.defaultProps = DEFAULT_PROPS;
+
+export { ListItem, isClickable };
+//# sourceMappingURL=ListItem-6278e6a0.js.map

package/_internal/packages/lumx-react/src/components/list/ListItem-6278e6a0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem-6278e6a0.js","sources":["../../../../../../../src/components/list/ListItem.tsx"],"sourcesContent":["import { ReactNode, Ref, SyntheticEvent, useMemo } from 'react';\n\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\n\nimport { ListProps, Size } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { onEnterPressed, onButtonPressed } from '@lumx/core/js/utils';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { renderLink } from '@lumx/react/utils/react/renderLink';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\n\nexport type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ListItemProps extends GenericProps, HasAriaDisabled {\n    /** A component to be rendered after the content. */\n    after?: ReactNode;\n    /** A component to be rendered before the content. */\n    before?: ReactNode;\n    /** Content. */\n    children: string | ReactNode;\n    /** Whether the list item should be highlighted or not. */\n    isHighlighted?: boolean;\n    /** Whether the component is selected or not. */\n    isSelected?: boolean;\n    /** Whether link/button is disabled or not. */\n    isDisabled?: boolean;\n    /** Reference to the <li> element. */\n    listItemRef?: Ref<HTMLLIElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Props that will be passed on to the Link */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Reference to the link element. */\n    linkRef?: Ref<HTMLAnchorElement>;\n    /** Size variant. */\n    size?: ListItemSize;\n\n    /** On selected callback. */\n    onItemSelected?(evt: SyntheticEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ListItem';\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: Partial<ListProps> = {\n    size: Size.regular,\n};\n\n/**\n * Check if the list item is clickable.\n * @return `true` if the list item is clickable; `false` otherwise.\n */\nexport function isClickable({ linkProps, onItemSelected }: Partial<ListItemProps>): boolean {\n    return !isEmpty(linkProps?.href) || !!onItemSelected;\n}\n\n/**\n * ListItem component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ListItem = forwardRef<ListItemProps, HTMLLIElement>((props, ref) => {\n    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n    const {\n        after,\n        before,\n        children,\n        className,\n        isHighlighted,\n        isSelected,\n        linkAs,\n        linkProps = {},\n        linkRef,\n        onItemSelected,\n        size = DEFAULT_PROPS.size,\n        ...forwardedProps\n    } = otherProps;\n\n    const role = linkAs || linkProps.href ? 'link' : 'button';\n    const onKeyDown = useMemo(() => {\n        if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected as any);\n        if (onItemSelected && role === 'button') return onButtonPressed(onItemSelected as any);\n        return undefined;\n    }, [role, onItemSelected]);\n\n    const content = (\n        <>\n            {before && <div className={`${CLASSNAME}__before`}>{before}</div>}\n            <div className={`${CLASSNAME}__content`}>{children}</div>\n            {after && <div className={`${CLASSNAME}__after`}>{after}</div>}\n        </>\n    );\n\n    return (\n        <li\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    size,\n                }),\n            )}\n        >\n            {isClickable({ linkProps, onItemSelected }) ? (\n                /* Clickable list item */\n                renderLink(\n                    {\n                        linkAs,\n                        tabIndex: !disabledStateProps.disabled ? 0 : undefined,\n                        role,\n                        'aria-disabled': isAnyDisabled,\n                        ...linkProps,\n                        href: isAnyDisabled ? undefined : linkProps.href,\n                        className: classNames(\n                            handleBasicClasses({\n                                prefix: `${CLASSNAME}__link`,\n                                isHighlighted,\n                                isSelected,\n                                isDisabled: isAnyDisabled,\n                            }),\n                        ),\n                        onClick: isAnyDisabled ? undefined : onItemSelected,\n                        onKeyDown: isAnyDisabled ? undefined : onKeyDown,\n                        ref: linkRef,\n                    },\n                    content,\n                )\n            ) : (\n                /* Non clickable list item */\n                <div className={`${CLASSNAME}__wrapper`}>{content}</div>\n            )}\n        </li>\n    );\n});\nListItem.displayName = COMPONENT_NAME;\nListItem.className = CLASSNAME;\nListItem.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","regular","isClickable","linkProps","onItemSelected","isEmpty","href","ListItem","forwardRef","props","ref","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","after","before","children","className","isHighlighted","isSelected","linkAs","linkRef","forwardedProps","role","onKeyDown","useMemo","onEnterPressed","onButtonPressed","undefined","content","_jsxs","_Fragment","_jsx","classNames","handleBasicClasses","prefix","renderLink","tabIndex","disabled","isDisabled","onClick","displayName","defaultProps"],"mappings":"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"}

package/_internal/packages/lumx-react/src/components/list/ListSubheader-8600d84d.js

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ListSubheader';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * ListSubheader component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ListSubheader = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("li", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, CLASSNAME),
+    children: children
+  });
+});
+ListSubheader.displayName = COMPONENT_NAME;
+ListSubheader.className = CLASSNAME;
+
+export { ListSubheader };
+//# sourceMappingURL=ListSubheader-8600d84d.js.map

package/_internal/packages/lumx-react/src/components/list/ListSubheader-8600d84d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListSubheader-8600d84d.js","sources":["../../../../../../../src/components/list/ListSubheader.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface ListSubheaderProps extends GenericProps {\n    /** Content. */\n    children: string | ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ListSubheader';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * ListSubheader component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ListSubheader = forwardRef<ListSubheaderProps, HTMLLIElement>((props, ref) => {\n    const { children, className, ...forwardedProps } = props;\n\n    return (\n        <li ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n            {children}\n        </li>\n    );\n});\nListSubheader.displayName = COMPONENT_NAME;\nListSubheader.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","ListSubheader","forwardRef","props","ref","children","className","forwardedProps","_jsx","classNames","displayName"],"mappings":";;;;;AAgBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,eAAe,CAAA;;AAEtC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,aAAa,GAAGC,UAAU,CAAoC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACvF,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AAExD,EAAA,oBACIK,GAAA,CAAA,IAAA,EAAA;AAAIJ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKG,cAAc;AAAED,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAEP,SAAS,CAAE;AAAAM,IAAAA,QAAA,EACzEA,QAAAA;AAAQ,GACT,CAAC,CAAA;AAEb,CAAC,EAAC;AACFJ,aAAa,CAACS,WAAW,GAAGZ,cAAc,CAAA;AAC1CG,aAAa,CAACK,SAAS,GAAGP,SAAS;;;;"}

package/_internal/packages/lumx-react/src/components/list/useInteractiveList-2c23640c.js

@@ -0,0 +1,157 @@
+import { isClickable } from './ListItem-6278e6a0.js';
+import { isComponent } from '../../utils/type/isComponent-ebe24fd7.js';
+import { flattenChildren } from '../../utils/react/flattenChildren-f25e4a2f.js';
+import { mergeRefs } from '../../utils/react/mergeRefs-27df0cb6.js';
+import get from 'lodash/get';
+import { useMemo, useState, useEffect, cloneElement } from 'react';
+
+const INITIAL_INDEX = -1;
+function onKeyboardFocus(props, handler) {
+  let isMouseDown = false;
+  return {
+    onFocus(evt) {
+      props.onFocus?.(evt);
+      if (!isMouseDown) {
+        handler(evt);
+      }
+    },
+    onMouseDown(evt) {
+      props.onMouseDown?.(evt);
+      isMouseDown = true;
+    },
+    onMouseUp(evt) {
+      props.onMouseUp?.(evt);
+      isMouseDown = false;
+    }
+  };
+}
+const isNavigableItem = node => {
+  return isComponent('ListItem')(node) && isClickable(node.props) && !node.props.isDisabled;
+};
+
+/**
+ * This custom hook detects clickable list item in a list and make them navigable with the keyboard.
+ *
+ * @param  options See {@link Options}
+ * @return See {@link Output}
+ */
+const useInteractiveList = options => {
+  const {
+    ref,
+    onListItemSelected,
+    onListItemNavigated
+  } = options;
+  const items = useMemo(() => flattenChildren(options.items), [options.items]);
+  const [activeItemIndex, setActiveItemIndex] = useState(INITIAL_INDEX);
+
+  // Attach listeners to the list.
+  useEffect(() => {
+    const {
+      current: listElement
+    } = ref;
+    if (!listElement) {
+      return undefined;
+    }
+
+    /**
+     * This function calculates the next index in the list to be active
+     * @param  index current index
+     * @param  code  key code pressed
+     * @return next index
+     */
+    const getNextIndex = (index, key) => {
+      switch (key) {
+        case 'ArrowDown':
+          return index + 1 < items.length ? index + 1 : 0;
+        case 'ArrowUp':
+          return index - 1 >= 0 ? index - 1 : items.length - 1;
+        default:
+          return INITIAL_INDEX;
+      }
+    };
+
+    /**
+     * Resets the active index to the initial state
+     */
+    const resetActiveIndex = () => {
+      setActiveItemIndex(INITIAL_INDEX);
+    };
+
+    /**
+     * Handles navigation with the arrows using the keyboard
+     * @param evt Key event
+     */
+    const onArrowPressed = evt => {
+      const {
+        key
+      } = evt;
+      if (key !== 'ArrowUp' && key !== 'ArrowDown') {
+        return;
+      }
+      let nextIndex = activeItemIndex;
+      let iterations = 0;
+
+      // Move to next navigable item.
+      do {
+        nextIndex = getNextIndex(nextIndex, key);
+        iterations += 1;
+      } while (nextIndex !== INITIAL_INDEX && nextIndex !== activeItemIndex && !isNavigableItem(items[nextIndex]) && iterations < items.length);
+      setActiveItemIndex(nextIndex);
+      evt.preventDefault();
+      evt.stopPropagation();
+      onListItemNavigated?.(nextIndex, get(items, [nextIndex, 'key']));
+    };
+
+    /**
+     * Reset active list item index when focusing outside the list.
+     * @param evt Focus out event
+     */
+    const onFocusOut = evt => {
+      if (!evt.relatedTarget || !listElement.contains(evt.relatedTarget)) {
+        resetActiveIndex();
+      }
+    };
+    listElement.addEventListener('focusout', onFocusOut);
+    listElement.addEventListener('keydown', onArrowPressed);
+    return () => {
+      listElement.removeEventListener('focusout', onFocusOut);
+      listElement.removeEventListener('keydown', onArrowPressed);
+    };
+  }, [ref, activeItemIndex, items, onListItemNavigated]);
+  return useMemo(() => {
+    let hasClickableItem = false;
+    const transformedItems = items.map((item, index) => {
+      // Ignore if list not clickable or item is not a simple list item.
+      if (!isNavigableItem(item)) {
+        return item;
+      }
+      hasClickableItem = true;
+      const isHighlighted = index === activeItemIndex;
+
+      // Clone list item: inject ref, add tab index and active state.
+      return /*#__PURE__*/cloneElement(item, {
+        ...item.props,
+        isHighlighted: item.props.isHighlighted ?? isHighlighted,
+        linkRef: mergeRefs(item.props.linkRef, element => {
+          if (isHighlighted) {
+            element?.focus();
+          }
+        }),
+        onItemSelected(evt) {
+          item.props.onItemSelected?.();
+          onListItemSelected?.(index, item.key, evt);
+        },
+        ...onKeyboardFocus(item.props, () => {
+          setActiveItemIndex(index);
+        })
+      });
+    });
+    return {
+      items: transformedItems,
+      hasClickableItem
+    };
+  }, [items, activeItemIndex, onListItemSelected]);
+};
+
+export { useInteractiveList };
+//# sourceMappingURL=useInteractiveList-2c23640c.js.map

package/_internal/packages/lumx-react/src/components/list/useInteractiveList-2c23640c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInteractiveList-2c23640c.js","sources":["../../../../../../../src/components/list/useInteractiveList.tsx"],"sourcesContent":["import { ListItemProps } from '@lumx/react';\nimport { isClickable } from '@lumx/react/components/list/ListItem';\n\nimport { isComponent } from '@lumx/react/utils/type';\nimport { flattenChildren } from '@lumx/react/utils/react/flattenChildren';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport get from 'lodash/get';\nimport {\n    cloneElement,\n    Key,\n    ReactElement,\n    ReactNode,\n    RefObject,\n    SyntheticEvent,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\n\ntype Listener = (evt: KeyboardEvent) => void;\n\ninterface Options {\n    /** List of items to navigate on. */\n    items: ReactNode[] | ReactNode;\n    /** Reference to the list-like element controlling the navigation. */\n    ref: RefObject<HTMLElement>;\n\n    /**\n     * On list item navigated callback (triggered on ARROW key navigation).\n     *\n     * @param index Index of the navigated item among the sibling items.\n     * @param key   React key of the navigated item.\n     */\n    onListItemNavigated?(index: number, key: Key | null): void;\n\n    /**\n     * On list item selected callback (via ENTER key or click).\n     *\n     * @param index Index of the selected item among the sibling items.\n     * @param key   React key of the selected item.\n     * @param evt   Source event (either mouse or keyboard event).\n     */\n    onListItemSelected?(index: number, key: Key | null, evt: SyntheticEvent): void;\n}\n\ninterface Output {\n    /** List of items transformed to accommodate keyboard navigation. */\n    items: ReactNode[];\n    /** Whether the list contains clickable items or not. */\n    hasClickableItem: boolean;\n}\n\nexport type useInteractiveList = (options: Options) => Output;\n\nconst INITIAL_INDEX = -1;\n\nfunction onKeyboardFocus(props: any, handler: (evt: FocusEvent) => void) {\n    let isMouseDown = false;\n    return {\n        onFocus(evt: FocusEvent) {\n            props.onFocus?.(evt);\n            if (!isMouseDown) {\n                handler(evt);\n            }\n        },\n        onMouseDown(evt: MouseEvent) {\n            props.onMouseDown?.(evt);\n            isMouseDown = true;\n        },\n        onMouseUp(evt: MouseEvent) {\n            props.onMouseUp?.(evt);\n            isMouseDown = false;\n        },\n    };\n}\n\nconst isNavigableItem = (node: ReactNode): node is ReactElement => {\n    return isComponent('ListItem')(node) && isClickable(node.props) && !node.props.isDisabled;\n};\n\n/**\n * This custom hook detects clickable list item in a list and make them navigable with the keyboard.\n *\n * @param  options See {@link Options}\n * @return See {@link Output}\n */\nexport const useInteractiveList: useInteractiveList = (options) => {\n    const { ref, onListItemSelected, onListItemNavigated } = options;\n    const items = useMemo(() => flattenChildren(options.items), [options.items]);\n    const [activeItemIndex, setActiveItemIndex] = useState(INITIAL_INDEX);\n\n    // Attach listeners to the list.\n    useEffect(() => {\n        const { current: listElement } = ref;\n        if (!listElement) {\n            return undefined;\n        }\n\n        /**\n         * This function calculates the next index in the list to be active\n         * @param  index current index\n         * @param  code  key code pressed\n         * @return next index\n         */\n        const getNextIndex = (index: number, key: string): number => {\n            switch (key) {\n                case 'ArrowDown':\n                    return index + 1 < items.length ? index + 1 : 0;\n                case 'ArrowUp':\n                    return index - 1 >= 0 ? index - 1 : items.length - 1;\n                default:\n                    return INITIAL_INDEX;\n            }\n        };\n\n        /**\n         * Resets the active index to the initial state\n         */\n        const resetActiveIndex = () => {\n            setActiveItemIndex(INITIAL_INDEX);\n        };\n\n        /**\n         * Handles navigation with the arrows using the keyboard\n         * @param evt Key event\n         */\n        const onArrowPressed: Listener = (evt) => {\n            const { key } = evt;\n            if (key !== 'ArrowUp' && key !== 'ArrowDown') {\n                return;\n            }\n\n            let nextIndex = activeItemIndex;\n            let iterations = 0;\n\n            // Move to next navigable item.\n            do {\n                nextIndex = getNextIndex(nextIndex, key);\n                iterations += 1;\n            } while (\n                nextIndex !== INITIAL_INDEX &&\n                nextIndex !== activeItemIndex &&\n                !isNavigableItem(items[nextIndex] as any) &&\n                iterations < items.length\n            );\n\n            setActiveItemIndex(nextIndex);\n            evt.preventDefault();\n            evt.stopPropagation();\n            onListItemNavigated?.(nextIndex, get(items, [nextIndex, 'key']));\n        };\n\n        /**\n         * Reset active list item index when focusing outside the list.\n         * @param evt Focus out event\n         */\n        const onFocusOut = (evt: FocusEvent) => {\n            if (!evt.relatedTarget || !listElement.contains(evt.relatedTarget as any)) {\n                resetActiveIndex();\n            }\n        };\n\n        listElement.addEventListener('focusout', onFocusOut);\n        listElement.addEventListener('keydown', onArrowPressed);\n        return () => {\n            listElement.removeEventListener('focusout', onFocusOut);\n            listElement.removeEventListener('keydown', onArrowPressed);\n        };\n    }, [ref, activeItemIndex, items, onListItemNavigated]);\n\n    return useMemo(() => {\n        let hasClickableItem = false;\n        const transformedItems = items.map((item, index) => {\n            // Ignore if list not clickable or item is not a simple list item.\n            if (!isNavigableItem(item)) {\n                return item;\n            }\n\n            hasClickableItem = true;\n            const isHighlighted = index === activeItemIndex;\n\n            // Clone list item: inject ref, add tab index and active state.\n            return cloneElement<ListItemProps>(item, {\n                ...item.props,\n                isHighlighted: item.props.isHighlighted ?? isHighlighted,\n                linkRef: mergeRefs(item.props.linkRef, (element: any) => {\n                    if (isHighlighted) {\n                        element?.focus();\n                    }\n                }),\n                onItemSelected(evt) {\n                    item.props.onItemSelected?.();\n                    onListItemSelected?.(index, item.key, evt);\n                },\n                ...onKeyboardFocus(item.props, () => {\n                    setActiveItemIndex(index);\n                }),\n            });\n        });\n        return { items: transformedItems, hasClickableItem };\n    }, [items, activeItemIndex, onListItemSelected]);\n};\n"],"names":["INITIAL_INDEX","onKeyboardFocus","props","handler","isMouseDown","onFocus","evt","onMouseDown","onMouseUp","isNavigableItem","node","isComponent","isClickable","isDisabled","useInteractiveList","options","ref","onListItemSelected","onListItemNavigated","items","useMemo","flattenChildren","activeItemIndex","setActiveItemIndex","useState","useEffect","current","listElement","undefined","getNextIndex","index","key","length","resetActiveIndex","onArrowPressed","nextIndex","iterations","preventDefault","stopPropagation","get","onFocusOut","relatedTarget","contains","addEventListener","removeEventListener","hasClickableItem","transformedItems","map","item","isHighlighted","cloneElement","linkRef","mergeRefs","element","focus","onItemSelected"],"mappings":";;;;;;;AAsDA,MAAMA,aAAa,GAAG,CAAC,CAAC,CAAA;AAExB,SAASC,eAAeA,CAACC,KAAU,EAAEC,OAAkC,EAAE;EACrE,IAAIC,WAAW,GAAG,KAAK,CAAA;EACvB,OAAO;IACHC,OAAOA,CAACC,GAAe,EAAE;AACrBJ,MAAAA,KAAK,CAACG,OAAO,GAAGC,GAAG,CAAC,CAAA;MACpB,IAAI,CAACF,WAAW,EAAE;QACdD,OAAO,CAACG,GAAG,CAAC,CAAA;AAChB,OAAA;KACH;IACDC,WAAWA,CAACD,GAAe,EAAE;AACzBJ,MAAAA,KAAK,CAACK,WAAW,GAAGD,GAAG,CAAC,CAAA;AACxBF,MAAAA,WAAW,GAAG,IAAI,CAAA;KACrB;IACDI,SAASA,CAACF,GAAe,EAAE;AACvBJ,MAAAA,KAAK,CAACM,SAAS,GAAGF,GAAG,CAAC,CAAA;AACtBF,MAAAA,WAAW,GAAG,KAAK,CAAA;AACvB,KAAA;GACH,CAAA;AACL,CAAA;AAEA,MAAMK,eAAe,GAAIC,IAAe,IAA2B;EAC/D,OAAOC,WAAW,CAAC,UAAU,CAAC,CAACD,IAAI,CAAC,IAAIE,WAAW,CAACF,IAAI,CAACR,KAAK,CAAC,IAAI,CAACQ,IAAI,CAACR,KAAK,CAACW,UAAU,CAAA;AAC7F,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACaC,MAAAA,kBAAsC,GAAIC,OAAO,IAAK;EAC/D,MAAM;IAAEC,GAAG;IAAEC,kBAAkB;AAAEC,IAAAA,mBAAAA;AAAoB,GAAC,GAAGH,OAAO,CAAA;AAChE,EAAA,MAAMI,KAAK,GAAGC,OAAO,CAAC,MAAMC,eAAe,CAACN,OAAO,CAACI,KAAK,CAAC,EAAE,CAACJ,OAAO,CAACI,KAAK,CAAC,CAAC,CAAA;EAC5E,MAAM,CAACG,eAAe,EAAEC,kBAAkB,CAAC,GAAGC,QAAQ,CAACxB,aAAa,CAAC,CAAA;;AAErE;AACAyB,EAAAA,SAAS,CAAC,MAAM;IACZ,MAAM;AAAEC,MAAAA,OAAO,EAAEC,WAAAA;AAAY,KAAC,GAAGX,GAAG,CAAA;IACpC,IAAI,CAACW,WAAW,EAAE;AACd,MAAA,OAAOC,SAAS,CAAA;AACpB,KAAA;;AAEA;AACR;AACA;AACA;AACA;AACA;AACQ,IAAA,MAAMC,YAAY,GAAGA,CAACC,KAAa,EAAEC,GAAW,KAAa;AACzD,MAAA,QAAQA,GAAG;AACP,QAAA,KAAK,WAAW;AACZ,UAAA,OAAOD,KAAK,GAAG,CAAC,GAAGX,KAAK,CAACa,MAAM,GAAGF,KAAK,GAAG,CAAC,GAAG,CAAC,CAAA;AACnD,QAAA,KAAK,SAAS;AACV,UAAA,OAAOA,KAAK,GAAG,CAAC,IAAI,CAAC,GAAGA,KAAK,GAAG,CAAC,GAAGX,KAAK,CAACa,MAAM,GAAG,CAAC,CAAA;AACxD,QAAA;AACI,UAAA,OAAOhC,aAAa,CAAA;AAC5B,OAAA;KACH,CAAA;;AAED;AACR;AACA;IACQ,MAAMiC,gBAAgB,GAAGA,MAAM;MAC3BV,kBAAkB,CAACvB,aAAa,CAAC,CAAA;KACpC,CAAA;;AAED;AACR;AACA;AACA;IACQ,MAAMkC,cAAwB,GAAI5B,GAAG,IAAK;MACtC,MAAM;AAAEyB,QAAAA,GAAAA;AAAI,OAAC,GAAGzB,GAAG,CAAA;AACnB,MAAA,IAAIyB,GAAG,KAAK,SAAS,IAAIA,GAAG,KAAK,WAAW,EAAE;AAC1C,QAAA,OAAA;AACJ,OAAA;MAEA,IAAII,SAAS,GAAGb,eAAe,CAAA;MAC/B,IAAIc,UAAU,GAAG,CAAC,CAAA;;AAElB;MACA,GAAG;AACCD,QAAAA,SAAS,GAAGN,YAAY,CAACM,SAAS,EAAEJ,GAAG,CAAC,CAAA;AACxCK,QAAAA,UAAU,IAAI,CAAC,CAAA;OAClB,QACGD,SAAS,KAAKnC,aAAa,IAC3BmC,SAAS,KAAKb,eAAe,IAC7B,CAACb,eAAe,CAACU,KAAK,CAACgB,SAAS,CAAQ,CAAC,IACzCC,UAAU,GAAGjB,KAAK,CAACa,MAAM,EAAA;MAG7BT,kBAAkB,CAACY,SAAS,CAAC,CAAA;MAC7B7B,GAAG,CAAC+B,cAAc,EAAE,CAAA;MACpB/B,GAAG,CAACgC,eAAe,EAAE,CAAA;AACrBpB,MAAAA,mBAAmB,GAAGiB,SAAS,EAAEI,GAAG,CAACpB,KAAK,EAAE,CAACgB,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;KACnE,CAAA;;AAED;AACR;AACA;AACA;IACQ,MAAMK,UAAU,GAAIlC,GAAe,IAAK;AACpC,MAAA,IAAI,CAACA,GAAG,CAACmC,aAAa,IAAI,CAACd,WAAW,CAACe,QAAQ,CAACpC,GAAG,CAACmC,aAAoB,CAAC,EAAE;AACvER,QAAAA,gBAAgB,EAAE,CAAA;AACtB,OAAA;KACH,CAAA;AAEDN,IAAAA,WAAW,CAACgB,gBAAgB,CAAC,UAAU,EAAEH,UAAU,CAAC,CAAA;AACpDb,IAAAA,WAAW,CAACgB,gBAAgB,CAAC,SAAS,EAAET,cAAc,CAAC,CAAA;AACvD,IAAA,OAAO,MAAM;AACTP,MAAAA,WAAW,CAACiB,mBAAmB,CAAC,UAAU,EAAEJ,UAAU,CAAC,CAAA;AACvDb,MAAAA,WAAW,CAACiB,mBAAmB,CAAC,SAAS,EAAEV,cAAc,CAAC,CAAA;KAC7D,CAAA;GACJ,EAAE,CAAClB,GAAG,EAAEM,eAAe,EAAEH,KAAK,EAAED,mBAAmB,CAAC,CAAC,CAAA;EAEtD,OAAOE,OAAO,CAAC,MAAM;IACjB,IAAIyB,gBAAgB,GAAG,KAAK,CAAA;IAC5B,MAAMC,gBAAgB,GAAG3B,KAAK,CAAC4B,GAAG,CAAC,CAACC,IAAI,EAAElB,KAAK,KAAK;AAChD;AACA,MAAA,IAAI,CAACrB,eAAe,CAACuC,IAAI,CAAC,EAAE;AACxB,QAAA,OAAOA,IAAI,CAAA;AACf,OAAA;AAEAH,MAAAA,gBAAgB,GAAG,IAAI,CAAA;AACvB,MAAA,MAAMI,aAAa,GAAGnB,KAAK,KAAKR,eAAe,CAAA;;AAE/C;MACA,oBAAO4B,YAAY,CAAgBF,IAAI,EAAE;QACrC,GAAGA,IAAI,CAAC9C,KAAK;AACb+C,QAAAA,aAAa,EAAED,IAAI,CAAC9C,KAAK,CAAC+C,aAAa,IAAIA,aAAa;QACxDE,OAAO,EAAEC,SAAS,CAACJ,IAAI,CAAC9C,KAAK,CAACiD,OAAO,EAAGE,OAAY,IAAK;AACrD,UAAA,IAAIJ,aAAa,EAAE;YACfI,OAAO,EAAEC,KAAK,EAAE,CAAA;AACpB,WAAA;AACJ,SAAC,CAAC;QACFC,cAAcA,CAACjD,GAAG,EAAE;AAChB0C,UAAAA,IAAI,CAAC9C,KAAK,CAACqD,cAAc,IAAI,CAAA;UAC7BtC,kBAAkB,GAAGa,KAAK,EAAEkB,IAAI,CAACjB,GAAG,EAAEzB,GAAG,CAAC,CAAA;SAC7C;AACD,QAAA,GAAGL,eAAe,CAAC+C,IAAI,CAAC9C,KAAK,EAAE,MAAM;UACjCqB,kBAAkB,CAACO,KAAK,CAAC,CAAA;SAC5B,CAAA;AACL,OAAC,CAAC,CAAA;AACN,KAAC,CAAC,CAAA;IACF,OAAO;AAAEX,MAAAA,KAAK,EAAE2B,gBAAgB;AAAED,MAAAA,gBAAAA;KAAkB,CAAA;GACvD,EAAE,CAAC1B,KAAK,EAAEG,eAAe,EAAEL,kBAAkB,CAAC,CAAC,CAAA;AACpD;;;;"}

package/_internal/{components/message-a3806f51.js → packages/lumx-react/src/components/message/Message-cfc1519a.js}

@@ -1,11 +1,15 @@
 import classNames from 'classnames';
-import { mdiAlert, mdiInformation, mdiCheckCircle, mdiAlertCircle, mdiClose } from '@lumx/icons';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../forwardRef-8bce732e.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Kind, ColorPalette, Size, Emphasis } from '@lumx/core/js/constants';
-import { Icon } from './icon-a00d698b.js';
-import { I as IconButton } from '../IconButton-1790b47e.js';
+import { mdiAlert } from '../../../../lumx-icons/dist/esm/alert-f419ecef.js';
+import { mdiInformation } from '../../../../lumx-icons/dist/esm/information-68f13c1c.js';
+import { mdiCheckCircle } from '../../../../lumx-icons/dist/esm/check-circle-e47dacb8.js';
+import { mdiAlertCircle } from '../../../../lumx-icons/dist/esm/alert-circle-893eb653.js';
+import { Icon } from '../icon/Icon-21a83e8c.js';
+import { IconButton } from '../button/IconButton-a740ce59.js';
+import { mdiClose } from '../../../../lumx-icons/dist/esm/close-ad7c38b0.js';
 
 /**
  * Component display name.
@@ -94,4 +98,4 @@ Message.displayName = COMPONENT_NAME;
 Message.className = CLASSNAME;
 
 export { Message };
-//# sourceMappingURL=message-a3806f51.js.map
+//# sourceMappingURL=Message-cfc1519a.js.map

package/_internal/packages/lumx-react/src/components/message/Message-cfc1519a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message-cfc1519a.js","sources":["../../../../../../../src/components/message/Message.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@lumx/icons';\nimport { ColorPalette, Emphasis, Icon, IconButton, Kind, Size } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface MessageProps extends GenericProps {\n    /** Content. */\n    children?: ReactNode;\n    /** Whether the message has a background or not. */\n    hasBackground?: boolean;\n    /** Message variant. */\n    kind?: Kind;\n    /** Message custom icon SVG path. */\n    icon?: string;\n    /**\n     * Displays a close button.\n     *\n     * NB: only available if `kind === 'info' && hasBackground === true`\n     */\n    closeButtonProps?: {\n        /** The callback called when the button is clicked */\n        onClick: () => void;\n        /** The label of the close button. */\n        label: string;\n    };\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Message';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Associative map from message kind to color and icon.\n */\nconst CONFIG = {\n    [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },\n    [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },\n    [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },\n    [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },\n};\n\n/**\n * Message component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Message = forwardRef<MessageProps, HTMLDivElement>((props, ref) => {\n    const { children, className, hasBackground, kind, icon: customIcon, closeButtonProps, ...forwardedProps } = props;\n    const { color, icon } = CONFIG[kind as Kind] || {};\n    const { onClick, label: closeButtonLabel } = closeButtonProps || {};\n    const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;\n\n    return (\n        <div\n            ref={ref}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    color,\n                    hasBackground,\n                    prefix: CLASSNAME,\n                }),\n            )}\n            {...forwardedProps}\n        >\n            {(customIcon || icon) && (\n                <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} color={color} />\n            )}\n            <div className={`${CLASSNAME}__text`}>{children}</div>\n            {isCloseButtonDisplayed && (\n                <IconButton\n                    className={`${CLASSNAME}__close-button`}\n                    icon={mdiClose}\n                    onClick={onClick}\n                    label={closeButtonLabel}\n                    emphasis={Emphasis.low}\n                />\n            )}\n        </div>\n    );\n});\n\nMessage.displayName = COMPONENT_NAME;\nMessage.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","CONFIG","Kind","error","color","ColorPalette","red","icon","mdiAlert","info","blue","mdiInformation","success","green","mdiCheckCircle","warning","yellow","mdiAlertCircle","Message","forwardRef","props","ref","children","className","hasBackground","kind","customIcon","closeButtonProps","forwardedProps","onClick","label","closeButtonLabel","isCloseButtonDisplayed","_jsxs","classNames","handleBasicClasses","prefix","_jsx","Icon","size","Size","xs","IconButton","mdiClose","emphasis","Emphasis","low","displayName"],"mappings":"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"}