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

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

@@ -1,126 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
-import { useField } from "formik";
-import { EnumsTypes, extractUiSchema, getDefaultValueForType, getEnums, } from "../../../utils";
-import { useSetDefault } from "../../hooks";
-import { FormRegistry } from "../../FormRegistry";
-import { SelectFieldInputWrapper } from "./styledComponents";
-const appendArray = (values, schema) => {
-    const newItem = getDefaultValueForType(schema?.type);
-    return values ? [...values, newItem] : [newItem];
-};
-const removeFromArray = (values, index) => {
-    return [...values.slice(0, index), ...values.slice(index + 1)];
-};
-const moveInArray = (values, index, direction) => {
-    if (direction === -1) {
-        return [
-            ...values.slice(0, index - 1),
-            values[index],
-            values[index - 1],
-            ...values.slice(index + 1),
-        ];
-    }
-    else {
-        return [
-            ...values.slice(0, index),
-            values[index + 1],
-            values[index],
-            ...values.slice(index + 2),
-        ];
-    }
-};
-export const ArrayField = (props) => {
-    const { fields: { SchemaField }, templates, components: { SelectFieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
-    useSetDefault(props);
-    const { name, schema, uiSchema } = props;
-    const { type, props: inputProps, disabled, removeButton, upButton, downButton, addButton, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const [{ value }, _, { setValue }] = useField(name);
-    const schemas = useMemo(() => {
-        let items = schema.items && typeof schema.items !== "boolean" ? schema.items : [];
-        if (!Array.isArray(items)) {
-            items = [items];
-        }
-        return useItemsAsAdditionalItems && !schema.additionalItems
-            ? {
-                items: [],
-                additionalItems: items.filter((item) => typeof item !== "boolean")[0],
-            }
-            : {
-                items: items.filter((item) => typeof item !== "boolean"),
-                additionalItems: typeof schema.additionalItems !== "boolean"
-                    ? schema.additionalItems
-                    : undefined,
-            };
-    }, [schema]);
-    const enums = useMemo(() => getEnums(props), [props]);
-    //This whole mess would give backwards compatibility, but maybe we don't do it
-    // const {
-    //   items,
-    //   additionalItems,
-    // }: {
-    //   items: Schema[];
-    //   additionalItems: Schema | undefined;
-    // } = useMemo(
-    //   () =>
-    //     !schema.additionalItems
-    //       ? {
-    //           additionalItems:
-    //             typeof schema.items !== "boolean"
-    //               ? Array.isArray(schema.items)
-    //                 ? typeof schema.items[0] !== "boolean"
-    //                   ? schema.items[0]
-    //                   : undefined
-    //                 : typeof schema.items !== "boolean"
-    //                 ? schema.items
-    //                 : undefined
-    //               : undefined,
-    //           items: [],
-    //         }
-    //       : {
-    //           additionalItems:
-    //             typeof schema.additionalItems !== "boolean"
-    //               ? schema.additionalItems
-    //               : undefined,
-    //           items: schema.items
-    //             ? Array.isArray(schema.items)
-    //               ? (schema.items.filter(
-    //                   (item) => typeof item !== "boolean"
-    //                 ) as Schema[])
-    //               : typeof schema.items !== "boolean"
-    //               ? [schema.items]
-    //               : []
-    //             : [],
-    //         },
-    //   [schema]
-    // );
-    // Backwards compatibility ends
-    const valueArray = Array.isArray(value) ? value : undefined;
-    const preventManipulation = disabled || schema.readOnly;
-    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
-        templates[props.uiSchema?.["ui:template"]]) ??
-        templates.FieldTemplate;
-    const SelectedArrayFieldTemplate = (props.uiSchema?.["ui:template"] &&
-        templates[props.uiSchema?.["ui:template"]]) ??
-        templates.ArrayFieldTemplate;
-    return schema.anyOf !== undefined ? (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: _jsx(SelectFieldInputWrapper, { children: _jsx(SelectFieldInput, { type,
-                readOnly: schema.readOnly,
-                ...inputProps, name: name, formikAs: "select", multiple: enums?.type === EnumsTypes.MULTI_SELECT, children: enums?.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index))) }) }) })) : (_jsxs(_Fragment, { children: [_jsx(SelectedArrayFieldTemplate, { ...props, "data-fjsf-array": name, items: valueArray, renderItem: (item, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index}]`, schema: prepareChildSchema((index < schemas.items.length && schemas.items[index]) ||
-                                schemas.additionalItems, schema), uiSchema: {
-                                disabled,
-                                ...(uiSchema?.[index] || uiSchema?.items),
-                            }, 
-                            // "true" will prevent validation for required array fields
-                            // since a value always exists in the array
-                            forceDefaultValue: index >= schemas.items.length }), !preventManipulation && index >= schemas.items.length && (_jsxs(ArrayFieldItemButtons, { children: [_jsx(ArrayFieldRemoveButton, { id: value?.[index + schemas.items.length]?.name, ...(removeButton?.props ?? {}), onClick: () => setValue(removeFromArray(value, index + schemas.items.length)), children: removeButton?.content ?? "-" }), value.length > 1 && index > 0 && (_jsx(ArrayFieldUpButton, { ...(upButton?.props ?? {}), onClick: () => setValue(moveInArray(value, index + schemas.items.length, -1)), children: upButton?.content ?? "↑" })), value.length > 1 &&
-                                    index < value?.slice(schemas.items.length).length - 1 && (_jsx(ArrayFieldDownButton, { ...(downButton?.props ?? {}), onClick: () => setValue(moveInArray(value, index + schemas.items.length, 1)), children: downButton?.content ?? "↓" }))] }))] }, index)) }), schemas.additionalItems && !preventManipulation && (_jsx(ArrayFieldAddButton, { ...(addButton?.props ?? {}), onClick: () => setValue(appendArray(value, schemas.additionalItems)), children: addButton?.content ?? "+" }))] }));
-};
-function prepareChildSchema(childSchema, parentSchema) {
-    if (!childSchema || typeof childSchema === "boolean") {
-        return {};
-    }
-    if (parentSchema.readOnly) {
-        return { ...childSchema, readOnly: parentSchema.readOnly };
-    }
-    return childSchema;
-}

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

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

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

@@ -1,16 +0,0 @@
-import styled from "styled-components";
-import { ObjectFieldButton, ObjectFieldItem, ObjectFieldItemButtons, } from "../ObjectField/styledComponents";
-import { CommonFieldWrapper } from "../../styles/common";
-export const SelectFieldInputWrapper = styled(CommonFieldWrapper) ``;
-export const ArrayFieldItem = styled(ObjectFieldItem) `
-  padding: ${(props) => props.theme.spacing.l};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
-  margin-bottom: ${(props) => props.theme.spacing.s};
-`;
-export const ArrayFieldItemButtons = ObjectFieldItemButtons;
-export const ArrayFieldButton = styled(ObjectFieldButton) ``;
-export const ArrayFieldLineButton = styled(ArrayFieldButton) ``;
-export const ArrayFieldUpButton = styled(ArrayFieldLineButton) ``;
-export const ArrayFieldDownButton = styled(ArrayFieldLineButton) ``;
-export const ArrayFieldRemoveButton = styled(ArrayFieldLineButton) ``;
-export const ArrayFieldAddButton = styled(ArrayFieldButton) ``;

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

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
-import { useFormikContext } from "formik";
-import { useSetDefault } from "../../hooks";
-import { FormRegistry } from "../../FormRegistry";
-import { extractUiSchema } from "../../../utils";
-export const BooleanField = (props) => {
-    const { templates, components: { FieldInput, BooleanFieldWrapper }, } = useContext(FormRegistry);
-    useSetDefault(props);
-    const { name, uiSchema } = props;
-    const { label, props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const { values, setValues } = useFormikContext();
-    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
-        templates[props.uiSchema?.["ui:template"]]) ??
-        templates.FieldTemplate;
-    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsxs(BooleanFieldWrapper, { children: [_jsx(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "checkbox" }), _jsx("span", { onClick: () => {
-                        setValues({
-                            ...values,
-                            [name]: !values?.[name],
-                        });
-                    }, children: label })] }) }));
-};

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

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

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

@@ -1,15 +0,0 @@
-import { styled } from "styled-components";
-import { CommonCheckboxStyles } from "../../styles/common";
-export const BooleanFieldWrapper = styled(CommonCheckboxStyles) `
-  align-items: center;
-  color: ${(props) => props.theme.color.text.default};
-  cursor: pointer;
-  display: flex;
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  gap: ${(props) => props.theme.spacing.s};
-
-  &:has(input[readonly]) {
-    pointer-events: none;
-    cursor: pointer;
-  }
-`;

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

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
-import { extractUiSchema } from "../../../utils";
-import { useSetDefault } from "../../hooks";
-import { FormRegistry } from "../../FormRegistry";
-import { CommonFieldWrapper as DateFieldWrapper } from "../../styles/common";
-import { DateInput } from "./DateInput";
-export const DateField = (props) => {
-    const { templates, formLocalization } = useContext(FormRegistry);
-    const {} = useContext(FormRegistry);
-    useSetDefault(props);
-    const { name, uiSchema, schema } = props;
-    const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
-        templates[props.uiSchema?.["ui:template"]]) ??
-        templates.FieldTemplate;
-    const { label, placeholder, min, max, locale, helpText, disabled, errorMessages, } = inputProps || {};
-    const readOnly = schema.readOnly === true;
-    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: _jsx(DateFieldWrapper, { children: _jsx(DateInput, { name: name, label: label, placeholder: placeholder, min: min, max: max, locale: locale ??
-                    formLocalization?.fields?.DateField?.locale ??
-                    navigator.language, helpText: helpText, disabled: disabled, readOnly: readOnly, errorMessages: errorMessages }) }) }));
-};

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

@@ -1,117 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useField, useFormikContext } from "formik";
-import { Row, DisplayInput, HiddenNative, PickerButton, } from "./styledComponents";
-import { parseDateString, toIsoDateString } from "./dateParsing";
-import { FaCalendar } from "react-icons/fa";
-export 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 } = useFormikContext();
-    const [field, meta, helpers] = useField(name);
-    const { value } = field;
-    const { setValue, setError } = helpers;
-    const nativeRef = useRef(null);
-    const formatForDisplay = 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] = useState(formatForDisplay(value));
-    useEffect(() => {
-        if (!value)
-            return setDisplayValue("");
-        setDisplayValue(formatForDisplay(value));
-    }, [value, formatForDisplay]);
-    const hasExternalError = !!meta.error && meta.touched;
-    const withinBounds = useCallback((iso) => {
-        if (min && iso < min)
-            return false;
-        if (max && iso > max)
-            return false;
-        return true;
-    }, [min, max]);
-    const outOfRangeMessage = 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 = useCallback((isoDate) => {
-        setFieldTouched(name, true, false);
-        if (!withinBounds(isoDate)) {
-            setError(outOfRangeMessage());
-            return;
-        }
-        setError(undefined);
-        setValue(isoDate);
-    }, [name, setFieldTouched, setValue, setError, withinBounds, outOfRangeMessage]);
-    const openPicker = 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 = useCallback((raw) => {
-        if (readOnly || disabled)
-            return;
-        const newDate = parseDateString(raw, preferOrder);
-        setFieldTouched(name, true, false);
-        if (newDate) {
-            onValueChange(toIsoDateString(newDate));
-        }
-        else {
-            setError(invalidMessage);
-        }
-    }, [
-        disabled,
-        readOnly,
-        preferOrder,
-        name,
-        onValueChange,
-        setError,
-        setFieldTouched,
-        invalidMessage,
-    ]);
-    const handlePaste = useCallback((e) => {
-        if (readOnly || disabled)
-            return;
-        e.preventDefault();
-        const text = e.clipboardData.getData("text")?.trim();
-        handleParseOrError(text ?? "");
-    }, [readOnly, disabled, handleParseOrError]);
-    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: `${name}-display`, children: label }), _jsxs(Row, { children: [_jsx(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 && (_jsx(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 && (_jsx(PickerButton, { type: "button", onClick: openPicker, "aria-label": "Date picker", title: "Date picker", disabled: disabled, children: _jsx(FaCalendar, {}) }))] })] }));
-};

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

@@ -1,62 +0,0 @@
-export function toIsoDateString(date) {
-    return date.toISOString().slice(0, 10);
-}
-export 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);
-}
-export function ymdToDate({ y, m, d, }) {
-    if (!isValidYMD(y, m, d))
-        return undefined;
-    return new Date(Date.UTC(y, m - 1, d));
-}
-export 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/esm/Form/fields/DateField/index.js

@@ -1,3 +0,0 @@
-export * as components from "./styledComponents";
-export * as fields from "./DateField";
-export * from "./DateInput";

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

@@ -1,54 +0,0 @@
-import styled from "styled-components";
-export const Row = styled.div `
-  display: flex;
-  flex-direction: row;
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-  position: relative;
-`;
-export const DisplayInput = styled.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;
-    }
-  }
-`;
-export const HiddenNative = styled.input `
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-  width: 0;
-  height: 0;
-`;
-export const PickerButton = styled.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/esm/Form/fields/FileUploadField/FileUploadField.js

@@ -1,65 +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 { FileUploadContext } from "../../../common/FileUploadContext";
-import { useSetDefault } from "../../hooks";
-import { FormRegistry } from "../../FormRegistry";
-export const FileUploadField = (props) => {
-    const { templates, components: { FileUploadFieldInput }, } = useContext(FormRegistry);
-    useSetDefault(props);
-    const { name, uiSchema } = props;
-    const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
-    const { setFieldValue, values } = useFormikContext();
-    const value = getIn(values, name);
-    const { uploadFile, fetchFile, removeFile } = useContext(FileUploadContext);
-    const [uploadedFile, setUploadedFile] = useState(null);
-    useEffect(() => {
-        (async () => setUploadedFile(await fetchFile(value)))();
-    }, [value]);
-    const [uploadProgress, setUploadProgress] = 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 (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-object": name, children: _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 }) }));
-};

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

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext } from "react";
-import { FormRegistry } from "../../FormRegistry";
-export 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, }, } = useContext(FormRegistry);
-    return (_jsxs(FileUploadFieldContainer, { className: className, children: [_jsxs("div", { children: [_jsx(FileUploadFieldFileUploadButton, { type: "button", onClick: () => document.getElementById(name)?.click(), children: uploadButtonText ?? "Choose File" }), _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 ? (_jsx(FileUploadFieldFileInfoText, { children: infoText ?? "No file chosen" })) : null] }), uploadedFile && value && (_jsx(FileUploadFieldFileItemContainer, { children: uploadProgress === 100 ? (_jsxs(_Fragment, { children: [_jsx("span", { children: uploadedFile.name }), !hideRemoveButton && (_jsx(FileUploadFieldRemoveButton, { type: "button", onClick: () => handleRemoveFile(setFieldValue), ...removeButton?.props, style: {
-                                color: "red",
-                                fontWeight: "bold",
-                                ...(removeButton?.props?.style ?? {}),
-                            }, children: removeButton?.content ?? "X" }))] })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: uploadedFile.name }), _jsxs(FileUploadFieldProgressBarContainer, { children: [_jsx(FileUploadFieldProgressBar, { "$progress": uploadProgress }), _jsxs(FileUploadFieldProgressText, { children: [uploadProgress, "%"] })] })] })) }))] }));
-};

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

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

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

@@ -1,57 +0,0 @@
-import styled from "styled-components";
-import { readableColor } from "polished";
-export const FileUploadFieldFileUploadButton = styled.button `
-  background-color: ${(props) => props.theme.color.intent.default.none};
-  color: ${(props) => 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};
-`;
-export const FileUploadFieldHiddenFileInput = styled.input `
-  display: none;
-`;
-export const FileUploadFieldProgressBarContainer = styled.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};
-`;
-export const FileUploadFieldProgressBar = styled.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;
-`;
-export const FileUploadFieldProgressText = styled.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};
-`;
-export const FileUploadFieldFileItemContainer = styled.div `
-  margin-bottom: ${(props) => props.theme.spacing.s};
-  display: flex;
-  align-items: center;
-`;
-export const FileUploadFieldRemoveButton = styled.button `
-  margin-left: ${(props) => props.theme.spacing.s};
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-`;
-export const FileUploadFieldFileInfoText = styled.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};
-`;
-export const FileUploadFieldContainer = styled.div ``;