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

package/dist/organisms/table/submissions/SubmissionsTable.d.ts

@@ -1,6 +1,14 @@
-import { FormType, SubmissionType } from '../../../interfaces';
+import { FormType, JSON, SubmissionType } from '../../../interfaces';
 import { TableProps } from '../../../molecules/table/Table';
-export type SubmissionsTableProps = Omit<TableProps<SubmissionType>, "columns"> & {
+export type SubmissionsTableProps<Data extends {
+    [key: string]: JSON;
+} = {
+    [key: string]: JSON;
+}> = Omit<TableProps<SubmissionType<Data>>, "columns"> & {
     form?: FormType;
 };
-export declare function SubmissionsTable({ form, ...props }: SubmissionsTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubmissionsTable<Data extends {
+    [key: string]: JSON;
+} = {
+    [key: string]: JSON;
+}>({ form, ...props }: SubmissionsTableProps<Data>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,10 @@
 import { jsx as n } from "react/jsx-runtime";
 import { Table as s } from "../../../molecules/table/Table.js";
 import { mapFormToColumns as t } from "../../../molecules/table/utils/mapFormToColumns.js";
-function e({ form: o, ...m }) {
+function e({
+  form: o,
+  ...m
+}) {
   const r = o && t(o);
   return /* @__PURE__ */ n(s, { ...m, columns: r });
 }

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, SubmissionType } from \"../../../interfaces\";\nimport { Table, type TableProps } from \"../../../molecules/table/Table\";\nimport { mapFormToColumns } from \"../../../molecules/table/utils/mapFormToColumns.js\";\n\nexport type SubmissionsTableProps = Omit<TableProps<SubmissionType>, \"columns\"> & {\n  form?: FormType;\n};\n\nexport function SubmissionsTable({ form, ...props }: SubmissionsTableProps) {\n  const columns: any[] | undefined = form && mapFormToColumns(form);\n\n  return <Table {...props} columns={columns!} />;\n}\n"],"names":["SubmissionsTable","form","props","columns","mapFormToColumns","jsx","Table"],"mappings":";;;AAQO,SAASA,EAAiB,EAAE,MAAAC,GAAM,GAAGC,KAAgC;AACpE,QAAAC,IAA6BF,KAAQG,EAAiBH,CAAI;AAEhE,SAAQ,gBAAAI,EAAAC,GAAA,EAAO,GAAGJ,GAAO,SAAAC,EAAmB,CAAA;AAC9C;"}
+{"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.d.ts

@@ -0,0 +1,24 @@
+import { JSON, PermissionsResolver } from '../../interfaces/index.js';
+import { FormAccessProps } from '../form/access/FormAccess.js';
+import { FormEditProps } from '../form/builder/FormEdit.js';
+import { ActionsTableProps } from '../table/actions/ActionsTable.js';
+import { SubmissionsTableProps } from '../table/submissions/SubmissionsTable.js';
+export type FormViewsProps<Data extends {
+    [key: string]: JSON;
+} = {
+    [key: string]: JSON;
+}> = {
+    form: FormEditProps["form"];
+    submissions: SubmissionsTableProps<Data>["data"];
+    availableActions: ActionsTableProps["availableActions"];
+    actions: ActionsTableProps["data"];
+    roles?: FormAccessProps["roles"];
+    i18n?: (key: string) => string;
+    onAction: () => void;
+    permissionsResolver?: PermissionsResolver<Data>;
+};
+export declare function FormViews<Data extends {
+    [key: string]: JSON;
+} = {
+    [key: string]: JSON;
+}>({ form, roles, availableActions, actions, permissionsResolver, submissions, i18n }: FormViewsProps<Data>): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/views/FormViews.js

@@ -0,0 +1,96 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { getComponent as i } from "../../registries/components.js";
+import { FormAccess as v } from "../form/access/FormAccess.js";
+import { FormEdit as f } from "../form/builder/FormEdit.js";
+import { FormExport as g } from "../form/exports/FormExport.js";
+import { FormPreview as w } from "../form/preview/FormPreview.js";
+import { FormSettings as y } from "../form/settings/FormSettings.js";
+import { ActionsTable as E } from "../table/actions/ActionsTable.js";
+import { SubmissionsTable as F } from "../table/submissions/SubmissionsTable.js";
+function N(t) {
+  return [
+    {
+      title: "Edit",
+      action: "submission:edit",
+      alias: "row",
+      icon: "edit",
+      permissionsResolver: t
+    },
+    {
+      action: "submission:delete",
+      icon: "trash",
+      buttonType: "danger",
+      permissionsResolver: t
+    }
+  ];
+}
+function x(t) {
+  return [
+    {
+      title: "Edit",
+      action: "action:edit",
+      alias: "row",
+      icon: "edit",
+      permissionsResolver: t
+    },
+    {
+      action: "action:delete",
+      icon: "trash",
+      buttonType: "danger",
+      permissionsResolver: t
+    }
+  ];
+}
+function D({
+  form: t,
+  roles: l,
+  availableActions: d,
+  actions: b,
+  permissionsResolver: s,
+  submissions: p,
+  i18n: e = (n) => n
+}) {
+  const n = i("Tabs"), u = i("TabList"), r = i("Tab"), m = i("TabsBody"), a = i("TabPanel"), h = N(s), T = x(s);
+  return /* @__PURE__ */ c(n, { children: [
+    /* @__PURE__ */ c(u, { children: [
+      /* @__PURE__ */ o(r, { value: 0, icon: "edit", children: e("Edit") }),
+      /* @__PURE__ */ o(r, { value: 1, icon: "data", children: e("Data") }),
+      /* @__PURE__ */ o(r, { value: 2, icon: "test-tube", children: e("Preview") }),
+      /* @__PURE__ */ o(r, { value: 3, icon: "paper-plane", children: e("Actions") }),
+      /* @__PURE__ */ o(r, { value: 4, icon: "lock", children: e("Access") }),
+      /* @__PURE__ */ o(r, { value: 5, icon: "download", children: e("Export") }),
+      /* @__PURE__ */ o(r, { value: 6, icon: "cog", children: e("Settings") })
+    ] }),
+    /* @__PURE__ */ c(m, { children: [
+      /* @__PURE__ */ o(a, { value: 0, className: "p-3 border-l-1 border-b-1 border-r-1 border-gray-300", children: /* @__PURE__ */ o(f, { form: t, options: { i18n: e } }) }),
+      /* @__PURE__ */ o(a, { value: 1, children: /* @__PURE__ */ o(
+        F,
+        {
+          className: "border-top-0",
+          form: t,
+          data: p,
+          i18n: e,
+          operations: h
+        }
+      ) }),
+      /* @__PURE__ */ o(a, { value: 2, children: /* @__PURE__ */ o(w, { form: t, i18n: e }) }),
+      /* @__PURE__ */ o(a, { value: 3, children: /* @__PURE__ */ o(
+        E,
+        {
+          className: "border-top-0",
+          availableActions: d,
+          data: b,
+          operations: T,
+          i18n: e
+        }
+      ) }),
+      /* @__PURE__ */ o(a, { value: 4, className: "pt-3", children: /* @__PURE__ */ o(v, { form: t, roles: l, options: { i18n: e } }) }),
+      /* @__PURE__ */ o(a, { value: 5, className: "pt-3", children: /* @__PURE__ */ o(g, { i18n: e }) }),
+      /* @__PURE__ */ o(a, { value: 6, className: "p-3 border-l-1 border-b-1 border-r-1 border-gray-300", children: /* @__PURE__ */ o(y, { form: t, options: {} }) })
+    ] })
+  ] });
+}
+export {
+  D as FormViews
+};
+//# sourceMappingURL=FormViews.js.map

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

@@ -0,0 +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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"}

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.10",
+  "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.10",
-    "@tsed/typescript": "3.0.0-alpha.10",
+    "@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/hooks/keyboard.constants.ts

@@ -0,0 +1,40 @@
+export const enum CODE {
+  ENTER = "Enter",
+  ESCAPE = "Escape",
+  ARROW_LEFT = "ArrowLeft",
+  ARROW_UP = "ArrowUp",
+  ARROW_RIGHT = "ArrowRight",
+  ARROW_DOWN = "ArrowDown",
+  SPACE = "Space",
+  END = "End",
+  HOME = "Home"
+}
+
+export const enum KEY {
+  ENTER = "Enter",
+  ESCAPE = "Escape",
+  ARROW_LEFT = "ArrowLeft",
+  ARROW_UP = "ArrowUp",
+  ARROW_RIGHT = "ArrowRight",
+  ARROW_DOWN = "ArrowDown",
+  END = "End",
+  HOME = "Home",
+  SPACE = " ",
+  /**
+   * @deprecated
+   * Used by old browers, see https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#whitespace_keys
+   */
+  SPACEBAR = "Spacebar"
+}
+
+export const enum KEY_CODE {
+  ENTER = 13,
+  ESCAPE = 27,
+  ARROW_LEFT = 37,
+  ARROW_UP = 38,
+  ARROW_RIGHT = 39,
+  ARROW_DOWN = 40,
+  SPACE = 32,
+  END = 35,
+  HOME = 36
+}

package/src/hooks/useKeyboardControls.spec.tsx

@@ -0,0 +1,208 @@
+import { render, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+
+import { useKeyboardControls } from "./useKeyboardControls";
+
+describe("useKeyboardControls()", () => {
+  const activate = vi.fn();
+  const start = vi.fn();
+  const end = vi.fn();
+  const up = vi.fn();
+  const down = vi.fn();
+  const left = vi.fn();
+  const right = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  const Test = () => {
+    const handle = useKeyboardControls({ activate, start, end, up, down, left, right });
+
+    return (
+      <div tabIndex={0} role='button' onKeyDown={handle}>
+        Test
+      </div>
+    );
+  };
+
+  describe("on Enter", () => {
+    it('call the "activate" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[Enter]{Enter}");
+
+      expect(activate).toHaveBeenCalledTimes(2);
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Spacebar", () => {
+    it('call the "activate" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[Space]{ }{Spacebar}");
+
+      expect(activate).toHaveBeenCalledTimes(3);
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Home", () => {
+    it('call the "start" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[Home]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).toHaveBeenCalledTimes(1);
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on End", () => {
+    it('call the "end" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[End]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).toHaveBeenCalledTimes(1);
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Up", () => {
+    it('call the "up" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowUp]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).toHaveBeenCalledTimes(1);
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Down", () => {
+    it('call the "down" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowDown]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).toHaveBeenCalledTimes(1);
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Left", () => {
+    it('call the "left" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowLeft]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).toHaveBeenCalledTimes(1);
+      expect(right).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on Arrow Right", () => {
+    it('call the "right" callback', async () => {
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowRight]");
+
+      expect(activate).not.toHaveBeenCalled();
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("without any callback", () => {
+    it("does nothing", async () => {
+      const Test = () => {
+        const handle = useKeyboardControls({ activate });
+
+        return (
+          <div tabIndex={0} role='button' onKeyDown={handle}>
+            Test
+          </div>
+        );
+      };
+
+      render(<Test />);
+
+      const button = screen.getByRole("button");
+      button.focus();
+
+      await userEvent.keyboard("[ArrowUp][ArrowUp][ArrowDown][ArrowDown][ArrowLeft][ArrowRight][ArrowLeft][ArrowRight]{b}{a}[Enter]");
+
+      expect(activate).toHaveBeenCalledTimes(1);
+      expect(start).not.toHaveBeenCalled();
+      expect(end).not.toHaveBeenCalled();
+      expect(up).not.toHaveBeenCalled();
+      expect(down).not.toHaveBeenCalled();
+      expect(left).not.toHaveBeenCalled();
+      expect(right).not.toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/hooks/useKeyboardControls.ts

@@ -0,0 +1,84 @@
+"use client";
+
+import { type KeyboardEvent, useCallback } from "react";
+
+import { CODE, KEY } from "./keyboard.constants";
+
+interface Options {
+  up?: VoidFunction;
+  down?: VoidFunction;
+  left?: VoidFunction;
+  right?: VoidFunction;
+  start?: VoidFunction;
+  end?: VoidFunction;
+  activate?: VoidFunction;
+}
+
+const isActivateKey = (event: KeyboardEvent<HTMLDivElement | HTMLButtonElement>) => {
+  return (
+    event.key === KEY.ENTER ||
+    event.key === KEY.SPACE ||
+    event.key === KEY.SPACEBAR ||
+    event.code === CODE.ENTER ||
+    event.code === CODE.SPACE
+  );
+};
+
+const voidFn = () => {};
+
+export const useKeyboardControls = ({
+  up = voidFn,
+  down = voidFn,
+  left = voidFn,
+  right = voidFn,
+  start = voidFn,
+  end = voidFn,
+  activate = voidFn
+}: Options) => {
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement | HTMLButtonElement>) => {
+      if (isActivateKey(event)) {
+        return activate();
+      }
+
+      if (event.code === CODE.HOME) {
+        event.preventDefault();
+
+        return start();
+      }
+
+      if (event.code === CODE.END) {
+        event.preventDefault();
+
+        return end();
+      }
+
+      if (event.code === CODE.ARROW_UP) {
+        event.preventDefault();
+
+        return up();
+      }
+
+      if (event.code === CODE.ARROW_DOWN) {
+        event.preventDefault();
+
+        return down();
+      }
+
+      if (event.code === CODE.ARROW_RIGHT) {
+        event.preventDefault();
+
+        return right();
+      }
+
+      if (event.code === CODE.ARROW_LEFT) {
+        event.preventDefault();
+
+        return left();
+      }
+    },
+    [activate, down, end, left, right, start, up]
+  );
+
+  return handleKeyDown;
+};

package/src/interfaces/Operation.ts

@@ -1,11 +1,17 @@
 import React from "react";
 
 import type { OperationButtonProps } from "../molecules/table/components/DefaultOperationButton.js";
+import type { JSON } from "./SubmissionType.js";
 
-export type PermissionsResolver<Data = any> = (data: Data, ctx: any) => void;
-// export type OnClickOperation<Data = any> = (data: Data, operation: Operation) => void;
+export type CellMetadata = Record<string, unknown>;
 
-export interface Operation<Data = any> {
+export type PermissionsResolver<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = (
+  data: Data,
+  metadata: CellMetadata,
+  operation: Operation<Data>
+) => void;
+
+export interface Operation<Data extends { [key: string]: JSON } = { [key: string]: JSON }> {
   /**
    * Action identifier
    */

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";