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

package/dist/cjs/Form/fields/DateField/DateInput.js

@@ -1,121 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const formik_1 = require("formik");
-const styledComponents_1 = require("./styledComponents");
-const dateParsing_1 = require("./dateParsing");
-const fa_1 = require("react-icons/fa");
-const DateInput = ({ name, label, placeholder, min, max, locale, helpText, disabled, readOnly, errorMessages, }) => {
-    const firstDatePart = new Intl.DateTimeFormat(locale)
-        .formatToParts(new Date(Date.UTC(2000, 0, 2)))
-        .find((p) => p.type === "day" || p.type === "month" || p.type === "year");
-    const preferOrder = firstDatePart?.type === "month" ? "MDY" : "DMY";
-    const { setFieldTouched } = (0, formik_1.useFormikContext)();
-    const [field, meta, helpers] = (0, formik_1.useField)(name);
-    const { value } = field;
-    const { setValue, setError } = helpers;
-    const nativeRef = (0, react_1.useRef)(null);
-    const formatForDisplay = (0, react_1.useCallback)((iso) => {
-        if (!iso)
-            return "";
-        if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) {
-            if (iso === "now") {
-                const today = new Date();
-                return new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).format(new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate())));
-            }
-            return "";
-        }
-        const dt = new Date(`${iso}T00:00:00Z`);
-        if (Number.isNaN(dt.getTime()))
-            return "";
-        return new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).format(dt);
-    }, [locale]);
-    const [displayValue, setDisplayValue] = (0, react_1.useState)(formatForDisplay(value));
-    (0, react_1.useEffect)(() => {
-        if (!value)
-            return setDisplayValue("");
-        setDisplayValue(formatForDisplay(value));
-    }, [value, formatForDisplay]);
-    const hasExternalError = !!meta.error && meta.touched;
-    const withinBounds = (0, react_1.useCallback)((iso) => {
-        if (min && iso < min)
-            return false;
-        if (max && iso > max)
-            return false;
-        return true;
-    }, [min, max]);
-    const outOfRangeMessage = (0, react_1.useCallback)(() => {
-        const fallback = (min && max && `Date must be between ${min} and ${max}.`) ||
-            "Date is out of range.";
-        const raw = errorMessages?.outOfRange;
-        if (typeof raw === "function") {
-            return raw({
-                min,
-                max,
-            });
-        }
-        const s = typeof raw === "string" ? raw : fallback;
-        return s.replace(/\{min\}/g, min ?? "").replace(/\{max\}/g, max ?? "");
-    }, [errorMessages, min, max]);
-    const invalidMessage = errorMessages?.invalid ?? "Enter a valid date";
-    const onValueChange = (0, react_1.useCallback)((isoDate) => {
-        setFieldTouched(name, true, false);
-        if (!withinBounds(isoDate)) {
-            setError(outOfRangeMessage());
-            return;
-        }
-        setError(undefined);
-        setValue(isoDate);
-    }, [name, setFieldTouched, setValue, setError, withinBounds, outOfRangeMessage]);
-    const openPicker = (0, react_1.useCallback)(() => {
-        const el = nativeRef.current;
-        if (!el || disabled || readOnly)
-            return;
-        try {
-            if (typeof el.showPicker === "function")
-                el.showPicker();
-            else {
-                el.focus();
-                el.click();
-            }
-        }
-        catch {
-            el.focus();
-            el.click();
-        }
-    }, [disabled, readOnly]);
-    const handleParseOrError = (0, react_1.useCallback)((raw) => {
-        if (readOnly || disabled)
-            return;
-        const newDate = (0, dateParsing_1.parseDateString)(raw, preferOrder);
-        setFieldTouched(name, true, false);
-        if (newDate) {
-            onValueChange((0, dateParsing_1.toIsoDateString)(newDate));
-        }
-        else {
-            setError(invalidMessage);
-        }
-    }, [
-        disabled,
-        readOnly,
-        preferOrder,
-        name,
-        onValueChange,
-        setError,
-        setFieldTouched,
-        invalidMessage,
-    ]);
-    const handlePaste = (0, react_1.useCallback)((e) => {
-        if (readOnly || disabled)
-            return;
-        e.preventDefault();
-        const text = e.clipboardData.getData("text")?.trim();
-        handleParseOrError(text ?? "");
-    }, [readOnly, disabled, handleParseOrError]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: `${name}-display`, children: label }), (0, jsx_runtime_1.jsxs)(styledComponents_1.Row, { children: [(0, jsx_runtime_1.jsx)(styledComponents_1.DisplayInput, { id: `${name}-display`, type: "text", placeholder: placeholder, autoComplete: "off", inputMode: "numeric", "aria-describedby": helpText ? `${name}-help` : undefined, "aria-invalid": hasExternalError, value: displayValue, onChange: (e) => setDisplayValue(e.target.value), onBlur: (e) => handleParseOrError(e.target.value), onPaste: handlePaste, disabled: disabled, readOnly: readOnly }), !readOnly && ((0, jsx_runtime_1.jsx)(styledComponents_1.HiddenNative, { ref: nativeRef, id: `${name}-native`, type: "date", min: min, max: max, value: value ?? "", onChange: (e) => {
-                            onValueChange(e.target.value);
-                        }, tabIndex: -1, "aria-hidden": "true" })), !readOnly && ((0, jsx_runtime_1.jsx)(styledComponents_1.PickerButton, { type: "button", onClick: openPicker, "aria-label": "Date picker", title: "Date picker", disabled: disabled, children: (0, jsx_runtime_1.jsx)(fa_1.FaCalendar, {}) }))] })] }));
-};
-exports.DateInput = DateInput;

package/dist/cjs/Form/fields/DateField/dateParsing.js

@@ -1,68 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toIsoDateString = toIsoDateString;
-exports.isValidYMD = isValidYMD;
-exports.ymdToDate = ymdToDate;
-exports.parseDateString = parseDateString;
-function toIsoDateString(date) {
-    return date.toISOString().slice(0, 10);
-}
-function isValidYMD(y, m, d) {
-    if (!y || !m || !d)
-        return false;
-    const dt = new Date(Date.UTC(y, m - 1, d));
-    return (dt.getUTCFullYear() === y &&
-        dt.getUTCMonth() === m - 1 &&
-        dt.getUTCDate() === d);
-}
-function ymdToDate({ y, m, d, }) {
-    if (!isValidYMD(y, m, d))
-        return undefined;
-    return new Date(Date.UTC(y, m - 1, d));
-}
-function parseDateString(input, preferOrder) {
-    const s = input.trim();
-    if (!s)
-        return undefined;
-    let m = s.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/) ||
-        s.match(/^(\d{4})\/(\d{1,2})\/(\d{1,2})$/);
-    if (m) {
-        const y = +m[1], mo = +m[2], d = +m[3];
-        return ymdToDate({ y, m: mo, d });
-    }
-    m = s.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
-    if (m) {
-        const d = +m[1], mo = +m[2], y = +m[3];
-        return ymdToDate({ y, m: mo, d });
-    }
-    m = s.match(/^(\d{1,2})\.(\d{1,2})\.(\d{2})$/);
-    if (m) {
-        const d = +m[1], mo = +m[2], y = 2000 + +m[3];
-        return ymdToDate({ y, m: mo, d });
-    }
-    m = s.match(/^(\d{1,2})\/(\d{1,2})\/(\d{2,4})$/);
-    if (m) {
-        const a = +m[1], b = +m[2], y = +m[3] < 100 ? 2000 + +m[3] : +m[3];
-        const dmy = ymdToDate({ y, m: b, d: a });
-        const mdy = ymdToDate({ y, m: a, d: b });
-        if (dmy && !mdy)
-            return dmy;
-        if (!dmy && mdy)
-            return mdy;
-        if (dmy && mdy)
-            return preferOrder === "MDY" ? mdy : dmy;
-    }
-    const tryPatterns = [
-        /^(\d{1,2})-(\d{1,2})-(\d{4})$/,
-        /^(\d{1,2}) (\d{1,2}) (\d{4})$/,
-    ];
-    for (const r of tryPatterns) {
-        const mm = s.match(r);
-        if (mm) {
-            const d = +mm[1], mo = +mm[2], y = +mm[3];
-            if (isValidYMD(y, mo, d))
-                return ymdToDate({ y, m: mo, d });
-        }
-    }
-    return undefined;
-}

package/dist/cjs/Form/fields/DateField/index.js

@@ -1,42 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fields = exports.components = void 0;
-exports.components = __importStar(require("./styledComponents"));
-exports.fields = __importStar(require("./DateField"));
-__exportStar(require("./DateInput"), exports);

package/dist/cjs/Form/fields/DateField/styledComponents.js

@@ -1,60 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerButton = exports.HiddenNative = exports.DisplayInput = exports.Row = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-exports.Row = styled_components_1.default.div `
-  display: flex;
-  flex-direction: row;
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  position: relative;
-`;
-exports.DisplayInput = styled_components_1.default.input `
-  display: flex;
-  flex-grow: 1;
-  padding-right: ${(props) => props.theme.spacing.xxxl} !important; 
-
-  &:disabled {
-    background-color: transparent;
-    border: none;
-  }
-
-  &:read-only {
-    &:focus, &:focus-visible {
-      border: none;
-      stroke: none;
-      box-shadow: none;
-    }
-  }
-`;
-exports.HiddenNative = styled_components_1.default.input `
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-  width: 0;
-  height: 0;
-`;
-exports.PickerButton = styled_components_1.default.button `
-  position: absolute;
-  right: 0;
-  top: 0;
-  height: 100%;
-  left: auto;
-  border: none;
-  background: inherit;
-  cursor: pointer;
-  font: inherit;
-  &:focus, &:focus-visible {
-    ${(props) => props.theme.focus.default};
-  }
-  &:disabled { 
-    cursor: not-allowed; 
-    opacity: 0.6; 
-  }
-  svg {
-    display: flex;
-    color: ${(props) => props.theme.color.intent.default.primary};
-  }
-`;

package/dist/cjs/Form/fields/FileUploadField/FileUploadField.js

@@ -1,69 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileUploadField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const formik_1 = require("formik");
-const utils_1 = require("../../../utils");
-const FileUploadContext_1 = require("../../../common/FileUploadContext");
-const hooks_1 = require("../../hooks");
-const FormRegistry_1 = require("../../FormRegistry");
-const FileUploadField = (props) => {
-    const { templates, components: { FileUploadFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
-    (0, hooks_1.useSetDefault)(props);
-    const { name, uiSchema } = props;
-    const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    const { setFieldValue, values } = (0, formik_1.useFormikContext)();
-    const value = (0, formik_1.getIn)(values, name);
-    const { uploadFile, fetchFile, removeFile } = (0, react_1.useContext)(FileUploadContext_1.FileUploadContext);
-    const [uploadedFile, setUploadedFile] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        (async () => setUploadedFile(await fetchFile(value)))();
-    }, [value]);
-    const [uploadProgress, setUploadProgress] = (0, react_1.useState)(0);
-    const handleFileUpload = async (file, setFieldValue) => {
-        const formData = new FormData();
-        formData.append("file", file);
-        try {
-            // Simulate slower upload progress with manual updates in order to show bar at all for fast uploads
-            let fakeProgress = 0;
-            const interval = setInterval(() => {
-                fakeProgress += 10;
-                if (fakeProgress <= 100) {
-                    setUploadProgress(fakeProgress);
-                }
-                else {
-                    clearInterval(interval);
-                }
-            }, 100);
-            const result = await uploadFile({
-                data: formData,
-                onUploadProgress: (progressEvent) => {
-                    const totalLength = progressEvent.total;
-                    if (totalLength !== null && totalLength !== undefined) {
-                        const progress = Math.round((progressEvent.loaded * 100) / totalLength);
-                        if (progress === 100) {
-                            setUploadProgress(progress);
-                        }
-                    }
-                },
-            });
-            setFieldValue(name, result);
-        }
-        catch (error) {
-            console.error("File upload failed", error);
-        }
-    };
-    const handleRemoveFile = async (setFieldValue) => {
-        if (uploadedFile?.name) {
-            await removeFile(uploadedFile.name);
-            setUploadProgress(0);
-            setFieldValue(name, null);
-        }
-    };
-    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
-        templates[props.uiSchema?.["ui:template"]]) ??
-        templates.FieldTemplate;
-    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: (0, jsx_runtime_1.jsx)(FileUploadFieldInput, { ...inputProps, name: name, value: value, handleRemoveFile: handleRemoveFile, uploadedFile: uploadedFile, setFieldValue: setFieldValue, handleFileUpload: handleFileUpload, uploadProgress: uploadProgress, removeButton: uiSchema["ui:removeButton"], uploadButtonText: uiSchema["ui:uploadButtonText"], infoText: uiSchema["ui:infoText"], hideRemoveButton: inputProps?.removeButton?.hidden }) }));
-};
-exports.FileUploadField = FileUploadField;

package/dist/cjs/Form/fields/FileUploadField/FileUploadFieldInput.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileUploadFieldInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const FormRegistry_1 = require("../../FormRegistry");
-const FileUploadFieldInput = ({ name, uploadedFile, handleFileUpload, value, setFieldValue, className, uploadProgress, handleRemoveFile, removeButton, uploadButtonText, infoText, hideRemoveButton, }) => {
-    const { components: { FileUploadFieldContainer, FileUploadFieldFileUploadButton, FileUploadFieldHiddenFileInput, FileUploadFieldFileInfoText, FileUploadFieldFileItemContainer, FileUploadFieldRemoveButton, FileUploadFieldProgressBarContainer, FileUploadFieldProgressBar, FileUploadFieldProgressText, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
-    return ((0, jsx_runtime_1.jsxs)(FileUploadFieldContainer, { className: className, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(FileUploadFieldFileUploadButton, { type: "button", onClick: () => document.getElementById(name)?.click(), children: uploadButtonText ?? "Choose File" }), (0, jsx_runtime_1.jsx)(FileUploadFieldHiddenFileInput, { 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)(FileUploadFieldFileInfoText, { children: infoText ?? "No file chosen" })) : null] }), uploadedFile && value && ((0, jsx_runtime_1.jsx)(FileUploadFieldFileItemContainer, { 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)(FileUploadFieldRemoveButton, { 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)(FileUploadFieldProgressBarContainer, { children: [(0, jsx_runtime_1.jsx)(FileUploadFieldProgressBar, { "$progress": uploadProgress }), (0, jsx_runtime_1.jsxs)(FileUploadFieldProgressText, { children: [uploadProgress, "%"] })] })] })) }))] }));
-};
-exports.FileUploadFieldInput = FileUploadFieldInput;

package/dist/cjs/Form/fields/FileUploadField/index.js

@@ -1,41 +0,0 @@
-"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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.components = exports.fields = void 0;
-const FileUploadFieldInput_1 = require("./FileUploadFieldInput");
-const styledComponents = __importStar(require("./styledComponents"));
-exports.fields = __importStar(require("./FileUploadField"));
-const components = { ...styledComponents, FileUploadFieldInput: FileUploadFieldInput_1.FileUploadFieldInput };
-exports.components = components;

package/dist/cjs/Form/fields/FileUploadField/styledComponents.js

@@ -1,63 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileUploadFieldContainer = exports.FileUploadFieldFileInfoText = exports.FileUploadFieldRemoveButton = exports.FileUploadFieldFileItemContainer = exports.FileUploadFieldProgressText = exports.FileUploadFieldProgressBar = exports.FileUploadFieldProgressBarContainer = exports.FileUploadFieldHiddenFileInput = exports.FileUploadFieldFileUploadButton = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-const polished_1 = require("polished");
-exports.FileUploadFieldFileUploadButton = styled_components_1.default.button `
-  background-color: ${(props) => props.theme.color.intent.default.none};
-  color: ${(props) => (0, polished_1.readableColor)(props.theme.color.intent.default.none)};
-  padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.xl}`};
-  border: none;
-  border-radius: ${(props) => props.theme.borderRadius.none};
-  cursor: pointer;
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.base};
-`;
-exports.FileUploadFieldHiddenFileInput = styled_components_1.default.input `
-  display: none;
-`;
-exports.FileUploadFieldProgressBarContainer = styled_components_1.default.div `
-  width: 7.5rem;
-  height: ${(props) => props.theme.spacing.xl};
-  border-radius: ${(props) => props.theme.strokeWidth.thick};
-  background-color: ${(props) => props.theme.color.background.input};
-  position: relative;
-  margin-left: ${(props) => props.theme.spacing.s};
-`;
-exports.FileUploadFieldProgressBar = styled_components_1.default.div `
-  width: ${(props) => props.$progress}%;
-  height: 100%;
-  background-color: ${(props) => props.theme.color.palette.neutral[500]};
-  border-radius: ${(props) => props.theme.strokeWidth.thick};
-  transition: width 0.2s ease;
-`;
-exports.FileUploadFieldProgressText = styled_components_1.default.span `
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: ${(props) => props.theme.color.palette.neutral[200]};
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-weight: ${(props) => props.theme.typography.weight.bold};
-`;
-exports.FileUploadFieldFileItemContainer = styled_components_1.default.div `
-  margin-bottom: ${(props) => props.theme.spacing.s};
-  display: flex;
-  align-items: center;
-`;
-exports.FileUploadFieldRemoveButton = styled_components_1.default.button `
-  margin-left: ${(props) => props.theme.spacing.s};
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-`;
-exports.FileUploadFieldFileInfoText = styled_components_1.default.span `
-  margin-left: ${(props) => props.theme.spacing.s};
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  font-size: ${(props) => props.theme.typography.size.base};
-  color: ${(props) => props.theme.color.text.default};
-`;
-exports.FileUploadFieldContainer = styled_components_1.default.div ``;

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

@@ -1,102 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilesUploadField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const formik_1 = require("formik");
-const utils_1 = require("../../../utils");
-const FilesUploadContext_1 = require("../../../common/FilesUploadContext");
-const hooks_1 = require("../../hooks");
-const FormRegistry_1 = require("../../FormRegistry");
-const FilesUploadField = (props) => {
-    const { templates, components: { FilesUploadFieldInput }, formLocalization, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
-    (0, hooks_1.useSetDefault)(props);
-    const { name, uiSchema, schema } = props;
-    const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    const { setFieldValue, values } = (0, formik_1.useFormikContext)();
-    const value = (0, react_1.useMemo)(() => (0, formik_1.getIn)(values, name) ?? [], [values, name]);
-    const readOnly = schema.readOnly ?? false;
-    const { uploadFiles, removeFile } = (0, react_1.useContext)(FilesUploadContext_1.FilesUploadContext);
-    const [uploadedFiles, setUploadedFiles] = (0, react_1.useState)([]);
-    const [uploadProgress, setUploadProgress] = (0, react_1.useState)({});
-    (0, react_1.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 ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: (0, jsx_runtime_1.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 }) }));
-};
-exports.FilesUploadField = FilesUploadField;