@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n    useEffect,\n    useState,\n    forwardRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type PropsWithChildren,\n    type HTMLAttributes,\n} from 'react';\nimport { omit } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport { isDesktop } from '../../utils/deviceUtils';\nimport { PLACEMENT } from '../../values/Placement';\nimport { TEXT_ALIGNMENT } from '../../values/TextAlignment';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport type { RefComponent } from '../../utils/RefComponent';\n\nconst STYLE_MAP = {\n    STYLE_DEFAULT: 'default',\n    STYLE_ONBOARDING: 'onboarding',\n} as const;\n\nconst TEXT_ALIGNMENT_MAP = {\n    TEXT_ALIGNMENT_LEFT: TEXT_ALIGNMENT.LEFT,\n    TEXT_ALIGNMENT_CENTER: TEXT_ALIGNMENT.CENTER,\n    TEXT_ALIGNMENT_RIGHT: TEXT_ALIGNMENT.RIGHT,\n} as const;\n\nexport type TooltipWidth = 'auto' | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;\n\nexport type TooltipProps = {\n    /**\n     * An HTML id attribute, necessary for accessibility.\n     */\n    id?: string;\n\n    /**\n     * Sets the direction the Tooltip is positioned towards. This is generally provided by the\n     * OverlayTrigger component positioning the tooltip.\n     *\n     * @default 'bottom'\n     */\n    placement?: ObjectValues<typeof PLACEMENT>;\n\n    /**\n     * Defines the position of the text content.\n     *\n     * Possible values are:\n     *\n     * - `'center'`\n     * - `'left'`\n     * - `'right'`\n     *\n     * @default 'center'\n     */\n    textAlignment?: ObjectValues<typeof TEXT_ALIGNMENT>;\n\n    /**\n     * Defines the look of the tooltip.\n     * Possible values are: `default` and `onboarding`\n     *\n     * @default 'default'\n     */\n    tooltipStyle?: ObjectValues<typeof STYLE_MAP>;\n\n    /**\n     * Defines the width of 'the tooltip.\n     * Possible values are:\n     *\n     * - `'auto'`\n     * - `100`\n     * - `150`\n     * - `200`\n     * - `250`\n     * - `300`\n     * - `350`\n     * - `400`\n     * - `450`\n     * - `500`\n     */\n    width?: TooltipWidth;\n\n    /**\n     * Render Tooltips on mobile devices.\n     *\n     * @default false\n     */\n    allowOnTouch?: boolean;\n\n    /**\n     * Additional props assigned to the arrow element. Internally used.\n     */\n    arrowProps?: Record<string, unknown>;\n\n    /**\n     * Additional style properties assigned to the wrapper element.\n     */\n    style?: CSSProperties;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Additional classes to be set on the inner element.\n     */\n    innerClassName?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'style' | 'className'>;\n\nexport type TooltipType = RefComponent<PropsWithChildren<TooltipProps>> &\n    typeof STYLE_MAP &\n    typeof PLACEMENT &\n    typeof TEXT_ALIGNMENT_MAP;\n\nconst Tooltip = forwardRef((props: PropsWithChildren<TooltipProps>, ref: ForwardedRef<HTMLDivElement>) => {\n    const {\n        allowOnTouch = false,\n        arrowProps,\n        children,\n        className = '',\n        innerClassName = '',\n        placement = 'bottom',\n        style,\n        textAlignment = 'center',\n        tooltipStyle = 'default',\n        width = 'auto',\n        ...remainingProps\n    } = omit(props, ['popper', 'positionLeft', 'positionTop']);\n\n    // Mount the component but don't show it yet via CSS.\n    // After it is mounted, we set the visibility class to use CSS animation\n    const [isMounted, setIsMounted] = useState(false);\n    useEffect(() => setIsMounted(true), []);\n\n    if (!isDesktop() && !allowOnTouch) {\n        // Workaround: we have to return a DOM node as otherwise the\n        // react-transition library would throw an error on mobile\n        // when triggering a browser reflow and accessing the node directly.\n        return <span className='display-none' />;\n    }\n\n    const wrapperClasses = classNames(\n        'tooltip',\n        tooltipStyle && `tooltip-${tooltipStyle}`,\n        placement,\n        'fade',\n        isMounted && 'show',\n        className\n    );\n\n    const innerClasses = classNames(\n        'tooltip-inner',\n        textAlignment && `text-${textAlignment}`,\n        width && `width-${width}`,\n        innerClassName && innerClassName\n    );\n\n    /* eslint-disable react/no-unknown-property */\n    return (\n        <div\n            {...remainingProps}\n            role='tooltip'\n            // x-placement is used by the css to define how to position the arrow.\n            x-placement={placement}\n            ref={ref}\n            className={wrapperClasses}\n            style={{ ...style }}\n            data-offset={20}\n        >\n            <div className='tooltip-arrow' {...arrowProps} />\n            <div className={innerClasses}>{children}</div>\n        </div>\n    );\n}) as TooltipType;\n\n// statics\nObject.assign(Tooltip, STYLE_MAP);\nObject.assign(Tooltip, PLACEMENT); // is keyed as-is\nObject.assign(Tooltip, TEXT_ALIGNMENT_MAP);\n\nexport default Tooltip;\n"],"names":["STYLE_MAP","TEXT_ALIGNMENT_MAP","TEXT_ALIGNMENT","Tooltip","forwardRef","props","ref","allowOnTouch","arrowProps","children","className","innerClassName","placement","style","textAlignment","tooltipStyle","width","remainingProps","omit","isMounted","setIsMounted","useState","useEffect","isDesktop","jsx","wrapperClasses","classNames","innerClasses","jsxs","PLACEMENT"],"mappings":";;;;;;;AAkBA,MAAMA,IAAY;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AACtB,GAEMC,IAAqB;AAAA,EACvB,qBAAqBC,EAAe;AAAA,EACpC,uBAAuBA,EAAe;AAAA,EACtC,sBAAsBA,EAAe;AACzC,GAyFMC,IAAUC,EAAW,CAACC,GAAwCC,MAAsC;AACtG,QAAM;AAAA,IACF,cAAAC,IAAe;AAAA,IACf,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,cAAAC,IAAe;AAAA,IACf,OAAAC,IAAQ;AAAA,IACR,GAAGC;AAAA,EAAA,IACHC,EAAKb,GAAO,CAAC,UAAU,gBAAgB,aAAa,CAAC,GAInD,CAACc,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAGhD,MAFAC,EAAU,MAAMF,EAAa,EAAI,GAAG,CAAA,CAAE,GAElC,CAACG,OAAe,CAAChB;AAIjB,WAAO,gBAAAiB,EAAC,QAAA,EAAK,WAAU,eAAA,CAAe;AAG1C,QAAMC,IAAiBC;AAAA,IACnB;AAAA,IACAX,KAAgB,WAAWA,CAAY;AAAA,IACvCH;AAAA,IACA;AAAA,IACAO,KAAa;AAAA,IACbT;AAAA,EAAA,GAGEiB,IAAeD;AAAA,IACjB;AAAA,IACAZ,KAAiB,QAAQA,CAAa;AAAA,IACtCE,KAAS,SAASA,CAAK;AAAA,IACvBL,KAAkBA;AAAA,EAAA;AAItB,SACI,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGX;AAAA,MACJ,MAAK;AAAA,MAEL,eAAaL;AAAA,MACb,KAAAN;AAAA,MACA,WAAWmB;AAAA,MACX,OAAO,EAAE,GAAGZ,EAAA;AAAA,MACZ,eAAa;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAW,EAAC,OAAA,EAAI,WAAU,iBAAiB,GAAGhB,EAAA,CAAY;AAAA,QAC/C,gBAAAgB,EAAC,OAAA,EAAI,WAAWG,GAAe,UAAAlB,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD,CAAC;AAGD,OAAO,OAAON,GAASH,CAAS;AAChC,OAAO,OAAOG,GAAS0B,CAAS;AAChC,OAAO,OAAO1B,GAASF,CAAkB;"}
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n    useEffect,\n    useState,\n    forwardRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type PropsWithChildren,\n    type HTMLAttributes,\n} from 'react';\n\nimport classNames from '../../utils/classNames';\nimport { isDesktop } from '../../utils/deviceUtils';\nimport { PLACEMENT, type Placement } from '../../values/Placement';\nimport { TEXT_ALIGNMENT } from '../../values/TextAlignment';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport type { RefComponent } from '../../utils/RefComponent';\n\nconst STYLE_MAP = {\n    STYLE_DEFAULT: 'default',\n    STYLE_ONBOARDING: 'onboarding',\n} as const;\n\nconst TEXT_ALIGNMENT_MAP = {\n    TEXT_ALIGNMENT_LEFT: TEXT_ALIGNMENT.LEFT,\n    TEXT_ALIGNMENT_CENTER: TEXT_ALIGNMENT.CENTER,\n    TEXT_ALIGNMENT_RIGHT: TEXT_ALIGNMENT.RIGHT,\n} as const;\n\nexport type TooltipWidth = 'auto' | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;\n\nexport type TooltipProps = {\n    /**\n     * An HTML id attribute, necessary for accessibility.\n     */\n    id?: string;\n\n    /**\n     * Sets the direction the Tooltip is positioned towards. This is generally provided by the\n     * OverlayTrigger component positioning the tooltip.\n     *\n     * @default 'bottom'\n     */\n    placement?: Placement;\n\n    /**\n     * Defines the position of the text content.\n     *\n     * Possible values are:\n     *\n     * - `'center'`\n     * - `'left'`\n     * - `'right'`\n     *\n     * @default 'center'\n     */\n    textAlignment?: ObjectValues<typeof TEXT_ALIGNMENT>;\n\n    /**\n     * Defines the look of the tooltip.\n     * Possible values are: `default` and `onboarding`\n     *\n     * @default 'default'\n     */\n    tooltipStyle?: ObjectValues<typeof STYLE_MAP>;\n\n    /**\n     * Defines the width of 'the tooltip.\n     * Possible values are:\n     *\n     * - `'auto'`\n     * - `100`\n     * - `150`\n     * - `200`\n     * - `250`\n     * - `300`\n     * - `350`\n     * - `400`\n     * - `450`\n     * - `500`\n     */\n    width?: TooltipWidth;\n\n    /**\n     * Render Tooltips on mobile devices.\n     *\n     * @default false\n     */\n    allowOnTouch?: boolean;\n\n    /**\n     * Additional props assigned to the arrow element. Internally used.\n     */\n    arrowProps?: Record<string, unknown>;\n\n    /**\n     * Additional style properties assigned to the wrapper element.\n     */\n    style?: CSSProperties;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Additional classes to be set on the inner element.\n     */\n    innerClassName?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'style' | 'className'>;\n\nexport type TooltipType = RefComponent<PropsWithChildren<TooltipProps>> &\n    typeof STYLE_MAP &\n    typeof PLACEMENT &\n    typeof TEXT_ALIGNMENT_MAP;\n\nconst Tooltip = forwardRef((props: PropsWithChildren<TooltipProps>, ref: ForwardedRef<HTMLDivElement>) => {\n    const {\n        allowOnTouch = false,\n        arrowProps,\n        children,\n        className = '',\n        innerClassName = '',\n        placement = 'bottom',\n        style,\n        textAlignment = 'center',\n        tooltipStyle = 'default',\n        width = 'auto',\n        ...remainingProps\n    } = props;\n\n    // Mount the component but don't show it yet via CSS.\n    // After it is mounted, we set the visibility class to use CSS animation\n    const [isMounted, setIsMounted] = useState(false);\n    useEffect(() => setIsMounted(true), []);\n\n    if (!isDesktop() && !allowOnTouch) {\n        // Workaround: we have to return a DOM node as otherwise the\n        // react-transition library would throw an error on mobile\n        // when triggering a browser reflow and accessing the node directly.\n        return <span className='display-none' />;\n    }\n\n    const wrapperClasses = classNames(\n        'tooltip',\n        tooltipStyle && `tooltip-${tooltipStyle}`,\n        placement,\n        'fade',\n        isMounted && 'show',\n        className\n    );\n\n    const innerClasses = classNames(\n        'tooltip-inner',\n        textAlignment && `text-${textAlignment}`,\n        width && `width-${width}`,\n        innerClassName && innerClassName\n    );\n\n    const nativePopoverProps = { popover: 'manual' } as HTMLAttributes<HTMLDivElement>;\n\n    return (\n        <div\n            data-overlay-arrow-placement={placement}\n            {...remainingProps}\n            {...nativePopoverProps}\n            role='tooltip'\n            ref={ref}\n            className={wrapperClasses}\n            style={{ ...style }}\n        >\n            <div className='tooltip-arrow' {...arrowProps} />\n            <div className={innerClasses}>{children}</div>\n        </div>\n    );\n}) as TooltipType;\n\n// statics\nObject.assign(Tooltip, STYLE_MAP);\nObject.assign(Tooltip, PLACEMENT);\nObject.assign(Tooltip, TEXT_ALIGNMENT_MAP);\n\nexport default Tooltip;\n"],"mappings":";;;;;;;AAiBA,IAAM,IAAY;CACd,eAAe;CACf,kBAAkB;AACtB,GAEM,IAAqB;CACvB,qBAAqB,EAAe;CACpC,uBAAuB,EAAe;CACtC,sBAAsB,EAAe;AACzC,GAyFM,IAAU,GAAY,GAAwC,MAAsC;CACtG,IAAM,EACF,kBAAe,IACf,eACA,aACA,eAAY,IACZ,oBAAiB,IACjB,eAAY,UACZ,UACA,mBAAgB,UAChB,kBAAe,WACf,WAAQ,QACR,GAAG,MACH,GAIE,CAAC,GAAW,KAAgB,EAAS,EAAK;CAGhD,IAFA,QAAgB,EAAa,EAAI,GAAG,CAAC,CAAC,GAElC,CAAC,EAAU,KAAK,CAAC,GAIjB,OAAO,kBAAC,QAAD,EAAM,WAAU,eAAgB,CAAA;CAG3C,IAAM,IAAiB,EACnB,WACA,KAAgB,WAAW,KAC3B,GACA,QACA,KAAa,QACb,CACJ,GAEM,IAAe,EACjB,iBACA,KAAiB,QAAQ,KACzB,KAAS,SAAS,KAClB,KAAkB,CACtB,GAEM,IAAqB,EAAE,SAAS,SAAS;CAE/C,OACI,kBAAC,OAAD;EACI,gCAA8B;EAC9B,GAAI;EACJ,GAAI;EACJ,MAAK;EACA;EACL,WAAW;EACX,OAAO,EAAE,GAAG,EAAM;YAPtB,CASI,kBAAC,OAAD;GAAK,WAAU;GAAgB,GAAI;EAAa,CAAA,GAChD,kBAAC,OAAD;GAAK,WAAW;GAAe;EAAc,CAAA,CAC5C;;AAEb,CAAC;AAGD,OAAO,OAAO,GAAS,CAAS,GAChC,OAAO,OAAO,GAAS,CAAS,GAChC,OAAO,OAAO,GAAS,CAAkB"}

package/components/tracker/Tracker.js

@@ -1,54 +1,47 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useMemo as T } from "react";
-import C from "../../utils/classNames.js";
-import H from "../../hooks/useResizeObserver.js";
-import A from "./TrackerBlock.js";
-const E = 5, O = 10, F = 2, G = 30, R = (d) => {
-  const {
-    data: t,
-    defaultBackgroundColor: k = "bg-success",
-    hoverEffect: p = !1,
-    minBlockWidth: M = E,
-    maxBlockWidth: b = O,
-    blockGap: B = F,
-    blockHeight: W = G,
-    collapseOnMinBlockWidth: n = !0,
-    collapseShowLastBlocks: r = !1,
-    className: f
-  } = d, [g, I, { inlineSize: h }] = H(), c = Math.max(1, M), l = Math.max(c, b), a = Math.max(0, B), x = Math.max(1, W), { visibleData: u, blockWidth: _ } = T(() => {
-    if (t.length === 0)
-      return { visibleData: t, blockWidth: l };
-    const e = h ?? t.length * l + (t.length - 1) * a, s = Math.max(
-      1,
-      Math.floor((e + a) / (c + a))
-    ), o = n ? Math.min(t.length, s) : t.length, i = r ? t.slice(-o) : t.slice(0, o), D = Math.max(0, e - (i.length - 1) * a) / i.length, L = Math.max(c, Math.min(l, D));
-    return { visibleData: i, blockWidth: L };
-  }, [
-    t,
-    h,
-    c,
-    l,
-    a,
-    n,
-    r
-  ]), v = C("tracker", f);
-  return /* @__PURE__ */ m("div", { ref: g, className: v, style: { gap: `${a}px` }, children: u.map((e, s) => {
-    const o = e.id ?? `${s}`;
-    return /* @__PURE__ */ m(
-      A,
-      {
-        id: o,
-        block: e,
-        defaultBackgroundColor: k,
-        hoverEffect: p,
-        blockWidth: _,
-        blockHeight: x
-      },
-      o
-    );
-  }) });
+import e from "../../hooks/useResizeObserver.js";
+import t from "../../utils/classNames.js";
+import n from "./TrackerBlock.js";
+import { useMemo as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/tracker/Tracker.tsx
+var a = 5, o = 10, s = 2, c = 30, l = (l) => {
+	let { data: u, defaultBackgroundColor: d = "bg-success", hoverEffect: f = !1, minBlockWidth: p = a, maxBlockWidth: m = o, blockGap: h = s, blockHeight: g = c, collapseOnMinBlockWidth: _ = !0, collapseShowLastBlocks: v = !1, className: y } = l, [b, x, { inlineSize: S }] = e(), C = Math.max(1, p), w = Math.max(C, m), T = Math.max(0, h), E = Math.max(1, g), { visibleData: D, blockWidth: O } = r(() => {
+		if (u.length === 0) return {
+			visibleData: u,
+			blockWidth: w
+		};
+		let e = S ?? u.length * w + (u.length - 1) * T, t = Math.max(1, Math.floor((e + T) / (C + T))), n = _ ? Math.min(u.length, t) : u.length, r = v ? u.slice(-n) : u.slice(0, n), i = Math.max(0, e - (r.length - 1) * T) / r.length;
+		return {
+			visibleData: r,
+			blockWidth: Math.max(C, Math.min(w, i))
+		};
+	}, [
+		u,
+		S,
+		C,
+		w,
+		T,
+		_,
+		v
+	]);
+	return /* @__PURE__ */ i("div", {
+		ref: b,
+		className: t("tracker", y),
+		style: { gap: `${T}px` },
+		children: D.map((e, t) => {
+			let r = e.id ?? `${t}`;
+			return /* @__PURE__ */ i(n, {
+				id: r,
+				block: e,
+				defaultBackgroundColor: d,
+				hoverEffect: f,
+				blockWidth: O,
+				blockHeight: E
+			}, r);
+		})
+	});
 };
-export {
-  R as default
-};
-//# sourceMappingURL=Tracker.js.map
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=Tracker.js.map

package/components/tracker/Tracker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tracker.js","sources":["../../../src/components/tracker/Tracker.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport useResizeObserver from '../../hooks/useResizeObserver';\nimport TrackerBlockItem from './TrackerBlock';\n\nconst DEFAULT_MIN_BLOCK_WIDTH = 5;\nconst DEFAULT_MAX_BLOCK_WIDTH = 10;\nconst DEFAULT_BLOCK_GAP = 2;\nconst DEFAULT_BLOCK_HEIGHT = 30;\n\nexport type TrackerBlock = {\n    /**\n     * Unique identifier for a block.\n     */\n    id?: string;\n\n    /**\n     * Defines the block color by setting a UIKIT bg-<name> class.\n     */\n    color?: string;\n\n    /**\n     * Tooltip content shown on hover.\n     */\n    tooltip?: ReactNode;\n\n    /**\n     * Called when clicking the block.\n     */\n    onClick?: (id: string) => void;\n\n    /**\n     * Additional class names for the block.\n     */\n    className?: string;\n};\n\nexport type TrackerProps = {\n    /**\n     * Array of block objects.\n     */\n    data: TrackerBlock[];\n\n    /**\n     * Background color of a block, when no color is provided in `data`.\n     *\n     * @default 'bg-success'\n     */\n    defaultBackgroundColor?: string;\n\n    /**\n     * Add a hover effect to the tracker blocks.\n     *\n     * @default false\n     */\n    hoverEffect?: boolean;\n\n    /**\n     * Minimum width per tracker block in pixels.\n     *\n     * The tracker compresses blocks automatically down to this value.\n     *\n     * @default 5\n     */\n    minBlockWidth?: number;\n\n    /**\n     * Maximum width per tracker block in pixels.\n     *\n     * @default 10\n     */\n    maxBlockWidth?: number;\n\n    /**\n     * Gap between tracker blocks in pixels.\n     *\n     * @default 2\n     */\n    blockGap?: number;\n\n    /**\n     * Height per tracker block in pixels.\n     *\n     * @default 30\n     */\n    blockHeight?: number;\n\n    /**\n     * When enabled, the tracker shows fewer blocks once `minBlockWidth` is reached.\n     *\n     * @default true\n     */\n    collapseOnMinBlockWidth?: boolean;\n\n    /**\n     * Show the last blocks instead of the first blocks when collapsing due to width.\n     *\n     * @default false\n     */\n    collapseShowLastBlocks?: boolean;\n\n    /**\n     * Additional class names on the wrapper element.\n     */\n    className?: string;\n};\n\nconst Tracker = (props: TrackerProps) => {\n    const {\n        data,\n        defaultBackgroundColor = 'bg-success',\n        hoverEffect = false,\n        minBlockWidth = DEFAULT_MIN_BLOCK_WIDTH,\n        maxBlockWidth = DEFAULT_MAX_BLOCK_WIDTH,\n        blockGap = DEFAULT_BLOCK_GAP,\n        blockHeight = DEFAULT_BLOCK_HEIGHT,\n        collapseOnMinBlockWidth = true,\n        collapseShowLastBlocks = false,\n        className,\n    } = props;\n    const [trackerRef, _, { inlineSize }] = useResizeObserver<HTMLDivElement>();\n\n    const clampedMinBlockWidth = Math.max(1, minBlockWidth);\n    const clampedMaxBlockWidth = Math.max(clampedMinBlockWidth, maxBlockWidth);\n    const clampedBlockGap = Math.max(0, blockGap);\n    const clampedBlockHeight = Math.max(1, blockHeight);\n\n    const { visibleData, blockWidth } = useMemo(() => {\n        if (data.length === 0) {\n            return { visibleData: data, blockWidth: clampedMaxBlockWidth };\n        }\n\n        const containerWidth = inlineSize ?? data.length * clampedMaxBlockWidth + (data.length - 1) * clampedBlockGap;\n        const maxVisibleWithMinWidth = Math.max(\n            1,\n            Math.floor((containerWidth + clampedBlockGap) / (clampedMinBlockWidth + clampedBlockGap))\n        );\n        const visibleBlocksCount = collapseOnMinBlockWidth\n            ? Math.min(data.length, maxVisibleWithMinWidth)\n            : data.length;\n        const visibleData = collapseShowLastBlocks\n            ? data.slice(-visibleBlocksCount)\n            : data.slice(0, visibleBlocksCount);\n\n        const availableWidth = Math.max(0, containerWidth - (visibleData.length - 1) * clampedBlockGap);\n        const widthPerBlock = availableWidth / visibleData.length;\n        const blockWidth = Math.max(clampedMinBlockWidth, Math.min(clampedMaxBlockWidth, widthPerBlock));\n\n        return { visibleData, blockWidth };\n    }, [\n        data,\n        inlineSize,\n        clampedMinBlockWidth,\n        clampedMaxBlockWidth,\n        clampedBlockGap,\n        collapseOnMinBlockWidth,\n        collapseShowLastBlocks,\n    ]);\n\n    const wrapperClasses = classNames('tracker', className);\n\n    return (\n        <div ref={trackerRef} className={wrapperClasses} style={{ gap: `${clampedBlockGap}px` }}>\n            {visibleData.map((block, index) => {\n                const id = block.id ?? `${index}`;\n                return (\n                    <TrackerBlockItem\n                        key={id}\n                        id={id}\n                        block={block}\n                        defaultBackgroundColor={defaultBackgroundColor}\n                        hoverEffect={hoverEffect}\n                        blockWidth={blockWidth}\n                        blockHeight={clampedBlockHeight}\n                    />\n                );\n            })}\n        </div>\n    );\n};\n\nexport default Tracker;\n"],"names":["DEFAULT_MIN_BLOCK_WIDTH","DEFAULT_MAX_BLOCK_WIDTH","DEFAULT_BLOCK_GAP","DEFAULT_BLOCK_HEIGHT","Tracker","props","data","defaultBackgroundColor","hoverEffect","minBlockWidth","maxBlockWidth","blockGap","blockHeight","collapseOnMinBlockWidth","collapseShowLastBlocks","className","trackerRef","_","inlineSize","useResizeObserver","clampedMinBlockWidth","clampedMaxBlockWidth","clampedBlockGap","clampedBlockHeight","visibleData","blockWidth","useMemo","containerWidth","maxVisibleWithMinWidth","visibleBlocksCount","widthPerBlock","wrapperClasses","classNames","block","index","id","jsx","TrackerBlockItem"],"mappings":";;;;;AAMA,MAAMA,IAA0B,GAC1BC,IAA0B,IAC1BC,IAAoB,GACpBC,IAAuB,IAmGvBC,IAAU,CAACC,MAAwB;AACrC,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,wBAAAC,IAAyB;AAAA,IACzB,aAAAC,IAAc;AAAA,IACd,eAAAC,IAAgBT;AAAA,IAChB,eAAAU,IAAgBT;AAAA,IAChB,UAAAU,IAAWT;AAAA,IACX,aAAAU,IAAcT;AAAA,IACd,yBAAAU,IAA0B;AAAA,IAC1B,wBAAAC,IAAyB;AAAA,IACzB,WAAAC;AAAA,EAAA,IACAV,GACE,CAACW,GAAYC,GAAG,EAAE,YAAAC,EAAA,CAAY,IAAIC,EAAA,GAElCC,IAAuB,KAAK,IAAI,GAAGX,CAAa,GAChDY,IAAuB,KAAK,IAAID,GAAsBV,CAAa,GACnEY,IAAkB,KAAK,IAAI,GAAGX,CAAQ,GACtCY,IAAqB,KAAK,IAAI,GAAGX,CAAW,GAE5C,EAAE,aAAAY,GAAa,YAAAC,EAAA,IAAeC,EAAQ,MAAM;AAC9C,QAAIpB,EAAK,WAAW;AAChB,aAAO,EAAE,aAAaA,GAAM,YAAYe,EAAA;AAG5C,UAAMM,IAAiBT,KAAcZ,EAAK,SAASe,KAAwBf,EAAK,SAAS,KAAKgB,GACxFM,IAAyB,KAAK;AAAA,MAChC;AAAA,MACA,KAAK,OAAOD,IAAiBL,MAAoBF,IAAuBE,EAAgB;AAAA,IAAA,GAEtFO,IAAqBhB,IACrB,KAAK,IAAIP,EAAK,QAAQsB,CAAsB,IAC5CtB,EAAK,QACLkB,IAAcV,IACdR,EAAK,MAAM,CAACuB,CAAkB,IAC9BvB,EAAK,MAAM,GAAGuB,CAAkB,GAGhCC,IADiB,KAAK,IAAI,GAAGH,KAAkBH,EAAY,SAAS,KAAKF,CAAe,IACvDE,EAAY,QAC7CC,IAAa,KAAK,IAAIL,GAAsB,KAAK,IAAIC,GAAsBS,CAAa,CAAC;AAE/F,WAAO,EAAE,aAAAN,GAAa,YAAAC,EAAAA;AAAAA,EAC1B,GAAG;AAAA,IACCnB;AAAA,IACAY;AAAA,IACAE;AAAA,IACAC;AAAA,IACAC;AAAA,IACAT;AAAA,IACAC;AAAA,EAAA,CACH,GAEKiB,IAAiBC,EAAW,WAAWjB,CAAS;AAEtD,2BACK,OAAA,EAAI,KAAKC,GAAY,WAAWe,GAAgB,OAAO,EAAE,KAAK,GAAGT,CAAe,QAC5E,YAAY,IAAI,CAACW,GAAOC,MAAU;AAC/B,UAAMC,IAAKF,EAAM,MAAM,GAAGC,CAAK;AAC/B,WACI,gBAAAE;AAAA,MAACC;AAAAA,MAAA;AAAA,QAEG,IAAAF;AAAA,QACA,OAAAF;AAAA,QACA,wBAAA1B;AAAA,QACA,aAAAC;AAAA,QACA,YAAAiB;AAAA,QACA,aAAaF;AAAA,MAAA;AAAA,MANRY;AAAA,IAAA;AAAA,EASjB,CAAC,EAAA,CACL;AAER;"}
+{"version":3,"file":"Tracker.js","names":[],"sources":["../../../src/components/tracker/Tracker.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport useResizeObserver from '../../hooks/useResizeObserver';\nimport TrackerBlockItem from './TrackerBlock';\n\nconst DEFAULT_MIN_BLOCK_WIDTH = 5;\nconst DEFAULT_MAX_BLOCK_WIDTH = 10;\nconst DEFAULT_BLOCK_GAP = 2;\nconst DEFAULT_BLOCK_HEIGHT = 30;\n\nexport type TrackerBlock = {\n    /**\n     * Unique identifier for a block.\n     */\n    id?: string;\n\n    /**\n     * Defines the block color by setting a UIKIT bg-<name> class.\n     */\n    color?: string;\n\n    /**\n     * Tooltip content shown on hover.\n     */\n    tooltip?: ReactNode;\n\n    /**\n     * Called when clicking the block.\n     */\n    onClick?: (id: string) => void;\n\n    /**\n     * Additional class names for the block.\n     */\n    className?: string;\n};\n\nexport type TrackerProps = {\n    /**\n     * Array of block objects.\n     */\n    data: TrackerBlock[];\n\n    /**\n     * Background color of a block, when no color is provided in `data`.\n     *\n     * @default 'bg-success'\n     */\n    defaultBackgroundColor?: string;\n\n    /**\n     * Add a hover effect to the tracker blocks.\n     *\n     * @default false\n     */\n    hoverEffect?: boolean;\n\n    /**\n     * Minimum width per tracker block in pixels.\n     *\n     * The tracker compresses blocks automatically down to this value.\n     *\n     * @default 5\n     */\n    minBlockWidth?: number;\n\n    /**\n     * Maximum width per tracker block in pixels.\n     *\n     * @default 10\n     */\n    maxBlockWidth?: number;\n\n    /**\n     * Gap between tracker blocks in pixels.\n     *\n     * @default 2\n     */\n    blockGap?: number;\n\n    /**\n     * Height per tracker block in pixels.\n     *\n     * @default 30\n     */\n    blockHeight?: number;\n\n    /**\n     * When enabled, the tracker shows fewer blocks once `minBlockWidth` is reached.\n     *\n     * @default true\n     */\n    collapseOnMinBlockWidth?: boolean;\n\n    /**\n     * Show the last blocks instead of the first blocks when collapsing due to width.\n     *\n     * @default false\n     */\n    collapseShowLastBlocks?: boolean;\n\n    /**\n     * Additional class names on the wrapper element.\n     */\n    className?: string;\n};\n\nconst Tracker = (props: TrackerProps) => {\n    const {\n        data,\n        defaultBackgroundColor = 'bg-success',\n        hoverEffect = false,\n        minBlockWidth = DEFAULT_MIN_BLOCK_WIDTH,\n        maxBlockWidth = DEFAULT_MAX_BLOCK_WIDTH,\n        blockGap = DEFAULT_BLOCK_GAP,\n        blockHeight = DEFAULT_BLOCK_HEIGHT,\n        collapseOnMinBlockWidth = true,\n        collapseShowLastBlocks = false,\n        className,\n    } = props;\n    const [trackerRef, _, { inlineSize }] = useResizeObserver<HTMLDivElement>();\n\n    const clampedMinBlockWidth = Math.max(1, minBlockWidth);\n    const clampedMaxBlockWidth = Math.max(clampedMinBlockWidth, maxBlockWidth);\n    const clampedBlockGap = Math.max(0, blockGap);\n    const clampedBlockHeight = Math.max(1, blockHeight);\n\n    const { visibleData, blockWidth } = useMemo(() => {\n        if (data.length === 0) {\n            return { visibleData: data, blockWidth: clampedMaxBlockWidth };\n        }\n\n        const containerWidth = inlineSize ?? data.length * clampedMaxBlockWidth + (data.length - 1) * clampedBlockGap;\n        const maxVisibleWithMinWidth = Math.max(\n            1,\n            Math.floor((containerWidth + clampedBlockGap) / (clampedMinBlockWidth + clampedBlockGap))\n        );\n        const visibleBlocksCount = collapseOnMinBlockWidth\n            ? Math.min(data.length, maxVisibleWithMinWidth)\n            : data.length;\n        const visibleData = collapseShowLastBlocks\n            ? data.slice(-visibleBlocksCount)\n            : data.slice(0, visibleBlocksCount);\n\n        const availableWidth = Math.max(0, containerWidth - (visibleData.length - 1) * clampedBlockGap);\n        const widthPerBlock = availableWidth / visibleData.length;\n        const blockWidth = Math.max(clampedMinBlockWidth, Math.min(clampedMaxBlockWidth, widthPerBlock));\n\n        return { visibleData, blockWidth };\n    }, [\n        data,\n        inlineSize,\n        clampedMinBlockWidth,\n        clampedMaxBlockWidth,\n        clampedBlockGap,\n        collapseOnMinBlockWidth,\n        collapseShowLastBlocks,\n    ]);\n\n    const wrapperClasses = classNames('tracker', className);\n\n    return (\n        <div ref={trackerRef} className={wrapperClasses} style={{ gap: `${clampedBlockGap}px` }}>\n            {visibleData.map((block, index) => {\n                const id = block.id ?? `${index}`;\n                return (\n                    <TrackerBlockItem\n                        key={id}\n                        id={id}\n                        block={block}\n                        defaultBackgroundColor={defaultBackgroundColor}\n                        hoverEffect={hoverEffect}\n                        blockWidth={blockWidth}\n                        blockHeight={clampedBlockHeight}\n                    />\n                );\n            })}\n        </div>\n    );\n};\n\nexport default Tracker;\n"],"mappings":";;;;;;AAMA,IAAM,IAA0B,GAC1B,IAA0B,IAC1B,IAAoB,GACpB,IAAuB,IAmGvB,KAAW,MAAwB;CACrC,IAAM,EACF,SACA,4BAAyB,cACzB,iBAAc,IACd,mBAAgB,GAChB,mBAAgB,GAChB,cAAW,GACX,iBAAc,GACd,6BAA0B,IAC1B,4BAAyB,IACzB,iBACA,GACE,CAAC,GAAY,GAAG,EAAE,mBAAgB,EAAkC,GAEpE,IAAuB,KAAK,IAAI,GAAG,CAAa,GAChD,IAAuB,KAAK,IAAI,GAAsB,CAAa,GACnE,IAAkB,KAAK,IAAI,GAAG,CAAQ,GACtC,IAAqB,KAAK,IAAI,GAAG,CAAW,GAE5C,EAAE,gBAAa,kBAAe,QAAc;EAC9C,IAAI,EAAK,WAAW,GAChB,OAAO;GAAE,aAAa;GAAM,YAAY;EAAqB;EAGjE,IAAM,IAAiB,KAAc,EAAK,SAAS,KAAwB,EAAK,SAAS,KAAK,GACxF,IAAyB,KAAK,IAChC,GACA,KAAK,OAAO,IAAiB,MAAoB,IAAuB,EAAgB,CAC5F,GACM,IAAqB,IACrB,KAAK,IAAI,EAAK,QAAQ,CAAsB,IAC5C,EAAK,QACL,IAAc,IACd,EAAK,MAAM,CAAC,CAAkB,IAC9B,EAAK,MAAM,GAAG,CAAkB,GAGhC,IADiB,KAAK,IAAI,GAAG,KAAkB,EAAY,SAAS,KAAK,CACzD,IAAiB,EAAY;EAGnD,OAAO;GAAE;GAAa,YAFH,KAAK,IAAI,GAAsB,KAAK,IAAI,GAAsB,CAAa,CAExE;EAAW;CACrC,GAAG;EACC;EACA;EACA;EACA;EACA;EACA;EACA;CACJ,CAAC;CAID,OACI,kBAAC,OAAD;EAAK,KAAK;EAAY,WAHH,EAAW,WAAW,CAGR;EAAgB,OAAO,EAAE,KAAK,GAAG,EAAgB,IAAI;YACjF,EAAY,KAAK,GAAO,MAAU;GAC/B,IAAM,IAAK,EAAM,MAAM,GAAG;GAC1B,OACI,kBAAC,GAAD;IAEQ;IACG;IACiB;IACX;IACD;IACZ,aAAa;GAChB,GAPQ,CAOR;EAET,CAAC;CACA,CAAA;AAEb"}

package/components/tracker/TrackerBlock.js

@@ -1,34 +1,35 @@
-import { jsx as c } from "react/jsx-runtime";
-import d from "../../utils/classNames.js";
-import m from "../tooltip/SimpleTooltip.js";
-const u = (n) => {
-  const { id: e, block: o, defaultBackgroundColor: a, hoverEffect: s, blockWidth: i, blockHeight: k } = n, t = !!o.onClick, p = d(
-    "tracker-block",
-    o.color || a,
-    s && "tracker-block-hover",
-    t && "cursor-pointer",
-    o.className
-  ), r = /* @__PURE__ */ c(
-    "div",
-    {
-      className: p,
-      onClick: () => o.onClick?.(e),
-      onKeyDown: (l) => {
-        t && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), o.onClick?.(e));
-      },
-      role: t ? "button" : void 0,
-      tabIndex: t ? 0 : void 0,
-      "aria-label": typeof o.tooltip == "string" ? o.tooltip : void 0,
-      style: {
-        width: `${i}px`,
-        minWidth: `${i}px`,
-        height: `${k}px`
-      }
-    }
-  );
-  return o.tooltip ? /* @__PURE__ */ c(m, { content: o.tooltip, allowOnTouch: !0, placement: "top", delay: { show: 100, hide: 50 }, children: r }) : r;
+import e from "../../utils/classNames.js";
+import t from "../tooltip/SimpleTooltip.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/tracker/TrackerBlock.tsx
+var r = (r) => {
+	let { id: i, block: a, defaultBackgroundColor: o, hoverEffect: s, blockWidth: c, blockHeight: l } = r, u = !!a.onClick, d = /* @__PURE__ */ n("div", {
+		className: e("tracker-block", a.color || o, s && "tracker-block-hover", u && "cursor-pointer", a.className),
+		onClick: () => a.onClick?.(i),
+		onKeyDown: (e) => {
+			u && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), a.onClick?.(i));
+		},
+		role: u ? "button" : void 0,
+		tabIndex: u ? 0 : void 0,
+		"aria-label": typeof a.tooltip == "string" ? a.tooltip : void 0,
+		style: {
+			width: `${c}px`,
+			minWidth: `${c}px`,
+			height: `${l}px`
+		}
+	});
+	return a.tooltip ? /* @__PURE__ */ n(t, {
+		content: a.tooltip,
+		allowOnTouch: !0,
+		placement: "top",
+		delay: {
+			show: 100,
+			hide: 50
+		},
+		children: d
+	}) : d;
 };
-export {
-  u as default
-};
-//# sourceMappingURL=TrackerBlock.js.map
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=TrackerBlock.js.map

package/components/tracker/TrackerBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrackerBlock.js","sources":["../../../src/components/tracker/TrackerBlock.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\nimport type { TrackerBlock as TrackerBlockData } from './Tracker';\n\ntype TrackerBlockProps = {\n    id: string;\n    block: TrackerBlockData;\n    defaultBackgroundColor: string;\n    hoverEffect: boolean;\n    blockWidth: number;\n    blockHeight: number;\n};\n\nconst TrackerBlock = (props: TrackerBlockProps) => {\n    const { id, block, defaultBackgroundColor, hoverEffect, blockWidth, blockHeight } = props;\n\n    const isClickable = Boolean(block.onClick);\n\n    const blockClasses = classNames(\n        'tracker-block',\n        block.color || defaultBackgroundColor,\n        hoverEffect && 'tracker-block-hover',\n        isClickable && 'cursor-pointer',\n        block.className\n    );\n\n    const blockElement = (\n        <div\n            className={blockClasses}\n            onClick={() => block.onClick?.(id)}\n            onKeyDown={event => {\n                if (!isClickable) {\n                    return;\n                }\n\n                if (event.key === 'Enter' || event.key === ' ') {\n                    event.preventDefault();\n                    block.onClick?.(id);\n                }\n            }}\n            role={isClickable ? 'button' : undefined}\n            tabIndex={isClickable ? 0 : undefined}\n            aria-label={typeof block.tooltip === 'string' ? block.tooltip : undefined}\n            style={{\n                width: `${blockWidth}px`,\n                minWidth: `${blockWidth}px`,\n                height: `${blockHeight}px`,\n            }}\n        />\n    );\n\n    if (!block.tooltip) {\n        return blockElement;\n    }\n\n    return (\n        <SimpleTooltip content={block.tooltip} allowOnTouch placement='top' delay={{ show: 100, hide: 50 }}>\n            {blockElement}\n        </SimpleTooltip>\n    );\n};\n\nexport default TrackerBlock;\n"],"names":["TrackerBlock","props","id","block","defaultBackgroundColor","hoverEffect","blockWidth","blockHeight","isClickable","blockClasses","classNames","blockElement","jsx","event","SimpleTooltip"],"mappings":";;;AAaA,MAAMA,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,IAAAC,GAAI,OAAAC,GAAO,wBAAAC,GAAwB,aAAAC,GAAa,YAAAC,GAAY,aAAAC,MAAgBN,GAE9EO,IAAc,EAAQL,EAAM,SAE5BM,IAAeC;AAAA,IACjB;AAAA,IACAP,EAAM,SAASC;AAAA,IACfC,KAAe;AAAA,IACfG,KAAe;AAAA,IACfL,EAAM;AAAA,EAAA,GAGJQ,IACF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWH;AAAA,MACX,SAAS,MAAMN,EAAM,UAAUD,CAAE;AAAA,MACjC,WAAW,CAAAW,MAAS;AAChB,QAAKL,MAIDK,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvCA,EAAM,eAAA,GACNV,EAAM,UAAUD,CAAE;AAAA,MAE1B;AAAA,MACA,MAAMM,IAAc,WAAW;AAAA,MAC/B,UAAUA,IAAc,IAAI;AAAA,MAC5B,cAAY,OAAOL,EAAM,WAAY,WAAWA,EAAM,UAAU;AAAA,MAChE,OAAO;AAAA,QACH,OAAO,GAAGG,CAAU;AAAA,QACpB,UAAU,GAAGA,CAAU;AAAA,QACvB,QAAQ,GAAGC,CAAW;AAAA,MAAA;AAAA,IAC1B;AAAA,EAAA;AAIR,SAAKJ,EAAM,4BAKNW,GAAA,EAAc,SAASX,EAAM,SAAS,cAAY,IAAC,WAAU,OAAM,OAAO,EAAE,MAAM,KAAK,MAAM,MACzF,UAAAQ,GACL,IANOA;AAQf;"}
+{"version":3,"file":"TrackerBlock.js","names":[],"sources":["../../../src/components/tracker/TrackerBlock.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\nimport type { TrackerBlock as TrackerBlockData } from './Tracker';\n\ntype TrackerBlockProps = {\n    id: string;\n    block: TrackerBlockData;\n    defaultBackgroundColor: string;\n    hoverEffect: boolean;\n    blockWidth: number;\n    blockHeight: number;\n};\n\nconst TrackerBlock = (props: TrackerBlockProps) => {\n    const { id, block, defaultBackgroundColor, hoverEffect, blockWidth, blockHeight } = props;\n\n    const isClickable = Boolean(block.onClick);\n\n    const blockClasses = classNames(\n        'tracker-block',\n        block.color || defaultBackgroundColor,\n        hoverEffect && 'tracker-block-hover',\n        isClickable && 'cursor-pointer',\n        block.className\n    );\n\n    const blockElement = (\n        <div\n            className={blockClasses}\n            onClick={() => block.onClick?.(id)}\n            onKeyDown={event => {\n                if (!isClickable) {\n                    return;\n                }\n\n                if (event.key === 'Enter' || event.key === ' ') {\n                    event.preventDefault();\n                    block.onClick?.(id);\n                }\n            }}\n            role={isClickable ? 'button' : undefined}\n            tabIndex={isClickable ? 0 : undefined}\n            aria-label={typeof block.tooltip === 'string' ? block.tooltip : undefined}\n            style={{\n                width: `${blockWidth}px`,\n                minWidth: `${blockWidth}px`,\n                height: `${blockHeight}px`,\n            }}\n        />\n    );\n\n    if (!block.tooltip) {\n        return blockElement;\n    }\n\n    return (\n        <SimpleTooltip content={block.tooltip} allowOnTouch placement='top' delay={{ show: 100, hide: 50 }}>\n            {blockElement}\n        </SimpleTooltip>\n    );\n};\n\nexport default TrackerBlock;\n"],"mappings":";;;;AAaA,IAAM,KAAgB,MAA6B;CAC/C,IAAM,EAAE,OAAI,UAAO,2BAAwB,gBAAa,eAAY,mBAAgB,GAE9E,IAAc,EAAQ,EAAM,SAU5B,IACF,kBAAC,OAAD;EACI,WAVa,EACjB,iBACA,EAAM,SAAS,GACf,KAAe,uBACf,KAAe,kBACf,EAAM,SAKS;EACX,eAAe,EAAM,UAAU,CAAE;EACjC,YAAW,MAAS;GACX,MAID,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACvC,EAAM,eAAe,GACrB,EAAM,UAAU,CAAE;EAE1B;EACA,MAAM,IAAc,WAAW,KAAA;EAC/B,UAAU,IAAc,IAAI,KAAA;EAC5B,cAAY,OAAO,EAAM,WAAY,WAAW,EAAM,UAAU,KAAA;EAChE,OAAO;GACH,OAAO,GAAG,EAAW;GACrB,UAAU,GAAG,EAAW;GACxB,QAAQ,GAAG,EAAY;EAC3B;CACH,CAAA;CAOL,OAJK,EAAM,UAKP,kBAAC,GAAD;EAAe,SAAS,EAAM;EAAS,cAAA;EAAa,WAAU;EAAM,OAAO;GAAE,MAAM;GAAK,MAAM;EAAG;YAC5F;CACU,CAAA,IANR;AAQf"}

package/components/video/ResponsiveVideo.js

@@ -1,12 +1,18 @@
-import { jsx as e } from "react/jsx-runtime";
-import _ from "../../utils/classNames.js";
-const n = "4by3", l = "16by9", o = (r) => {
-  const { src: a, className: s = "", allowFullScreen: t = !0, aspectRatio: c = "16by9" } = r, i = _("video-responsive", `video-responsive-${c}`, s && s);
-  return /* @__PURE__ */ e("div", { className: i, children: /* @__PURE__ */ e("iframe", { src: a, allowFullScreen: t }) });
+import e from "../../utils/classNames.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/video/ResponsiveVideo.tsx
+var n = "4by3", r = "16by9", i = (n) => {
+	let { src: r, className: i = "", allowFullScreen: a = !0, aspectRatio: o = "16by9" } = n;
+	return /* @__PURE__ */ t("div", {
+		className: e("video-responsive", `video-responsive-${o}`, i && i),
+		children: /* @__PURE__ */ t("iframe", {
+			src: r,
+			allowFullScreen: a
+		})
+	});
 };
-o.ASPECT_RATIO_4_BY_3 = n;
-o.ASPECT_RATIO_16_BY_9 = l;
-export {
-  o as default
-};
-//# sourceMappingURL=ResponsiveVideo.js.map
+i.ASPECT_RATIO_4_BY_3 = n, i.ASPECT_RATIO_16_BY_9 = r;
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=ResponsiveVideo.js.map

package/components/video/ResponsiveVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveVideo.js","sources":["../../../src/components/video/ResponsiveVideo.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\n\nconst FOUR_BY_THREE = '4by3';\nconst SIXTEEN_BY_NINE = '16by9';\n\nexport type AspectRatio = typeof FOUR_BY_THREE | typeof SIXTEEN_BY_NINE;\n\nexport type ResponsiveVideoProps = {\n    /**\n     * The link to the source of the video file.\n     */\n    src: string;\n\n    /**\n     * Defined the aspect ratio of the video.\n     *\n     * Possible values are:\n     *\n     * - `ResponsiveVideo.ASPECT_RATIO_4_BY_3`\n     * - `ResponsiveVideo.ASPECT_RATIO_16_BY_9`\n     * - `'4by3'`\n     * - `'16by9'`\n     *\n     * @default '16by9'\n     */\n    aspectRatio: '4by3' | '16by9';\n\n    /**\n     * Allows the fullscreen feature of the underlying embedded iframe.\n     *\n     * @default true\n     */\n    allowFullScreen?: boolean;\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst ResponsiveVideo = (props: ResponsiveVideoProps) => {\n    const { src, className = '', allowFullScreen = true, aspectRatio = '16by9' } = props;\n\n    const wrapperClassName = classNames('video-responsive', `video-responsive-${aspectRatio}`, className && className);\n\n    return (\n        <div className={wrapperClassName}>\n            <iframe src={src} allowFullScreen={allowFullScreen} />\n        </div>\n    );\n};\n\nResponsiveVideo.ASPECT_RATIO_4_BY_3 = FOUR_BY_THREE as typeof FOUR_BY_THREE;\nResponsiveVideo.ASPECT_RATIO_16_BY_9 = SIXTEEN_BY_NINE as typeof SIXTEEN_BY_NINE;\n\nexport default ResponsiveVideo;\n"],"names":["FOUR_BY_THREE","SIXTEEN_BY_NINE","ResponsiveVideo","props","src","className","allowFullScreen","aspectRatio","wrapperClassName","classNames","jsx"],"mappings":";;AAEA,MAAMA,IAAgB,QAChBC,IAAkB,SAqClBC,IAAkB,CAACC,MAAgC;AACrD,QAAM,EAAE,KAAAC,GAAK,WAAAC,IAAY,IAAI,iBAAAC,IAAkB,IAAM,aAAAC,IAAc,YAAYJ,GAEzEK,IAAmBC,EAAW,oBAAoB,oBAAoBF,CAAW,IAAIF,KAAaA,CAAS;AAEjH,SACI,gBAAAK,EAAC,SAAI,WAAWF,GACZ,4BAAC,UAAA,EAAO,KAAAJ,GAAU,iBAAAE,GAAkC,EAAA,CACxD;AAER;AAEAJ,EAAgB,sBAAsBF;AACtCE,EAAgB,uBAAuBD;"}
+{"version":3,"file":"ResponsiveVideo.js","names":[],"sources":["../../../src/components/video/ResponsiveVideo.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\n\nconst FOUR_BY_THREE = '4by3';\nconst SIXTEEN_BY_NINE = '16by9';\n\nexport type AspectRatio = typeof FOUR_BY_THREE | typeof SIXTEEN_BY_NINE;\n\nexport type ResponsiveVideoProps = {\n    /**\n     * The link to the source of the video file.\n     */\n    src: string;\n\n    /**\n     * Defined the aspect ratio of the video.\n     *\n     * Possible values are:\n     *\n     * - `ResponsiveVideo.ASPECT_RATIO_4_BY_3`\n     * - `ResponsiveVideo.ASPECT_RATIO_16_BY_9`\n     * - `'4by3'`\n     * - `'16by9'`\n     *\n     * @default '16by9'\n     */\n    aspectRatio: '4by3' | '16by9';\n\n    /**\n     * Allows the fullscreen feature of the underlying embedded iframe.\n     *\n     * @default true\n     */\n    allowFullScreen?: boolean;\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst ResponsiveVideo = (props: ResponsiveVideoProps) => {\n    const { src, className = '', allowFullScreen = true, aspectRatio = '16by9' } = props;\n\n    const wrapperClassName = classNames('video-responsive', `video-responsive-${aspectRatio}`, className && className);\n\n    return (\n        <div className={wrapperClassName}>\n            <iframe src={src} allowFullScreen={allowFullScreen} />\n        </div>\n    );\n};\n\nResponsiveVideo.ASPECT_RATIO_4_BY_3 = FOUR_BY_THREE as typeof FOUR_BY_THREE;\nResponsiveVideo.ASPECT_RATIO_16_BY_9 = SIXTEEN_BY_NINE as typeof SIXTEEN_BY_NINE;\n\nexport default ResponsiveVideo;\n"],"mappings":";;;AAEA,IAAM,IAAgB,QAChB,IAAkB,SAqClB,KAAmB,MAAgC;CACrD,IAAM,EAAE,QAAK,eAAY,IAAI,qBAAkB,IAAM,iBAAc,YAAY;CAI/E,OACI,kBAAC,OAAD;EAAK,WAHgB,EAAW,oBAAoB,oBAAoB,KAAe,KAAa,CAGpF;YACZ,kBAAC,UAAD;GAAa;GAAsB;EAAkB,CAAA;CACpD,CAAA;AAEb;AAEA,EAAgB,sBAAsB,GACtC,EAAgB,uBAAuB"}

package/components/virtualList/VirtualList.d.ts

@@ -28,7 +28,7 @@ export type VirtualListProps<T> = {
      * Optional ref to an external scroll container.
      * Use this when VirtualList is inside a scrollable container.
      */
-    scrollContainerRef?: React.RefObject<HTMLElement>;
+    scrollContainerRef?: React.RefObject<HTMLElement | null>;
     /**
      * Additional classNames for the container of the list items.
      */

package/components/virtualList/VirtualList.js

@@ -1,143 +1,120 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useState as z, useRef as H, useCallback as m, useEffect as B } from "react";
-import F from "./VirtualListItemWrapper.js";
-import $ from "../../hooks/useWindowResize.js";
-import x from "./useVirtualListResizeObserver.js";
-const J = (S) => {
-  const {
-    items: c,
-    renderItem: y,
-    overscanCount: h = 3,
-    defaultHeight: l = 50,
-    scrollContainerRef: d,
-    containerClassName: L = "",
-    listItemWrapperClassName: T = "",
-    className: V = "",
-    ...k
-  } = S, [r, v] = z({
-    itemHeights: {},
-    visibleRange: { start: 0, end: 10 },
-    scrollTop: 0,
-    viewportHeight: 0
-  }), b = H(null), R = H(null), C = H(-1), g = m(
-    () => d?.current || b.current,
-    [d]
-  ), n = m(
-    (e) => !Number.isNaN(e) && e > 0 ? e : l,
-    [l]
-  ), M = m(
-    (e) => {
-      let t = 0;
-      for (let s = 0; s < e; s++) {
-        const i = r.itemHeights[s] ?? l;
-        t += n(i);
-      }
-      return t;
-    },
-    [r.itemHeights, n, l]
-  ), P = m(() => {
-    const e = Object.values(r.itemHeights).reduce((a, o) => a + n(o), 0), t = Object.keys(r.itemHeights).length, s = t > 0 ? n(e / t) : l, i = c.length - t;
-    return n(e + i * s);
-  }, [c.length, r.itemHeights, n, l]), N = m(() => {
-    const e = g();
-    if (!e)
-      return r.visibleRange;
-    const t = e.clientHeight, s = e.scrollTop;
-    let i = 0, a = 0;
-    for (; i < c.length; ) {
-      const u = n(r.itemHeights[i] ?? l);
-      if (a + u > s - h * u)
-        break;
-      a += u, i++;
-    }
-    let o = i;
-    for (; o < c.length; ) {
-      const u = n(r.itemHeights[o] ?? l);
-      if (a > s + t + h * u)
-        break;
-      a += u, o++;
-    }
-    return {
-      start: Math.max(0, i - h),
-      end: Math.min(c.length, o + h)
-    };
-  }, [
-    c.length,
-    h,
-    r.itemHeights,
-    r.visibleRange,
-    n,
-    l,
-    g
-  ]), W = m(
-    (e, t) => {
-      const s = t.getBoundingClientRect(), i = window.getComputedStyle(t), a = n(
-        s.height + Number.parseFloat(i.marginTop || "0") + Number.parseFloat(i.marginBottom || "0")
-      );
-      v((o) => o.itemHeights[e] === a ? o : {
-        ...o,
-        itemHeights: { ...o.itemHeights, [e]: a }
-      }), C.current = Math.max(C.current, e);
-    },
-    [n]
-  );
-  x(R, W, [r.visibleRange]);
-  const f = m(() => {
-    const e = g();
-    if (!e)
-      return;
-    const t = N();
-    v((s) => ({
-      ...s,
-      visibleRange: t,
-      scrollTop: e.scrollTop,
-      viewportHeight: e.clientHeight
-    }));
-  }, [N, g]);
-  B(() => {
-    const e = g();
-    if (e)
-      return e.addEventListener("scroll", f, { passive: !0 }), () => e.removeEventListener("scroll", f);
-  }, [f, g]), $(f);
-  const j = (e, t) => {
-    const s = y(e, t), i = M(t);
-    return /* @__PURE__ */ p(
-      F,
-      {
-        "data-index": t,
-        translateY: i,
-        className: T,
-        children: s
-      },
-      t
-    );
-  }, { start: w, end: E } = r.visibleRange, I = P(), O = {
-    height: d ? I : "100%",
-    position: "relative",
-    overflow: d ? "visible" : "auto"
-  };
-  return /* @__PURE__ */ p(
-    "div",
-    {
-      ...k,
-      ref: b,
-      className: `VirtualList overflow-y-auto ${V}`,
-      style: O,
-      children: /* @__PURE__ */ p(
-        "div",
-        {
-          className: "position-relative",
-          style: {
-            height: d ? "auto" : I
-          },
-          children: /* @__PURE__ */ p("div", { ref: R, className: `VirtualListItemContainer ${L}`, children: c.slice(w, E).map((e, t) => j(e, w + t)) })
-        }
-      )
-    }
-  );
+import e from "../../hooks/useWindowResize.js";
+import t from "./VirtualListItemWrapper.js";
+import n from "./useVirtualListResizeObserver.js";
+import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/virtualList/VirtualList.tsx
+var c = (c) => {
+	let { items: l, renderItem: u, overscanCount: d = 3, defaultHeight: f = 50, scrollContainerRef: p, containerClassName: m = "", listItemWrapperClassName: h = "", className: g = "", ..._ } = c, [v, y] = o({
+		itemHeights: {},
+		visibleRange: {
+			start: 0,
+			end: 10
+		},
+		scrollTop: 0,
+		viewportHeight: 0
+	}), b = a(null), x = a(null), S = a(-1), C = r(() => p?.current || b.current, [p]), w = r((e) => !Number.isNaN(e) && e > 0 ? e : f, [f]), T = r((e) => {
+		let t = 0;
+		for (let n = 0; n < e; n++) {
+			let e = v.itemHeights[n] ?? f;
+			t += w(e);
+		}
+		return t;
+	}, [
+		v.itemHeights,
+		w,
+		f
+	]), E = r(() => {
+		let e = Object.values(v.itemHeights).reduce((e, t) => e + w(t), 0), t = Object.keys(v.itemHeights).length, n = t > 0 ? w(e / t) : f, r = l.length - t;
+		return w(e + r * n);
+	}, [
+		l.length,
+		v.itemHeights,
+		w,
+		f
+	]), D = r(() => {
+		let e = C();
+		if (!e) return v.visibleRange;
+		let t = e.clientHeight, n = e.scrollTop, r = 0, i = 0;
+		for (; r < l.length;) {
+			let e = w(v.itemHeights[r] ?? f);
+			if (i + e > n - d * e) break;
+			i += e, r++;
+		}
+		let a = r;
+		for (; a < l.length;) {
+			let e = w(v.itemHeights[a] ?? f);
+			if (i > n + t + d * e) break;
+			i += e, a++;
+		}
+		return {
+			start: Math.max(0, r - d),
+			end: Math.min(l.length, a + d)
+		};
+	}, [
+		l.length,
+		d,
+		v.itemHeights,
+		v.visibleRange,
+		w,
+		f,
+		C
+	]);
+	n(x, r((e, t) => {
+		let n = t.getBoundingClientRect(), r = window.getComputedStyle(t), i = w(n.height + Number.parseFloat(r.marginTop || "0") + Number.parseFloat(r.marginBottom || "0"));
+		y((t) => t.itemHeights[e] === i ? t : {
+			...t,
+			itemHeights: {
+				...t.itemHeights,
+				[e]: i
+			}
+		}), S.current = Math.max(S.current, e);
+	}, [w]), [v.visibleRange]);
+	let O = r(() => {
+		let e = C();
+		if (!e) return;
+		let t = D();
+		y((n) => ({
+			...n,
+			visibleRange: t,
+			scrollTop: e.scrollTop,
+			viewportHeight: e.clientHeight
+		}));
+	}, [D, C]);
+	i(() => {
+		let e = C();
+		if (e) return e.addEventListener("scroll", O, { passive: !0 }), () => e.removeEventListener("scroll", O);
+	}, [O, C]), e(O);
+	let k = (e, n) => {
+		let r = u(e, n);
+		return /* @__PURE__ */ s(t, {
+			"data-index": n,
+			translateY: T(n),
+			className: h,
+			children: r
+		}, n);
+	}, { start: A, end: j } = v.visibleRange, M = E(), N = {
+		height: p ? M : "100%",
+		position: "relative",
+		overflow: p ? "visible" : "auto"
+	};
+	return /* @__PURE__ */ s("div", {
+		..._,
+		ref: b,
+		className: `VirtualList overflow-y-auto ${g}`,
+		style: N,
+		children: /* @__PURE__ */ s("div", {
+			className: "position-relative",
+			style: { height: p ? "auto" : M },
+			children: /* @__PURE__ */ s("div", {
+				ref: x,
+				className: `VirtualListItemContainer ${m}`,
+				children: l.slice(A, j).map((e, t) => k(e, A + t))
+			})
+		})
+	});
 };
-export {
-  J as VirtualList,
-  J as default
-};
-//# sourceMappingURL=VirtualList.js.map
+//#endregion
+export { c as VirtualList, c as default };
+
+//# sourceMappingURL=VirtualList.js.map