@nolwenture/formik-jsonschema-form 2.0.2 → 3.0.0-beta.1

package/dist/esm/Form/fields/FilesUploadField/FilesUploadField.js

@@ -1,98 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo, useState } from "react";
-import { getIn, useFormikContext } from "formik";
-import { extractUiSchema } from "../../../utils";
-import { FilesUploadContext } from "../../../common/FilesUploadContext";
-import { useSetDefault } from "../../hooks";
-import { FormRegistry } from "../../FormRegistry";
-export const FilesUploadField = (props) => {
-    const { templates, components: { FilesUploadFieldInput }, formLocalization, } = useContext(FormRegistry);
-    useSetDefault(props);
-    const { name, uiSchema, schema } = props;
-    const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const { setFieldValue, values } = useFormikContext();
-    const value = useMemo(() => getIn(values, name) ?? [], [values, name]);
-    const readOnly = schema.readOnly ?? false;
-    const { uploadFiles, removeFile } = useContext(FilesUploadContext);
-    const [uploadedFiles, setUploadedFiles] = useState([]);
-    const [uploadProgress, setUploadProgress] = useState({});
-    useEffect(() => {
-        if (Array.isArray(value)) {
-            setUploadedFiles(() => value.map((f) => ({
-                name: f.name,
-                id: f.id,
-                progressId: f.id,
-                mimeType: f.mimeType,
-                size: f.size,
-            })));
-            value.forEach((f) => setUploadProgress((prev) => ({ ...prev, [f.id]: 100 })));
-        }
-    }, [value]);
-    if (readOnly && (!value || value.length === 0)) {
-        return null;
-    }
-    const handleFileUpload = async (files, setFieldValue) => {
-        const filesWithIds = [];
-        const newFiles = [];
-        for (const file of files) {
-            const progressId = file.name + file.size + file.lastModified + Math.random();
-            filesWithIds.push({ data: file, progressId });
-            newFiles.push({
-                name: file.name,
-                size: file.size,
-                progressId,
-                mimeType: file.type,
-                id: null,
-            });
-        }
-        setUploadedFiles((f) => f.concat(newFiles));
-        try {
-            const result = await uploadFiles({
-                files: filesWithIds,
-                onUploadProgress: (progressEvent, progressId) => {
-                    const totalLength = progressEvent.total;
-                    if (totalLength !== null && totalLength !== undefined) {
-                        const progress = Math.round((progressEvent.loaded * 100) / totalLength);
-                        setUploadProgress((prev) => ({ ...prev, [progressId]: progress }));
-                    }
-                },
-            });
-            // remove progressId values for adding to form data
-            const newFormValues = result.map(({ progressId, ...rest }) => rest);
-            // update ids for uploaded files
-            setUploadedFiles((prev) => prev.map((item) => {
-                const match = result.find((f) => f.progressId === item.progressId);
-                return match ? { ...item, id: match.id } : item;
-            }));
-            const newValue = (Array.isArray(value) ? value : []).concat(newFormValues);
-            setFieldValue(name, newValue);
-        }
-        catch (error) {
-            console.error("File upload failed", error);
-        }
-    };
-    const handleRemoveFile = async (file, setFieldValue) => {
-        if (file.id) {
-            await removeFile(file);
-            setUploadProgress((prev) => {
-                const { [file.progressId]: _, ...rest } = prev;
-                return rest;
-            });
-            setUploadedFiles((prev) => prev.filter((f) => f.id !== file.id));
-            setFieldValue(name, (value || []).filter((f) => f.id !== file.id));
-        }
-    };
-    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
-        templates[props.uiSchema?.["ui:template"]]) ??
-        templates.FieldTemplate;
-    const localization = {
-        deleteFileAriaLabel: "Delete this file",
-        infoText: "Drag and drop file(s) here",
-        orText: "or",
-        uploadButtonText: "Upload file",
-        fileInfoText: "Supported formats: PNG, JPG, PDF | Maximum size: 25MB",
-        ...(formLocalization?.fields?.FilesUploadField ?? {}),
-        ...(uiSchema["ui:localization"] ?? {}),
-    };
-    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: _jsx(FilesUploadFieldInput, { ...inputProps, readOnly: readOnly, acceptedFiletypes: inputProps?.acceptedFiletypes, deleteFileAriaLabel: localization.deleteFileAriaLabel, fileInfoText: localization.fileInfoText, handleFileUpload: handleFileUpload, handleRemoveFile: handleRemoveFile, hideFileTypeIcon: inputProps?.fileTypeIcon?.hidden, hideFileSize: inputProps?.fileSize?.hidden, hideRemoveButton: inputProps?.removeButton?.hidden, hideUploadIcon: inputProps?.uploadIcon?.hidden, infoText: localization.infoText, infoTextSingle: localization.infoTextSingle, allowMultipleFiles: inputProps?.allowMultipleFiles ?? true, name: name, orText: localization.orText, removeButton: localization.removeButton, renderFile: inputProps?.renderFile, setFieldValue: setFieldValue, uploadButtonText: localization.uploadButtonText, uploadedFiles: uploadedFiles, uploadProgress: uploadProgress, value: value }) }));
-};

package/dist/esm/Form/fields/FilesUploadField/FilesUploadFieldInput.js

@@ -1,137 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useContext, useState, useRef } from "react";
-import { FaFile, FaFilePdf, FaFileAudio, FaFileCode, FaFileCsv, FaFileExcel, FaFileImage, FaFilePowerpoint, FaFileWord, } from "react-icons/fa";
-import { FormRegistry } from "../../FormRegistry";
-const mimeTypeToIcon = {
-    pdf: FaFilePdf,
-    audio: FaFileAudio,
-    image: FaFileImage,
-    csv: FaFileCsv,
-    "wordprocessingml.document": FaFileWord,
-    msword: FaFileWord,
-    "vnd.ms-excel": FaFileExcel,
-    "vnd.openxmlformats-officedocument.spreadsheetml.sheet": FaFileExcel,
-    "vnd.ms-powerpoint": FaFilePowerpoint,
-    "vnd.openxmlformats-officedocument.presentationml.presentation": FaFilePowerpoint,
-    javascript: FaFileCode,
-    html: FaFileCode,
-    css: FaFileCode,
-};
-const getFileIcon = (mimeType) => {
-    for (const key in mimeTypeToIcon) {
-        if (mimeType.includes(key)) {
-            const IconComponent = mimeTypeToIcon[key];
-            return _jsx(IconComponent, {});
-        }
-    }
-    return _jsx(FaFile, {});
-};
-export const FilesUploadFieldInput = ({ acceptedFiletypes, className, deleteFileAriaLabel, fileInfoText, handleFileUpload, handleRemoveFile, hideFileSize, hideFileTypeIcon, hideRemoveButton, hideUploadIcon, infoText, infoTextSingle, allowMultipleFiles, name, orText, readOnly, removeButton, renderFile, setFieldValue, uploadButtonText, uploadedFiles, uploadProgress, value, }) => {
-    const { components: { Divider, DividerText, DragOverlay, FileInfoText, FileInfoTextMinimized, FileItemContainer, FileSize, FileTypeIcon, FileUploadButton, FileUploadFieldContainer, FileUploadText, HiddenFileInput, InfoText, ProgressBar, ProgressBarContainer, RemoveButton, RemoveButtonIcon, UploadedFileInfoContainer, UploadedFileItemContainer, UploadedFileName, UploadedFileWrapper, UploadIcon, UploadingFileName, }, } = useContext(FormRegistry);
-    const [isDragging, setIsDragging] = useState(false);
-    const dragCounter = useRef(0);
-    const handleDragEnter = (e) => {
-        if (readOnly)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        dragCounter.current++;
-        if (e.dataTransfer?.items && e.dataTransfer.items.length > 0) {
-            setIsDragging(true);
-        }
-    };
-    const handleDragLeave = (e) => {
-        if (readOnly)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        dragCounter.current--;
-        if (dragCounter.current === 0) {
-            setIsDragging(false);
-        }
-    };
-    const handleDragOver = (e) => {
-        if (readOnly)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-    };
-    const handleDrop = (e) => {
-        if (readOnly)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(false);
-        dragCounter.current = 0;
-        if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {
-            let files = Array.from(e.dataTransfer.files);
-            if (!allowMultipleFiles && files.length > 1) {
-                files = [files[0]];
-            }
-            else if (!allowMultipleFiles &&
-                uploadedFiles.length > 0 &&
-                files.length >= 1) {
-                files = [];
-            }
-            if (files.length === 0) {
-                e.dataTransfer.clearData();
-                return;
-            }
-            let acceptedTypes = [];
-            if (Array.isArray(acceptedFiletypes)) {
-                acceptedTypes = acceptedFiletypes;
-            }
-            else if (typeof acceptedFiletypes === "string") {
-                acceptedTypes = acceptedFiletypes
-                    .split(",")
-                    .map((type) => type.trim())
-                    .filter(Boolean);
-            }
-            const filteredFiles = files.filter((file) => {
-                if (acceptedTypes.length === 0) {
-                    return true;
-                }
-                return acceptedTypes.some((acceptedType) => {
-                    if (acceptedType.endsWith("/*")) {
-                        const mimeTypePrefix = acceptedType.slice(0, -2);
-                        return file.type.startsWith(mimeTypePrefix);
-                    }
-                    else {
-                        return acceptedType === file.type;
-                    }
-                });
-            });
-            if (filteredFiles.length > 0) {
-                const filteredFileList = new DataTransfer();
-                if (!allowMultipleFiles && uploadedFiles.length > 0) {
-                }
-                else if (!allowMultipleFiles && filteredFiles.length > 1) {
-                    filteredFileList.items.add(filteredFiles[0]);
-                }
-                else {
-                    filteredFiles.forEach((f) => filteredFileList.items.add(f));
-                }
-                handleFileUpload(filteredFileList.files, setFieldValue);
-            }
-            e.dataTransfer.clearData();
-        }
-    };
-    const defaultRenderFile = (file, progress, onDelete) => (_jsx(_Fragment, { children: progress === 100 ? (_jsxs(UploadedFileItemContainer, { "$readOnly": readOnly, children: [_jsxs(UploadedFileInfoContainer, { "$readOnly": readOnly, children: [!hideFileTypeIcon && (_jsx(FileTypeIcon, { children: getFileIcon(file.mimeType ?? "") })), _jsxs(UploadedFileName, { children: [file.name, !hideFileSize && (_jsx(FileSize, { children: ` | ${file.size ? (file.size / (1024 * 1024)).toFixed(3) : "?"} MB` }))] })] }), !hideRemoveButton && !readOnly && file.id && (_jsx(RemoveButton, { "aria-label": deleteFileAriaLabel ?? "Delete file", type: "button", onClick: () => onDelete(), ...removeButton?.props, children: removeButton?.content ?? _jsx(RemoveButtonIcon, {}) }))] })) : (_jsxs(FileItemContainer, { children: [_jsx(UploadingFileName, { children: file.name }), _jsx(ProgressBarContainer, { children: _jsx(ProgressBar, { "$progress": progress }) })] })) }));
-    const uploadedFile = renderFile ?? defaultRenderFile;
-    const fileTypes = acceptedFiletypes ? { accept: acceptedFiletypes } : {};
-    const hideUpload = (!allowMultipleFiles && uploadedFiles.length > 0) || readOnly;
-    const acceptedFiletypesValue = React.useMemo(() => {
-        if (!acceptedFiletypes)
-            return undefined;
-        return Array.isArray(acceptedFiletypes)
-            ? acceptedFiletypes.join(",")
-            : acceptedFiletypes;
-    }, [acceptedFiletypes]);
-    return (_jsxs(FileUploadFieldContainer, { "$readOnly": readOnly, className: className, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [isDragging && !hideUpload && (_jsx(DragOverlay, { children: allowMultipleFiles ? infoText : infoTextSingle })), Array.isArray(uploadedFiles) &&
-                uploadedFiles.map((file) => (_jsx(UploadedFileWrapper, { children: uploadedFile(file, uploadProgress[file.progressId], () => handleRemoveFile(file, setFieldValue)) }, file.progressId))), !uploadedFiles || uploadedFiles.length === 0 ? (_jsxs(_Fragment, { children: [!hideUploadIcon && _jsx(UploadIcon, {}), infoText && (_jsx(InfoText, { children: allowMultipleFiles ? infoText : infoTextSingle })), _jsx(Divider, { children: _jsx(DividerText, { children: orText ?? "or" }) }), _jsx(FileUploadButton, { "aria-label": uploadButtonText ?? "Browse files", type: "button", disabled: readOnly, onClick: () => !readOnly && document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" }), fileInfoText && _jsx(FileInfoText, { children: fileInfoText })] })) : (_jsxs(_Fragment, { children: [infoText && !hideUpload && (_jsxs(InfoText, { children: [`${infoText} ${orText ?? "or"} `, _jsx(FileUploadText, { "aria-label": uploadButtonText ?? "Browse files", onClick: () => !readOnly && document.getElementById(name)?.click(), children: uploadButtonText ?? "Browse files" })] })), fileInfoText && !hideUpload && (_jsx(FileInfoTextMinimized, { children: fileInfoText }))] })), !hideUpload && (_jsx(HiddenFileInput, { ...(allowMultipleFiles && { multiple: true }), accept: acceptedFiletypesValue, id: name, name: name, type: "file", disabled: readOnly, onChange: (event) => {
-                    const files = event.target.files;
-                    if (files) {
-                        handleFileUpload(files, setFieldValue);
-                    }
-                } }))] }));
-};

package/dist/esm/Form/fields/FilesUploadField/index.js

@@ -1,5 +0,0 @@
-import { FilesUploadFieldInput } from "./FilesUploadFieldInput";
-import * as styledComponents from "./styledComponents";
-export * as fields from "./FilesUploadField";
-const components = { ...styledComponents, FilesUploadFieldInput };
-export { components };

package/dist/esm/Form/fields/FilesUploadField/styledComponents.js

@@ -1,211 +0,0 @@
-import styled from "styled-components";
-import { darken } from "polished";
-import { FaCloudUploadAlt, FaTrash } from "react-icons/fa";
-import { Button } from "@nolwenture/component-library/src/components/Button";
-export const FileUploadFieldContainer = styled.div `
-  align-items: center;
-  background-color: ${(props) => props.$readOnly ? "transparent" : props.theme.color.background.input};
-  border: ${(props) => props.$readOnly
-    ? "none"
-    : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
-  display: flex;
-  flex-direction: column;
-  gap: ${(props) => props.theme.spacing.m};
-  justify-content: center;
-  padding: ${(props) => (props.$readOnly ? "0" : props.theme.spacing.xxl)};
-  margin: ${(props) => `${props.theme.spacing.s} 0 ${props.theme.spacing.l} 0`};
-  position: relative;
-  transition: 0.3s filter ease;
-
-  &:hover {
-    filter: ${(props) => (props.$readOnly ? "none" : "brightness(110%)")};
-  }
-`;
-export const HiddenFileInput = styled.input `
-  cursor: pointer;
-  height: 100%;
-  opacity: 0;
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-`;
-export const UploadIcon = styled(FaCloudUploadAlt) `
-  color: ${(props) => props.theme.color.palette.neutral[500]};
-  height: auto;
-  width: 5rem;
-`;
-export const InfoText = styled.p `
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.base};
-  margin: 0;
-`;
-export const Divider = styled.div `
-  background: linear-gradient(
-    180deg,
-    transparent calc(50% - 2px),
-    ${(props) => props.theme.color.palette.neutral[500]} calc(50%),
-    transparent 50%
-  );
-  color: ${(props) => props.theme.color.palette.neutral[500]};
-  display: flex;
-  flex-direction: row;
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.large};
-  gap: ${(props) => props.theme.spacing.m};
-  justify-content: center;
-  margin: 0;
-  text-transform: uppercase;
-  width: 70%;
-`;
-export const DividerText = styled.p `
-  background-color: ${(props) => props.theme.color.background.input};
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.large};
-  margin: 0;
-  padding: 0 ${(props) => props.theme.spacing.m};
-  text-transform: uppercase;
-`;
-export const FileInfoText = styled.p `
-  color: ${(props) => props.theme.color.text.default};
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.base};
-  margin-bottom: 0;
-  text-align: center;
-`;
-export const FileInfoTextMinimized = styled.p `
-  color: ${(props) => props.theme.color.text.default};
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.base};
-  margin: 0;
-  text-align: center;
-`;
-export const FileUploadButton = styled(Button) `
-  z-index: 2;
-`;
-export const FileUploadText = styled.a `
-  z-index: 2;
-  color: ${(props) => props.theme.color.intent.default.primary};
-  text-decoration: underline;
-
-  &:hover {
-    color: ${(props) => darken(0.3, props.theme.color.intent.default.primary)};
-  }
-`;
-export const FileItemContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  margin: ${(props) => props.theme.spacing.m} 0;
-  width: 100%;
-`;
-export const UploadedFileItemContainer = styled.div `
-  align-items: ${(props) => (props.$readOnly ? "center" : "flex-start")};
-  background-color: ${(props) => props.$readOnly ? "transparent" : props.theme.color.background.default};
-  border: ${(props) => props.$readOnly
-    ? "none"
-    : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
-  display: flex;
-  flex-direction: row;
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  gap: ${(props) => props.theme.spacing.m};
-  justify-content: space-between;
-  margin: 0;
-  min-width: 0;
-  padding: ${(props) => props.$readOnly
-    ? "0"
-    : `${props.theme.spacing.m} ${props.theme.spacing.l}`};
-  width: 100%;
-`;
-export const UploadedFileInfoContainer = styled.div `
-  align-items: ${(props) => (props.$readOnly ? "center" : "flex-start")};
-  display: flex;
-  gap: ${(props) => props.theme.spacing.xs};
-  flex: 1;
-  min-width: 0;
-`;
-export const UploadedFileWrapper = styled.div `
-  display: flex;
-  justify-content: left;
-  width: 100%;
-  z-index: 2;
-`;
-export const FileTypeIcon = styled.div `
-  align-items: center;
-  display: flex;
-
-  svg {
-    color: ${(props) => props.theme.color.intent.default.primary};
-  }
-`;
-export const UploadingFileName = styled.div `
-  color: ${(props) => props.theme.color.text.default};
-  display: flex;
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.base};
-  margin-bottom: 0;
-  min-width: 0;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-`;
-export const UploadedFileName = styled.div `
-  color: ${(props) => props.theme.color.text.default};
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.base};
-  margin-bottom: 0;
-  min-width: 0;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-`;
-export const FileSize = styled.span `
-  color: ${(props) => props.theme.color.text.muted};
-`;
-export const RemoveButton = styled.button `
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-`;
-export const RemoveButtonIcon = styled(FaTrash) `
-  color: ${(props) => props.theme.color.intent.default.danger};
-  font-size: 1;
-  height: auto;
-  margin-top: ${(props) => props.theme.spacing.xs};
-  transition: 0.3s color ease;
-  width: 1rem;
-
-  &:hover {
-    color: ${(props) => props.theme.color.palette.danger[700]};
-  }
-`;
-export const ProgressBarContainer = styled.div `
-  background-color: ${(props) => props.theme.color.palette.neutral[300]};
-  height: ${(props) => props.theme.spacing.s};
-  margin-top: ${(props) => props.theme.spacing.xs};
-  width: 100%;
-`;
-export const ProgressBar = styled.div `
-  background-color: ${(props) => props.theme.color.palette.primary[600]};
-  border-radius: ${(props) => props.theme.strokeWidth.thick};
-  height: 100%;
-  transition: width 0.2s ease;
-  width: 0;
-  width: ${(props) => props.$progress}%;
-`;
-export const DragOverlay = styled.div `
-  align-items: center;
-  background-color: ${(props) => props.theme.color.overlay[80]};
-  border: 4px dashed ${(props) => props.theme.color.intent.default.none};
-  bottom: 0;
-  color: ${(props) => props.theme.color.palette.primary[100]};
-  display: flex;
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.h1};
-  font-weight: ${(props) => props.theme.typography.weight.bold};
-  justify-content: center;
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 3;
-`;

package/dist/esm/Form/fields/MultipleChoiceField/MultipleChoiceField.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
-import { getIn, useFormikContext } from "formik";
-import { extractUiSchema, getEnums } from "../../../utils";
-import { useSetDefault } from "../../hooks";
-import { FormRegistry } from "../../FormRegistry";
-export const MultipleChoiceField = (props) => {
-    const { templates, components: { MultipleChoiceFieldInput }, } = useContext(FormRegistry);
-    useSetDefault(props);
-    const { name, uiSchema, schema } = props;
-    const { props: inputProps, style } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const enums = useMemo(() => getEnums(props), [props]);
-    const { values } = useFormikContext();
-    const value = getIn(values, name);
-    const form = useFormikContext();
-    const fieldDataAttribute = (() => {
-        switch (schema?.type) {
-            case "array":
-                return { "data-fjsf-array": name };
-            case "number":
-                return { "data-fjsf-number": name };
-            case "string":
-            default:
-                return { "data-fjsf-string": name };
-        }
-    })();
-    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
-        templates[props.uiSchema?.["ui:template"]]) ??
-        templates.FieldTemplate;
-    return (_jsx(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(MultipleChoiceFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name, enums: enums, style: style, value: value, form: form }) }));
-};

package/dist/esm/Form/fields/MultipleChoiceField/MultipleChoiceFieldInput.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
-import { getStyle } from "../../../utils/getStyle";
-import { FormRegistry } from "../../FormRegistry";
-import { EnumsTypes } from "../../../utils";
-export const MultipleChoiceFieldInput = ({ inputProps, name, className, enums, style, value, form, }) => {
-    const { components: { MultipleChoiceFieldContainer, MultipleChoiceFieldElement, MultipleChoiceFieldInputElement, MultipleChoiceFieldLabel, }, } = useContext(FormRegistry);
-    const safeEnums = enums ?? { type: "", values: [] };
-    const isMultiSelect = safeEnums.type === EnumsTypes.MULTI_SELECT;
-    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 (_jsx(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: (safeEnums.values ?? []).map((v) => {
-            const optionValue = v.const;
-            return (_jsxs(MultipleChoiceFieldElement, { "data-fjsf-enum-value": optionValue, children: [_jsx(MultipleChoiceFieldInputElement, { ...inputProps, name: name, type: isMultiSelect ? "checkbox" : "radio", value: optionValue !== undefined ? optionValue.toString() : "", checked: isChecked(optionValue), onChange: () => handleChange(optionValue) }), _jsx(MultipleChoiceFieldLabel, { children: v.title })] }, optionValue !== undefined ? optionValue.toString() : "undefined"));
-        }) }));
-};

package/dist/esm/Form/fields/MultipleChoiceField/index.js

@@ -1,5 +0,0 @@
-import { MultipleChoiceFieldInput } from "./MultipleChoiceFieldInput";
-import * as styledComponents from "./styledComponents";
-export * as fields from "./MultipleChoiceField";
-const components = { ...styledComponents, MultipleChoiceFieldInput };
-export { components };

package/dist/esm/Form/fields/MultipleChoiceField/styledComponents.js

@@ -1,18 +0,0 @@
-import styled from "styled-components";
-import { RadioFieldContainer, RadioFieldElement, RadioFieldInputElement, RadioFieldLabel, } from "../RadioField/styledComponents";
-export const MultipleChoiceFieldContainer = styled(RadioFieldContainer) `
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  flex-wrap: wrap;
-  justify-content: start;
-  flex-direction: column;
-  gap: ${(props) => props.theme.spacing.s};
-  margin-top: ${(props) => props.theme.spacing.s};
-
-  &:has(input[readonly]) {
-    flex-direction: column;
-    gap: ${(props) => props.theme.spacing.s};
-  }
-`;
-export const MultipleChoiceFieldElement = styled(RadioFieldElement) ``;
-export const MultipleChoiceFieldInputElement = styled(RadioFieldInputElement) ``;
-export const MultipleChoiceFieldLabel = styled(RadioFieldLabel) ``;

package/dist/esm/Form/fields/NullField/NullField.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { FormRegistry } from "../../FormRegistry";
-export const NullField = (props) => {
-    const { templates } = useContext(FormRegistry);
-    const { name, uiSchema } = props;
-    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
-        templates[props.uiSchema?.["ui:template"]]) ??
-        templates.FieldTemplate;
-    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-null": name }));
-};

package/dist/esm/Form/fields/NullField/index.js

@@ -1 +0,0 @@
-export * as fields from "./NullField";

package/dist/esm/Form/fields/NumberField/NumberField.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { StringField } from "../StringField/StringField";
-import { NumberFieldWrapper } from "./styledComponents";
-export const NumberField = (props) => {
-    return (_jsx(NumberFieldWrapper, { children: _jsx(StringField, { ...props, uiSchema: {
-                ...props.uiSchema,
-                "ui:props": {
-                    ...(props.uiSchema?.["ui:props"] || {}),
-                    type: "number",
-                },
-            } }) }));
-};

package/dist/esm/Form/fields/NumberField/index.js

@@ -1,2 +0,0 @@
-export * as components from "./styledComponents";
-export * as fields from "./NumberField";

package/dist/esm/Form/fields/NumberField/styledComponents.js

@@ -1,3 +0,0 @@
-import { styled } from "styled-components";
-export const NumberFieldWrapper = styled.div `
-`;