@thx/controls 16.0.0-alpha.0 → 16.0.0-alpha.23

package/dist/esm/inputs/Scriptel/Scriptel.js

@@ -0,0 +1,51 @@
+import debug from 'debug';
+import { useRef, useState, useEffect, useMemo } from 'react';
+import { ScriptelContext } from './ScriptelContext.js';
+import { ScriptelSocket } from './scriptel/index.js';
+
+debug("thx.controls.inputs.Scriptel");
+function Scriptel({ omniscriptUrl, imageType, scale, crop, penStyle, children }) {
+  const socket = useRef();
+  const [render, setRender] = useState();
+  const [loading, setLoading] = useState(false);
+  const [isSigning, setIsSigning] = useState(false);
+  useEffect(() => {
+    socket.current = new ScriptelSocket({
+      omniscriptUrl,
+      imageType,
+      scale,
+      crop,
+      penStyle
+    });
+    socket.current.on("render", (msg) => {
+      setRender(msg);
+      setLoading(false);
+      setRender(void 0);
+    });
+    socket.current.on("okButtonDown", () => {
+      setLoading(true);
+    });
+    socket.current.on("cancel", () => {
+      setLoading(false);
+      setRender(void 0);
+    });
+    socket.current.on("penMove", () => {
+      setIsSigning(true);
+    });
+    socket.current.on("penUp", () => {
+      setIsSigning(false);
+    });
+    return () => {
+      if (socket.current)
+        socket.current.close();
+    };
+  }, [omniscriptUrl, imageType, scale, crop, penStyle]);
+  const scriptel = useMemo(() => {
+    return { socket, renderImage: render, loading, isSigning };
+  }, [isSigning, loading, render]);
+  return /* @__PURE__ */ React.createElement(ScriptelContext.Provider, {
+    value: scriptel
+  }, children);
+}
+
+export { Scriptel };

package/dist/esm/inputs/Scriptel/ScriptelContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ScriptelContext = createContext(void 0);
+
+export { ScriptelContext };

package/dist/esm/inputs/Scriptel/scriptel/enums.js

@@ -0,0 +1,20 @@
+var ScriptelPenStyle = /* @__PURE__ */ ((ScriptelPenStyle2) => {
+  ScriptelPenStyle2["Plain"] = "PlainPenStyle";
+  ScriptelPenStyle2["Chisel"] = "ChiselPenStyle";
+  ScriptelPenStyle2["Inkwell"] = "InkwellPenStyle";
+  return ScriptelPenStyle2;
+})(ScriptelPenStyle || {});
+var ScriptelMessageClass = /* @__PURE__ */ ((ScriptelMessageClass2) => {
+  ScriptelMessageClass2["ConnectionOpen"] = "ConnectionOpen";
+  ScriptelMessageClass2["DeviceOpenRequest"] = "DeviceOpenRequest";
+  ScriptelMessageClass2["DeviceOpenResponse"] = "DeviceOpenResponse";
+  ScriptelMessageClass2["RenderedImage"] = "RenderedImage";
+  ScriptelMessageClass2["ScriptelException"] = "ScriptelException";
+  ScriptelMessageClass2["ButtonDown"] = "ButtonDown";
+  ScriptelMessageClass2["ButtonPress"] = "ButtonPress";
+  ScriptelMessageClass2["PenMove"] = "PenMove";
+  ScriptelMessageClass2["PenUp"] = "PenUp";
+  return ScriptelMessageClass2;
+})(ScriptelMessageClass || {});
+
+export { ScriptelMessageClass, ScriptelPenStyle };

package/dist/esm/inputs/Scriptel/scriptel/index.js

@@ -0,0 +1,92 @@
+import debug from 'debug';
+import EventEmitter from 'eventemitter3';
+import { ScriptelMessageClass, ScriptelPenStyle } from './enums.js';
+
+const d = debug("thx.controls.inputs.Scriptel.scriptel");
+function serverConnected(msg, socket) {
+  d("Server connected");
+  if (msg.serverInfo.devices.length > 0) {
+    const device = msg.serverInfo.devices[0];
+    socket.send(JSON.stringify({
+      _class: "DeviceOpenRequest",
+      uuid: device.uuid
+    }));
+  }
+}
+function deviceConnected(msg, socket, args) {
+  d(`Device connected: ${msg.device.uuid}`);
+  const { imageType, scale, crop, penStyle } = args;
+  socket.send(JSON.stringify({
+    _class: "RenderSettingsUpdateRequest",
+    renderSettings: {
+      _class: "RenderSettings",
+      type: imageType || "image/svg+xml",
+      scale: scale || 1,
+      crop: crop || false,
+      penStyle: penStyle ? {
+        renderFunction: penStyle
+      } : {
+        renderFunction: ScriptelPenStyle.Plain
+      }
+    }
+  }));
+}
+function render(msg, args, eventEmitter) {
+  d(`Rendered image: ${msg.type} ${msg.width}x${msg.height}`);
+  eventEmitter.emit("render", msg);
+}
+class ScriptelSocket extends EventEmitter {
+  constructor(args) {
+    super();
+    this.options = args;
+    this.socket = new WebSocket(args.omniscriptUrl || "ws://localhost:8080");
+    this.socket.onopen = () => {
+      d("Socket open");
+    };
+    this.socket.onclose = () => {
+      d("Socket closed");
+    };
+    this.socket.onmessage = (ev) => {
+      const msg = JSON.parse(ev.data);
+      if (!msg._class)
+        return;
+      switch (msg._class) {
+        case ScriptelMessageClass.ConnectionOpen:
+          serverConnected(msg, this.socket);
+          break;
+        case ScriptelMessageClass.DeviceOpenResponse:
+          deviceConnected(msg, this.socket, this.options);
+          break;
+        case ScriptelMessageClass.RenderedImage:
+          render(msg, this.options, this);
+          break;
+        case ScriptelMessageClass.ScriptelException:
+          d(`Scriptel Exception Error: ${msg.message}`);
+          break;
+        case ScriptelMessageClass.ButtonPress:
+          if (msg.label === "Cancel")
+            this.emit("cancel");
+          break;
+        case ScriptelMessageClass.ButtonDown:
+          if (msg.label === "OK")
+            this.emit("okButtonDown");
+          break;
+        case ScriptelMessageClass.PenMove:
+          this.emit("penMove");
+          break;
+        case ScriptelMessageClass.PenUp:
+          this.emit("penUp");
+          break;
+      }
+    };
+  }
+  calibrate() {
+    d("calibrate");
+    this.socket.send(JSON.stringify({ _class: "ForceRecalibrate" }));
+  }
+  close() {
+    this.socket.close();
+  }
+}
+
+export { ScriptelSocket };

package/dist/esm/inputs/Scriptel/withScriptel.js

@@ -0,0 +1,25 @@
+import { Scriptel } from './Scriptel.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+function withScriptel(WrappedComponent, scriptelProps) {
+  return function withScriptelHoC(props) {
+    return /* @__PURE__ */ React.createElement(Scriptel, __spreadValues({}, scriptelProps), /* @__PURE__ */ React.createElement(WrappedComponent, __spreadValues({}, props)));
+  };
+}
+
+export { withScriptel };

package/dist/esm/inputs/ScriptelInput/ScriptelInput.js

@@ -0,0 +1,69 @@
+import debug from 'debug';
+import { useContext, useState, useEffect } from 'react';
+import { Button, Image } from 'semantic-ui-react';
+import { ScriptelContext } from '../Scriptel/ScriptelContext.js';
+
+debug("thx.controls.inputs.ScriptelInput");
+function ScriptelInput(props) {
+  const { value, onChange, buttonText = "Enter Signature" } = props;
+  const ctx = useContext(ScriptelContext);
+  const [enterSignature, setEnterSignature] = useState(false);
+  useEffect(() => {
+    if (enterSignature) {
+      if (onChange && (ctx == null ? void 0 : ctx.renderImage)) {
+        setEnterSignature(false);
+        if (ctx.renderImage.type === "image/svg+xml" || ctx.renderImage.type === "image/png") {
+          onChange({
+            type: ctx.renderImage.type,
+            width: ctx.renderImage.width,
+            height: ctx.renderImage.height,
+            timestamp: new Date(),
+            data: ctx.renderImage.data
+          });
+        }
+      }
+      if (onChange && !ctx) {
+        onChange();
+      }
+    }
+  }, [ctx]);
+  if (enterSignature) {
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, (ctx == null ? void 0 : ctx.isSigning) ? "signing..." : "Enter a signature and click OK."), /* @__PURE__ */ React.createElement(Button, {
+      onClick: () => {
+        setEnterSignature(false);
+      },
+      color: "black",
+      loading: ctx == null ? void 0 : ctx.loading,
+      disabled: ctx == null ? void 0 : ctx.loading
+    }, "Cancel"), /* @__PURE__ */ React.createElement(Button, {
+      size: "mini",
+      as: "a",
+      basic: true,
+      onClick: () => {
+        var _a;
+        return (_a = ctx == null ? void 0 : ctx.socket.current) == null ? void 0 : _a.calibrate();
+      },
+      disabled: ctx == null ? void 0 : ctx.loading
+    }, "Calibrate"));
+  }
+  if (value && value.data) {
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Image, {
+      size: "medium",
+      src: value.data,
+      bordered: true
+    }), /* @__PURE__ */ React.createElement(Button, {
+      size: "mini",
+      compact: true,
+      onClick: () => {
+        setEnterSignature(false);
+        if (onChange)
+          onChange();
+      }
+    }, "Reset"));
+  }
+  return /* @__PURE__ */ React.createElement(Button, {
+    onClick: () => setEnterSignature(true)
+  }, buttonText);
+}
+
+export { ScriptelInput };

package/dist/esm/inputs/SinInput/SinInput.js

@@ -0,0 +1,83 @@
+import debug from 'debug';
+import { useState, useCallback, useMemo } from 'react';
+import { Input, Icon } from 'semantic-ui-react';
+import SIN from 'social-insurance-number';
+import { useMaskedInput } from '../MaskedInput/useMaskedInput.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+debug("thx.controls.inputs.SinInput");
+function SinInput(props) {
+  const _a = props, { value, onChange } = _a, rest = __objRest(_a, ["value", "onChange"]);
+  const [color, setColor] = useState("black");
+  const checkValidation = useCallback((valueArray) => {
+    const num = valueArray.join("").replaceAll(/(_|\s|-)/g, "");
+    const validate = new SIN(num);
+    if (num.length > 0) {
+      if (validate.isValid()) {
+        setColor("green");
+      } else {
+        setColor("red");
+      }
+    } else {
+      setColor("black");
+    }
+    return validate.isValid();
+  }, []);
+  const mask = useMemo(() => ({
+    mask: "999-999-999",
+    isComplete: checkValidation,
+    greedy: false,
+    autoUnmask: true
+  }), [checkValidation]);
+  const cardNumberRef = useMaskedInput({
+    mask,
+    value,
+    onChange: (v) => {
+      onChange && onChange(v);
+    },
+    onSet: (v) => {
+      checkValidation([v || ""]);
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Input, __spreadProps(__spreadValues({}, rest), {
+    icon: true
+  }), /* @__PURE__ */ React.createElement("input", {
+    ref: cardNumberRef
+  }), /* @__PURE__ */ React.createElement(Icon, {
+    name: "id badge",
+    color,
+    size: "large"
+  }));
+}
+
+export { SinInput };

package/dist/esm/inputs/TableInput/DropdownCell.js

@@ -0,0 +1,54 @@
+import { Dropdown } from 'semantic-ui-react';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function DropdownCell(dropdownProps) {
+  return function DropdownCellFn(props) {
+    const {
+      value,
+      row: { index: rowIndex },
+      column: { id },
+      updateData
+    } = props;
+    const _a = dropdownProps, { value: v, onChange } = _a, rest = __objRest(_a, ["value", "onChange"]);
+    return /* @__PURE__ */ React.createElement(Dropdown, __spreadProps(__spreadValues({}, rest), {
+      value,
+      onChange: (event, val) => {
+        updateData(rowIndex, id, val.value);
+        if (onChange)
+          onChange(event, val);
+      }
+    }));
+  };
+}
+
+export { DropdownCell };

package/dist/esm/inputs/TableInput/HoverCell.js

@@ -0,0 +1,32 @@
+import debug from 'debug';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+debug("thx.controls.inputs.TableInput.HoverCell");
+function HoverCell(options) {
+  return function HoverCellFn(props) {
+    const { Action } = options;
+    if (props.hoverRow === props.row.id) {
+      return /* @__PURE__ */ React.createElement("div", {
+        style: { textAlign: "right" }
+      }, /* @__PURE__ */ React.createElement(Action, __spreadValues({}, props)));
+    }
+    return null;
+  };
+}
+
+export { HoverCell };

package/dist/esm/inputs/TableInput/MoneyCell.js

@@ -0,0 +1,11 @@
+import { formatMoney } from '@thx/money';
+
+function MoneyCell(options) {
+  return function MoneyCellFn(props) {
+    return /* @__PURE__ */ React.createElement("div", {
+      style: { textAlign: "right" }
+    }, formatMoney((options == null ? void 0 : options.overrideValue) ? options.overrideValue(props) : props.value));
+  };
+}
+
+export { MoneyCell };

package/dist/esm/inputs/TableInput/MoneyEditCell.js

@@ -0,0 +1,29 @@
+import debug from 'debug';
+import { useState } from 'react';
+import { addRowOnTab } from './addRowOnTab.js';
+import { MoneyInput } from '../../money/MoneyInput/MoneyInput.js';
+
+debug("thx.controls.inputs.TableInput.MoneyEditCell");
+function MoneyEditCell(opts) {
+  return function MoneyEditCellFn(props) {
+    const {
+      value: initialValue,
+      row: { index: rowIndex },
+      column: { id },
+      updateData
+    } = props;
+    const [value, setValue] = useState(initialValue);
+    return /* @__PURE__ */ React.createElement(MoneyInput, {
+      fluid: true,
+      transparent: true,
+      value,
+      onChange: setValue,
+      onBlur: () => {
+        updateData(rowIndex, id, value);
+      },
+      onKeyDown: (event) => addRowOnTab(event, value, props, opts == null ? void 0 : opts.addRowOnTabIf)
+    });
+  };
+}
+
+export { MoneyEditCell };

package/dist/esm/inputs/TableInput/MoneySumFooter.js

@@ -0,0 +1,13 @@
+import { toMoney, formatMoney } from '@thx/money';
+
+function MoneySumFooter(options) {
+  const { id } = options || {};
+  return function MoneySumFooterInstance(info) {
+    const sum = info.rows.reduce((memo, row) => memo.add(row.values[id]), toMoney());
+    return /* @__PURE__ */ React.createElement("div", {
+      style: { textAlign: "right" }
+    }, formatMoney(sum));
+  };
+}
+
+export { MoneySumFooter };

package/dist/esm/inputs/TableInput/StringEditCell.js

@@ -0,0 +1,52 @@
+import debug from 'debug';
+import { useState } from 'react';
+import { Input } from 'semantic-ui-react';
+import { addRowOnTab } from './addRowOnTab.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+debug("thx.controls.inputs.TableInput.StringEditCell");
+function StringEditCell(options) {
+  const { inputProps, addRowOnTabIf } = options || {};
+  return function StringEditCellFn(props) {
+    const {
+      value: initialValue,
+      row: { index },
+      column: { id },
+      updateData
+    } = props;
+    const [value, setValue] = useState(initialValue);
+    return /* @__PURE__ */ React.createElement(Input, __spreadProps(__spreadValues({
+      fluid: true,
+      transparent: true
+    }, inputProps), {
+      value,
+      onChange: (ev, v) => {
+        setValue(v.value);
+      },
+      onBlur: () => {
+        updateData(index, id, value);
+      },
+      onKeyDown: (event) => addRowOnTab(event, value, props, addRowOnTabIf)
+    }));
+  };
+}
+
+export { StringEditCell };

package/dist/esm/inputs/TableInput/TableInput.js

@@ -0,0 +1,77 @@
+import debug from 'debug';
+import { FieldArray } from 'formik';
+import { useMemo, useState } from 'react';
+import { useTable } from 'react-table';
+import { Table } from 'semantic-ui-react';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+debug("thx.controls.inputs.TableInput");
+function TableInputTable(props) {
+  const {
+    name,
+    columns,
+    values,
+    arrayHelpers,
+    setFieldValue,
+    createRow,
+    tableProps,
+    headerRowProps,
+    headerCellProps,
+    bodyProps,
+    rowProps,
+    cellProps,
+    footerCellProps,
+    footerRowProps
+  } = props;
+  const cols = useMemo(() => columns, [columns]);
+  const vals = useMemo(() => values, [values]);
+  const [hoverRow, setHoverRow] = useState("");
+  const { getTableProps, getTableBodyProps, headerGroups, prepareRow, rows, footerGroups } = useTable({
+    columns: cols,
+    data: vals,
+    updateData(rowIndex, columnId, value) {
+      setFieldValue(`${name}[${rowIndex}].${columnId}`, value);
+    },
+    addRow() {
+      arrayHelpers.push(createRow());
+    },
+    arrayHelpers
+  });
+  const hasFooter = footerGroups.some((fg) => fg.headers.some((fgh) => fgh.Footer.name !== "emptyRenderer"));
+  const footer = hasFooter ? /* @__PURE__ */ React.createElement(Table.Footer, null, footerGroups.map((group) => /* @__PURE__ */ React.createElement(Table.Row, __spreadValues({}, __spreadValues(__spreadValues({}, group.getFooterGroupProps()), group.getFooterGroupProps(footerRowProps))), group.headers.map((column) => /* @__PURE__ */ React.createElement(Table.HeaderCell, __spreadValues({}, __spreadValues(__spreadValues({}, column.getFooterProps()), column.getFooterProps(footerCellProps))), column.render("Footer")))))) : null;
+  return /* @__PURE__ */ React.createElement(Table, __spreadValues({}, __spreadValues(__spreadValues({}, getTableProps()), getTableProps(tableProps))), /* @__PURE__ */ React.createElement(Table.Header, null, headerGroups.map((headerGroup) => /* @__PURE__ */ React.createElement(Table.Row, __spreadValues({}, __spreadValues(__spreadValues({}, headerGroup.getHeaderGroupProps()), headerGroup.getHeaderGroupProps(headerRowProps))), headerGroup.headers.map((column) => /* @__PURE__ */ React.createElement(Table.HeaderCell, __spreadValues({}, __spreadValues(__spreadValues({}, column.getHeaderProps()), column.getHeaderProps(headerCellProps))), column.render("Header")))))), /* @__PURE__ */ React.createElement(Table.Body, __spreadValues({}, __spreadValues(__spreadValues({}, getTableBodyProps()), getTableBodyProps(bodyProps))), rows.map((row) => {
+    prepareRow(row);
+    return /* @__PURE__ */ React.createElement(Table.Row, __spreadProps(__spreadValues({}, __spreadValues(__spreadValues({}, row.getRowProps()), row.getRowProps(rowProps))), {
+      onMouseEnter: () => setHoverRow(row.id),
+      onMouseLeave: () => setHoverRow("")
+    }), row.cells.map((cell) => /* @__PURE__ */ React.createElement(Table.Cell, __spreadValues({}, __spreadValues(__spreadValues({}, cell.getCellProps()), cell.getCellProps(cellProps))), cell.render("Cell", { hoverRow }))));
+  })), footer);
+}
+function TableInput(props) {
+  return /* @__PURE__ */ React.createElement(FieldArray, {
+    name: props.name,
+    render: (arrayHelpers) => /* @__PURE__ */ React.createElement(TableInputTable, __spreadValues({
+      arrayHelpers
+    }, props))
+  });
+}
+
+export { TableInput };

package/dist/esm/inputs/TableInput/addRowOnTab.js

@@ -0,0 +1,12 @@
+function addRowOnTab(event, value, props, addRowOnTabIf) {
+  const {
+    row: { index: rowIndex },
+    rows: { length: rowsLength },
+    addRow
+  } = props;
+  if (event.key === "Tab" && !event.shiftKey && rowIndex + 1 === rowsLength && (addRowOnTabIf ? addRowOnTabIf(props, value) : false)) {
+    addRow();
+  }
+}
+
+export { addRowOnTab };