@lumx/react 2.1.2 → 2.1.6-alpha.0

package/esm/_internal/Avatar2.js

@@ -44,7 +44,9 @@ var Avatar = forwardRef(function (props, ref) {
       size = props.size,
       theme = props.theme,
       thumbnailProps = props.thumbnailProps,
-      forwardedProps = _objectWithoutProperties(props, ["actions", "alt", "badge", "className", "image", "onClick", "onKeyPress", "size", "theme", "thumbnailProps"]);
+      linkProps = props.linkProps,
+      linkAs = props.linkAs,
+      forwardedProps = _objectWithoutProperties(props, ["actions", "alt", "badge", "className", "image", "onClick", "onKeyPress", "size", "theme", "thumbnailProps", "linkProps", "linkAs"]);
 
   return React.createElement("div", _extends({
     ref: ref
@@ -55,6 +57,8 @@ var Avatar = forwardRef(function (props, ref) {
       theme: theme
     }))
   }), React.createElement(Thumbnail, _extends({
+    linkProps: linkProps,
+    linkAs: linkAs,
     className: "".concat(CLASSNAME, "__thumbnail"),
     onClick: onClick,
     onKeyPress: onKeyPress

package/esm/_internal/Avatar2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar2.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps {\n    /** Action toolbar content. */\n    actions?: ReactNode;\n    /** Image alternative text. */\n    alt: string;\n    /** Badge. */\n    badge?: ReactElement;\n    /** Image URL. */\n    image: string;\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Size variant. */\n    size?: AvatarSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n    thumbnailProps?: Omit<\n        ThumbnailProps,\n        'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n    >;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\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<AvatarProps> = {\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * Avatar component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        actions,\n        alt,\n        badge,\n        className,\n        image,\n        onClick,\n        onKeyPress,\n        size,\n        theme,\n        thumbnailProps,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n        >\n            <Thumbnail\n                className={`${CLASSNAME}__thumbnail`}\n                onClick={onClick}\n                onKeyPress={onKeyPress}\n                {...thumbnailProps}\n                aspectRatio={AspectRatio.square}\n                size={size}\n                image={image}\n                alt={alt}\n            />\n            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n            {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n        </div>\n    );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","theme","Theme","light","Avatar","forwardRef","props","ref","actions","alt","badge","className","image","onClick","onKeyPress","thumbnailProps","forwardedProps","classNames","handleBasicClasses","prefix","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;AAQA;;;;AAgCA;;;AAGA,IAAMA,cAAc,GAAG,QAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAmC,GAAG;AACxCC,EAAAA,IAAI,EAAEC,IAAI,CAACC,CAD6B;AAExCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AAF2B,CAA5C;AAKA;;;;;;;;IAOaC,MAAyC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE5EC,OAF4E,GAa5EF,KAb4E,CAE5EE,OAF4E;AAAA,MAG5EC,GAH4E,GAa5EH,KAb4E,CAG5EG,GAH4E;AAAA,MAI5EC,KAJ4E,GAa5EJ,KAb4E,CAI5EI,KAJ4E;AAAA,MAK5EC,SAL4E,GAa5EL,KAb4E,CAK5EK,SAL4E;AAAA,MAM5EC,KAN4E,GAa5EN,KAb4E,CAM5EM,KAN4E;AAAA,MAO5EC,OAP4E,GAa5EP,KAb4E,CAO5EO,OAP4E;AAAA,MAQ5EC,UAR4E,GAa5ER,KAb4E,CAQ5EQ,UAR4E;AAAA,MAS5EhB,IAT4E,GAa5EQ,KAb4E,CAS5ER,IAT4E;AAAA,MAU5EG,KAV4E,GAa5EK,KAb4E,CAU5EL,KAV4E;AAAA,MAW5Ec,cAX4E,GAa5ET,KAb4E,CAW5ES,cAX4E;AAAA,MAYzEC,cAZyE,4BAa5EV,KAb4E;;AAehF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQS,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACN,SAAD,EAAYO,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAExB,SAAV;AAAqBG,MAAAA,IAAI,EAAJA,IAArB;AAA2BG,MAAAA,KAAK,EAALA;AAA3B,KAAD,CAA9B;AAHzB,MAKI,oBAAC,SAAD;AACI,IAAA,SAAS,YAAKN,SAAL,gBADb;AAEI,IAAA,OAAO,EAAEkB,OAFb;AAGI,IAAA,UAAU,EAAEC;AAHhB,KAIQC,cAJR;AAKI,IAAA,WAAW,EAAEK,WAAW,CAACC,MAL7B;AAMI,IAAA,IAAI,EAAEvB,IANV;AAOI,IAAA,KAAK,EAAEc,KAPX;AAQI,IAAA,GAAG,EAAEH;AART,KALJ,EAeKD,OAAO,IAAI;AAAK,IAAA,SAAS,YAAKb,SAAL;AAAd,KAA0Ca,OAA1C,CAfhB,EAgBKE,KAAK,IAAI;AAAK,IAAA,SAAS,YAAKf,SAAL;AAAd,KAAwCe,KAAxC,CAhBd,CADJ;AAoBH,CAnCkE;AAoCnEN,MAAM,CAACkB,WAAP,GAAqB5B,cAArB;AACAU,MAAM,CAACO,SAAP,GAAmBhB,SAAnB;AACAS,MAAM,CAACmB,YAAP,GAAsB1B,aAAtB;;;;"}
+{"version":3,"file":"Avatar2.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps {\n    /** Action toolbar content. */\n    actions?: ReactNode;\n    /** Image alternative text. */\n    alt: string;\n    /** Badge. */\n    badge?: ReactElement;\n    /** Image URL. */\n    image: string;\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Size variant. */\n    size?: AvatarSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n    thumbnailProps?: Omit<\n        ThumbnailProps,\n        'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n    >;\n    /** Props to pass to the link wrapping the thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\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<AvatarProps> = {\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * Avatar component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        actions,\n        alt,\n        badge,\n        className,\n        image,\n        onClick,\n        onKeyPress,\n        size,\n        theme,\n        thumbnailProps,\n        linkProps,\n        linkAs,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n        >\n            <Thumbnail\n                linkProps={linkProps}\n                linkAs={linkAs}\n                className={`${CLASSNAME}__thumbnail`}\n                onClick={onClick}\n                onKeyPress={onKeyPress}\n                {...thumbnailProps}\n                aspectRatio={AspectRatio.square}\n                size={size}\n                image={image}\n                alt={alt}\n            />\n            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n            {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n        </div>\n    );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","theme","Theme","light","Avatar","forwardRef","props","ref","actions","alt","badge","className","image","onClick","onKeyPress","thumbnailProps","linkProps","linkAs","forwardedProps","classNames","handleBasicClasses","prefix","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;AAQA;;;;AAoCA;;;AAGA,IAAMA,cAAc,GAAG,QAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAmC,GAAG;AACxCC,EAAAA,IAAI,EAAEC,IAAI,CAACC,CAD6B;AAExCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AAF2B,CAA5C;AAKA;;;;;;;;IAOaC,MAAyC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE5EC,OAF4E,GAe5EF,KAf4E,CAE5EE,OAF4E;AAAA,MAG5EC,GAH4E,GAe5EH,KAf4E,CAG5EG,GAH4E;AAAA,MAI5EC,KAJ4E,GAe5EJ,KAf4E,CAI5EI,KAJ4E;AAAA,MAK5EC,SAL4E,GAe5EL,KAf4E,CAK5EK,SAL4E;AAAA,MAM5EC,KAN4E,GAe5EN,KAf4E,CAM5EM,KAN4E;AAAA,MAO5EC,OAP4E,GAe5EP,KAf4E,CAO5EO,OAP4E;AAAA,MAQ5EC,UAR4E,GAe5ER,KAf4E,CAQ5EQ,UAR4E;AAAA,MAS5EhB,IAT4E,GAe5EQ,KAf4E,CAS5ER,IAT4E;AAAA,MAU5EG,KAV4E,GAe5EK,KAf4E,CAU5EL,KAV4E;AAAA,MAW5Ec,cAX4E,GAe5ET,KAf4E,CAW5ES,cAX4E;AAAA,MAY5EC,SAZ4E,GAe5EV,KAf4E,CAY5EU,SAZ4E;AAAA,MAa5EC,MAb4E,GAe5EX,KAf4E,CAa5EW,MAb4E;AAAA,MAczEC,cAdyE,4BAe5EZ,KAf4E;;AAiBhF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQW,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACR,SAAD,EAAYS,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE1B,SAAV;AAAqBG,MAAAA,IAAI,EAAJA,IAArB;AAA2BG,MAAAA,KAAK,EAALA;AAA3B,KAAD,CAA9B;AAHzB,MAKI,oBAAC,SAAD;AACI,IAAA,SAAS,EAAEe,SADf;AAEI,IAAA,MAAM,EAAEC,MAFZ;AAGI,IAAA,SAAS,YAAKtB,SAAL,gBAHb;AAII,IAAA,OAAO,EAAEkB,OAJb;AAKI,IAAA,UAAU,EAAEC;AALhB,KAMQC,cANR;AAOI,IAAA,WAAW,EAAEO,WAAW,CAACC,MAP7B;AAQI,IAAA,IAAI,EAAEzB,IARV;AASI,IAAA,KAAK,EAAEc,KATX;AAUI,IAAA,GAAG,EAAEH;AAVT,KALJ,EAiBKD,OAAO,IAAI;AAAK,IAAA,SAAS,YAAKb,SAAL;AAAd,KAA0Ca,OAA1C,CAjBhB,EAkBKE,KAAK,IAAI;AAAK,IAAA,SAAS,YAAKf,SAAL;AAAd,KAAwCe,KAAxC,CAlBd,CADJ;AAsBH,CAvCkE;AAwCnEN,MAAM,CAACoB,WAAP,GAAqB9B,cAArB;AACAU,MAAM,CAACO,SAAP,GAAmBhB,SAAnB;AACAS,MAAM,CAACqB,YAAP,GAAsB5B,aAAtB;;;;"}

package/esm/_internal/ClickAwayProvider.js

@@ -1,6 +1,6 @@
 import { e as _toConsumableArray } from './_rollupPluginBabelHelpers.js';
 import React, { useEffect, createContext, useContext } from 'react';
-import { e as onEscapePressed } from './getRootClassName.js';
+import { f as onEscapePressed } from './getRootClassName.js';
 import isEmpty from 'lodash/isEmpty';
 import { D as DOCUMENT } from './constants.js';
 import pull from 'lodash/pull';

package/esm/_internal/Dialog2.js

@@ -151,17 +151,22 @@ var Dialog = forwardRef(function (props, ref) {
       zIndex = props.zIndex,
       dialogProps = props.dialogProps,
       onVisibilityChange = props.onVisibilityChange,
-      forwardedProps = _objectWithoutProperties(props, ["children", "className", "header", "focusElement", "forceFooterDivider", "forceHeaderDivider", "footer", "isLoading", "isOpen", "onClose", "parentElement", "contentRef", "preventAutoClose", "size", "zIndex", "dialogProps", "onVisibilityChange"]);
+      forwardedProps = _objectWithoutProperties(props, ["children", "className", "header", "focusElement", "forceFooterDivider", "forceHeaderDivider", "footer", "isLoading", "isOpen", "onClose", "parentElement", "contentRef", "preventAutoClose", "size", "zIndex", "dialogProps", "onVisibilityChange"]); // eslint-disable-next-line react-hooks/rules-of-hooks
 
-  var handleClose = onClose ? function () {
-    onClose(); // Focus the parent element on close.
 
-    if (parentElement && parentElement.current) {
-      parentElement.current.focus();
+  var previousOpen = React.useRef(isOpen); // eslint-disable-next-line react-hooks/rules-of-hooks
+
+  React.useEffect(function () {
+    if (isOpen !== previousOpen.current) {
+      previousOpen.current = isOpen; // Focus the parent element on close.
+
+      if (!isOpen && parentElement && parentElement.current) {
+        parentElement.current.focus();
+      }
     }
-  } : undefined; // eslint-disable-next-line react-hooks/rules-of-hooks
+  }, [isOpen, parentElement]); // eslint-disable-next-line react-hooks/rules-of-hooks
 
-  useCallbackOnEscape(handleClose, isOpen && !preventAutoClose); // eslint-disable-next-line react-hooks/rules-of-hooks
+  useCallbackOnEscape(onClose, isOpen && !preventAutoClose); // eslint-disable-next-line react-hooks/rules-of-hooks
 
   var wrapperRef = useRef(null);
   /**
@@ -234,7 +239,7 @@ var Dialog = forwardRef(function (props, ref) {
     role: "dialog",
     "aria-modal": "true"
   }, dialogProps), React.createElement(ClickAwayProvider, {
-    callback: !preventAutoClose && handleClose,
+    callback: !preventAutoClose && onClose,
     refs: clickAwayRefs
   }, React.createElement("div", {
     className: "".concat(CLASSNAME, "__wrapper"),

package/esm/_internal/Dialog2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog2.js","sources":["../../../src/hooks/useIntersectionObserver.tsx","../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type Intersections<T> = Map<T, IntersectionObserverEntry>;\n\n/**\n * Convenient hook to create interaction observers.\n *\n * @param elements Elements to observe.\n * @param options  IntersectionObserver options.\n * @return Map of intersections.\n */\nexport function useIntersectionObserver<T extends Element>(\n    elements: Array<T | null | undefined>,\n    options?: IntersectionObserverInit,\n): Intersections<T> {\n    const [intersections, setIntersections] = useState<Intersections<T>>(() => new Map());\n\n    useEffect(\n        () => {\n            if (elements.length < 1 || !elements.some(Boolean)) {\n                return undefined;\n            }\n\n            const observer = new IntersectionObserver((entries) => {\n                for (const entry of entries) {\n                    intersections.set(entry.target as T, entry);\n                }\n                setIntersections(new Map(intersections));\n            }, options);\n\n            for (const element of elements) {\n                if (element) {\n                    observer.observe(element);\n                }\n            }\n            return () => observer.disconnect();\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [...elements],\n    );\n\n    return intersections;\n}\n","import React, { Children, forwardRef, ReactElement, ReactNode, RefObject, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport classNames from 'classnames';\n\nimport { Progress, ProgressVariant, Size } from '@lumx/react';\n\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';\nimport {\n    Comp,\n    GenericProps,\n    getRootClassName,\n    handleBasicClasses,\n    isComponent,\n    partitionMulti,\n} from '@lumx/react/utils';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\n\n/**\n * Defines the props of the component.\n */\nexport interface DialogProps extends GenericProps {\n    /** Footer content. */\n    footer?: ReactNode;\n    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n    forceFooterDivider?: boolean;\n    /** Header content. */\n    header?: ReactNode;\n    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n    forceHeaderDivider?: boolean;\n    /** Whether the indefinite progress indicator over the dialog content is displayed or not. */\n    isLoading?: boolean;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Reference to the parent element that triggered modal opening (will get back focus on close). */\n    parentElement?: RefObject<HTMLElement>;\n    /** Reference to the dialog content element. */\n    contentRef?: RefObject<HTMLDivElement>;\n    /** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */\n    focusElement?: RefObject<HTMLElement>;\n    /** Whether to keep the dialog open on clickaway or escape press. */\n    preventAutoClose?: boolean;\n    /** Size variant. */\n    size?: DialogSizes;\n    /** Z-axis position. */\n    zIndex?: number;\n    /** Z-axis position. */\n    dialogProps?: GenericProps;\n    /** On close callback. */\n    onClose?(): void;\n    /** Callback called when the open animation starts and the close animation finishes. */\n    onVisibilityChange?(isVisible: boolean): void;\n}\n\nexport type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;\n\nconst isHeader = isComponent('header');\nconst isFooter = isComponent('footer');\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Dialog';\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<DialogProps> = {\n    size: Size.big,\n};\n\n/**\n * Dialog component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref) => {\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n\n    const {\n        children,\n        className,\n        header,\n        focusElement,\n        forceFooterDivider,\n        forceHeaderDivider,\n        footer,\n        isLoading,\n        isOpen,\n        onClose,\n        parentElement,\n        contentRef,\n        preventAutoClose,\n        size,\n        zIndex,\n        dialogProps,\n        onVisibilityChange,\n        ...forwardedProps\n    } = props;\n\n    const handleClose = onClose\n        ? () => {\n              onClose();\n              // Focus the parent element on close.\n              if (parentElement && parentElement.current) {\n                  parentElement.current.focus();\n              }\n          }\n        : undefined;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useCallbackOnEscape(handleClose, isOpen && !preventAutoClose);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    /**\n     * Since the `contentRef` comes from the parent and is optional,\n     * we need to create a stable contentRef that will always be available.\n     */\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const localContentRef = useRef<HTMLDivElement>(null);\n    // Handle focus trap.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useFocusTrap(wrapperRef.current, focusElement?.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useDisableBodyScroll(isOpen && localContentRef.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [sentinelTop, setSentinelTop] = useState<Element | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [sentinelBottom, setSentinelBottom] = useState<Element | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], {\n        threshold: [0, 1],\n    });\n\n    const hasTopIntersection = sentinelTop && !(intersections.get(sentinelTop)?.isIntersecting ?? true);\n    const hasBottomIntersection = sentinelBottom && !(intersections.get(sentinelBottom)?.isIntersecting ?? true);\n\n    // Separate header, footer and dialog content from children.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [[headerChild], [footerChild], content] = useMemo(\n        () => partitionMulti(Children.toArray(children), [isHeader, isFooter]),\n        [children],\n    );\n    const headerChildProps = (headerChild as ReactElement)?.props;\n    const headerChildContent = headerChildProps?.children;\n    const footerChildProps = (footerChild as ReactElement)?.props;\n    const footerChildContent = footerChildProps?.children;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const isVisible = useDelayedVisibility(Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const clickAwayRefs = useRef([wrapperRef]);\n\n    return isOpen || isVisible\n        ? createPortal(\n              <div\n                  ref={ref}\n                  {...forwardedProps}\n                  className={classNames(\n                      className,\n                      handleBasicClasses({\n                          isHidden: !isOpen,\n                          isLoading,\n                          isShown: isOpen || isVisible,\n                          prefix: CLASSNAME,\n                          size,\n                      }),\n                  )}\n                  style={{ zIndex }}\n              >\n                  <div className={`${CLASSNAME}__overlay`} />\n\n                  <section className={`${CLASSNAME}__container`} role=\"dialog\" aria-modal=\"true\" {...dialogProps}>\n                      <ClickAwayProvider callback={!preventAutoClose && handleClose} refs={clickAwayRefs}>\n                          <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>\n                              {(header || headerChildContent) && (\n                                  <header\n                                      {...headerChildProps}\n                                      className={classNames(\n                                          `${CLASSNAME}__header`,\n                                          (forceHeaderDivider || hasTopIntersection) &&\n                                              `${CLASSNAME}__header--has-divider`,\n                                          headerChildProps?.className,\n                                      )}\n                                  >\n                                      {header}\n                                      {headerChildContent}\n                                  </header>\n                              )}\n\n                              <div ref={mergeRefs(contentRef, localContentRef)} className={`${CLASSNAME}__content`}>\n                                  <div\n                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}\n                                      ref={setSentinelTop}\n                                  />\n\n                                  {content}\n\n                                  <div\n                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}\n                                      ref={setSentinelBottom}\n                                  />\n                              </div>\n\n                              {(footer || footerChildContent) && (\n                                  <footer\n                                      {...footerChildProps}\n                                      className={classNames(\n                                          `${CLASSNAME}__footer`,\n                                          (forceFooterDivider || hasBottomIntersection) &&\n                                              `${CLASSNAME}__footer--has-divider`,\n                                          footerChildProps?.className,\n                                      )}\n                                  >\n                                      {footer}\n                                      {footerChildContent}\n                                  </footer>\n                              )}\n\n                              {isLoading && (\n                                  <div className={`${CLASSNAME}__progress-overlay`}>\n                                      <Progress variant={ProgressVariant.circular} />\n                                  </div>\n                              )}\n                          </div>\n                      </ClickAwayProvider>\n                  </section>\n              </div>,\n              document.body,\n          )\n        : null;\n});\nDialog.displayName = COMPONENT_NAME;\nDialog.className = CLASSNAME;\nDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["useIntersectionObserver","elements","options","useState","Map","intersections","setIntersections","useEffect","length","some","Boolean","undefined","observer","IntersectionObserver","entries","entry","set","target","element","observe","disconnect","isHeader","isComponent","isFooter","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","big","Dialog","forwardRef","props","ref","DOCUMENT","children","className","header","focusElement","forceFooterDivider","forceHeaderDivider","footer","isLoading","isOpen","onClose","parentElement","contentRef","preventAutoClose","zIndex","dialogProps","onVisibilityChange","forwardedProps","handleClose","current","focus","useCallbackOnEscape","wrapperRef","useRef","localContentRef","useFocusTrap","useDisableBodyScroll","sentinelTop","setSentinelTop","sentinelBottom","setSentinelBottom","threshold","hasTopIntersection","get","isIntersecting","hasBottomIntersection","useMemo","partitionMulti","Children","toArray","headerChild","footerChild","content","headerChildProps","headerChildContent","footerChildProps","footerChildContent","isVisible","useDelayedVisibility","DIALOG_TRANSITION_DURATION","clickAwayRefs","createPortal","classNames","handleBasicClasses","isHidden","isShown","prefix","mergeRefs","ProgressVariant","circular","document","body","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Dialog2.js","sources":["../../../src/hooks/useIntersectionObserver.tsx","../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport type Intersections<T> = Map<T, IntersectionObserverEntry>;\n\n/**\n * Convenient hook to create interaction observers.\n *\n * @param elements Elements to observe.\n * @param options  IntersectionObserver options.\n * @return Map of intersections.\n */\nexport function useIntersectionObserver<T extends Element>(\n    elements: Array<T | null | undefined>,\n    options?: IntersectionObserverInit,\n): Intersections<T> {\n    const [intersections, setIntersections] = useState<Intersections<T>>(() => new Map());\n\n    useEffect(\n        () => {\n            if (elements.length < 1 || !elements.some(Boolean)) {\n                return undefined;\n            }\n\n            const observer = new IntersectionObserver((entries) => {\n                for (const entry of entries) {\n                    intersections.set(entry.target as T, entry);\n                }\n                setIntersections(new Map(intersections));\n            }, options);\n\n            for (const element of elements) {\n                if (element) {\n                    observer.observe(element);\n                }\n            }\n            return () => observer.disconnect();\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [...elements],\n    );\n\n    return intersections;\n}\n","import React, { Children, forwardRef, ReactElement, ReactNode, RefObject, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport classNames from 'classnames';\n\nimport { Progress, ProgressVariant, Size } from '@lumx/react';\n\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';\nimport {\n    Comp,\n    GenericProps,\n    getRootClassName,\n    handleBasicClasses,\n    isComponent,\n    partitionMulti,\n} from '@lumx/react/utils';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\nimport { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\n\n/**\n * Defines the props of the component.\n */\nexport interface DialogProps extends GenericProps {\n    /** Footer content. */\n    footer?: ReactNode;\n    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n    forceFooterDivider?: boolean;\n    /** Header content. */\n    header?: ReactNode;\n    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n    forceHeaderDivider?: boolean;\n    /** Whether the indefinite progress indicator over the dialog content is displayed or not. */\n    isLoading?: boolean;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Reference to the parent element that triggered modal opening (will get back focus on close). */\n    parentElement?: RefObject<HTMLElement>;\n    /** Reference to the dialog content element. */\n    contentRef?: RefObject<HTMLDivElement>;\n    /** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */\n    focusElement?: RefObject<HTMLElement>;\n    /** Whether to keep the dialog open on clickaway or escape press. */\n    preventAutoClose?: boolean;\n    /** Size variant. */\n    size?: DialogSizes;\n    /** Z-axis position. */\n    zIndex?: number;\n    /** Z-axis position. */\n    dialogProps?: GenericProps;\n    /** On close callback. */\n    onClose?(): void;\n    /** Callback called when the open animation starts and the close animation finishes. */\n    onVisibilityChange?(isVisible: boolean): void;\n}\n\nexport type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;\n\nconst isHeader = isComponent('header');\nconst isFooter = isComponent('footer');\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Dialog';\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<DialogProps> = {\n    size: Size.big,\n};\n\n/**\n * Dialog component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref) => {\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n\n    const {\n        children,\n        className,\n        header,\n        focusElement,\n        forceFooterDivider,\n        forceHeaderDivider,\n        footer,\n        isLoading,\n        isOpen,\n        onClose,\n        parentElement,\n        contentRef,\n        preventAutoClose,\n        size,\n        zIndex,\n        dialogProps,\n        onVisibilityChange,\n        ...forwardedProps\n    } = props;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const previousOpen = React.useRef(isOpen);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.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    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useCallbackOnEscape(onClose, isOpen && !preventAutoClose);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    /**\n     * Since the `contentRef` comes from the parent and is optional,\n     * we need to create a stable contentRef that will always be available.\n     */\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const localContentRef = useRef<HTMLDivElement>(null);\n    // Handle focus trap.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useFocusTrap(wrapperRef.current, focusElement?.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useDisableBodyScroll(isOpen && localContentRef.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [sentinelTop, setSentinelTop] = useState<Element | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [sentinelBottom, setSentinelBottom] = useState<Element | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], {\n        threshold: [0, 1],\n    });\n\n    const hasTopIntersection = sentinelTop && !(intersections.get(sentinelTop)?.isIntersecting ?? true);\n    const hasBottomIntersection = sentinelBottom && !(intersections.get(sentinelBottom)?.isIntersecting ?? true);\n\n    // Separate header, footer and dialog content from children.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [[headerChild], [footerChild], content] = useMemo(\n        () => partitionMulti(Children.toArray(children), [isHeader, isFooter]),\n        [children],\n    );\n    const headerChildProps = (headerChild as ReactElement)?.props;\n    const headerChildContent = headerChildProps?.children;\n    const footerChildProps = (footerChild as ReactElement)?.props;\n    const footerChildContent = footerChildProps?.children;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const isVisible = useDelayedVisibility(Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const clickAwayRefs = useRef([wrapperRef]);\n\n    return isOpen || isVisible\n        ? createPortal(\n              <div\n                  ref={ref}\n                  {...forwardedProps}\n                  className={classNames(\n                      className,\n                      handleBasicClasses({\n                          isHidden: !isOpen,\n                          isLoading,\n                          isShown: isOpen || isVisible,\n                          prefix: CLASSNAME,\n                          size,\n                      }),\n                  )}\n                  style={{ zIndex }}\n              >\n                  <div className={`${CLASSNAME}__overlay`} />\n\n                  <section className={`${CLASSNAME}__container`} role=\"dialog\" aria-modal=\"true\" {...dialogProps}>\n                      <ClickAwayProvider callback={!preventAutoClose && onClose} refs={clickAwayRefs}>\n                          <div className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>\n                              {(header || headerChildContent) && (\n                                  <header\n                                      {...headerChildProps}\n                                      className={classNames(\n                                          `${CLASSNAME}__header`,\n                                          (forceHeaderDivider || hasTopIntersection) &&\n                                              `${CLASSNAME}__header--has-divider`,\n                                          headerChildProps?.className,\n                                      )}\n                                  >\n                                      {header}\n                                      {headerChildContent}\n                                  </header>\n                              )}\n\n                              <div ref={mergeRefs(contentRef, localContentRef)} className={`${CLASSNAME}__content`}>\n                                  <div\n                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}\n                                      ref={setSentinelTop}\n                                  />\n\n                                  {content}\n\n                                  <div\n                                      className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}\n                                      ref={setSentinelBottom}\n                                  />\n                              </div>\n\n                              {(footer || footerChildContent) && (\n                                  <footer\n                                      {...footerChildProps}\n                                      className={classNames(\n                                          `${CLASSNAME}__footer`,\n                                          (forceFooterDivider || hasBottomIntersection) &&\n                                              `${CLASSNAME}__footer--has-divider`,\n                                          footerChildProps?.className,\n                                      )}\n                                  >\n                                      {footer}\n                                      {footerChildContent}\n                                  </footer>\n                              )}\n\n                              {isLoading && (\n                                  <div className={`${CLASSNAME}__progress-overlay`}>\n                                      <Progress variant={ProgressVariant.circular} />\n                                  </div>\n                              )}\n                          </div>\n                      </ClickAwayProvider>\n                  </section>\n              </div>,\n              document.body,\n          )\n        : null;\n});\nDialog.displayName = COMPONENT_NAME;\nDialog.className = CLASSNAME;\nDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["useIntersectionObserver","elements","options","useState","Map","intersections","setIntersections","useEffect","length","some","Boolean","undefined","observer","IntersectionObserver","entries","entry","set","target","element","observe","disconnect","isHeader","isComponent","isFooter","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","big","Dialog","forwardRef","props","ref","DOCUMENT","children","className","header","focusElement","forceFooterDivider","forceHeaderDivider","footer","isLoading","isOpen","onClose","parentElement","contentRef","preventAutoClose","zIndex","dialogProps","onVisibilityChange","forwardedProps","previousOpen","React","useRef","current","focus","useCallbackOnEscape","wrapperRef","localContentRef","useFocusTrap","useDisableBodyScroll","sentinelTop","setSentinelTop","sentinelBottom","setSentinelBottom","threshold","hasTopIntersection","get","isIntersecting","hasBottomIntersection","useMemo","partitionMulti","Children","toArray","headerChild","footerChild","content","headerChildProps","headerChildContent","footerChildProps","footerChildContent","isVisible","useDelayedVisibility","DIALOG_TRANSITION_DURATION","clickAwayRefs","createPortal","classNames","handleBasicClasses","isHidden","isShown","prefix","mergeRefs","ProgressVariant","circular","document","body","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/DragHandle.js

@@ -40,7 +40,7 @@ var DragHandle = forwardRef(function (props, ref) {
     }))
   }), React.createElement(Icon, {
     icon: mdiDragVertical,
-    color: theme === Theme.dark ? ColorPalette.light : undefined,
+    color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
     size: Size.xs
   }));
 });

package/esm/_internal/DragHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragHandle.js","sources":["../../../src/components/drag-handle/DragHandle.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiDragVertical } from '@lumx/icons';\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DragHandleProps extends GenericProps {\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DragHandle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * DragHandle component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { className, theme, ...forwardedProps } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n        >\n            <Icon icon={mdiDragVertical} color={theme === Theme.dark ? ColorPalette.light : undefined} size={Size.xs} />\n        </div>\n    );\n});\nDragHandle.displayName = COMPONENT_NAME;\nDragHandle.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DragHandle","forwardRef","props","ref","className","theme","forwardedProps","classNames","handleBasicClasses","prefix","mdiDragVertical","Theme","dark","ColorPalette","light","undefined","Size","xs","displayName"],"mappings":";;;;;;;AAQA;;;;AAQA;;;AAGA,IAAMA,cAAc,GAAG,YAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,UAAiD,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAChFC,SADgF,GACxCF,KADwC,CAChFE,SADgF;AAAA,MACrEC,KADqE,GACxCH,KADwC,CACrEG,KADqE;AAAA,MAC3DC,cAD2D,4BACxCJ,KADwC;;AAGxF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQG,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACH,SAAD,EAAYI,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEX,SAAV;AAAqBO,MAAAA,KAAK,EAALA;AAArB,KAAD,CAA9B;AAHzB,MAKI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEK,eAAZ;AAA6B,IAAA,KAAK,EAAEL,KAAK,KAAKM,KAAK,CAACC,IAAhB,GAAuBC,YAAY,CAACC,KAApC,GAA4CC,SAAhF;AAA2F,IAAA,IAAI,EAAEC,IAAI,CAACC;AAAtG,IALJ,CADJ;AASH,CAZ0E;AAa3EjB,UAAU,CAACkB,WAAX,GAAyBrB,cAAzB;AACAG,UAAU,CAACI,SAAX,GAAuBN,SAAvB;;;;"}
+{"version":3,"file":"DragHandle.js","sources":["../../../src/components/drag-handle/DragHandle.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiDragVertical } from '@lumx/icons';\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DragHandleProps extends GenericProps {\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DragHandle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * DragHandle component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { className, theme, ...forwardedProps } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n        >\n            <Icon\n                icon={mdiDragVertical}\n                color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}\n                size={Size.xs}\n            />\n        </div>\n    );\n});\nDragHandle.displayName = COMPONENT_NAME;\nDragHandle.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DragHandle","forwardRef","props","ref","className","theme","forwardedProps","classNames","handleBasicClasses","prefix","mdiDragVertical","Theme","dark","ColorPalette","light","Size","xs","displayName"],"mappings":";;;;;;;AAQA;;;;AAQA;;;AAGA,IAAMA,cAAc,GAAG,YAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,UAAiD,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAChFC,SADgF,GACxCF,KADwC,CAChFE,SADgF;AAAA,MACrEC,KADqE,GACxCH,KADwC,CACrEG,KADqE;AAAA,MAC3DC,cAD2D,4BACxCJ,KADwC;;AAGxF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQG,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACH,SAAD,EAAYI,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEX,SAAV;AAAqBO,MAAAA,KAAK,EAALA;AAArB,KAAD,CAA9B;AAHzB,MAKI,oBAAC,IAAD;AACI,IAAA,IAAI,EAAEK,eADV;AAEI,IAAA,KAAK,EAAEL,KAAK,KAAKM,KAAK,CAACC,IAAhB,GAAuBC,YAAY,CAACC,KAApC,GAA4CD,YAAY,CAACD,IAFpE;AAGI,IAAA,IAAI,EAAEG,IAAI,CAACC;AAHf,IALJ,CADJ;AAaH,CAhB0E;AAiB3EhB,UAAU,CAACiB,WAAX,GAAyBpB,cAAzB;AACAG,UAAU,CAACI,SAAX,GAAuBN,SAAvB;;;;"}

package/esm/_internal/Flag2.js

@@ -1,5 +1,5 @@
 import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
-import { ColorVariant, Size, Theme, ColorPalette } from './components.js';
+import { Size, Theme, ColorPalette } from './components.js';
 import React, { forwardRef } from 'react';
 import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
 import { I as Icon } from './Icon2.js';
@@ -34,8 +34,6 @@ var Flag = forwardRef(function (props, ref) {
     ref: ref
   }), icon && React.createElement(Icon, {
     icon: icon,
-    color: color,
-    colorVariant: ColorVariant.D2,
     size: Size.xxs,
     className: "".concat(CLASSNAME, "__icon")
   }), React.createElement("span", {

package/esm/_internal/Flag2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flag2.js","sources":["../../../src/components/flag/Flag.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport { ColorPalette, ColorVariant, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nexport interface FlagProps extends GenericProps {\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Color of the component. */\n    color?: ColorPalette;\n    /** Icon to use before the label. */\n    icon?: string;\n    /** Text label of the flag. */\n    label: string;\n}\n\nconst COMPONENT_NAME = 'Flag';\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\nconst DEFAULT_PROPS: Partial<FlagProps> = {\n    theme: Theme.light,\n};\n\n/**\n * Flag component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { label, icon, color, className, theme, ...forwardedProps } = props;\n    const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);\n\n    return (\n        <div\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}\n            ref={ref}\n        >\n            {icon && (\n                <Icon\n                    icon={icon}\n                    color={color}\n                    colorVariant={ColorVariant.D2}\n                    size={Size.xxs}\n                    className={`${CLASSNAME}__icon`}\n                />\n            )}\n            <span className={`${CLASSNAME}__label`}>{label}</span>\n        </div>\n    );\n});\nFlag.displayName = COMPONENT_NAME;\nFlag.className = CLASSNAME;\nFlag.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Flag","forwardRef","props","ref","label","icon","color","className","forwardedProps","flagColor","ColorPalette","dark","classNames","handleBasicClasses","prefix","ColorVariant","D2","Size","xxs","displayName","defaultProps"],"mappings":";;;;;;AAiBA,IAAMA,cAAc,GAAG,MAAvB;AACA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AACA,IAAMG,aAAiC,GAAG;AACtCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AADyB,CAA1C;AAIA;;;;;;;;IAOaC,IAAqC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACpEC,KADoE,GACRF,KADQ,CACpEE,KADoE;AAAA,MAC7DC,IAD6D,GACRH,KADQ,CAC7DG,IAD6D;AAAA,MACvDC,KADuD,GACRJ,KADQ,CACvDI,KADuD;AAAA,MAChDC,SADgD,GACRL,KADQ,CAChDK,SADgD;AAAA,MACrCV,KADqC,GACRK,KADQ,CACrCL,KADqC;AAAA,MAC3BW,cAD2B,4BACRN,KADQ;;AAE5E,MAAMO,SAAS,GAAGH,KAAK,KAAKT,KAAK,KAAKC,KAAK,CAACC,KAAhB,GAAwBW,YAAY,CAACC,IAArC,GAA4CD,YAAY,CAACX,KAA9D,CAAvB;AAEA,SACI,wCACQS,cADR;AAEI,IAAA,SAAS,EAAEI,UAAU,CAACL,SAAD,EAAYM,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEpB,SAAV;AAAqBY,MAAAA,KAAK,EAAEG;AAA5B,KAAD,CAA9B,CAFzB;AAGI,IAAA,GAAG,EAAEN;AAHT,MAKKE,IAAI,IACD,oBAAC,IAAD;AACI,IAAA,IAAI,EAAEA,IADV;AAEI,IAAA,KAAK,EAAEC,KAFX;AAGI,IAAA,YAAY,EAAES,YAAY,CAACC,EAH/B;AAII,IAAA,IAAI,EAAEC,IAAI,CAACC,GAJf;AAKI,IAAA,SAAS,YAAKxB,SAAL;AALb,IANR,EAcI;AAAM,IAAA,SAAS,YAAKA,SAAL;AAAf,KAAyCU,KAAzC,CAdJ,CADJ;AAkBH,CAtB8D;AAuB/DJ,IAAI,CAACmB,WAAL,GAAmB1B,cAAnB;AACAO,IAAI,CAACO,SAAL,GAAiBb,SAAjB;AACAM,IAAI,CAACoB,YAAL,GAAoBxB,aAApB;;;;"}
+{"version":3,"file":"Flag2.js","sources":["../../../src/components/flag/Flag.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nexport interface FlagProps extends GenericProps {\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Color of the component. */\n    color?: ColorPalette;\n    /** Icon to use before the label. */\n    icon?: string;\n    /** Text label of the flag. */\n    label: string;\n}\n\nconst COMPONENT_NAME = 'Flag';\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\nconst DEFAULT_PROPS: Partial<FlagProps> = {\n    theme: Theme.light,\n};\n\n/**\n * Flag component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { label, icon, color, className, theme, ...forwardedProps } = props;\n    const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);\n\n    return (\n        <div\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}\n            ref={ref}\n        >\n            {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}\n            <span className={`${CLASSNAME}__label`}>{label}</span>\n        </div>\n    );\n});\nFlag.displayName = COMPONENT_NAME;\nFlag.className = CLASSNAME;\nFlag.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Flag","forwardRef","props","ref","label","icon","color","className","forwardedProps","flagColor","ColorPalette","dark","classNames","handleBasicClasses","prefix","Size","xxs","displayName","defaultProps"],"mappings":";;;;;;AAiBA,IAAMA,cAAc,GAAG,MAAvB;AACA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AACA,IAAMG,aAAiC,GAAG;AACtCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AADyB,CAA1C;AAIA;;;;;;;;IAOaC,IAAqC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACpEC,KADoE,GACRF,KADQ,CACpEE,KADoE;AAAA,MAC7DC,IAD6D,GACRH,KADQ,CAC7DG,IAD6D;AAAA,MACvDC,KADuD,GACRJ,KADQ,CACvDI,KADuD;AAAA,MAChDC,SADgD,GACRL,KADQ,CAChDK,SADgD;AAAA,MACrCV,KADqC,GACRK,KADQ,CACrCL,KADqC;AAAA,MAC3BW,cAD2B,4BACRN,KADQ;;AAE5E,MAAMO,SAAS,GAAGH,KAAK,KAAKT,KAAK,KAAKC,KAAK,CAACC,KAAhB,GAAwBW,YAAY,CAACC,IAArC,GAA4CD,YAAY,CAACX,KAA9D,CAAvB;AAEA,SACI,wCACQS,cADR;AAEI,IAAA,SAAS,EAAEI,UAAU,CAACL,SAAD,EAAYM,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEpB,SAAV;AAAqBY,MAAAA,KAAK,EAAEG;AAA5B,KAAD,CAA9B,CAFzB;AAGI,IAAA,GAAG,EAAEN;AAHT,MAKKE,IAAI,IAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEA,IAAZ;AAAkB,IAAA,IAAI,EAAEU,IAAI,CAACC,GAA7B;AAAkC,IAAA,SAAS,YAAKtB,SAAL;AAA3C,IALb,EAMI;AAAM,IAAA,SAAS,YAAKA,SAAL;AAAf,KAAyCU,KAAzC,CANJ,CADJ;AAUH,CAd8D;AAe/DJ,IAAI,CAACiB,WAAL,GAAmBxB,cAAnB;AACAO,IAAI,CAACO,SAAL,GAAiBb,SAAjB;AACAM,IAAI,CAACkB,YAAL,GAAoBtB,aAApB;;;;"}

package/esm/_internal/List2.js

@@ -1,7 +1,7 @@
 import { d as _slicedToArray, b as _objectWithoutProperties, c as _extends, _ as _objectSpread2, e as _toConsumableArray } from './_rollupPluginBabelHelpers.js';
 import { Size } from './components.js';
 import React, { useState, useEffect, forwardRef, useMemo, Children, isValidElement, cloneElement, useRef } from 'react';
-import { g as getRootClassName, o as onEnterPressed, c as classnames, h as handleBasicClasses, b as createCommonjsModule } from './getRootClassName.js';
+import { g as getRootClassName, o as onEnterPressed, b as onButtonPressed, c as classnames, h as handleBasicClasses, d as createCommonjsModule } from './getRootClassName.js';
 import 'lodash/isBoolean';
 import isEmpty from 'lodash/isEmpty';
 import 'lodash/kebabCase';
@@ -238,17 +238,21 @@ var ListItem = forwardRef(function (props, ref) {
       className = props.className,
       isHighlighted = props.isHighlighted,
       isSelected = props.isSelected,
+      isDisabled = props.isDisabled,
       linkAs = props.linkAs,
       _props$linkProps = props.linkProps,
       linkProps = _props$linkProps === void 0 ? {} : _props$linkProps,
       linkRef = props.linkRef,
       onItemSelected = props.onItemSelected,
       size = props.size,
-      forwardedProps = _objectWithoutProperties(props, ["after", "before", "children", "className", "isHighlighted", "isSelected", "linkAs", "linkProps", "linkRef", "onItemSelected", "size"]);
+      forwardedProps = _objectWithoutProperties(props, ["after", "before", "children", "className", "isHighlighted", "isSelected", "isDisabled", "linkAs", "linkProps", "linkRef", "onItemSelected", "size"]);
 
+  var role = linkAs || linkProps.href ? 'link' : 'button';
   var onKeyDown = useMemo(function () {
-    return onItemSelected ? onEnterPressed(onItemSelected) : undefined;
-  }, [onItemSelected]);
+    if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected);
+    if (onItemSelected && role === 'button') return onButtonPressed(onItemSelected);
+    return undefined;
+  }, [role, onItemSelected]);
   var content = React.createElement(React.Fragment, null, before && React.createElement("div", {
     className: "".concat(CLASSNAME, "__before")
   }, before), React.createElement("div", {
@@ -270,15 +274,18 @@ var ListItem = forwardRef(function (props, ref) {
   /* Clickable list item */
   renderLink(_objectSpread2({
     linkAs: linkAs,
-    tabIndex: 0,
-    role: onItemSelected ? 'button' : undefined
+    tabIndex: !isDisabled && role === 'button' ? 0 : undefined,
+    role: role,
+    'aria-disabled': isDisabled
   }, linkProps, {
+    href: isDisabled ? undefined : linkProps.href,
     className: classnames(handleBasicClasses({
       prefix: "".concat(CLASSNAME, "__link"),
       isHighlighted: isHighlighted,
-      isSelected: isSelected
+      isSelected: isSelected,
+      isDisabled: isDisabled
     })),
-    onClick: onItemSelected,
+    onClick: isDisabled ? undefined : onItemSelected,
     onKeyDown: onKeyDown,
     ref: linkRef
   }), content) :
@@ -582,7 +589,7 @@ function onKeyboardFocus(props, handler) {
 }
 
 var isNavigableItem = function isNavigableItem(node) {
-  return isComponent('ListItem')(node) && isClickable(node.props);
+  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.