@lumx/react 3.20.1-alpha.1 → 3.20.1-alpha.11

package/_internal/a67f26a8.js

@@ -0,0 +1,98 @@
+import { m as getRootClassName, O as Orientation, n as forwardRef, b as Theme, _ as _extends, l as classNames } from './d3321a86.js';
+import isObject from 'lodash/isObject';
+import { h as handleBasicClasses } from './4ceaf17c.js';
+import { u as useTheme } from './3181f000.js';
+import { ThumbnailVariant } from './95a2e851.js';
+import { T as Thumbnail } from './714809cc.js';
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'PostBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  orientation: Orientation.horizontal
+};
+
+/**
+ * PostBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const PostBlock = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    actions,
+    attachments,
+    author,
+    className,
+    meta,
+    onClick,
+    orientation = DEFAULT_PROPS.orientation,
+    tags,
+    text,
+    theme = defaultTheme,
+    thumbnailProps,
+    title,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      orientation,
+      theme
+    }))
+  }, forwardedProps), thumbnailProps && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__thumbnail`
+  }, /*#__PURE__*/React.createElement(Thumbnail, _extends({}, thumbnailProps, {
+    theme: theme,
+    variant: ThumbnailVariant.rounded
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__wrapper`
+  }, author && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__author`
+  }, author), title && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: `${CLASSNAME}__title`,
+    onClick: onClick
+  }, title), meta && /*#__PURE__*/React.createElement("span", {
+    className: `${CLASSNAME}__meta`
+  }, meta), isObject(text) && text.__html ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-danger
+  React.createElement("p", {
+    dangerouslySetInnerHTML: text,
+    className: `${CLASSNAME}__text`
+  }) : /*#__PURE__*/React.createElement("p", {
+    className: `${CLASSNAME}__text`
+  }, text), attachments && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__attachments`
+  }, attachments), (tags || actions) && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__toolbar`
+  }, tags && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__tags`
+  }, tags), actions && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__actions`
+  }, actions))));
+});
+PostBlock.displayName = COMPONENT_NAME;
+PostBlock.className = CLASSNAME;
+PostBlock.defaultProps = DEFAULT_PROPS;
+
+export { PostBlock };
+//# sourceMappingURL=a67f26a8.js.map

package/_internal/a67f26a8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"a67f26a8.js","sources":["../../src/components/post-block/PostBlock.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport isObject from 'lodash/isObject';\n\nimport { Orientation, Theme, Thumbnail, ThumbnailProps, ThumbnailVariant } from '@lumx/react';\nimport { GenericProps, 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 PostBlockProps extends GenericProps, HasTheme {\n    /** Action toolbar content. */\n    actions?: ReactNode;\n    /** Attachment content. */\n    attachments?: ReactNode;\n    /** Author content. */\n    author?: ReactNode;\n    /** Metadata content. */\n    meta?: ReactNode;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Tag content. */\n    tags?: ReactNode;\n    /** Content (string, or sanitized html). */\n    text?: string | { __html: string };\n    /** Thumbnail. */\n    thumbnailProps?: ThumbnailProps;\n    /** Title. */\n    title: string;\n    /** On click callback. */\n    onClick?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'PostBlock';\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<PostBlockProps> = {\n    orientation: Orientation.horizontal,\n};\n\n/**\n * PostBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const PostBlock = forwardRef<PostBlockProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        actions,\n        attachments,\n        author,\n        className,\n        meta,\n        onClick,\n        orientation = DEFAULT_PROPS.orientation,\n        tags,\n        text,\n        theme = defaultTheme,\n        thumbnailProps,\n        title,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, orientation, theme }))}\n            {...forwardedProps}\n        >\n            {thumbnailProps && (\n                <div className={`${CLASSNAME}__thumbnail`}>\n                    <Thumbnail {...thumbnailProps} theme={theme} variant={ThumbnailVariant.rounded} />\n                </div>\n            )}\n            <div className={`${CLASSNAME}__wrapper`}>\n                {author && <div className={`${CLASSNAME}__author`}>{author}</div>}\n\n                {title && (\n                    <button type=\"button\" className={`${CLASSNAME}__title`} onClick={onClick}>\n                        {title}\n                    </button>\n                )}\n\n                {meta && <span className={`${CLASSNAME}__meta`}>{meta}</span>}\n\n                {isObject(text) && text.__html ? (\n                    // eslint-disable-next-line react/no-danger\n                    <p dangerouslySetInnerHTML={text} className={`${CLASSNAME}__text`} />\n                ) : (\n                    <p className={`${CLASSNAME}__text`}>{text}</p>\n                )}\n\n                {attachments && <div className={`${CLASSNAME}__attachments`}>{attachments}</div>}\n                {(tags || actions) && (\n                    <div className={`${CLASSNAME}__toolbar`}>\n                        {tags && <div className={`${CLASSNAME}__tags`}>{tags}</div>}\n                        {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n});\nPostBlock.displayName = COMPONENT_NAME;\nPostBlock.className = CLASSNAME;\nPostBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","PostBlock","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actions","attachments","author","className","meta","onClick","tags","text","theme","thumbnailProps","title","forwardedProps","React","createElement","_extends","classNames","handleBasicClasses","prefix","Thumbnail","variant","ThumbnailVariant","rounded","type","isObject","__html","dangerouslySetInnerHTML","displayName","defaultProps"],"mappings":";;;;;;;AAWA;AACA;AACA;;AAwBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,WAAW,CAAA;;AAElC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAsC,GAAG;EAC3CC,WAAW,EAAEC,WAAW,CAACC,UAAAA;AAC7B,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,SAAS,GAAGC,UAAU,CAAiC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChF,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,OAAO;IACPC,WAAW;IACXC,MAAM;IACNC,SAAS;IACTC,IAAI;IACJC,OAAO;IACPhB,WAAW,GAAGD,aAAa,CAACC,WAAW;IACvCiB,IAAI;IACJC,IAAI;AACJC,IAAAA,KAAK,GAAGZ,YAAY;IACpBa,cAAc;IACdC,KAAK;IACL,GAAGC,cAAAA;AACP,GAAC,GAAGjB,KAAK,CAAA;AAET,EAAA,oBACIkB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AACInB,IAAAA,GAAG,EAAEA,GAAI;AACTQ,IAAAA,SAAS,EAAEY,UAAU,CAACZ,SAAS,EAAEa,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE/B,SAAS;MAAEG,WAAW;AAAEmB,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GAAA,EAC5FG,cAAc,CAEjBF,EAAAA,cAAc,iBACXG,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,GAAGjB,SAAS,CAAA,WAAA,CAAA;GACxB0B,eAAAA,KAAA,CAAAC,aAAA,CAACK,SAAS,EAAAJ,QAAA,KAAKL,cAAc,EAAA;AAAED,IAAAA,KAAK,EAAEA,KAAM;IAACW,OAAO,EAAEC,gBAAgB,CAACC,OAAAA;AAAQ,GAAA,CAAE,CAChF,CACR,eACDT,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,GAAGjB,SAAS,CAAA,SAAA,CAAA;AAAY,GAAA,EACnCgB,MAAM,iBAAIU,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,GAAGjB,SAAS,CAAA,QAAA,CAAA;AAAW,GAAA,EAAEgB,MAAY,CAAC,EAEhEQ,KAAK,iBACFE,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQS,IAAAA,IAAI,EAAC,QAAQ;IAACnB,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAU,OAAA,CAAA;AAACmB,IAAAA,OAAO,EAAEA,OAAAA;AAAQ,GAAA,EACpEK,KACG,CACX,EAEAN,IAAI,iBAAIQ,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAMV,SAAS,EAAE,GAAGjB,SAAS,CAAA,MAAA,CAAA;GAAWkB,EAAAA,IAAW,CAAC,EAE5DmB,QAAQ,CAAChB,IAAI,CAAC,IAAIA,IAAI,CAACiB,MAAM;AAAA;AAC1B;AACAZ,EAAAA,KAAA,CAAAC,aAAA,CAAA,GAAA,EAAA;AAAGY,IAAAA,uBAAuB,EAAElB,IAAK;IAACJ,SAAS,EAAE,GAAGjB,SAAS,CAAA,MAAA,CAAA;AAAS,GAAE,CAAC,gBAErE0B,KAAA,CAAAC,aAAA,CAAA,GAAA,EAAA;IAAGV,SAAS,EAAE,GAAGjB,SAAS,CAAA,MAAA,CAAA;AAAS,GAAA,EAAEqB,IAAQ,CAChD,EAEAN,WAAW,iBAAIW,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,GAAGjB,SAAS,CAAA,aAAA,CAAA;GAAkBe,EAAAA,WAAiB,CAAC,EAC/E,CAACK,IAAI,IAAIN,OAAO,kBACbY,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,GAAGjB,SAAS,CAAA,SAAA,CAAA;AAAY,GAAA,EACnCoB,IAAI,iBAAIM,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,GAAGjB,SAAS,CAAA,MAAA,CAAA;AAAS,GAAA,EAAEoB,IAAU,CAAC,EAC1DN,OAAO,iBAAIY,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,GAAGjB,SAAS,CAAA,SAAA,CAAA;AAAY,GAAA,EAAEc,OAAa,CAClE,CAER,CACJ,CAAC,CAAA;AAEd,CAAC,EAAC;AACFR,SAAS,CAACkC,WAAW,GAAGzC,cAAc,CAAA;AACtCO,SAAS,CAACW,SAAS,GAAGjB,SAAS,CAAA;AAC/BM,SAAS,CAACmC,YAAY,GAAGvC,aAAa;;;;"}

package/_internal/aa8c5d9b.js

@@ -0,0 +1,50 @@
+import { useState, useRef, useEffect } from 'react';
+import { W as WINDOW } from './b3bfbe72.js';
+
+/** Check if user prefers reduced motion */
+function isReducedMotion() {
+  return WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+}
+
+/**
+ * Returns true if the component is visible tracking the opacity transition.
+ *
+ * @param ref Element on which to listen the transition event.
+ * @param isComponentVisible Whether the component intends to be visible or not.
+ * @param onVisibilityChange Callback called when the visibility changes.
+ * @return true if the component should be rendered
+ */
+const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityChange) => {
+  const [isVisible, setVisible] = useState(isComponentVisible);
+  const previousVisibility = useRef(isVisible);
+
+  // On component visibility change.
+  useEffect(() => {
+    if (isComponentVisible) {
+      setVisible(true);
+      return undefined;
+    }
+    const {
+      current: element
+    } = ref;
+
+    // Transition event is not supported or the user prefers reduced motion.
+    // => Skip and set visibility to false directly.
+    if (!element || !window.TransitionEvent || isReducedMotion()) {
+      setVisible(false);
+      return undefined;
+    }
+    const timer = setTimeout(() => setVisible(false), timeout);
+    return () => clearTimeout(timer);
+  }, [isComponentVisible, ref, timeout]);
+  useEffect(() => {
+    if (onVisibilityChange && previousVisibility.current !== isVisible) {
+      onVisibilityChange(isVisible);
+      previousVisibility.current = isVisible;
+    }
+  }, [isVisible, onVisibilityChange]);
+  return isVisible || isComponentVisible;
+};
+
+export { isReducedMotion as i, useTransitionVisibility as u };
+//# sourceMappingURL=aa8c5d9b.js.map

package/_internal/aa8c5d9b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aa8c5d9b.js","sources":["../../src/utils/browser/isReducedMotion.ts","../../src/hooks/useTransitionVisibility.ts"],"sourcesContent":["import { WINDOW } from '@lumx/react/constants';\n\n/** Check if user prefers reduced motion */\nexport function isReducedMotion() {\n    return WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n}\n","import { RefObject, useEffect, useRef, useState } from 'react';\nimport { isReducedMotion } from '@lumx/react/utils/browser/isReducedMotion';\n\n/**\n * Returns true if the component is visible tracking the opacity transition.\n *\n * @param ref Element on which to listen the transition event.\n * @param isComponentVisible Whether the component intends to be visible or not.\n * @param onVisibilityChange Callback called when the visibility changes.\n * @return true if the component should be rendered\n */\nexport const useTransitionVisibility = (\n    ref: RefObject<HTMLElement>,\n    isComponentVisible: boolean,\n    timeout: number,\n    onVisibilityChange?: (isVisible: boolean) => void,\n) => {\n    const [isVisible, setVisible] = useState(isComponentVisible);\n    const previousVisibility = useRef(isVisible);\n\n    // On component visibility change.\n    useEffect(() => {\n        if (isComponentVisible) {\n            setVisible(true);\n            return undefined;\n        }\n        const { current: element } = ref;\n\n        // Transition event is not supported or the user prefers reduced motion.\n        // => Skip and set visibility to false directly.\n        if (!element || !window.TransitionEvent || isReducedMotion()) {\n            setVisible(false);\n            return undefined;\n        }\n\n        const timer = setTimeout(() => setVisible(false), timeout);\n        return () => clearTimeout(timer);\n    }, [isComponentVisible, ref, timeout]);\n\n    useEffect(() => {\n        if (onVisibilityChange && previousVisibility.current !== isVisible) {\n            onVisibilityChange(isVisible);\n            previousVisibility.current = isVisible;\n        }\n    }, [isVisible, onVisibilityChange]);\n\n    return isVisible || isComponentVisible;\n};\n"],"names":["isReducedMotion","WINDOW","matchMedia","matches","useTransitionVisibility","ref","isComponentVisible","timeout","onVisibilityChange","isVisible","setVisible","useState","previousVisibility","useRef","useEffect","undefined","current","element","window","TransitionEvent","timer","setTimeout","clearTimeout"],"mappings":";;;AAEA;AACO,SAASA,eAAeA,GAAG;AAC9B,EAAA,OAAOC,MAAM,EAAEC,UAAU,GAAG,kCAAkC,CAAC,CAACC,OAAO,CAAA;AAC3E;;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,uBAAuB,GAAGA,CACnCC,GAA2B,EAC3BC,kBAA2B,EAC3BC,OAAe,EACfC,kBAAiD,KAChD;EACD,MAAM,CAACC,SAAS,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAACL,kBAAkB,CAAC,CAAA;AAC5D,EAAA,MAAMM,kBAAkB,GAAGC,MAAM,CAACJ,SAAS,CAAC,CAAA;;AAE5C;AACAK,EAAAA,SAAS,CAAC,MAAM;AACZ,IAAA,IAAIR,kBAAkB,EAAE;MACpBI,UAAU,CAAC,IAAI,CAAC,CAAA;AAChB,MAAA,OAAOK,SAAS,CAAA;AACpB,KAAA;IACA,MAAM;AAAEC,MAAAA,OAAO,EAAEC,OAAAA;AAAQ,KAAC,GAAGZ,GAAG,CAAA;;AAEhC;AACA;IACA,IAAI,CAACY,OAAO,IAAI,CAACC,MAAM,CAACC,eAAe,IAAInB,eAAe,EAAE,EAAE;MAC1DU,UAAU,CAAC,KAAK,CAAC,CAAA;AACjB,MAAA,OAAOK,SAAS,CAAA;AACpB,KAAA;IAEA,MAAMK,KAAK,GAAGC,UAAU,CAAC,MAAMX,UAAU,CAAC,KAAK,CAAC,EAAEH,OAAO,CAAC,CAAA;AAC1D,IAAA,OAAO,MAAMe,YAAY,CAACF,KAAK,CAAC,CAAA;GACnC,EAAE,CAACd,kBAAkB,EAAED,GAAG,EAAEE,OAAO,CAAC,CAAC,CAAA;AAEtCO,EAAAA,SAAS,CAAC,MAAM;AACZ,IAAA,IAAIN,kBAAkB,IAAII,kBAAkB,CAACI,OAAO,KAAKP,SAAS,EAAE;MAChED,kBAAkB,CAACC,SAAS,CAAC,CAAA;MAC7BG,kBAAkB,CAACI,OAAO,GAAGP,SAAS,CAAA;AAC1C,KAAA;AACJ,GAAC,EAAE,CAACA,SAAS,EAAED,kBAAkB,CAAC,CAAC,CAAA;EAEnC,OAAOC,SAAS,IAAIH,kBAAkB,CAAA;AAC1C;;;;"}

package/_internal/aafcf80e.js

@@ -0,0 +1,312 @@
+import React__default, { useReducer, useEffect, useCallback } from 'react';
+import { r as reducer, I as INIT_STATE, T as TabProviderContext, u as useTabProviderContextState, a as useTabProviderContext } from './825ac334.js';
+import { m as getRootClassName, n as forwardRef, _ as _extends, l as classNames, c as Size, K as Kind, C as CSS_PREFIX } from './d3321a86.js';
+import { m as mergeRefs } from './f0d7d6ea.js';
+import { u as useRovingTabIndex } from './7daf0f24.js';
+import { h as handleBasicClasses } from './4ceaf17c.js';
+import { u as useDisableStateProps } from './60923026.js';
+import { I as Icon, m as mdiAlertCircle } from './4e1dde79.js';
+import { InputLabel } from './9210e2f3.js';
+import { InputHelper } from './fc47f2da.js';
+import { m as mdiCheckCircle } from './de24f857.js';
+import './b3bfbe72.js';
+
+const mdiRadioboxBlank = 'M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';
+
+const mdiRadioboxMarked = 'M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 5a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5';
+
+const DEFAULT_PROPS$3 = {
+  isLazy: INIT_STATE.isLazy,
+  shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
+};
+
+/**
+ * This component provides a context in which steps can be defined and linked to their step panel.
+ *
+ * It does not produce any markup so you can wrap it around any React elements and then split the ProgressTracker and ProgressTrackerPanel
+ * components in the react tree.
+ *
+ * This works exactly as TabProvider so it uses TabProviderContext and tabs state.
+ *
+ * @param  props React component props.
+ * @return React element.
+ */
+const ProgressTrackerProvider = props => {
+  const {
+    children,
+    onChange,
+    ...propState
+  } = props;
+  const [state, dispatch] = useReducer(reducer, INIT_STATE);
+
+  // On prop state change => dispatch update.
+  useEffect(() => {
+    dispatch({
+      type: 'update',
+      payload: {
+        ...DEFAULT_PROPS$3,
+        ...propState,
+        activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex
+      }
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [dispatch, ...Object.values(propState)]);
+
+  // On active tab index state change => send update to the onChange.
+  useEffect(() => {
+    if (state === INIT_STATE || !onChange || propState.activeStepIndex === state.activeTabIndex) {
+      return;
+    }
+    onChange(state.activeTabIndex);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [onChange, state.activeTabIndex]);
+  return /*#__PURE__*/React.createElement(TabProviderContext.Provider, {
+    value: [state, dispatch]
+  }, children);
+};
+ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$3;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$2 = 'ProgressTracker';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$2 = {};
+
+/**
+ * ProgressTracker component.
+ *
+ * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ProgressTracker = forwardRef((props, ref) => {
+  const {
+    'aria-label': ariaLabel,
+    children,
+    className,
+    ...forwardedProps
+  } = props;
+  const stepListRef = React__default.useRef(null);
+  useRovingTabIndex({
+    parentRef: stepListRef,
+    elementSelector: '[role="tab"]',
+    keepTabIndex: false,
+    extraDependencies: [children]
+  });
+  const state = useTabProviderContextState();
+  const numberOfSteps = state?.ids?.tab?.length || 0;
+  const backgroundPosition = numberOfSteps > 0 ? 100 / (numberOfSteps * 2) : 0;
+  const trackPosition = numberOfSteps > 0 ? 100 / (numberOfSteps - 1) * (state?.activeTabIndex || 0) / 100 : 0;
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: mergeRefs(ref, stepListRef)
+  }, forwardedProps, {
+    className: classNames(className, CLASSNAME$2)
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME$2}__steps`,
+    role: "tablist",
+    "aria-label": ariaLabel
+  }, children), /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME$2}__background-bar`,
+    style: {
+      left: `${backgroundPosition}%`,
+      right: `${backgroundPosition}%`
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME$2}__foreground-bar`,
+    style: {
+      left: `${backgroundPosition}%`,
+      right: `${backgroundPosition}%`,
+      transform: `scaleX(${trackPosition})`
+    }
+  }));
+});
+ProgressTracker.displayName = COMPONENT_NAME$2;
+ProgressTracker.className = CLASSNAME$2;
+ProgressTracker.defaultProps = DEFAULT_PROPS$2;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'ProgressTrackerStep';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$1 = {};
+
+/**
+ * ProgressTrackerStep component.
+ *
+ * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ProgressTrackerStep = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    className,
+    hasError,
+    helper,
+    id,
+    isActive: propIsActive,
+    isComplete,
+    label,
+    onFocus,
+    onKeyPress,
+    tabIndex = -1,
+    ...forwardedProps
+  } = otherProps;
+  const state = useTabProviderContext('tab', id);
+  const isActive = propIsActive || state?.isActive;
+  const changeToCurrentTab = useCallback(() => {
+    if (isAnyDisabled) {
+      return;
+    }
+    state?.changeToTab();
+  }, [isAnyDisabled, state]);
+  const handleFocus = useCallback(event => {
+    onFocus?.(event);
+    if (state?.shouldActivateOnFocus) {
+      changeToCurrentTab();
+    }
+  }, [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus]);
+  const handleKeyPress = useCallback(event => {
+    onKeyPress?.(event);
+    if (event.key !== 'Enter') {
+      return;
+    }
+    changeToCurrentTab();
+  }, [changeToCurrentTab, onKeyPress]);
+  const getIcon = () => {
+    if (isComplete) {
+      return mdiCheckCircle;
+    }
+    if (isActive) {
+      return hasError ? mdiAlertCircle : mdiRadioboxMarked;
+    }
+    return mdiRadioboxBlank;
+  };
+  return /*#__PURE__*/React.createElement("button", _extends({
+    ref: ref
+  }, forwardedProps, {
+    type: "button",
+    id: state?.tabId,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$1,
+      hasError,
+      isActive,
+      isClickable: state && !isAnyDisabled,
+      isComplete
+    })),
+    onClick: changeToCurrentTab,
+    onKeyPress: handleKeyPress,
+    onFocus: handleFocus,
+    role: "tab",
+    tabIndex: isActive ? 0 : tabIndex,
+    "aria-disabled": isAnyDisabled,
+    "aria-selected": isActive,
+    "aria-controls": state?.tabPanelId
+  }), /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME$1}__state`,
+    icon: getIcon(),
+    size: Size.s
+  }), /*#__PURE__*/React.createElement(InputLabel, {
+    htmlFor: state?.tabId || '',
+    className: `${CLASSNAME$1}__label`
+  }, label), helper && /*#__PURE__*/React.createElement(InputHelper, {
+    kind: hasError ? Kind.error : Kind.info,
+    className: `${CLASSNAME$1}__helper`
+  }, helper));
+});
+ProgressTrackerStep.displayName = COMPONENT_NAME$1;
+ProgressTrackerStep.className = CLASSNAME$1;
+ProgressTrackerStep.defaultProps = DEFAULT_PROPS$1;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ProgressTrackerStepPanel';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = `${CSS_PREFIX}-step-panel`;
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * ProgressTrackerStepPanel component.
+ *
+ * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ProgressTrackerStepPanel = forwardRef((props, ref) => {
+  const {
+    children,
+    id,
+    className,
+    isActive: propIsActive,
+    ...forwardedProps
+  } = props;
+  const state = useTabProviderContext('tabPanel', id);
+  const isActive = propIsActive || state?.isActive;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, forwardedProps, {
+    id: state?.tabPanelId,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      isActive
+    })),
+    role: "tabpanel",
+    tabIndex: isActive ? 0 : -1,
+    "aria-labelledby": state?.tabId
+  }), (!state?.isLazy || isActive) && children);
+});
+ProgressTrackerStepPanel.displayName = COMPONENT_NAME;
+ProgressTrackerStepPanel.className = CLASSNAME;
+ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS;
+
+export { ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel };
+//# sourceMappingURL=aafcf80e.js.map

package/_internal/aafcf80e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aafcf80e.js","sources":["../../../lumx-icons/dist/esm/radiobox-blank.js","../../../lumx-icons/dist/esm/radiobox-marked.js","../../src/components/progress-tracker/ProgressTrackerProvider.tsx","../../src/components/progress-tracker/ProgressTracker.tsx","../../src/components/progress-tracker/ProgressTrackerStep.tsx","../../src/components/progress-tracker/ProgressTrackerStepPanel.tsx"],"sourcesContent":["export const mdiRadioboxBlank = 'M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';","export const mdiRadioboxMarked = 'M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 5a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5';","import { ReactNode, useEffect, useReducer } from 'react';\nimport { INIT_STATE, TabProviderContext, reducer } from '../tabs/state';\n\nexport interface ProgressTrackerProviderProps {\n    /** Active step index. */\n    activeStepIndex?: number;\n    /** ProgressTrackerProvider children. */\n    children: ReactNode;\n    /** Step panel children should not render if the step panel is hidden. */\n    isLazy?: boolean;\n    /** Activate tabs on focus. */\n    shouldActivateOnFocus?: boolean;\n    /** Step change callback. */\n    onChange?(index: number): void;\n}\n\nconst DEFAULT_PROPS: Partial<ProgressTrackerProviderProps> = {\n    isLazy: INIT_STATE.isLazy,\n    shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus,\n};\n\n/**\n * This component provides a context in which steps can be defined and linked to their step panel.\n *\n * It does not produce any markup so you can wrap it around any React elements and then split the ProgressTracker and ProgressTrackerPanel\n * components in the react tree.\n *\n * This works exactly as TabProvider so it uses TabProviderContext and tabs state.\n *\n * @param  props React component props.\n * @return React element.\n */\nexport const ProgressTrackerProvider: React.FC<ProgressTrackerProviderProps> = (props) => {\n    const { children, onChange, ...propState } = props;\n    const [state, dispatch] = useReducer(reducer, INIT_STATE);\n\n    // On prop state change => dispatch update.\n    useEffect(\n        () => {\n            dispatch({\n                type: 'update',\n                payload: {\n                    ...DEFAULT_PROPS,\n                    ...propState,\n                    activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex,\n                },\n            });\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [dispatch, ...Object.values(propState)],\n    );\n\n    // On active tab index state change => send update to the onChange.\n    useEffect(\n        () => {\n            if (state === INIT_STATE || !onChange || propState.activeStepIndex === state.activeTabIndex) {\n                return;\n            }\n            onChange(state.activeTabIndex);\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [onChange, state.activeTabIndex],\n    );\n\n    return <TabProviderContext.Provider value={[state, dispatch]}>{children}</TabProviderContext.Provider>;\n};\nProgressTrackerProvider.defaultProps = DEFAULT_PROPS;\n","import React, { 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 { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { useTabProviderContextState } from '../tabs/state';\n\n/**\n * Defines the props of the component.\n */\nexport interface ProgressTrackerProps extends GenericProps {\n    /** ARIA label (purpose of the set of steps). */\n    ['aria-label']: string;\n    /** Step list. */\n    children: ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ProgressTracker';\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<ProgressTrackerProps> = {};\n\n/**\n * ProgressTracker component.\n *\n * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ProgressTracker = forwardRef<ProgressTrackerProps, HTMLDivElement>((props, ref) => {\n    const { 'aria-label': ariaLabel, children, className, ...forwardedProps } = props;\n    const stepListRef = React.useRef(null);\n    useRovingTabIndex({\n        parentRef: stepListRef,\n        elementSelector: '[role=\"tab\"]',\n        keepTabIndex: false,\n        extraDependencies: [children],\n    });\n\n    const state = useTabProviderContextState();\n    const numberOfSteps = state?.ids?.tab?.length || 0;\n    const backgroundPosition: number = numberOfSteps > 0 ? 100 / (numberOfSteps * 2) : 0;\n    const trackPosition: number =\n        numberOfSteps > 0 ? ((100 / (numberOfSteps - 1)) * (state?.activeTabIndex || 0)) / 100 : 0;\n\n    return (\n        <div ref={mergeRefs(ref, stepListRef)} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n            <div className={`${CLASSNAME}__steps`} role=\"tablist\" aria-label={ariaLabel}>\n                {children}\n            </div>\n\n            <div\n                className={`${CLASSNAME}__background-bar`}\n                style={{ left: `${backgroundPosition}%`, right: `${backgroundPosition}%` }}\n            />\n\n            <div\n                className={`${CLASSNAME}__foreground-bar`}\n                style={{\n                    left: `${backgroundPosition}%`,\n                    right: `${backgroundPosition}%`,\n                    transform: `scaleX(${trackPosition})`,\n                }}\n            />\n        </div>\n    );\n});\nProgressTracker.displayName = COMPONENT_NAME;\nProgressTracker.className = CLASSNAME;\nProgressTracker.defaultProps = DEFAULT_PROPS;\n","import { FocusEventHandler, KeyboardEventHandler, useCallback } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiAlertCircle, mdiCheckCircle, mdiRadioboxBlank, mdiRadioboxMarked } from '@lumx/icons';\nimport { Icon, InputHelper, InputLabel, 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\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { useTabProviderContext } from '../tabs/state';\n\n/**\n * Defines the props of the component.\n */\nexport interface ProgressTrackerStepProps extends GenericProps {\n    /** Children are not supported. */\n    children?: never;\n    /** Whether the step should be in error state or not. */\n    hasError?: boolean;\n    /** Helper text. */\n    helper?: string | null;\n    /** Native id property. */\n    id?: string;\n    /** Whether the current step is active or not. */\n    isActive?: boolean;\n    /** Whether the current step is completed or not. */\n    isComplete?: boolean;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Label text. */\n    label?: string | null;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ProgressTrackerStep';\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<ProgressTrackerStepProps> = {};\n\n/**\n * ProgressTrackerStep component.\n *\n * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ProgressTrackerStep = forwardRef<ProgressTrackerStepProps, HTMLButtonElement>((props, ref) => {\n    const { isAnyDisabled, otherProps } = useDisableStateProps(props);\n    const {\n        className,\n        hasError,\n        helper,\n        id,\n        isActive: propIsActive,\n        isComplete,\n        label,\n        onFocus,\n        onKeyPress,\n        tabIndex = -1,\n        ...forwardedProps\n    } = otherProps;\n    const state = useTabProviderContext('tab', id);\n    const isActive = propIsActive || state?.isActive;\n\n    const changeToCurrentTab = useCallback(() => {\n        if (isAnyDisabled) {\n            return;\n        }\n        state?.changeToTab();\n    }, [isAnyDisabled, state]);\n\n    const handleFocus: FocusEventHandler = useCallback(\n        (event) => {\n            onFocus?.(event);\n            if (state?.shouldActivateOnFocus) {\n                changeToCurrentTab();\n            }\n        },\n        [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus],\n    );\n\n    const handleKeyPress: KeyboardEventHandler = useCallback(\n        (event) => {\n            onKeyPress?.(event);\n            if (event.key !== 'Enter') {\n                return;\n            }\n            changeToCurrentTab();\n        },\n        [changeToCurrentTab, onKeyPress],\n    );\n\n    const getIcon = (): string => {\n        if (isComplete) {\n            return mdiCheckCircle;\n        }\n\n        if (isActive) {\n            return hasError ? mdiAlertCircle : mdiRadioboxMarked;\n        }\n\n        return mdiRadioboxBlank;\n    };\n\n    return (\n        <button\n            ref={ref}\n            {...forwardedProps}\n            type=\"button\"\n            id={state?.tabId}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    hasError,\n                    isActive,\n                    isClickable: state && !isAnyDisabled,\n                    isComplete,\n                }),\n            )}\n            onClick={changeToCurrentTab}\n            onKeyPress={handleKeyPress}\n            onFocus={handleFocus}\n            role=\"tab\"\n            tabIndex={isActive ? 0 : tabIndex}\n            aria-disabled={isAnyDisabled}\n            aria-selected={isActive}\n            aria-controls={state?.tabPanelId}\n        >\n            <Icon className={`${CLASSNAME}__state`} icon={getIcon()} size={Size.s} />\n\n            <InputLabel htmlFor={state?.tabId || ''} className={`${CLASSNAME}__label`}>\n                {label}\n            </InputLabel>\n\n            {helper && (\n                <InputHelper kind={hasError ? Kind.error : Kind.info} className={`${CLASSNAME}__helper`}>\n                    {helper}\n                </InputHelper>\n            )}\n        </button>\n    );\n});\nProgressTrackerStep.displayName = COMPONENT_NAME;\nProgressTrackerStep.className = CLASSNAME;\nProgressTrackerStep.defaultProps = DEFAULT_PROPS;\n","import classNames from 'classnames';\n\nimport { useTabProviderContext } from '@lumx/react/components/tabs/state';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { 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 ProgressTrackerStepPanelProps extends GenericProps {\n    /** Native id property. */\n    id?: string;\n    /** Whether the step is active or not. */\n    isActive?: boolean;\n    /** Children */\n    children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ProgressTrackerStepPanel';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-step-panel`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<ProgressTrackerStepPanelProps> = {};\n\n/**\n * ProgressTrackerStepPanel component.\n *\n * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ProgressTrackerStepPanel = forwardRef<ProgressTrackerStepPanelProps, HTMLDivElement>((props, ref) => {\n    const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;\n\n    const state = useTabProviderContext('tabPanel', id);\n    const isActive = propIsActive || state?.isActive;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            id={state?.tabPanelId}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}\n            role=\"tabpanel\"\n            tabIndex={isActive ? 0 : -1}\n            aria-labelledby={state?.tabId}\n        >\n            {(!state?.isLazy || isActive) && children}\n        </div>\n    );\n});\nProgressTrackerStepPanel.displayName = COMPONENT_NAME;\nProgressTrackerStepPanel.className = CLASSNAME;\nProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS;\n"],"names":["mdiRadioboxBlank","mdiRadioboxMarked","DEFAULT_PROPS","isLazy","INIT_STATE","shouldActivateOnFocus","ProgressTrackerProvider","props","children","onChange","propState","state","dispatch","useReducer","reducer","useEffect","type","payload","activeTabIndex","activeStepIndex","Object","values","React","createElement","TabProviderContext","Provider","value","defaultProps","COMPONENT_NAME","CLASSNAME","getRootClassName","ProgressTracker","forwardRef","ref","ariaLabel","className","forwardedProps","stepListRef","useRef","useRovingTabIndex","parentRef","elementSelector","keepTabIndex","extraDependencies","useTabProviderContextState","numberOfSteps","ids","tab","length","backgroundPosition","trackPosition","_extends","mergeRefs","classNames","role","style","left","right","transform","displayName","ProgressTrackerStep","isAnyDisabled","otherProps","useDisableStateProps","hasError","helper","id","isActive","propIsActive","isComplete","label","onFocus","onKeyPress","tabIndex","useTabProviderContext","changeToCurrentTab","useCallback","changeToTab","handleFocus","event","handleKeyPress","key","getIcon","mdiCheckCircle","mdiAlertCircle","tabId","handleBasicClasses","prefix","isClickable","onClick","tabPanelId","Icon","icon","size","Size","s","InputLabel","htmlFor","InputHelper","kind","Kind","error","info","CSS_PREFIX","ProgressTrackerStepPanel"],"mappings":"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"}

package/_internal/ac3bc511.js

@@ -0,0 +1,2 @@
+export { T as Text } from './8fcceef3.js';
+//# sourceMappingURL=ac3bc511.js.map

package/_internal/ac3bc511.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ac3bc511.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/_internal/b3bfbe72.js

@@ -0,0 +1,24 @@
+import './d3321a86.js';
+
+/**
+ * Optional global `window` instance (not defined when running SSR).
+ */
+const WINDOW = typeof window !== 'undefined' ? window : undefined;
+
+/**
+ * Optional global `document` instance (not defined when running SSR).
+ */
+const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
+
+/**
+ * Check if we are running in a true browser
+ */
+const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
+
+/**
+ * Visually hidden a11y utility class name
+ */
+const VISUALLY_HIDDEN = 'visually-hidden';
+
+export { DOCUMENT as D, IS_BROWSER as I, VISUALLY_HIDDEN as V, WINDOW as W };
+//# sourceMappingURL=b3bfbe72.js.map

package/_internal/b3bfbe72.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"b3bfbe72.js","sources":["../../src/constants.ts"],"sourcesContent":["export {\n    CSS_PREFIX,\n    DIALOG_TRANSITION_DURATION,\n    NOTIFICATION_TRANSITION_DURATION,\n    TOOLTIP_HOVER_DELAY,\n    TOOLTIP_LONG_PRESS_DELAY,\n} from '@lumx/core/js/constants';\n\n/**\n * Optional global `window` instance (not defined when running SSR).\n */\nexport const WINDOW = typeof window !== 'undefined' ? window : undefined;\n\n/**\n * Optional global `document` instance (not defined when running SSR).\n */\nexport const DOCUMENT = typeof document !== 'undefined' ? document : undefined;\n\n/**\n * Check if we are running in a true browser\n */\nexport const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');\n\n/**\n * Visually hidden a11y utility class name\n */\nexport const VISUALLY_HIDDEN = 'visually-hidden';\n"],"names":["WINDOW","window","undefined","DOCUMENT","document","IS_BROWSER","navigator","userAgent","includes","VISUALLY_HIDDEN"],"mappings":";;AAQA;AACA;AACA;AACO,MAAMA,MAAM,GAAG,OAAOC,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGC,UAAS;;AAExE;AACA;AACA;AACO,MAAMC,QAAQ,GAAG,OAAOC,QAAQ,KAAK,WAAW,GAAGA,QAAQ,GAAGF,UAAS;;AAE9E;AACA;AACA;MACaG,UAAU,GAAG,OAAOC,SAAS,KAAK,WAAW,IAAI,CAACA,SAAS,CAACC,SAAS,CAACC,QAAQ,CAAC,OAAO,EAAC;;AAEpG;AACA;AACA;AACO,MAAMC,eAAe,GAAG;;;;"}

package/_internal/b925072d.js

@@ -0,0 +1,91 @@
+import { m as getRootClassName, n as forwardRef, b as Theme, _ as _extends, l as classNames, A as Alignment, i as AspectRatio } from './d3321a86.js';
+import { useMemo } from 'react';
+import take from 'lodash/take';
+import { u as useTheme } from './3181f000.js';
+import { h as handleBasicClasses } from './4ceaf17c.js';
+import { T as Thumbnail } from './714809cc.js';
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Mosaic';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * Mosaic component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Mosaic = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    className,
+    theme = defaultTheme,
+    thumbnails,
+    onImageClick,
+    ...forwardedProps
+  } = props;
+  const handleImageClick = useMemo(() => {
+    if (!onImageClick) return undefined;
+    return (index, onClick) => event => {
+      onClick?.(event);
+      onImageClick?.(index);
+    };
+  }, [onImageClick]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      theme
+    }), {
+      [`${CLASSNAME}--has-1-thumbnail`]: thumbnails?.length === 1,
+      [`${CLASSNAME}--has-2-thumbnails`]: thumbnails?.length === 2,
+      [`${CLASSNAME}--has-3-thumbnails`]: thumbnails?.length === 3,
+      [`${CLASSNAME}--has-4-thumbnails`]: thumbnails?.length >= 4
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__wrapper`
+  }, take(thumbnails, 4).map((thumbnail, index) => {
+    const {
+      image,
+      onClick,
+      align,
+      ...thumbnailProps
+    } = thumbnail;
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: `${CLASSNAME}__thumbnail`
+    }, /*#__PURE__*/React.createElement(Thumbnail, _extends({}, thumbnailProps, {
+      align: align || Alignment.left,
+      image: image,
+      theme: theme,
+      aspectRatio: AspectRatio.free,
+      fillHeight: true,
+      onClick: handleImageClick?.(index, onClick) || onClick
+    })), thumbnails.length > 4 && index === 3 && /*#__PURE__*/React.createElement("div", {
+      className: `${CLASSNAME}__overlay`
+    }, /*#__PURE__*/React.createElement("span", null, "+", thumbnails.length - 4)));
+  })));
+});
+Mosaic.displayName = COMPONENT_NAME;
+Mosaic.className = CLASSNAME;
+Mosaic.defaultProps = DEFAULT_PROPS;
+
+export { Mosaic };
+//# sourceMappingURL=b925072d.js.map