@tsed/react-formio 3.0.0-rc.23 → 3.0.0-rc.25

package/dist/molecules/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/molecules/tabs/Tabs.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport type { CSSProperties, PropsWithChildren } from \"react\";\n\nimport { registerComponent } from \"../../registries/components.js\";\nimport { TabsProvider } from \"./context/TabControl.js\";\n\nexport interface TabsProps extends Record<string, any> {\n  style?: CSSProperties;\n  className?: string;\n  selected?: number;\n}\n\nexport function Tabs({ style, selected, children, className }: PropsWithChildren<TabsProps>) {\n  return (\n    <div data-testid={\"Tabs\"} className={classnames(\"tw-tabs\", className)} style={style}>\n      <TabsProvider selected={selected}>{children}</TabsProvider>\n    </div>\n  );\n}\n\nregisterComponent(\"Tabs\", Tabs);\n"],"names":["Tabs","style","selected","children","className","jsx","classnames","TabsProvider","registerComponent"],"mappings":";;;;AAYO,SAASA,EAAK,EAAE,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,WAAAC,KAA2C;AAC3F,SACE,gBAAAC,EAAC,OAAA,EAAI,eAAa,QAAQ,WAAWC,EAAW,WAAWF,CAAS,GAAG,OAAAH,GACrE,UAAA,gBAAAI,EAACE,GAAA,EAAa,UAAAL,GAAqB,UAAAC,GAAS,GAC9C;AAEJ;AAEAK,EAAkB,QAAQR,CAAI;"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/molecules/tabs/Tabs.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { CSSProperties, PropsWithChildren } from \"react\";\n\nimport { registerComponent } from \"../../registries/components.js\";\nimport { TabsProvider } from \"./context/TabControl.js\";\n\nexport interface TabsProps extends Record<string, any> {\n  style?: CSSProperties;\n  className?: string;\n  selected?: number;\n}\n\nexport function Tabs({ style, selected, children, className }: PropsWithChildren<TabsProps>) {\n  return (\n    <div data-testid={\"Tabs\"} className={clsx(\"tw-tabs\", className)} style={style}>\n      <TabsProvider selected={selected}>{children}</TabsProvider>\n    </div>\n  );\n}\n\nregisterComponent(\"Tabs\", Tabs);\n"],"names":["Tabs","style","selected","children","className","jsx","clsx","TabsProvider","registerComponent"],"mappings":";;;;AAYO,SAASA,EAAK,EAAE,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,WAAAC,KAA2C;AAC3F,SACE,gBAAAC,EAAC,OAAA,EAAI,eAAa,QAAQ,WAAWC,EAAK,WAAWF,CAAS,GAAG,OAAAH,GAC/D,UAAA,gBAAAI,EAACE,GAAA,EAAa,UAAAL,GAAqB,UAAAC,GAAS,GAC9C;AAEJ;AAEAK,EAAkB,QAAQR,CAAI;"}

package/dist/organisms/form/actions/FormAction.js

@@ -1,6 +1,6 @@
 import { jsxs as m, jsx as l } from "react/jsx-runtime";
 import { g as f } from "../../../chunks/_commonjsHelpers.js";
-import { r as c } from "../../../chunks/index2.js";
+import { r as c } from "../../../chunks/index.js";
 import { Form as p } from "../Form.js";
 var d = c();
 const n = /* @__PURE__ */ f(d);

package/dist/organisms/form/builder/FormEdit.js

@@ -1,6 +1,6 @@
 import { jsxs as s, jsx as d } from "react/jsx-runtime";
 import { createElement as j } from "react";
-import { c as v } from "../../../chunks/index.js";
+import { c as v } from "../../../chunks/clsx.js";
 import { getComponent as n } from "../../../registries/components.js";
 import { useFormEdit as A } from "./useFormEdit.js";
 function T({

package/dist/organisms/form/builder/FormEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormEdit.js","sources":["../../../../src/organisms/form/builder/FormEdit.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport type { CSSProperties } from \"react\";\n\nimport type { FormBuilderOptions, FormOptions } from \"../../../interfaces/index.js\";\nimport { getComponent } from \"../../../registries/components\";\nimport { FormBuilder as DefaultFormBuilder } from \"./FormBuilder\";\nimport { FormEditCTAs as DefaultFormEditCTAs } from \"./FormEditCtas\";\nimport { FormParameters as DefaultFormParameters } from \"./FormParameters\";\nimport { FormBuilderEvents } from \"./useFormBuilder\";\nimport { useFormEdit, UseFormEditHookProps } from \"./useFormEdit\";\n\nexport interface FormEditProps extends UseFormEditHookProps, FormBuilderEvents {\n  options?: FormBuilderOptions & FormOptions;\n  layout?: \"html5\" | \"choicesjs\" | \"react\";\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function FormEdit({\n  form: initialForm,\n  typeChoices,\n  displayChoices,\n  enableTags,\n  onSubmit: initialOnSubmit,\n  onCopy: initialOnCopy,\n  className,\n  style,\n  ...props\n}: FormEditProps) {\n  const { form, isValid, setChange, hasRedo, hasChanged, hasUndo, redo, undo, reset, onSubmit, onCopy } = useFormEdit({\n    form: initialForm,\n    typeChoices,\n    displayChoices,\n    enableTags,\n    onSubmit: initialOnSubmit,\n    onCopy: initialOnCopy\n  });\n\n  const FormParameters = getComponent<typeof DefaultFormParameters>(\"FormParameters\");\n  const FormBuilder = getComponent<typeof DefaultFormBuilder>(\"FormBuilder\");\n  const FormEditCTAs = getComponent<typeof DefaultFormEditCTAs>(\"FormEditCTAs\");\n\n  return (\n    <div className={classnames(\"form-edit-container\", className)} style={style}>\n      <div className='form-edit'>\n        <FormParameters\n          enableTags={enableTags}\n          typeChoices={typeChoices}\n          displayChoices={displayChoices}\n          key={`form-settings-${form._id}`}\n          form={form}\n          onChange={setChange}\n          layout={props.layout}\n        />\n        <FormEditCTAs\n          key={`form-edit-ctas-${form._id}`}\n          options={props.options}\n          hasRedo={hasRedo}\n          hasUndo={hasUndo}\n          disabled={!(isValid && hasChanged)}\n          onRedo={redo}\n          onUndo={undo}\n          onReset={reset}\n          onCopy={onCopy}\n          onSubmit={onSubmit}\n        />\n      </div>\n\n      <FormBuilder\n        {...props}\n        key={`form-builder-${form._id}`}\n        components={form.components!}\n        display={form.display}\n        options={props.options}\n        onChange={(components) => {\n          setChange(\"components\", components);\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["FormEdit","initialForm","typeChoices","displayChoices","enableTags","initialOnSubmit","initialOnCopy","className","style","props","form","isValid","setChange","hasRedo","hasChanged","hasUndo","redo","undo","reset","onSubmit","onCopy","useFormEdit","FormParameters","getComponent","FormBuilder","FormEditCTAs","classnames","jsxs","jsx","createElement","components"],"mappings":";;;;;AAkBO,SAASA,EAAS;AAAA,EACvB,MAAMC;AAAA,EACN,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAUC;AAAA,EACV,QAAQC;AAAA,EACR,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,WAAAC,GAAW,SAAAC,GAAS,YAAAC,GAAY,SAAAC,GAAS,MAAAC,GAAM,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,QAAAC,EAAA,IAAWC,EAAY;AAAA,IAClH,MAAMpB;AAAA,IACN,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAUC;AAAA,IACV,QAAQC;AAAA,EAAA,CACT,GAEKgB,IAAiBC,EAA2C,gBAAgB,GAC5EC,IAAcD,EAAwC,aAAa,GACnEE,IAAeF,EAAyC,cAAc;AAE5E,2BACG,OAAA,EAAI,WAAWG,EAAW,uBAAuBnB,CAAS,GAAG,OAAAC,GAC5D,UAAA;AAAA,IAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACN;AAAA,QAAA;AAAA,UACC,YAAAlB;AAAA,UACA,aAAAF;AAAA,UACA,gBAAAC;AAAA,UAEA,MAAAO;AAAA,UACA,UAAUE;AAAA,UACV,QAAQH,EAAM;AAAA,QAAA;AAAA,QAHT,iBAAiBC,EAAK,GAAG;AAAA,MAAA;AAAA,MAKhC,gBAAAkB;AAAA,QAACH;AAAA,QAAA;AAAA,UAEC,SAAShB,EAAM;AAAA,UACf,SAAAI;AAAA,UACA,SAAAE;AAAA,UACA,UAAU,EAAEJ,KAAWG;AAAA,UACvB,QAAQE;AAAA,UACR,QAAQC;AAAA,UACR,SAASC;AAAA,UACT,QAAAE;AAAA,UACA,UAAAD;AAAA,QAAA;AAAA,QATK,kBAAkBT,EAAK,GAAG;AAAA,MAAA;AAAA,IAUjC,GACF;AAAA,IAEA,gBAAAmB;AAAA,MAACL;AAAA,MAAA;AAAA,QACE,GAAGf;AAAA,QACJ,KAAK,gBAAgBC,EAAK,GAAG;AAAA,QAC7B,YAAYA,EAAK;AAAA,QACjB,SAASA,EAAK;AAAA,QACd,SAASD,EAAM;AAAA,QACf,UAAU,CAACqB,MAAe;AACxB,UAAAlB,EAAU,cAAckB,CAAU;AAAA,QACpC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"FormEdit.js","sources":["../../../../src/organisms/form/builder/FormEdit.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { CSSProperties } from \"react\";\n\nimport type { FormBuilderOptions, FormOptions } from \"../../../interfaces/index.js\";\nimport { getComponent } from \"../../../registries/components\";\nimport { FormBuilder as DefaultFormBuilder } from \"./FormBuilder\";\nimport { FormEditCTAs as DefaultFormEditCTAs } from \"./FormEditCtas\";\nimport { FormParameters as DefaultFormParameters } from \"./FormParameters\";\nimport { FormBuilderEvents } from \"./useFormBuilder\";\nimport { useFormEdit, UseFormEditHookProps } from \"./useFormEdit\";\n\nexport interface FormEditProps extends UseFormEditHookProps, FormBuilderEvents {\n  options?: FormBuilderOptions & FormOptions;\n  layout?: \"html5\" | \"choicesjs\" | \"react\";\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function FormEdit({\n  form: initialForm,\n  typeChoices,\n  displayChoices,\n  enableTags,\n  onSubmit: initialOnSubmit,\n  onCopy: initialOnCopy,\n  className,\n  style,\n  ...props\n}: FormEditProps) {\n  const { form, isValid, setChange, hasRedo, hasChanged, hasUndo, redo, undo, reset, onSubmit, onCopy } = useFormEdit({\n    form: initialForm,\n    typeChoices,\n    displayChoices,\n    enableTags,\n    onSubmit: initialOnSubmit,\n    onCopy: initialOnCopy\n  });\n\n  const FormParameters = getComponent<typeof DefaultFormParameters>(\"FormParameters\");\n  const FormBuilder = getComponent<typeof DefaultFormBuilder>(\"FormBuilder\");\n  const FormEditCTAs = getComponent<typeof DefaultFormEditCTAs>(\"FormEditCTAs\");\n\n  return (\n    <div className={clsx(\"form-edit-container\", className)} style={style}>\n      <div className='form-edit'>\n        <FormParameters\n          enableTags={enableTags}\n          typeChoices={typeChoices}\n          displayChoices={displayChoices}\n          key={`form-settings-${form._id}`}\n          form={form}\n          onChange={setChange}\n          layout={props.layout}\n        />\n        <FormEditCTAs\n          key={`form-edit-ctas-${form._id}`}\n          options={props.options}\n          hasRedo={hasRedo}\n          hasUndo={hasUndo}\n          disabled={!(isValid && hasChanged)}\n          onRedo={redo}\n          onUndo={undo}\n          onReset={reset}\n          onCopy={onCopy}\n          onSubmit={onSubmit}\n        />\n      </div>\n\n      <FormBuilder\n        {...props}\n        key={`form-builder-${form._id}`}\n        components={form.components!}\n        display={form.display}\n        options={props.options}\n        onChange={(components) => {\n          setChange(\"components\", components);\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["FormEdit","initialForm","typeChoices","displayChoices","enableTags","initialOnSubmit","initialOnCopy","className","style","props","form","isValid","setChange","hasRedo","hasChanged","hasUndo","redo","undo","reset","onSubmit","onCopy","useFormEdit","FormParameters","getComponent","FormBuilder","FormEditCTAs","clsx","jsxs","jsx","createElement","components"],"mappings":";;;;;AAkBO,SAASA,EAAS;AAAA,EACvB,MAAMC;AAAA,EACN,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAUC;AAAA,EACV,QAAQC;AAAA,EACR,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,WAAAC,GAAW,SAAAC,GAAS,YAAAC,GAAY,SAAAC,GAAS,MAAAC,GAAM,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,QAAAC,EAAA,IAAWC,EAAY;AAAA,IAClH,MAAMpB;AAAA,IACN,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAUC;AAAA,IACV,QAAQC;AAAA,EAAA,CACT,GAEKgB,IAAiBC,EAA2C,gBAAgB,GAC5EC,IAAcD,EAAwC,aAAa,GACnEE,IAAeF,EAAyC,cAAc;AAE5E,2BACG,OAAA,EAAI,WAAWG,EAAK,uBAAuBnB,CAAS,GAAG,OAAAC,GACtD,UAAA;AAAA,IAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACN;AAAA,QAAA;AAAA,UACC,YAAAlB;AAAA,UACA,aAAAF;AAAA,UACA,gBAAAC;AAAA,UAEA,MAAAO;AAAA,UACA,UAAUE;AAAA,UACV,QAAQH,EAAM;AAAA,QAAA;AAAA,QAHT,iBAAiBC,EAAK,GAAG;AAAA,MAAA;AAAA,MAKhC,gBAAAkB;AAAA,QAACH;AAAA,QAAA;AAAA,UAEC,SAAShB,EAAM;AAAA,UACf,SAAAI;AAAA,UACA,SAAAE;AAAA,UACA,UAAU,EAAEJ,KAAWG;AAAA,UACvB,QAAQE;AAAA,UACR,QAAQC;AAAA,UACR,SAASC;AAAA,UACT,QAAAE;AAAA,UACA,UAAAD;AAAA,QAAA;AAAA,QATK,kBAAkBT,EAAK,GAAG;AAAA,MAAA;AAAA,IAUjC,GACF;AAAA,IAEA,gBAAAmB;AAAA,MAACL;AAAA,MAAA;AAAA,QACE,GAAGf;AAAA,QACJ,KAAK,gBAAgBC,EAAK,GAAG;AAAA,QAC7B,YAAYA,EAAK;AAAA,QACjB,SAASA,EAAK;AAAA,QACd,SAASD,EAAM;AAAA,QACf,UAAU,CAACqB,MAAe;AACxB,UAAAlB,EAAU,cAAckB,CAAU;AAAA,QACpC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/organisms/form/builder/useFormBuilder.js

@@ -1,4 +1,4 @@
-import { c as R } from "../../../chunks/index2.js";
+import { c as R } from "../../../chunks/index.js";
 import { c as p } from "../../../chunks/cloneDeep.js";
 import { useRef as l, useState as b, useEffect as d } from "react";
 const g = [

package/dist/organisms/form/useForm.js

@@ -1,4 +1,4 @@
-import { c as ae } from "../../chunks/index2.js";
+import { c as ae } from "../../chunks/index.js";
 import { useRef as ee, useState as le, useEffect as G } from "react";
 var J = { exports: {} };
 /*!

package/dist/organisms/modal/RemoveModal.js

@@ -1,5 +1,5 @@
 import { jsx as n, jsxs as t } from "react/jsx-runtime";
-import { c as s } from "../../chunks/index.js";
+import { c as s } from "../../chunks/clsx.js";
 import { useState as d } from "react";
 import { InputText as u } from "../../molecules/forms/input-text/InputText.js";
 import { Modal as h } from "../../molecules/modal/Modal.js";

package/dist/organisms/modal/RemoveModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"RemoveModal.js","sources":["../../../src/organisms/modal/RemoveModal.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { PropsWithChildren, useState } from \"react\";\n\nimport { InputText } from \"../../molecules/forms/input-text/InputText\";\nimport { Modal, ModalProps } from \"../../molecules/modal/Modal\";\nimport { iconClass } from \"../../utils/iconClass\";\n\nfunction RemoveModalFooter({ value, valueToCompare, onSubmit, onClose, i18n = (f: string) => f }: ModalProps) {\n  return (\n    <div className={\"flex items-center justify-center bg-white p-2\"}>\n      <button data-testid='customCloseModal' className={\"btn btn-outline-dark mx-2\"} onClick={onClose}>\n        {i18n(\"Cancel\")}\n      </button>\n      <button\n        disabled={valueToCompare !== value}\n        data-testid='customSubmitModal'\n        className={\"btn btn-danger mx-2\"}\n        onClick={(e) => {\n          if (valueToCompare === value) {\n            onSubmit(e);\n          }\n        }}\n      >\n        <i className={classnames(iconClass(undefined, \"trash\"), \"mr-2\")} />\n        {i18n(\"Remove\")}\n      </button>\n    </div>\n  );\n}\n\nexport interface RemoveModalProps extends ModalProps {\n  valueToCompare: string;\n  itemType?: string;\n  i18n?: (f: string) => string;\n  maxWidth?: string;\n}\n\nexport function RemoveModal({ maxWidth = \"300px\", children, ...props }: PropsWithChildren<RemoveModalProps>) {\n  const { i18n = (f) => f } = props;\n  const [value, setValue] = useState();\n\n  return (\n    <Modal\n      {...props}\n      className={classnames(props.className, \"formio-dialog-theme-remove\")}\n      style={{ maxWidth }}\n      title={`Drop ${props.itemType?.toLowerCase()}`}\n      value={value}\n      footer={RemoveModalFooter}\n    >\n      <div className='px-4 pt-3 pb-5'>\n        <div className='pb-1'>\n          {children}\n          {i18n(\"To drop\")} <strong>{props.valueToCompare}</strong>,&nbsp;\n          {i18n(\"type the\")}&nbsp;\n          <strong>&quot;{props.itemType?.toLowerCase()}&quot;</strong>&nbsp;\n          {i18n(\"name\")} <strong>&quot;{props.valueToCompare}&quot;</strong>.\n        </div>\n        <InputText name='remove' value={value} onChange={(name, value) => setValue(value)} />\n      </div>\n    </Modal>\n  );\n}\n"],"names":["RemoveModalFooter","value","valueToCompare","onSubmit","onClose","i18n","f","jsxs","jsx","e","classnames","iconClass","RemoveModal","maxWidth","children","props","setValue","useState","Modal","InputText","name"],"mappings":";;;;;;AAOA,SAASA,EAAkB,EAAE,OAAAC,GAAO,gBAAAC,GAAgB,UAAAC,GAAU,SAAAC,GAAS,MAAAC,IAAO,CAACC,MAAcA,KAAiB;AAC5G,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAW,iDACd,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAA,EAAO,eAAY,oBAAmB,WAAW,6BAA6B,SAASJ,GACrF,UAAAC,EAAK,QAAQ,EAAA,CAChB;AAAA,IACA,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAUL,MAAmBD;AAAA,QAC7B,eAAY;AAAA,QACZ,WAAW;AAAA,QACX,SAAS,CAACQ,MAAM;AACd,UAAIP,MAAmBD,KACrBE,EAASM,CAAC;AAAA,QAEd;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAD,EAAC,KAAA,EAAE,WAAWE,EAAWC,EAAU,QAAW,OAAO,GAAG,MAAM,GAAG;AAAA,UAChEN,EAAK,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAChB,GACF;AAEJ;AASO,SAASO,EAAY,EAAE,UAAAC,IAAW,SAAS,UAAAC,GAAU,GAAGC,KAA8C;AAC3G,QAAM,EAAE,MAAAV,IAAO,CAACC,MAAMA,MAAMS,GACtB,CAACd,GAAOe,CAAQ,IAAIC,EAAA;AAE1B,SACE,gBAAAT;AAAA,IAACU;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,WAAWL,EAAWK,EAAM,WAAW,4BAA4B;AAAA,MACnE,OAAO,EAAE,UAAAF,EAAA;AAAA,MACT,OAAO,QAAQE,EAAM,UAAU,aAAa;AAAA,MAC5C,OAAAd;AAAA,MACA,QAAQD;AAAA,MAER,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,QACZ,UAAA;AAAA,UAAAO;AAAA,UACAT,EAAK,SAAS;AAAA,UAAE;AAAA,UAAC,gBAAAG,EAAC,UAAA,EAAQ,UAAAO,EAAM,eAAA,CAAe;AAAA,UAAS;AAAA,UACxDV,EAAK,UAAU;AAAA,UAAE;AAAA,4BACjB,UAAA,EAAO,UAAA;AAAA,YAAA;AAAA,YAAOU,EAAM,UAAU,YAAA;AAAA,YAAc;AAAA,UAAA,GAAM;AAAA,UAAS;AAAA,UAC3DV,EAAK,MAAM;AAAA,UAAE;AAAA,4BAAE,UAAA,EAAO,UAAA;AAAA,YAAA;AAAA,YAAOU,EAAM;AAAA,YAAe;AAAA,UAAA,GAAM;AAAA,UAAS;AAAA,QAAA,GACpE;AAAA,QACA,gBAAAP,EAACW,GAAA,EAAU,MAAK,UAAS,OAAAlB,GAAc,UAAU,CAACmB,GAAMnB,MAAUe,EAASf,CAAK,EAAA,CAAG;AAAA,MAAA,EAAA,CACrF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"RemoveModal.js","sources":["../../../src/organisms/modal/RemoveModal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { PropsWithChildren, useState } from \"react\";\n\nimport { InputText } from \"../../molecules/forms/input-text/InputText\";\nimport { Modal, ModalProps } from \"../../molecules/modal/Modal\";\nimport { iconClass } from \"../../utils/iconClass\";\n\nfunction RemoveModalFooter({ value, valueToCompare, onSubmit, onClose, i18n = (f: string) => f }: ModalProps) {\n  return (\n    <div className={\"flex items-center justify-center bg-white p-2\"}>\n      <button data-testid='customCloseModal' className={\"btn btn-outline-dark mx-2\"} onClick={onClose}>\n        {i18n(\"Cancel\")}\n      </button>\n      <button\n        disabled={valueToCompare !== value}\n        data-testid='customSubmitModal'\n        className={\"btn btn-danger mx-2\"}\n        onClick={(e) => {\n          if (valueToCompare === value) {\n            onSubmit(e);\n          }\n        }}\n      >\n        <i className={clsx(iconClass(undefined, \"trash\"), \"mr-2\")} />\n        {i18n(\"Remove\")}\n      </button>\n    </div>\n  );\n}\n\nexport interface RemoveModalProps extends ModalProps {\n  valueToCompare: string;\n  itemType?: string;\n  i18n?: (f: string) => string;\n  maxWidth?: string;\n}\n\nexport function RemoveModal({ maxWidth = \"300px\", children, ...props }: PropsWithChildren<RemoveModalProps>) {\n  const { i18n = (f) => f } = props;\n  const [value, setValue] = useState();\n\n  return (\n    <Modal\n      {...props}\n      className={clsx(props.className, \"formio-dialog-theme-remove\")}\n      style={{ maxWidth }}\n      title={`Drop ${props.itemType?.toLowerCase()}`}\n      value={value}\n      footer={RemoveModalFooter}\n    >\n      <div className='px-4 pt-3 pb-5'>\n        <div className='pb-1'>\n          {children}\n          {i18n(\"To drop\")} <strong>{props.valueToCompare}</strong>,&nbsp;\n          {i18n(\"type the\")}&nbsp;\n          <strong>&quot;{props.itemType?.toLowerCase()}&quot;</strong>&nbsp;\n          {i18n(\"name\")} <strong>&quot;{props.valueToCompare}&quot;</strong>.\n        </div>\n        <InputText name='remove' value={value} onChange={(name, value) => setValue(value)} />\n      </div>\n    </Modal>\n  );\n}\n"],"names":["RemoveModalFooter","value","valueToCompare","onSubmit","onClose","i18n","f","jsxs","jsx","e","clsx","iconClass","RemoveModal","maxWidth","children","props","setValue","useState","Modal","InputText","name"],"mappings":";;;;;;AAOA,SAASA,EAAkB,EAAE,OAAAC,GAAO,gBAAAC,GAAgB,UAAAC,GAAU,SAAAC,GAAS,MAAAC,IAAO,CAACC,MAAcA,KAAiB;AAC5G,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAW,iDACd,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAA,EAAO,eAAY,oBAAmB,WAAW,6BAA6B,SAASJ,GACrF,UAAAC,EAAK,QAAQ,EAAA,CAChB;AAAA,IACA,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAUL,MAAmBD;AAAA,QAC7B,eAAY;AAAA,QACZ,WAAW;AAAA,QACX,SAAS,CAACQ,MAAM;AACd,UAAIP,MAAmBD,KACrBE,EAASM,CAAC;AAAA,QAEd;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAD,EAAC,KAAA,EAAE,WAAWE,EAAKC,EAAU,QAAW,OAAO,GAAG,MAAM,GAAG;AAAA,UAC1DN,EAAK,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAChB,GACF;AAEJ;AASO,SAASO,EAAY,EAAE,UAAAC,IAAW,SAAS,UAAAC,GAAU,GAAGC,KAA8C;AAC3G,QAAM,EAAE,MAAAV,IAAO,CAACC,MAAMA,MAAMS,GACtB,CAACd,GAAOe,CAAQ,IAAIC,EAAA;AAE1B,SACE,gBAAAT;AAAA,IAACU;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,WAAWL,EAAKK,EAAM,WAAW,4BAA4B;AAAA,MAC7D,OAAO,EAAE,UAAAF,EAAA;AAAA,MACT,OAAO,QAAQE,EAAM,UAAU,aAAa;AAAA,MAC5C,OAAAd;AAAA,MACA,QAAQD;AAAA,MAER,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,QACZ,UAAA;AAAA,UAAAO;AAAA,UACAT,EAAK,SAAS;AAAA,UAAE;AAAA,UAAC,gBAAAG,EAAC,UAAA,EAAQ,UAAAO,EAAM,eAAA,CAAe;AAAA,UAAS;AAAA,UACxDV,EAAK,UAAU;AAAA,UAAE;AAAA,4BACjB,UAAA,EAAO,UAAA;AAAA,YAAA;AAAA,YAAOU,EAAM,UAAU,YAAA;AAAA,YAAc;AAAA,UAAA,GAAM;AAAA,UAAS;AAAA,UAC3DV,EAAK,MAAM;AAAA,UAAE;AAAA,4BAAE,UAAA,EAAO,UAAA;AAAA,YAAA;AAAA,YAAOU,EAAM;AAAA,YAAe;AAAA,UAAA,GAAM;AAAA,UAAS;AAAA,QAAA,GACpE;AAAA,QACA,gBAAAP,EAACW,GAAA,EAAU,MAAK,UAAS,OAAAlB,GAAc,UAAU,CAACmB,GAAMnB,MAAUe,EAASf,CAAK,EAAA,CAAG;AAAA,MAAA,EAAA,CACrF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/organisms/table/actions/ActionsTable.js

@@ -1,5 +1,5 @@
 import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import { c as m } from "../../../chunks/index.js";
+import { c as m } from "../../../chunks/clsx.js";
 import { n as d } from "../../../chunks/noop.js";
 import { useState as p } from "react";
 import { useI18n as u } from "../../../hooks/useI18n.js";

package/dist/organisms/table/actions/ActionsTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsTable.js","sources":["../../../../src/organisms/table/actions/ActionsTable.tsx"],"sourcesContent":["import { ColumnDef } from \"@tanstack/react-table\";\nimport classnames from \"classnames\";\nimport noop from \"lodash/noop\";\nimport { useState } from \"react\";\n\nimport { useI18n } from \"../../../hooks/useI18n.js\";\nimport { ActionType, type FormOptions } from \"../../../interfaces\";\nimport { Select } from \"../../../molecules/forms/select/Select\";\nimport { Table, type TableProps } from \"../../../molecules/table/Table\";\nimport { iconClass } from \"../../../utils/iconClass\";\n\nexport type ActionsTableProps = Omit<TableProps<ActionType>, \"columns\"> & {\n  onAddAction?: (actionName: string) => void;\n  availableActions?: { label: string; value: string }[];\n  i18n?: FormOptions[\"i18n\"];\n};\n\nexport function ActionsTable({ availableActions = [], onAddAction = noop, ...props }: ActionsTableProps) {\n  const { t } = useI18n(props.i18n);\n  const [currentAction, setAction] = useState(\"\");\n\n  const columns: ColumnDef<ActionType>[] = [\n    {\n      header: t(\"Action\"),\n      accessorKey: \"title\"\n    }\n  ];\n\n  return (\n    <Table {...props} columns={columns}>\n      <div className={\"pagination-group\"}>\n        <Select\n          data-testid={\"action-table-select\"}\n          name={\"actions\"}\n          value={currentAction}\n          options={[{ label: t(\"Select an action\"), value: \"\" }].concat(availableActions)}\n          onChange={(_, action) => setAction(action)}\n        />\n        <div className={\"pl-3\"}>\n          <button\n            data-testid={\"action-table-add\"}\n            disabled={currentAction === \"\"}\n            className={\"btn btn-success\"}\n            onClick={() => currentAction && onAddAction(currentAction)}\n            type={\"submit\"}\n          >\n            <i className={classnames(iconClass(undefined, \"plus\"), \"mr-1\")} /> {t(\"Add action\")}\n          </button>\n        </div>\n      </div>\n    </Table>\n  );\n}\n"],"names":["ActionsTable","availableActions","onAddAction","noop","props","t","useI18n","currentAction","setAction","useState","columns","jsx","Table","jsxs","Select","_","action","classnames","iconClass"],"mappings":";;;;;;;;AAiBO,SAASA,EAAa,EAAE,kBAAAC,IAAmB,CAAA,GAAI,aAAAC,IAAcC,GAAM,GAAGC,KAA4B;AACvG,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAQF,EAAM,IAAI,GAC1B,CAACG,GAAeC,CAAS,IAAIC,EAAS,EAAE,GAExCC,IAAmC;AAAA,IACvC;AAAA,MACE,QAAQL,EAAE,QAAQ;AAAA,MAClB,aAAa;AAAA,IAAA;AAAA,EACf;AAGF,SACE,gBAAAM,EAACC,KAAO,GAAGR,GAAO,SAAAM,GAChB,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAW,oBACd,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,eAAa;AAAA,QACb,MAAM;AAAA,QACN,OAAOP;AAAA,QACP,SAAS,CAAC,EAAE,OAAOF,EAAE,kBAAkB,GAAG,OAAO,GAAA,CAAI,EAAE,OAAOJ,CAAgB;AAAA,QAC9E,UAAU,CAACc,GAAGC,MAAWR,EAAUQ,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAE3C,gBAAAL,EAAC,OAAA,EAAI,WAAW,QACd,UAAA,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAa;AAAA,QACb,UAAUN,MAAkB;AAAA,QAC5B,WAAW;AAAA,QACX,SAAS,MAAMA,KAAiBL,EAAYK,CAAa;AAAA,QACzD,MAAM;AAAA,QAEN,UAAA;AAAA,UAAA,gBAAAI,EAAC,KAAA,EAAE,WAAWM,EAAWC,EAAU,QAAW,MAAM,GAAG,MAAM,GAAG;AAAA,UAAE;AAAA,UAAEb,EAAE,YAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACpF,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"ActionsTable.js","sources":["../../../../src/organisms/table/actions/ActionsTable.tsx"],"sourcesContent":["import { ColumnDef } from \"@tanstack/react-table\";\nimport clsx from \"clsx\";\nimport noop from \"lodash/noop\";\nimport { useState } from \"react\";\n\nimport { useI18n } from \"../../../hooks/useI18n.js\";\nimport { ActionType, type FormOptions } from \"../../../interfaces\";\nimport { Select } from \"../../../molecules/forms/select/Select\";\nimport { Table, type TableProps } from \"../../../molecules/table/Table\";\nimport { iconClass } from \"../../../utils/iconClass\";\n\nexport type ActionsTableProps = Omit<TableProps<ActionType>, \"columns\"> & {\n  onAddAction?: (actionName: string) => void;\n  availableActions?: { label: string; value: string }[];\n  i18n?: FormOptions[\"i18n\"];\n};\n\nexport function ActionsTable({ availableActions = [], onAddAction = noop, ...props }: ActionsTableProps) {\n  const { t } = useI18n(props.i18n);\n  const [currentAction, setAction] = useState(\"\");\n\n  const columns: ColumnDef<ActionType>[] = [\n    {\n      header: t(\"Action\"),\n      accessorKey: \"title\"\n    }\n  ];\n\n  return (\n    <Table {...props} columns={columns}>\n      <div className={\"pagination-group\"}>\n        <Select\n          data-testid={\"action-table-select\"}\n          name={\"actions\"}\n          value={currentAction}\n          options={[{ label: t(\"Select an action\"), value: \"\" }].concat(availableActions)}\n          onChange={(_, action) => setAction(action)}\n        />\n        <div className={\"pl-3\"}>\n          <button\n            data-testid={\"action-table-add\"}\n            disabled={currentAction === \"\"}\n            className={\"btn btn-success\"}\n            onClick={() => currentAction && onAddAction(currentAction)}\n            type={\"submit\"}\n          >\n            <i className={clsx(iconClass(undefined, \"plus\"), \"mr-1\")} /> {t(\"Add action\")}\n          </button>\n        </div>\n      </div>\n    </Table>\n  );\n}\n"],"names":["ActionsTable","availableActions","onAddAction","noop","props","t","useI18n","currentAction","setAction","useState","columns","jsx","Table","jsxs","Select","_","action","clsx","iconClass"],"mappings":";;;;;;;;AAiBO,SAASA,EAAa,EAAE,kBAAAC,IAAmB,CAAA,GAAI,aAAAC,IAAcC,GAAM,GAAGC,KAA4B;AACvG,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAQF,EAAM,IAAI,GAC1B,CAACG,GAAeC,CAAS,IAAIC,EAAS,EAAE,GAExCC,IAAmC;AAAA,IACvC;AAAA,MACE,QAAQL,EAAE,QAAQ;AAAA,MAClB,aAAa;AAAA,IAAA;AAAA,EACf;AAGF,SACE,gBAAAM,EAACC,KAAO,GAAGR,GAAO,SAAAM,GAChB,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAW,oBACd,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,eAAa;AAAA,QACb,MAAM;AAAA,QACN,OAAOP;AAAA,QACP,SAAS,CAAC,EAAE,OAAOF,EAAE,kBAAkB,GAAG,OAAO,GAAA,CAAI,EAAE,OAAOJ,CAAgB;AAAA,QAC9E,UAAU,CAACc,GAAGC,MAAWR,EAAUQ,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAE3C,gBAAAL,EAAC,OAAA,EAAI,WAAW,QACd,UAAA,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAa;AAAA,QACb,UAAUN,MAAkB;AAAA,QAC5B,WAAW;AAAA,QACX,SAAS,MAAMA,KAAiBL,EAAYK,CAAa;AAAA,QACzD,MAAM;AAAA,QAEN,UAAA;AAAA,UAAA,gBAAAI,EAAC,KAAA,EAAE,WAAWM,EAAKC,EAAU,QAAW,MAAM,GAAG,MAAM,GAAG;AAAA,UAAE;AAAA,UAAEb,EAAE,YAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EAC9E,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/dist/organisms/table/forms/components/FormsCell.js

@@ -1,5 +1,5 @@
 import { jsxs as e, jsx as a } from "react/jsx-runtime";
-import { c as t } from "../../../../chunks/index.js";
+import { c as t } from "../../../../chunks/clsx.js";
 import { h as m } from "../../../../chunks/moment.js";
 import { registerComponent as c } from "../../../../registries/components.js";
 import { iconClass as r } from "../../../../utils/iconClass.js";

package/dist/organisms/table/forms/components/FormsCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormsCell.js","sources":["../../../../../src/organisms/table/forms/components/FormsCell.tsx"],"sourcesContent":["import { CellContext } from \"@tanstack/react-table\";\nimport cx from \"classnames\";\nimport moment from \"moment\";\n\nimport type { FormType } from \"../../../../interfaces/index.js\";\nimport { registerComponent } from \"../../../../registries/components.js\";\nimport { iconClass } from \"../../../../utils/iconClass\";\nimport { stopPropagationWrapper } from \"../../../../utils/stopPropagationWrapper\";\n\nexport function FormsCell(\n  props: CellContext<FormType, any> & {\n    i18n: (i18n: string) => string;\n  }\n) {\n  const {\n    row: { original: form }\n  } = props;\n\n  return (\n    <div className={\"p-1\"}>\n      <h4 className={\"text-primary text-lg flex space-x-2 items-center\"}>\n        <i className={cx(iconClass(undefined, \"server\"), \"text-secondary\")} />\n        <span>{form.title}</span>\n      </h4>\n\n      <ul className='reset-list text-gray-500'>\n        <li className={\"text-sm\"}>Name: {form.name || form.machineName}</li>\n        <li className='mt-5 flex space-x-1'>\n          <span className='badge bg-light flex space-x-1'>\n            <i className={iconClass(undefined, \"history\")} />\n            <span>Updated {moment(form.modified).fromNow()}</span>\n          </span>\n\n          {(form.tags || []).map((tag, index) => (\n            <button\n              key={index}\n              className='badge badge-hover bg-secondary flex space-x-1'\n              onClick={stopPropagationWrapper(() => {\n                // props.setFilter(\"tags\", tag);\n                // props.gotoPage(0);\n              })}\n            >\n              <i className={iconClass(undefined, \"tags\")} />\n              <span>{tag}</span>\n            </button>\n          ))}\n        </li>\n      </ul>\n    </div>\n  );\n}\n\nregisterComponent(\"FormsCell\", FormsCell);\n"],"names":["FormsCell","props","form","jsxs","jsx","cx","iconClass","moment","tag","index","stopPropagationWrapper","registerComponent"],"mappings":";;;;;;AASO,SAASA,EACdC,GAGA;AACA,QAAM;AAAA,IACJ,KAAK,EAAE,UAAUC,EAAA;AAAA,EAAK,IACpBD;AAEJ,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAW,OACd,UAAA;AAAA,IAAA,gBAAAA,EAAC,MAAA,EAAG,WAAW,oDACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,KAAA,EAAE,WAAWC,EAAGC,EAAU,QAAW,QAAQ,GAAG,gBAAgB,GAAG;AAAA,MACpE,gBAAAF,EAAC,QAAA,EAAM,UAAAF,EAAK,MAAA,CAAM;AAAA,IAAA,GACpB;AAAA,IAEA,gBAAAC,EAAC,MAAA,EAAG,WAAU,4BACZ,UAAA;AAAA,MAAA,gBAAAA,EAAC,MAAA,EAAG,WAAW,WAAW,UAAA;AAAA,QAAA;AAAA,QAAOD,EAAK,QAAQA,EAAK;AAAA,MAAA,GAAY;AAAA,MAC/D,gBAAAC,EAAC,MAAA,EAAG,WAAU,uBACZ,UAAA;AAAA,QAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,iCACd,UAAA;AAAA,UAAA,gBAAAC,EAAC,KAAA,EAAE,WAAWE,EAAU,QAAW,SAAS,GAAG;AAAA,4BAC9C,QAAA,EAAK,UAAA;AAAA,YAAA;AAAA,YAASC,EAAOL,EAAK,QAAQ,EAAE,QAAA;AAAA,UAAQ,EAAA,CAAE;AAAA,QAAA,GACjD;AAAA,SAEEA,EAAK,QAAQ,CAAA,GAAI,IAAI,CAACM,GAAKC,MAC3B,gBAAAN;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,SAASO,EAAuB,MAAM;AAAA,YAGtC,CAAC;AAAA,YAED,UAAA;AAAA,cAAA,gBAAAN,EAAC,KAAA,EAAE,WAAWE,EAAU,QAAW,MAAM,GAAG;AAAA,cAC5C,gBAAAF,EAAC,UAAM,UAAAI,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UARNC;AAAA,QAAA,CAUR;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAEAE,EAAkB,aAAaX,CAAS;"}
+{"version":3,"file":"FormsCell.js","sources":["../../../../../src/organisms/table/forms/components/FormsCell.tsx"],"sourcesContent":["import { CellContext } from \"@tanstack/react-table\";\nimport cx from \"clsx\";\nimport moment from \"moment\";\n\nimport type { FormType } from \"../../../../interfaces/index.js\";\nimport { registerComponent } from \"../../../../registries/components.js\";\nimport { iconClass } from \"../../../../utils/iconClass\";\nimport { stopPropagationWrapper } from \"../../../../utils/stopPropagationWrapper\";\n\nexport function FormsCell(\n  props: CellContext<FormType, any> & {\n    i18n: (i18n: string) => string;\n  }\n) {\n  const {\n    row: { original: form }\n  } = props;\n\n  return (\n    <div className={\"p-1\"}>\n      <h4 className={\"text-primary text-lg flex space-x-2 items-center\"}>\n        <i className={cx(iconClass(undefined, \"server\"), \"text-secondary\")} />\n        <span>{form.title}</span>\n      </h4>\n\n      <ul className='reset-list text-gray-500'>\n        <li className={\"text-sm\"}>Name: {form.name || form.machineName}</li>\n        <li className='mt-5 flex space-x-1'>\n          <span className='badge bg-light flex space-x-1'>\n            <i className={iconClass(undefined, \"history\")} />\n            <span>Updated {moment(form.modified).fromNow()}</span>\n          </span>\n\n          {(form.tags || []).map((tag, index) => (\n            <button\n              key={index}\n              className='badge badge-hover bg-secondary flex space-x-1'\n              onClick={stopPropagationWrapper(() => {\n                // props.setFilter(\"tags\", tag);\n                // props.gotoPage(0);\n              })}\n            >\n              <i className={iconClass(undefined, \"tags\")} />\n              <span>{tag}</span>\n            </button>\n          ))}\n        </li>\n      </ul>\n    </div>\n  );\n}\n\nregisterComponent(\"FormsCell\", FormsCell);\n"],"names":["FormsCell","props","form","jsxs","jsx","cx","iconClass","moment","tag","index","stopPropagationWrapper","registerComponent"],"mappings":";;;;;;AASO,SAASA,EACdC,GAGA;AACA,QAAM;AAAA,IACJ,KAAK,EAAE,UAAUC,EAAA;AAAA,EAAK,IACpBD;AAEJ,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAW,OACd,UAAA;AAAA,IAAA,gBAAAA,EAAC,MAAA,EAAG,WAAW,oDACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,KAAA,EAAE,WAAWC,EAAGC,EAAU,QAAW,QAAQ,GAAG,gBAAgB,GAAG;AAAA,MACpE,gBAAAF,EAAC,QAAA,EAAM,UAAAF,EAAK,MAAA,CAAM;AAAA,IAAA,GACpB;AAAA,IAEA,gBAAAC,EAAC,MAAA,EAAG,WAAU,4BACZ,UAAA;AAAA,MAAA,gBAAAA,EAAC,MAAA,EAAG,WAAW,WAAW,UAAA;AAAA,QAAA;AAAA,QAAOD,EAAK,QAAQA,EAAK;AAAA,MAAA,GAAY;AAAA,MAC/D,gBAAAC,EAAC,MAAA,EAAG,WAAU,uBACZ,UAAA;AAAA,QAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,iCACd,UAAA;AAAA,UAAA,gBAAAC,EAAC,KAAA,EAAE,WAAWE,EAAU,QAAW,SAAS,GAAG;AAAA,4BAC9C,QAAA,EAAK,UAAA;AAAA,YAAA;AAAA,YAASC,EAAOL,EAAK,QAAQ,EAAE,QAAA;AAAA,UAAQ,EAAA,CAAE;AAAA,QAAA,GACjD;AAAA,SAEEA,EAAK,QAAQ,CAAA,GAAI,IAAI,CAACM,GAAKC,MAC3B,gBAAAN;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,SAASO,EAAuB,MAAM;AAAA,YAGtC,CAAC;AAAA,YAED,UAAA;AAAA,cAAA,gBAAAN,EAAC,KAAA,EAAE,WAAWE,EAAU,QAAW,MAAM,GAAG;AAAA,cAC5C,gBAAAF,EAAC,UAAM,UAAAI,EAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UARNC;AAAA,QAAA,CAUR;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAEAE,EAAkB,aAAaX,CAAS;"}

package/dist/utils/iconClass.js

@@ -1,4 +1,4 @@
-import { c as t } from "../chunks/index2.js";
+import { c as t } from "../chunks/index.js";
 function n(e, r, s) {
   return t.Templates.current.iconClass(e || t.Templates.current.defaultIconset, r, s);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "3.0.0-rc.23",
+  "version": "3.0.0-rc.25",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "type": "module",
   "main": "./dist/index.js",
@@ -24,7 +24,7 @@
     "watch": "vite build --watch"
   },
   "dependencies": {
-    "classnames": "^2.3.1",
+    "clsx": "2.1.1",
     "eventemitter2": "^6.4.3",
     "use-debounce": "^10.0.4"
   },
@@ -44,8 +44,8 @@
   },
   "devDependencies": {
     "@tanstack/react-table": ">=8.20.6",
-    "@tsed/tailwind-formio": "3.0.0-rc.23",
-    "@tsed/typescript": "3.0.0-rc.23",
+    "@tsed/tailwind-formio": "3.0.0-rc.25",
+    "@tsed/typescript": "3.0.0-rc.25",
     "microbundle": "0.13.0",
     "vite": "7.1.5",
     "vitest": "3.2.4"

package/src/atoms/icon/Icon.tsx

@@ -1,4 +1,4 @@
-import cx from "classnames";
+import cx from "clsx";
 import type { ComponentPropsWithoutRef } from "react";
 
 import { registerComponent } from "../../registries/components";

package/src/molecules/button/Button.tsx

@@ -1,4 +1,4 @@
-import cx from "classnames";
+import cx from "clsx";
 import { type ButtonHTMLAttributes, forwardRef, type PropsWithChildren } from "react";
 
 import { registerComponent } from "../../registries/components";

package/src/molecules/card/Card.tsx

@@ -1,4 +1,4 @@
-import classnames from "classnames";
+import clsx from "clsx";
 import { PropsWithChildren } from "react";
 
 import { registerComponent } from "../../registries/components.js";
@@ -10,7 +10,7 @@ export interface CardProps {
 
 export function Card({ children, label, className }: PropsWithChildren<CardProps>) {
   return (
-    <div className={classnames("card", className)}>
+    <div className={clsx("card", className)}>
       <div className={"card-header "}>
         <h4 className={"card-title"}>{label}</h4>
       </div>

package/src/molecules/forms/form-control/FormControl.tsx

@@ -1,4 +1,4 @@
-import classnames from "classnames";
+import clsx from "clsx";
 import omit from "lodash/omit";
 import { HTMLAttributes, InputHTMLAttributes, PropsWithChildren, ReactNode } from "react";
 
@@ -42,7 +42,7 @@ export function FormControl<Value = unknown>({
     <div
       data-testid={name && `form-group-${name}`}
       id={`form-group-${name || ""}`}
-      className={classnames(
+      className={clsx(
         "form-group",
         {
           "-with-before": !!before,

package/src/molecules/forms/select/components/ChoicesSelect.stories.tsx

@@ -1,7 +1,7 @@
 import "./ChoicesSelect";
 
 import { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";
@@ -21,6 +21,36 @@ const options = [
     value: "option-3"
   }
 ];
+
+const OptionTemplate = ({ label, data }: any) => {
+  return (
+    <span style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
+      <span>{label}</span>
+      <small style={{ opacity: 0.7 }}>{data?.hint}</small>
+    </span>
+  );
+};
+
+async function openChoicesDropdown(canvasElement: HTMLElement) {
+  await waitFor(() => {
+    expect(canvasElement.querySelector(".choices")).toBeInTheDocument();
+  });
+
+  const choicesElement = canvasElement.querySelector(".choices") as HTMLElement;
+  const inner = choicesElement.querySelector(".choices__inner") as HTMLElement;
+
+  await userEvent.click(inner);
+
+  await waitFor(() => {
+    expect(choicesElement.classList.contains("is-open")).toBe(true);
+  });
+
+  return choicesElement;
+}
+
+function sleep(ms = 300) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
 /**
  * ChoicesJS select component.
  *
@@ -38,7 +68,13 @@ export default {
   component: Select,
   parameters: {
     layout: "centered",
-    backgrounds: { default: "pearl" }
+    backgrounds: { default: "pearl" },
+    docs: {
+      description: {
+        component:
+          "Choices.js layout using the v11 template callback API. Custom option renderers should be passed with `customProperties.template` on each option to keep Choices `data-*` and ARIA attributes intact."
+      }
+    }
   },
   args: {
     layout: "choicesjs"
@@ -95,6 +131,34 @@ export const Usage: Story = {
     value: "option-1",
     options,
     onChange: fn()
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Baseline story for default Choices rendering (no custom option template)."
+      }
+    }
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const select = canvas.getByTestId("select_name");
+
+    await waitFor(() => {
+      expect(select).toHaveValue("option-1");
+    });
+    await sleep();
+
+    const choicesElement = await openChoicesDropdown(canvasElement);
+    await sleep();
+    const option = choicesElement.querySelector('[data-choice-selectable][data-value="option-2"]') as HTMLElement;
+
+    await userEvent.click(option);
+    await sleep();
+
+    await waitFor(() => {
+      expect(select).toHaveValue("option-2");
+      expect(args.onChange).toHaveBeenCalledWith("name", "option-2");
+    });
   }
 };
 
@@ -330,3 +394,71 @@ export const WithGroupsAndMultiple: Story = {
     ]
   }
 };
+
+export const WithCustomOptionTemplate: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: "",
+    placeholder: "Select an option",
+    onChange: fn(),
+    options: [
+      {
+        label: "Option 1",
+        value: "option-1",
+        customProperties: {
+          hint: "alpha",
+          template: OptionTemplate
+        }
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        customProperties: {
+          hint: "beta",
+          template: OptionTemplate
+        }
+      },
+      {
+        label: "Option 3",
+        value: "option-3",
+        customProperties: {
+          hint: "gamma",
+          template: OptionTemplate
+        }
+      }
+    ]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates the v11-compatible custom option renderer via `option.customProperties.template`. The callback keeps required Choices attributes (`data-choice`, `data-id`, `data-value`, roles)."
+      }
+    }
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const select = canvas.getByTestId("select_name");
+
+    const choicesElement = await openChoicesDropdown(canvasElement);
+    await sleep();
+    const customOption = choicesElement.querySelector('[data-choice][data-value="option-1"]') as HTMLElement;
+
+    await waitFor(() => {
+      expect(customOption).toBeInTheDocument();
+      expect(customOption).toHaveAttribute("role", "option");
+      expect(customOption).toHaveTextContent("alpha");
+    });
+    await sleep();
+
+    const option = choicesElement.querySelector('[data-choice-selectable][data-value="option-3"]') as HTMLElement;
+    await userEvent.click(option);
+    await sleep();
+
+    await waitFor(() => {
+      expect(select).toHaveValue("option-3");
+      expect(args.onChange).toHaveBeenCalledWith("name", "option-3");
+    });
+  }
+};

package/src/molecules/forms/select/components/ChoicesSelect.tsx

@@ -1,12 +1,12 @@
 import Choices from "choices.js";
-import cx from "classnames";
+import cx from "clsx";
 import { useEffect, useMemo, useRef } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
 import { registerComponent } from "../../../../registries/components";
 import { cleanFormControlProps } from "../../form-control/FormControl";
 import type { AllSelectProps } from "../Select.interface";
-import { callbackOnCreateTemplates } from "./choices.template";
+import { callbackOnCreateTemplates as defaultTemplateCallback } from "./choices.template";
 
 export function useChoices({
   name,
@@ -75,7 +75,14 @@ export function useChoices({
 
   useEffect(() => {
     if (!choicesRef.current) {
-      const { allowHTML = true, silent = true, removeItemButton = true, shouldSort = false, itemSelectText = "" } = customProperties;
+      const {
+        allowHTML = true,
+        silent = true,
+        removeItemButton = true,
+        shouldSort = false,
+        itemSelectText = "",
+        callbackOnCreateTemplates
+      } = customProperties;
       choicesRef.current = new Choices(ref.current, {
         ...customProperties,
         allowHTML,
@@ -87,7 +94,7 @@ export function useChoices({
         placeholderValue: "" as string,
         itemSelectText,
         shouldSort,
-        callbackOnCreateTemplates
+        callbackOnCreateTemplates: callbackOnCreateTemplates || defaultTemplateCallback
       } as any);
     }
 

package/src/molecules/forms/select/components/HtmlSelect.tsx

@@ -1,4 +1,4 @@
-import cx from "classnames";
+import cx from "clsx";
 
 import { registerComponent } from "../../../../registries/components";
 import { getEventValue } from "../../../../utils/getEventValue";
@@ -35,17 +35,17 @@ export function HTMLSelect({ name, id = name, size, value, multiple, onChange, o
         </option>
       )}
       {hasGroup
-        ? options.map(({ label, options }) => {
+        ? options.map(({ label, options }, index) => {
             return (
-              <optgroup key={label} label={label}>
-                {options.map((props: SelectOptionBaseProps) => {
-                  return <Option key={String(props.value)} {...props} />;
+              <optgroup key={id + "-" + index} label={label}>
+                {options.map((props: SelectOptionBaseProps, index: number) => {
+                  return <Option key={`${id}-optgroup-${index}`} {...props} />;
                 })}
               </optgroup>
             );
           })
-        : (options as SelectOptionBaseProps[]).map((props) => {
-            return <Option key={String(props.value)} {...props} />;
+        : (options as SelectOptionBaseProps[]).map((props, index) => {
+            return <Option key={`${id}-option-${index}`} {...props} />;
           })}
     </select>
   );

package/src/molecules/forms/select/components/choices.template.tsx

@@ -1,38 +1,60 @@
-import classnames from "classnames";
 import { renderToString } from "react-dom/server";
 
-const ChoiceTemplate = ({ classNames, data, itemSelectText }: { classNames: any; data: any; itemSelectText: string }) => {
-  const Template = data.customProperties?.template;
+type StrToEl = (template: string) => HTMLElement;
+type EscapeForTemplate = (allowHTML: boolean, value: unknown) => string;
+type GetClassNames = (className: string | string[]) => string[];
 
-  return (
-    <div
-      className={classnames(classNames.item, classNames.itemChoice, data.disabled ? classNames.itemDisabled : classNames.itemSelectable)}
-      aria-label={data.label}
-      data-select-text={itemSelectText}
-      data-choice=''
-      data-id={data.id}
-      data-value={data.value}
-      {...(data.disabled
-        ? {
-            "data-choice-disabled": "",
-            "aria-disabled": true
-          }
-        : {
-            "data-choice-selectable": ""
-          })}
-      {...(data.groupId > 0 ? { role: "treeitem" } : { role: "option" })}
-    >
-      {Template ? <Template {...data} data={{ ...data, ...data?.customProperties }} /> : data.label}
-    </div>
-  );
-};
-
-export function callbackOnCreateTemplates(this: { config: { itemSelectText: string } }, strToEl: (template: string) => any) {
+/**
+ * Choices.js v11 template callback.
+ *
+ * Why this file exists:
+ * - We need to keep Choices expected DOM/data attributes (`data-choice`, `data-id`,
+ *   `data-value`, `data-choice-selectable`, etc.) so keyboard/mouse interactions keep working.
+ * - We optionally support a React custom option renderer via `customProperties.template`.
+ *
+ * Notes:
+ * - The callback signature changed in Choices v11 and now receives:
+ *   `strToEl`, `escapeForTemplate`, `getClassNames`.
+ * - `this` is the current Choices instance, so we can read `this.config`.
+ */
+export function callbackOnCreateTemplates(
+  this: { config: { itemSelectText: string; allowHTML: boolean } },
+  strToEl: StrToEl,
+  escapeForTemplate: EscapeForTemplate,
+  getClassNames: GetClassNames
+) {
   const itemSelectText = this.config.itemSelectText;
 
   return {
-    choice: (...args: any) => {
-      return strToEl(renderToString(<ChoiceTemplate itemSelectText={itemSelectText} classNames={args[0]} data={args[1]} />));
+    /**
+     * Custom renderer for each dropdown option ("choice" in Choices terminology).
+     * Keep all required attributes when editing this template, otherwise
+     * selection/highlight/accessibility behavior can break.
+     */
+    choice: ({ classNames }: { classNames: Record<string, string | string[]> }, data: any) => {
+      const Template = data.customProperties?.template;
+      const classes = [
+        ...getClassNames(classNames.item),
+        ...getClassNames(classNames.itemChoice),
+        ...getClassNames(data.disabled ? classNames.itemDisabled : classNames.itemSelectable)
+      ].join(" ");
+
+      const label = Template
+        ? renderToString(<Template {...data} data={{ ...data, ...data?.customProperties }} />)
+        : escapeForTemplate(this.config.allowHTML, data.label);
+
+      // Keep this markup aligned with Choices defaults: attributes below are required by the library.
+      return strToEl(
+        `<div class="${classes}" aria-label="${escapeForTemplate(true, data.label)}"
+          data-select-text="${escapeForTemplate(true, itemSelectText)}"
+          data-choice
+          ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : "data-choice-selectable"}
+          data-id="${data.id}"
+          data-value="${escapeForTemplate(true, data.value)}"
+          ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
+          ${label}
+        </div>`
+      );
     }
   };
 }

package/src/molecules/forms/select/hooks/useOptions.ts

@@ -42,11 +42,7 @@ export function mapOptions(options: AllSelectProps["options"]) {
   return options;
 }
 
-export function useOptions<Data = string>({ options, choices }: AllSelectProps<Data>) {
-  if (choices) {
-    options = choices;
-  }
-
+export function useOptions<Data = string>({ options }: AllSelectProps<Data>) {
   return useMemo(() => {
     return mapOptions(options);
   }, [options]);

package/src/molecules/loader/Loader.tsx

@@ -1,5 +1,4 @@
-import classnames from "classnames";
-import cx from "classnames";
+import clsx from "clsx";
 import { type ComponentPropsWithoutRef, PropsWithChildren } from "react";
 
 import { Icon } from "../../atoms/icon/Icon.js";
@@ -23,12 +22,9 @@ export function Loader({
     return (
       <div
         {...props}
-        className={classnames(
-          "opacity-85 z-20 flex items-center justify-center p-5 absolute top-0 right-0 left-0 bottom-0 bg-white",
-          className
-        )}
+        className={clsx("opacity-85 z-20 flex items-center justify-center p-5 absolute top-0 right-0 left-0 bottom-0 bg-white", className)}
       >
-        <Icon data-testid={`icon_${icon}`} className={cx("text-8xl", color)} iconset={iconset} name={icon} spinning={true} />
+        <Icon data-testid={`icon_${icon}`} className={clsx("text-8xl", color)} iconset={iconset} name={icon} spinning={true} />
       </div>
     );
   }