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

package/components/rules/RuleConnector.js

@@ -1,60 +1,37 @@
-import { jsxs as v, jsx as o } from "react/jsx-runtime";
 import e from "../../utils/classNames.js";
-const y = (n) => n.replace("bg", "border-color"), l = e(
-  "width-20",
-  "height-20",
-  "rounded-circle",
-  "position-relative",
-  "z-index-2",
-  "box-sizing-content-box"
-), c = e("position-relative", "width-20", "height-20"), s = (n) => {
-  const {
-    placement: p = "center",
-    icon: g = "rioglyph-plus",
-    hidden: m = !1,
-    background: i = "bg-lightest",
-    pageBackground: t = "bg-white",
-    contentClassName: h = "text-color-light",
-    hasBorder: r = !1,
-    borderColor: a = "",
-    className: u = "",
-    children: d,
-    ...C
-  } = n, N = e(
-    "RuleConnector",
-    "height-20",
-    "display-flex",
-    `justify-content-${p}`,
-    "align-items-center",
-    "position-relative",
-    m && "opacity-0",
-    u
-  ), x = e(
-    "margin-right--10",
-    l,
-    t,
-    r && `border ${a}`
-  ), f = e("right-50pct", c, t), b = e(
-    "padding-left-20 padding-right-20",
-    "z-index-1",
-    i,
-    r && `border ${y(i)}`
-  ), B = e(
-    "margin-left--10",
-    l,
-    t,
-    r && `border ${a}`
-  ), R = e("left-50pct", c, t);
-  return /* @__PURE__ */ v("div", { "data-testid": "ruleConnector", ...C, className: N, children: [
-    /* @__PURE__ */ o("div", { className: x, children: /* @__PURE__ */ o("div", { className: f }) }),
-    /* @__PURE__ */ o("span", { className: b, children: /* @__PURE__ */ o("span", { className: h, children: d || /* @__PURE__ */ o("span", { className: `rioglyph ${g}`, "data-testid": "ruleConnectorIcon" }) }) }),
-    /* @__PURE__ */ o("div", { className: B, children: /* @__PURE__ */ o("div", { className: R }) })
-  ] });
+import { normalizeIconName as t } from "../../utils/iconNames.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/rules/RuleConnector.tsx
+var i = (e) => e.replace("bg", "border-color"), a = e("width-20", "height-20", "rounded-circle", "position-relative", "z-index-2", "box-sizing-content-box"), o = e("position-relative", "width-20", "height-20"), s = (s) => {
+	let { placement: c = "center", iconName: l, icon: u, hidden: d = !1, background: f = "bg-lightest", pageBackground: p = "bg-white", contentClassName: m = "text-color-light", hasBorder: h = !1, borderColor: g = "", className: _ = "", children: v, ...y } = s, b = l ?? u ?? "icon-plus", x = e("RuleConnector", "height-20", "display-flex", `justify-content-${c}`, "align-items-center", "position-relative", d && "opacity-0", _), S = e("margin-right--10", a, p, h && `border ${g}`), C = e("right-50pct", o, p), w = e("padding-left-20 padding-right-20", "z-index-1", f, h && `border ${i(f)}`), T = e("margin-left--10", a, p, h && `border ${g}`), E = e("left-50pct", o, p);
+	return /* @__PURE__ */ r("div", {
+		"data-testid": "ruleConnector",
+		...y,
+		className: x,
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: S,
+				children: /* @__PURE__ */ n("div", { className: C })
+			}),
+			/* @__PURE__ */ n("span", {
+				className: w,
+				children: /* @__PURE__ */ n("span", {
+					className: m,
+					children: v || /* @__PURE__ */ n("span", {
+						className: `uikit-icon ${t(b)}`,
+						"data-testid": "ruleConnectorIcon"
+					})
+				})
+			}),
+			/* @__PURE__ */ n("div", {
+				className: T,
+				children: /* @__PURE__ */ n("div", { className: E })
+			})
+		]
+	});
 };
-s.START = "start";
-s.CENTER = "center";
-s.END = "end";
-export {
-  s as default
-};
-//# sourceMappingURL=RuleConnector.js.map
+s.START = "start", s.CENTER = "center", s.END = "end";
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=RuleConnector.js.map

package/components/rules/RuleConnector.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuleConnector.js","sources":["../../../src/components/rules/RuleConnector.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nconst getBorderColorFromBg = (bg: string) => bg.replace('bg', 'border-color');\n\nconst commonRoundedClasses = classNames(\n    'width-20',\n    'height-20',\n    'rounded-circle',\n    'position-relative',\n    'z-index-2',\n    'box-sizing-content-box'\n);\n\nconst commonRoundedBorderClippingClasses = classNames('position-relative', 'width-20', 'height-20');\n\nexport type RuleConnectorProps = {\n    /**\n     * The placement for the connector.\n     *\n     * Possible values are `start`, `center` and `end`.\n     *\n     * @default 'center'\n     */\n    placement?: 'start' | 'center' | 'end';\n\n    /**\n     * The rioglyph icon name.\n     *\n     * @default 'rioglyph-plus'\n     */\n    icon?: string;\n\n    /**\n     * Defines whether the connector is shown.\n     *\n     * @default false\n     */\n    hidden?: boolean;\n\n    /**\n     * Background color of the connector itself.\n     *\n     * @default 'bg-lightest'\n     */\n    background?: string;\n\n    /**\n     * Background color of the surrounding area where the rule containers are placed.\n     *\n     * @default 'bg-white'\n     */\n    pageBackground?: string;\n\n    /**\n     * Classes to be set on the connector content.\n     *\n     * @default 'text-color-light'\n     */\n    contentClassName?: string;\n\n    /**\n     * Defines whether the connector has a border.\n     *\n     * @default false\n     */\n    hasBorder?: boolean;\n\n    /**\n     * The border color class name.\n     */\n    borderColor?: string;\n\n    /**\n     * Additional classes for the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;\n\nconst RuleConnector = (props: PropsWithChildren<RuleConnectorProps>) => {\n    const {\n        placement = 'center',\n        icon = 'rioglyph-plus',\n        hidden = false,\n        background = 'bg-lightest',\n        pageBackground = 'bg-white',\n        contentClassName = 'text-color-light',\n        hasBorder = false,\n        borderColor = '',\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const wrapperClassNames = classNames(\n        'RuleConnector',\n        'height-20',\n        'display-flex',\n        `justify-content-${placement}`,\n        'align-items-center',\n        'position-relative',\n        hidden && 'opacity-0',\n        className\n    );\n\n    const leftRoundedBox = classNames(\n        'margin-right--10',\n        commonRoundedClasses,\n        pageBackground,\n        hasBorder && `border ${borderColor}`\n    );\n\n    const leftRoundedBoxBorderClipping = classNames('right-50pct', commonRoundedBorderClippingClasses, pageBackground);\n\n    const contentWrapperClassNames = classNames(\n        'padding-left-20 padding-right-20',\n        'z-index-1',\n        background,\n        hasBorder && `border ${getBorderColorFromBg(background)}`\n    );\n\n    const rightRoundedBox = classNames(\n        'margin-left--10',\n        commonRoundedClasses,\n        pageBackground,\n        hasBorder && `border ${borderColor}`\n    );\n\n    const rightRoundedBoxBorderClipping = classNames('left-50pct', commonRoundedBorderClippingClasses, pageBackground);\n\n    return (\n        <div data-testid='ruleConnector' {...remainingProps} className={wrapperClassNames}>\n            <div className={leftRoundedBox}>\n                <div className={leftRoundedBoxBorderClipping} />\n            </div>\n            <span className={contentWrapperClassNames}>\n                <span className={contentClassName}>\n                    {children ? children : <span className={`rioglyph ${icon}`} data-testid='ruleConnectorIcon' />}\n                </span>\n            </span>\n            <div className={rightRoundedBox}>\n                <div className={rightRoundedBoxBorderClipping} />\n            </div>\n        </div>\n    );\n};\n\nRuleConnector.START = 'start';\nRuleConnector.CENTER = 'center';\nRuleConnector.END = 'end';\n\nexport default RuleConnector;\n"],"names":["getBorderColorFromBg","bg","commonRoundedClasses","classNames","commonRoundedBorderClippingClasses","RuleConnector","props","placement","icon","hidden","background","pageBackground","contentClassName","hasBorder","borderColor","className","children","remainingProps","wrapperClassNames","leftRoundedBox","leftRoundedBoxBorderClipping","contentWrapperClassNames","rightRoundedBox","rightRoundedBoxBorderClipping","jsx"],"mappings":";;AAIA,MAAMA,IAAuB,CAACC,MAAeA,EAAG,QAAQ,MAAM,cAAc,GAEtEC,IAAuBC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAEMC,IAAqCD,EAAW,qBAAqB,YAAY,WAAW,GAiE5FE,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,YAAAC,IAAa;AAAA,IACb,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,IACZ,aAAAC,IAAc;AAAA,IACd,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHX,GAEEY,IAAoBf;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmBI,CAAS;AAAA,IAC5B;AAAA,IACA;AAAA,IACAE,KAAU;AAAA,IACVM;AAAA,EAAA,GAGEI,IAAiBhB;AAAA,IACnB;AAAA,IACAD;AAAA,IACAS;AAAA,IACAE,KAAa,UAAUC,CAAW;AAAA,EAAA,GAGhCM,IAA+BjB,EAAW,eAAeC,GAAoCO,CAAc,GAE3GU,IAA2BlB;AAAA,IAC7B;AAAA,IACA;AAAA,IACAO;AAAA,IACAG,KAAa,UAAUb,EAAqBU,CAAU,CAAC;AAAA,EAAA,GAGrDY,IAAkBnB;AAAA,IACpB;AAAA,IACAD;AAAA,IACAS;AAAA,IACAE,KAAa,UAAUC,CAAW;AAAA,EAAA,GAGhCS,IAAgCpB,EAAW,cAAcC,GAAoCO,CAAc;AAEjH,2BACK,OAAA,EAAI,eAAY,iBAAiB,GAAGM,GAAgB,WAAWC,GAC5D,UAAA;AAAA,IAAA,gBAAAM,EAAC,SAAI,WAAWL,GACZ,4BAAC,OAAA,EAAI,WAAWC,GAA8B,EAAA,CAClD;AAAA,sBACC,QAAA,EAAK,WAAWC,GACb,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWZ,GACZ,UAAAI,KAAsB,gBAAAQ,EAAC,QAAA,EAAK,WAAW,YAAYhB,CAAI,IAAI,eAAY,qBAAoB,GAChG,EAAA,CACJ;AAAA,IACA,gBAAAgB,EAAC,SAAI,WAAWF,GACZ,4BAAC,OAAA,EAAI,WAAWC,GAA+B,EAAA,CACnD;AAAA,EAAA,GACJ;AAER;AAEAlB,EAAc,QAAQ;AACtBA,EAAc,SAAS;AACvBA,EAAc,MAAM;"}
+{"version":3,"file":"RuleConnector.js","names":[],"sources":["../../../src/components/rules/RuleConnector.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport { normalizeIconName } from '../../utils/iconNames';\nimport type { IconType } from '../icon/Icon';\n\nconst getBorderColorFromBg = (bg: string) => bg.replace('bg', 'border-color');\n\nconst commonRoundedClasses = classNames(\n    'width-20',\n    'height-20',\n    'rounded-circle',\n    'position-relative',\n    'z-index-2',\n    'box-sizing-content-box'\n);\n\nconst commonRoundedBorderClippingClasses = classNames('position-relative', 'width-20', 'height-20');\n\nexport type RuleConnectorProps = {\n    /**\n     * The placement for the connector.\n     *\n     * Possible values are `start`, `center` and `end`.\n     *\n     * @default 'center'\n     */\n    placement?: 'start' | 'center' | 'end';\n\n    /**\n     * The uikit-icon icon name.\n     *\n     * @default 'icon-plus'\n     */\n    iconName?: IconType;\n\n    /**\n     * Legacy alias for `iconName`.\n     *\n     * @deprecated Use `iconName` instead.\n     */\n    icon?: IconType;\n\n    /**\n     * Defines whether the connector is shown.\n     *\n     * @default false\n     */\n    hidden?: boolean;\n\n    /**\n     * Background color of the connector itself.\n     *\n     * @default 'bg-lightest'\n     */\n    background?: string;\n\n    /**\n     * Background color of the surrounding area where the rule containers are placed.\n     *\n     * @default 'bg-white'\n     */\n    pageBackground?: string;\n\n    /**\n     * Classes to be set on the connector content.\n     *\n     * @default 'text-color-light'\n     */\n    contentClassName?: string;\n\n    /**\n     * Defines whether the connector has a border.\n     *\n     * @default false\n     */\n    hasBorder?: boolean;\n\n    /**\n     * The border color class name.\n     */\n    borderColor?: string;\n\n    /**\n     * Additional classes for the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;\n\nconst RuleConnector = (props: PropsWithChildren<RuleConnectorProps>) => {\n    const {\n        placement = 'center',\n        iconName,\n        icon: legacyIcon,\n        hidden = false,\n        background = 'bg-lightest',\n        pageBackground = 'bg-white',\n        contentClassName = 'text-color-light',\n        hasBorder = false,\n        borderColor = '',\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const resolvedIconName = iconName ?? legacyIcon ?? 'icon-plus';\n\n    const wrapperClassNames = classNames(\n        'RuleConnector',\n        'height-20',\n        'display-flex',\n        `justify-content-${placement}`,\n        'align-items-center',\n        'position-relative',\n        hidden && 'opacity-0',\n        className\n    );\n\n    const leftRoundedBox = classNames(\n        'margin-right--10',\n        commonRoundedClasses,\n        pageBackground,\n        hasBorder && `border ${borderColor}`\n    );\n\n    const leftRoundedBoxBorderClipping = classNames('right-50pct', commonRoundedBorderClippingClasses, pageBackground);\n\n    const contentWrapperClassNames = classNames(\n        'padding-left-20 padding-right-20',\n        'z-index-1',\n        background,\n        hasBorder && `border ${getBorderColorFromBg(background)}`\n    );\n\n    const rightRoundedBox = classNames(\n        'margin-left--10',\n        commonRoundedClasses,\n        pageBackground,\n        hasBorder && `border ${borderColor}`\n    );\n\n    const rightRoundedBoxBorderClipping = classNames('left-50pct', commonRoundedBorderClippingClasses, pageBackground);\n\n    return (\n        <div data-testid='ruleConnector' {...remainingProps} className={wrapperClassNames}>\n            <div className={leftRoundedBox}>\n                <div className={leftRoundedBoxBorderClipping} />\n            </div>\n            <span className={contentWrapperClassNames}>\n                <span className={contentClassName}>\n                    {children ? (\n                        children\n                    ) : (\n                        <span\n                            className={`uikit-icon ${normalizeIconName(resolvedIconName)}`}\n                            data-testid='ruleConnectorIcon'\n                        />\n                    )}\n                </span>\n            </span>\n            <div className={rightRoundedBox}>\n                <div className={rightRoundedBoxBorderClipping} />\n            </div>\n        </div>\n    );\n};\n\nRuleConnector.START = 'start';\nRuleConnector.CENTER = 'center';\nRuleConnector.END = 'end';\n\nexport default RuleConnector;\n"],"mappings":";;;;AAMA,IAAM,KAAwB,MAAe,EAAG,QAAQ,MAAM,cAAc,GAEtE,IAAuB,EACzB,YACA,aACA,kBACA,qBACA,aACA,wBACJ,GAEM,IAAqC,EAAW,qBAAqB,YAAY,WAAW,GAwE5F,KAAiB,MAAiD;CACpE,IAAM,EACF,eAAY,UACZ,aACA,MAAM,GACN,YAAS,IACT,gBAAa,eACb,oBAAiB,YACjB,sBAAmB,oBACnB,eAAY,IACZ,iBAAc,IACd,eAAY,IACZ,aACA,GAAG,MACH,GAEE,IAAmB,KAAY,KAAc,aAE7C,IAAoB,EACtB,iBACA,aACA,gBACA,mBAAmB,KACnB,sBACA,qBACA,KAAU,aACV,CACJ,GAEM,IAAiB,EACnB,oBACA,GACA,GACA,KAAa,UAAU,GAC3B,GAEM,IAA+B,EAAW,eAAe,GAAoC,CAAc,GAE3G,IAA2B,EAC7B,oCACA,aACA,GACA,KAAa,UAAU,EAAqB,CAAU,GAC1D,GAEM,IAAkB,EACpB,mBACA,GACA,GACA,KAAa,UAAU,GAC3B,GAEM,IAAgC,EAAW,cAAc,GAAoC,CAAc;CAEjH,OACI,kBAAC,OAAD;EAAK,eAAY;EAAgB,GAAI;EAAgB,WAAW;YAAhE;GACI,kBAAC,OAAD;IAAK,WAAW;cACZ,kBAAC,OAAD,EAAK,WAAW,EAA+B,CAAA;GAC9C,CAAA;GACL,kBAAC,QAAD;IAAM,WAAW;cACb,kBAAC,QAAD;KAAM,WAAW;eACZ,KAGG,kBAAC,QAAD;MACI,WAAW,cAAc,EAAkB,CAAgB;MAC3D,eAAY;KACf,CAAA;IAEH,CAAA;GACJ,CAAA;GACN,kBAAC,OAAD;IAAK,WAAW;cACZ,kBAAC,OAAD,EAAK,WAAW,EAAgC,CAAA;GAC/C,CAAA;EACJ;;AAEb;AAEA,EAAc,QAAQ,SACtB,EAAc,SAAS,UACvB,EAAc,MAAM"}

package/components/rules/RuleContainer.js

@@ -1,50 +1,36 @@
-import { jsxs as k, jsx as n } from "react/jsx-runtime";
-import { Children as x, isValidElement as N } from "react";
-import { AnimatePresence as R, motion as v } from "motion/react";
-import A from "../../utils/classNames.js";
-import w from "./RuleConnector.js";
-const F = (a) => {
-  const {
-    show: l = !0,
-    unchecked: r = !1,
-    background: s = "bg-lightest",
-    borderColor: d = "",
-    hideConnector: c = !1,
-    customConnector: o,
-    className: m = "",
-    children: u,
-    ...p
-  } = a;
-  if (!l)
-    return null;
-  const y = A(
-    "RuleContainerBox",
-    "position-relative",
-    "rounded padding-20",
-    s,
-    r && `border border-width border-style-dashed ${d}`,
-    m
-  ), t = x.toArray(u).filter(Boolean), h = t.length > 1 ? "sync" : "wait";
-  return /* @__PURE__ */ k("div", { className: "RuleContainer", ...p, children: [
-    /* @__PURE__ */ n("div", { className: y, "data-testid": "ruleContainerBox", children: /* @__PURE__ */ n(R, { mode: h, children: t.map((e, C) => {
-      if (!e)
-        return null;
-      const i = e, f = N(e) && e.key != null ? String(e.key) : null, b = `${i.type?.name || i.type || "RuleContainerChild"}-${C}`, g = f || b;
-      return /* @__PURE__ */ n(
-        v.div,
-        {
-          initial: { opacity: 0 },
-          animate: { opacity: 1 },
-          exit: { opacity: 0 },
-          children: e
-        },
-        g
-      );
-    }) }) }),
-    o || /* @__PURE__ */ n(w, { hidden: r || c })
-  ] });
+import e from "../../utils/classNames.js";
+import t from "./RuleConnector.js";
+import { Children as n, isValidElement as r } from "react";
+import { AnimatePresence as i, motion as a } from "motion/react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/rules/RuleContainer.tsx
+var c = (c) => {
+	let { show: l = !0, unchecked: u = !1, background: d = "bg-lightest", borderColor: f = "", hideConnector: p = !1, customConnector: m, className: h = "", children: g, ..._ } = c;
+	if (!l) return null;
+	let v = e("RuleContainerBox", "position-relative", "rounded padding-20", d, u && `border border-width border-style-dashed ${f}`, h), y = n.toArray(g).filter(Boolean), b = y.length > 1 ? "sync" : "wait";
+	return /* @__PURE__ */ s("div", {
+		className: "RuleContainer",
+		..._,
+		children: [/* @__PURE__ */ o("div", {
+			className: v,
+			"data-testid": "ruleContainerBox",
+			children: /* @__PURE__ */ o(i, {
+				mode: b,
+				children: y.map((e, t) => {
+					if (!e) return null;
+					let n = e, i = r(e) && e.key != null ? String(e.key) : null, s = `${n.type?.name || n.type || "RuleContainerChild"}-${t}`, c = i || s;
+					return /* @__PURE__ */ o(a.div, {
+						initial: { opacity: 0 },
+						animate: { opacity: 1 },
+						exit: { opacity: 0 },
+						children: e
+					}, c);
+				})
+			})
+		}), m || /* @__PURE__ */ o(t, { hidden: u || p })]
+	});
 };
-export {
-  F as default
-};
-//# sourceMappingURL=RuleContainer.js.map
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=RuleContainer.js.map

package/components/rules/RuleContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuleContainer.js","sources":["../../../src/components/rules/RuleContainer.tsx"],"sourcesContent":["import { Children, isValidElement, type HTMLAttributes, type JSX, type PropsWithChildren } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport RuleConnector from './RuleConnector';\n\nexport type RuleContainerProps = {\n    /**\n     * Defines whether the container is shown.\n     *\n     * @default true\n     */\n    show?: boolean;\n\n    /**\n     * Determines the container style for when no rule option is selected.\n     *\n     * It also hides the connector in this case.\n     *\n     * @default false\n     */\n    unchecked?: boolean;\n\n    /**\n     * The box background class name.\n     *\n     * @default 'bg-lightest'\n     */\n    background?: string;\n\n    /**\n     * The border color class name.\n     */\n    borderColor?: string;\n\n    /**\n     * Defines whether the connector is shown.\n     *\n     * @default false\n     */\n    hideConnector?: boolean;\n\n    /**\n     * Overwrites the default connector.\n     */\n    customConnector?: string | JSX.Element;\n\n    /**\n     * Additional classes for the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;\n\nconst RuleContainer = (props: PropsWithChildren<RuleContainerProps>) => {\n    const {\n        show = true,\n        unchecked = false,\n        background = 'bg-lightest',\n        borderColor = '',\n        hideConnector = false,\n        customConnector,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    if (!show) {\n        return null;\n    }\n\n    const boxClassNames = classNames(\n        'RuleContainerBox',\n        'position-relative',\n        'rounded padding-20',\n        background,\n        unchecked && `border border-width border-style-dashed ${borderColor}`,\n        className\n    );\n\n    const childrenArray = Children.toArray(children).filter(Boolean);\n    const animatePresenceMode = childrenArray.length > 1 ? 'sync' : 'wait';\n\n    return (\n        <div className='RuleContainer' {...remainingProps}>\n            <div className={boxClassNames} data-testid='ruleContainerBox'>\n                <AnimatePresence mode={animatePresenceMode}>\n                    {childrenArray.map((child, index) => {\n                        if (!child) {\n                            return null;\n                        }\n\n                        // just bending the type system a bit so that it matches the existing implementation :)\n                        const childAsElement = child as unknown as { type: string & { name: string } };\n\n                        const keyFromChild = isValidElement(child) && child.key != null ? String(child.key) : null;\n                        const fallbackKey = `${childAsElement.type?.name || childAsElement.type || 'RuleContainerChild'}-${index}`;\n\n                        const key = keyFromChild || fallbackKey;\n\n                        // In case there are multiple children of RuleContainer, use the\n                        // type name or the type itself as a key to animate between the two children\n                        return (\n                            <motion.div\n                                key={key}\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                            >\n                                {child}\n                            </motion.div>\n                        );\n                    })}\n                </AnimatePresence>\n            </div>\n            {customConnector ? customConnector : <RuleConnector hidden={unchecked || hideConnector} />}\n        </div>\n    );\n};\n\nexport default RuleContainer;\n"],"names":["RuleContainer","props","show","unchecked","background","borderColor","hideConnector","customConnector","className","children","remainingProps","boxClassNames","classNames","childrenArray","Children","animatePresenceMode","jsxs","jsx","AnimatePresence","child","index","childAsElement","keyFromChild","isValidElement","fallbackKey","key","motion","RuleConnector"],"mappings":";;;;;AAqDA,MAAMA,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,eAAAC,IAAgB;AAAA,IAChB,iBAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHT;AAEJ,MAAI,CAACC;AACD,WAAO;AAGX,QAAMS,IAAgBC;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACAR;AAAA,IACAD,KAAa,2CAA2CE,CAAW;AAAA,IACnEG;AAAA,EAAA,GAGEK,IAAgBC,EAAS,QAAQL,CAAQ,EAAE,OAAO,OAAO,GACzDM,IAAsBF,EAAc,SAAS,IAAI,SAAS;AAEhE,SACI,gBAAAG,EAAC,OAAA,EAAI,WAAU,iBAAiB,GAAGN,GAC/B,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAWN,GAAe,eAAY,oBACvC,UAAA,gBAAAM,EAACC,GAAA,EAAgB,MAAMH,GAClB,UAAAF,EAAc,IAAI,CAACM,GAAOC,MAAU;AACjC,UAAI,CAACD;AACD,eAAO;AAIX,YAAME,IAAiBF,GAEjBG,IAAeC,EAAeJ,CAAK,KAAKA,EAAM,OAAO,OAAO,OAAOA,EAAM,GAAG,IAAI,MAChFK,IAAc,GAAGH,EAAe,MAAM,QAAQA,EAAe,QAAQ,oBAAoB,IAAID,CAAK,IAElGK,IAAMH,KAAgBE;AAI5B,aACI,gBAAAP;AAAA,QAACS,EAAO;AAAA,QAAP;AAAA,UAEG,SAAS,EAAE,SAAS,EAAA;AAAA,UACpB,SAAS,EAAE,SAAS,EAAA;AAAA,UACpB,MAAM,EAAE,SAAS,EAAA;AAAA,UAEhB,UAAAP;AAAA,QAAA;AAAA,QALIM;AAAA,MAAA;AAAA,IAQjB,CAAC,GACL,GACJ;AAAA,IACClB,KAAoC,gBAAAU,EAACU,GAAA,EAAc,QAAQxB,KAAaG,EAAA,CAAe;AAAA,EAAA,GAC5F;AAER;"}
+{"version":3,"file":"RuleContainer.js","names":[],"sources":["../../../src/components/rules/RuleContainer.tsx"],"sourcesContent":["import { Children, isValidElement, type HTMLAttributes, type JSX, type PropsWithChildren } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport RuleConnector from './RuleConnector';\n\nexport type RuleContainerProps = {\n    /**\n     * Defines whether the container is shown.\n     *\n     * @default true\n     */\n    show?: boolean;\n\n    /**\n     * Determines the container style for when no rule option is selected.\n     *\n     * It also hides the connector in this case.\n     *\n     * @default false\n     */\n    unchecked?: boolean;\n\n    /**\n     * The box background class name.\n     *\n     * @default 'bg-lightest'\n     */\n    background?: string;\n\n    /**\n     * The border color class name.\n     */\n    borderColor?: string;\n\n    /**\n     * Defines whether the connector is shown.\n     *\n     * @default false\n     */\n    hideConnector?: boolean;\n\n    /**\n     * Overwrites the default connector.\n     */\n    customConnector?: string | JSX.Element;\n\n    /**\n     * Additional classes for the wrapper element.\n     */\n    className?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;\n\nconst RuleContainer = (props: PropsWithChildren<RuleContainerProps>) => {\n    const {\n        show = true,\n        unchecked = false,\n        background = 'bg-lightest',\n        borderColor = '',\n        hideConnector = false,\n        customConnector,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    if (!show) {\n        return null;\n    }\n\n    const boxClassNames = classNames(\n        'RuleContainerBox',\n        'position-relative',\n        'rounded padding-20',\n        background,\n        unchecked && `border border-width border-style-dashed ${borderColor}`,\n        className\n    );\n\n    const childrenArray = Children.toArray(children).filter(Boolean);\n    const animatePresenceMode = childrenArray.length > 1 ? 'sync' : 'wait';\n\n    return (\n        <div className='RuleContainer' {...remainingProps}>\n            <div className={boxClassNames} data-testid='ruleContainerBox'>\n                <AnimatePresence mode={animatePresenceMode}>\n                    {childrenArray.map((child, index) => {\n                        if (!child) {\n                            return null;\n                        }\n\n                        // just bending the type system a bit so that it matches the existing implementation :)\n                        const childAsElement = child as unknown as { type: string & { name: string } };\n\n                        const keyFromChild = isValidElement(child) && child.key != null ? String(child.key) : null;\n                        const fallbackKey = `${childAsElement.type?.name || childAsElement.type || 'RuleContainerChild'}-${index}`;\n\n                        const key = keyFromChild || fallbackKey;\n\n                        // In case there are multiple children of RuleContainer, use the\n                        // type name or the type itself as a key to animate between the two children\n                        return (\n                            <motion.div\n                                key={key}\n                                initial={{ opacity: 0 }}\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                            >\n                                {child}\n                            </motion.div>\n                        );\n                    })}\n                </AnimatePresence>\n            </div>\n            {customConnector ? customConnector : <RuleConnector hidden={unchecked || hideConnector} />}\n        </div>\n    );\n};\n\nexport default RuleContainer;\n"],"mappings":";;;;;;AAqDA,IAAM,KAAiB,MAAiD;CACpE,IAAM,EACF,UAAO,IACP,eAAY,IACZ,gBAAa,eACb,iBAAc,IACd,mBAAgB,IAChB,oBACA,eAAY,IACZ,aACA,GAAG,MACH;CAEJ,IAAI,CAAC,GACD,OAAO;CAGX,IAAM,IAAgB,EAClB,oBACA,qBACA,sBACA,GACA,KAAa,2CAA2C,KACxD,CACJ,GAEM,IAAgB,EAAS,QAAQ,CAAQ,CAAC,CAAC,OAAO,OAAO,GACzD,IAAsB,EAAc,SAAS,IAAI,SAAS;CAEhE,OACI,kBAAC,OAAD;EAAK,WAAU;EAAgB,GAAI;YAAnC,CACI,kBAAC,OAAD;GAAK,WAAW;GAAe,eAAY;aACvC,kBAAC,GAAD;IAAiB,MAAM;cAClB,EAAc,KAAK,GAAO,MAAU;KACjC,IAAI,CAAC,GACD,OAAO;KAIX,IAAM,IAAiB,GAEjB,IAAe,EAAe,CAAK,KAAK,EAAM,OAAO,OAAO,OAAO,EAAM,GAAG,IAAI,MAChF,IAAc,GAAG,EAAe,MAAM,QAAQ,EAAe,QAAQ,qBAAqB,GAAG,KAE7F,IAAM,KAAgB;KAI5B,OACI,kBAAC,EAAO,KAAR;MAEI,SAAS,EAAE,SAAS,EAAE;MACtB,SAAS,EAAE,SAAS,EAAE;MACtB,MAAM,EAAE,SAAS,EAAE;gBAElB;KACO,GANH,CAMG;IAEpB,CAAC;GACY,CAAA;EAChB,CAAA,GACJ,KAAoC,kBAAC,GAAD,EAAe,QAAQ,KAAa,EAAgB,CAAA,CACxF;;AAEb"}

package/components/rules/RulesWrapper.js

@@ -1,10 +1,16 @@
-import { jsx as i } from "react/jsx-runtime";
-import { motion as e, AnimatePresence as r } from "motion/react";
-const n = ({ children: o, ...t }) => (
-  // @ts-expect-error-next-line
-  /* @__PURE__ */ i(e.div, { initial: !1, layout: !0, ...t, children: /* @__PURE__ */ i(r, { children: /* @__PURE__ */ i(e.div, { layout: "position", children: o }) }) })
-);
-export {
-  n as default
-};
-//# sourceMappingURL=RulesWrapper.js.map
+import { AnimatePresence as e, motion as t } from "motion/react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/rules/RulesWrapper.tsx
+var r = ({ children: r, ...i }) => /* @__PURE__ */ n(t.div, {
+	initial: !1,
+	layout: !0,
+	...i,
+	children: /* @__PURE__ */ n(e, { children: /* @__PURE__ */ n(t.div, {
+		layout: "position",
+		children: r
+	}) })
+});
+//#endregion
+export { r as default };
+
+//# sourceMappingURL=RulesWrapper.js.map

package/components/rules/RulesWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"RulesWrapper.js","sources":["../../../src/components/rules/RulesWrapper.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\n\ntype RulesWrapperProps = HTMLAttributes<HTMLDivElement>;\n\nconst RulesWrapper = ({ children, ...remainingProps }: PropsWithChildren<RulesWrapperProps>) => (\n    // @ts-expect-error-next-line\n    <motion.div initial={false} layout {...remainingProps}>\n        <AnimatePresence>\n            <motion.div layout='position'>{children}</motion.div>\n        </AnimatePresence>\n    </motion.div>\n);\n\nexport default RulesWrapper;\n"],"names":["RulesWrapper","children","remainingProps","jsx","motion","AnimatePresence"],"mappings":";;AAKA,MAAMA,IAAe,CAAC,EAAE,UAAAC,GAAU,GAAGC,EAAA;AAAA;AAAA,EAEjC,gBAAAC,EAACC,EAAO,KAAP,EAAW,SAAS,IAAO,QAAM,IAAE,GAAGF,GACnC,4BAACG,GAAA,EACG,UAAA,gBAAAF,EAACC,EAAO,KAAP,EAAW,QAAO,YAAY,UAAAH,GAAS,GAC5C,EAAA,CACJ;AAAA;"}
+{"version":3,"file":"RulesWrapper.js","names":[],"sources":["../../../src/components/rules/RulesWrapper.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\n\ntype RulesWrapperProps = HTMLAttributes<HTMLDivElement>;\n\nconst RulesWrapper = ({ children, ...remainingProps }: PropsWithChildren<RulesWrapperProps>) => (\n    // @ts-expect-error-next-line\n    <motion.div initial={false} layout {...remainingProps}>\n        <AnimatePresence>\n            <motion.div layout='position'>{children}</motion.div>\n        </AnimatePresence>\n    </motion.div>\n);\n\nexport default RulesWrapper;\n"],"mappings":";;;AAKA,IAAM,KAAgB,EAAE,aAAU,GAAG,QAEjC,kBAAC,EAAO,KAAR;CAAY,SAAS;CAAO,QAAA;CAAO,GAAI;WACnC,kBAAC,GAAD,EAAA,UACI,kBAAC,EAAO,KAAR;EAAY,QAAO;EAAY;CAAqB,CAAA,EACvC,CAAA;AACT,CAAA"}

package/components/saveableInput/SaveableDateInput.js

@@ -1,95 +1,84 @@
-import { jsxs as N, jsx as e } from "react/jsx-runtime";
-import { useState as r, useRef as f } from "react";
-import { noop as l } from "es-toolkit/function";
-import h from "../../utils/classNames.js";
-import X from "../button/Button.js";
-import Z from "../datepicker/DatePicker.js";
-import $ from "../../hooks/useIsFocusWithin.js";
-import ee from "../../hooks/useEsc.js";
-const se = "primary", pe = (k) => {
-  const {
-    placeholder: P,
-    value: s = "",
-    isValid: t = !0,
-    errorMessage: m,
-    hideErrorIcon: g = !1,
-    onValueChanged: R = l,
-    onInputChange: c,
-    // for controlled usage
-    onEnterEdit: V = l,
-    onExitEdit: b = l,
-    onCancel: S = l,
-    buttonStyle: B = se,
-    inputClassName: T,
-    inputProps: D,
-    invalidExitBehavior: C = "stay-open",
-    datePickerProps: F = {},
-    disabled: w = !1,
-    className: O,
-    ...W
-  } = k, y = c !== void 0, [a, p] = r(s), [n, u] = r(!1), [j, E] = r(!1), [A, i] = r(!1), I = f(null), L = f(null), o = f(a);
-  $({
-    ref: I,
-    onFocusWithin: () => {
-      E(!0);
-    },
-    onBlurWithin: () => {
-      E(!1);
-    }
-  }), ee(() => {
-    j && n && v();
-  });
-  const [U, _] = r(s);
-  U !== s && (p(s), _(s), n || (o.current = s));
-  const z = () => {
-    n ? M() : (u(!0), o.current = a, i(!0), V());
-  }, M = () => {
-    t ? (u(!1), R(a, o.current), b(!0), i(!1)) : C === "reset-and-close" && v();
-  }, v = () => {
-    u(!1), y ? c(o.current, !0) : p(o.current), i(!1), S(), b(!1);
-  }, Y = (x, Q) => {
-    y ? c(x, Q) : p(x);
-  }, q = () => i(!1), G = h("form-group", !t && "has-feedback has-error", O), H = h("rioglyph", n ? "rioglyph-ok" : "rioglyph-pencil"), J = h("margin-0 width-100pct", T), K = w || n && !t && C === "stay-open";
-  let d = {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  };
-  return !t && g && (d = { ...d, paddingRight: "10px" }), /* @__PURE__ */ N("div", { ref: I, ...W, className: G, children: [
-    /* @__PURE__ */ N("div", { className: "input-group", children: [
-      /* @__PURE__ */ e(
-        Z,
-        {
-          ...F,
-          open: A,
-          className: J,
-          inputProps: {
-            ...D,
-            placeholder: P,
-            disabled: !n,
-            style: d
-          },
-          value: a,
-          onChange: Y,
-          onClose: q
-        }
-      ),
-      !t && !g && /* @__PURE__ */ e("span", { className: "right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign" }),
-      /* @__PURE__ */ e("div", { className: "input-group-btn", children: /* @__PURE__ */ e(
-        X,
-        {
-          ref: L,
-          bsStyle: B,
-          iconOnly: !0,
-          onClick: z,
-          disabled: K,
-          children: /* @__PURE__ */ e("span", { className: H })
-        }
-      ) })
-    ] }),
-    !t && m && /* @__PURE__ */ e("span", { className: "help-block z-index-max", children: /* @__PURE__ */ e("span", { children: m }) })
-  ] });
+import e from "../../hooks/useIsFocusWithin.js";
+import t from "../../hooks/useEsc.js";
+import n from "../../utils/classNames.js";
+import r from "../button/Button.js";
+import "../../Button.js";
+import i from "../datepicker/DatePicker.js";
+import { useRef as a, useState as o } from "react";
+import { noop as s } from "es-toolkit/function";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/saveableInput/SaveableDateInput.tsx
+var u = "primary", d = (d) => {
+	let { placeholder: f, value: p = "", isValid: m = !0, errorMessage: h, hideErrorIcon: g = !1, onValueChanged: _ = s, onInputChange: v, onEnterEdit: y = s, onExitEdit: b = s, onCancel: x = s, buttonStyle: S = u, inputClassName: C, inputProps: w, invalidExitBehavior: T = "stay-open", datePickerProps: E = {}, disabled: D = !1, className: O, ...k } = d, A = v !== void 0, [j, M] = o(p), [N, P] = o(!1), [F, I] = o(!1), [L, R] = o(!1), z = a(null), B = a(null), V = a(j);
+	e({
+		ref: z,
+		onFocusWithin: () => {
+			I(!0);
+		},
+		onBlurWithin: () => {
+			I(!1);
+		}
+	}), t(() => {
+		F && N && K();
+	});
+	let [H, U] = o(p);
+	H !== p && (M(p), U(p), N || (V.current = p));
+	let W = () => {
+		N ? G() : (P(!0), V.current = j, R(!0), y());
+	}, G = () => {
+		m ? (P(!1), _(j, V.current), b(!0), R(!1)) : T === "reset-and-close" && K();
+	}, K = () => {
+		P(!1), A ? v(V.current, !0) : M(V.current), R(!1), x(), b(!1);
+	}, q = (e, t) => {
+		A ? v(e, t) : M(e);
+	}, J = () => R(!1), Y = n("form-group", !m && "has-feedback has-error", O), X = n("uikit-icon", N ? "icon-ok" : "icon-pencil"), Z = n("margin-0 width-100pct", C), Q = D || N && !m && T === "stay-open", $ = {
+		borderTopRightRadius: 0,
+		borderBottomRightRadius: 0
+	};
+	return !m && g && ($ = {
+		...$,
+		paddingRight: "10px"
+	}), /* @__PURE__ */ l("div", {
+		ref: z,
+		...k,
+		className: Y,
+		children: [/* @__PURE__ */ l("div", {
+			className: "input-group",
+			children: [
+				/* @__PURE__ */ c(i, {
+					...E,
+					open: L,
+					className: Z,
+					inputProps: {
+						...w,
+						placeholder: f,
+						disabled: !N,
+						style: $
+					},
+					value: j,
+					onChange: q,
+					onClose: J
+				}),
+				!m && !g && /* @__PURE__ */ c("span", { className: "right-25 margin-right-10 form-control-feedback uikit-icon icon-error-sign" }),
+				/* @__PURE__ */ c("div", {
+					className: "input-group-btn",
+					children: /* @__PURE__ */ c(r, {
+						ref: B,
+						bsStyle: S,
+						iconOnly: !0,
+						onClick: W,
+						disabled: Q,
+						children: /* @__PURE__ */ c("span", { className: X })
+					})
+				})
+			]
+		}), !m && h && /* @__PURE__ */ c("span", {
+			className: "help-block z-index-max",
+			children: /* @__PURE__ */ c("span", { children: h })
+		})]
+	});
 };
-export {
-  pe as default
-};
-//# sourceMappingURL=SaveableDateInput.js.map
+//#endregion
+export { d as default };
+
+//# sourceMappingURL=SaveableDateInput.js.map

package/components/saveableInput/SaveableDateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SaveableDateInput.js","sources":["../../../src/components/saveableInput/SaveableDateInput.tsx"],"sourcesContent":["import { useRef, useState, type HTMLAttributes, type CSSProperties } from 'react';\nimport { noop } from 'es-toolkit/function';\nimport type { Moment } from 'moment';\n\nimport classNames from '../../utils/classNames';\nimport Button from '../../Button';\nimport DatePicker, { type DatePickerProps } from '../datepicker/DatePicker';\nimport useIsFocusWithin from '../../hooks/useIsFocusWithin';\nimport useEsc from '../../hooks/useEsc';\n\nconst DEFAULT_BUTTON_STYLE = 'primary';\n\nexport type SaveableDateInputProps = {\n    /**\n     * The input placeholder.\n     */\n    placeholder?: string;\n\n    /**\n     * The actual input value.\n     */\n    value?: Date | Moment | string;\n\n    /**\n     * Used to control the save button from the outside to disable it in case\n     * the entered value is not valid.\n     *\n     * @default true\n     */\n    isValid?: boolean;\n\n    /**\n     * This is the error message that is shown below the input. It uses the built-in error handling,\n     * and will be shown when the \"isValid\" prop is set to false.\n     */\n    errorMessage?: string | React.ReactNode;\n\n    /**\n     * Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop\n     * is set to false.\n     *\n     * @default false\n     */\n    hideErrorIcon?: boolean;\n\n    /**\n     * Callback function triggered when the value changes and is saved.\n     *\n     * @param value\n     * @param previousValue\n     * @returns\n     */\n    onValueChanged?: (value: Moment | string, previousValue: Moment | string | Date) => void;\n\n    /**\n     * Callback function that gets triggered on every input change. Use this to control the component\n     * or when implementing key validation.\n     *\n     * @param keyValue the key value that has been entered\n     * @returns\n     */\n    onInputChange?: (value: Moment | string, isValid: boolean) => void;\n\n    /**\n     * Callback function that gets triggered when the input is in edit mode. Use this\n     * to control the component and to handle the previous value on the outside.\n     *\n     * @returns\n     */\n    onEnterEdit?: () => void;\n\n    /**\n     * Callback function that gets triggered when edit mode is exited (either saved or cancelled).\n     *\n     * @param wasSaved - true if value was saved, false if cancelled/reset\n     * @returns\n     */\n    onExitEdit?: (wasSaved: boolean) => void;\n\n    /**\n     * Callback function that gets triggered when the user aborts the edit mode. Use this\n     * to control the component and handle the resetting of previous value on the outside.\n     *\n     * @returns\n     */\n    onCancel?: () => void;\n\n    /**\n     * Behavior when trying to exit edit mode with invalid input:\n     * - 'stay-open': Keep edit mode open until valid input is provided\n     * - 'reset-and-close': Close edit mode and reset to initial value\n     *\n     * @default 'stay-open'\n     */\n    invalidExitBehavior?: 'stay-open' | 'reset-and-close';\n\n    /**\n     * Defines the button style: `default` or `primary`.\n     *\n     * @default 'primary'\n     */\n    buttonStyle?: 'primary' | 'default';\n\n    /**\n     * Additional HTML attributes to be set on the input element.\n     */\n    inputProps?: HTMLAttributes<HTMLInputElement>;\n\n    /**\n     * Additional props passed to the underlying DatePicker component.\n     *\n     * @default {}\n     */\n    datePickerProps?: DatePickerProps;\n\n    /**\n     * Disables the component so the user cannot enter the edit mode.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the input itself.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\n// Validate date outside the component (via form library) if controlled usage\n// Use as controlled component: value, is Valid, and change callback\n// - if is valid, on save, call callback \"onValueChanged\"\n// - if not valid, keep edit mode open, outside is showing error message\n// - close edit mode only if date is valid - or close edit mode and reset to initial value -> customizable via prop\n// Keep picker open until user has clicked save, otherwise he might forget to click save if the dropdown closes automatically\n\nconst SaveableDateInput = (props: SaveableDateInputProps) => {\n    const {\n        placeholder,\n        value: externalValue = '',\n        isValid = true,\n        errorMessage,\n        hideErrorIcon = false,\n        onValueChanged = noop,\n        onInputChange, // for controlled usage\n        onEnterEdit = noop,\n        onExitEdit = noop,\n        onCancel = noop,\n        buttonStyle = DEFAULT_BUTTON_STYLE,\n        inputClassName,\n        inputProps,\n        invalidExitBehavior = 'stay-open',\n        datePickerProps = {},\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    // if callback is provided, assume it is controlled case\n    const isControlledCase = onInputChange !== undefined;\n\n    const [inputValue, setInputValue] = useState<Date | Moment | string>(externalValue);\n\n    const [editInput, setEditInput] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n\n    const initialInputValueRef = useRef(inputValue);\n\n    useIsFocusWithin({\n        ref: wrapperRef,\n        onFocusWithin: () => {\n            setIsFocused(true);\n        },\n        onBlurWithin: () => {\n            setIsFocused(false);\n        },\n    });\n\n    // Handle escape key to cancel edit mode\n    useEsc(() => {\n        if (isFocused && editInput) {\n            handleCancelEdit();\n        }\n    });\n\n    // Update internal state in a controlled environment\n    const [previousExternalValue, setPreviousExternalValue] = useState(externalValue);\n    if (previousExternalValue !== externalValue) {\n        setInputValue(externalValue);\n        setPreviousExternalValue(externalValue);\n        // Update initial value ref when external value changes while not in edit mode\n        if (!editInput) {\n            initialInputValueRef.current = externalValue;\n        }\n    }\n\n    const handleToggleInput = () => {\n        if (!editInput) {\n            // Enter edit mode\n            setEditInput(true);\n            initialInputValueRef.current = inputValue;\n\n            // open the dropdown\n            setIsPickerOpen(true);\n\n            onEnterEdit();\n        } else {\n            // Try to exit edit mode\n            handleSaveAttempt();\n        }\n    };\n\n    const handleSaveAttempt = () => {\n        if (isValid) {\n            // Save the value (only if valid)\n            setEditInput(false);\n            onValueChanged(inputValue as Moment | string, initialInputValueRef.current);\n            onExitEdit(true);\n\n            // close the dropdown\n            setIsPickerOpen(false);\n        } else {\n            // Handle invalid input based on behavior setting\n            if (invalidExitBehavior === 'reset-and-close') {\n                handleCancelEdit();\n            }\n            // If 'stay-open', do nothing - keep edit mode open\n        }\n    };\n\n    const handleCancelEdit = () => {\n        setEditInput(false);\n\n        // Reset to initial value\n        if (isControlledCase) {\n            // In controlled mode, trigger change to reset to initial value\n            onInputChange(initialInputValueRef.current as Moment | string, true);\n        } else {\n            setInputValue(initialInputValueRef.current);\n        }\n\n        // Close the dropdown\n        setIsPickerOpen(false);\n\n        onCancel();\n        onExitEdit(false);\n    };\n\n    const handleDateChange = (value: Moment | string, isValid: boolean) => {\n        if (isControlledCase) {\n            onInputChange(value, isValid);\n        } else {\n            setInputValue(value);\n        }\n    };\n\n    const handleCloseDropdown = () => setIsPickerOpen(false);\n\n    const wrapperClasses = classNames('form-group', !isValid && 'has-feedback has-error', className);\n\n    const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');\n\n    const dateInputClasses = classNames('margin-0 width-100pct', inputClassName);\n\n    // Button should be disabled if:\n    // - Component is disabled, OR\n    // - In edit mode and invalid input (and behavior is stay-open)\n    const disableButton = disabled || (editInput && !isValid && invalidExitBehavior === 'stay-open');\n\n    let inputStyle: CSSProperties = {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n    };\n\n    if (!isValid && hideErrorIcon) {\n        // If the error icon shall not be shown, remove the input padding to avoid cutting of the date value\n        inputStyle = { ...inputStyle, paddingRight: '10px' };\n    }\n\n    return (\n        <div ref={wrapperRef} {...remainingProps} className={wrapperClasses}>\n            <div className='input-group'>\n                <DatePicker\n                    {...{ ...datePickerProps, open: isPickerOpen }}\n                    className={dateInputClasses}\n                    inputProps={{\n                        ...inputProps,\n                        placeholder,\n                        disabled: !editInput,\n                        style: inputStyle,\n                    }}\n                    value={inputValue}\n                    onChange={handleDateChange}\n                    onClose={handleCloseDropdown}\n                />\n                {!isValid && !hideErrorIcon && (\n                    <span className='right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' />\n                )}\n                <div className='input-group-btn'>\n                    <Button\n                        ref={buttonRef}\n                        bsStyle={buttonStyle}\n                        iconOnly\n                        onClick={handleToggleInput}\n                        disabled={disableButton}\n                    >\n                        <span className={buttonIconClasses} />\n                    </Button>\n                </div>\n            </div>\n            {!isValid && errorMessage && (\n                <span className='help-block z-index-max'>\n                    <span>{errorMessage}</span>\n                </span>\n            )}\n        </div>\n    );\n};\n\nexport default SaveableDateInput;\n"],"names":["DEFAULT_BUTTON_STYLE","SaveableDateInput","props","placeholder","externalValue","isValid","errorMessage","hideErrorIcon","onValueChanged","noop","onInputChange","onEnterEdit","onExitEdit","onCancel","buttonStyle","inputClassName","inputProps","invalidExitBehavior","datePickerProps","disabled","className","remainingProps","isControlledCase","inputValue","setInputValue","useState","editInput","setEditInput","isFocused","setIsFocused","isPickerOpen","setIsPickerOpen","wrapperRef","useRef","buttonRef","initialInputValueRef","useIsFocusWithin","useEsc","handleCancelEdit","previousExternalValue","setPreviousExternalValue","handleToggleInput","handleSaveAttempt","handleDateChange","value","handleCloseDropdown","wrapperClasses","classNames","buttonIconClasses","dateInputClasses","disableButton","inputStyle","jsxs","jsx","DatePicker","Button"],"mappings":"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"}
+{"version":3,"file":"SaveableDateInput.js","names":[],"sources":["../../../src/components/saveableInput/SaveableDateInput.tsx"],"sourcesContent":["import { useRef, useState, type HTMLAttributes, type CSSProperties } from 'react';\nimport { noop } from 'es-toolkit/function';\nimport type { Moment } from 'moment';\n\nimport classNames from '../../utils/classNames';\nimport Button from '../../Button';\nimport DatePicker, { type DatePickerProps } from '../datepicker/DatePicker';\nimport useIsFocusWithin from '../../hooks/useIsFocusWithin';\nimport useEsc from '../../hooks/useEsc';\n\nconst DEFAULT_BUTTON_STYLE = 'primary';\n\nexport type SaveableDateInputProps = {\n    /**\n     * The input placeholder.\n     */\n    placeholder?: string;\n\n    /**\n     * The actual input value.\n     */\n    value?: Date | Moment | string;\n\n    /**\n     * Used to control the save button from the outside to disable it in case\n     * the entered value is not valid.\n     *\n     * @default true\n     */\n    isValid?: boolean;\n\n    /**\n     * This is the error message that is shown below the input. It uses the built-in error handling,\n     * and will be shown when the \"isValid\" prop is set to false.\n     */\n    errorMessage?: string | React.ReactNode;\n\n    /**\n     * Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop\n     * is set to false.\n     *\n     * @default false\n     */\n    hideErrorIcon?: boolean;\n\n    /**\n     * Callback function triggered when the value changes and is saved.\n     *\n     * @param value\n     * @param previousValue\n     * @returns\n     */\n    onValueChanged?: (value: Moment | string, previousValue: Moment | string | Date) => void;\n\n    /**\n     * Callback function that gets triggered on every input change. Use this to control the component\n     * or when implementing key validation.\n     *\n     * @param keyValue the key value that has been entered\n     * @returns\n     */\n    onInputChange?: (value: Moment | string, isValid: boolean) => void;\n\n    /**\n     * Callback function that gets triggered when the input is in edit mode. Use this\n     * to control the component and to handle the previous value on the outside.\n     *\n     * @returns\n     */\n    onEnterEdit?: () => void;\n\n    /**\n     * Callback function that gets triggered when edit mode is exited (either saved or cancelled).\n     *\n     * @param wasSaved - true if value was saved, false if cancelled/reset\n     * @returns\n     */\n    onExitEdit?: (wasSaved: boolean) => void;\n\n    /**\n     * Callback function that gets triggered when the user aborts the edit mode. Use this\n     * to control the component and handle the resetting of previous value on the outside.\n     *\n     * @returns\n     */\n    onCancel?: () => void;\n\n    /**\n     * Behavior when trying to exit edit mode with invalid input:\n     * - 'stay-open': Keep edit mode open until valid input is provided\n     * - 'reset-and-close': Close edit mode and reset to initial value\n     *\n     * @default 'stay-open'\n     */\n    invalidExitBehavior?: 'stay-open' | 'reset-and-close';\n\n    /**\n     * Defines the button style: `default` or `primary`.\n     *\n     * @default 'primary'\n     */\n    buttonStyle?: 'primary' | 'default';\n\n    /**\n     * Additional HTML attributes to be set on the input element.\n     */\n    inputProps?: HTMLAttributes<HTMLInputElement>;\n\n    /**\n     * Additional props passed to the underlying DatePicker component.\n     *\n     * @default {}\n     */\n    datePickerProps?: DatePickerProps;\n\n    /**\n     * Disables the component so the user cannot enter the edit mode.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the input itself.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\n// Validate date outside the component (via form library) if controlled usage\n// Use as controlled component: value, is Valid, and change callback\n// - if is valid, on save, call callback \"onValueChanged\"\n// - if not valid, keep edit mode open, outside is showing error message\n// - close edit mode only if date is valid - or close edit mode and reset to initial value -> customizable via prop\n// Keep picker open until user has clicked save, otherwise he might forget to click save if the dropdown closes automatically\n\nconst SaveableDateInput = (props: SaveableDateInputProps) => {\n    const {\n        placeholder,\n        value: externalValue = '',\n        isValid = true,\n        errorMessage,\n        hideErrorIcon = false,\n        onValueChanged = noop,\n        onInputChange, // for controlled usage\n        onEnterEdit = noop,\n        onExitEdit = noop,\n        onCancel = noop,\n        buttonStyle = DEFAULT_BUTTON_STYLE,\n        inputClassName,\n        inputProps,\n        invalidExitBehavior = 'stay-open',\n        datePickerProps = {},\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    // if callback is provided, assume it is controlled case\n    const isControlledCase = onInputChange !== undefined;\n\n    const [inputValue, setInputValue] = useState<Date | Moment | string>(externalValue);\n\n    const [editInput, setEditInput] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const [isPickerOpen, setIsPickerOpen] = useState(false);\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n\n    const initialInputValueRef = useRef(inputValue);\n\n    useIsFocusWithin({\n        ref: wrapperRef,\n        onFocusWithin: () => {\n            setIsFocused(true);\n        },\n        onBlurWithin: () => {\n            setIsFocused(false);\n        },\n    });\n\n    // Handle escape key to cancel edit mode\n    useEsc(() => {\n        if (isFocused && editInput) {\n            handleCancelEdit();\n        }\n    });\n\n    // Update internal state in a controlled environment\n    const [previousExternalValue, setPreviousExternalValue] = useState(externalValue);\n    if (previousExternalValue !== externalValue) {\n        setInputValue(externalValue);\n        setPreviousExternalValue(externalValue);\n        // Update initial value ref when external value changes while not in edit mode\n        if (!editInput) {\n            initialInputValueRef.current = externalValue;\n        }\n    }\n\n    const handleToggleInput = () => {\n        if (!editInput) {\n            // Enter edit mode\n            setEditInput(true);\n            initialInputValueRef.current = inputValue;\n\n            // open the dropdown\n            setIsPickerOpen(true);\n\n            onEnterEdit();\n        } else {\n            // Try to exit edit mode\n            handleSaveAttempt();\n        }\n    };\n\n    const handleSaveAttempt = () => {\n        if (isValid) {\n            // Save the value (only if valid)\n            setEditInput(false);\n            onValueChanged(inputValue as Moment | string, initialInputValueRef.current);\n            onExitEdit(true);\n\n            // close the dropdown\n            setIsPickerOpen(false);\n        } else {\n            // Handle invalid input based on behavior setting\n            if (invalidExitBehavior === 'reset-and-close') {\n                handleCancelEdit();\n            }\n            // If 'stay-open', do nothing - keep edit mode open\n        }\n    };\n\n    const handleCancelEdit = () => {\n        setEditInput(false);\n\n        // Reset to initial value\n        if (isControlledCase) {\n            // In controlled mode, trigger change to reset to initial value\n            onInputChange(initialInputValueRef.current as Moment | string, true);\n        } else {\n            setInputValue(initialInputValueRef.current);\n        }\n\n        // Close the dropdown\n        setIsPickerOpen(false);\n\n        onCancel();\n        onExitEdit(false);\n    };\n\n    const handleDateChange = (value: Moment | string, isValid: boolean) => {\n        if (isControlledCase) {\n            onInputChange(value, isValid);\n        } else {\n            setInputValue(value);\n        }\n    };\n\n    const handleCloseDropdown = () => setIsPickerOpen(false);\n\n    const wrapperClasses = classNames('form-group', !isValid && 'has-feedback has-error', className);\n\n    const buttonIconClasses = classNames('uikit-icon', editInput ? 'icon-ok' : 'icon-pencil');\n\n    const dateInputClasses = classNames('margin-0 width-100pct', inputClassName);\n\n    // Button should be disabled if:\n    // - Component is disabled, OR\n    // - In edit mode and invalid input (and behavior is stay-open)\n    const disableButton = disabled || (editInput && !isValid && invalidExitBehavior === 'stay-open');\n\n    let inputStyle: CSSProperties = {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n    };\n\n    if (!isValid && hideErrorIcon) {\n        // If the error icon shall not be shown, remove the input padding to avoid cutting of the date value\n        inputStyle = { ...inputStyle, paddingRight: '10px' };\n    }\n\n    return (\n        <div ref={wrapperRef} {...remainingProps} className={wrapperClasses}>\n            <div className='input-group'>\n                <DatePicker\n                    {...{ ...datePickerProps, open: isPickerOpen }}\n                    className={dateInputClasses}\n                    inputProps={{\n                        ...inputProps,\n                        placeholder,\n                        disabled: !editInput,\n                        style: inputStyle,\n                    }}\n                    value={inputValue}\n                    onChange={handleDateChange}\n                    onClose={handleCloseDropdown}\n                />\n                {!isValid && !hideErrorIcon && (\n                    <span className='right-25 margin-right-10 form-control-feedback uikit-icon icon-error-sign' />\n                )}\n                <div className='input-group-btn'>\n                    <Button\n                        ref={buttonRef}\n                        bsStyle={buttonStyle}\n                        iconOnly\n                        onClick={handleToggleInput}\n                        disabled={disableButton}\n                    >\n                        <span className={buttonIconClasses} />\n                    </Button>\n                </div>\n            </div>\n            {!isValid && errorMessage && (\n                <span className='help-block z-index-max'>\n                    <span>{errorMessage}</span>\n                </span>\n            )}\n        </div>\n    );\n};\n\nexport default SaveableDateInput;\n"],"mappings":";;;;;;;;;;AAUA,IAAM,IAAuB,WAkIvB,KAAqB,MAAkC;CACzD,IAAM,EACF,gBACA,OAAO,IAAgB,IACvB,aAAU,IACV,iBACA,mBAAgB,IAChB,oBAAiB,GACjB,kBACA,iBAAc,GACd,gBAAa,GACb,cAAW,GACX,iBAAc,GACd,mBACA,eACA,yBAAsB,aACtB,qBAAkB,CAAC,GACnB,cAAW,IACX,cACA,GAAG,MACH,GAGE,IAAmB,MAAkB,KAAA,GAErC,CAAC,GAAY,KAAiB,EAAiC,CAAa,GAE5E,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,CAAC,GAAW,KAAgB,EAAS,EAAK,GAE1C,CAAC,GAAc,KAAmB,EAAS,EAAK,GAEhD,IAAa,EAAuB,IAAI,GACxC,IAAY,EAA0B,IAAI,GAE1C,IAAuB,EAAO,CAAU;CAa9C,AAXA,EAAiB;EACb,KAAK;EACL,qBAAqB;GACjB,EAAa,EAAI;EACrB;EACA,oBAAoB;GAChB,EAAa,EAAK;EACtB;CACJ,CAAC,GAGD,QAAa;EACT,AAAI,KAAa,KACb,EAAiB;CAEzB,CAAC;CAGD,IAAM,CAAC,GAAuB,KAA4B,EAAS,CAAa;CAChF,AAAI,MAA0B,MAC1B,EAAc,CAAa,GAC3B,EAAyB,CAAa,GAEjC,MACD,EAAqB,UAAU;CAIvC,IAAM,UAA0B;EAC5B,AAAK,IAWD,EAAkB,KATlB,EAAa,EAAI,GACjB,EAAqB,UAAU,GAG/B,EAAgB,EAAI,GAEpB,EAAY;CAKpB,GAEM,UAA0B;EAC5B,AAAI,KAEA,EAAa,EAAK,GAClB,EAAe,GAA+B,EAAqB,OAAO,GAC1E,EAAW,EAAI,GAGf,EAAgB,EAAK,KAGjB,MAAwB,qBACxB,EAAiB;CAI7B,GAEM,UAAyB;EAe3B,AAdA,EAAa,EAAK,GAGd,IAEA,EAAc,EAAqB,SAA4B,EAAI,IAEnE,EAAc,EAAqB,OAAO,GAI9C,EAAgB,EAAK,GAErB,EAAS,GACT,EAAW,EAAK;CACpB,GAEM,KAAoB,GAAwB,MAAqB;EACnE,AAAI,IACA,EAAc,GAAO,CAAO,IAE5B,EAAc,CAAK;CAE3B,GAEM,UAA4B,EAAgB,EAAK,GAEjD,IAAiB,EAAW,cAAc,CAAC,KAAW,0BAA0B,CAAS,GAEzF,IAAoB,EAAW,cAAc,IAAY,YAAY,aAAa,GAElF,IAAmB,EAAW,yBAAyB,CAAc,GAKrE,IAAgB,KAAa,KAAa,CAAC,KAAW,MAAwB,aAEhF,IAA4B;EAC5B,sBAAsB;EACtB,yBAAyB;CAC7B;CAOA,OALI,CAAC,KAAW,MAEZ,IAAa;EAAE,GAAG;EAAY,cAAc;CAAO,IAInD,kBAAC,OAAD;EAAK,KAAK;EAAY,GAAI;EAAgB,WAAW;YAArD,CACI,kBAAC,OAAD;GAAK,WAAU;aAAf;IACI,kBAAC,GAAD;KACU,GAAG;KAAiB,MAAM;KAChC,WAAW;KACX,YAAY;MACR,GAAG;MACH;MACA,UAAU,CAAC;MACX,OAAO;KACX;KACA,OAAO;KACP,UAAU;KACV,SAAS;IACZ,CAAA;IACA,CAAC,KAAW,CAAC,KACV,kBAAC,QAAD,EAAM,WAAU,4EAA6E,CAAA;IAEjG,kBAAC,OAAD;KAAK,WAAU;eACX,kBAAC,GAAD;MACI,KAAK;MACL,SAAS;MACT,UAAA;MACA,SAAS;MACT,UAAU;gBAEV,kBAAC,QAAD,EAAM,WAAW,EAAoB,CAAA;KACjC,CAAA;IACP,CAAA;GACJ;MACJ,CAAC,KAAW,KACT,kBAAC,QAAD;GAAM,WAAU;aACZ,kBAAC,QAAD,EAAA,UAAO,EAAmB,CAAA;EACxB,CAAA,CAET;;AAEb"}

package/components/saveableInput/SaveableInput.d.ts

@@ -1,4 +1,5 @@
 import { default as React, HTMLAttributes } from 'react';
+import { IconType } from '../icon/Icon';
 export type SaveableInputProps = {
     /**
      * The input placeholder.
@@ -80,9 +81,15 @@ export type SaveableInputProps = {
     unit?: string | React.ReactNode;
     /**
      * Icon class name that shall be used. If defined, the input element is wrapped in an input-group
-     * and the icon will be set in an input-addon. Example: `rioglyph-search`.
+     * and the icon will be set in an input-addon. Example: `icon-search`.
      */
-    icon?: string;
+    iconName?: IconType;
+    /**
+     * Legacy alias for `iconName`.
+     *
+     * @deprecated Use `iconName` instead.
+     */
+    icon?: IconType;
     /**
      * Disables the component so the user cannot enter the edit mode.
      *