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

package/dist/molecules/table/components/DefaultOperationButton.js

@@ -1,4 +1,4 @@
-import { jsxs as n, Fragment as x, jsx as i } from "react/jsx-runtime";
+import { jsxs as n, jsx as i, Fragment as x } from "react/jsx-runtime";
 import { c as d } from "../../../chunks/index.js";
 import { registerComponent as C } from "../../../registries/components.js";
 import { iconClass as N } from "../../../utils/iconClass.js";

package/dist/molecules/table/components/DefaultOperationButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultOperationButton.js","sources":["../../../../src/molecules/table/components/DefaultOperationButton.tsx"],"sourcesContent":["import { CellContext } from \"@tanstack/react-table\";\nimport cx from \"classnames\";\nimport { HTMLAttributes } from \"react\";\n\nimport { type CellMetadata, type JSON, Operation } from \"../../../interfaces\";\nimport { registerComponent } from \"../../../registries/components\";\nimport { iconClass } from \"../../../utils/iconClass\";\nimport { stopPropagationWrapper } from \"../../../utils/stopPropagationWrapper\";\n\nexport interface OperationButtonProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>\n  extends Omit<HTMLAttributes<HTMLButtonElement>, \"onClick\"> {\n  operation: Operation<Data>;\n  info: CellContext<Data, unknown>;\n  metadata?: CellMetadata;\n  onClick: () => void;\n  i18n?: (i18n: string) => string;\n}\n\nexport function DefaultOperationButton<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: OperationButtonProps<Data>) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { i18n = (f: string) => f, onClick, operation, info, ...extraProps } = props;\n  const { className = \"btn\", buttonSize = \"xs\", buttonType = \"primary\", buttonOutline, action, title = \"\", icon = \"\" } = operation;\n\n  return (\n    <button\n      {...extraProps}\n      aria-label={\"Operation button: \" + (title || action)}\n      className={cx(className, [\"btn\", buttonOutline && \"outline\", buttonType].filter(Boolean).join(\"-\"), `btn-${buttonSize}`)}\n      onClick={stopPropagationWrapper(() => onClick())}\n    >\n      {icon ? (\n        <>\n          <i className={iconClass(undefined, icon)} /> {title && \" \"}\n        </>\n      ) : null}\n      {title && <span className={icon && title ? \"ml-1\" : \"\"}>{i18n(title)}</span>}\n    </button>\n  );\n}\n\nregisterComponent(\"OperationButton\", DefaultOperationButton);\n"],"names":["DefaultOperationButton","props","i18n","onClick","operation","info","extraProps","className","buttonSize","buttonType","buttonOutline","action","title","icon","jsxs","cx","stopPropagationWrapper","Fragment","jsx","iconClass","registerComponent"],"mappings":";;;;;AAkBO,SAASA,EAAuFC,GAAmC;AAElI,QAAA,EAAE,MAAAC,IAAO,CAAC,MAAc,GAAG,SAAAC,GAAS,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,IAAeL,GACvE,EAAE,WAAAM,IAAY,OAAO,YAAAC,IAAa,MAAM,YAAAC,IAAa,WAAW,eAAAC,GAAe,QAAAC,GAAQ,OAAAC,IAAQ,IAAI,MAAAC,IAAO,GAAO,IAAAT;AAGrH,SAAA,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,cAAY,wBAAwBM,KAASD;AAAA,MAC7C,WAAWI,EAAGR,GAAW,CAAC,OAAOG,KAAiB,WAAWD,CAAU,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,OAAOD,CAAU,EAAE;AAAA,MACvH,SAASQ,EAAuB,MAAMb,GAAS;AAAA,MAE9C,UAAA;AAAA,QAAAU,IAEG,gBAAAC,EAAAG,GAAA,EAAA,UAAA;AAAA,UAAA,gBAAAC,EAAC,KAAE,EAAA,WAAWC,EAAU,QAAWN,CAAI,GAAG;AAAA,UAAE;AAAA,UAAED,KAAS;AAAA,QAAA,EAAA,CACzD,IACE;AAAA,QACHA,KAAU,gBAAAM,EAAA,QAAA,EAAK,WAAWL,KAAQD,IAAQ,SAAS,IAAK,UAAKV,EAAAU,CAAK,EAAE,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACvE;AAEJ;AAEAQ,EAAkB,mBAAmBpB,CAAsB;"}
+{"version":3,"file":"DefaultOperationButton.js","sources":["../../../../src/molecules/table/components/DefaultOperationButton.tsx"],"sourcesContent":["import { CellContext } from \"@tanstack/react-table\";\nimport cx from \"classnames\";\nimport { HTMLAttributes } from \"react\";\n\nimport { type CellMetadata, type JSON, Operation } from \"../../../interfaces\";\nimport { registerComponent } from \"../../../registries/components\";\nimport { iconClass } from \"../../../utils/iconClass\";\nimport { stopPropagationWrapper } from \"../../../utils/stopPropagationWrapper\";\n\nexport interface OperationButtonProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>\n  extends Omit<HTMLAttributes<HTMLButtonElement>, \"onClick\"> {\n  operation: Operation<Data>;\n  info: CellContext<Data, unknown>;\n  metadata?: CellMetadata;\n  onClick: () => void;\n  i18n?: (i18n: string) => string;\n}\n\nexport function DefaultOperationButton<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: OperationButtonProps<Data>) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { i18n = (f: string) => f, onClick, operation, info, ...extraProps } = props;\n  const { className = \"btn\", buttonSize = \"xs\", buttonType = \"primary\", buttonOutline, action, title = \"\", icon = \"\" } = operation;\n\n  return (\n    <button\n      {...extraProps}\n      aria-label={\"Operation button: \" + (title || action)}\n      className={cx(className, [\"btn\", buttonOutline && \"outline\", buttonType].filter(Boolean).join(\"-\"), `btn-${buttonSize}`)}\n      onClick={stopPropagationWrapper(() => onClick())}\n    >\n      {icon ? (\n        <>\n          <i className={iconClass(undefined, icon)} /> {title && \" \"}\n        </>\n      ) : null}\n      {title && <span className={icon && title ? \"ml-1\" : \"\"}>{i18n(title)}</span>}\n    </button>\n  );\n}\n\nregisterComponent(\"OperationButton\", DefaultOperationButton);\n"],"names":["DefaultOperationButton","props","i18n","onClick","operation","info","extraProps","className","buttonSize","buttonType","buttonOutline","action","title","icon","jsxs","cx","stopPropagationWrapper","Fragment","jsx","iconClass","registerComponent"],"mappings":";;;;;AAkBO,SAASA,EAAuFC,GAAmC;AAExI,QAAM,EAAE,MAAAC,IAAO,CAAC,MAAc,GAAG,SAAAC,GAAS,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,IAAeL,GACvE,EAAE,WAAAM,IAAY,OAAO,YAAAC,IAAa,MAAM,YAAAC,IAAa,WAAW,eAAAC,GAAe,QAAAC,GAAQ,OAAAC,IAAQ,IAAI,MAAAC,IAAO,OAAOT;AAEvH,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,cAAY,wBAAwBM,KAASD;AAAA,MAC7C,WAAWI,EAAGR,GAAW,CAAC,OAAOG,KAAiB,WAAWD,CAAU,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,OAAOD,CAAU,EAAE;AAAA,MACvH,SAASQ,EAAuB,MAAMb,GAAS;AAAA,MAE9C,UAAA;AAAA,QAAAU,IACC,gBAAAC,EAAAG,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAC,EAAC,KAAA,EAAE,WAAWC,EAAU,QAAWN,CAAI,GAAG;AAAA,UAAE;AAAA,UAAED,KAAS;AAAA,QAAA,EAAA,CACzD,IACE;AAAA,QACHA,KAAS,gBAAAM,EAAC,QAAA,EAAK,WAAWL,KAAQD,IAAQ,SAAS,IAAK,UAAAV,EAAKU,CAAK,EAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3E;AAEAQ,EAAkB,mBAAmBpB,CAAsB;"}

package/dist/molecules/table/filters/RangeFilter.js

@@ -1,42 +1,41 @@
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { registerComponent as o, getComponent as v } from "../../../registries/components.js";
-function M({ header: m, options: c }) {
-  var x, g;
-  const { column: a } = m, l = v("InputText"), t = m.column.getFilterValue(), s = c.min ?? ((x = a.getFacetedMinMaxValues()) == null ? void 0 : x[0]), i = c.max ?? ((g = a.getFacetedMinMaxValues()) == null ? void 0 : g[1]), p = c.step ?? 1;
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { registerComponent as p, getComponent as x } from "../../../registries/components.js";
+function g({ header: c, options: a }) {
+  const { column: l } = c, r = x("InputText"), m = c.column.getFilterValue(), t = a.min ?? l.getFacetedMinMaxValues()?.[0], n = a.max ?? l.getFacetedMinMaxValues()?.[1], o = a.step ?? 1;
   return /* @__PURE__ */ u("div", { children: [
     /* @__PURE__ */ u("div", { className: "flex space-x-2", children: [
-      /* @__PURE__ */ n("div", { className: "w-1/2", children: /* @__PURE__ */ n(
-        l,
+      /* @__PURE__ */ e("div", { className: "w-1/2", children: /* @__PURE__ */ e(
+        r,
         {
           type: "number",
           size: "small",
-          min: s,
-          max: i,
-          step: p,
-          value: (t == null ? void 0 : t[0]) ?? "",
-          onChange: (h, r) => a.setFilterValue((e) => [r, e == null ? void 0 : e[1]]),
-          placeholder: `Min ${s !== void 0 ? `(${s})` : ""}`
+          min: t,
+          max: n,
+          step: o,
+          value: m?.[0] ?? "",
+          onChange: (d, s) => l.setFilterValue((i) => [s, i?.[1]]),
+          placeholder: `Min ${t !== void 0 ? `(${t})` : ""}`
         }
       ) }),
-      /* @__PURE__ */ n("div", { className: "w-1/2", children: /* @__PURE__ */ n(
-        l,
+      /* @__PURE__ */ e("div", { className: "w-1/2", children: /* @__PURE__ */ e(
+        r,
         {
           type: "number",
           size: "small",
-          min: s,
-          max: i,
-          step: p,
-          value: (t == null ? void 0 : t[1]) ?? "",
-          onChange: (h, r) => a.setFilterValue((e) => [e == null ? void 0 : e[0], r]),
-          placeholder: `Max ${i ? `(${i})` : ""}`
+          min: t,
+          max: n,
+          step: o,
+          value: m?.[1] ?? "",
+          onChange: (d, s) => l.setFilterValue((i) => [i?.[0], s]),
+          placeholder: `Max ${n ? `(${n})` : ""}`
         }
       ) })
     ] }),
-    /* @__PURE__ */ n("div", { className: "h-1" })
+    /* @__PURE__ */ e("div", { className: "h-1" })
   ] });
 }
-o("Filter.range", M);
+p("Filter.range", g);
 export {
-  M as RangeFilter
+  g as RangeFilter
 };
 //# sourceMappingURL=RangeFilter.js.map

package/dist/molecules/table/filters/RangeFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeFilter.js","sources":["../../../../src/molecules/table/filters/RangeFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport { type InputText as DefaultInputText } from \"../../forms/input-text/InputText\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { FilterRangeOptions } from \"./Filters\";\n\nexport function RangeFilter<Data = any>({ header, options }: FilterProps<Data, FilterRangeOptions>) {\n  const { column } = header;\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const columnFilterValue = header.column.getFilterValue();\n  const min = options.min ?? column.getFacetedMinMaxValues()?.[0];\n  const max = options.max ?? column.getFacetedMinMaxValues()?.[1];\n  const step = options.step ?? 1;\n\n  return (\n    <div>\n      <div className='flex space-x-2'>\n        <div className='w-1/2'>\n          <InputText\n            type='number'\n            size='small'\n            {...{ min, max, step }}\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [value, old?.[1]])}\n            placeholder={`Min ${min !== undefined ? `(${min})` : \"\"}`}\n          />\n        </div>\n        <div className='w-1/2'>\n          <InputText\n            type='number'\n            size='small'\n            {...{ min, max, step }}\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [old?.[0], value])}\n            placeholder={`Max ${max ? `(${max})` : \"\"}`}\n          />\n        </div>\n      </div>\n      <div className='h-1' />\n    </div>\n  );\n}\n\nregisterComponent(\"Filter.range\", RangeFilter);\n"],"names":["RangeFilter","header","options","column","InputText","getComponent","columnFilterValue","min","_a","max","_b","step","jsxs","jsx","_","value","old","registerComponent"],"mappings":";;AAKO,SAASA,EAAwB,EAAE,QAAAC,GAAQ,SAAAC,KAAkD;;AAC5F,QAAA,EAAE,QAAAC,MAAWF,GACbG,IAAYC,EAAsC,WAAW,GAC7DC,IAAoBL,EAAO,OAAO,eAAe,GACjDM,IAAML,EAAQ,SAAOM,IAAAL,EAAO,6BAAP,gBAAAK,EAAkC,KACvDC,IAAMP,EAAQ,SAAOQ,IAAAP,EAAO,6BAAP,gBAAAO,EAAkC,KACvDC,IAAOT,EAAQ,QAAQ;AAE7B,2BACG,OACC,EAAA,UAAA;AAAA,IAAC,gBAAAU,EAAA,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,MAAC,gBAAAC,EAAA,OAAA,EAAI,WAAU,SACb,UAAA,gBAAAA;AAAA,QAACT;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACC,KAAAG;AAAA,UAAK,KAAAE;AAAA,UAAK,MAAAE;AAAA,UAChB,QAAQL,KAAA,gBAAAA,EAAyC,OAAM;AAAA,UACvD,UAAU,CAACQ,GAAGC,MAAUZ,EAAO,eAAe,CAACa,MAA0B,CAACD,GAAOC,KAAA,gBAAAA,EAAM,EAAE,CAAC;AAAA,UAC1F,aAAa,OAAOT,MAAQ,SAAY,IAAIA,CAAG,MAAM,EAAE;AAAA,QAAA;AAAA,MAAA,GAE3D;AAAA,MACA,gBAAAM,EAAC,OAAI,EAAA,WAAU,SACb,UAAA,gBAAAA;AAAA,QAACT;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACC,KAAAG;AAAA,UAAK,KAAAE;AAAA,UAAK,MAAAE;AAAA,UAChB,QAAQL,KAAA,gBAAAA,EAAyC,OAAM;AAAA,UACvD,UAAU,CAACQ,GAAGC,MAAUZ,EAAO,eAAe,CAACa,MAA0B,CAACA,KAAA,gBAAAA,EAAM,IAAID,CAAK,CAAC;AAAA,UAC1F,aAAa,OAAON,IAAM,IAAIA,CAAG,MAAM,EAAE;AAAA,QAAA;AAAA,MAAA,EAE7C,CAAA;AAAA,IAAA,GACF;AAAA,IACA,gBAAAI,EAAC,OAAI,EAAA,WAAU,MAAM,CAAA;AAAA,EAAA,GACvB;AAEJ;AAEAI,EAAkB,gBAAgBjB,CAAW;"}
+{"version":3,"file":"RangeFilter.js","sources":["../../../../src/molecules/table/filters/RangeFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport { type InputText as DefaultInputText } from \"../../forms/input-text/InputText\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { FilterRangeOptions } from \"./Filters\";\n\nexport function RangeFilter<Data = any>({ header, options }: FilterProps<Data, FilterRangeOptions>) {\n  const { column } = header;\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const columnFilterValue = header.column.getFilterValue();\n  const min = options.min ?? column.getFacetedMinMaxValues()?.[0];\n  const max = options.max ?? column.getFacetedMinMaxValues()?.[1];\n  const step = options.step ?? 1;\n\n  return (\n    <div>\n      <div className='flex space-x-2'>\n        <div className='w-1/2'>\n          <InputText\n            type='number'\n            size='small'\n            {...{ min, max, step }}\n            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [value, old?.[1]])}\n            placeholder={`Min ${min !== undefined ? `(${min})` : \"\"}`}\n          />\n        </div>\n        <div className='w-1/2'>\n          <InputText\n            type='number'\n            size='small'\n            {...{ min, max, step }}\n            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n            onChange={(_, value) => column.setFilterValue((old: [number, number]) => [old?.[0], value])}\n            placeholder={`Max ${max ? `(${max})` : \"\"}`}\n          />\n        </div>\n      </div>\n      <div className='h-1' />\n    </div>\n  );\n}\n\nregisterComponent(\"Filter.range\", RangeFilter);\n"],"names":["RangeFilter","header","options","column","InputText","getComponent","columnFilterValue","min","max","step","jsxs","jsx","_","value","old","registerComponent"],"mappings":";;AAKO,SAASA,EAAwB,EAAE,QAAAC,GAAQ,SAAAC,KAAkD;AAClG,QAAM,EAAE,QAAAC,MAAWF,GACbG,IAAYC,EAAsC,WAAW,GAC7DC,IAAoBL,EAAO,OAAO,eAAA,GAClCM,IAAML,EAAQ,OAAOC,EAAO,uBAAA,IAA2B,CAAC,GACxDK,IAAMN,EAAQ,OAAOC,EAAO,uBAAA,IAA2B,CAAC,GACxDM,IAAOP,EAAQ,QAAQ;AAE7B,2BACG,OAAA,EACC,UAAA;AAAA,IAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,SACb,UAAA,gBAAAA;AAAA,QAACP;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACC,KAAAG;AAAA,UAAK,KAAAC;AAAA,UAAK,MAAAC;AAAA,UAChB,OAAQH,IAAyC,CAAC,KAAK;AAAA,UACvD,UAAU,CAACM,GAAGC,MAAUV,EAAO,eAAe,CAACW,MAA0B,CAACD,GAAOC,IAAM,CAAC,CAAC,CAAC;AAAA,UAC1F,aAAa,OAAOP,MAAQ,SAAY,IAAIA,CAAG,MAAM,EAAE;AAAA,QAAA;AAAA,MAAA,GAE3D;AAAA,MACA,gBAAAI,EAAC,OAAA,EAAI,WAAU,SACb,UAAA,gBAAAA;AAAA,QAACP;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACC,KAAAG;AAAA,UAAK,KAAAC;AAAA,UAAK,MAAAC;AAAA,UAChB,OAAQH,IAAyC,CAAC,KAAK;AAAA,UACvD,UAAU,CAACM,GAAGC,MAAUV,EAAO,eAAe,CAACW,MAA0B,CAACA,IAAM,CAAC,GAAGD,CAAK,CAAC;AAAA,UAC1F,aAAa,OAAOL,IAAM,IAAIA,CAAG,MAAM,EAAE;AAAA,QAAA;AAAA,MAAA,EAC3C,CACF;AAAA,IAAA,GACF;AAAA,IACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,MAAA,CAAM;AAAA,EAAA,GACvB;AAEJ;AAEAI,EAAkB,gBAAgBf,CAAW;"}

package/dist/molecules/table/filters/SelectFilter.js

@@ -1,30 +1,28 @@
-import { jsx as n, Fragment as u } from "react/jsx-runtime";
+import { jsx as o, Fragment as u } from "react/jsx-runtime";
 import { registerComponent as a, getComponent as p } from "../../../registries/components.js";
 import { useUniqValues as f } from "../hooks/useUniqValues.js";
-function F({ header: l, options: e }) {
-  const c = p("Select"), i = l.column.getFilterValue(), o = f({ header: l, filterVariant: "text" });
-  console.log(o);
-  const r = e.layout === "choicesjs" ? {
+function F({ header: t, options: e }) {
+  const n = p("Select"), i = t.column.getFilterValue(), c = f({ header: t, filterVariant: "text" }), r = e.layout === "choicesjs" ? {
     placeholder: void 0
   } : {
-    placeholder: `Filter by ${l.column.columnDef.header}`
+    placeholder: `Filter by ${t.column.columnDef.header}`
   }, m = [
     {
-      label: `Filter by ${l.column.columnDef.header}`,
+      label: `Filter by ${t.column.columnDef.header}`,
       value: ""
     }
-  ].concat(e.options || o.map((t) => ({ label: t, value: t })));
-  return /* @__PURE__ */ n(u, { children: /* @__PURE__ */ n(
-    c,
+  ].concat(e.options || c.map((l) => ({ label: l, value: l })));
+  return /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(
+    n,
     {
       size: "small",
       ...e,
       ...r,
       options: m,
-      name: `filter_${l.column.id}`,
-      "data-testid": `filter_${l.column.id}`,
+      name: `filter_${t.column.id}`,
+      "data-testid": `filter_${t.column.id}`,
       value: i,
-      onChange: (t, s) => l.column.setFilterValue(s)
+      onChange: (l, s) => t.column.setFilterValue(s)
     }
   ) });
 }

package/dist/molecules/table/filters/SelectFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectFilter.js","sources":["../../../../src/molecules/table/filters/SelectFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { Select as DefaultSelect } from \"../../forms/select/Select\";\nimport { SelectOptionProps } from \"../../forms/select/Select.interface\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { useUniqValues } from \"../hooks/useUniqValues\";\nimport { FilterSelectOptions } from \"./Filters\";\n\nexport function SelectFilter<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>) {\n  const Select = getComponent<typeof DefaultSelect>(\"Select\");\n  const columnFilterValue = header.column.getFilterValue();\n  const uniqValues = useUniqValues<Data>({ header, filterVariant: \"text\" });\n  console.log(uniqValues);\n  const opts =\n    options.layout === \"choicesjs\"\n      ? {\n          placeholder: undefined\n        }\n      : {\n          placeholder: `Filter by ${header.column.columnDef.header}`\n        };\n\n  const listOptions = (\n    [\n      {\n        label: `Filter by ${header.column.columnDef.header}`,\n        value: \"\"\n      }\n    ] as SelectOptionProps[]\n  ).concat(options.options || uniqValues.map((value: any) => ({ label: value, value })));\n\n  return (\n    <>\n      <Select<string>\n        size='small'\n        {...(options as any)}\n        {...opts}\n        options={listOptions}\n        name={`filter_${header.column.id}`}\n        data-testid={`filter_${header.column.id}`}\n        value={columnFilterValue as string}\n        onChange={(_, value) => header.column.setFilterValue(value)}\n      />\n    </>\n  );\n}\n\nregisterComponent(\"Filter.select\", SelectFilter);\n"],"names":["SelectFilter","header","options","Select","getComponent","columnFilterValue","uniqValues","useUniqValues","opts","listOptions","value","jsx","Fragment","_","registerComponent"],"mappings":";;;AAOO,SAASA,EAAyB,EAAE,QAAAC,GAAQ,SAAAC,KAAmD;AAC9F,QAAAC,IAASC,EAAmC,QAAQ,GACpDC,IAAoBJ,EAAO,OAAO,eAAe,GACjDK,IAAaC,EAAoB,EAAE,QAAAN,GAAQ,eAAe,QAAQ;AACxE,UAAQ,IAAIK,CAAU;AAChB,QAAAE,IACJN,EAAQ,WAAW,cACf;AAAA,IACE,aAAa;AAAA,EAAA,IAEf;AAAA,IACE,aAAa,aAAaD,EAAO,OAAO,UAAU,MAAM;AAAA,EAC1D,GAEAQ,IACJ;AAAA,IACE;AAAA,MACE,OAAO,aAAaR,EAAO,OAAO,UAAU,MAAM;AAAA,MAClD,OAAO;AAAA,IAAA;AAAA,EAGX,EAAA,OAAOC,EAAQ,WAAWI,EAAW,IAAI,CAACI,OAAgB,EAAE,OAAOA,GAAO,OAAAA,EAAA,EAAQ,CAAC;AAErF,SAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA,gBAAAD;AAAA,IAACR;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAID;AAAA,MACJ,GAAGM;AAAA,MACJ,SAASC;AAAA,MACT,MAAM,UAAUR,EAAO,OAAO,EAAE;AAAA,MAChC,eAAa,UAAUA,EAAO,OAAO,EAAE;AAAA,MACvC,OAAOI;AAAA,MACP,UAAU,CAACQ,GAAGH,MAAUT,EAAO,OAAO,eAAeS,CAAK;AAAA,IAAA;AAAA,EAAA,GAE9D;AAEJ;AAEAI,EAAkB,iBAAiBd,CAAY;"}
+{"version":3,"file":"SelectFilter.js","sources":["../../../../src/molecules/table/filters/SelectFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { Select as DefaultSelect } from \"../../forms/select/Select\";\nimport { SelectOptionProps } from \"../../forms/select/Select.interface\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { useUniqValues } from \"../hooks/useUniqValues\";\nimport { FilterSelectOptions } from \"./Filters\";\n\nexport function SelectFilter<Data = any>({ header, options }: FilterProps<Data, FilterSelectOptions>) {\n  const Select = getComponent<typeof DefaultSelect>(\"Select\");\n  const columnFilterValue = header.column.getFilterValue();\n  const uniqValues = useUniqValues<Data>({ header, filterVariant: \"text\" });\n\n  const opts =\n    options.layout === \"choicesjs\"\n      ? {\n          placeholder: undefined\n        }\n      : {\n          placeholder: `Filter by ${header.column.columnDef.header}`\n        };\n\n  const listOptions = (\n    [\n      {\n        label: `Filter by ${header.column.columnDef.header}`,\n        value: \"\"\n      }\n    ] as SelectOptionProps[]\n  ).concat(options.options || uniqValues.map((value: any) => ({ label: value, value })));\n\n  return (\n    <>\n      <Select<string>\n        size='small'\n        {...(options as any)}\n        {...opts}\n        options={listOptions}\n        name={`filter_${header.column.id}`}\n        data-testid={`filter_${header.column.id}`}\n        value={columnFilterValue as string}\n        onChange={(_, value) => header.column.setFilterValue(value)}\n      />\n    </>\n  );\n}\n\nregisterComponent(\"Filter.select\", SelectFilter);\n"],"names":["SelectFilter","header","options","Select","getComponent","columnFilterValue","uniqValues","useUniqValues","opts","listOptions","value","jsx","Fragment","_","registerComponent"],"mappings":";;;AAOO,SAASA,EAAyB,EAAE,QAAAC,GAAQ,SAAAC,KAAmD;AACpG,QAAMC,IAASC,EAAmC,QAAQ,GACpDC,IAAoBJ,EAAO,OAAO,eAAA,GAClCK,IAAaC,EAAoB,EAAE,QAAAN,GAAQ,eAAe,QAAQ,GAElEO,IACJN,EAAQ,WAAW,cACf;AAAA,IACE,aAAa;AAAA,EAAA,IAEf;AAAA,IACE,aAAa,aAAaD,EAAO,OAAO,UAAU,MAAM;AAAA,EAAA,GAG1DQ,IACJ;AAAA,IACE;AAAA,MACE,OAAO,aAAaR,EAAO,OAAO,UAAU,MAAM;AAAA,MAClD,OAAO;AAAA,IAAA;AAAA,EACT,EAEF,OAAOC,EAAQ,WAAWI,EAAW,IAAI,CAACI,OAAgB,EAAE,OAAOA,GAAO,OAAAA,EAAA,EAAQ,CAAC;AAErF,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA,gBAAAD;AAAA,IAACR;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAID;AAAA,MACJ,GAAGM;AAAA,MACJ,SAASC;AAAA,MACT,MAAM,UAAUR,EAAO,OAAO,EAAE;AAAA,MAChC,eAAa,UAAUA,EAAO,OAAO,EAAE;AAAA,MACvC,OAAOI;AAAA,MACP,UAAU,CAACQ,GAAGH,MAAUT,EAAO,OAAO,eAAeS,CAAK;AAAA,IAAA;AAAA,EAAA,GAE9D;AAEJ;AAEAI,EAAkB,iBAAiBd,CAAY;"}

package/dist/molecules/table/filters/TextFieldFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFieldFilter.js","sources":["../../../../src/molecules/table/filters/TextFieldFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { InputText as DefaultInputText } from \"../../forms/input-text/InputText\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { useUniqValues } from \"../hooks/useUniqValues\";\nimport { FilterTextOptions } from \"./Filters\";\n\nexport function TextFieldFilter<Data = any>({ header, options }: FilterProps<Data, FilterTextOptions>) {\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const columnFilterValue = header.column.getFilterValue();\n  const uniqValues = useUniqValues<Data>({ header, filterVariant: \"text\" });\n  const datalistId = `data_list_${header.column.id}`;\n\n  return (\n    <>\n      {!options.disableDatalist && (\n        <datalist id={datalistId}>\n          {uniqValues.map((value: any) => (\n            <option value={value} key={value} />\n          ))}\n        </datalist>\n      )}\n      <InputText<string>\n        size='small'\n        placeholder={`Filter by ${header.column.columnDef.header}`}\n        {...options}\n        name={`filter_${header.column.id}`}\n        data-testid={`filter_${header.column.id}`}\n        value={(columnFilterValue ?? \"\") as string}\n        list={datalistId}\n        onChange={(_, value) => header.column.setFilterValue(value)}\n      />\n    </>\n  );\n}\n\nregisterComponent(\"Filter.text\", TextFieldFilter);\n"],"names":["TextFieldFilter","header","options","InputText","getComponent","columnFilterValue","uniqValues","useUniqValues","datalistId","jsxs","Fragment","jsx","value","_","registerComponent"],"mappings":";;;AAMO,SAASA,EAA4B,EAAE,QAAAC,GAAQ,SAAAC,KAAiD;AAC/F,QAAAC,IAAYC,EAAsC,WAAW,GAC7DC,IAAoBJ,EAAO,OAAO,eAAe,GACjDK,IAAaC,EAAoB,EAAE,QAAAN,GAAQ,eAAe,QAAQ,GAClEO,IAAa,aAAaP,EAAO,OAAO,EAAE;AAEhD,SAEK,gBAAAQ,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,CAACR,EAAQ,mBACP,gBAAAS,EAAA,YAAA,EAAS,IAAIH,GACX,UAAAF,EAAW,IAAI,CAACM,MACd,gBAAAD,EAAA,UAAA,EAAO,OAAAC,KAAmBA,CAAO,CACnC,GACH;AAAA,IAEF,gBAAAD;AAAA,MAACR;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAa,aAAaF,EAAO,OAAO,UAAU,MAAM;AAAA,QACvD,GAAGC;AAAA,QACJ,MAAM,UAAUD,EAAO,OAAO,EAAE;AAAA,QAChC,eAAa,UAAUA,EAAO,OAAO,EAAE;AAAA,QACvC,OAAQI,KAAqB;AAAA,QAC7B,MAAMG;AAAA,QACN,UAAU,CAACK,GAAGD,MAAUX,EAAO,OAAO,eAAeW,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5D,GACF;AAEJ;AAEAE,EAAkB,eAAed,CAAe;"}
+{"version":3,"file":"TextFieldFilter.js","sources":["../../../../src/molecules/table/filters/TextFieldFilter.tsx"],"sourcesContent":["import { getComponent, registerComponent } from \"../../../registries/components\";\nimport type { InputText as DefaultInputText } from \"../../forms/input-text/InputText\";\nimport type { FilterProps } from \"../components/DefaultFilter\";\nimport { useUniqValues } from \"../hooks/useUniqValues\";\nimport { FilterTextOptions } from \"./Filters\";\n\nexport function TextFieldFilter<Data = any>({ header, options }: FilterProps<Data, FilterTextOptions>) {\n  const InputText = getComponent<typeof DefaultInputText>(\"InputText\");\n  const columnFilterValue = header.column.getFilterValue();\n  const uniqValues = useUniqValues<Data>({ header, filterVariant: \"text\" });\n  const datalistId = `data_list_${header.column.id}`;\n\n  return (\n    <>\n      {!options.disableDatalist && (\n        <datalist id={datalistId}>\n          {uniqValues.map((value: any) => (\n            <option value={value} key={value} />\n          ))}\n        </datalist>\n      )}\n      <InputText<string>\n        size='small'\n        placeholder={`Filter by ${header.column.columnDef.header}`}\n        {...options}\n        name={`filter_${header.column.id}`}\n        data-testid={`filter_${header.column.id}`}\n        value={(columnFilterValue ?? \"\") as string}\n        list={datalistId}\n        onChange={(_, value) => header.column.setFilterValue(value)}\n      />\n    </>\n  );\n}\n\nregisterComponent(\"Filter.text\", TextFieldFilter);\n"],"names":["TextFieldFilter","header","options","InputText","getComponent","columnFilterValue","uniqValues","useUniqValues","datalistId","jsxs","Fragment","jsx","value","_","registerComponent"],"mappings":";;;AAMO,SAASA,EAA4B,EAAE,QAAAC,GAAQ,SAAAC,KAAiD;AACrG,QAAMC,IAAYC,EAAsC,WAAW,GAC7DC,IAAoBJ,EAAO,OAAO,eAAA,GAClCK,IAAaC,EAAoB,EAAE,QAAAN,GAAQ,eAAe,QAAQ,GAClEO,IAAa,aAAaP,EAAO,OAAO,EAAE;AAEhD,SACE,gBAAAQ,EAAAC,GAAA,EACG,UAAA;AAAA,IAAA,CAACR,EAAQ,mBACR,gBAAAS,EAAC,YAAA,EAAS,IAAIH,GACX,UAAAF,EAAW,IAAI,CAACM,MACf,gBAAAD,EAAC,UAAA,EAAO,OAAAC,KAAmBA,CAAO,CACnC,GACH;AAAA,IAEF,gBAAAD;AAAA,MAACR;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAa,aAAaF,EAAO,OAAO,UAAU,MAAM;AAAA,QACvD,GAAGC;AAAA,QACJ,MAAM,UAAUD,EAAO,OAAO,EAAE;AAAA,QAChC,eAAa,UAAUA,EAAO,OAAO,EAAE;AAAA,QACvC,OAAQI,KAAqB;AAAA,QAC7B,MAAMG;AAAA,QACN,UAAU,CAACK,GAAGD,MAAUX,EAAO,OAAO,eAAeW,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5D,GACF;AAEJ;AAEAE,EAAkB,eAAed,CAAe;"}

package/dist/molecules/table/hooks/useTable.d.ts

@@ -1,5 +1,5 @@
 import { TableOptions, TableState } from '@tanstack/react-table';
-import { JSON, Operation } from '../../../interfaces';
+import { FormOptions, JSON, Operation } from '../../../interfaces';
 export interface UseTableProps<Data extends {
     [key: string]: JSON;
 } = {
@@ -7,7 +7,7 @@ export interface UseTableProps<Data extends {
 }> extends Omit<TableOptions<Data>, "getCoreRowModel" | "onClick"> {
     operations: Operation<Data>[];
     metadata?: Record<string, unknown>;
-    i18n?: (i18n: string) => string;
+    i18n?: FormOptions["i18n"];
     onClick?: (data: any, operation: Operation<Data>) => void;
     manualFaceted?: boolean;
     onChange?: (query: TableState) => void;
@@ -18,6 +18,6 @@ export declare function useTable<Data extends {
 } = {
     [key: string]: JSON;
 }>(props: UseTableProps<Data>): {
-    i18n: (i18n: string) => string;
+    i18n: (key: string, defaultValue?: string) => string;
     tableInstance: import('@tanstack/table-core').Table<Data>;
 };

package/dist/molecules/table/hooks/useTable.js

@@ -1,34 +1,35 @@
 import { jsx as R } from "react/jsx-runtime";
-import { useReactTable as w, getCoreRowModel as M, getPaginationRowModel as f, getFilteredRowModel as C, getSortedRowModel as S, getFacetedRowModel as b, getFacetedUniqueValues as h } from "@tanstack/react-table";
+import { useReactTable as f, getFacetedUniqueValues as w, getFacetedRowModel as M, getSortedRowModel as C, getFilteredRowModel as S, getPaginationRowModel as b, getCoreRowModel as h } from "@tanstack/react-table";
 import { useEffect as v } from "react";
-import { getComponent as O } from "../../../registries/components.js";
-function x(e) {
-  const i = O("CellOperations"), t = e.i18n || ((n) => n), a = e.operations.length ? [
+import { useI18n as O } from "../../../hooks/useI18n.js";
+import { getComponent as I } from "../../../registries/components.js";
+function z(e) {
+  const n = I("CellOperations"), { t } = O(e.i18n), i = e.operations.length ? [
     {
       id: "operations",
       header: t("Operations"),
-      cell: (n) => /* @__PURE__ */ R(i, { info: n, operations: e.operations, metadata: e.metadata, onClick: e.onClick, i18n: t })
+      cell: (F) => /* @__PURE__ */ R(n, { info: F, operations: e.operations, metadata: e.metadata, onClick: e.onClick, i18n: t })
     }
-  ] : [], o = w({
+  ] : [], o = f({
     ...e,
-    columns: [...e.columns, ...a],
-    getCoreRowModel: M(),
-    getPaginationRowModel: f(),
-    getFilteredRowModel: e.manualFiltering ? void 0 : C(),
-    getSortedRowModel: e.manualSorting ? void 0 : S(),
-    getFacetedRowModel: e.manualFaceted ? void 0 : b(),
+    columns: [...e.columns, ...i],
+    getCoreRowModel: h(),
+    getPaginationRowModel: b(),
+    getFilteredRowModel: e.manualFiltering ? void 0 : S(),
+    getSortedRowModel: e.manualSorting ? void 0 : C(),
+    getFacetedRowModel: e.manualFaceted ? void 0 : M(),
     // client-side faceting
-    getFacetedUniqueValues: e.manualFaceted ? void 0 : h()
+    getFacetedUniqueValues: e.manualFaceted ? void 0 : w()
     // generate unique values for select filter/autocomplete
-  }), { columnFilters: l, sorting: d, pagination: g, columnOrder: c, columnPinning: m, columnSizing: r, columnSizingInfo: u, columnVisibility: s, globalFilter: F } = o.getState();
+  }), { columnFilters: a, sorting: l, pagination: d, columnOrder: g, columnPinning: c, columnSizing: m, columnSizingInfo: r, columnVisibility: u, globalFilter: s } = o.getState();
   return v(() => {
     e.onChange && e.onChange(o.getState());
-  }, [l, d, g, c, m, r, u, s, F]), {
+  }, [a, l, d, g, c, m, r, u, s]), {
     i18n: t,
     tableInstance: o
   };
 }
 export {
-  x as useTable
+  z as useTable
 };
 //# sourceMappingURL=useTable.js.map

package/dist/molecules/table/hooks/useTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.js","sources":["../../../../src/molecules/table/hooks/useTable.tsx"],"sourcesContent":["import {\n  type ColumnDef,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type TableOptions,\n  type TableState,\n  useReactTable\n} from \"@tanstack/react-table\";\nimport { useEffect } from \"react\";\n\nimport { type JSON, Operation } from \"../../../interfaces\";\nimport { getComponent } from \"../../../registries/components\";\nimport type { DefaultCellOperations } from \"../components/DefaultCellOperations\";\n\nexport interface UseTableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>\n  extends Omit<TableOptions<Data>, \"getCoreRowModel\" | \"onClick\"> {\n  operations: Operation<Data>[];\n  metadata?: Record<string, unknown>;\n  i18n?: (i18n: string) => string;\n  onClick?: (data: any, operation: Operation<Data>) => void;\n  manualFaceted?: boolean;\n  onChange?: (query: TableState) => void;\n  pageSizes?: number[];\n}\n\nexport function useTable<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: UseTableProps<Data>) {\n  const Operations = getComponent<typeof DefaultCellOperations<Data>>(\"CellOperations\");\n  const i18n = props.i18n || ((f: string) => f);\n\n  // const [pagination, setPagination] = useState({\n  //   pageIndex: 0, //initial page index\n  //   pageSize: 10 //default page size\n  // });\n\n  const operations = props.operations.length\n    ? ([\n        {\n          id: \"operations\",\n          header: i18n(\"Operations\"),\n          cell: (info) => (\n            <Operations info={info} operations={props.operations} metadata={props.metadata} onClick={props.onClick} i18n={i18n} />\n          )\n        }\n      ] satisfies ColumnDef<Data>[])\n    : [];\n\n  const tableInstance = useReactTable({\n    ...props,\n    columns: [...props.columns, ...operations],\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getFilteredRowModel: !props.manualFiltering ? getFilteredRowModel() : undefined,\n    getSortedRowModel: !props.manualSorting ? getSortedRowModel() : undefined,\n    getFacetedRowModel: !props.manualFaceted ? getFacetedRowModel() : undefined, // client-side faceting\n    getFacetedUniqueValues: !props.manualFaceted ? getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete\n  });\n\n  const { columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter } =\n    tableInstance.getState();\n\n  useEffect(() => {\n    if (props.onChange) {\n      props.onChange(tableInstance.getState());\n    }\n  }, [columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter]);\n\n  return {\n    i18n,\n    tableInstance\n  };\n}\n"],"names":["useTable","props","Operations","getComponent","i18n","f","operations","info","jsx","tableInstance","useReactTable","getCoreRowModel","getPaginationRowModel","getFilteredRowModel","getSortedRowModel","getFacetedRowModel","getFacetedUniqueValues","columnFilters","sorting","pagination","columnOrder","columnPinning","columnSizing","columnSizingInfo","columnVisibility","globalFilter","useEffect"],"mappings":";;;;AA6BO,SAASA,EAAyEC,GAA4B;AAC7G,QAAAC,IAAaC,EAAiD,gBAAgB,GAC9EC,IAAOH,EAAM,SAAS,CAACI,MAAcA,IAOrCC,IAAaL,EAAM,WAAW,SAC/B;AAAA,IACC;AAAA,MACE,IAAI;AAAA,MACJ,QAAQG,EAAK,YAAY;AAAA,MACzB,MAAM,CAACG,MACL,gBAAAC,EAACN,KAAW,MAAAK,GAAY,YAAYN,EAAM,YAAY,UAAUA,EAAM,UAAU,SAASA,EAAM,SAAS,MAAAG,EAAY,CAAA;AAAA,IAAA;AAAA,EAExH,IAEF,CAAC,GAECK,IAAgBC,EAAc;AAAA,IAClC,GAAGT;AAAA,IACH,SAAS,CAAC,GAAGA,EAAM,SAAS,GAAGK,CAAU;AAAA,IACzC,iBAAiBK,EAAgB;AAAA,IACjC,uBAAuBC,EAAsB;AAAA,IAC7C,qBAAsBX,EAAM,kBAA0C,SAAxBY;IAC9C,mBAAoBZ,EAAM,gBAAsC,SAAtBa;IAC1C,oBAAqBb,EAAM,gBAAuC,SAAvBc;;IAC3C,wBAAyBd,EAAM,gBAA2C,SAA3Be,EAA2B;AAAA;AAAA,EAAA,CAC3E,GAEK,EAAE,eAAAC,GAAe,SAAAC,GAAS,YAAAC,GAAY,aAAAC,GAAa,eAAAC,GAAe,cAAAC,GAAc,kBAAAC,GAAkB,kBAAAC,GAAkB,cAAAC,MACxHhB,EAAc,SAAS;AAEzB,SAAAiB,EAAU,MAAM;AACd,IAAIzB,EAAM,YACFA,EAAA,SAASQ,EAAc,UAAU;AAAA,EAE3C,GAAG,CAACQ,GAAeC,GAASC,GAAYC,GAAaC,GAAeC,GAAcC,GAAkBC,GAAkBC,CAAY,CAAC,GAE5H;AAAA,IACL,MAAArB;AAAA,IACA,eAAAK;AAAA,EACF;AACF;"}
+{"version":3,"file":"useTable.js","sources":["../../../../src/molecules/table/hooks/useTable.tsx"],"sourcesContent":["import {\n  type ColumnDef,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type TableOptions,\n  type TableState,\n  useReactTable\n} from \"@tanstack/react-table\";\nimport { useEffect } from \"react\";\n\nimport { useI18n } from \"../../../hooks/useI18n.js\";\nimport { type FormOptions, type JSON, Operation } from \"../../../interfaces\";\nimport { getComponent } from \"../../../registries/components\";\nimport type { DefaultCellOperations } from \"../components/DefaultCellOperations\";\n\nexport interface UseTableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>\n  extends Omit<TableOptions<Data>, \"getCoreRowModel\" | \"onClick\"> {\n  operations: Operation<Data>[];\n  metadata?: Record<string, unknown>;\n  i18n?: FormOptions[\"i18n\"];\n  onClick?: (data: any, operation: Operation<Data>) => void;\n  manualFaceted?: boolean;\n  onChange?: (query: TableState) => void;\n  pageSizes?: number[];\n}\n\nexport function useTable<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: UseTableProps<Data>) {\n  const Operations = getComponent<typeof DefaultCellOperations<Data>>(\"CellOperations\");\n  const { t } = useI18n(props.i18n);\n\n  // const [pagination, setPagination] = useState({\n  //   pageIndex: 0, //initial page index\n  //   pageSize: 10 //default page size\n  // });\n\n  const operations = props.operations.length\n    ? ([\n        {\n          id: \"operations\",\n          header: t(\"Operations\"),\n          cell: (info) => (\n            <Operations info={info} operations={props.operations} metadata={props.metadata} onClick={props.onClick} i18n={t} />\n          )\n        }\n      ] satisfies ColumnDef<Data>[])\n    : [];\n\n  const tableInstance = useReactTable({\n    ...props,\n    columns: [...props.columns, ...operations],\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getFilteredRowModel: !props.manualFiltering ? getFilteredRowModel() : undefined,\n    getSortedRowModel: !props.manualSorting ? getSortedRowModel() : undefined,\n    getFacetedRowModel: !props.manualFaceted ? getFacetedRowModel() : undefined, // client-side faceting\n    getFacetedUniqueValues: !props.manualFaceted ? getFacetedUniqueValues() : undefined // generate unique values for select filter/autocomplete\n  });\n\n  const { columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter } =\n    tableInstance.getState();\n\n  useEffect(() => {\n    if (props.onChange) {\n      props.onChange(tableInstance.getState());\n    }\n  }, [columnFilters, sorting, pagination, columnOrder, columnPinning, columnSizing, columnSizingInfo, columnVisibility, globalFilter]);\n\n  return {\n    i18n: t,\n    tableInstance\n  };\n}\n"],"names":["useTable","props","Operations","getComponent","useI18n","operations","info","jsx","tableInstance","useReactTable","getCoreRowModel","getPaginationRowModel","getFilteredRowModel","getSortedRowModel","getFacetedRowModel","getFacetedUniqueValues","columnFilters","sorting","pagination","columnOrder","columnPinning","columnSizing","columnSizingInfo","columnVisibility","globalFilter","useEffect"],"mappings":";;;;;AA8BO,SAASA,EAAyEC,GAA4B;AACnH,QAAMC,IAAaC,EAAiD,gBAAgB,GAC9E,EAAE,EAAA,IAAMC,EAAQH,EAAM,IAAI,GAO1BI,IAAaJ,EAAM,WAAW,SAC/B;AAAA,IACC;AAAA,MACE,IAAI;AAAA,MACJ,QAAQ,EAAE,YAAY;AAAA,MACtB,MAAM,CAACK,MACL,gBAAAC,EAACL,GAAA,EAAW,MAAAI,GAAY,YAAYL,EAAM,YAAY,UAAUA,EAAM,UAAU,SAASA,EAAM,SAAS,MAAM,EAAA,CAAG;AAAA,IAAA;AAAA,EAErH,IAEF,CAAA,GAEEO,IAAgBC,EAAc;AAAA,IAClC,GAAGR;AAAA,IACH,SAAS,CAAC,GAAGA,EAAM,SAAS,GAAGI,CAAU;AAAA,IACzC,iBAAiBK,EAAA;AAAA,IACjB,uBAAuBC,EAAA;AAAA,IACvB,qBAAsBV,EAAM,kBAA0C,SAAxBW;IAC9C,mBAAoBX,EAAM,gBAAsC,SAAtBY;IAC1C,oBAAqBZ,EAAM,gBAAuC,SAAvBa;;IAC3C,wBAAyBb,EAAM,gBAA2C,SAA3Bc;;EAA2B,CAC3E,GAEK,EAAE,eAAAC,GAAe,SAAAC,GAAS,YAAAC,GAAY,aAAAC,GAAa,eAAAC,GAAe,cAAAC,GAAc,kBAAAC,GAAkB,kBAAAC,GAAkB,cAAAC,MACxHhB,EAAc,SAAA;AAEhB,SAAAiB,EAAU,MAAM;AACd,IAAIxB,EAAM,YACRA,EAAM,SAASO,EAAc,UAAU;AAAA,EAE3C,GAAG,CAACQ,GAAeC,GAASC,GAAYC,GAAaC,GAAeC,GAAcC,GAAkBC,GAAkBC,CAAY,CAAC,GAE5H;AAAA,IACL,MAAM;AAAA,IACN,eAAAhB;AAAA,EAAA;AAEJ;"}

package/dist/molecules/table/hooks/useUniqValues.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUniqValues.js","sources":["../../../../src/molecules/table/hooks/useUniqValues.tsx"],"sourcesContent":["import type { Header } from \"@tanstack/react-table\";\nimport { useMemo } from \"react\";\n\nexport function useUniqValues<Data = any>({ header, filterVariant }: { header: Header<Data, unknown>; filterVariant: string }) {\n  return useMemo(\n    () => (filterVariant === \"range\" ? [] : Array.from(header.column.getFacetedUniqueValues().keys()).flat().sort().slice(0, 5000)),\n\n    [header.column, filterVariant]\n  );\n}\n"],"names":["useUniqValues","header","filterVariant","useMemo"],"mappings":";AAGO,SAASA,EAA0B,EAAE,QAAAC,GAAQ,eAAAC,KAA2E;AACtH,SAAAC;AAAA,IACL,MAAOD,MAAkB,UAAU,KAAK,MAAM,KAAKD,EAAO,OAAO,yBAAyB,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,MAAM,GAAG,GAAI;AAAA,IAE7H,CAACA,EAAO,QAAQC,CAAa;AAAA,EAC/B;AACF;"}
+{"version":3,"file":"useUniqValues.js","sources":["../../../../src/molecules/table/hooks/useUniqValues.tsx"],"sourcesContent":["import type { Header } from \"@tanstack/react-table\";\nimport { useMemo } from \"react\";\n\nexport function useUniqValues<Data = any>({ header, filterVariant }: { header: Header<Data, unknown>; filterVariant: string }) {\n  return useMemo(\n    () => (filterVariant === \"range\" ? [] : Array.from(header.column.getFacetedUniqueValues().keys()).flat().sort().slice(0, 5000)),\n\n    [header.column, filterVariant]\n  );\n}\n"],"names":["useUniqValues","header","filterVariant","useMemo"],"mappings":";AAGO,SAASA,EAA0B,EAAE,QAAAC,GAAQ,eAAAC,KAA2E;AAC7H,SAAOC;AAAA,IACL,MAAOD,MAAkB,UAAU,CAAA,IAAK,MAAM,KAAKD,EAAO,OAAO,uBAAA,EAAyB,KAAA,CAAM,EAAE,KAAA,EAAO,OAAO,MAAM,GAAG,GAAI;AAAA,IAE7H,CAACA,EAAO,QAAQC,CAAa;AAAA,EAAA;AAEjC;"}

package/dist/molecules/table/utils/mapFormToColumns.js

@@ -1,39 +1,38 @@
-import { jsx as s } from "react/jsx-runtime";
-import { createColumnHelper as d } from "@tanstack/react-table";
-import { Components as f } from "formiojs";
+import { jsx as c } from "react/jsx-runtime";
+import { c as d } from "../../../chunks/index2.js";
+import { createColumnHelper as f } from "@tanstack/react-table";
 import C from "lodash/cloneDeep";
 import g from "lodash/get";
-import { getComponent as b } from "../../../registries/components.js";
-const x = {
+import { getComponent as x } from "../../../registries/components.js";
+const b = {
   number: "range",
   currency: "range",
   checkbox: "boolean"
 };
-function H(c, u = []) {
-  const p = d(), o = C(u), n = b("Cell");
-  return c.components.flatMap((e) => e.type === "tabs" ? e.components.flatMap((r) => r.components) : [e]).filter((e) => e.tableView).map((e) => {
-    var m;
-    const r = f.create(e, {}, null, !0), a = o.findIndex(({ accessorKey: l }) => l === `data.${e.key}`);
-    let t = o[a];
-    return t && o.splice(a, 1), p.accessor(`data.${e.key}`, {
-      header: (m = e.label || e.title || e.key) == null ? void 0 : m.replace(/:/, ""),
-      cell: (l) => /* @__PURE__ */ s(n, { value: l.getValue(), render: (i) => r.asString(i) }),
+function j(s, p = []) {
+  const u = f(), r = C(p), l = x("Cell");
+  return s.components.flatMap((e) => e.type === "tabs" ? e.components?.flatMap((t) => t.components) : [e]).filter((e) => e?.tableView).map((e) => {
+    const t = e, n = d.Components.create(t, {}, null), o = r.findIndex(({ accessorKey: a }) => a === `data.${t.key}`);
+    let m = r[o];
+    return m && r.splice(o, 1), u.accessor(`data.${t.key}`, {
+      header: (t.label || t.title || t.key)?.replace(/:/, ""),
+      cell: (a) => /* @__PURE__ */ c(l, { value: a.getValue(), render: (i) => n.asString(i) }),
       meta: {
-        filter: { variant: x[e.type] || "text" },
-        ...(t == null ? void 0 : t.meta) || {}
+        filter: { variant: b[t.type] || "text" },
+        ...m?.meta || {}
       },
-      ...t || {}
+      ...m || {}
     });
-  }).concat(o).map((e, r) => ({
+  }).concat(r).map((e, t) => ({
     ...e,
     meta: {
       ...e.meta || {},
-      order: g(e, "meta.order", r * 10)
+      order: g(e, "meta.order", t * 10)
     },
-    cell: e.cell || ((a) => /* @__PURE__ */ s(n, { value: a.getValue(), render: (t) => t }))
-  })).sort((e, r) => e.meta.order > r.meta.order ? 1 : -1);
+    cell: e.cell || ((n) => /* @__PURE__ */ c(l, { value: n.getValue(), render: (o) => o }))
+  })).sort((e, t) => e.meta.order > t.meta.order ? 1 : -1);
 }
 export {
-  H as mapFormToColumns
+  j as mapFormToColumns
 };
 //# sourceMappingURL=mapFormToColumns.js.map

package/dist/molecules/table/utils/mapFormToColumns.js.map

@@ -1 +1 @@
-{"version":3,"file":"mapFormToColumns.js","sources":["../../../../src/molecules/table/utils/mapFormToColumns.tsx"],"sourcesContent":["import \"../interfaces/extends\";\n\nimport { ColumnDef, ColumnDefResolved, createColumnHelper } from \"@tanstack/react-table\";\nimport { Components } from \"formiojs\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport get from \"lodash/get\";\n\nimport type { ComponentType, FormType } from \"../../../interfaces\";\nimport { getComponent } from \"../../../registries/components\";\nimport type { DefaultCell } from \"../components/DefaultCell\";\nimport type { FilterVariants } from \"../filters/Filters.js\";\n\nconst MAP_TYPES: Record<string, FilterVariants> = {\n  number: \"range\",\n  currency: \"range\",\n  checkbox: \"boolean\"\n};\n\nexport function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefResolved<Data, any>[] = []): ColumnDef<Data, any>[] {\n  const columnHelper = createColumnHelper<Data>();\n  const columnsToKeep = cloneDeep(columns);\n\n  const Cell = getComponent<typeof DefaultCell>(\"Cell\");\n\n  const columnsFromComponents = form.components\n    .flatMap((component) => {\n      if (component.type === \"tabs\") {\n        return component.components.flatMap((subComponent: ComponentType) => subComponent.components);\n      }\n\n      return [component];\n    })\n    .filter((component) => component.tableView)\n    .map((component: ComponentType) => {\n      const cmp: any = Components.create(component, {}, null, true);\n\n      const columnIndex = columnsToKeep.findIndex(({ accessorKey }) => {\n        return accessorKey === `data.${component.key}`;\n      });\n\n      let column = columnsToKeep[columnIndex];\n\n      if (column) {\n        columnsToKeep.splice(columnIndex, 1);\n      }\n\n      return columnHelper.accessor(`data.${component.key}` as any, {\n        header: (component.label || component.title || component.key)?.replace(/:/, \"\"),\n        cell: (info) => {\n          return <Cell value={info.getValue() as Data} render={(value: Data) => cmp.asString(value)} />;\n        },\n        meta: {\n          filter: { variant: MAP_TYPES[component.type!] || \"text\" },\n          ...(column?.meta || {})\n        },\n        ...(column || {})\n      });\n    });\n\n  const mergedColumns = columnsFromComponents.concat(columnsToKeep as any[]).map((column, index) => ({\n    ...column,\n    meta: {\n      ...(column.meta || {}),\n      order: get(column, \"meta.order\", index * 10)\n    },\n    cell:\n      column.cell ||\n      ((info) => {\n        return <Cell value={info.getValue() as Data} render={(value: Data) => value} />;\n      })\n  }));\n\n  return mergedColumns.sort((a, b) => (a.meta.order > b.meta.order ? 1 : -1)) as ColumnDef<Data, any>[];\n}\n"],"names":["MAP_TYPES","mapFormToColumns","form","columns","columnHelper","createColumnHelper","columnsToKeep","cloneDeep","Cell","getComponent","component","subComponent","cmp","Components","columnIndex","accessorKey","column","_a","info","jsx","value","index","get","a","b"],"mappings":";;;;;;AAYA,MAAMA,IAA4C;AAAA,EAChD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,SAASC,EAA6BC,GAAgBC,IAA0C,IAA4B;AACjI,QAAMC,IAAeC,EAAyB,GACxCC,IAAgBC,EAAUJ,CAAO,GAEjCK,IAAOC,EAAiC,MAAM;AAkDpD,SAhD8BP,EAAK,WAChC,QAAQ,CAACQ,MACJA,EAAU,SAAS,SACdA,EAAU,WAAW,QAAQ,CAACC,MAAgCA,EAAa,UAAU,IAGvF,CAACD,CAAS,CAClB,EACA,OAAO,CAACA,MAAcA,EAAU,SAAS,EACzC,IAAI,CAACA,MAA6B;;AACjC,UAAME,IAAWC,EAAW,OAAOH,GAAW,CAAC,GAAG,MAAM,EAAI,GAEtDI,IAAcR,EAAc,UAAU,CAAC,EAAE,aAAAS,QACtCA,MAAgB,QAAQL,EAAU,GAAG,EAC7C;AAEG,QAAAM,IAASV,EAAcQ,CAAW;AAEtC,WAAIE,KACYV,EAAA,OAAOQ,GAAa,CAAC,GAG9BV,EAAa,SAAS,QAAQM,EAAU,GAAG,IAAW;AAAA,MAC3D,SAASO,IAAAP,EAAU,SAASA,EAAU,SAASA,EAAU,QAAhD,gBAAAO,EAAsD,QAAQ,KAAK;AAAA,MAC5E,MAAM,CAACC,MACG,gBAAAC,EAAAX,GAAA,EAAK,OAAOU,EAAK,SAAS,GAAW,QAAQ,CAACE,MAAgBR,EAAI,SAASQ,CAAK,EAAG,CAAA;AAAA,MAE7F,MAAM;AAAA,QACJ,QAAQ,EAAE,SAASpB,EAAUU,EAAU,IAAK,KAAK,OAAO;AAAA,QACxD,IAAIM,KAAA,gBAAAA,EAAQ,SAAQ,CAAA;AAAA,MACtB;AAAA,MACA,GAAIA,KAAU,CAAA;AAAA,IAAC,CAChB;AAAA,EAAA,CACF,EAEyC,OAAOV,CAAsB,EAAE,IAAI,CAACU,GAAQK,OAAW;AAAA,IACjG,GAAGL;AAAA,IACH,MAAM;AAAA,MACJ,GAAIA,EAAO,QAAQ,CAAC;AAAA,MACpB,OAAOM,EAAIN,GAAQ,cAAcK,IAAQ,EAAE;AAAA,IAC7C;AAAA,IACA,MACEL,EAAO,SACN,CAACE,MACO,gBAAAC,EAACX,KAAK,OAAOU,EAAK,SAAoB,GAAA,QAAQ,CAACE,MAAgBA,GAAO;AAAA,EAC/E,EACF,EAEmB,KAAK,CAACG,GAAGC,MAAOD,EAAE,KAAK,QAAQC,EAAE,KAAK,QAAQ,IAAI,EAAG;AAC5E;"}
+{"version":3,"file":"mapFormToColumns.js","sources":["../../../../src/molecules/table/utils/mapFormToColumns.tsx"],"sourcesContent":["import \"../interfaces/extends\";\n\nimport { Components } from \"@formio/js\";\nimport { ColumnDef, ColumnDefResolved, createColumnHelper } from \"@tanstack/react-table\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport get from \"lodash/get\";\n\nimport type { ComponentType, FormType } from \"../../../interfaces\";\nimport { getComponent } from \"../../../registries/components\";\nimport type { DefaultCell } from \"../components/DefaultCell\";\nimport type { FilterVariants } from \"../filters/Filters.js\";\n\nconst MAP_TYPES: Record<string, FilterVariants> = {\n  number: \"range\",\n  currency: \"range\",\n  checkbox: \"boolean\"\n};\n\nexport function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefResolved<Data, any>[] = []): ColumnDef<Data, any>[] {\n  const columnHelper = createColumnHelper<Data>();\n  const columnsToKeep = cloneDeep(columns);\n\n  const Cell = getComponent<typeof DefaultCell>(\"Cell\");\n\n  const columnsFromComponents = form.components\n    .flatMap((component) => {\n      if (component.type === \"tabs\") {\n        return component.components?.flatMap((subComponent: ComponentType) => subComponent.components);\n      }\n\n      return [component];\n    })\n    .filter((component) => component?.tableView)\n    .map((c) => {\n      const component = c as ComponentType;\n      const cmp: any = Components.create(component, {}, null);\n\n      const columnIndex = columnsToKeep.findIndex(({ accessorKey }) => {\n        return accessorKey === `data.${component.key}`;\n      });\n\n      let column = columnsToKeep[columnIndex];\n\n      if (column) {\n        columnsToKeep.splice(columnIndex, 1);\n      }\n\n      return columnHelper.accessor(`data.${component.key}` as any, {\n        header: (component.label || component.title || component.key)?.replace(/:/, \"\"),\n        cell: (info) => {\n          return <Cell value={info.getValue() as Data} render={(value: Data) => cmp.asString(value)} />;\n        },\n        meta: {\n          filter: { variant: MAP_TYPES[component.type!] || \"text\" },\n          ...(column?.meta || {})\n        },\n        ...(column || {})\n      });\n    });\n\n  const mergedColumns = columnsFromComponents.concat(columnsToKeep as any[]).map((column, index) => ({\n    ...column,\n    meta: {\n      ...(column.meta || {}),\n      order: get(column, \"meta.order\", index * 10)\n    },\n    cell:\n      column.cell ||\n      ((info) => {\n        return <Cell value={info.getValue() as Data} render={(value: Data) => value} />;\n      })\n  }));\n\n  return mergedColumns.sort((a, b) => (a.meta.order > b.meta.order ? 1 : -1)) as ColumnDef<Data, any>[];\n}\n"],"names":["MAP_TYPES","mapFormToColumns","form","columns","columnHelper","createColumnHelper","columnsToKeep","cloneDeep","Cell","getComponent","component","subComponent","c","cmp","Components","columnIndex","accessorKey","column","info","jsx","value","index","get","a","b"],"mappings":";;;;;;AAYA,MAAMA,IAA4C;AAAA,EAChD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,SAASC,EAA6BC,GAAgBC,IAA0C,IAA4B;AACjI,QAAMC,IAAeC,EAAA,GACfC,IAAgBC,EAAUJ,CAAO,GAEjCK,IAAOC,EAAiC,MAAM;AAmDpD,SAjD8BP,EAAK,WAChC,QAAQ,CAACQ,MACJA,EAAU,SAAS,SACdA,EAAU,YAAY,QAAQ,CAACC,MAAgCA,EAAa,UAAU,IAGxF,CAACD,CAAS,CAClB,EACA,OAAO,CAACA,MAAcA,GAAW,SAAS,EAC1C,IAAI,CAACE,MAAM;AACV,UAAMF,IAAYE,GACZC,IAAWC,EAAAA,WAAW,OAAOJ,GAAW,CAAA,GAAI,IAAI,GAEhDK,IAAcT,EAAc,UAAU,CAAC,EAAE,aAAAU,QACtCA,MAAgB,QAAQN,EAAU,GAAG,EAC7C;AAED,QAAIO,IAASX,EAAcS,CAAW;AAEtC,WAAIE,KACFX,EAAc,OAAOS,GAAa,CAAC,GAG9BX,EAAa,SAAS,QAAQM,EAAU,GAAG,IAAW;AAAA,MAC3D,SAASA,EAAU,SAASA,EAAU,SAASA,EAAU,MAAM,QAAQ,KAAK,EAAE;AAAA,MAC9E,MAAM,CAACQ,MACE,gBAAAC,EAACX,GAAA,EAAK,OAAOU,EAAK,SAAA,GAAoB,QAAQ,CAACE,MAAgBP,EAAI,SAASO,CAAK,EAAA,CAAG;AAAA,MAE7F,MAAM;AAAA,QACJ,QAAQ,EAAE,SAASpB,EAAUU,EAAU,IAAK,KAAK,OAAA;AAAA,QACjD,GAAIO,GAAQ,QAAQ,CAAA;AAAA,MAAC;AAAA,MAEvB,GAAIA,KAAU,CAAA;AAAA,IAAC,CAChB;AAAA,EACH,CAAC,EAEyC,OAAOX,CAAsB,EAAE,IAAI,CAACW,GAAQI,OAAW;AAAA,IACjG,GAAGJ;AAAA,IACH,MAAM;AAAA,MACJ,GAAIA,EAAO,QAAQ,CAAA;AAAA,MACnB,OAAOK,EAAIL,GAAQ,cAAcI,IAAQ,EAAE;AAAA,IAAA;AAAA,IAE7C,MACEJ,EAAO,SACN,CAACC,MACO,gBAAAC,EAACX,KAAK,OAAOU,EAAK,YAAoB,QAAQ,CAACE,MAAgBA,GAAO;AAAA,EAC/E,EACF,EAEmB,KAAK,CAACG,GAAGC,MAAOD,EAAE,KAAK,QAAQC,EAAE,KAAK,QAAQ,IAAI,EAAG;AAC5E;"}

package/dist/molecules/tabs/Tab.js

@@ -1,67 +1,66 @@
-import { jsxs as l, jsx as b } from "react/jsx-runtime";
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
 import { c as f } from "../../chunks/index.js";
-import { useRef as p, useEffect as v, useCallback as r } from "react";
-import { useKeyboardControls as A } from "../../hooks/useKeyboardControls.js";
-import { registerComponent as E } from "../../registries/components.js";
-import { iconClass as K } from "../../utils/iconClass.js";
-import { useTabsUid as j, useActiveTab as C, useRegisterTabControl as D } from "./hooks/tabControl.js";
-function L({ onClick: s, icon: u, value: e, children: _, className: d, after: T }) {
-  const m = j(), a = p(null), o = C(), t = D({ value: e, ref: a }), i = p(o), c = p(o === e);
-  c.current = o === e, v(() => {
-    var n;
-    i.current !== o && e === o && ((n = a.current) == null || n.focus(), s == null || s(e)), i.current !== o && (i.current = o);
-  }, [e, s, o]);
-  const y = r(() => {
+import { useRef as b, useEffect as g, useCallback as n } from "react";
+import { useKeyboardControls as v } from "../../hooks/useKeyboardControls.js";
+import { registerComponent as A } from "../../registries/components.js";
+import { iconClass as E } from "../../utils/iconClass.js";
+import { useTabsUid as K, useActiveTab as j, useRegisterTabControl as k } from "./hooks/tabControl.js";
+function D({ onClick: p, icon: u, value: e, children: _, className: d, after: T }) {
+  const m = K(), s = b(null), o = j(), t = k({ value: e, ref: s }), c = b(o), r = b(o === e);
+  r.current = o === e, g(() => {
+    c.current !== o && e === o && (s.current?.focus(), p?.(e)), c.current !== o && (c.current = o);
+  }, [e, p, o]);
+  const y = n(() => {
     t({ type: "start" });
-  }, [t]), w = r(() => {
+  }, [t]), w = n(() => {
     t({ type: "end" });
-  }, [t]), x = r(() => {
+  }, [t]), x = n(() => {
     t({ type: "previous" });
-  }, [t]), h = r(() => {
+  }, [t]), h = n(() => {
     t({ type: "next" });
-  }, [t]), N = r(() => {
-    const n = document.documentElement.dir === "rtl";
-    t({ type: n ? "next" : "previous" });
-  }, [t]), R = r(() => {
-    const n = document.documentElement.dir === "rtl";
-    t({ type: n ? "previous" : "next" });
-  }, [t]), $ = A({
+  }, [t]), C = n(() => {
+    const a = document.documentElement.dir === "rtl";
+    t({ type: a ? "next" : "previous" });
+  }, [t]), N = n(() => {
+    const a = document.documentElement.dir === "rtl";
+    t({ type: a ? "previous" : "next" });
+  }, [t]), R = v({
     start: y,
     end: w,
     up: x,
     down: h,
-    left: N,
-    right: R
-  }), g = r(() => {
+    left: C,
+    right: N
+  }), $ = n(() => {
     t({ type: "update", payload: e });
   }, [t, e]);
-  return /* @__PURE__ */ l("div", { title: "button-wrapper", className: f("tw-tabs__button-wrapper", d, { "-active": c.current }, d), children: [
+  return /* @__PURE__ */ l("div", { title: "button-wrapper", className: f("tw-tabs__button-wrapper", d, { "-active": r.current }, d), children: [
     /* @__PURE__ */ l(
       "button",
       {
-        ref: a,
+        ref: s,
         id: `Tab_${e}_${m}`,
         "data-name": "Tab",
         title: "button-tab",
         role: "tab",
-        "aria-selected": c.current,
+        "aria-selected": r.current,
         "aria-controls": `TabPanel_${e}_${m}`,
-        tabIndex: c.current ? 0 : -1,
+        tabIndex: r.current ? 0 : -1,
         className: "tw-tabs__button",
-        onClick: g,
-        onKeyDown: $,
+        onClick: $,
+        onKeyDown: R,
         children: [
-          u && /* @__PURE__ */ b("i", { className: f(K(void 0, u), "tw-tabs__button-icon") }),
-          /* @__PURE__ */ b("span", { className: "tw-tabs__button-label", children: _ }),
+          u && /* @__PURE__ */ i("i", { className: f(E(void 0, u), "tw-tabs__button-icon") }),
+          /* @__PURE__ */ i("span", { className: "tw-tabs__button-label", children: _ }),
           T
         ]
       }
     ),
-    /* @__PURE__ */ b("div", { className: "tw-tabs__button-border" })
+    /* @__PURE__ */ i("div", { className: "tw-tabs__button-border" })
   ] });
 }
-E("Tab", L);
+A("Tab", D);
 export {
-  L as Tab
+  D as Tab
 };
 //# sourceMappingURL=Tab.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../src/molecules/tabs/Tab.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { PropsWithChildren, useCallback, useEffect, useRef } from \"react\";\n\nimport { useKeyboardControls } from \"../../hooks/useKeyboardControls.js\";\nimport { registerComponent } from \"../../registries/components.js\";\nimport { iconClass } from \"../../utils/iconClass.js\";\nimport { useActiveTab, useRegisterTabControl, useTabsUid } from \"./hooks/tabControl.js\";\n\nexport interface TabProps {\n  icon?: string;\n  isActive?: boolean;\n  className?: string;\n  after?: React.ReactNode;\n  value: number;\n  /**\n   * on tab select handler\n   */\n  onClick?: (value: number) => void;\n}\n\nexport function Tab({ onClick, icon, value, children, className, after }: PropsWithChildren<TabProps>) {\n  const uid = useTabsUid();\n  const ref = useRef<HTMLButtonElement>(null);\n  const activeTab = useActiveTab();\n  const dispatch = useRegisterTabControl({ value, ref });\n  const previousActiveTab = useRef(activeTab);\n\n  const isActive = useRef(activeTab === value);\n  isActive.current = activeTab === value;\n\n  useEffect(() => {\n    if (previousActiveTab.current !== activeTab && value === activeTab) {\n      ref.current?.focus();\n      onClick?.(value);\n    }\n    if (previousActiveTab.current !== activeTab) {\n      previousActiveTab.current = activeTab;\n    }\n  }, [value, onClick, activeTab]);\n\n  const start = useCallback(() => {\n    dispatch({ type: \"start\" });\n  }, [dispatch]);\n\n  const end = useCallback(() => {\n    dispatch({ type: \"end\" });\n  }, [dispatch]);\n\n  const up = useCallback(() => {\n    dispatch({ type: \"previous\" });\n  }, [dispatch]);\n\n  const down = useCallback(() => {\n    dispatch({ type: \"next\" });\n  }, [dispatch]);\n\n  const left = useCallback(() => {\n    const isRTL = document.documentElement.dir === \"rtl\";\n\n    dispatch({ type: isRTL ? \"next\" : \"previous\" });\n  }, [dispatch]);\n\n  const right = useCallback(() => {\n    const isRTL = document.documentElement.dir === \"rtl\";\n\n    dispatch({ type: isRTL ? \"previous\" : \"next\" });\n  }, [dispatch]);\n\n  const handleKeyDown = useKeyboardControls({\n    start,\n    end,\n    up,\n    down,\n    left,\n    right\n  });\n\n  const handleClick = useCallback(() => {\n    dispatch({ type: \"update\", payload: value });\n  }, [dispatch, value]);\n\n  return (\n    <div title={\"button-wrapper\"} className={classnames(\"tw-tabs__button-wrapper\", className, { \"-active\": isActive.current }, className)}>\n      <button\n        ref={ref}\n        id={`Tab_${value}_${uid}`}\n        data-name='Tab'\n        title='button-tab'\n        role='tab'\n        aria-selected={isActive.current}\n        aria-controls={`TabPanel_${value}_${uid}`}\n        tabIndex={isActive.current ? 0 : -1}\n        className={\"tw-tabs__button\"}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n      >\n        {icon && <i className={classnames(iconClass(undefined, icon), \"tw-tabs__button-icon\")} />}\n        <span className={\"tw-tabs__button-label\"}>{children}</span>\n        {after}\n      </button>\n      <div className='tw-tabs__button-border' />\n    </div>\n  );\n}\n\nregisterComponent(\"Tab\", Tab);\n"],"names":["Tab","onClick","icon","value","children","className","after","uid","useTabsUid","ref","useRef","activeTab","useActiveTab","dispatch","useRegisterTabControl","previousActiveTab","isActive","useEffect","_a","start","useCallback","end","up","down","left","isRTL","right","handleKeyDown","useKeyboardControls","handleClick","jsxs","classnames","jsx","iconClass","registerComponent"],"mappings":"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"}
+{"version":3,"file":"Tab.js","sources":["../../../src/molecules/tabs/Tab.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { PropsWithChildren, useCallback, useEffect, useRef } from \"react\";\n\nimport { useKeyboardControls } from \"../../hooks/useKeyboardControls.js\";\nimport { registerComponent } from \"../../registries/components.js\";\nimport { iconClass } from \"../../utils/iconClass.js\";\nimport { useActiveTab, useRegisterTabControl, useTabsUid } from \"./hooks/tabControl.js\";\n\nexport interface TabProps {\n  icon?: string;\n  isActive?: boolean;\n  className?: string;\n  after?: React.ReactNode;\n  value: number;\n  /**\n   * on tab select handler\n   */\n  onClick?: (value: number) => void;\n}\n\nexport function Tab({ onClick, icon, value, children, className, after }: PropsWithChildren<TabProps>) {\n  const uid = useTabsUid();\n  const ref = useRef<HTMLButtonElement>(null);\n  const activeTab = useActiveTab();\n  const dispatch = useRegisterTabControl({ value, ref });\n  const previousActiveTab = useRef(activeTab);\n\n  const isActive = useRef(activeTab === value);\n  isActive.current = activeTab === value;\n\n  useEffect(() => {\n    if (previousActiveTab.current !== activeTab && value === activeTab) {\n      ref.current?.focus();\n      onClick?.(value);\n    }\n    if (previousActiveTab.current !== activeTab) {\n      previousActiveTab.current = activeTab;\n    }\n  }, [value, onClick, activeTab]);\n\n  const start = useCallback(() => {\n    dispatch({ type: \"start\" });\n  }, [dispatch]);\n\n  const end = useCallback(() => {\n    dispatch({ type: \"end\" });\n  }, [dispatch]);\n\n  const up = useCallback(() => {\n    dispatch({ type: \"previous\" });\n  }, [dispatch]);\n\n  const down = useCallback(() => {\n    dispatch({ type: \"next\" });\n  }, [dispatch]);\n\n  const left = useCallback(() => {\n    const isRTL = document.documentElement.dir === \"rtl\";\n\n    dispatch({ type: isRTL ? \"next\" : \"previous\" });\n  }, [dispatch]);\n\n  const right = useCallback(() => {\n    const isRTL = document.documentElement.dir === \"rtl\";\n\n    dispatch({ type: isRTL ? \"previous\" : \"next\" });\n  }, [dispatch]);\n\n  const handleKeyDown = useKeyboardControls({\n    start,\n    end,\n    up,\n    down,\n    left,\n    right\n  });\n\n  const handleClick = useCallback(() => {\n    dispatch({ type: \"update\", payload: value });\n  }, [dispatch, value]);\n\n  return (\n    <div title={\"button-wrapper\"} className={classnames(\"tw-tabs__button-wrapper\", className, { \"-active\": isActive.current }, className)}>\n      <button\n        ref={ref}\n        id={`Tab_${value}_${uid}`}\n        data-name='Tab'\n        title='button-tab'\n        role='tab'\n        aria-selected={isActive.current}\n        aria-controls={`TabPanel_${value}_${uid}`}\n        tabIndex={isActive.current ? 0 : -1}\n        className={\"tw-tabs__button\"}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n      >\n        {icon && <i className={classnames(iconClass(undefined, icon), \"tw-tabs__button-icon\")} />}\n        <span className={\"tw-tabs__button-label\"}>{children}</span>\n        {after}\n      </button>\n      <div className='tw-tabs__button-border' />\n    </div>\n  );\n}\n\nregisterComponent(\"Tab\", Tab);\n"],"names":["Tab","onClick","icon","value","children","className","after","uid","useTabsUid","ref","useRef","activeTab","useActiveTab","dispatch","useRegisterTabControl","previousActiveTab","isActive","useEffect","start","useCallback","end","up","down","left","isRTL","right","handleKeyDown","useKeyboardControls","handleClick","jsxs","classnames","jsx","iconClass","registerComponent"],"mappings":"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"}

package/dist/molecules/tabs/TabList.js

@@ -1,24 +1,23 @@
-import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { Children as m, isValidElement as p } from "react";
-import { registerComponent as f } from "../../registries/components.js";
-function l(n) {
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Children as o, isValidElement as m } from "react";
+import { registerComponent as p } from "../../registries/components.js";
+function f(i) {
   const s = [], a = [], r = [];
-  return m.forEach(n.children, (e) => {
-    var i;
-    if (p(e) && ((i = e.type) == null ? void 0 : i.name) === "Tab") {
+  return o.forEach(i.children, (e) => {
+    if (m(e) && e.type?.name === "Tab") {
       r.push(e);
       return;
     }
     r.length > 0 ? a.push(e) : s.push(e);
-  }), /* @__PURE__ */ t("nav", { className: "tw-tabs__header", children: /* @__PURE__ */ o("div", { className: "tw-tabs__header-wrapper", children: [
+  }), /* @__PURE__ */ t("nav", { className: "tw-tabs__header", children: /* @__PURE__ */ n("div", { className: "tw-tabs__header-wrapper", children: [
     /* @__PURE__ */ t("div", { className: "tw-tabs__header-border" }),
     s,
     /* @__PURE__ */ t("div", { role: "tablist", children: r }),
     a
   ] }) });
 }
-f("TabList", l);
+p("TabList", f);
 export {
-  l as TabList
+  f as TabList
 };
 //# sourceMappingURL=TabList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../src/molecules/tabs/TabList.tsx"],"sourcesContent":["import { Children, isValidElement, PropsWithChildren, ReactNode } from \"react\";\n\nimport { registerComponent } from \"../../registries/components.js\";\n\nexport function TabList(props: PropsWithChildren<{}>) {\n  const before: ReactNode[] = [];\n  const after: ReactNode[] = [];\n  const items: ReactNode[] = [];\n\n  Children.forEach(props.children, (child) => {\n    if (isValidElement(child)) {\n      if ((child.type as any)?.name === \"Tab\") {\n        items.push(child);\n        return;\n      }\n    }\n\n    if (items.length > 0) {\n      after.push(child);\n    } else {\n      before.push(child);\n    }\n  });\n\n  return (\n    <nav className='tw-tabs__header'>\n      <div className='tw-tabs__header-wrapper'>\n        <div className='tw-tabs__header-border' />\n        {before}\n        <div role='tablist'>{items}</div>\n        {after}\n      </div>\n    </nav>\n  );\n}\n\nregisterComponent(\"TabList\", TabList);\n"],"names":["TabList","props","before","after","items","Children","child","isValidElement","_a","jsxs","jsx","registerComponent"],"mappings":";;;AAIO,SAASA,EAAQC,GAA8B;AACpD,QAAMC,IAAsB,CAAC,GACvBC,IAAqB,CAAC,GACtBC,IAAqB,CAAC;AAE5B,SAAAC,EAAS,QAAQJ,EAAM,UAAU,CAACK,MAAU;;AACtC,QAAAC,EAAeD,CAAK,OACjBE,IAAAF,EAAM,SAAN,gBAAAE,EAAoB,UAAS,OAAO;AACvC,MAAAJ,EAAM,KAAKE,CAAK;AAChB;AAAA,IAAA;AAIA,IAAAF,EAAM,SAAS,IACjBD,EAAM,KAAKG,CAAK,IAEhBJ,EAAO,KAAKI,CAAK;AAAA,EACnB,CACD,qBAGE,OAAI,EAAA,WAAU,mBACb,UAAC,gBAAAG,EAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,IAAC,gBAAAC,EAAA,OAAA,EAAI,WAAU,yBAAyB,CAAA;AAAA,IACvCR;AAAA,IACA,gBAAAQ,EAAA,OAAA,EAAI,MAAK,WAAW,UAAMN,GAAA;AAAA,IAC1BD;AAAA,EAAA,EAAA,CACH,EACF,CAAA;AAEJ;AAEAQ,EAAkB,WAAWX,CAAO;"}
+{"version":3,"file":"TabList.js","sources":["../../../src/molecules/tabs/TabList.tsx"],"sourcesContent":["import { Children, isValidElement, PropsWithChildren, ReactNode } from \"react\";\n\nimport { registerComponent } from \"../../registries/components.js\";\n\nexport function TabList(props: PropsWithChildren<{}>) {\n  const before: ReactNode[] = [];\n  const after: ReactNode[] = [];\n  const items: ReactNode[] = [];\n\n  Children.forEach(props.children, (child) => {\n    if (isValidElement(child)) {\n      if ((child.type as any)?.name === \"Tab\") {\n        items.push(child);\n        return;\n      }\n    }\n\n    if (items.length > 0) {\n      after.push(child);\n    } else {\n      before.push(child);\n    }\n  });\n\n  return (\n    <nav className='tw-tabs__header'>\n      <div className='tw-tabs__header-wrapper'>\n        <div className='tw-tabs__header-border' />\n        {before}\n        <div role='tablist'>{items}</div>\n        {after}\n      </div>\n    </nav>\n  );\n}\n\nregisterComponent(\"TabList\", TabList);\n"],"names":["TabList","props","before","after","items","Children","child","isValidElement","jsxs","jsx","registerComponent"],"mappings":";;;AAIO,SAASA,EAAQC,GAA8B;AACpD,QAAMC,IAAsB,CAAA,GACtBC,IAAqB,CAAA,GACrBC,IAAqB,CAAA;AAE3B,SAAAC,EAAS,QAAQJ,EAAM,UAAU,CAACK,MAAU;AAC1C,QAAIC,EAAeD,CAAK,KACjBA,EAAM,MAAc,SAAS,OAAO;AACvC,MAAAF,EAAM,KAAKE,CAAK;AAChB;AAAA,IACF;AAGF,IAAIF,EAAM,SAAS,IACjBD,EAAM,KAAKG,CAAK,IAEhBJ,EAAO,KAAKI,CAAK;AAAA,EAErB,CAAC,qBAGE,OAAA,EAAI,WAAU,mBACb,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,yBAAA,CAAyB;AAAA,IACvCP;AAAA,IACD,gBAAAO,EAAC,OAAA,EAAI,MAAK,WAAW,UAAAL,GAAM;AAAA,IAC1BD;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAEJ;AAEAO,EAAkB,WAAWV,CAAO;"}