@nolwenture/formik-jsonschema-form 0.26.2 → 0.26.4

package/dist/cjs/styledComponents.js

@@ -0,0 +1,640 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButtonField = exports.ButtonLabelFalse = exports.ButtonLabelTrue = exports.ButtonLabel = exports.RadioButtonFieldInput = exports.RadioButtonFieldElement = exports.RadioButtonFieldContainer = exports.ToggleSwitchField = exports.ToggleFieldInput = exports.ToggleLabel = exports.Toggle = exports.RequiredIndicator = exports.FieldInput = exports.ErrorMessage = exports.InfoFieldButton = exports.InfoFieldLabel = exports.InfoFieldContainerElement = exports.InfoFieldBoxInnerElement = exports.InfoFieldBoxArrowElement = exports.InfoFieldBoxElement = exports.FieldHelp = exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = exports.ArrayFieldAddButton = exports.ArrayFieldRemoveButton = exports.ArrayFieldDownButton = exports.ArrayFieldUpButton = exports.ArrayFieldLineButton = exports.ArrayFieldButton = exports.ArrayFieldItemButtons = exports.ArrayFieldItem = exports.ArrayFieldList = exports.ArrayFieldTitle = exports.ArrayFieldWrapper = exports.getObjectFieldButton = exports.ObjectFieldAddButton = exports.ObjectFieldRemoveButton = exports.ObjectFieldDownButton = exports.ObjectFieldUpButton = exports.ObjectFieldLineButton = exports.ObjectFieldButton = exports.ObjectFieldItemButtons = exports.ObjectFieldItem = exports.ObjectFieldList = exports.ObjectFieldTitle = exports.ObjectFieldWrapper = exports.FormButton = exports.FormButtonWrapper = exports.Form = void 0;
+exports.FileUploadField = exports.FileUploadFieldContainer = exports.FileInfoText = exports.RemoveButton = exports.FileItemContainer = exports.ProgressText = exports.ProgressBar = exports.ProgressBarContainer = exports.HiddenFileInput = exports.FileUploadButton = exports.MultipleChoiceFieldPdf = exports.BooleanFieldPdf = exports.EJSField = exports.TextAreaPdf = exports.StringFieldPdf = exports.SearchInputContainer = exports.SearchClearButton = exports.SearchInput = exports.SearchNotFound = exports.SearchListExpand = exports.SearchListOption = exports.SearchDropdownContainer = exports.SearchableSelectContainer = exports.CollapsibleObjectFieldTitle = exports.CollapsibleObjectFieldWrapper = exports.CollapsibleChildWrapper = exports.Icon = exports.CollapsibleToggle = exports.Clickable = exports.BooleanFieldWrapper = exports.TextAreaInputField = exports.TextAreaFieldInput = exports.SearchableMultiTagSelectField = exports.MultiSelectOptionListWithoutItem = exports.MultiSelectOptionListItem = exports.MultiSelectOptionList = exports.MultiSelectBadgeCloseElement = exports.MultiSelectBadge = exports.MultiSelectBadgeContainer = exports.MultiSelectInput = exports.MultiSelectSearchContainer = exports.MultiSelectContainer = exports.MultipleChoiceField = exports.MultipleChoiceFieldLabel = exports.MultipleChoiceFieldInput = exports.MultipleChoiceFieldElement = exports.MultipleChoiceFieldContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const formik = __importStar(require("formik"));
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const types_1 = require("./types");
+const getStyle_1 = require("./utils/getStyle");
+exports.Form = (0, styled_components_1.default)(formik.Form) ``;
+exports.FormButtonWrapper = styled_components_1.default.div ``;
+exports.FormButton = styled_components_1.default.button ``;
+exports.ObjectFieldWrapper = styled_components_1.default.fieldset ``;
+exports.ObjectFieldTitle = styled_components_1.default.legend ``;
+exports.ObjectFieldList = styled_components_1.default.ul `
+  list-style-type: none;
+  padding: 0;
+`;
+exports.ObjectFieldItem = styled_components_1.default.li `
+  display: flex;
+`;
+exports.ObjectFieldItemButtons = styled_components_1.default.div `
+  display: flex;
+  margin: 0.5rem;
+`;
+exports.ObjectFieldButton = styled_components_1.default.a `
+  cursor: pointer;
+  border: 1px solid black;
+  line-height: 1em;
+  height: 1em;
+  padding: 0 0.3em;
+`;
+exports.ObjectFieldLineButton = (0, styled_components_1.default)(exports.ObjectFieldButton) ``;
+exports.ObjectFieldUpButton = (0, styled_components_1.default)(exports.ObjectFieldLineButton) ``;
+exports.ObjectFieldDownButton = (0, styled_components_1.default)(exports.ObjectFieldLineButton) ``;
+exports.ObjectFieldRemoveButton = (0, styled_components_1.default)(exports.ObjectFieldLineButton) ``;
+exports.ObjectFieldAddButton = (0, styled_components_1.default)(exports.ObjectFieldButton) ``;
+const getObjectFieldButton = ({ purpose, onClick, uiSchema, }) => {
+    switch (purpose) {
+        case types_1.ObjectFieldButtonPurpose.ADD:
+            return ((0, jsx_runtime_1.jsx)(exports.ObjectFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }));
+        case types_1.ObjectFieldButtonPurpose.REMOVE:
+            return ((0, jsx_runtime_1.jsx)(exports.ObjectFieldRemoveButton, { ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }));
+        case types_1.ObjectFieldButtonPurpose.MOVE_UP:
+            return ((0, jsx_runtime_1.jsx)(exports.ObjectFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" }));
+        case types_1.ObjectFieldButtonPurpose.MOVE_DOWN:
+            return ((0, jsx_runtime_1.jsx)(exports.ObjectFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }));
+        default:
+            return ((0, jsx_runtime_1.jsx)(exports.ObjectFieldButton, { ...(uiSchema?.["ui:customButtonOptions"]?.props ?? {}), onClick: onClick, children: uiSchema?.["ui:customButtonOptions"]?.content ?? "" }));
+    }
+};
+exports.getObjectFieldButton = getObjectFieldButton;
+exports.ArrayFieldWrapper = exports.ObjectFieldWrapper;
+exports.ArrayFieldTitle = exports.ObjectFieldTitle;
+exports.ArrayFieldList = exports.ObjectFieldList;
+exports.ArrayFieldItem = exports.ObjectFieldItem;
+exports.ArrayFieldItemButtons = exports.ObjectFieldItemButtons;
+exports.ArrayFieldButton = (0, styled_components_1.default)(exports.ObjectFieldButton) ``;
+exports.ArrayFieldLineButton = (0, styled_components_1.default)(exports.ArrayFieldButton) ``;
+exports.ArrayFieldUpButton = (0, styled_components_1.default)(exports.ArrayFieldLineButton) ``;
+exports.ArrayFieldDownButton = (0, styled_components_1.default)(exports.ArrayFieldLineButton) ``;
+exports.ArrayFieldRemoveButton = (0, styled_components_1.default)(exports.ArrayFieldLineButton) ``;
+exports.ArrayFieldAddButton = (0, styled_components_1.default)(exports.ArrayFieldButton) ``;
+exports.FieldWrapper = styled_components_1.default.div `
+  margin: 0.5rem 0;
+`;
+exports.FieldTitle = styled_components_1.default.label `
+  font-weight: 700;
+`;
+exports.FieldDescription = styled_components_1.default.p `
+  margin: 0;
+  font-size: 0.9em;
+`;
+exports.FieldHelp = styled_components_1.default.p `
+  margin: 0;
+  font-size: 0.9em;
+`;
+exports.InfoFieldBoxElement = styled_components_1.default.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%"
+        : "auto"};
+  transform: translate(
+    ${({ position }) => position === "bottom" || position === "top" ? "-50%" : "0"},
+    ${({ position }) => position === "right" || position === "left" ? "-50%" : "0"}
+  );
+`;
+exports.InfoFieldBoxArrowElement = styled_components_1.default.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;
+`;
+exports.InfoFieldBoxInnerElement = styled_components_1.default.div `
+  padding: 0.25rem 0.5rem;
+  color: white;
+  text-align: center;
+  background: grey;
+  border: solid 1px grey;
+  border-radius: 0.25rem;
+  cursor: default;
+`;
+exports.InfoFieldContainerElement = styled_components_1.default.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;
+    ${exports.InfoFieldBoxElement} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`;
+exports.InfoFieldLabel = styled_components_1.default.span ``;
+const InfoFieldButton = ({ label, content, position, props, className, }) => {
+    return ((0, jsx_runtime_1.jsxs)(exports.InfoFieldContainerElement, { href: "#", onClick: (e) => e.preventDefault(), className: className, children: [(0, jsx_runtime_1.jsx)(exports.InfoFieldLabel, { children: label ?? "i" }), (0, jsx_runtime_1.jsxs)(exports.InfoFieldBoxElement, { position: position ?? "top", role: "tooltip", children: [(0, jsx_runtime_1.jsx)(exports.InfoFieldBoxArrowElement, { position: position ?? "top" }), (0, jsx_runtime_1.jsx)(exports.InfoFieldBoxInnerElement, { children: content })] })] }));
+};
+exports.InfoFieldButton = InfoFieldButton;
+exports.InfoFieldButton.styles = {
+    InfoFieldContainerElementStyle: exports.InfoFieldContainerElement,
+    InfoFieldBoxElementStyle: exports.InfoFieldBoxElement,
+    InfoFieldBoxInnerElementStyle: exports.InfoFieldBoxInnerElement,
+    InfoFieldBoxArrowElementStyle: exports.InfoFieldBoxArrowElement,
+    InfoFieldLabelStyle: exports.InfoFieldLabel,
+};
+// <--- InfoFieldButton
+exports.ErrorMessage = (0, styled_components_1.default)(formik.ErrorMessage) ``;
+/*
+ * Works like Formik field, but "as" props needs to be given with "formikAs", since styled components uses as.
+ *
+ */
+exports.FieldInput = (0, styled_components_1.default)(({ formikAs, ...props }) => {
+    return (0, jsx_runtime_1.jsx)(formik.Field, { ...props, as: formikAs });
+}) ``;
+exports.RequiredIndicator = styled_components_1.default.span ``;
+// ToggleSwitchField --->
+exports.Toggle = styled_components_1.default.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;
+  }
+`;
+exports.ToggleLabel = styled_components_1.default.label `
+  position: relative;
+  display: inline-block;
+  width: 2em;
+`;
+exports.ToggleFieldInput = (0, styled_components_1.default)(exports.FieldInput) `
+  opacity: 0;
+  width: 0;
+  height: 0;
+
+  &:checked + ${exports.Toggle} {
+    background: #2196f3;
+  }
+
+  &:focus + ${exports.Toggle} {
+    box-shadow: 0 0 1px #2196f3;
+  }
+
+  &:checked + ${exports.Toggle}:before {
+    transform: translateX(0.85em);
+  }
+`;
+const ToggleSwitchField = ({ inputProps, name, className, }) => {
+    return ((0, jsx_runtime_1.jsxs)(exports.ToggleLabel, { className: className, children: [(0, jsx_runtime_1.jsx)(exports.ToggleFieldInput, { ...inputProps, name: name, type: "checkbox" }), (0, jsx_runtime_1.jsx)(exports.Toggle, {})] }));
+};
+exports.ToggleSwitchField = ToggleSwitchField;
+exports.ToggleSwitchField.styles = {
+    ToggleLabelStyle: exports.ToggleLabel,
+    ToggleFieldInputStyle: exports.ToggleFieldInput,
+    ToggleStyle: exports.Toggle,
+};
+// <--- ToggleSwitchField
+// RadioButtonField --->
+exports.RadioButtonFieldContainer = styled_components_1.default.div `
+  display: flex;
+  gap: 1em;
+`;
+exports.RadioButtonFieldElement = styled_components_1.default.label `
+  display: inline-flex;
+  align-items: center;
+`;
+exports.RadioButtonFieldInput = (0, styled_components_1.default)(exports.FieldInput) `
+  margin: unset;
+  margin-top: 0.15em;
+`;
+exports.ButtonLabel = styled_components_1.default.span `
+  margin-left: 0.2em;
+`;
+exports.ButtonLabelTrue = (0, styled_components_1.default)(exports.ButtonLabel) ``;
+exports.ButtonLabelFalse = (0, styled_components_1.default)(exports.ButtonLabel) ``;
+const RadioButtonField = ({ label, inputProps, name, className, }) => {
+    return ((0, jsx_runtime_1.jsxs)(exports.RadioButtonFieldContainer, { className: className, children: [(0, jsx_runtime_1.jsxs)(exports.RadioButtonFieldElement, { children: [(0, jsx_runtime_1.jsx)(exports.RadioButtonFieldInput, { ...inputProps, name: name, type: "radio", value: "true" }), (0, jsx_runtime_1.jsx)(exports.ButtonLabelTrue, { children: label?.true ?? "true" })] }), (0, jsx_runtime_1.jsxs)(exports.RadioButtonFieldElement, { children: [(0, jsx_runtime_1.jsx)(exports.RadioButtonFieldInput, { ...inputProps, name: name, type: "radio", value: "false" }), (0, jsx_runtime_1.jsx)(exports.ButtonLabelFalse, { children: label?.false ?? "false" })] })] }));
+};
+exports.RadioButtonField = RadioButtonField;
+exports.RadioButtonField.styles = {
+    RadioButtonFieldContainerStyle: exports.RadioButtonFieldContainer,
+    RadioButtonFieldElementStyle: exports.RadioButtonFieldElement,
+    RadioButtonFieldInputStyle: exports.RadioButtonFieldInput,
+    ButtonLabelStyle: exports.ButtonLabel,
+    ButtonLabelTrueStyle: exports.ButtonLabelTrue,
+    ButtonLabelFalseStyle: exports.ButtonLabelFalse,
+};
+exports.MultipleChoiceFieldContainer = (0, styled_components_1.default)(exports.RadioButtonFieldContainer) ``;
+exports.MultipleChoiceFieldElement = (0, styled_components_1.default)(exports.RadioButtonFieldElement) ``;
+exports.MultipleChoiceFieldInput = (0, styled_components_1.default)(exports.RadioButtonFieldInput) ``;
+exports.MultipleChoiceFieldLabel = (0, styled_components_1.default)(exports.ButtonLabel) ``;
+const MultipleChoiceField = ({ inputProps, name, className, enums, style, value, form, }) => {
+    const isMultiSelect = enums.type === "multiSelect";
+    const currentValue = isMultiSelect
+        ? Array.isArray(value)
+            ? value
+            : []
+        : value;
+    const isChecked = (optionValue) => {
+        if (isMultiSelect && Array.isArray(currentValue)) {
+            return currentValue.includes(optionValue);
+        }
+        return currentValue === optionValue;
+    };
+    const handleChange = (optionValue) => {
+        if (isMultiSelect && Array.isArray(currentValue)) {
+            const newValue = isChecked(optionValue)
+                ? currentValue.filter((v) => v !== optionValue)
+                : [...currentValue, optionValue];
+            form?.setFieldValue(name, newValue);
+        }
+        else {
+            form?.setFieldValue(name, optionValue);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(exports.MultipleChoiceFieldContainer, { className: className, style: (0, getStyle_1.getStyle)(style ?? ""), children: enums.values.map((v) => {
+            const optionValue = v.const;
+            return ((0, jsx_runtime_1.jsxs)(exports.MultipleChoiceFieldElement, { "data-fjsf-enum-value": optionValue, children: [(0, jsx_runtime_1.jsx)(exports.MultipleChoiceFieldInput, { ...inputProps, name: name, type: isMultiSelect ? "checkbox" : "radio", value: optionValue !== undefined ? optionValue.toString() : "", checked: isChecked(optionValue), onChange: () => handleChange(optionValue) }), (0, jsx_runtime_1.jsx)(exports.MultipleChoiceFieldLabel, { children: v.title })] }, optionValue !== undefined ? optionValue.toString() : "undefined"));
+        }) }));
+};
+exports.MultipleChoiceField = MultipleChoiceField;
+exports.MultipleChoiceField.styles = {
+    MultipleChoiceFieldElementStyle: exports.MultipleChoiceFieldElement,
+    MultipleChoiceFieldInputStyle: exports.MultipleChoiceFieldInput,
+    MultipleChoiceFieldLabelStyle: exports.MultipleChoiceFieldLabel,
+};
+// ---> SearchableMultiTagSelectField
+exports.MultiSelectContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+`;
+exports.MultiSelectSearchContainer = styled_components_1.default.div `
+  display: inline-block;
+  position: relative;
+  width: fit-content;
+`;
+exports.MultiSelectInput = (0, styled_components_1.default)(exports.FieldInput) `
+  width: 100%;
+`;
+exports.MultiSelectBadgeContainer = styled_components_1.default.div `
+  margin: 0.3em 0;
+  display: inline-flex;
+  gap: 1em;
+`;
+exports.MultiSelectBadge = styled_components_1.default.span `
+  background: lightgray;
+  padding: 0 0.2em 0 0.5em;
+  border-radius: 0.1em;
+  display: flex;
+`;
+exports.MultiSelectBadgeCloseElement = styled_components_1.default.span `
+  cursor: pointer;
+  margin-left: 0.5em;
+  font-size: 0.7em;
+  align-self: baseline;
+  font-family: sans-serif;
+`;
+exports.MultiSelectOptionList = styled_components_1.default.ul `
+  width: 100%;
+  padding: unset;
+  margin: unset;
+  border: 1px solid gray;
+  border-radius: 0.2em;
+  position: absolute;
+  background: white;
+  top: 100%;
+  z-index: 1000;
+`;
+exports.MultiSelectOptionListItem = styled_components_1.default.li `
+  cursor: pointer;
+  list-style-type: none;
+  padding: 0.06em 0.2em;
+  height: 1.2em;
+  &:hover {
+    background: lightgray;
+  }
+`;
+exports.MultiSelectOptionListWithoutItem = styled_components_1.default.li `
+  cursor: default;
+  color: gray;
+  list-style-type: none;
+  padding: 0.06em 0.2em;
+  height: 1.2em;
+`;
+const SearchableMultiTagSelectField = ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }) => {
+    const [search, setSearch] = (0, react_1.useState)("");
+    const searchIncludedInEnum = () => {
+        const hasValue = enums?.values.map((value) => value.title.toLowerCase().includes(search.toLowerCase()));
+        return hasValue?.includes(true);
+    };
+    return ((0, jsx_runtime_1.jsx)(formik.Field, { className: className, name: name, multiple: true, children: ({ field, form: { setFieldValue }, meta, }) => ((0, jsx_runtime_1.jsxs)(exports.MultiSelectContainer, { className: className, children: [(0, jsx_runtime_1.jsx)(exports.FieldInput, { id: className, type: "hidden", ...field }), (0, jsx_runtime_1.jsxs)(exports.MultiSelectSearchContainer, { children: [(0, jsx_runtime_1.jsx)(exports.MultiSelectInput, { id: className + "_id", className: className, type: "text", onChange: (e) => {
+                                setSearch(e.currentTarget.value);
+                            }, placeholder: placeholder, value: search }), search.length > 0 && ((0, jsx_runtime_1.jsx)(exports.MultiSelectOptionList, { children: searchIncludedInEnum() ? (enums?.values
+                                .filter((item) => !(field.value ?? []).includes(item.const))
+                                .filter((value) => value.title.toLowerCase().includes(search.toLowerCase()))
+                                .map((option, index) => ((0, jsx_runtime_1.jsx)(exports.MultiSelectOptionListItem, { value: option.const, onClick: () => {
+                                    setFieldValue(name, [
+                                        ...new Set([...(field.value ?? []), option.const]),
+                                    ]);
+                                    setSearch("");
+                                }, children: option.title }, index)))) : ((0, jsx_runtime_1.jsx)(exports.MultiSelectOptionListWithoutItem, { children: emptySearchMessage ?? "No match found" })) }))] }), (0, jsx_runtime_1.jsx)(exports.MultiSelectBadgeContainer, { children: (field.value ?? []).map((value) => ((0, jsx_runtime_1.jsxs)(exports.MultiSelectBadge, { children: [enums?.values.find((option) => option.const === value)
+                                ?.title, (0, jsx_runtime_1.jsx)(exports.MultiSelectBadgeCloseElement, { onClick: () => setFieldValue(name, field.value.filter((v) => v !== value)), children: closeElement ?? "x" })] }, value))) }), meta.touched && meta.error && ((0, jsx_runtime_1.jsx)("div", { className: "error", children: meta.error }))] })) }));
+};
+exports.SearchableMultiTagSelectField = SearchableMultiTagSelectField;
+exports.SearchableMultiTagSelectField.styles = {
+    MultiSelectContainerStyle: exports.MultiSelectContainer,
+    MultiSelectSearchContainerStyle: exports.MultiSelectSearchContainer,
+    MultiSelectInputStyle: exports.MultiSelectInput,
+    MultiSelectBadgeContainerStyle: exports.MultiSelectBadgeContainer,
+    MultiSelectBadgeStyle: exports.MultiSelectBadge,
+    MultiSelectBadgeCloseElementStyle: exports.MultiSelectBadgeCloseElement,
+    MultiSelectOptionListStyle: exports.MultiSelectOptionList,
+    MultiSelectOptionListItemStyle: exports.MultiSelectOptionListItem,
+    MultiSelectOptionListWithoutItemStyle: exports.MultiSelectOptionListWithoutItem,
+};
+exports.TextAreaFieldInput = (0, styled_components_1.default)(exports.FieldInput) `
+  width: 100%;
+  min-height: 5rem;
+`;
+const TextAreaInputField = ({ inputProps, name, className, }) => {
+    return (0, jsx_runtime_1.jsx)(exports.TextAreaFieldInput, { ...inputProps, name: name, formikAs: "textarea" });
+};
+exports.TextAreaInputField = TextAreaInputField;
+exports.BooleanFieldWrapper = styled_components_1.default.div `
+  display: flex;
+  cursor: pointer;
+`;
+const ClickableEl = styled_components_1.default.button `
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  outline: inherit;
+  cursor: pointer;
+`;
+const Clickable = ({ children, onClick, onMouseUp = () => { }, onMouseDown = () => { }, innerRef = () => { }, className, ariaLabel, ariaExpanded = false, ariaControls, id, }) => {
+    return ((0, jsx_runtime_1.jsx)(ClickableEl, { type: "button", onClick: onClick, onMouseUp: onMouseUp, onMouseDown: onMouseDown, ref: (r) => innerRef(r), className: className, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-controls": ariaControls, id: id, children: children }));
+};
+exports.Clickable = Clickable;
+exports.CollapsibleToggle = (0, styled_components_1.default)(exports.Clickable) `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+exports.Icon = styled_components_1.default.div `
+  padding: 0 0.5rem;
+`;
+exports.CollapsibleChildWrapper = styled_components_1.default.div ``;
+exports.CollapsibleObjectFieldWrapper = exports.ObjectFieldWrapper;
+exports.CollapsibleObjectFieldTitle = exports.ObjectFieldTitle;
+exports.SearchableSelectContainer = (0, styled_components_1.default)(exports.MultiSelectSearchContainer) ``;
+exports.SearchDropdownContainer = (0, styled_components_1.default)(exports.MultiSelectOptionList) `
+  overflow-y: auto;
+  overflow-x: auto;
+  max-height: 6rem;
+  white-space: nowrap;
+`;
+exports.SearchListOption = (0, styled_components_1.default)(exports.MultiSelectOptionListItem) `
+  cursor: default;
+`;
+exports.SearchListExpand = (0, styled_components_1.default)(exports.MultiSelectOptionListItem) `
+  text-decoration: underline;
+  &:hover {
+    background: none;
+  }
+`;
+exports.SearchNotFound = (0, styled_components_1.default)(exports.MultiSelectOptionListItem) `
+  cursor: default;
+  &:hover {
+    background: none;
+  }
+`;
+exports.SearchInput = (0, styled_components_1.default)(exports.FieldInput) `
+  width: 100%;
+  padding-right: 1.5em;
+  text-overflow: ellipsis;
+`;
+exports.SearchClearButton = styled_components_1.default.span `
+  cursor: pointer;
+  position: absolute;
+  right: 0.3em;
+  bottom: 0;
+  top: 0;
+  margin: auto;
+  background-color: #ccc;
+  border-radius: 50%;
+  line-height: 1em;
+  min-width: 1em;
+  height: 1em;
+  text-align: center;
+`;
+exports.SearchInputContainer = styled_components_1.default.div `
+  display: flex;
+`;
+exports.StringFieldPdf = styled_components_1.default.div `
+  white-space: pre-line;
+`;
+exports.TextAreaPdf = styled_components_1.default.div `
+  white-space: pre-line;
+`;
+exports.EJSField = styled_components_1.default.div `
+  width: 100%;
+`;
+const BooleanFieldPdf = ({ name, className, value, label, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: value === true ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2713" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Selected" })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2716" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Not selected" })] })) }));
+};
+exports.BooleanFieldPdf = BooleanFieldPdf;
+const NotSelected = styled_components_1.default.div `
+  opacity: 0.3;
+  display: flex;
+  align-items: center;
+`;
+const Selected = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+const SelectedBox = styled_components_1.default.span `
+  color: white;
+  background: black;
+  padding: 0 0.2rem;
+  font-size: small;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+`;
+const NotSelectedCircle = styled_components_1.default.span `
+  color: white;
+  background: black;
+  padding: 0.1rem;
+  border-radius: 50%;
+  font-size: x-small;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 1rem;
+  width: 1rem;
+`;
+const MultipleChoiceFieldPdf = ({ inputProps, name, className, style, selected, notSelected, }) => {
+    return ((0, jsx_runtime_1.jsxs)(exports.MultipleChoiceFieldContainer, { className: className, style: (0, getStyle_1.getStyle)(style ?? ""), children: [!selected && !notSelected && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Nothing was selected" }), selected &&
+                selected.length > 0 &&
+                selected.map((s) => ((0, jsx_runtime_1.jsx)(exports.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(SelectedBox, { children: "\u2713" }), (0, jsx_runtime_1.jsx)(exports.MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
+                notSelected?.length > 0 &&
+                notSelected.map((n) => ((0, jsx_runtime_1.jsx)(exports.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(NotSelected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedCircle, { children: "\u2715" }), (0, jsx_runtime_1.jsx)(exports.MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }));
+};
+exports.MultipleChoiceFieldPdf = MultipleChoiceFieldPdf;
+// --> FileUploadField
+exports.FileUploadButton = styled_components_1.default.button `
+  background-color: #ccc;
+  color: black;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+`;
+exports.HiddenFileInput = styled_components_1.default.input `
+  display: none;
+`;
+exports.ProgressBarContainer = styled_components_1.default.div `
+  width: 120px;
+  height: 20px;
+  border-radius: 2px;
+  background-color: #b1b2b5;
+  position: relative;
+  margin-left: 10px;
+`;
+exports.ProgressBar = styled_components_1.default.div `
+  width: ${(props) => props.$progress}%;
+  height: 100%;
+  background-color: #548088;
+  border-radius: 2px;
+  transition: width 0.2s ease;
+`;
+exports.ProgressText = styled_components_1.default.span `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-weight: bold;
+`;
+exports.FileItemContainer = styled_components_1.default.div `
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+`;
+exports.RemoveButton = styled_components_1.default.button `
+  margin-left: 10px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+`;
+exports.FileInfoText = styled_components_1.default.span `
+  margin-left: 10px;
+  font-size: 14px;
+  color: #555;
+`;
+exports.FileUploadFieldContainer = styled_components_1.default.div ``;
+const FileUploadField = ({ name, uploadedFile, handleFileUpload, value, setFieldValue, className, uploadProgress, handleRemoveFile, removeButton, uploadButtonText, infoText, hideRemoveButton, }) => {
+    return ((0, jsx_runtime_1.jsxs)(exports.FileUploadFieldContainer, { className: className, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(exports.FileUploadButton, { type: "button", onClick: () => document.getElementById(name)?.click(), children: uploadButtonText ?? "Choose File" }), (0, jsx_runtime_1.jsx)(exports.HiddenFileInput, { id: name, name: name, type: "file", onChange: (event) => {
+                            const file = event.currentTarget.files[0];
+                            if (file) {
+                                handleFileUpload(file, setFieldValue);
+                                event.target.value = null;
+                            }
+                        } }), !value ? ((0, jsx_runtime_1.jsx)(exports.FileInfoText, { children: infoText ?? "No file chosen" })) : null] }), uploadedFile && value && ((0, jsx_runtime_1.jsx)(exports.FileItemContainer, { children: uploadProgress === 100 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: uploadedFile.name }), !hideRemoveButton && ((0, jsx_runtime_1.jsx)(exports.RemoveButton, { type: "button", onClick: () => handleRemoveFile(setFieldValue), ...removeButton?.props, style: {
+                                color: "red",
+                                fontWeight: "bold",
+                                ...(removeButton?.props?.style ?? {}),
+                            }, children: removeButton?.content ?? "X" }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: uploadedFile.name }), (0, jsx_runtime_1.jsxs)(exports.ProgressBarContainer, { children: [(0, jsx_runtime_1.jsx)(exports.ProgressBar, { "$progress": uploadProgress }), (0, jsx_runtime_1.jsxs)(exports.ProgressText, { children: [uploadProgress, "%"] })] })] })) }))] }));
+};
+exports.FileUploadField = FileUploadField;
+exports.FileUploadField.styles = {
+    FileUploadFieldFileUploadFieldContainerStyle: exports.FileUploadFieldContainer,
+    FileUploadFieldFileUploadButtonStyle: exports.FileUploadButton,
+    FileUploadFieldHiddenFileInputStyle: exports.HiddenFileInput,
+    FileUploadFieldFileInfoTextStyle: exports.FileInfoText,
+    FileUploadFieldFileItemContainerStyle: exports.FileItemContainer,
+    FileUploadFieldRemoveButtonStyle: exports.RemoveButton,
+    FileUploadFieldProgressBarContainerStyle: exports.ProgressBarContainer,
+    FileUploadFieldProgressBarStyle: exports.ProgressBar,
+    FileUploadFieldProgressTextStyle: exports.ProgressText,
+};

package/dist/cjs/templates/ArrayFieldTemplate.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrayFieldTemplate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Form_1 = require("../Form");
+const utils_1 = require("../utils");
+const hooks_1 = require("../hooks");
+const styledComponents_1 = require("../styledComponents");
+const formik_1 = require("formik");
+const ArrayFieldTemplate = (props) => {
+    const { components: { ArrayFieldWrapper, ArrayFieldTitle, FieldDescription, ErrorMessage, FieldHelp, InfoFieldButton, }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { name, uiSchema, children, ...otherProps } = props;
+    const title = (0, utils_1.getTitle)(props);
+    const description = (0, utils_1.getDescription)(props);
+    const { help, info, 
+    //TODO: This is not right
+    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const dataAttributes = Object.keys(otherProps)
+        .filter((key) => key.startsWith("data-"))
+        .reduce((acc, key) => {
+        acc[key] = otherProps[key];
+        return acc;
+    }, {});
+    const mergedWrapperProps = {
+        ...wrapperProps,
+        ...dataAttributes,
+    };
+    // These lines make sure the error message is a string, which means the error
+    // is actually for the whole Array component, not for one of the children.
+    const { errors } = (0, formik_1.useFormikContext)();
+    const error = (0, formik_1.getIn)(errors, name);
+    // In case of array of objects, it will give error message as an object value,
+    // which is incorrect value for React, causing UI to crash.
+    const errorIsString = typeof error === "string";
+    return ((0, jsx_runtime_1.jsxs)(ArrayFieldWrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(ArrayFieldTitle, { ...titleProps, htmlFor: name, children: [title, props?.required && (0, jsx_runtime_1.jsx)(styledComponents_1.RequiredIndicator, { children: "*" })] })), info && (0, jsx_runtime_1.jsx)(InfoFieldButton, { ...info }), description && ((0, jsx_runtime_1.jsx)(FieldDescription, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(FieldHelp, { ...helpProps, children: help }), errorIsString && (0, jsx_runtime_1.jsx)(ErrorMessage, { ...errorProps, name: name })] }));
+};
+exports.ArrayFieldTemplate = ArrayFieldTemplate;