@tsed/react-formio 3.0.0-alpha.11 → 3.0.0-alpha.12

package/dist/organisms/table/submissions/SubmissionsTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmissionsTable.js","sources":["../../../../src/organisms/table/submissions/SubmissionsTable.tsx"],"sourcesContent":["import type { FormType, JSON, SubmissionType } from \"../../../interfaces\";\nimport { Table, type TableProps } from \"../../../molecules/table/Table\";\nimport { mapFormToColumns } from \"../../../molecules/table/utils/mapFormToColumns.js\";\n\nexport type SubmissionsTableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = Omit<\n  TableProps<SubmissionType<Data>>,\n  \"columns\"\n> & {\n  form?: FormType;\n};\n\nexport function SubmissionsTable<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({\n  form,\n  ...props\n}: SubmissionsTableProps<Data>) {\n  const columns: any[] | undefined = form && mapFormToColumns(form);\n\n  return <Table {...(props as any)} columns={columns!} />;\n}\n"],"names":["SubmissionsTable","form","props","columns","mapFormToColumns","jsx","Table"],"mappings":";;;AAWO,SAASA,EAAiF;AAAA,EAC/F,MAAAC;AAAA,EACA,GAAGC;AACL,GAAgC;AACxB,QAAAC,IAA6BF,KAAQG,EAAiBH,CAAI;AAEhE,SAAQ,gBAAAI,EAAAC,GAAA,EAAO,GAAIJ,GAAe,SAAAC,EAAmB,CAAA;AACvD;"}
+{"version":3,"file":"SubmissionsTable.js","sources":["../../../../src/organisms/table/submissions/SubmissionsTable.tsx"],"sourcesContent":["import type { FormType, JSON, SubmissionType } from \"../../../interfaces\";\nimport { Table, type TableProps } from \"../../../molecules/table/Table\";\nimport { mapFormToColumns } from \"../../../molecules/table/utils/mapFormToColumns.js\";\n\nexport type SubmissionsTableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = Omit<\n  TableProps<SubmissionType<Data>>,\n  \"columns\"\n> & {\n  form?: FormType;\n};\n\nexport function SubmissionsTable<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({\n  form,\n  ...props\n}: SubmissionsTableProps<Data>) {\n  const columns: any[] | undefined = form && mapFormToColumns(form);\n\n  return <Table {...(props as any)} columns={columns!} />;\n}\n"],"names":["SubmissionsTable","form","props","columns","mapFormToColumns","jsx","Table"],"mappings":";;;AAWO,SAASA,EAAiF;AAAA,EAC/F,MAAAC;AAAA,EACA,GAAGC;AACL,GAAgC;AAC9B,QAAMC,IAA6BF,KAAQG,EAAiBH,CAAI;AAEhE,SAAO,gBAAAI,EAACC,GAAA,EAAO,GAAIJ,GAAe,SAAAC,EAAA,CAAmB;AACvD;"}

package/dist/organisms/views/FormViews.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormViews.js","sources":["../../../src/organisms/views/FormViews.tsx"],"sourcesContent":["import type { FormType, JSON, PermissionsResolver } from \"../../interfaces/index.js\";\nimport type { Tab as DefaultTab } from \"../../molecules/tabs/Tab.js\";\nimport type { TabList as DefaultTabList } from \"../../molecules/tabs/TabList.js\";\nimport type { TabPanel as DefaultTabPanel } from \"../../molecules/tabs/TabPanel.js\";\nimport type { Tabs as DefaultTabs } from \"../../molecules/tabs/Tabs.js\";\nimport type { TabsBody as DefaultTabsBody } from \"../../molecules/tabs/TabsBody.js\";\nimport { getComponent } from \"../../registries/components.js\";\nimport { FormAccess, type FormAccessProps } from \"../form/access/FormAccess.js\";\nimport { FormEdit, type FormEditProps } from \"../form/builder/FormEdit.js\";\nimport { FormExport } from \"../form/exports/FormExport.js\";\nimport { FormPreview } from \"../form/preview/FormPreview.js\";\nimport { FormSettings } from \"../form/settings/FormSettings.js\";\nimport { ActionsTable, type ActionsTableProps } from \"../table/actions/ActionsTable.js\";\nimport { SubmissionsTable, type SubmissionsTableProps } from \"../table/submissions/SubmissionsTable.js\";\n\nexport type FormViewsProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = {\n  form: FormEditProps[\"form\"];\n  submissions: SubmissionsTableProps<Data>[\"data\"];\n  availableActions: ActionsTableProps[\"availableActions\"];\n  actions: ActionsTableProps[\"data\"];\n  roles?: FormAccessProps[\"roles\"];\n  i18n?: (key: string) => string;\n  onAction: () => void;\n  permissionsResolver?: PermissionsResolver<Data>;\n};\n\nfunction useSubmissionsOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(\n  permissionsResolver?: PermissionsResolver<Data>\n) {\n  return [\n    {\n      title: \"Edit\",\n      action: \"submission:edit\",\n      alias: \"row\",\n      icon: \"edit\",\n      permissionsResolver\n    },\n    {\n      action: \"submission:delete\",\n      icon: \"trash\",\n      buttonType: \"danger\",\n      permissionsResolver\n    }\n  ] as SubmissionsTableProps<Data>[\"operations\"];\n}\n\nfunction useActionsOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(\n  permissionsResolver?: PermissionsResolver<Data>\n) {\n  return [\n    {\n      title: \"Edit\",\n      action: \"action:edit\",\n      alias: \"row\",\n      icon: \"edit\",\n      permissionsResolver\n    },\n    {\n      action: \"action:delete\",\n      icon: \"trash\",\n      buttonType: \"danger\",\n      permissionsResolver\n    }\n  ] as SubmissionsTableProps<Data>[\"operations\"];\n}\n\nexport function FormViews<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({\n  form,\n  roles,\n  availableActions,\n  actions,\n  permissionsResolver,\n  submissions,\n  i18n = (f) => f\n}: FormViewsProps<Data>) {\n  const Tabs = getComponent<typeof DefaultTabs>(\"Tabs\");\n  const TabList = getComponent<typeof DefaultTabList>(\"TabList\");\n  const Tab = getComponent<typeof DefaultTab>(\"Tab\");\n  const TabsBody = getComponent<typeof DefaultTabsBody>(\"TabsBody\");\n  const TabPanel = getComponent<typeof DefaultTabPanel>(\"TabPanel\");\n  const submissionsOperations = useSubmissionsOperations<Data>(permissionsResolver);\n  const actionsOperations = useActionsOperations<any>(permissionsResolver);\n\n  return (\n    <Tabs>\n      <TabList>\n        <Tab value={0} icon='edit'>\n          {i18n(\"Edit\")}\n        </Tab>\n        <Tab value={1} icon='data'>\n          {i18n(\"Data\")}\n        </Tab>\n        <Tab value={2} icon='test-tube'>\n          {i18n(\"Preview\")}\n        </Tab>\n        <Tab value={3} icon='paper-plane'>\n          {i18n(\"Actions\")}\n        </Tab>\n        <Tab value={4} icon='lock'>\n          {i18n(\"Access\")}\n        </Tab>\n        <Tab value={5} icon='download'>\n          {i18n(\"Export\")}\n        </Tab>\n        <Tab value={6} icon='cog'>\n          {i18n(\"Settings\")}\n        </Tab>\n      </TabList>\n      <TabsBody>\n        <TabPanel value={0} className='p-3 border-l-1 border-b-1 border-r-1 border-gray-300'>\n          <FormEdit form={form} options={{ i18n }} />\n        </TabPanel>\n        <TabPanel value={1}>\n          <SubmissionsTable<Data>\n            className={\"border-top-0\"}\n            form={form as FormType}\n            data={submissions}\n            i18n={i18n}\n            operations={submissionsOperations}\n          />\n        </TabPanel>\n        <TabPanel value={2}>\n          <FormPreview form={form as FormType} i18n={i18n} />\n        </TabPanel>\n        <TabPanel value={3}>\n          <ActionsTable\n            className={\"border-top-0\"}\n            availableActions={availableActions}\n            data={actions}\n            operations={actionsOperations as any}\n            i18n={i18n}\n          />\n        </TabPanel>\n        <TabPanel value={4} className='pt-3'>\n          <FormAccess form={form as FormType} roles={roles} options={{ i18n }} />\n        </TabPanel>\n        <TabPanel value={5} className='pt-3'>\n          <FormExport i18n={i18n} />\n        </TabPanel>\n        <TabPanel value={6} className='p-3 border-l-1 border-b-1 border-r-1 border-gray-300'>\n          <FormSettings form={form as FormType} options={{}} />\n        </TabPanel>\n      </TabsBody>\n    </Tabs>\n  );\n}\n"],"names":["useSubmissionsOperations","permissionsResolver","useActionsOperations","FormViews","form","roles","availableActions","actions","submissions","i18n","f","Tabs","getComponent","TabList","Tab","TabsBody","TabPanel","submissionsOperations","actionsOperations","jsxs","jsx","FormEdit","SubmissionsTable","FormPreview","ActionsTable","FormAccess","FormExport","FormSettings"],"mappings":"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"}
+{"version":3,"file":"FormViews.js","sources":["../../../src/organisms/views/FormViews.tsx"],"sourcesContent":["import type { FormType, JSON, PermissionsResolver } from \"../../interfaces/index.js\";\nimport type { Tab as DefaultTab } from \"../../molecules/tabs/Tab.js\";\nimport type { TabList as DefaultTabList } from \"../../molecules/tabs/TabList.js\";\nimport type { TabPanel as DefaultTabPanel } from \"../../molecules/tabs/TabPanel.js\";\nimport type { Tabs as DefaultTabs } from \"../../molecules/tabs/Tabs.js\";\nimport type { TabsBody as DefaultTabsBody } from \"../../molecules/tabs/TabsBody.js\";\nimport { getComponent } from \"../../registries/components.js\";\nimport { FormAccess, type FormAccessProps } from \"../form/access/FormAccess.js\";\nimport { FormEdit, type FormEditProps } from \"../form/builder/FormEdit.js\";\nimport { FormExport } from \"../form/exports/FormExport.js\";\nimport { FormPreview } from \"../form/preview/FormPreview.js\";\nimport { FormSettings } from \"../form/settings/FormSettings.js\";\nimport { ActionsTable, type ActionsTableProps } from \"../table/actions/ActionsTable.js\";\nimport { SubmissionsTable, type SubmissionsTableProps } from \"../table/submissions/SubmissionsTable.js\";\n\nexport type FormViewsProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = {\n  form: FormEditProps[\"form\"];\n  submissions: SubmissionsTableProps<Data>[\"data\"];\n  availableActions: ActionsTableProps[\"availableActions\"];\n  actions: ActionsTableProps[\"data\"];\n  roles?: FormAccessProps[\"roles\"];\n  i18n?: (key: string) => string;\n  onAction: () => void;\n  permissionsResolver?: PermissionsResolver<Data>;\n};\n\nfunction useSubmissionsOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(\n  permissionsResolver?: PermissionsResolver<Data>\n) {\n  return [\n    {\n      title: \"Edit\",\n      action: \"submission:edit\",\n      alias: \"row\",\n      icon: \"edit\",\n      permissionsResolver\n    },\n    {\n      action: \"submission:delete\",\n      icon: \"trash\",\n      buttonType: \"danger\",\n      permissionsResolver\n    }\n  ] as SubmissionsTableProps<Data>[\"operations\"];\n}\n\nfunction useActionsOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(\n  permissionsResolver?: PermissionsResolver<Data>\n) {\n  return [\n    {\n      title: \"Edit\",\n      action: \"action:edit\",\n      alias: \"row\",\n      icon: \"edit\",\n      permissionsResolver\n    },\n    {\n      action: \"action:delete\",\n      icon: \"trash\",\n      buttonType: \"danger\",\n      permissionsResolver\n    }\n  ] as SubmissionsTableProps<Data>[\"operations\"];\n}\n\nexport function FormViews<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({\n  form,\n  roles,\n  availableActions,\n  actions,\n  permissionsResolver,\n  submissions,\n  i18n = (f) => f\n}: FormViewsProps<Data>) {\n  const Tabs = getComponent<typeof DefaultTabs>(\"Tabs\");\n  const TabList = getComponent<typeof DefaultTabList>(\"TabList\");\n  const Tab = getComponent<typeof DefaultTab>(\"Tab\");\n  const TabsBody = getComponent<typeof DefaultTabsBody>(\"TabsBody\");\n  const TabPanel = getComponent<typeof DefaultTabPanel>(\"TabPanel\");\n  const submissionsOperations = useSubmissionsOperations<Data>(permissionsResolver);\n  const actionsOperations = useActionsOperations<any>(permissionsResolver);\n\n  return (\n    <Tabs>\n      <TabList>\n        <Tab value={0} icon='edit'>\n          {i18n(\"Edit\")}\n        </Tab>\n        <Tab value={1} icon='data'>\n          {i18n(\"Data\")}\n        </Tab>\n        <Tab value={2} icon='test-tube'>\n          {i18n(\"Preview\")}\n        </Tab>\n        <Tab value={3} icon='paper-plane'>\n          {i18n(\"Actions\")}\n        </Tab>\n        <Tab value={4} icon='lock'>\n          {i18n(\"Access\")}\n        </Tab>\n        <Tab value={5} icon='download'>\n          {i18n(\"Export\")}\n        </Tab>\n        <Tab value={6} icon='cog'>\n          {i18n(\"Settings\")}\n        </Tab>\n      </TabList>\n      <TabsBody>\n        <TabPanel value={0} className='p-3 border-l-1 border-b-1 border-r-1 border-gray-300'>\n          <FormEdit form={form} options={{ i18n }} />\n        </TabPanel>\n        <TabPanel value={1}>\n          <SubmissionsTable<Data>\n            className={\"border-top-0\"}\n            form={form as FormType}\n            data={submissions}\n            i18n={i18n}\n            operations={submissionsOperations}\n          />\n        </TabPanel>\n        <TabPanel value={2}>\n          <FormPreview form={form as FormType} i18n={i18n} />\n        </TabPanel>\n        <TabPanel value={3}>\n          <ActionsTable\n            className={\"border-top-0\"}\n            availableActions={availableActions}\n            data={actions}\n            operations={actionsOperations as any}\n            i18n={i18n}\n          />\n        </TabPanel>\n        <TabPanel value={4} className='pt-3'>\n          <FormAccess form={form as FormType} roles={roles} options={{ i18n }} />\n        </TabPanel>\n        <TabPanel value={5} className='pt-3'>\n          <FormExport i18n={i18n} />\n        </TabPanel>\n        <TabPanel value={6} className='p-3 border-l-1 border-b-1 border-r-1 border-gray-300'>\n          <FormSettings form={form as FormType} options={{}} />\n        </TabPanel>\n      </TabsBody>\n    </Tabs>\n  );\n}\n"],"names":["useSubmissionsOperations","permissionsResolver","useActionsOperations","FormViews","form","roles","availableActions","actions","submissions","i18n","f","Tabs","getComponent","TabList","Tab","TabsBody","TabPanel","submissionsOperations","actionsOperations","jsxs","jsx","FormEdit","SubmissionsTable","FormPreview","ActionsTable","FormAccess","FormExport","FormSettings"],"mappings":"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"}

package/dist/registries/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":["../../src/registries/components.ts"],"sourcesContent":["export const components = new Map<string, unknown>();\n\nexport function registerComponent(type: string, component: unknown) {\n  components.set(type, component);\n}\n\nexport function getComponent<Cmp>(type: string | string[]): Cmp {\n  if (Array.isArray(type)) {\n    for (const t of type) {\n      if (components.has(t)) {\n        return components.get(t) as unknown as Cmp;\n      }\n    }\n  }\n\n  const result = components.get(type as string) as unknown as Cmp;\n\n  if (!result) {\n    console.warn(`Missing component for ${type}`);\n  }\n\n  return result;\n}\n"],"names":["components","registerComponent","type","component","getComponent","t","result"],"mappings":"AAAa,MAAAA,wBAAiB,IAAqB;AAEnC,SAAAC,EAAkBC,GAAcC,GAAoB;AACvD,EAAAH,EAAA,IAAIE,GAAMC,CAAS;AAChC;AAEO,SAASC,EAAkBF,GAA8B;AAC1D,MAAA,MAAM,QAAQA,CAAI;AACpB,eAAWG,KAAKH;AACV,UAAAF,EAAW,IAAIK,CAAC;AACX,eAAAL,EAAW,IAAIK,CAAC;AAAA;AAKvB,QAAAC,IAASN,EAAW,IAAIE,CAAc;AAE5C,SAAKI,KACK,QAAA,KAAK,yBAAyBJ,CAAI,EAAE,GAGvCI;AACT;"}
+{"version":3,"file":"components.js","sources":["../../src/registries/components.ts"],"sourcesContent":["export const components = new Map<string, unknown>();\n\nexport function registerComponent(type: string, component: unknown) {\n  components.set(type, component);\n}\n\nexport function getComponent<Cmp>(type: string | string[]): Cmp {\n  if (Array.isArray(type)) {\n    for (const t of type) {\n      if (components.has(t)) {\n        return components.get(t) as unknown as Cmp;\n      }\n    }\n  }\n\n  const result = components.get(type as string) as unknown as Cmp;\n\n  if (!result) {\n    console.warn(`Missing component for ${type}`);\n  }\n\n  return result;\n}\n"],"names":["components","registerComponent","type","component","getComponent","t","result"],"mappings":"AAAO,MAAMA,wBAAiB,IAAA;AAEvB,SAASC,EAAkBC,GAAcC,GAAoB;AAClE,EAAAH,EAAW,IAAIE,GAAMC,CAAS;AAChC;AAEO,SAASC,EAAkBF,GAA8B;AAC9D,MAAI,MAAM,QAAQA,CAAI;AACpB,eAAWG,KAAKH;AACd,UAAIF,EAAW,IAAIK,CAAC;AAClB,eAAOL,EAAW,IAAIK,CAAC;AAAA;AAK7B,QAAMC,IAASN,EAAW,IAAIE,CAAc;AAE5C,SAAKI,KACH,QAAQ,KAAK,yBAAyBJ,CAAI,EAAE,GAGvCI;AACT;"}

package/dist/utils/getEventValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"getEventValue.js","sources":["../../src/utils/getEventValue.ts"],"sourcesContent":["export function getEventValue(event: any) {\n  const { target } = event;\n\n  if (event.target.multiple && event.target.selectedOptions) {\n    return Array.from(event.target.selectedOptions, (option: any) => option.value);\n  }\n\n  return target.type === \"checkbox\" ? target.checked : target.value;\n}\n"],"names":["getEventValue","event","target","option"],"mappings":"AAAO,SAASA,EAAcC,GAAY;AAClC,QAAA,EAAE,QAAAC,MAAWD;AAEnB,SAAIA,EAAM,OAAO,YAAYA,EAAM,OAAO,kBACjC,MAAM,KAAKA,EAAM,OAAO,iBAAiB,CAACE,MAAgBA,EAAO,KAAK,IAGxED,EAAO,SAAS,aAAaA,EAAO,UAAUA,EAAO;AAC9D;"}
+{"version":3,"file":"getEventValue.js","sources":["../../src/utils/getEventValue.ts"],"sourcesContent":["export function getEventValue(event: any) {\n  const { target } = event;\n\n  if (event.target.multiple && event.target.selectedOptions) {\n    return Array.from(event.target.selectedOptions, (option: any) => option.value);\n  }\n\n  return target.type === \"checkbox\" ? target.checked : target.value;\n}\n"],"names":["getEventValue","event","target","option"],"mappings":"AAAO,SAASA,EAAcC,GAAY;AACxC,QAAM,EAAE,QAAAC,MAAWD;AAEnB,SAAIA,EAAM,OAAO,YAAYA,EAAM,OAAO,kBACjC,MAAM,KAAKA,EAAM,OAAO,iBAAiB,CAACE,MAAgBA,EAAO,KAAK,IAGxED,EAAO,SAAS,aAAaA,EAAO,UAAUA,EAAO;AAC9D;"}

package/dist/utils/iconClass.js.map

@@ -1 +1 @@
-{"version":3,"file":"iconClass.js","sources":["../../src/utils/iconClass.ts"],"sourcesContent":["import * as formio from \"formiojs\";\n\nconst { Templates } = formio;\n\nexport function iconClass(iconset: string | undefined, name: string, spinning?: boolean): string {\n  return Templates.current.iconClass(iconset || Templates.current.defaultIconset, name, spinning);\n}\n"],"names":["Templates","formio","iconClass","iconset","name","spinning"],"mappings":";AAEA,MAAM,EAAE,WAAAA,EAAc,IAAAC;AAEN,SAAAC,EAAUC,GAA6BC,GAAcC,GAA4B;AACxF,SAAAL,EAAU,QAAQ,UAAUG,KAAWH,EAAU,QAAQ,gBAAgBI,GAAMC,CAAQ;AAChG;"}
+{"version":3,"file":"iconClass.js","sources":["../../src/utils/iconClass.ts"],"sourcesContent":["import * as formio from \"formiojs\";\n\nconst { Templates } = formio;\n\nexport function iconClass(iconset: string | undefined, name: string, spinning?: boolean): string {\n  return Templates.current.iconClass(iconset || Templates.current.defaultIconset, name, spinning);\n}\n"],"names":["Templates","formio","iconClass","iconset","name","spinning"],"mappings":";AAEA,MAAM,EAAE,WAAAA,MAAcC;AAEf,SAASC,EAAUC,GAA6BC,GAAcC,GAA4B;AAC/F,SAAOL,EAAU,QAAQ,UAAUG,KAAWH,EAAU,QAAQ,gBAAgBI,GAAMC,CAAQ;AAChG;"}

package/dist/utils/mapPagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"mapPagination.js","sources":["../../src/utils/mapPagination.ts"],"sourcesContent":["export function mapPagination({ skip, limit, serverCount, length }: any = {}): any {\n  skip = skip || 0;\n  limit = limit || 10;\n  serverCount = serverCount || length;\n\n  return {\n    pageIndex: Math.floor(skip / limit),\n    pageSize: limit,\n    pageCount: Math.ceil(serverCount / limit)\n  };\n}\n"],"names":["mapPagination","skip","limit","serverCount","length"],"mappings":"AAAgB,SAAAA,EAAc,EAAE,MAAAC,GAAM,OAAAC,GAAO,aAAAC,GAAa,QAAAC,EAAO,IAAS,IAAS;AACjF,SAAAH,IAAOA,KAAQ,GACfC,IAAQA,KAAS,IACjBC,IAAcA,KAAeC,GAEtB;AAAA,IACL,WAAW,KAAK,MAAMH,IAAOC,CAAK;AAAA,IAClC,UAAUA;AAAA,IACV,WAAW,KAAK,KAAKC,IAAcD,CAAK;AAAA,EAC1C;AACF;"}
+{"version":3,"file":"mapPagination.js","sources":["../../src/utils/mapPagination.ts"],"sourcesContent":["export function mapPagination({ skip, limit, serverCount, length }: any = {}): any {\n  skip = skip || 0;\n  limit = limit || 10;\n  serverCount = serverCount || length;\n\n  return {\n    pageIndex: Math.floor(skip / limit),\n    pageSize: limit,\n    pageCount: Math.ceil(serverCount / limit)\n  };\n}\n"],"names":["mapPagination","skip","limit","serverCount","length"],"mappings":"AAAO,SAASA,EAAc,EAAE,MAAAC,GAAM,OAAAC,GAAO,aAAAC,GAAa,QAAAC,EAAA,IAAgB,IAAS;AACjF,SAAAH,IAAOA,KAAQ,GACfC,IAAQA,KAAS,IACjBC,IAAcA,KAAeC,GAEtB;AAAA,IACL,WAAW,KAAK,MAAMH,IAAOC,CAAK;AAAA,IAClC,UAAUA;AAAA,IACV,WAAW,KAAK,KAAKC,IAAcD,CAAK;AAAA,EAAA;AAE5C;"}

package/dist/utils/stopPropagationWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stopPropagationWrapper.js","sources":["../../src/utils/stopPropagationWrapper.ts"],"sourcesContent":["export const stopPropagationWrapper = (fn: Function) => (event: any) => {\n  event.stopPropagation();\n  fn();\n};\n"],"names":["stopPropagationWrapper","fn","event"],"mappings":"AAAO,MAAMA,IAAyB,CAACC,MAAiB,CAACC,MAAe;AACtE,EAAAA,EAAM,gBAAgB,GACnBD,EAAA;AACL;"}
+{"version":3,"file":"stopPropagationWrapper.js","sources":["../../src/utils/stopPropagationWrapper.ts"],"sourcesContent":["export const stopPropagationWrapper = (fn: Function) => (event: any) => {\n  event.stopPropagation();\n  fn();\n};\n"],"names":["stopPropagationWrapper","fn","event"],"mappings":"AAAO,MAAMA,IAAyB,CAACC,MAAiB,CAACC,MAAe;AACtE,EAAAA,EAAM,gBAAA,GACND,EAAA;AACF;"}

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@tsed/react-formio",
-  "version": "3.0.0-alpha.11",
+  "version": "3.0.0-alpha.12",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.modern.js",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "tsed-source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
     "./*": {
-      "types": "./dist/*.d.ts",
       "tsed-source": "./src/*",
+      "types": "./dist/*.d.ts",
       "default": "./dist/*.js"
     }
   },
@@ -44,11 +44,11 @@
   },
   "devDependencies": {
     "@tanstack/react-table": ">=8.20.6",
-    "@tsed/tailwind-formio": "3.0.0-alpha.11",
-    "@tsed/typescript": "3.0.0-alpha.11",
+    "@tsed/tailwind-formio": "3.0.0-alpha.12",
+    "@tsed/typescript": "3.0.0-alpha.12",
     "microbundle": "0.13.0",
-    "vite": "5.4.11",
-    "vitest": "2.1.8"
+    "vite": "7.1.5",
+    "vitest": "3.2.4"
   },
   "repository": "https://github.com/tsedio/tsed-formio",
   "bugs": {

package/src/atoms/icon/Icon.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import Template from "@tsed/tailwind-formio";
 
 import { Icon } from "./Icon";

package/src/molecules/button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Icon } from "../../atoms/icon/Icon";
 import { Button, BUTTON_VARIANTS } from "./Button";

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { iconClass } from "../../../utils/iconClass";
 import { FormControl } from "./FormControl";

package/src/molecules/forms/input-tags/components/ChoicesTags.stories.tsx

@@ -1,6 +1,6 @@
 import "../all";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";

package/src/molecules/forms/input-tags/components/ReactTags.stories.tsx

@@ -1,6 +1,6 @@
 import "../all";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { type CreatableProps } from "react-select/creatable";
 
 import { iconClass } from "../../../../utils/iconClass";

package/src/molecules/forms/input-text/InputText.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
 
 import { iconClass } from "../../../utils/iconClass";
 import { useValue } from "../../__fixtures__/useValue.hook";

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

@@ -1,7 +1,7 @@
 import "./ChoicesSelect";
 
-import { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";

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

@@ -1,7 +1,7 @@
 import "./HtmlSelect";
 
-import { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";

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

@@ -1,7 +1,7 @@
 import "../all";
 
-import { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";

package/src/molecules/loader/Loader.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import tailwind from "@tsed/tailwind-formio";
 
 import { Loader } from "./Loader";

package/src/molecules/modal/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Modal, ModalProps, useModal } from "./Modal";
 

package/src/molecules/pagination/Pagination.stories.tsx

@@ -1,6 +1,6 @@
 import "../forms/select/all";
 
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import { useEffect, useState } from "react";
 
 import { Pagination } from "./all";

package/src/molecules/pagination/Pagination.tsx

@@ -95,7 +95,6 @@ export function Pagination(props: PaginationProps) {
           multiple={false}
           layout={props.layout}
           onChange={(_, value) => {
-            console.log("On page change", value);
             onPageSizeChange(+value);
           }}
         />

package/src/molecules/table/Table.stories.tsx

@@ -1,7 +1,7 @@
 import "./all";
 
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
 import { SubmissionType } from "../../interfaces";
 import FormType from "../__fixtures__/form-schema.json";

package/src/molecules/table/filters/SelectFilter.tsx

@@ -9,7 +9,7 @@ export function SelectFilter<Data = any>({ header, options }: FilterProps<Data,
   const Select = getComponent<typeof DefaultSelect>("Select");
   const columnFilterValue = header.column.getFilterValue();
   const uniqValues = useUniqValues<Data>({ header, filterVariant: "text" });
-  console.log(uniqValues);
+
   const opts =
     options.layout === "choicesjs"
       ? {

package/src/molecules/tabs/Tabs.stories.tsx

@@ -1,7 +1,7 @@
 import "./all.js";
 
-import { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
 import { Icon } from "../../atoms/icon/Icon.js";
 import { Button } from "../button/Button.js";

package/src/molecules/tabs/TabsLegacy.stories.tsx

@@ -1,6 +1,6 @@
 import "./all.js";
 
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { TabsLegacy } from "./TabsLegacy.js";
 

package/src/organisms/form/Form.stories.tsx

@@ -1,6 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { delay, http, HttpResponse } from "msw";
 import { useEffect, useState } from "react";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
 import { SubmissionType } from "../../interfaces";
 import { InputText } from "../../molecules/forms/input-text/InputText";
@@ -9,12 +10,6 @@ import formFirstname from "../__fixtures__/form-firstname.fixture.json";
 import { useEditForm } from "../__fixtures__/useEditForm";
 import { Form } from "./Form";
 
-async function delay(number: number) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, number);
-  });
-}
-
 /**
  * The form component is the primary component of the system. It is what takes the form definition (json) and renders the
  * form into html. There are multiple ways to send the form to the Form component. The two main ways are to pass the `src`
@@ -332,15 +327,15 @@ export const WithOnSubmit: Story = {
     expect(firstnameInput).toHaveValue("John");
     expect(lastNameInput).toHaveValue("Doe");
 
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
+    await userEvent.clear(firstnameInput);
+    await userEvent.type(firstnameInput, "Jane", { delay: 100 });
 
     await waitFor(() => {
       expect(firstnameInput).toHaveValue("Jane");
     });
 
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
+    await userEvent.clear(lastNameInput);
+    await userEvent.type(lastNameInput, "Smith", { delay: 100 });
 
     await waitFor(() => {
       expect(lastNameInput).toHaveValue("Smith");
@@ -397,42 +392,20 @@ export const WithOnSubmit: Story = {
  * Form with custom validation hook
  */
 export const CustomValidation: Story = {
-  parameters: {
-    mockData: [
-      {
-        url: "https://test.dev/todos/1",
-        method: "GET",
-        status: 500,
-        response: {
-          message: "My custom message about this field",
-          type: "custom",
-          path: ["firstName"],
-          level: "error"
-        },
-        delay: 800
-      }
-    ]
-  },
+  parameters: {},
   args: {
     form: formFirstname as never,
     options: {
       hooks: {
         async customValidation(submission: SubmissionType, callback: (error: any) => void) {
-          const response = await fetch("https://test.dev/todos/1", {
-            headers: {
-              Accept: "application/json",
-              "Content-Type": "application/json"
-            },
-            method: "GET"
-          });
-
-          const responseData = await response.json();
-
-          if (response.ok) {
-            callback(null);
-          } else {
-            callback(responseData);
-          }
+          setTimeout(() => {
+            callback({
+              message: "My custom message about this field",
+              type: "custom",
+              path: ["firstName"],
+              level: "error"
+            });
+          }, 200);
         }
       }
     }
@@ -451,15 +424,15 @@ export const CustomValidation: Story = {
     let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
     let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
 
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
+    await userEvent.clear(firstnameInput);
+    await userEvent.type(firstnameInput, "Jane", { delay: 100 });
 
     await waitFor(() => {
       expect(firstnameInput).toHaveValue("Jane");
     });
 
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
+    await userEvent.clear(lastNameInput);
+    await userEvent.type(lastNameInput, "Smith", { delay: 100 });
 
     await waitFor(() => {
       expect(lastNameInput).toHaveValue("Smith");
@@ -467,7 +440,7 @@ export const CustomValidation: Story = {
 
     let submitButton = canvas.getByRole("button", { name: "Submit" });
 
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
 
     await waitFor(async () => {
       expect(canvas.getByText("Please fix the following errors before submitting.")).toBeInTheDocument();
@@ -490,35 +463,29 @@ export const FetchSubmissionWithCustomAction: Story = {
     }
   },
   parameters: {
-    mockData: [
-      {
-        url: "https://local.dev/form/Test",
-        method: "GET",
-        status: 200,
-        response: formFirstname,
-        delay: 200
-      },
-      {
-        url: "https://local.dev/form/Test/submissions/1",
-        method: "GET",
-        status: 200,
-        response: {
-          firstName: "John",
-          lastName: "Doe"
-        },
-        delay: 800
-      },
-      {
-        url: "https://local.dev/form/Test/submissions/1",
-        method: "PUT",
-        status: 200,
-        response: {
-          firstName: "John",
-          lastName: "Doe"
-        },
-        delay: 800
-      }
-    ]
+    chromatic: { disableSnapshot: false },
+    msw: {
+      handlers: [
+        http.get("https://local.dev/form/Test", async () => {
+          await delay(200);
+          return HttpResponse.json(JSON.parse(JSON.stringify(formFirstname)));
+        }),
+        http.get("https://local.dev/form/Test/submissions/1", async () => {
+          await delay(300);
+          return HttpResponse.json({
+            firstName: "Jane",
+            lastName: "Doe"
+          });
+        }),
+        http.put("https://local.dev/form/Test/submissions/1", async () => {
+          await delay(800);
+          return HttpResponse.json({
+            firstName: "Jane",
+            lastName: "Doe"
+          });
+        })
+      ]
+    }
   },
   render(args) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -562,15 +529,20 @@ export const FetchSubmissionWithCustomAction: Story = {
     let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
     let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
 
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
+    await userEvent.clear(firstnameInput);
+
+    await waitFor(() => {
+      expect(firstnameInput).toHaveValue("");
+    });
+
+    await userEvent.type(firstnameInput, "Jane", { delay: 100 });
 
     await waitFor(() => {
       expect(firstnameInput).toHaveValue("Jane");
     });
 
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
+    await userEvent.clear(lastNameInput);
+    await userEvent.type(lastNameInput, "Smith", { delay: 100 });
 
     await waitFor(() => {
       expect(lastNameInput).toHaveValue("Smith");
@@ -578,7 +550,7 @@ export const FetchSubmissionWithCustomAction: Story = {
 
     let submitButton = canvas.getByRole("button", { name: "Submit" });
 
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
 
     await delay(1000);
 
@@ -597,37 +569,36 @@ export const ErrorOnSubmitServer: Story = {
     }
   },
   parameters: {
-    mockData: [
-      {
-        url: "https://local.dev/form/Test2",
-        method: "GET",
-        status: 200,
-        response: formFirstname,
-        delay: 200
-      },
-      {
-        url: "https://local.dev/form/Test2/submissions/2",
-        method: "GET",
-        status: 200,
-        response: {
-          firstName: "John",
-          lastName: "Doe"
-        },
-        delay: 800
-      },
-      {
-        url: "https://local.dev/form/Test2/submissions/2",
-        method: "PUT",
-        status: 400,
-        response: {
-          message: "My custom message about this field",
-          type: "custom",
-          path: ["firstName"],
-          level: "error"
-        },
-        delay: 800
-      }
-    ]
+    chromatic: { disableSnapshot: false },
+    msw: {
+      handlers: [
+        http.get("https://local.dev/form/Test2", async () => {
+          await delay(200);
+          return HttpResponse.json(JSON.parse(JSON.stringify(formFirstname)));
+        }),
+        http.get("https://local.dev/form/Test2/submissions/2", async () => {
+          await delay(300);
+          return HttpResponse.json({
+            firstName: "John",
+            lastName: "Doe"
+          });
+        }),
+        http.put("https://local.dev/form/Test2/submissions/2", async () => {
+          await delay(800);
+          return HttpResponse.json(
+            {
+              message: "My custom message about this field",
+              type: "custom",
+              path: ["firstName"],
+              level: "error"
+            },
+            {
+              status: 400
+            }
+          );
+        })
+      ]
+    }
   },
   render(args) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -671,15 +642,20 @@ export const ErrorOnSubmitServer: Story = {
     let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
     let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
 
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
+    await userEvent.clear(firstnameInput);
+
+    await waitFor(() => {
+      expect(firstnameInput).toHaveValue("");
+    });
+
+    await userEvent.type(firstnameInput, "Jane", { delay: 100 });
 
     await waitFor(() => {
       expect(firstnameInput).toHaveValue("Jane");
     });
 
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
+    await userEvent.clear(lastNameInput);
+    await userEvent.type(lastNameInput, "Smith", { delay: 100 });
 
     await waitFor(() => {
       expect(lastNameInput).toHaveValue("Smith");
@@ -687,7 +663,7 @@ export const ErrorOnSubmitServer: Story = {
 
     let submitButton = canvas.getByRole("button", { name: "Submit" });
 
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
 
     await delay(1000);
 

package/src/organisms/form/access/FormAccess.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
 
 import { FormAccess } from "./FormAccess";
 

package/src/organisms/form/actions/FormAction.stories.tsx

@@ -1,7 +1,7 @@
 import "../../../molecules/card/Card.js";
 import "../Form.js";
 
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { FormAction } from "./FormAction.js";