@nolwenture/formik-jsonschema-form 0.4.2 → 0.6.0

package/dist/styledComponents.js

@@ -1,18 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -25,140 +10,187 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from "react";
 import styled from "styled-components";
 import * as formik from "formik";
-import { ArrayFieldButtonPurpose, ObjectFieldButtonPurpose, } from "./types";
-import { useContext } from "react";
 import { FormRegistry } from "./Form";
-export var Form = styled(formik.Form)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-export var FormButtonWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-export var FormButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
-export var ObjectFieldWrapper = styled.fieldset(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
-export var ObjectFieldTitle = styled.legend(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
-export var ObjectFieldList = styled.ul(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  list-style-type: none;\n  padding: 0;\n"], ["\n  list-style-type: none;\n  padding: 0;\n"])));
-export var ObjectFieldItem = styled.li(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-export var ObjectFieldItemButtons = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  margin: 0.5rem;\n"], ["\n  display: flex;\n  margin: 0.5rem;\n"])));
-export var ObjectFieldButton = styled.a(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  cursor: pointer;\n  border: 1px solid black;\n  line-height: 1em;\n  height: 1em;\n  padding: 0 0.3em;\n"], ["\n  cursor: pointer;\n  border: 1px solid black;\n  line-height: 1em;\n  height: 1em;\n  padding: 0 0.3em;\n"])));
-export var ObjectFieldLineButton = styled(ObjectFieldButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""])));
-export var ObjectFieldUpButton = styled(ObjectFieldLineButton)(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""])));
-export var ObjectFieldDownButton = styled(ObjectFieldLineButton)(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""])));
-export var ObjectFieldRemoveButton = styled(ObjectFieldLineButton)(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
-export var ObjectFieldAddButton = styled(ObjectFieldButton)(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""])));
-export function getObjectFieldButton(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
-    var purpose = _a.purpose, onClick = _a.onClick, uiSchema = _a.uiSchema;
+import { ArrayFieldButtonPurpose, ObjectFieldButtonPurpose } from "./types";
+export const Form = styled(formik.Form) ``;
+export const FormButtonWrapper = styled.div ``;
+export const FormButton = styled.button ``;
+export const ObjectFieldWrapper = styled.fieldset ``;
+export const ObjectFieldTitle = styled.legend ``;
+export const ObjectFieldList = styled.ul `
+  list-style-type: none;
+  padding: 0;
+`;
+export const ObjectFieldItem = styled.li `
+  display: flex;
+`;
+export const ObjectFieldItemButtons = styled.div `
+  display: flex;
+  margin: 0.5rem;
+`;
+export const ObjectFieldButton = styled.a `
+  cursor: pointer;
+  border: 1px solid black;
+  line-height: 1em;
+  height: 1em;
+  padding: 0 0.3em;
+`;
+export const ObjectFieldLineButton = styled(ObjectFieldButton) ``;
+export const ObjectFieldUpButton = styled(ObjectFieldLineButton) ``;
+export const ObjectFieldDownButton = styled(ObjectFieldLineButton) ``;
+export const ObjectFieldRemoveButton = styled(ObjectFieldLineButton) ``;
+export const ObjectFieldAddButton = styled(ObjectFieldButton) ``;
+export const getObjectFieldButton = ({ purpose, onClick, uiSchema, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     switch (purpose) {
         case ObjectFieldButtonPurpose.ADD:
-            return (_jsx(ObjectFieldAddButton, __assign({}, ((_c = (_b = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _b === void 0 ? void 0 : _b.props) !== null && _c !== void 0 ? _c : {}), { onClick: onClick }, { children: (_e = (_d = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _d === void 0 ? void 0 : _d.content) !== null && _e !== void 0 ? _e : "+" })));
+            return (_jsx(ObjectFieldAddButton, Object.assign({}, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : {}), { onClick: onClick, children: (_d = (_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "+" })));
         case ObjectFieldButtonPurpose.REMOVE:
-            return (_jsx(ObjectFieldRemoveButton, __assign({}, ((_g = (_f = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _f === void 0 ? void 0 : _f.props) !== null && _g !== void 0 ? _g : {}), { onClick: onClick }, { children: (_j = (_h = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _h === void 0 ? void 0 : _h.content) !== null && _j !== void 0 ? _j : "-" })));
+            return (_jsx(ObjectFieldRemoveButton, Object.assign({}, ((_f = (_e = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _e === void 0 ? void 0 : _e.props) !== null && _f !== void 0 ? _f : {}), { onClick: onClick, children: (_h = (_g = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _g === void 0 ? void 0 : _g.content) !== null && _h !== void 0 ? _h : "-" })));
         case ObjectFieldButtonPurpose.MOVE_UP:
-            return (_jsx(ObjectFieldUpButton, __assign({}, ((_l = (_k = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _k === void 0 ? void 0 : _k.props) !== null && _l !== void 0 ? _l : {}), { onClick: onClick }, { children: (_o = (_m = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _m === void 0 ? void 0 : _m.content) !== null && _o !== void 0 ? _o : "↑" })));
+            return (_jsx(ObjectFieldUpButton, Object.assign({}, ((_k = (_j = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _j === void 0 ? void 0 : _j.props) !== null && _k !== void 0 ? _k : {}), { onClick: onClick, children: (_m = (_l = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _l === void 0 ? void 0 : _l.content) !== null && _m !== void 0 ? _m : "↑" })));
         case ObjectFieldButtonPurpose.MOVE_DOWN:
-            return (_jsx(ObjectFieldDownButton, __assign({}, ((_q = (_p = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _p === void 0 ? void 0 : _p.props) !== null && _q !== void 0 ? _q : {}), { onClick: onClick }, { children: (_s = (_r = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _r === void 0 ? void 0 : _r.content) !== null && _s !== void 0 ? _s : "↓" })));
+            return (_jsx(ObjectFieldDownButton, Object.assign({}, ((_p = (_o = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _o === void 0 ? void 0 : _o.props) !== null && _p !== void 0 ? _p : {}), { onClick: onClick, children: (_r = (_q = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _q === void 0 ? void 0 : _q.content) !== null && _r !== void 0 ? _r : "↓" })));
         default:
-            return (_jsx(ObjectFieldButton, __assign({}, ((_u = (_t = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _t === void 0 ? void 0 : _t.props) !== null && _u !== void 0 ? _u : {}), { onClick: onClick }, { children: (_w = (_v = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _v === void 0 ? void 0 : _v.content) !== null && _w !== void 0 ? _w : "" })));
+            return (_jsx(ObjectFieldButton, Object.assign({}, ((_t = (_s = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _s === void 0 ? void 0 : _s.props) !== null && _t !== void 0 ? _t : {}), { onClick: onClick, children: (_v = (_u = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _u === void 0 ? void 0 : _u.content) !== null && _v !== void 0 ? _v : "" })));
     }
-}
-export var ArrayFieldWrapper = ObjectFieldWrapper;
-export var ArrayFieldTitle = ObjectFieldTitle;
-export var ArrayFieldList = ObjectFieldList;
-export var ArrayFieldItem = ObjectFieldItem;
-export var ArrayFieldItemButtons = ObjectFieldItemButtons;
-export var ArrayFieldButton = styled(ObjectFieldButton)(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])));
-export var ArrayFieldLineButton = styled(ArrayFieldButton)(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""])));
-export var ArrayFieldUpButton = styled(ArrayFieldLineButton)(templateObject_17 || (templateObject_17 = __makeTemplateObject([""], [""])));
-export var ArrayFieldDownButton = styled(ArrayFieldLineButton)(templateObject_18 || (templateObject_18 = __makeTemplateObject([""], [""])));
-export var ArrayFieldRemoveButton = styled(ArrayFieldLineButton)(templateObject_19 || (templateObject_19 = __makeTemplateObject([""], [""])));
-export var ArrayFieldAddButton = styled(ArrayFieldButton)(templateObject_20 || (templateObject_20 = __makeTemplateObject([""], [""])));
-export function GetArrayFieldButton(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
-    var purpose = _a.purpose, onClick = _a.onClick, uiSchema = _a.uiSchema;
-    var _x = useContext(FormRegistry).components, ArrayFieldAddButton = _x.ArrayFieldAddButton, ArrayFieldRemoveButton = _x.ArrayFieldRemoveButton, ArrayFieldUpButton = _x.ArrayFieldUpButton, ArrayFieldDownButton = _x.ArrayFieldDownButton;
+};
+export const ArrayFieldWrapper = ObjectFieldWrapper;
+export const ArrayFieldTitle = ObjectFieldTitle;
+export const ArrayFieldList = ObjectFieldList;
+export const ArrayFieldItem = ObjectFieldItem;
+export const ArrayFieldItemButtons = ObjectFieldItemButtons;
+export const ArrayFieldButton = styled(ObjectFieldButton) ``;
+export const ArrayFieldLineButton = styled(ArrayFieldButton) ``;
+export const ArrayFieldUpButton = styled(ArrayFieldLineButton) ``;
+export const ArrayFieldDownButton = styled(ArrayFieldLineButton) ``;
+export const ArrayFieldRemoveButton = styled(ArrayFieldLineButton) ``;
+export const ArrayFieldAddButton = styled(ArrayFieldButton) ``;
+export const GetArrayFieldButton = ({ purpose, onClick, uiSchema, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    const { components: { ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, } = useContext(FormRegistry);
     switch (purpose) {
         case ArrayFieldButtonPurpose.ADD:
-            return (_jsx(ArrayFieldAddButton, __assign({}, ((_c = (_b = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _b === void 0 ? void 0 : _b.props) !== null && _c !== void 0 ? _c : {}), { onClick: onClick }, { children: (_e = (_d = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _d === void 0 ? void 0 : _d.content) !== null && _e !== void 0 ? _e : "+" })));
+            return (_jsx(ArrayFieldAddButton, Object.assign({}, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _a === void 0 ? void 0 : _a.props) !== null && _b !== void 0 ? _b : {}), { onClick: onClick, children: (_d = (_c = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:addButtonOptions"]) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "+" })));
         case ArrayFieldButtonPurpose.REMOVE:
-            return (_jsx(ArrayFieldRemoveButton, __assign({}, ((_g = (_f = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _f === void 0 ? void 0 : _f.props) !== null && _g !== void 0 ? _g : {}), { onClick: onClick }, { children: (_j = (_h = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _h === void 0 ? void 0 : _h.content) !== null && _j !== void 0 ? _j : "-" })));
+            return (_jsx(ArrayFieldRemoveButton, Object.assign({}, ((_f = (_e = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _e === void 0 ? void 0 : _e.props) !== null && _f !== void 0 ? _f : {}), { onClick: onClick, children: (_h = (_g = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:removeButtonOptions"]) === null || _g === void 0 ? void 0 : _g.content) !== null && _h !== void 0 ? _h : "-" })));
         case ArrayFieldButtonPurpose.MOVE_UP:
-            return (_jsx(ArrayFieldUpButton, __assign({}, ((_l = (_k = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _k === void 0 ? void 0 : _k.props) !== null && _l !== void 0 ? _l : {}), { onClick: onClick }, { children: (_o = (_m = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _m === void 0 ? void 0 : _m.content) !== null && _o !== void 0 ? _o : "↑" })));
+            return (_jsx(ArrayFieldUpButton, Object.assign({}, ((_k = (_j = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _j === void 0 ? void 0 : _j.props) !== null && _k !== void 0 ? _k : {}), { onClick: onClick, children: (_m = (_l = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:upButtonOptions"]) === null || _l === void 0 ? void 0 : _l.content) !== null && _m !== void 0 ? _m : "↑" })));
         case ArrayFieldButtonPurpose.MOVE_DOWN:
-            return (_jsx(ArrayFieldDownButton, __assign({}, ((_q = (_p = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _p === void 0 ? void 0 : _p.props) !== null && _q !== void 0 ? _q : {}), { onClick: onClick }, { children: (_s = (_r = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _r === void 0 ? void 0 : _r.content) !== null && _s !== void 0 ? _s : "↓" })));
+            return (_jsx(ArrayFieldDownButton, Object.assign({}, ((_p = (_o = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _o === void 0 ? void 0 : _o.props) !== null && _p !== void 0 ? _p : {}), { onClick: onClick, children: (_r = (_q = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:downButtonOptions"]) === null || _q === void 0 ? void 0 : _q.content) !== null && _r !== void 0 ? _r : "↓" })));
         default:
-            return (_jsx(ArrayFieldButton, __assign({}, ((_u = (_t = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _t === void 0 ? void 0 : _t.props) !== null && _u !== void 0 ? _u : {}), { onClick: onClick }, { children: (_w = (_v = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _v === void 0 ? void 0 : _v.content) !== null && _w !== void 0 ? _w : "" })));
+            return (_jsx(ArrayFieldButton, Object.assign({}, ((_t = (_s = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _s === void 0 ? void 0 : _s.props) !== null && _t !== void 0 ? _t : {}), { onClick: onClick, children: (_v = (_u = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:customButtonOptions"]) === null || _u === void 0 ? void 0 : _u.content) !== null && _v !== void 0 ? _v : "" })));
     }
-}
-export var FieldWrapper = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  margin: 0.5rem 0;\n"], ["\n  margin: 0.5rem 0;\n"])));
-export var FieldTitle = styled.label(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-weight: 700;\n"], ["\n  font-weight: 700;\n"])));
-export var FieldDescription = styled.p(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.9em;\n"], ["\n  margin: 0;\n  font-size: 0.9em;\n"])));
-export var FieldHelp = styled.p(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  margin: 0;\n  font-size: 0.9em;\n"], ["\n  margin: 0;\n  font-size: 0.9em;\n"])));
-export var InfoFieldBoxElement = styled.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  transition: opacity 0.5s;\n  position: absolute;\n  z-index: 1080;\n  opacity: 0;\n  visibility: hidden;\n  margin: 0;\n  font-size: 0.875rem;\n  word-wrap: break-word;\n  min-width: max-content;\n\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  transform: translate(\n    ", ",\n    ", "\n  );\n"], ["\n  transition: opacity 0.5s;\n  position: absolute;\n  z-index: 1080;\n  opacity: 0;\n  visibility: hidden;\n  margin: 0;\n  font-size: 0.875rem;\n  word-wrap: break-word;\n  min-width: max-content;\n\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  transform: translate(\n    ", ",\n    ", "\n  );\n"])), function (_a) {
-    var position = _a.position;
-    return position === "bottom" ? "140%" : position === "top" ? "auto" : "50%";
-}, function (_a) {
-    var position = _a.position;
-    return position === "top"
-        ? "140%"
-        : position === "right" || position === "left"
-            ? "50%"
-            : "auto";
-}, function (_a) {
-    var position = _a.position;
-    return position === "right"
-        ? "100%"
-        : position === "bottom" || position === "top"
-            ? "50%"
-            : "auto";
-}, function (_a) {
-    var position = _a.position;
-    return position === "left"
-        ? "100%"
-        : position === "bottom" || position === "top"
-            ? "50%"
-            : "auto";
-}, function (_a) {
-    var position = _a.position;
-    return position === "bottom" || position === "top" ? "-50%" : "0";
-}, function (_a) {
-    var position = _a.position;
-    return position === "right" || position === "left" ? "-50%" : "0";
-});
-export var InfoFieldBoxArrowElement = styled.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  border: solid transparent;\n  content: \"\";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n  border-top-color: ", ";\n  border-bottom-color: ", ";\n  border-right-color: ", ";\n  border-left-color: ", ";\n  border-width: 5px;\n  margin-left: -5px;\n"], ["\n  top: ", ";\n  left: ", ";\n  bottom: ", ";\n  border: solid transparent;\n  content: \"\";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n  border-top-color: ", ";\n  border-bottom-color: ", ";\n  border-right-color: ", ";\n  border-left-color: ", ";\n  border-width: 5px;\n  margin-left: -5px;\n"])), function (_a) {
-    var position = _a.position;
-    return position === "top"
-        ? "100%"
-        : position === "right" || position === "left"
-            ? "40%"
-            : "unset";
-}, function (_a) {
-    var position = _a.position;
-    return position === "top" || position === "bottom"
+};
+export const FieldWrapper = styled.div `
+  margin: 0.5rem 0;
+`;
+export const FieldTitle = styled.label `
+  font-weight: 700;
+`;
+export const FieldDescription = styled.p `
+  margin: 0;
+  font-size: 0.9em;
+`;
+export const FieldHelp = styled.p `
+  margin: 0;
+  font-size: 0.9em;
+`;
+export const InfoFieldBoxElement = styled.div `
+  transition: opacity 0.5s;
+  position: absolute;
+  z-index: 1080;
+  opacity: 0;
+  visibility: hidden;
+  margin: 0;
+  font-size: 0.875rem;
+  word-wrap: break-word;
+  min-width: max-content;
+
+  top: ${({ position }) => position === "bottom" ? "140%" : position === "top" ? "auto" : "50%"};
+  bottom: ${({ position }) => position === "top"
+    ? "140%"
+    : position === "right" || position === "left"
+        ? "50%"
+        : "auto"};
+  left: ${({ position }) => position === "right"
+    ? "100%"
+    : position === "bottom" || position === "top"
+        ? "50%"
+        : "auto"};
+  right: ${({ position }) => position === "left"
+    ? "100%"
+    : position === "bottom" || position === "top"
         ? "50%"
-        : position === "right"
-            ? "-2%"
-            : "102.5%";
-}, function (_a) {
-    var position = _a.position;
-    return (position === "bottom" ? "100%" : "unset");
-}, function (_a) {
-    var position = _a.position;
-    return position === "top" ? "grey" : "transparent";
-}, function (_a) {
-    var position = _a.position;
-    return position === "bottom" ? "grey" : "transparent";
-}, function (_a) {
-    var position = _a.position;
-    return position === "right" ? "grey" : "transparent";
-}, function (_a) {
-    var position = _a.position;
-    return position === "left" ? "grey" : "transparent";
-});
-export var InfoFieldBoxInnerElement = styled.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  padding: 0.25rem 0.5rem;\n  color: white;\n  text-align: center;\n  background: grey;\n  border: solid 1px grey;\n  border-radius: 0.25rem;\n  cursor: default;\n"], ["\n  padding: 0.25rem 0.5rem;\n  color: white;\n  text-align: center;\n  background: grey;\n  border: solid 1px grey;\n  border-radius: 0.25rem;\n  cursor: default;\n"])));
-export var InfoFieldContainerElement = styled.a(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  position: relative;\n  color: black;\n  background: none;\n  outline: none;\n  cursor: pointer;\n  border: 1px solid black;\n  border-radius: 50%;\n  line-height: 1em;\n  font-size: 0.7em;\n  padding: 0 0.44em;\n  text-decoration: unset;\n\n  &:active,\n  &:focus {\n    color: white;\n    background: black;\n    ", " {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n"], ["\n  position: relative;\n  color: black;\n  background: none;\n  outline: none;\n  cursor: pointer;\n  border: 1px solid black;\n  border-radius: 50%;\n  line-height: 1em;\n  font-size: 0.7em;\n  padding: 0 0.44em;\n  text-decoration: unset;\n\n  &:active,\n  &:focus {\n    color: white;\n    background: black;\n    ", " {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n"])), InfoFieldBoxElement);
-export var InfoFieldLabel = styled.span(templateObject_29 || (templateObject_29 = __makeTemplateObject([""], [""])));
-export var InfoFieldButton = function (_a) {
-    var label = _a.label, content = _a.content, position = _a.position, props = _a.props, className = _a.className;
-    return (_jsxs(InfoFieldContainerElement, __assign({ href: "#", onClick: function (e) { return e.preventDefault(); }, className: className }, { children: [_jsx(InfoFieldLabel, { children: label !== null && label !== void 0 ? label : "i" }), _jsxs(InfoFieldBoxElement, __assign({ position: position !== null && position !== void 0 ? position : "top", role: "tooltip" }, { children: [_jsx(InfoFieldBoxArrowElement, { position: position !== null && position !== void 0 ? position : "top" }), _jsx(InfoFieldBoxInnerElement, { children: content })] }))] })));
+        : "auto"};
+  transform: translate(
+    ${({ position }) => position === "bottom" || position === "top" ? "-50%" : "0"},
+    ${({ position }) => position === "right" || position === "left" ? "-50%" : "0"}
+  );
+`;
+export const InfoFieldBoxArrowElement = styled.div `
+  top: ${({ position }) => position === "top"
+    ? "100%"
+    : position === "right" || position === "left"
+        ? "40%"
+        : "unset"};
+  left: ${({ position }) => position === "top" || position === "bottom"
+    ? "50%"
+    : position === "right"
+        ? "-2%"
+        : "102.5%"};
+  bottom: ${({ position }) => (position === "bottom" ? "100%" : "unset")};
+  border: solid transparent;
+  content: "";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  border-top-color: ${({ position }) => position === "top" ? "grey" : "transparent"};
+  border-bottom-color: ${({ position }) => position === "bottom" ? "grey" : "transparent"};
+  border-right-color: ${({ position }) => position === "right" ? "grey" : "transparent"};
+  border-left-color: ${({ position }) => position === "left" ? "grey" : "transparent"};
+  border-width: 5px;
+  margin-left: -5px;
+`;
+export const InfoFieldBoxInnerElement = styled.div `
+  padding: 0.25rem 0.5rem;
+  color: white;
+  text-align: center;
+  background: grey;
+  border: solid 1px grey;
+  border-radius: 0.25rem;
+  cursor: default;
+`;
+export const InfoFieldContainerElement = styled.a `
+  position: relative;
+  color: black;
+  background: none;
+  outline: none;
+  cursor: pointer;
+  border: 1px solid black;
+  border-radius: 50%;
+  line-height: 1em;
+  font-size: 0.7em;
+  padding: 0 0.44em;
+  text-decoration: unset;
+
+  &:active,
+  &:focus {
+    color: white;
+    background: black;
+    ${InfoFieldBoxElement} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`;
+export const InfoFieldLabel = styled.span ``;
+export const InfoFieldButton = ({ label, content, position, props, className, }) => {
+    return (_jsxs(InfoFieldContainerElement, { href: "#", onClick: (e) => e.preventDefault(), className: className, children: [_jsx(InfoFieldLabel, { children: label !== null && label !== void 0 ? label : "i" }), _jsxs(InfoFieldBoxElement, { position: position !== null && position !== void 0 ? position : "top", role: "tooltip", children: [_jsx(InfoFieldBoxArrowElement, { position: position !== null && position !== void 0 ? position : "top" }), _jsx(InfoFieldBoxInnerElement, { children: content })] })] }));
 };
 InfoFieldButton.styles = {
     InfoFieldContainerElementStyle: InfoFieldContainerElement,
@@ -167,14 +199,186 @@ InfoFieldButton.styles = {
     InfoFieldBoxArrowElementStyle: InfoFieldBoxArrowElement,
     InfoFieldLabelStyle: InfoFieldLabel,
 };
-export var ErrorMessage = styled(formik.ErrorMessage)(templateObject_30 || (templateObject_30 = __makeTemplateObject([""], [""])));
+// <--- InfoFieldButton
+export const ErrorMessage = styled(formik.ErrorMessage) ``;
 /*
  * Works like Formik field, but "as" props needs to be given with "formikAs", since styled components uses as.
  *
  */
-export var FieldInput = styled(function (_a) {
-    var formikAs = _a.formikAs, props = __rest(_a, ["formikAs"]);
-    return _jsx(formik.Field, __assign({}, props, { as: formikAs }));
-})(templateObject_31 || (templateObject_31 = __makeTemplateObject([""], [""])));
-export var RequiredIndicator = styled.span(templateObject_32 || (templateObject_32 = __makeTemplateObject([""], [""])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
+export const FieldInput = styled((_a) => {
+    var { formikAs } = _a, props = __rest(_a, ["formikAs"]);
+    return _jsx(formik.Field, Object.assign({}, props, { as: formikAs }));
+}) ``;
+export const RequiredIndicator = styled.span ``;
+// ToggleSwitchField --->
+export const Toggle = styled.span `
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 34px;
+
+  &:before {
+    position: absolute;
+    content: "";
+    height: 0.9em;
+    width: 0.9em;
+    background: white;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 50%;
+    top: 0.13em;
+    left: 0.13em;
+  }
+`;
+export const ToggleLabel = styled.label `
+  position: relative;
+  display: inline-block;
+  width: 2em;
+`;
+export const ToggleFieldInput = styled(FieldInput) `
+  opacity: 0;
+  width: 0;
+  height: 0;
+
+  &:checked + ${Toggle} {
+    background: #2196f3;
+  }
+
+  &:focus + ${Toggle} {
+    box-shadow: 0 0 1px #2196f3;
+  }
+
+  &:checked + ${Toggle}:before {
+    transform: translateX(0.85em);
+  }
+`;
+export const ToggleSwitchField = ({ inputProps, name, className, }) => {
+    return (_jsxs(ToggleLabel, { className: className, children: [_jsx(ToggleFieldInput, Object.assign({}, inputProps, { name: name, type: "checkbox" })), _jsx(Toggle, {})] }));
+};
+ToggleSwitchField.styles = {
+    ToggleLabelStyle: ToggleLabel,
+    ToggleFieldInputStyle: ToggleFieldInput,
+    ToggleStyle: Toggle,
+};
+// <--- ToggleSwitchField
+// RadioButtonField --->
+export const RadioButtonFieldContainer = styled.div `
+  display: flex;
+  gap: 1em;
+`;
+export const RadioButtonFieldElement = styled.label `
+  display: inline-flex;
+  align-items: center;
+`;
+export const RadioButtonFieldInput = styled(FieldInput) `
+  margin: unset;
+  margin-top: 0.15em;
+`;
+export const ButtonLabel = styled.span `
+  margin-left: 0.2em;
+`;
+export const ButtonLabelTrue = styled(ButtonLabel) ``;
+export const ButtonLabelFalse = styled(ButtonLabel) ``;
+export const RadioButtonField = ({ label, inputProps, name, className, }) => {
+    var _a, _b;
+    return (_jsxs(RadioButtonFieldContainer, { className: className, children: [_jsxs(RadioButtonFieldElement, { children: [_jsx(RadioButtonFieldInput, Object.assign({}, inputProps, { name: name, type: "radio", value: "true" })), _jsx(ButtonLabelTrue, { children: (_a = label === null || label === void 0 ? void 0 : label.true) !== null && _a !== void 0 ? _a : "true" })] }), _jsxs(RadioButtonFieldElement, { children: [_jsx(RadioButtonFieldInput, Object.assign({}, inputProps, { name: name, type: "radio", value: "false" })), _jsx(ButtonLabelFalse, { children: (_b = label === null || label === void 0 ? void 0 : label.false) !== null && _b !== void 0 ? _b : "false" })] })] }));
+};
+RadioButtonField.styles = {
+    RadioButtonFieldContainerStyle: RadioButtonFieldContainer,
+    RadioButtonFieldElementStyle: RadioButtonFieldElement,
+    RadioButtonFieldInputStyle: RadioButtonFieldInput,
+    ButtonLabelStyle: ButtonLabel,
+    ButtonLabelTrueStyle: ButtonLabelTrue,
+    ButtonLabelFalseStyle: ButtonLabelFalse,
+};
+// ---> SearchableMultiTagSelectField
+export const MultiSelectContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+export const MultiSelectInput = styled(FieldInput) ``;
+export const MultiSelectBadgeContainer = styled.div `
+  margin: 0.3em 0;
+  display: inline-flex;
+  gap: 1em;
+`;
+export const MultiSelectBadge = styled.span `
+  background: lightgray;
+  padding: 0 0.2em 0 0.5em;
+  border-radius: 0.1em;
+  display: flex;
+`;
+export const MultiSelectBadgeCloseElement = styled.span `
+  cursor: pointer;
+  margin-left: 0.5em;
+  font-size: 0.7em;
+  align-self: baseline;
+  font-family: sans-serif;
+`;
+export const MultiSelectOptionList = styled.ul `
+  padding: unset;
+  margin: unset;
+  border: 1px solid gray;
+  border-radius: 0.2em;
+  position: absolute;
+  background: white;
+  margin: 1.3em 0;
+`;
+export const MultiSelectOptionListItem = styled.li `
+  cursor: pointer;
+  list-style-type: none;
+  padding: 0.06em 0.2em;
+  height: 1.2em;
+  &:hover {
+    background: lightgray;
+  }
+`;
+export const MultiSelectOptionListWithoutItem = styled.li `
+  cursor: default;
+  color: gray;
+  list-style-type: none;
+  padding: 0.06em 0.2em;
+  height: 1.2em;
+`;
+export const SearchableMultiTagSelectField = ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }) => {
+    const [search, setSearch] = useState("");
+    const searchIncludedInEnum = () => {
+        const hasValue = enums === null || enums === void 0 ? void 0 : enums.values.map((value) => value.title.toLowerCase().includes(search.toLowerCase()));
+        return hasValue === null || hasValue === void 0 ? void 0 : hasValue.includes(true);
+    };
+    return (_jsx(formik.Field, { className: className, name: name, multiple: true, children: ({ field, form: { setValues }, meta, }) => {
+            var _a;
+            return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ type: "hidden" }, field)), _jsx(MultiSelectInput, { className: className, type: "text", onChange: (e) => {
+                            setSearch(e.currentTarget.value);
+                        }, placeholder: placeholder, value: search }), _jsx(MultiSelectBadgeContainer, { children: ((_a = field.value) !== null && _a !== void 0 ? _a : []).map((value) => {
+                            var _a;
+                            return (_jsxs(MultiSelectBadge, { children: [(_a = enums === null || enums === void 0 ? void 0 : enums.values.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title, _jsx(MultiSelectBadgeCloseElement, { onClick: () => setValues({
+                                            [name]: field.value.filter((v) => v !== value),
+                                        }), children: closeElement !== null && closeElement !== void 0 ? closeElement : "x" })] }, value));
+                        }) }), search.length > 0 && (_jsx(MultiSelectOptionList, { children: searchIncludedInEnum() ? (enums === null || enums === void 0 ? void 0 : enums.values.filter((item) => { var _a; return !((_a = field.value) !== null && _a !== void 0 ? _a : []).includes(item.const); }).filter((value) => value.title.toLowerCase().includes(search.toLowerCase())).map((option, index) => (_jsx(MultiSelectOptionListItem, { value: option.const, onClick: () => {
+                                var _a;
+                                setValues({
+                                    [name]: [
+                                        ...new Set([...((_a = field.value) !== null && _a !== void 0 ? _a : []), option.const]),
+                                    ],
+                                });
+                                setSearch("");
+                            }, children: option.title }, index)))) : (_jsx(MultiSelectOptionListWithoutItem, { children: emptySearchMessage !== null && emptySearchMessage !== void 0 ? emptySearchMessage : "No match found" })) })), meta.touched && meta.error && (_jsx("div", { className: "error", children: meta.error }))] }));
+        } }));
+};
+SearchableMultiTagSelectField.styles = {
+    MultiSelectContainerStyle: MultiSelectContainer,
+    MultiSelectInputStyle: MultiSelectInput,
+    MultiSelectBadgeContainerStyle: MultiSelectBadgeContainer,
+    MultiSelectBadgeStyle: MultiSelectBadge,
+    MultiSelectBadgeCloseElementStyle: MultiSelectBadgeCloseElement,
+    MultiSelectOptionListStyle: MultiSelectOptionList,
+    MultiSelectOptionListItemStyle: MultiSelectOptionListItem,
+    MultiSelectOptionListWithoutItemStyle: MultiSelectOptionListWithoutItem,
+};

package/dist/templates/ArrayFieldTemplate.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { ArrayFieldTemplateProps } from "../types";
-export declare function ArrayFieldTemplate(props: ArrayFieldTemplateProps): JSX.Element;
+import type { ArrayFieldTemplateProps } from "../types";
+import React from "react";
+export declare const ArrayFieldTemplate: React.FC<ArrayFieldTemplateProps>;

package/dist/templates/ArrayFieldTemplate.js

@@ -1,28 +1,16 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { FormRegistry } from "../Form";
-import { useExtractUiSchema, getDescription, getTitle } from "../utils";
+import { getDescription, getTitle } from "../utils";
+import { useExtractUiSchema } from "../hooks";
 import { RequiredIndicator } from "../styledComponents";
-export function ArrayFieldTemplate(props) {
-    var _a = useContext(FormRegistry).components, ArrayFieldWrapper = _a.ArrayFieldWrapper, ArrayFieldTitle = _a.ArrayFieldTitle, FieldDescription = _a.FieldDescription, ErrorMessage = _a.ErrorMessage, FieldHelp = _a.FieldHelp, InfoFieldButton = _a.InfoFieldButton;
-    var name = props.name, uiSchema = props.uiSchema, children = props.children;
-    var title = getTitle(props);
-    var description = getDescription(props);
-    var _b = useExtractUiSchema(uiSchema), help = _b.help, info = _b.info, 
-    //TODO: This is not right
-    _c = _b.props, 
+export const ArrayFieldTemplate = (props) => {
+    const { components: { ArrayFieldWrapper, ArrayFieldTitle, FieldDescription, ErrorMessage, FieldHelp, InfoFieldButton, }, } = useContext(FormRegistry);
+    const { name, uiSchema, children } = props;
+    const title = getTitle(props);
+    const description = getDescription(props);
+    const { help, info, 
     //TODO: This is not right
-    _d = _c === void 0 ? {} : _c, wrappertProps = _d.wrapper, titleProps = _d.title, descriptionProps = _d.description, helpProps = _d.help, errorProps = _d.error;
-    return (_jsxs(ArrayFieldWrapper, __assign({}, wrappertProps, { children: [title && (_jsxs(ArrayFieldTitle, __assign({}, titleProps, { htmlFor: name }, { children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, __assign({}, info)), description && (_jsx(FieldDescription, __assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, __assign({}, helpProps, { children: help })), _jsx(ErrorMessage, __assign({}, errorProps, { name: name }))] })));
-}
+    props: { wrapper: wrappertProps, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useExtractUiSchema(uiSchema);
+    return (_jsxs(ArrayFieldWrapper, Object.assign({}, wrappertProps, { children: [title && (_jsxs(ArrayFieldTitle, Object.assign({}, titleProps, { htmlFor: name, children: [title, (props === null || props === void 0 ? void 0 : props.required) && _jsx(RequiredIndicator, { children: "*" })] }))), info && _jsx(InfoFieldButton, Object.assign({}, info)), description && (_jsx(FieldDescription, Object.assign({}, descriptionProps, { children: description }))), children, help && _jsx(FieldHelp, Object.assign({}, helpProps, { children: help })), _jsx(ErrorMessage, Object.assign({}, errorProps, { name: name }))] })));
+};

package/dist/templates/FieldTemplate.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { FieldTemplateProps } from "../types";
-export declare function FieldTemplate(props: FieldTemplateProps): JSX.Element;
+import type { FieldTemplateProps } from "../types";
+import React from "react";
+export declare const FieldTemplate: React.FC<FieldTemplateProps>;