@rio-cloud/rio-uikit 2.0.1 → 2.2.0

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';\nimport classNames from '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":";;AAGA,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","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;"}

package/components/rules/RuleContainer.js

@@ -1,50 +1,50 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import { Children as f } from "react";
-import C from "classnames";
-import { AnimatePresence as b, motion as x } from "motion/react";
-import y from "./RuleConnector.js";
-const j = (i) => {
+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: a = !0,
-    unchecked: o = !1,
+    show: l = !0,
+    unchecked: r = !1,
     background: s = "bg-lightest",
     borderColor: d = "",
-    hideConnector: l = !1,
-    customConnector: n,
+    hideConnector: c = !1,
+    customConnector: o,
     className: m = "",
-    children: c,
-    ...u
-  } = i;
-  if (!a)
+    children: u,
+    ...p
+  } = a;
+  if (!l)
     return null;
-  const p = C(
+  const y = A(
     "RuleContainerBox",
     "position-relative",
     "rounded padding-20",
     s,
-    o && `border border-width border-style-dashed ${d}`,
+    r && `border border-width border-style-dashed ${d}`,
     m
-  );
-  return /* @__PURE__ */ h("div", { className: "RuleContainer", ...u, children: [
-    /* @__PURE__ */ e("div", { className: p, "data-testid": "ruleContainerBox", children: /* @__PURE__ */ e(b, { mode: "wait", children: f.map(c, (r) => {
-      if (!r)
+  ), 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 t = r;
-      return /* @__PURE__ */ e(
-        x.div,
+      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: r
+          children: e
         },
-        t.type?.name || t.type
+        g
       );
     }) }) }),
-    n || /* @__PURE__ */ e(y, { hidden: o || l })
+    o || /* @__PURE__ */ n(w, { hidden: r || c })
   ] });
 };
 export {
-  j as default
+  F 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, type HTMLAttributes, type JSX, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion } from 'motion/react';\n\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    return (\n        <div className='RuleContainer' {...remainingProps}>\n            <div className={boxClassNames} data-testid='ruleContainerBox'>\n                <AnimatePresence mode='wait'>\n                    {Children.map(children, child => {\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                        // 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={childAsElement.type?.name || childAsElement.type}\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","jsxs","jsx","AnimatePresence","Children","child","childAsElement","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;AAGJ,SACI,gBAAAK,EAAC,OAAA,EAAI,WAAU,iBAAiB,GAAGH,GAC/B,UAAA;AAAA,IAAA,gBAAAI,EAAC,OAAA,EAAI,WAAWH,GAAe,eAAY,oBACvC,UAAA,gBAAAG,EAACC,GAAA,EAAgB,MAAK,QACjB,UAAAC,EAAS,IAAIP,GAAU,CAAAQ,MAAS;AAC7B,UAAI,CAACA;AACD,eAAO;AAIX,YAAMC,IAAiBD;AAIvB,aACI,gBAAAH;AAAA,QAACK,EAAO;AAAA,QAAP;AAAA,UAEG,SAAS,EAAE,SAAS,EAAA;AAAA,UACpB,SAAS,EAAE,SAAS,EAAA;AAAA,UACpB,MAAM,EAAE,SAAS,EAAA;AAAA,UAEhB,UAAAF;AAAA,QAAA;AAAA,QALIC,EAAe,MAAM,QAAQA,EAAe;AAAA,MAAA;AAAA,IAQ7D,CAAC,GACL,GACJ;AAAA,IACCX,KAAoC,gBAAAO,EAACM,GAAA,EAAc,QAAQjB,KAAaG,EAAA,CAAe;AAAA,EAAA,GAC5F;AAER;"}
+{"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;"}

package/components/rules/RulesWrapper.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { motion as e, AnimatePresence as r } from "motion/react";
 const n = ({ children: o, ...t }) => (
-  // @ts-ignore-next-line
+  // @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 {

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-ignore-next-line\n    <motion.div initial={false} layout {...remainingProps}>\n        {/* @ts-ignore-next-line */}\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,GAEnC,4BAACG,GAAA,EACG,UAAA,gBAAAF,EAACC,EAAO,KAAP,EAAW,QAAO,YAAY,UAAAH,GAAS,GAC5C,EAAA,CACJ;AAAA;"}
+{"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;"}

package/components/saveableInput/SaveableDateInput.d.ts

@@ -18,15 +18,20 @@ export type SaveableDateInputProps = {
      */
     isValid?: boolean;
     /**
-     * This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false.
+     * This is the error message that is shown below the input. It uses the built-in error handling,
+     * and will be shown when the "isValid" prop is set to false.
      */
     errorMessage?: string | React.ReactNode;
     /**
-     * Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false.
+     * Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop
+     * is set to false.
+     *
+     * @default false
      */
     hideErrorIcon?: boolean;
     /**
      * Callback function triggered when the value changes and is saved.
+     *
      * @param value
      * @param previousValue
      * @returns
@@ -35,6 +40,7 @@ export type SaveableDateInputProps = {
     /**
      * Callback function that gets triggered on every input change. Use this to control the component
      * or when implementing key validation.
+     *
      * @param keyValue the key value that has been entered
      * @returns
      */
@@ -42,11 +48,13 @@ export type SaveableDateInputProps = {
     /**
      * Callback function that gets triggered when the input is in edit mode. Use this
      * to control the component and to handle the previous value on the outside.
+     *
      * @returns
      */
     onEnterEdit?: () => void;
     /**
      * Callback function that gets triggered when edit mode is exited (either saved or cancelled).
+     *
      * @param wasSaved - true if value was saved, false if cancelled/reset
      * @returns
      */
@@ -54,6 +62,7 @@ export type SaveableDateInputProps = {
     /**
      * Callback function that gets triggered when the user aborts the edit mode. Use this
      * to control the component and handle the resetting of previous value on the outside.
+     *
      * @returns
      */
     onCancel?: () => void;
@@ -67,15 +76,24 @@ export type SaveableDateInputProps = {
     invalidExitBehavior?: 'stay-open' | 'reset-and-close';
     /**
      * Defines the button style: `default` or `primary`.
+     *
+     * @default 'primary'
      */
     buttonStyle?: 'primary' | 'default';
     /**
      * Additional HTML attributes to be set on the input element.
      */
     inputProps?: HTMLAttributes<HTMLInputElement>;
+    /**
+     * Additional props passed to the underlying DatePicker component.
+     *
+     * @default {}
+     */
     datePickerProps?: DatePickerProps;
     /**
      * Disables the component so the user cannot enter the edit mode.
+     *
+     * @default false
      */
     disabled?: boolean;
     /**

package/components/saveableInput/SaveableDateInput.js

@@ -1,7 +1,7 @@
 import { jsxs as N, jsx as e } from "react/jsx-runtime";
 import { useState as r, useRef as f } from "react";
-import h from "classnames";
 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";

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 classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\nimport type { Moment } from 'moment';\n\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, 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 is set to false.\n     */\n    hideErrorIcon?: boolean;\n\n    /**\n     * Callback function triggered when the value changes and is saved.\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     * @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     * @returns\n     */\n    onEnterEdit?: () => void;\n\n    /**\n     * Callback function that gets triggered when edit mode is exited (either saved or cancelled).\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     * @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    buttonStyle?: 'primary' | 'default';\n\n    /**\n     * Additional HTML attributes to be set on the input element.\n     */\n    inputProps?: HTMLAttributes<HTMLInputElement>;\n\n    datePickerProps?: DatePickerProps;\n\n    /**\n     * Disables the component so the user cannot enter the edit mode.\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","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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"}

package/components/saveableInput/SaveableInput.d.ts

@@ -26,11 +26,15 @@ export type SaveableInputProps = {
      */
     isValid?: boolean;
     /**
-     * This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false.
+     * This is the error message that is shown below the input. It uses the built-in error handling,
+     * and will be shown when the "isValid" prop is set to false.
      */
     errorMessage?: string | React.ReactNode;
     /**
-     * Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false.
+     * Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop
+     * is set to false.
+     *
+     * @default false
      */
     hideErrorIcon?: boolean;
     /**
@@ -62,6 +66,8 @@ export type SaveableInputProps = {
     onEnterEdit?: () => void;
     /**
      * Defines the button style: `default` or `primary`.
+     *
+     * @default 'primary'
      */
     buttonStyle?: 'primary' | 'default';
     /**
@@ -79,6 +85,8 @@ export type SaveableInputProps = {
     icon?: string;
     /**
      * Disables the component so the user cannot enter the edit mode.
+     *
+     * @default false
      */
     disabled?: boolean;
     /**

package/components/saveableInput/SaveableInput.js

@@ -1,65 +1,65 @@
 import { jsxs as T, jsx as e } from "react/jsx-runtime";
-import { useState as o, useRef as x, useEffect as te } from "react";
-import f from "classnames";
-import { isEmpty as ne } from "es-toolkit/compat";
+import { useState as l, useRef as x, useEffect as ne } from "react";
+import { isEmpty as ae } from "es-toolkit/compat";
 import { noop as b } from "es-toolkit/function";
-import ae from "../button/Button.js";
-import se from "../../hooks/useKey.js";
-import re from "../../hooks/useEsc.js";
-const le = "primary", oe = (p) => {
+import f from "../../utils/classNames.js";
+import se from "../button/Button.js";
+import re from "../../hooks/useKey.js";
+import oe from "../../hooks/useEsc.js";
+const le = "primary", ie = (c) => {
   const n = x(null);
-  return te(() => {
-    n.current && p && n.current.focus();
-  }, [n.current, p]), n;
-}, ge = (p) => {
+  return ne(() => {
+    n.current && c && n.current.focus();
+  }, [n.current, c]), n;
+}, ve = (c) => {
   const {
     placeholder: n,
     fixedPreviousValue: m = "",
-    previousValue: B = "",
+    previousValue: P = "",
     value: i = "",
     isValid: a = !0,
     errorMessage: E,
     hideErrorIcon: I = !1,
-    onValueChanged: P = b,
+    onValueChanged: R = b,
     onInputChange: N,
-    onEsc: R = b,
-    onEnterEdit: S = b,
-    buttonStyle: z = le,
+    onEsc: S = b,
+    onEnterEdit: z = b,
+    buttonStyle: U = le,
     inputClassName: j,
     inputProps: w,
     icon: h,
-    unit: u,
+    unit: y,
     disabled: D = !1,
     className: L,
-    ...U
-  } = p, c = B || m, [s, g] = o(i), [r, v] = o(c), [t, V] = o(!1), [y, C] = o(!1), d = x(s), O = x(r), [_, A] = o(i);
-  _ !== i && (g(i), A(i));
-  const [K, M] = o(c);
-  K !== c && (v(c), M(c));
-  const Y = oe(t);
-  se((l) => {
-    y && t && a && l.key === "Enter" && k();
-  }), re(() => {
-    y && (g(d.current), v(O.current), V(!1), R());
+    ..._
+  } = c, u = P || m, [s, g] = l(i), [r, v] = l(u), [t, V] = l(!1), [C, O] = l(!1), p = x(s), k = x(r), [A, K] = l(i);
+  A !== i && (g(i), K(i));
+  const [M, Y] = l(u);
+  M !== u && (v(u), Y(u));
+  const $ = ie(t);
+  re((o) => {
+    C && t && a && o.key === "Enter" && B();
+  }), oe(() => {
+    C && (g(p.current), v(k.current), V(!1), S());
   });
-  const k = () => {
-    t === !1 ? (V(!0), m || (O.current = r), d.current = s, S()) : (V(!1), d.current !== s && (v(m || d.current), P(s, r)));
-  }, $ = (l) => {
+  const B = () => {
+    t === !1 ? (V(!0), m || (k.current = r), p.current = s, z()) : (V(!1), p.current !== s && (v(m || p.current), R(s, r)));
+  }, q = (o) => {
     if (N) {
-      const Z = l.nativeEvent?.data, ee = l.target.value;
-      N(Z ?? ee, l.currentTarget.value);
+      const ee = o.nativeEvent?.data, te = o.target.value;
+      N(ee ?? te, o.currentTarget.value);
       return;
     }
-    g(l.target.value);
-  }, q = () => C(!0), G = () => C(!1), F = !ne(r) && r !== s && !t, H = f("form-group", !a && "has-feedback has-error", L), J = f(
+    g(o.target.value);
+  }, G = () => O(!0), H = () => O(!1), F = !ae(r) && r !== s && !t, d = !!y, J = f("form-group", !a && "has-feedback has-error", L), Q = f(
     "form-control",
     F && "padding-bottom-0 padding-top-10 text-size-12",
-    u && "padding-right-50",
+    d && "padding-right-50",
     // This value is not perfect as with longer units it might conflict with the value
-    !u && !a && I && "padding-right-10",
+    !d && !a && I && "padding-right-10",
     // remove the padding for the error icon if not needed
     j
-  ), Q = f(
+  ), W = f(
     "position-absolute",
     "top-2",
     "left-10",
@@ -67,34 +67,34 @@ const le = "primary", oe = (p) => {
     "text-size-10",
     "text-decoration-line-through",
     h && "padding-left-20"
-  ), W = f("rioglyph", t ? "rioglyph-ok" : "rioglyph-pencil"), X = t && !a || D;
-  return /* @__PURE__ */ T("div", { ...U, className: H, children: [
+  ), X = f("rioglyph", t ? "rioglyph-ok" : "rioglyph-pencil"), Z = t && !a || D;
+  return /* @__PURE__ */ T("div", { ..._, className: J, children: [
     /* @__PURE__ */ T("div", { className: "input-group", children: [
       h && /* @__PURE__ */ e("span", { className: "input-group-addon", children: /* @__PURE__ */ e("span", { className: `rioglyph ${h}`, "aria-hidden": "true", "aria-label": "input icon" }) }),
       /* @__PURE__ */ e(
         "input",
         {
           type: "text",
-          ref: Y,
+          ref: $,
           placeholder: n,
-          className: J,
+          className: Q,
           value: s,
-          onChange: $,
-          onFocus: q,
-          onBlur: G,
+          onChange: q,
+          onFocus: G,
+          onBlur: H,
           disabled: !t,
           ...w
         }
       ),
-      u && /* @__PURE__ */ e("div", { className: "position-absolute right-0 margin-right-50", "aria-label": "unit", children: u }),
-      F && /* @__PURE__ */ e("div", { className: Q, "aria-label": "previous value", children: r }),
-      /* @__PURE__ */ e("div", { className: "input-group-btn", children: /* @__PURE__ */ e(ae, { bsStyle: z, iconOnly: !0, onClick: k, disabled: X, children: /* @__PURE__ */ e("span", { className: W }) }) })
+      d && /* @__PURE__ */ e("div", { className: "position-absolute right-0 margin-right-50", "aria-label": "unit", children: y }),
+      F && /* @__PURE__ */ e("div", { className: W, "aria-label": "previous value", children: r }),
+      /* @__PURE__ */ e("div", { className: "input-group-btn", children: /* @__PURE__ */ e(se, { bsStyle: U, iconOnly: !0, onClick: B, disabled: Z, children: /* @__PURE__ */ e("span", { className: X }) }) })
     ] }),
-    !a && !I && !u && /* @__PURE__ */ e("span", { className: "right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign" }),
+    !a && !I && !d && /* @__PURE__ */ e("span", { className: "right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign" }),
     !a && E && /* @__PURE__ */ e("span", { className: "help-block z-index-max", children: /* @__PURE__ */ e("span", { children: E }) })
   ] });
 };
 export {
-  ge as default
+  ve as default
 };
 //# sourceMappingURL=SaveableInput.js.map

package/components/saveableInput/SaveableInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SaveableInput.js","sources":["../../../src/components/saveableInput/SaveableInput.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, type ChangeEvent, type HTMLAttributes } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\n// @ts-ignore\nimport Button from '../../Button';\nimport useKey from '../../hooks/useKey';\nimport useEsc from '../../hooks/useEsc';\n\nconst DEFAULT_BUTTON_STYLE = 'primary';\n\nconst useFocus = (isEditable: boolean) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    useEffect(() => {\n        if (inputRef.current && isEditable) {\n            inputRef.current.focus();\n        }\n    }, [inputRef.current, isEditable]);\n\n    return inputRef;\n};\n\nexport type SaveableInputProps = {\n    /**\n     * The input placeholder.\n     */\n    placeholder?: string;\n\n    /**\n     * The previous or old value shown above the input value.\n     * This value will *not* be changed for new input values.\n     */\n    fixedPreviousValue?: string;\n\n    /**\n     * The previous or old value shown above the input value.\n     * This value *changes* when a new input value is accepted.\n     */\n    previousValue?: string;\n\n    /**\n     * The actual input value.\n     */\n    value?: 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, 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 is set to false.\n     */\n    hideErrorIcon?: boolean;\n\n    /**\n     * Callback function triggered when the value changes.\n     * @param value\n     * @param previousValue\n     * @returns\n     */\n    onValueChanged?: (value: string, previousValue: string) => 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     * @param keyValue the key value that has been entered\n     * @param inputValue the current complete value of the input\n     * @returns\n     */\n    onInputChange?: (keyValue: string, inputValue: string) => 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     * @returns\n     */\n    onEsc?: () => void;\n\n    /**\n     * Callback function that gets triggered when the input is in edit mode. Use this\n     * to control the component dna to handle the previous value on the outside.\n     * @returns\n     */\n    onEnterEdit?: () => void;\n\n    /**\n     * Defines the button style: `default` or `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     * Adds a given unit to the input.\n     */\n    unit?: string | React.ReactNode;\n\n    /**\n     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group\n     * and the icon will be set in an input-addon. Example: `rioglyph-search`.\n     */\n    icon?: string;\n\n    /**\n     * Disables the component so the user cannot enter the edit mode.\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// Features:\n// [ ] what shall happen when user leaves component while in edit mode (click outside or tab) - close on blur?\n// [x] avoid save without change\n// [x] use fixed previous value\n// [x] enter = save\n// [x] esc key to abort and leave edit mode\n// [x] tab focus + enter = go into edit mode\n// [x] validate after each key, i.e for number inputs - use onInputChange callback\n// [x] support form feedback error - wrap it with form-group and feedback classes\n// [x] allow for unit and icon\n// [x] disabled input\n\nconst SaveableInput = (props: SaveableInputProps) => {\n    const {\n        placeholder,\n        fixedPreviousValue = '',\n        previousValue = '',\n        value: externalValue = '',\n        isValid = true,\n        errorMessage,\n        hideErrorIcon = false,\n        onValueChanged = noop,\n        onInputChange,\n        onEsc = noop,\n        onEnterEdit = noop,\n        buttonStyle = DEFAULT_BUTTON_STYLE,\n        inputClassName,\n        inputProps,\n        icon,\n        unit,\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    const externalOldValue = previousValue || fixedPreviousValue;\n\n    const [inputValue, setInputValue] = useState(externalValue);\n    const [oldInputValue, setOldInputValue] = useState(externalOldValue);\n\n    const [editInput, setEditInput] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const initialInputValueRef = useRef(inputValue);\n    const initialOldInputValueRef = useRef(oldInputValue);\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    }\n\n    // Update internal state in a controlled environment\n    const [previousExternalOldValue, setPreviousExternalOldValue] = useState(externalOldValue);\n    if (previousExternalOldValue !== externalOldValue) {\n        setOldInputValue(externalOldValue);\n        setPreviousExternalOldValue(externalOldValue);\n    }\n\n    // Set focus on input when being in edit mode\n    const inputRef = useFocus(editInput);\n\n    // Allow to exit \"edit\" mode with \"Enter\" to accept changes\n    useKey((event: KeyboardEvent) => {\n        if (isFocused && editInput && isValid && event.key === 'Enter') {\n            handleToggleInput();\n        }\n    });\n\n    // Allow to exit \"edit\" mode with \"Esc\" to ignore changes\n    useEsc(() => {\n        if (isFocused) {\n            // Restore local state to initial vales as it was when entering edit mode\n            setInputValue(initialInputValueRef.current);\n            setOldInputValue(initialOldInputValueRef.current);\n            setEditInput(false);\n            onEsc();\n        }\n    });\n\n    const handleToggleInput = () => {\n        if (editInput === false) {\n            setEditInput(true);\n\n            // Temporarily store values of input and oldInput to be used when\n            // discarding changes on \"esc\" or to avoid saving without changes\n            if (!fixedPreviousValue) {\n                initialOldInputValueRef.current = oldInputValue;\n            }\n            initialInputValueRef.current = inputValue;\n\n            onEnterEdit();\n        } else {\n            setEditInput(false);\n\n            // In case the new input value has not changed to the initial value\n            // reset the internal old value to the initial\n            if (initialInputValueRef.current !== inputValue) {\n                setOldInputValue(fixedPreviousValue || initialInputValueRef.current);\n                onValueChanged(inputValue, oldInputValue);\n            }\n        }\n    };\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n        // Only update internal value if the external \"onInputChange\" callback function is not defined\n        // as it will be used in a controlled way\n        if (onInputChange) {\n            // Use type assertion to access nativeEvent.data\n            const nativeEventData = (event.nativeEvent as InputEvent)?.data;\n\n            // Whe \"backspace\" is used to remove a value, the nativeEventData is undefined. In this case\n            // we need to use the target value for the callback otherwise the user will not be able to\n            // remove a character from the input\n            const currentInputValue = event.target.value;\n\n            onInputChange(nativeEventData ?? currentInputValue, event.currentTarget.value);\n            return;\n        }\n\n        setInputValue(event.target.value);\n    };\n\n    const handleFocus = () => setIsFocused(true);\n    const handleBlur = () => setIsFocused(false);\n\n    const showOldValue = !isEmpty(oldInputValue) && oldInputValue !== inputValue && !editInput;\n\n    const wrapperClasses = classNames('form-group', !isValid && 'has-feedback has-error', className);\n\n    const inputClasses = classNames(\n        'form-control',\n        showOldValue && 'padding-bottom-0 padding-top-10 text-size-12',\n        unit && 'padding-right-50', // This value is not perfect as with longer units it might conflict with the value\n        !unit && !isValid && hideErrorIcon && 'padding-right-10', // remove the padding for the error icon if not needed\n        inputClassName\n    );\n\n    const oldValueClasses = classNames(\n        'position-absolute',\n        'top-2',\n        'left-10',\n        'margin-left-3',\n        'text-size-10',\n        'text-decoration-line-through',\n        icon && 'padding-left-20'\n    );\n\n    const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');\n\n    const disableButton = (editInput && !isValid) || disabled;\n\n    return (\n        <div {...remainingProps} className={wrapperClasses}>\n            <div className='input-group'>\n                {icon && (\n                    <span className='input-group-addon'>\n                        <span className={`rioglyph ${icon}`} aria-hidden='true' aria-label='input icon' />\n                    </span>\n                )}\n                <input\n                    type='text'\n                    ref={inputRef}\n                    placeholder={placeholder}\n                    className={inputClasses}\n                    value={inputValue}\n                    onChange={handleInputChange}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                    disabled={!editInput}\n                    {...inputProps}\n                />\n                {unit && (\n                    <div className='position-absolute right-0 margin-right-50' aria-label='unit'>\n                        {unit}\n                    </div>\n                )}\n                {showOldValue && (\n                    <div className={oldValueClasses} aria-label='previous value'>\n                        {oldInputValue}\n                    </div>\n                )}\n                <div className='input-group-btn'>\n                    <Button bsStyle={buttonStyle} iconOnly onClick={handleToggleInput} disabled={disableButton}>\n                        <span className={buttonIconClasses} />\n                    </Button>\n                </div>\n            </div>\n            {!isValid && !hideErrorIcon && !unit && (\n                <span className='right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' />\n            )}\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 SaveableInput;\n"],"names":["DEFAULT_BUTTON_STYLE","useFocus","isEditable","inputRef","useRef","useEffect","SaveableInput","props","placeholder","fixedPreviousValue","previousValue","externalValue","isValid","errorMessage","hideErrorIcon","onValueChanged","noop","onInputChange","onEsc","onEnterEdit","buttonStyle","inputClassName","inputProps","icon","unit","disabled","className","remainingProps","externalOldValue","inputValue","setInputValue","useState","oldInputValue","setOldInputValue","editInput","setEditInput","isFocused","setIsFocused","initialInputValueRef","initialOldInputValueRef","previousExternalValue","setPreviousExternalValue","previousExternalOldValue","setPreviousExternalOldValue","useKey","event","handleToggleInput","useEsc","handleInputChange","nativeEventData","currentInputValue","handleFocus","handleBlur","showOldValue","isEmpty","wrapperClasses","classNames","inputClasses","oldValueClasses","buttonIconClasses","disableButton","jsxs","jsx","Button"],"mappings":";;;;;;;;AAUA,MAAMA,KAAuB,WAEvBC,KAAW,CAACC,MAAwB;AACtC,QAAMC,IAAWC,EAAyB,IAAI;AAC9C,SAAAC,GAAU,MAAM;AACZ,IAAIF,EAAS,WAAWD,KACpBC,EAAS,QAAQ,MAAA;AAAA,EAEzB,GAAG,CAACA,EAAS,SAASD,CAAU,CAAC,GAE1BC;AACX,GA2HMG,KAAgB,CAACC,MAA8B;AACjD,QAAM;AAAA,IACF,aAAAC;AAAA,IACA,oBAAAC,IAAqB;AAAA,IACrB,eAAAC,IAAgB;AAAA,IAChB,OAAOC,IAAgB;AAAA,IACvB,SAAAC,IAAU;AAAA,IACV,cAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,gBAAAC,IAAiBC;AAAA,IACjB,eAAAC;AAAA,IACA,OAAAC,IAAQF;AAAA,IACR,aAAAG,IAAcH;AAAA,IACd,aAAAI,IAAcpB;AAAA,IACd,gBAAAqB;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHpB,GAEEqB,IAAmBlB,KAAiBD,GAEpC,CAACoB,GAAYC,CAAa,IAAIC,EAASpB,CAAa,GACpD,CAACqB,GAAeC,CAAgB,IAAIF,EAASH,CAAgB,GAE7D,CAACM,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAC1C,CAACK,GAAWC,CAAY,IAAIN,EAAS,EAAK,GAE1CO,IAAuBlC,EAAOyB,CAAU,GACxCU,IAA0BnC,EAAO4B,CAAa,GAG9C,CAACQ,GAAuBC,CAAwB,IAAIV,EAASpB,CAAa;AAChF,EAAI6B,MAA0B7B,MAC1BmB,EAAcnB,CAAa,GAC3B8B,EAAyB9B,CAAa;AAI1C,QAAM,CAAC+B,GAA0BC,CAA2B,IAAIZ,EAASH,CAAgB;AACzF,EAAIc,MAA6Bd,MAC7BK,EAAiBL,CAAgB,GACjCe,EAA4Bf,CAAgB;AAIhD,QAAMzB,IAAWF,GAASiC,CAAS;AAGnC,EAAAU,GAAO,CAACC,MAAyB;AAC7B,IAAIT,KAAaF,KAAatB,KAAWiC,EAAM,QAAQ,WACnDC,EAAA;AAAA,EAER,CAAC,GAGDC,GAAO,MAAM;AACT,IAAIX,MAEAN,EAAcQ,EAAqB,OAAO,GAC1CL,EAAiBM,EAAwB,OAAO,GAChDJ,EAAa,EAAK,GAClBjB,EAAA;AAAA,EAER,CAAC;AAED,QAAM4B,IAAoB,MAAM;AAC5B,IAAIZ,MAAc,MACdC,EAAa,EAAI,GAIZ1B,MACD8B,EAAwB,UAAUP,IAEtCM,EAAqB,UAAUT,GAE/BV,EAAA,MAEAgB,EAAa,EAAK,GAIdG,EAAqB,YAAYT,MACjCI,EAAiBxB,KAAsB6B,EAAqB,OAAO,GACnEvB,EAAec,GAAYG,CAAa;AAAA,EAGpD,GAEMgB,IAAoB,CAACH,MAAyC;AAGhE,QAAI5B,GAAe;AAEf,YAAMgC,IAAmBJ,EAAM,aAA4B,MAKrDK,KAAoBL,EAAM,OAAO;AAEvC,MAAA5B,EAAcgC,KAAmBC,IAAmBL,EAAM,cAAc,KAAK;AAC7E;AAAA,IACJ;AAEA,IAAAf,EAAce,EAAM,OAAO,KAAK;AAAA,EACpC,GAEMM,IAAc,MAAMd,EAAa,EAAI,GACrCe,IAAa,MAAMf,EAAa,EAAK,GAErCgB,IAAe,CAACC,GAAQtB,CAAa,KAAKA,MAAkBH,KAAc,CAACK,GAE3EqB,IAAiBC,EAAW,cAAc,CAAC5C,KAAW,0BAA0Bc,CAAS,GAEzF+B,IAAeD;AAAA,IACjB;AAAA,IACAH,KAAgB;AAAA,IAChB7B,KAAQ;AAAA;AAAA,IACR,CAACA,KAAQ,CAACZ,KAAWE,KAAiB;AAAA;AAAA,IACtCO;AAAA,EAAA,GAGEqC,IAAkBF;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAjC,KAAQ;AAAA,EAAA,GAGNoC,IAAoBH,EAAW,YAAYtB,IAAY,gBAAgB,iBAAiB,GAExF0B,IAAiB1B,KAAa,CAACtB,KAAYa;AAEjD,SACI,gBAAAoC,EAAC,OAAA,EAAK,GAAGlC,GAAgB,WAAW4B,GAChC,UAAA;AAAA,IAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,eACV,UAAA;AAAA,MAAAtC,KACG,gBAAAuC,EAAC,QAAA,EAAK,WAAU,qBACZ,4BAAC,QAAA,EAAK,WAAW,YAAYvC,CAAI,IAAI,eAAY,QAAO,cAAW,cAAa,GACpF;AAAA,MAEJ,gBAAAuC;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,KAAK3D;AAAA,UACL,aAAAK;AAAA,UACA,WAAWiD;AAAA,UACX,OAAO5B;AAAA,UACP,UAAUmB;AAAA,UACV,SAASG;AAAA,UACT,QAAQC;AAAA,UACR,UAAU,CAAClB;AAAA,UACV,GAAGZ;AAAA,QAAA;AAAA,MAAA;AAAA,MAEPE,KACG,gBAAAsC,EAAC,OAAA,EAAI,WAAU,6CAA4C,cAAW,QACjE,UAAAtC,GACL;AAAA,MAEH6B,KACG,gBAAAS,EAAC,OAAA,EAAI,WAAWJ,GAAiB,cAAW,kBACvC,UAAA1B,GACL;AAAA,wBAEH,OAAA,EAAI,WAAU,mBACX,UAAA,gBAAA8B,EAACC,IAAA,EAAO,SAAS3C,GAAa,UAAQ,IAAC,SAAS0B,GAAmB,UAAUc,GACzE,UAAA,gBAAAE,EAAC,UAAK,WAAWH,EAAA,CAAmB,GACxC,EAAA,CACJ;AAAA,IAAA,GACJ;AAAA,IACC,CAAC/C,KAAW,CAACE,KAAiB,CAACU,KAC5B,gBAAAsC,EAAC,QAAA,EAAK,WAAU,+EAA8E;AAAA,IAEjG,CAAClD,KAAWC,KACT,gBAAAiD,EAAC,QAAA,EAAK,WAAU,0BACZ,UAAA,gBAAAA,EAAC,QAAA,EAAM,UAAAjD,EAAA,CAAa,EAAA,CACxB;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"SaveableInput.js","sources":["../../../src/components/saveableInput/SaveableInput.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, type ChangeEvent, type HTMLAttributes } from 'react';\nimport { isEmpty } from 'es-toolkit/compat';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport Button from '../../Button';\nimport useKey from '../../hooks/useKey';\nimport useEsc from '../../hooks/useEsc';\n\nconst DEFAULT_BUTTON_STYLE = 'primary';\n\nconst useFocus = (isEditable: boolean) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n    useEffect(() => {\n        if (inputRef.current && isEditable) {\n            inputRef.current.focus();\n        }\n    }, [inputRef.current, isEditable]);\n\n    return inputRef;\n};\n\nexport type SaveableInputProps = {\n    /**\n     * The input placeholder.\n     */\n    placeholder?: string;\n\n    /**\n     * The previous or old value shown above the input value.\n     * This value will *not* be changed for new input values.\n     */\n    fixedPreviousValue?: string;\n\n    /**\n     * The previous or old value shown above the input value.\n     * This value *changes* when a new input value is accepted.\n     */\n    previousValue?: string;\n\n    /**\n     * The actual input value.\n     */\n    value?: 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.\n     * @param value\n     * @param previousValue\n     * @returns\n     */\n    onValueChanged?: (value: string, previousValue: string) => 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     * @param keyValue the key value that has been entered\n     * @param inputValue the current complete value of the input\n     * @returns\n     */\n    onInputChange?: (keyValue: string, inputValue: string) => 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     * @returns\n     */\n    onEsc?: () => void;\n\n    /**\n     * Callback function that gets triggered when the input is in edit mode. Use this\n     * to control the component dna to handle the previous value on the outside.\n     * @returns\n     */\n    onEnterEdit?: () => void;\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     * Adds a given unit to the input.\n     */\n    unit?: string | React.ReactNode;\n\n    /**\n     * Icon class name that shall be used. If defined, the input element is wrapped in an input-group\n     * and the icon will be set in an input-addon. Example: `rioglyph-search`.\n     */\n    icon?: string;\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// Features:\n// [ ] what shall happen when user leaves component while in edit mode (click outside or tab) - close on blur?\n// [x] avoid save without change\n// [x] use fixed previous value\n// [x] enter = save\n// [x] esc key to abort and leave edit mode\n// [x] tab focus + enter = go into edit mode\n// [x] validate after each key, i.e for number inputs - use onInputChange callback\n// [x] support form feedback error - wrap it with form-group and feedback classes\n// [x] allow for unit and icon\n// [x] disabled input\n\nconst SaveableInput = (props: SaveableInputProps) => {\n    const {\n        placeholder,\n        fixedPreviousValue = '',\n        previousValue = '',\n        value: externalValue = '',\n        isValid = true,\n        errorMessage,\n        hideErrorIcon = false,\n        onValueChanged = noop,\n        onInputChange,\n        onEsc = noop,\n        onEnterEdit = noop,\n        buttonStyle = DEFAULT_BUTTON_STYLE,\n        inputClassName,\n        inputProps,\n        icon,\n        unit,\n        disabled = false,\n        className,\n        ...remainingProps\n    } = props;\n\n    const externalOldValue = previousValue || fixedPreviousValue;\n\n    const [inputValue, setInputValue] = useState(externalValue);\n    const [oldInputValue, setOldInputValue] = useState(externalOldValue);\n\n    const [editInput, setEditInput] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const initialInputValueRef = useRef(inputValue);\n    const initialOldInputValueRef = useRef(oldInputValue);\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    }\n\n    // Update internal state in a controlled environment\n    const [previousExternalOldValue, setPreviousExternalOldValue] = useState(externalOldValue);\n    if (previousExternalOldValue !== externalOldValue) {\n        setOldInputValue(externalOldValue);\n        setPreviousExternalOldValue(externalOldValue);\n    }\n\n    // Set focus on input when being in edit mode\n    const inputRef = useFocus(editInput);\n\n    // Allow to exit \"edit\" mode with \"Enter\" to accept changes\n    useKey((event: KeyboardEvent) => {\n        if (isFocused && editInput && isValid && event.key === 'Enter') {\n            handleToggleInput();\n        }\n    });\n\n    // Allow to exit \"edit\" mode with \"Esc\" to ignore changes\n    useEsc(() => {\n        if (isFocused) {\n            // Restore local state to initial vales as it was when entering edit mode\n            setInputValue(initialInputValueRef.current);\n            setOldInputValue(initialOldInputValueRef.current);\n            setEditInput(false);\n            onEsc();\n        }\n    });\n\n    const handleToggleInput = () => {\n        if (editInput === false) {\n            setEditInput(true);\n\n            // Temporarily store values of input and oldInput to be used when\n            // discarding changes on \"esc\" or to avoid saving without changes\n            if (!fixedPreviousValue) {\n                initialOldInputValueRef.current = oldInputValue;\n            }\n            initialInputValueRef.current = inputValue;\n\n            onEnterEdit();\n        } else {\n            setEditInput(false);\n\n            // In case the new input value has not changed to the initial value\n            // reset the internal old value to the initial\n            if (initialInputValueRef.current !== inputValue) {\n                setOldInputValue(fixedPreviousValue || initialInputValueRef.current);\n                onValueChanged(inputValue, oldInputValue);\n            }\n        }\n    };\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n        // Only update internal value if the external \"onInputChange\" callback function is not defined\n        // as it will be used in a controlled way\n        if (onInputChange) {\n            // Use type assertion to access nativeEvent.data\n            const nativeEventData = (event.nativeEvent as InputEvent)?.data;\n\n            // Whe \"backspace\" is used to remove a value, the nativeEventData is undefined. In this case\n            // we need to use the target value for the callback otherwise the user will not be able to\n            // remove a character from the input\n            const currentInputValue = event.target.value;\n\n            onInputChange(nativeEventData ?? currentInputValue, event.currentTarget.value);\n            return;\n        }\n\n        setInputValue(event.target.value);\n    };\n\n    const handleFocus = () => setIsFocused(true);\n    const handleBlur = () => setIsFocused(false);\n\n    const showOldValue = !isEmpty(oldInputValue) && oldInputValue !== inputValue && !editInput;\n    const hasUnit = Boolean(unit);\n\n    const wrapperClasses = classNames('form-group', !isValid && 'has-feedback has-error', className);\n\n    const inputClasses = classNames(\n        'form-control',\n        showOldValue && 'padding-bottom-0 padding-top-10 text-size-12',\n        hasUnit && 'padding-right-50', // This value is not perfect as with longer units it might conflict with the value\n        !hasUnit && !isValid && hideErrorIcon && 'padding-right-10', // remove the padding for the error icon if not needed\n        inputClassName\n    );\n\n    const oldValueClasses = classNames(\n        'position-absolute',\n        'top-2',\n        'left-10',\n        'margin-left-3',\n        'text-size-10',\n        'text-decoration-line-through',\n        icon && 'padding-left-20'\n    );\n\n    const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');\n\n    const disableButton = (editInput && !isValid) || disabled;\n\n    return (\n        <div {...remainingProps} className={wrapperClasses}>\n            <div className='input-group'>\n                {icon && (\n                    <span className='input-group-addon'>\n                        <span className={`rioglyph ${icon}`} aria-hidden='true' aria-label='input icon' />\n                    </span>\n                )}\n                <input\n                    type='text'\n                    ref={inputRef}\n                    placeholder={placeholder}\n                    className={inputClasses}\n                    value={inputValue}\n                    onChange={handleInputChange}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                    disabled={!editInput}\n                    {...inputProps}\n                />\n                {hasUnit && (\n                    <div className='position-absolute right-0 margin-right-50' aria-label='unit'>\n                        {unit}\n                    </div>\n                )}\n                {showOldValue && (\n                    <div className={oldValueClasses} aria-label='previous value'>\n                        {oldInputValue}\n                    </div>\n                )}\n                <div className='input-group-btn'>\n                    <Button bsStyle={buttonStyle} iconOnly onClick={handleToggleInput} disabled={disableButton}>\n                        <span className={buttonIconClasses} />\n                    </Button>\n                </div>\n            </div>\n            {!isValid && !hideErrorIcon && !hasUnit && (\n                <span className='right-25 margin-right-10 form-control-feedback rioglyph rioglyph-error-sign' />\n            )}\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 SaveableInput;\n"],"names":["DEFAULT_BUTTON_STYLE","useFocus","isEditable","inputRef","useRef","useEffect","SaveableInput","props","placeholder","fixedPreviousValue","previousValue","externalValue","isValid","errorMessage","hideErrorIcon","onValueChanged","noop","onInputChange","onEsc","onEnterEdit","buttonStyle","inputClassName","inputProps","icon","unit","disabled","className","remainingProps","externalOldValue","inputValue","setInputValue","useState","oldInputValue","setOldInputValue","editInput","setEditInput","isFocused","setIsFocused","initialInputValueRef","initialOldInputValueRef","previousExternalValue","setPreviousExternalValue","previousExternalOldValue","setPreviousExternalOldValue","useKey","event","handleToggleInput","useEsc","handleInputChange","nativeEventData","currentInputValue","handleFocus","handleBlur","showOldValue","isEmpty","hasUnit","wrapperClasses","classNames","inputClasses","oldValueClasses","buttonIconClasses","disableButton","jsxs","jsx","Button"],"mappings":"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"}