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

package/components/resizer/Resizer.js

@@ -1,107 +1,75 @@
-import { jsx as N } from "react/jsx-runtime";
-import { useRef as m, useEffect as X } from "react";
-import { noop as h } from "es-toolkit/function";
-import Y from "../../utils/classNames.js";
-const z = "x", D = "y", M = "left", O = "right", P = "top", S = "bottom", w = (i, s, n) => {
-  if (!i)
-    return;
-  const t = i.ownerDocument;
-  return t.addEventListener("mouseup", s), t.addEventListener("mousemove", n), t.addEventListener("touchend", s), t.addEventListener("touchmove", n), {
-    remove: () => {
-      t.removeEventListener("mouseup", s), t.removeEventListener("mousemove", n), t.removeEventListener("touchend", s), t.removeEventListener("touchmove", n);
-    }
-  };
-}, o = (i) => {
-  const {
-    className: s = "",
-    direction: n = z,
-    position: t = O,
-    onResizeStart: E = h,
-    onResize: d = h,
-    onResizeEnd: x = h,
-    children: y,
-    ...I
-  } = i, u = m(null), l = m(null), f = m(!1), c = m({ x: 0, y: 0 });
-  X(
-    () => () => {
-      R();
-    },
-    []
-  );
-  const v = (e) => {
-    if (window.TouchEvent && e instanceof window.TouchEvent)
-      return e.touches[0].clientX;
-    if (e instanceof MouseEvent)
-      return e.clientX;
-    throw new Error("Unsupported event type");
-  }, T = (e) => {
-    if (window.TouchEvent && e instanceof window.TouchEvent)
-      return e.touches[0].clientY;
-    if (e instanceof MouseEvent)
-      return e.clientY;
-    throw new Error("Unsupported event type");
-  }, g = (e) => {
-    f.current = !0;
-    const r = e.nativeEvent, { clientX: a, clientY: H } = r;
-    c.current = {
-      x: a,
-      y: H
-    }, E(e), u.current = w(l.current, L, p);
-  }, A = (e) => {
-    f.current = !0;
-    const a = e.nativeEvent.touches[0];
-    c.current = {
-      x: a.clientX,
-      y: a.clientY
-    }, E(e), u.current = w(l.current, L, p);
-  }, p = (e) => {
-    if (f.current) {
-      if (n === o.HORIZONTAL) {
-        const r = c.current.x - v(e);
-        r !== 0 && d(r);
-      }
-      if (n === o.VERTICAL) {
-        const r = c.current.y - T(e);
-        r !== 0 && d(r);
-      }
-      c.current = {
-        x: v(e),
-        y: T(e)
-      };
-    }
-  }, L = (e) => {
-    f.current = !1, x(e), R();
-  }, R = () => {
-    u.current && u.current.remove();
-  }, C = Y(
-    "Resizer",
-    n === "x" && "resize-horizontal",
-    n === "y" && "resize-vertical",
-    t === "left" && "resize-left",
-    t === "right" && "resize-right",
-    t === "top" && "resize-top",
-    t === "bottom" && "resize-bottom",
-    s && s
-  );
-  return /* @__PURE__ */ N(
-    "div",
-    {
-      ref: l,
-      className: C,
-      onMouseDown: g,
-      onTouchStart: A,
-      ...I,
-      children: y
-    }
-  );
+import e from "../../utils/classNames.js";
+import { useEffect as t, useRef as n } from "react";
+import { noop as r } from "es-toolkit/function";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/resizer/Resizer.tsx
+var a = "x", o = "y", s = "left", c = "right", l = "top", u = "bottom", d = (e, t, n) => {
+	if (!e) return;
+	let r = e.ownerDocument;
+	return r.addEventListener("mouseup", t), r.addEventListener("mousemove", n), r.addEventListener("touchend", t), r.addEventListener("touchmove", n), { remove: () => {
+		r.removeEventListener("mouseup", t), r.removeEventListener("mousemove", n), r.removeEventListener("touchend", t), r.removeEventListener("touchmove", n);
+	} };
+}, f = (o) => {
+	let { className: s = "", direction: l = a, position: u = c, onResizeStart: p = r, onResize: m = r, onResizeEnd: h = r, children: g, ..._ } = o, v = n(null), y = n(null), b = n(!1), x = n({
+		x: 0,
+		y: 0
+	});
+	t(() => () => {
+		O();
+	}, []);
+	let S = (e) => {
+		if (window.TouchEvent && e instanceof window.TouchEvent) return e.touches[0].clientX;
+		if (e instanceof MouseEvent) return e.clientX;
+		throw Error("Unsupported event type");
+	}, C = (e) => {
+		if (window.TouchEvent && e instanceof window.TouchEvent) return e.touches[0].clientY;
+		if (e instanceof MouseEvent) return e.clientY;
+		throw Error("Unsupported event type");
+	}, w = (e) => {
+		b.current = !0;
+		let { clientX: t, clientY: n } = e.nativeEvent;
+		x.current = {
+			x: t,
+			y: n
+		}, p(e), v.current = d(y.current, D, E);
+	}, T = (e) => {
+		b.current = !0;
+		let t = e.nativeEvent.touches[0];
+		x.current = {
+			x: t.clientX,
+			y: t.clientY
+		}, p(e), v.current = d(y.current, D, E);
+	}, E = (e) => {
+		if (b.current) {
+			if (l === f.HORIZONTAL) {
+				let t = x.current.x - S(e);
+				t !== 0 && m(t);
+			}
+			if (l === f.VERTICAL) {
+				let t = x.current.y - C(e);
+				t !== 0 && m(t);
+			}
+			x.current = {
+				x: S(e),
+				y: C(e)
+			};
+		}
+	}, D = (e) => {
+		b.current = !1, h(e), O();
+	}, O = () => {
+		v.current && v.current.remove();
+	};
+	return /* @__PURE__ */ i("div", {
+		ref: y,
+		className: e("Resizer", l === "x" && "resize-horizontal", l === "y" && "resize-vertical", u === "left" && "resize-left", u === "right" && "resize-right", u === "top" && "resize-top", u === "bottom" && "resize-bottom", s && s),
+		onMouseDown: w,
+		onTouchStart: T,
+		..._,
+		children: g
+	});
 };
-o.HORIZONTAL = z;
-o.VERTICAL = D;
-o.LEFT = M;
-o.RIGHT = O;
-o.TOP = P;
-o.BOTTOM = S;
-export {
-  o as default
-};
-//# sourceMappingURL=Resizer.js.map
+f.HORIZONTAL = a, f.VERTICAL = o, f.LEFT = s, f.RIGHT = c, f.TOP = l, f.BOTTOM = u;
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=Resizer.js.map

package/components/resizer/Resizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Resizer.js","sources":["../../../src/components/resizer/Resizer.tsx"],"sourcesContent":["import React, { useEffect, useRef, type MouseEvent, type TouchEvent, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\n\nconst HORIZONTAL = 'x';\nconst VERTICAL = 'y';\n\nconst LEFT = 'left';\nconst RIGHT = 'right';\nconst TOP = 'top';\nconst BOTTOM = 'bottom';\n\nexport type ResizerProps = {\n    /**\n     * Defines where the resize handle is positioned relative to the element to resize.\n     *\n     * Possible values are:\n     *\n     * - `Resizer.LEFT`,\n     * - `Resizer.RIGHT`,\n     * - `Resizer.TOP`,\n     * - `Resizer.BOTTOM`\n     * - `'left`',\n     * - `'right`',\n     * - `'top`',\n     * - `'bottom'`\n     */\n    position?: typeof LEFT | typeof RIGHT | typeof TOP | typeof BOTTOM;\n\n    /**\n     * Defines on which axis to resize.\n     *\n     * Possible values are:\n     *\n     * - `Resizer.HORIZONTAL`\n     * - `Resizer.VERTICAL`\n     * - `'x'`\n     * - `'y'`\n     */\n    direction?: typeof HORIZONTAL | typeof VERTICAL;\n\n    /**\n     * Callback when the resize starts, means when the handle is pressed. It returns the respective event.\n     *\n     * @param event\n     * @returns\n     */\n    onResizeStart?: (event: MouseEvent | TouchEvent) => void;\n\n    /**\n     * Callback when the resize handle is moved. The function returns the distant between the last\n     * position and the mouse movement. Means you can either subtract or add this diff to the elements\n     * width you want to change.\n     *\n     * @param diff\n     * @returns\n     */\n    onResize?: (diff: number) => void;\n\n    /**\n     * Callback when the resize ends, means when the handle is released. It returns the respective event.\n     *\n     * @param event\n     * @returns\n     */\n    onResizeEnd?: (event: Event) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\ntype Position = {\n    x: number;\n    y: number;\n};\n\nconst createListeners = (\n    targetNode: HTMLDivElement | null,\n    onEnd: (event: Event) => void,\n    onMove: (event: Event) => void\n) => {\n    if (!targetNode) {\n        return;\n    }\n\n    // The read-only ownerDocument property of the Node interface returns\n    // the top-level document object of the node.\n    const ownerDocument = targetNode.ownerDocument;\n\n    ownerDocument.addEventListener('mouseup', onEnd);\n    ownerDocument.addEventListener('mousemove', onMove);\n    ownerDocument.addEventListener('touchend', onEnd);\n    ownerDocument.addEventListener('touchmove', onMove);\n    return {\n        remove: () => {\n            ownerDocument.removeEventListener('mouseup', onEnd);\n            ownerDocument.removeEventListener('mousemove', onMove);\n            ownerDocument.removeEventListener('touchend', onEnd);\n            ownerDocument.removeEventListener('touchmove', onMove);\n        },\n    };\n};\n\nconst Resizer = (props: PropsWithChildren<ResizerProps>) => {\n    const {\n        className = '',\n        direction = HORIZONTAL,\n        position = RIGHT,\n        onResizeStart = noop,\n        onResize = noop,\n        onResizeEnd = noop,\n        children,\n        ...remainingProps\n    } = props;\n\n    const eventsRef = useRef<{ remove: () => void } | undefined | null>(null);\n\n    // Use refs here instead of local state as the move event listener fired before the state is set\n    // and then it would work with outdated state at that time.\n    const elementRef = useRef<HTMLDivElement>(null);\n    const isDragRef = useRef<boolean>(false);\n    const startPositionRef = useRef<Position>({ x: 0, y: 0 });\n\n    useEffect(\n        () => () => {\n            removeListeners();\n        },\n        []\n    );\n\n    const getClientX = (event: Event) => {\n        // Note: some browsers don't provide the global \"TouchEvent\" constructor!\n        if (!!window.TouchEvent && event instanceof window.TouchEvent) {\n            return event.touches[0].clientX;\n        }\n\n        if (event instanceof MouseEvent) {\n            return event.clientX;\n        }\n\n        throw new Error('Unsupported event type');\n    };\n\n    const getClientY = (event: Event) => {\n        // Note: some browsers don't provide the global \"TouchEvent\" constructor!\n        if (!!window.TouchEvent && event instanceof window.TouchEvent) {\n            return event.touches[0].clientY;\n        }\n\n        if (event instanceof MouseEvent) {\n            return event.clientY;\n        }\n\n        throw new Error('Unsupported event type');\n    };\n\n    const handleMouseStart = (event: React.MouseEvent) => {\n        isDragRef.current = true;\n\n        // Use the native event to check for the event type. Otherwise the type check\n        // fails and the start position would be { x: 0, y: 0 }.\n        const mouseEvent = event.nativeEvent;\n        const { clientX, clientY } = mouseEvent;\n        startPositionRef.current = {\n            x: clientX,\n            y: clientY,\n        };\n\n        onResizeStart(event);\n\n        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);\n    };\n\n    const handleTouchStart = (event: React.TouchEvent) => {\n        isDragRef.current = true;\n\n        // Use the native event to check for the event type. Otherwise the type check\n        // fails and the start position would be { x: 0, y: 0 }.\n        const touchEvent = event.nativeEvent;\n        const firstTouch = touchEvent.touches[0];\n        startPositionRef.current = {\n            x: firstTouch.clientX,\n            y: firstTouch.clientY,\n        };\n\n        onResizeStart(event);\n\n        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);\n    };\n\n    const handleMove = (event: Event) => {\n        if (!isDragRef.current) {\n            return;\n        }\n\n        if (direction === Resizer.HORIZONTAL) {\n            const diff = startPositionRef.current.x - getClientX(event);\n\n            if (diff !== 0) {\n                onResize(diff);\n            }\n        }\n\n        if (direction === Resizer.VERTICAL) {\n            const diff = startPositionRef.current.y - getClientY(event);\n            if (diff !== 0) {\n                onResize(diff);\n            }\n        }\n\n        startPositionRef.current = {\n            x: getClientX(event),\n            y: getClientY(event),\n        };\n    };\n\n    const handleEnd = (event: Event) => {\n        isDragRef.current = false;\n        onResizeEnd(event);\n        removeListeners();\n    };\n\n    const removeListeners = () => {\n        if (eventsRef.current) {\n            eventsRef.current.remove();\n        }\n    };\n\n    const wrapperClasses = classNames(\n        'Resizer',\n        direction === 'x' && 'resize-horizontal',\n        direction === 'y' && 'resize-vertical',\n        position === 'left' && 'resize-left',\n        position === 'right' && 'resize-right',\n        position === 'top' && 'resize-top',\n        position === 'bottom' && 'resize-bottom',\n        className && className\n    );\n\n    return (\n        <div\n            ref={elementRef}\n            className={wrapperClasses}\n            onMouseDown={handleMouseStart}\n            onTouchStart={handleTouchStart}\n            {...remainingProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nResizer.HORIZONTAL = HORIZONTAL as typeof HORIZONTAL;\nResizer.VERTICAL = VERTICAL as typeof VERTICAL;\n\nResizer.LEFT = LEFT as typeof LEFT;\nResizer.RIGHT = RIGHT as typeof RIGHT;\nResizer.TOP = TOP as typeof TOP;\nResizer.BOTTOM = BOTTOM as typeof BOTTOM;\n\nexport default Resizer;\n"],"names":["HORIZONTAL","VERTICAL","LEFT","RIGHT","TOP","BOTTOM","createListeners","targetNode","onEnd","onMove","ownerDocument","Resizer","props","className","direction","position","onResizeStart","noop","onResize","onResizeEnd","children","remainingProps","eventsRef","useRef","elementRef","isDragRef","startPositionRef","useEffect","removeListeners","getClientX","event","getClientY","handleMouseStart","mouseEvent","clientX","clientY","handleEnd","handleMove","handleTouchStart","firstTouch","diff","wrapperClasses","classNames","jsx"],"mappings":"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"}
+{"version":3,"file":"Resizer.js","names":[],"sources":["../../../src/components/resizer/Resizer.tsx"],"sourcesContent":["import React, { useEffect, useRef, type MouseEvent, type TouchEvent, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\n\nconst HORIZONTAL = 'x';\nconst VERTICAL = 'y';\n\nconst LEFT = 'left';\nconst RIGHT = 'right';\nconst TOP = 'top';\nconst BOTTOM = 'bottom';\n\nexport type ResizerProps = {\n    /**\n     * Defines where the resize handle is positioned relative to the element to resize.\n     *\n     * Possible values are:\n     *\n     * - `Resizer.LEFT`,\n     * - `Resizer.RIGHT`,\n     * - `Resizer.TOP`,\n     * - `Resizer.BOTTOM`\n     * - `'left`',\n     * - `'right`',\n     * - `'top`',\n     * - `'bottom'`\n     */\n    position?: typeof LEFT | typeof RIGHT | typeof TOP | typeof BOTTOM;\n\n    /**\n     * Defines on which axis to resize.\n     *\n     * Possible values are:\n     *\n     * - `Resizer.HORIZONTAL`\n     * - `Resizer.VERTICAL`\n     * - `'x'`\n     * - `'y'`\n     */\n    direction?: typeof HORIZONTAL | typeof VERTICAL;\n\n    /**\n     * Callback when the resize starts, means when the handle is pressed. It returns the respective event.\n     *\n     * @param event\n     * @returns\n     */\n    onResizeStart?: (event: MouseEvent | TouchEvent) => void;\n\n    /**\n     * Callback when the resize handle is moved. The function returns the distant between the last\n     * position and the mouse movement. Means you can either subtract or add this diff to the elements\n     * width you want to change.\n     *\n     * @param diff\n     * @returns\n     */\n    onResize?: (diff: number) => void;\n\n    /**\n     * Callback when the resize ends, means when the handle is released. It returns the respective event.\n     *\n     * @param event\n     * @returns\n     */\n    onResizeEnd?: (event: Event) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\ntype Position = {\n    x: number;\n    y: number;\n};\n\nconst createListeners = (\n    targetNode: HTMLDivElement | null,\n    onEnd: (event: Event) => void,\n    onMove: (event: Event) => void\n) => {\n    if (!targetNode) {\n        return;\n    }\n\n    // The read-only ownerDocument property of the Node interface returns\n    // the top-level document object of the node.\n    const ownerDocument = targetNode.ownerDocument;\n\n    ownerDocument.addEventListener('mouseup', onEnd);\n    ownerDocument.addEventListener('mousemove', onMove);\n    ownerDocument.addEventListener('touchend', onEnd);\n    ownerDocument.addEventListener('touchmove', onMove);\n    return {\n        remove: () => {\n            ownerDocument.removeEventListener('mouseup', onEnd);\n            ownerDocument.removeEventListener('mousemove', onMove);\n            ownerDocument.removeEventListener('touchend', onEnd);\n            ownerDocument.removeEventListener('touchmove', onMove);\n        },\n    };\n};\n\nconst Resizer = (props: PropsWithChildren<ResizerProps>) => {\n    const {\n        className = '',\n        direction = HORIZONTAL,\n        position = RIGHT,\n        onResizeStart = noop,\n        onResize = noop,\n        onResizeEnd = noop,\n        children,\n        ...remainingProps\n    } = props;\n\n    const eventsRef = useRef<{ remove: () => void } | undefined | null>(null);\n\n    // Use refs here instead of local state as the move event listener fired before the state is set\n    // and then it would work with outdated state at that time.\n    const elementRef = useRef<HTMLDivElement>(null);\n    const isDragRef = useRef<boolean>(false);\n    const startPositionRef = useRef<Position>({ x: 0, y: 0 });\n\n    useEffect(\n        () => () => {\n            removeListeners();\n        },\n        []\n    );\n\n    const getClientX = (event: Event) => {\n        // Note: some browsers don't provide the global \"TouchEvent\" constructor!\n        if (!!window.TouchEvent && event instanceof window.TouchEvent) {\n            return event.touches[0].clientX;\n        }\n\n        if (event instanceof MouseEvent) {\n            return event.clientX;\n        }\n\n        throw new Error('Unsupported event type');\n    };\n\n    const getClientY = (event: Event) => {\n        // Note: some browsers don't provide the global \"TouchEvent\" constructor!\n        if (!!window.TouchEvent && event instanceof window.TouchEvent) {\n            return event.touches[0].clientY;\n        }\n\n        if (event instanceof MouseEvent) {\n            return event.clientY;\n        }\n\n        throw new Error('Unsupported event type');\n    };\n\n    const handleMouseStart = (event: React.MouseEvent) => {\n        isDragRef.current = true;\n\n        // Use the native event to check for the event type. Otherwise the type check\n        // fails and the start position would be { x: 0, y: 0 }.\n        const mouseEvent = event.nativeEvent;\n        const { clientX, clientY } = mouseEvent;\n        startPositionRef.current = {\n            x: clientX,\n            y: clientY,\n        };\n\n        onResizeStart(event);\n\n        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);\n    };\n\n    const handleTouchStart = (event: React.TouchEvent) => {\n        isDragRef.current = true;\n\n        // Use the native event to check for the event type. Otherwise the type check\n        // fails and the start position would be { x: 0, y: 0 }.\n        const touchEvent = event.nativeEvent;\n        const firstTouch = touchEvent.touches[0];\n        startPositionRef.current = {\n            x: firstTouch.clientX,\n            y: firstTouch.clientY,\n        };\n\n        onResizeStart(event);\n\n        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);\n    };\n\n    const handleMove = (event: Event) => {\n        if (!isDragRef.current) {\n            return;\n        }\n\n        if (direction === Resizer.HORIZONTAL) {\n            const diff = startPositionRef.current.x - getClientX(event);\n\n            if (diff !== 0) {\n                onResize(diff);\n            }\n        }\n\n        if (direction === Resizer.VERTICAL) {\n            const diff = startPositionRef.current.y - getClientY(event);\n            if (diff !== 0) {\n                onResize(diff);\n            }\n        }\n\n        startPositionRef.current = {\n            x: getClientX(event),\n            y: getClientY(event),\n        };\n    };\n\n    const handleEnd = (event: Event) => {\n        isDragRef.current = false;\n        onResizeEnd(event);\n        removeListeners();\n    };\n\n    const removeListeners = () => {\n        if (eventsRef.current) {\n            eventsRef.current.remove();\n        }\n    };\n\n    const wrapperClasses = classNames(\n        'Resizer',\n        direction === 'x' && 'resize-horizontal',\n        direction === 'y' && 'resize-vertical',\n        position === 'left' && 'resize-left',\n        position === 'right' && 'resize-right',\n        position === 'top' && 'resize-top',\n        position === 'bottom' && 'resize-bottom',\n        className && className\n    );\n\n    return (\n        <div\n            ref={elementRef}\n            className={wrapperClasses}\n            onMouseDown={handleMouseStart}\n            onTouchStart={handleTouchStart}\n            {...remainingProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nResizer.HORIZONTAL = HORIZONTAL as typeof HORIZONTAL;\nResizer.VERTICAL = VERTICAL as typeof VERTICAL;\n\nResizer.LEFT = LEFT as typeof LEFT;\nResizer.RIGHT = RIGHT as typeof RIGHT;\nResizer.TOP = TOP as typeof TOP;\nResizer.BOTTOM = BOTTOM as typeof BOTTOM;\n\nexport default Resizer;\n"],"mappings":"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"}

package/components/responsiveColumnStripe/ResponsiveColumnStripe.d.ts

@@ -1,4 +1,4 @@
-import { ReactHTML } from 'react';
+import { ElementType } from 'react';
 export type ResponsiveColumnStripeProps = {
     /**
      * The minimum width in pixel of a single column.
@@ -41,7 +41,7 @@ export type ResponsiveColumnStripeProps = {
      *
      * @default 'div'
      */
-    asType?: keyof ReactHTML;
+    asType?: ElementType;
     /**
      * Set to true to skip animating pages.
      *

package/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -1,134 +1,105 @@
-import { jsx as o, jsxs as S } from "react/jsx-runtime";
-import { forwardRef as re, useState as c, useRef as ie, useEffect as le, Children as ce, cloneElement as me } from "react";
-import { noop as M, chunk as W, findIndex as ue } from "es-toolkit/compat";
-import { AnimatePresence as pe, motion as de } from "motion/react";
-import m from "../../utils/classNames.js";
-import ge from "../../hooks/useAfterMount.js";
-import fe from "../../hooks/useElementSize.js";
-import Ce from "../../hooks/usePrevious.js";
-const Ne = 10, he = { duration: 0.2 }, L = "page", ve = "pageBack", _ = "ColumnItem", Pe = {
-  pageEnter: (n) => ({
-    x: n === L ? "60%" : "-60%",
-    opacity: 0
-  }),
-  pageCenter: () => ({ x: 0, opacity: 1 })
-}, O = (n) => [...n.classList].includes(_) ? n : O(n.children[0]), Ee = re(
-  (n, z) => {
-    const {
-      minColumnWith: h = 300,
-      minColumns: v = 1,
-      maxColumns: P = 5,
-      stretchLastItems: F = !0,
-      activePage: a = 0,
-      asType: D = "div",
-      onPreviousClick: H = M,
-      onNextClick: $ = M,
-      buttonClassName: xe = "",
-      columnsWrapperClassName: j = "",
-      className: U = "",
-      disableAnimation: x = !1,
-      children: r,
-      ...V
-    } = n, [s, u] = c(a), [t, y] = c(P), [K, X] = c(!1), [A, d] = c(!1), i = ie(null), [I] = fe(i), q = Ce(s), k = s > q ? L : ve;
-    ge(() => {
-      X(!0);
-    });
-    const [G, J] = c(a);
-    Number.isFinite(a) && a !== G && (u(a), J(a));
-    const T = (e, g) => {
-      const f = W(r, g), p = ue(
-        f,
-        (C) => C.some((N) => N.key === e.dataset.key)
-      );
-      p !== s && u(p);
-    };
-    le(() => {
-      if (!i.current)
-        return;
-      const e = O(i.current.children[0]);
-      if (!e)
-        return;
-      const g = e.getBoundingClientRect().width, f = t - 1 >= v, p = t + 1 <= P, C = f && g + Ne <= h, N = p && (t + 1) * h <= I;
-      if (d(!0), N) {
-        const l = t + 1;
-        y(l), T(e, l);
-        return;
-      }
-      if (C) {
-        const l = t - 1;
-        y(l), T(e, l);
-        return;
-      }
-    }, [I, i.current, r, t]);
-    const Q = () => {
-      d(!1);
-      const e = s - 1;
-      u(e), H(e, t);
-    }, Y = () => {
-      d(!1);
-      const e = s + 1;
-      u(e), $(e, t);
-    };
-    if (!r)
-      return null;
-    const Z = W(r, t)[s], b = v < r.length, ee = s === 0, w = s === Math.ceil(r.length / t) - 1, te = m(
-      "ResponsiveColumnStripe",
-      "display-flex align-items-center",
-      "overflow-hidden",
-      U
-    ), B = m(
-      "align-items-center",
-      "align-self-stretch",
-      "display-flex",
-      "hover-scale-105",
-      "hover-text-color-darkest",
-      "padding-10",
-      "cursor-pointer",
-      "text-color-darker",
-      "text-size-12"
-    ), E = "pointer-events-none opacity-30", se = m(
-      "PreviousButton",
-      B,
-      ee && E
-    ), ne = m(
-      "NextButton",
-      B,
-      w && E
-    ), oe = m(
-      "ColumnWrapper",
-      "flex-1-1",
-      "display-flex",
-      j
-    ), ae = w && !F ? "flex-0-1" : "flex-1-1", R = /* @__PURE__ */ o(D, { className: oe, children: ce.map(
-      Z,
-      (e) => me(e, {
-        className: `${_} ${ae} ${e.props?.className || ""}`,
-        // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
-        "data-key": e.key
-      })
-    ) });
-    return /* @__PURE__ */ S("div", { ...V, ref: z, className: te, children: [
-      b && /* @__PURE__ */ o("div", { className: se, onClick: Q, children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-chevron-left" }) }),
-      /* @__PURE__ */ S("div", { className: "ColumnsArea flex-1-1 overflow-hidden", ref: i, children: [
-        x || A ? R : null,
-        !x && !A && /* @__PURE__ */ o(pe, { mode: "wait", custom: k, children: /* @__PURE__ */ o(
-          de.div,
-          {
-            variants: Pe,
-            initial: K ? "pageEnter" : !1,
-            animate: "pageCenter",
-            custom: k,
-            transition: he,
-            children: R
-          },
-          s
-        ) })
-      ] }),
-      b && /* @__PURE__ */ o("div", { className: ne, onClick: Y, children: /* @__PURE__ */ o("span", { className: "rioglyph rioglyph-chevron-right" }) })
-    ] });
-  }
-);
-export {
-  Ee as default
-};
-//# sourceMappingURL=ResponsiveColumnStripe.js.map
+import e from "../../hooks/useAfterMount.js";
+import t from "../../hooks/usePrevious.js";
+import n from "../../hooks/useElementSize.js";
+import r from "../../utils/classNames.js";
+import { Children as i, cloneElement as a, forwardRef as o, useEffect as ee, useRef as te, useState as s } from "react";
+import { chunk as c, findIndex as l, noop as u } from "es-toolkit/compat";
+import { AnimatePresence as d, motion as f } from "motion/react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/responsiveColumnStripe/ResponsiveColumnStripe.tsx
+var h = 10, g = { duration: .2 }, _ = "page", v = "pageBack", y = "ColumnItem", b = {
+	pageEnter: (e) => ({
+		x: e === _ ? "60%" : "-60%",
+		opacity: 0
+	}),
+	pageCenter: () => ({
+		x: 0,
+		opacity: 1
+	})
+}, x = (e) => [...e.classList].includes(y) ? e : x(e.children[0]), S = o((o, S) => {
+	let { minColumnWith: C = 300, minColumns: w = 1, maxColumns: T = 5, stretchLastItems: E = !0, activePage: D = 0, asType: O = "div", onPreviousClick: k = u, onNextClick: A = u, buttonClassName: ne = "", columnsWrapperClassName: re = "", className: ie = "", disableAnimation: j = !1, children: M, ...N } = o, [P, F] = s(D), [I, L] = s(T), [R, z] = s(!1), [B, V] = s(!1), H = te(null), [U] = n(H), W = P > t(P) ? _ : v;
+	e(() => {
+		z(!0);
+	});
+	let [G, K] = s(D);
+	Number.isFinite(D) && D !== G && (F(D), K(D));
+	let q = (e, t) => {
+		let n = l(c(M, t), (t) => t.some((t) => t.key === e.dataset.key));
+		n !== P && F(n);
+	};
+	ee(() => {
+		if (!H.current) return;
+		let e = x(H.current.children[0]);
+		if (!e) return;
+		let t = e.getBoundingClientRect().width, n = I - 1 >= w, r = I + 1 <= T, i = n && t + h <= C, a = r && (I + 1) * C <= U;
+		if (V(!0), a) {
+			let t = I + 1;
+			L(t), q(e, t);
+			return;
+		}
+		if (i) {
+			let t = I - 1;
+			L(t), q(e, t);
+			return;
+		}
+	}, [
+		U,
+		H.current,
+		M,
+		I
+	]);
+	let J = () => {
+		V(!1);
+		let e = P - 1;
+		F(e), k(e, I);
+	}, ae = () => {
+		V(!1);
+		let e = P + 1;
+		F(e), A(e, I);
+	};
+	if (!M) return null;
+	let oe = c(M, I)[P], Y = w < M.length, se = P === 0, X = P === Math.ceil(M.length / I) - 1, ce = r("ResponsiveColumnStripe", "display-flex align-items-center", "overflow-hidden", ie), Z = r("align-items-center", "align-self-stretch", "display-flex", "hover-scale-105", "hover-text-color-darkest", "padding-10", "cursor-pointer", "text-color-darker", "text-size-12"), Q = "pointer-events-none opacity-30", le = r("PreviousButton", Z, se && Q), ue = r("NextButton", Z, X && Q), de = r("ColumnWrapper", "flex-1-1", "display-flex", re), fe = X && !E ? "flex-0-1" : "flex-1-1", $ = /* @__PURE__ */ p(O, {
+		className: de,
+		children: i.map(oe, (e) => a(e, {
+			className: `${y} ${fe} ${e.props?.className || ""}`,
+			"data-key": e.key
+		}))
+	});
+	return /* @__PURE__ */ m("div", {
+		...N,
+		ref: S,
+		className: ce,
+		children: [
+			Y && /* @__PURE__ */ p("div", {
+				className: le,
+				onClick: J,
+				children: /* @__PURE__ */ p("span", { className: "uikit-icon icon-chevron-left" })
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "ColumnsArea flex-1-1 overflow-hidden",
+				ref: H,
+				children: [j || B ? $ : null, !j && !B && /* @__PURE__ */ p(d, {
+					mode: "wait",
+					custom: W,
+					children: /* @__PURE__ */ p(f.div, {
+						variants: b,
+						initial: R ? "pageEnter" : !1,
+						animate: "pageCenter",
+						custom: W,
+						transition: g,
+						children: $
+					}, P)
+				})]
+			}),
+			Y && /* @__PURE__ */ p("div", {
+				className: ue,
+				onClick: ae,
+				children: /* @__PURE__ */ p("span", { className: "uikit-icon icon-chevron-right" })
+			})
+		]
+	});
+});
+//#endregion
+export { S as default };
+
+//# sourceMappingURL=ResponsiveColumnStripe.js.map

package/components/responsiveColumnStripe/ResponsiveColumnStripe.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveColumnStripe.js","sources":["../../../src/components/responsiveColumnStripe/ResponsiveColumnStripe.tsx"],"sourcesContent":["import {\n    Children,\n    cloneElement,\n    forwardRef,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactHTML,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { chunk, findIndex, noop } from 'es-toolkit/compat';\nimport { AnimatePresence, motion, type Variants } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport useAfterMount from '../../hooks/useAfterMount';\nimport useElementSize from '../../hooks/useElementSize';\nimport usePrevious from '../../hooks/usePrevious';\n\nconst MIN_WITH_THRESHOLD = 10;\n\nconst DEFAULT_TRANSITION = { duration: 0.2 };\n\nconst ANIMATION_NEXT = 'page';\nconst ANIMATION_BACK = 'pageBack';\n\nconst COLUMN_ITEM_CLASSNAME = 'ColumnItem';\n\nconst variants: Variants = {\n    pageEnter: pageDirection => ({\n        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',\n        opacity: 0,\n    }),\n    pageCenter: () => ({ x: 0, opacity: 1 }),\n};\n\nconst getFirstColumnItem = (node: Element): HTMLElement => {\n    if ([...node.classList].includes(COLUMN_ITEM_CLASSNAME)) {\n        return node as HTMLElement;\n    }\n    return getFirstColumnItem(node.children[0] as HTMLElement);\n};\n\nexport type ResponsiveColumnStripeProps = {\n    /**\n     * The minimum width in pixel of a single column.\n     *\n     * This value determines how many columns are shown per page depending on the parent width.\n     *\n     * @default 300\n     */\n    minColumnWith?: number;\n\n    /**\n     * The minimum amount of columns that should be shown per page.\n     *\n     * @default 1\n     */\n    minColumns?: number;\n\n    /**\n     * The maximum amount of columns that should be shown per page.\n     *\n     * @default 5\n     */\n    maxColumns?: number;\n\n    /**\n     * Defines whether the items on the last page are stretched out to fill the space.\n     *\n     * @default false\n     */\n    stretchLastItems?: boolean;\n\n    /**\n     * The page that shall be shown.\n     *\n     * This can be used to control the pages from outside.\n     *\n     * @default 0\n     */\n    activePage?: number;\n\n    /**\n     * The DOM element type of the wrapping column element.\n     *\n     * If you need a list, this might be set to \"ul\".\n     *\n     * @default 'div'\n     */\n    asType?: keyof ReactHTML;\n\n    /**\n     * Set to true to skip animating pages.\n     *\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Callback function for when the previous page is clicked.\n     *\n     * @param pageNumber\n     * @param columnsPerPage\n     */\n    onPreviousClick?: (pageNumber: number, columnsPerPage: number) => void;\n\n    /**\n     * Callback function for when the next page is clicked.\n     *\n     * @param pageNumber\n     * @param columnsPerPage\n     */\n    onNextClick?: (pageNumber: number, columnsPerPage: number) => void;\n\n    /**\n     * Additional classes set to the navigation buttons.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Additional classes set to the component wrapper element.\n     */\n    columnsWrapperClassName?: string;\n\n    /**\n     * Additional classes set to the column wrapper element.\n     */\n    className?: string;\n};\n\nconst ResponsiveColumnStripe = forwardRef<HTMLDivElement, PropsWithChildren<ResponsiveColumnStripeProps>>(\n    (props, ref) => {\n        const {\n            minColumnWith = 300,\n            minColumns = 1,\n            maxColumns = 5,\n            stretchLastItems = true,\n            activePage = 0,\n            asType: ComponentType = 'div',\n            onPreviousClick = noop,\n            onNextClick = noop,\n            buttonClassName = '',\n            columnsWrapperClassName = '',\n            className = '',\n            disableAnimation = false,\n            children,\n            ...remainingProps\n        } = props;\n\n        const [currentPage, setCurrentPage] = useState(activePage);\n        const [columnsPerPage, setColumnsPerPage] = useState(maxColumns);\n        const [enableInitialAnimation, setEnableInitialAnimation] = useState(false);\n\n        const [isResizePage, setIsResizePage] = useState(false);\n\n        // The base for reacting on changing width of the wrapping element.\n        // It uses a ResizeObserver under the hood.\n        const columnWrapperRef = useRef<HTMLDivElement>(null);\n        const [columnWrapperWidth] = useElementSize(columnWrapperRef);\n\n        const previousPage = usePrevious(currentPage);\n        const animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;\n\n        useAfterMount(() => {\n            setEnableInitialAnimation(true);\n        });\n\n        // Update active page from outside to be used as controlled component\n        const [previousActivePage, setPreviousActivePage] = useState(activePage);\n        if (Number.isFinite(activePage) && activePage !== previousActivePage) {\n            setCurrentPage(activePage);\n            setPreviousActivePage(activePage);\n        }\n\n        const updatePageOnColumnsSizeChange = (firstItem: HTMLElement, perPage: number) => {\n            // Split children in page chunks\n            const pages = chunk(children as ReactElement[], perPage);\n\n            // find the currently rendered first item inside the chunks.\n            // The found chunk index is the new page to render.\n            // example of chunks => [['a', 'b', 'c'], ['d']]\n            const targetPage = findIndex(pages, (page: ReactElement[]) =>\n                page.some(pageItem => pageItem.key === firstItem.dataset.key)\n            );\n\n            if (targetPage !== currentPage) {\n                setCurrentPage(targetPage);\n            }\n        };\n\n        // When the container size changes, adapt the amount of columns to be rendered according\n        // to the given min width of a single item. The new amount of columns also has to respect\n        // the lower and upper limit. When updating the amount, the current page hse to be updated as well.\n        useEffect(() => {\n            if (!columnWrapperRef.current) {\n                return;\n            }\n\n            const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);\n            if (!firstItem) {\n                return;\n            }\n\n            // Get the width of the first column to calculate how many columns fit in one page\n            // according to the given minWidth per column\n            const columnWidth = firstItem.getBoundingClientRect().width;\n\n            // Limit columns per page for given min and max values\n            const allowForLessColumns = columnsPerPage - 1 >= minColumns;\n            const allowForMoreColumns = columnsPerPage + 1 <= maxColumns;\n\n            // The threshold is required to avoid jumping between bigger and smaller after the columns per page\n            // has changed, and it continues to resize\n            const goSmaller = allowForLessColumns && columnWidth + MIN_WITH_THRESHOLD <= minColumnWith;\n            const goBigger = allowForMoreColumns && (columnsPerPage + 1) * minColumnWith <= columnWrapperWidth!;\n\n            // During resizing, we don't want any animation\n            setIsResizePage(true);\n\n            if (goBigger) {\n                const newValue = columnsPerPage + 1;\n                setColumnsPerPage(newValue);\n                updatePageOnColumnsSizeChange(firstItem, newValue);\n                return;\n            }\n\n            if (goSmaller) {\n                const newValue = columnsPerPage - 1;\n                setColumnsPerPage(newValue);\n                updatePageOnColumnsSizeChange(firstItem, newValue);\n                return;\n            }\n        }, [columnWrapperWidth, columnWrapperRef.current, children, columnsPerPage]);\n\n        const handlePrevClick = () => {\n            setIsResizePage(false);\n\n            const pageNumber = currentPage - 1;\n            setCurrentPage(pageNumber);\n            onPreviousClick(pageNumber, columnsPerPage);\n        };\n\n        const handleNextClick = () => {\n            setIsResizePage(false);\n\n            const pageNumber = currentPage + 1;\n            setCurrentPage(pageNumber);\n            onNextClick(pageNumber, columnsPerPage);\n        };\n\n        if (!children) {\n            return null;\n        }\n\n        // Split the children/columns in chunks according to the current columns per page size\n        // and get the current page chunk for rendering\n        const columnsToDisplay = chunk(children as ReactElement[], columnsPerPage)[currentPage];\n\n        const showPageButtons = minColumns < (children as ReactElement[]).length;\n\n        const disablePreviousPage = currentPage === 0;\n        const disableNextPage = currentPage === Math.ceil((children as ReactElement[]).length / columnsPerPage) - 1;\n\n        const wrapperClassName = classNames(\n            'ResponsiveColumnStripe',\n            'display-flex align-items-center',\n            'overflow-hidden',\n            className\n        );\n\n        const baseButtonClassName = classNames(\n            'align-items-center',\n            'align-self-stretch',\n            'display-flex',\n            'hover-scale-105',\n            'hover-text-color-darkest',\n            'padding-10',\n            'cursor-pointer',\n            'text-color-darker',\n            'text-size-12'\n        );\n\n        const disabledButtonClassName = 'pointer-events-none opacity-30';\n\n        const previousButtonClassName = classNames(\n            'PreviousButton',\n            baseButtonClassName,\n            disablePreviousPage && disabledButtonClassName\n        );\n\n        const nextButtonClassName = classNames(\n            'NextButton',\n            baseButtonClassName,\n            disableNextPage && disabledButtonClassName\n        );\n\n        const mergedColumnsWrapperClassName = classNames(\n            'ColumnWrapper',\n            'flex-1-1',\n            'display-flex',\n            columnsWrapperClassName\n        );\n\n        const columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';\n\n        // Use the given custom component type \"div\" or any other. Clone the children to inject certain\n        // properties that are required to stretch the items and deal with their size.\n        const columns = (\n            <ComponentType className={mergedColumnsWrapperClassName}>\n                {Children.map(columnsToDisplay, column =>\n                    cloneElement(column, {\n                        className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${column.props?.className || ''}`,\n                        // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },\n                        'data-key': column.key,\n                    })\n                )}\n            </ComponentType>\n        );\n\n        return (\n            <div {...remainingProps} ref={ref} className={wrapperClassName}>\n                {showPageButtons && (\n                    <div className={previousButtonClassName} onClick={handlePrevClick}>\n                        <span className='rioglyph rioglyph-chevron-left' />\n                    </div>\n                )}\n                <div className='ColumnsArea flex-1-1 overflow-hidden' ref={columnWrapperRef}>\n                    {disableAnimation || isResizePage ? columns : null}\n                    {!disableAnimation && !isResizePage && (\n                        <AnimatePresence mode='wait' custom={animationDirection}>\n                            <motion.div\n                                key={currentPage}\n                                variants={variants}\n                                initial={enableInitialAnimation ? 'pageEnter' : false}\n                                animate='pageCenter'\n                                custom={animationDirection}\n                                transition={DEFAULT_TRANSITION}\n                            >\n                                {columns}\n                            </motion.div>\n                        </AnimatePresence>\n                    )}\n                </div>\n                {showPageButtons && (\n                    <div className={nextButtonClassName} onClick={handleNextClick}>\n                        <span className='rioglyph rioglyph-chevron-right' />\n                    </div>\n                )}\n            </div>\n        );\n    }\n);\n\nexport default ResponsiveColumnStripe;\n"],"names":["MIN_WITH_THRESHOLD","DEFAULT_TRANSITION","ANIMATION_NEXT","ANIMATION_BACK","COLUMN_ITEM_CLASSNAME","variants","pageDirection","getFirstColumnItem","node","ResponsiveColumnStripe","forwardRef","props","ref","minColumnWith","minColumns","maxColumns","stretchLastItems","activePage","ComponentType","onPreviousClick","noop","onNextClick","buttonClassName","columnsWrapperClassName","className","disableAnimation","children","remainingProps","currentPage","setCurrentPage","useState","columnsPerPage","setColumnsPerPage","enableInitialAnimation","setEnableInitialAnimation","isResizePage","setIsResizePage","columnWrapperRef","useRef","columnWrapperWidth","useElementSize","previousPage","usePrevious","animationDirection","useAfterMount","previousActivePage","setPreviousActivePage","updatePageOnColumnsSizeChange","firstItem","perPage","pages","chunk","targetPage","findIndex","page","pageItem","useEffect","columnWidth","allowForLessColumns","allowForMoreColumns","goSmaller","goBigger","newValue","handlePrevClick","pageNumber","handleNextClick","columnsToDisplay","showPageButtons","disablePreviousPage","disableNextPage","wrapperClassName","classNames","baseButtonClassName","disabledButtonClassName","previousButtonClassName","nextButtonClassName","mergedColumnsWrapperClassName","columnClassName","columns","jsx","Children","column","cloneElement","jsxs","AnimatePresence","motion"],"mappings":"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"}
+{"version":3,"file":"ResponsiveColumnStripe.js","names":[],"sources":["../../../src/components/responsiveColumnStripe/ResponsiveColumnStripe.tsx"],"sourcesContent":["import {\n    Children,\n    cloneElement,\n    forwardRef,\n    type ElementType,\n    type Key,\n    type PropsWithChildren,\n    type ReactElement,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { chunk, findIndex, noop } from 'es-toolkit/compat';\nimport { AnimatePresence, motion, type Variants } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport useAfterMount from '../../hooks/useAfterMount';\nimport useElementSize from '../../hooks/useElementSize';\nimport usePrevious from '../../hooks/usePrevious';\n\nconst MIN_WITH_THRESHOLD = 10;\n\nconst DEFAULT_TRANSITION = { duration: 0.2 };\n\nconst ANIMATION_NEXT = 'page';\nconst ANIMATION_BACK = 'pageBack';\n\nconst COLUMN_ITEM_CLASSNAME = 'ColumnItem';\n\ntype ColumnItemProps = {\n    className?: string;\n    'data-key'?: Key | null;\n};\n\nconst variants: Variants = {\n    pageEnter: pageDirection => ({\n        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',\n        opacity: 0,\n    }),\n    pageCenter: () => ({ x: 0, opacity: 1 }),\n};\n\nconst getFirstColumnItem = (node: Element): HTMLElement => {\n    if ([...node.classList].includes(COLUMN_ITEM_CLASSNAME)) {\n        return node as HTMLElement;\n    }\n    return getFirstColumnItem(node.children[0] as HTMLElement);\n};\n\nexport type ResponsiveColumnStripeProps = {\n    /**\n     * The minimum width in pixel of a single column.\n     *\n     * This value determines how many columns are shown per page depending on the parent width.\n     *\n     * @default 300\n     */\n    minColumnWith?: number;\n\n    /**\n     * The minimum amount of columns that should be shown per page.\n     *\n     * @default 1\n     */\n    minColumns?: number;\n\n    /**\n     * The maximum amount of columns that should be shown per page.\n     *\n     * @default 5\n     */\n    maxColumns?: number;\n\n    /**\n     * Defines whether the items on the last page are stretched out to fill the space.\n     *\n     * @default false\n     */\n    stretchLastItems?: boolean;\n\n    /**\n     * The page that shall be shown.\n     *\n     * This can be used to control the pages from outside.\n     *\n     * @default 0\n     */\n    activePage?: number;\n\n    /**\n     * The DOM element type of the wrapping column element.\n     *\n     * If you need a list, this might be set to \"ul\".\n     *\n     * @default 'div'\n     */\n    asType?: ElementType;\n\n    /**\n     * Set to true to skip animating pages.\n     *\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Callback function for when the previous page is clicked.\n     *\n     * @param pageNumber\n     * @param columnsPerPage\n     */\n    onPreviousClick?: (pageNumber: number, columnsPerPage: number) => void;\n\n    /**\n     * Callback function for when the next page is clicked.\n     *\n     * @param pageNumber\n     * @param columnsPerPage\n     */\n    onNextClick?: (pageNumber: number, columnsPerPage: number) => void;\n\n    /**\n     * Additional classes set to the navigation buttons.\n     */\n    buttonClassName?: string;\n\n    /**\n     * Additional classes set to the component wrapper element.\n     */\n    columnsWrapperClassName?: string;\n\n    /**\n     * Additional classes set to the column wrapper element.\n     */\n    className?: string;\n};\n\nconst ResponsiveColumnStripe = forwardRef<HTMLDivElement, PropsWithChildren<ResponsiveColumnStripeProps>>(\n    (props, ref) => {\n        const {\n            minColumnWith = 300,\n            minColumns = 1,\n            maxColumns = 5,\n            stretchLastItems = true,\n            activePage = 0,\n            asType: ComponentType = 'div',\n            onPreviousClick = noop,\n            onNextClick = noop,\n            buttonClassName = '',\n            columnsWrapperClassName = '',\n            className = '',\n            disableAnimation = false,\n            children,\n            ...remainingProps\n        } = props;\n\n        const [currentPage, setCurrentPage] = useState(activePage);\n        const [columnsPerPage, setColumnsPerPage] = useState(maxColumns);\n        const [enableInitialAnimation, setEnableInitialAnimation] = useState(false);\n\n        const [isResizePage, setIsResizePage] = useState(false);\n\n        // The base for reacting on changing width of the wrapping element.\n        // It uses a ResizeObserver under the hood.\n        const columnWrapperRef = useRef<HTMLDivElement>(null);\n        const [columnWrapperWidth] = useElementSize(columnWrapperRef);\n\n        const previousPage = usePrevious(currentPage);\n        const animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;\n\n        useAfterMount(() => {\n            setEnableInitialAnimation(true);\n        });\n\n        // Update active page from outside to be used as controlled component\n        const [previousActivePage, setPreviousActivePage] = useState(activePage);\n        if (Number.isFinite(activePage) && activePage !== previousActivePage) {\n            setCurrentPage(activePage);\n            setPreviousActivePage(activePage);\n        }\n\n        const updatePageOnColumnsSizeChange = (firstItem: HTMLElement, perPage: number) => {\n            // Split children in page chunks\n            const pages = chunk(children as ReactElement<ColumnItemProps>[], perPage);\n\n            // find the currently rendered first item inside the chunks.\n            // The found chunk index is the new page to render.\n            // example of chunks => [['a', 'b', 'c'], ['d']]\n            const targetPage = findIndex(pages, (page: ReactElement[]) =>\n                page.some(pageItem => pageItem.key === firstItem.dataset.key)\n            );\n\n            if (targetPage !== currentPage) {\n                setCurrentPage(targetPage);\n            }\n        };\n\n        // When the container size changes, adapt the amount of columns to be rendered according\n        // to the given min width of a single item. The new amount of columns also has to respect\n        // the lower and upper limit. When updating the amount, the current page hse to be updated as well.\n        useEffect(() => {\n            if (!columnWrapperRef.current) {\n                return;\n            }\n\n            const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);\n            if (!firstItem) {\n                return;\n            }\n\n            // Get the width of the first column to calculate how many columns fit in one page\n            // according to the given minWidth per column\n            const columnWidth = firstItem.getBoundingClientRect().width;\n\n            // Limit columns per page for given min and max values\n            const allowForLessColumns = columnsPerPage - 1 >= minColumns;\n            const allowForMoreColumns = columnsPerPage + 1 <= maxColumns;\n\n            // The threshold is required to avoid jumping between bigger and smaller after the columns per page\n            // has changed, and it continues to resize\n            const goSmaller = allowForLessColumns && columnWidth + MIN_WITH_THRESHOLD <= minColumnWith;\n            const goBigger = allowForMoreColumns && (columnsPerPage + 1) * minColumnWith <= columnWrapperWidth!;\n\n            // During resizing, we don't want any animation\n            setIsResizePage(true);\n\n            if (goBigger) {\n                const newValue = columnsPerPage + 1;\n                setColumnsPerPage(newValue);\n                updatePageOnColumnsSizeChange(firstItem, newValue);\n                return;\n            }\n\n            if (goSmaller) {\n                const newValue = columnsPerPage - 1;\n                setColumnsPerPage(newValue);\n                updatePageOnColumnsSizeChange(firstItem, newValue);\n                return;\n            }\n        }, [columnWrapperWidth, columnWrapperRef.current, children, columnsPerPage]);\n\n        const handlePrevClick = () => {\n            setIsResizePage(false);\n\n            const pageNumber = currentPage - 1;\n            setCurrentPage(pageNumber);\n            onPreviousClick(pageNumber, columnsPerPage);\n        };\n\n        const handleNextClick = () => {\n            setIsResizePage(false);\n\n            const pageNumber = currentPage + 1;\n            setCurrentPage(pageNumber);\n            onNextClick(pageNumber, columnsPerPage);\n        };\n\n        if (!children) {\n            return null;\n        }\n\n        // Split the children/columns in chunks according to the current columns per page size\n        // and get the current page chunk for rendering\n        const columnsToDisplay = chunk(children as ReactElement<ColumnItemProps>[], columnsPerPage)[currentPage];\n\n        const showPageButtons = minColumns < (children as ReactElement<ColumnItemProps>[]).length;\n\n        const disablePreviousPage = currentPage === 0;\n        const disableNextPage =\n            currentPage === Math.ceil((children as ReactElement<ColumnItemProps>[]).length / columnsPerPage) - 1;\n\n        const wrapperClassName = classNames(\n            'ResponsiveColumnStripe',\n            'display-flex align-items-center',\n            'overflow-hidden',\n            className\n        );\n\n        const baseButtonClassName = classNames(\n            'align-items-center',\n            'align-self-stretch',\n            'display-flex',\n            'hover-scale-105',\n            'hover-text-color-darkest',\n            'padding-10',\n            'cursor-pointer',\n            'text-color-darker',\n            'text-size-12'\n        );\n\n        const disabledButtonClassName = 'pointer-events-none opacity-30';\n\n        const previousButtonClassName = classNames(\n            'PreviousButton',\n            baseButtonClassName,\n            disablePreviousPage && disabledButtonClassName\n        );\n\n        const nextButtonClassName = classNames(\n            'NextButton',\n            baseButtonClassName,\n            disableNextPage && disabledButtonClassName\n        );\n\n        const mergedColumnsWrapperClassName = classNames(\n            'ColumnWrapper',\n            'flex-1-1',\n            'display-flex',\n            columnsWrapperClassName\n        );\n\n        const columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';\n\n        // Use the given custom component type \"div\" or any other. Clone the children to inject certain\n        // properties that are required to stretch the items and deal with their size.\n        const columns = (\n            <ComponentType className={mergedColumnsWrapperClassName}>\n                {Children.map(columnsToDisplay, column =>\n                    cloneElement(column, {\n                        className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${column.props?.className || ''}`,\n                        // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },\n                        'data-key': column.key,\n                    })\n                )}\n            </ComponentType>\n        );\n\n        return (\n            <div {...remainingProps} ref={ref} className={wrapperClassName}>\n                {showPageButtons && (\n                    <div className={previousButtonClassName} onClick={handlePrevClick}>\n                        <span className='uikit-icon icon-chevron-left' />\n                    </div>\n                )}\n                <div className='ColumnsArea flex-1-1 overflow-hidden' ref={columnWrapperRef}>\n                    {disableAnimation || isResizePage ? columns : null}\n                    {!disableAnimation && !isResizePage && (\n                        <AnimatePresence mode='wait' custom={animationDirection}>\n                            <motion.div\n                                key={currentPage}\n                                variants={variants}\n                                initial={enableInitialAnimation ? 'pageEnter' : false}\n                                animate='pageCenter'\n                                custom={animationDirection}\n                                transition={DEFAULT_TRANSITION}\n                            >\n                                {columns}\n                            </motion.div>\n                        </AnimatePresence>\n                    )}\n                </div>\n                {showPageButtons && (\n                    <div className={nextButtonClassName} onClick={handleNextClick}>\n                        <span className='uikit-icon icon-chevron-right' />\n                    </div>\n                )}\n            </div>\n        );\n    }\n);\n\nexport default ResponsiveColumnStripe;\n"],"mappings":"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"}

package/components/rules/RuleConnector.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
+import { IconType } from '../icon/Icon';
 export type RuleConnectorProps = {
     /**
      * The placement for the connector.
@@ -9,11 +10,17 @@ export type RuleConnectorProps = {
      */
     placement?: 'start' | 'center' | 'end';
     /**
-     * The rioglyph icon name.
+     * The uikit-icon icon name.
      *
-     * @default 'rioglyph-plus'
+     * @default 'icon-plus'
      */
-    icon?: string;
+    iconName?: IconType;
+    /**
+     * Legacy alias for `iconName`.
+     *
+     * @deprecated Use `iconName` instead.
+     */
+    icon?: IconType;
     /**
      * Defines whether the connector is shown.
      *