@nolwenture/formik-jsonschema-form 1.0.11 → 1.2.1

package/README.md

@@ -491,7 +491,7 @@ const uiSchema = {
 There are alternative fields available for certain types.
 For `type: "string"` there is `DateField`, `TextAreaField` and partly `MultipleChoiceField`.
 
-`DateField` has a "dd.mm.yyyy" date input field and a calendar date picker and will save the date input as "yyyy-mm-dd" string.
+`DateField` stores ISO (YYYY-MM-DD), displays in the browser's language by default (or uiSchema["ui:props"].locale if provided), accepts pasted dates in many formats (e.g. 1.2.2025, 01/02/2025, 2025-01-01), includes a native calendar picker, and respects min/max (ISO).
 
 ```tsx
 const schema = {
@@ -501,7 +501,12 @@ const schema = {
 };
 
 const uiSchema = {
-  date: { "ui:field": "DateField" },
+  date: { 
+    "ui:field": "DateField",
+    "ui:props": {
+      locale: "fi" 
+     },
+  }
 };
 ```
 

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

@@ -12,6 +12,9 @@ const AnyField = (props) => {
     const { name, schema, uiSchema } = props;
     const [{ value }] = (0, formik_1.useField)(name);
     const [type, setType] = (0, react_1.useState)(value !== undefined ? (0, utils_1.guessType)(value) : "string");
+    const { 
+    //TODO: This is not right
+    props: { wrapper: wrapperProps = {} } = {}, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const enrichedSchema = (0, react_1.useMemo)(() => {
         switch (type) {
             case "object":
@@ -22,6 +25,6 @@ const AnyField = (props) => {
                 return { ...(schema || {}), type };
         }
     }, [type, schema]);
-    return ((0, jsx_runtime_1.jsxs)(styledComponents_1.AnyFieldWrapper, { children: [(0, jsx_runtime_1.jsx)("select", { value: type, onChange: (event) => setType(event.target.value), children: Object.keys(constants_1.COMPONENT_TYPES).map((type) => ((0, jsx_runtime_1.jsx)("option", { value: type, children: type }, type))) }), (0, jsx_runtime_1.jsx)(SchemaField_1.SchemaField, { name: name, schema: enrichedSchema, uiSchema: uiSchema })] }));
+    return ((0, jsx_runtime_1.jsxs)(styledComponents_1.AnyFieldWrapper, { ...wrapperProps, children: [(0, jsx_runtime_1.jsx)("select", { value: type, onChange: (event) => setType(event.target.value), children: Object.keys(constants_1.COMPONENT_TYPES).map((type) => ((0, jsx_runtime_1.jsx)("option", { value: type, children: type }, type))) }), (0, jsx_runtime_1.jsx)(SchemaField_1.SchemaField, { name: name, schema: enrichedSchema, uiSchema: uiSchema })] }));
 };
 exports.AnyField = AnyField;

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

@@ -7,14 +7,17 @@ const utils_1 = require("../../../utils");
 const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
 const common_1 = require("../../styles/common");
+const DateInput_1 = require("./DateInput");
 const DateField = (props) => {
-    const { templates, components: { FieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
-    const { name, uiSchema } = props;
+    const { name, uiSchema, schema } = props;
     const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(common_1.CommonFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "date" }) }) }));
+    const { label, placeholder, min, max, locale, helpText, disabled, errorMessages } = inputProps || {};
+    const readOnly = schema.readOnly === true;
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(common_1.CommonFieldWrapper, { children: (0, jsx_runtime_1.jsx)(DateInput_1.DateInput, { name: name, label: label, placeholder: placeholder, min: min, max: max, locale: locale, helpText: helpText, disabled: disabled, readOnly: readOnly, errorMessages: errorMessages }) }) }));
 };
 exports.DateField = DateField;

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

@@ -0,0 +1,113 @@
+"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 FormRegistry_1 = require("../../FormRegistry");
+const DateInput = ({ name, label, placeholder, min, max, locale, helpText, disabled, readOnly, errorMessages, }) => {
+    const { formLocalization } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const effectiveLocale = locale ?? formLocalization?.fields?.DateField?.locale ?? navigator.language;
+    const firstDatePart = new Intl.DateTimeFormat(effectiveLocale)
+        .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(effectiveLocale, { 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(effectiveLocale, { timeZone: "UTC" }).format(dt);
+    }, [effectiveLocale]);
+    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)(styledComponents_1.Wrapper, { 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 }), !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" })), (0, jsx_runtime_1.jsx)(styledComponents_1.PickerButton, { type: "button", onClick: openPicker, "aria-label": "Date picker", title: "Date picker", disabled: disabled || readOnly, children: (0, jsx_runtime_1.jsx)(fa_1.FaCalendar, {}) })] })] }));
+};
+exports.DateInput = DateInput;

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

@@ -0,0 +1,68 @@
+"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

@@ -32,7 +32,11 @@ var __importStar = (this && this.__importStar) || (function () {
         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,2 +1,45 @@
 "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 = exports.Wrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Wrapper = styled_components_1.default.div `
+  display: inline-flex;
+  flex-direction: column;
+  max-width: 360px;
+`;
+exports.Row = styled_components_1.default.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+exports.DisplayInput = styled_components_1.default.input `
+  flex: 1;
+`;
+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: relative;
+  left: -40px;
+  border: none;
+  background: inherit;
+  cursor: pointer;
+  font: inherit;
+    &:focus { 
+        box-shadow: none;; 
+    }
+    &:disabled { 
+        cursor: not-allowed; 
+        opacity: 0.6; 
+    }
+    svg {
+        display: flex;
+    }
+`;

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

@@ -64,6 +64,6 @@ const FileUploadField = (props) => {
     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 }) }));
+    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/ObjectField/ObjectField.js

@@ -35,10 +35,11 @@ const ObjectField = (props) => {
         }
     }, [valuesToRemove]);
     const propertyKeys = (0, react_1.useMemo)(() => Object.keys(properties || {}), [properties]);
-    const additionalValues = (0, react_1.useMemo)(() => Object.fromEntries(Object.entries(value || {}).filter(([key, value]) => !propertyKeys.includes(key))), [value, propertyKeys]);
-    const orderedProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(properties || {}));
-    const orderedAddProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(additionalValues || {}));
-    const additionalPropertiesInOrder = (0, utils_1.orderAdditionalProperties)(orderedAddProperties, Object.keys(additionalValues || {}));
+    const additionalPropertyKeys = (0, react_1.useMemo)(() => Object.keys(value || {}).filter((key) => !propertyKeys.includes(key)), [value, propertyKeys]);
+    const orderedProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], propertyKeys);
+    const hiddenProperties = (0, utils_1.getHiddenProperties)(uiSchema?.["ui:order"], propertyKeys);
+    const orderedAdditionalProperties = (0, utils_1.orderAdditionalProperties)(uiSchema?.["ui:order"], additionalPropertyKeys);
+    const hiddenAdditionalProperties = (0, utils_1.getHiddenProperties)(uiSchema?.["ui:order"], additionalPropertyKeys);
     const getObjectFieldButton = ({ purpose, onClick, uiSchema, }) => {
         switch (purpose) {
             case types_1.ObjectFieldButtonPurpose.ADD:
@@ -58,6 +59,7 @@ const ObjectField = (props) => {
         (props.uiSchema?.["ui:options"]?.isCollapsible
             ? templates.CollapsibleObjectFieldTemplate
             : templates.ObjectFieldTemplate);
+    const showAdditionalProperties = !hideUnmarkedAdditionalProperties || !!additionalProperties;
     return ((0, jsx_runtime_1.jsx)(styledComponents_1.ObjectFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(SelectedObjectFieldTemplate, { ...props, "data-fjsf-object": name || "ROOT", "data-fjsf-level": !name ? 0 : name.split(".").length, children: [orderedProperties
                     .map((child) => {
                     if (typeof child === "string") {
@@ -76,10 +78,28 @@ const ObjectField = (props) => {
                             }) }, fields.join("_")));
                     }
                 })
-                    .filter((x) => x), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
-                    additionalPropertiesInOrder.map((childName) => {
+                    .filter((x) => x), hiddenProperties.map((child) => {
+                    const childSchema = properties?.[child];
+                    if (!childSchema)
+                        return undefined;
+                    const childUiSchema = uiSchema?.[child];
+                    return ((0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: {
+                            ...childUiSchema,
+                            props: {
+                                ...childUiSchema?.props,
+                                wrapper: {
+                                    ...childUiSchema?.props?.wrapper,
+                                    style: {
+                                        ...childUiSchema?.props?.wrapper?.style,
+                                        display: "none",
+                                    },
+                                },
+                            },
+                        }, style: { display: "none" } }, child));
+                }), showAdditionalProperties &&
+                    orderedAdditionalProperties.map((childName) => {
                         let correctUiSchema = uiSchema?.[childName];
-                        if (uiSchema.properties?.["ui:order"] !== undefined &&
+                        if (uiSchema?.properties?.["ui:order"] !== undefined &&
                             uiSchema?.[childName]?.["ui:order"] === undefined) {
                             correctUiSchema = {
                                 ...correctUiSchema,
@@ -94,6 +114,17 @@ const ObjectField = (props) => {
                                         },
                                         uiSchema: uiSchema,
                                     }) })] }, childName));
+                    }), showAdditionalProperties &&
+                    hiddenAdditionalProperties.map((childName) => {
+                        let correctUiSchema = uiSchema?.[childName];
+                        if (uiSchema.properties?.["ui:order"] !== undefined &&
+                            uiSchema?.[childName]?.["ui:order"] === undefined) {
+                            correctUiSchema = {
+                                ...correctUiSchema,
+                                "ui:order": uiSchema.properties?.["ui:order"],
+                            };
+                        }
+                        return ((0, jsx_runtime_1.jsx)(ObjectFieldItem, { style: { display: "none" }, children: (0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName) }, childName));
                     }), additionalProperties &&
                     getObjectFieldButton({
                         purpose: types_1.ObjectFieldButtonPurpose.ADD,

package/dist/cjs/Form/fields/ObjectField/ObjectFieldSection.js

@@ -7,11 +7,11 @@ const FormRegistry_1 = require("../../FormRegistry");
 const styledComponents_1 = require("./styledComponents");
 const ObjectFieldSection = ({ title, collapsible, children, }) => {
     const [collapsed, setCollapsed] = (0, react_1.useState)(collapsible);
-    const { components: { ObjectFieldSectionWrapper, ObjectFieldSectionTitle }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { components: { ObjectFieldSectionWrapper, ObjectFieldSectionTitle, ObjectFieldSectionChildrenWrapper, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     return ((0, jsx_runtime_1.jsxs)(ObjectFieldSectionWrapper, { children: [(0, jsx_runtime_1.jsxs)(ObjectFieldSectionTitle, { onClick: () => {
                     if (collapsible) {
                         setCollapsed((currentState) => !currentState);
                     }
-                }, children: [title, (0, jsx_runtime_1.jsx)(styledComponents_1.IconWrapper, { children: collapsible && (collapsed ? "▸" : "▾") })] }), !collapsed && children] }));
+                }, children: [title, (0, jsx_runtime_1.jsx)(styledComponents_1.IconWrapper, { children: collapsible && (collapsed ? "▸" : "▾") })] }), (0, jsx_runtime_1.jsx)(ObjectFieldSectionChildrenWrapper, { style: collapsed ? { display: "none" } : undefined, children: children })] }));
 };
 exports.ObjectFieldSection = ObjectFieldSection;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectFieldSectionTitle = exports.ObjectFieldSectionWrapper = exports.ObjectFieldAddButton = exports.ObjectFieldRemoveButton = exports.ObjectFieldDownButton = exports.ObjectFieldUpButton = exports.ObjectFieldButton = exports.ObjectFieldItemButtons = exports.ObjectFieldItem = exports.ObjectFieldWrapper = exports.IconWrapper = void 0;
+exports.ObjectFieldSectionChildrenWrapper = exports.ObjectFieldSectionTitle = exports.ObjectFieldSectionWrapper = exports.ObjectFieldAddButton = exports.ObjectFieldRemoveButton = exports.ObjectFieldDownButton = exports.ObjectFieldUpButton = exports.ObjectFieldButton = exports.ObjectFieldItemButtons = exports.ObjectFieldItem = exports.ObjectFieldWrapper = exports.IconWrapper = void 0;
 const styled_components_1 = require("styled-components");
 const common_1 = require("../../styles/common");
 const component_library_1 = require("@nolwenture/component-library");
@@ -38,3 +38,4 @@ exports.ObjectFieldSectionTitle = styled_components_1.styled.legend `
   margin: 0;
   justify-content: space-between;
 `;
+exports.ObjectFieldSectionChildrenWrapper = styled_components_1.styled.div ``;

package/dist/cjs/Form/hooks/useSetDefault.js

@@ -10,13 +10,15 @@ const useSetDefault = (props) => {
     const [{ value }, , { setValue }] = (0, formik_1.useField)(props.name);
     (0, react_1.useEffect)(() => {
         let newValue = value;
-        if (value === "now" && props.schema.format === "date") {
-            const today = new Date().toISOString().split("T")[0];
-            newValue = today;
-        }
         if (!newValue) {
             if (props.schema.default !== undefined) {
-                newValue = props.schema.default;
+                if (props.schema.format === "date" && props.schema.default === "now") {
+                    const today = new Date().toISOString().split("T")[0];
+                    newValue = today;
+                }
+                else {
+                    newValue = props.schema.default;
+                }
             }
             else if (props.forceDefaultValue) {
                 newValue = (0, utils_1.getDefaultValueForType)(props.schema.type);
@@ -25,6 +27,6 @@ const useSetDefault = (props) => {
         if (newValue && newValue !== value) {
             setValue(newValue);
         }
-    }, [value, props.schema.default, props.forceDefaultValue]);
+    }, []);
 };
 exports.useSetDefault = useSetDefault;

package/dist/cjs/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js

@@ -36,6 +36,6 @@ const CollapsibleObjectFieldTemplate = (props) => {
     const hide = collapsed;
     return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [(0, jsx_runtime_1.jsxs)(TitleInfoWrapper, { children: [title && ((0, jsx_runtime_1.jsx)(Toggle, { onClick: () => setCollapsed(!collapsed), 
                         //ariaExpanded={!hide}
-                        ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {}), (0, jsx_runtime_1.jsx)(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && (0, jsx_runtime_1.jsx)(Info, { ...info })] }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), !hide && (0, jsx_runtime_1.jsx)(ChildrenWrapper, { children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
+                        ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {}), (0, jsx_runtime_1.jsx)(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && (0, jsx_runtime_1.jsx)(Info, { ...info })] }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), (0, jsx_runtime_1.jsx)(ChildrenWrapper, { style: hide ? { display: "none" } : undefined, children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
 };
 exports.CollapsibleObjectFieldTemplate = CollapsibleObjectFieldTemplate;

package/dist/cjs/utils/getHiddenProperties.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHiddenProperties = void 0;
+const getHiddenProperties = (order, properties) => {
+    if (!order || order.includes("*")) {
+        return [];
+    }
+    const propertiesInOrder = order.flatMap((entry) => typeof entry === "string" ? entry : entry.fields);
+    return properties.filter((key) => !propertiesInOrder.includes(key));
+};
+exports.getHiddenProperties = getHiddenProperties;

package/dist/cjs/utils/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./deepOverlap"), exports);
 __exportStar(require("./extractUiSchema"), exports);
 __exportStar(require("./getEnums"), exports);
+__exportStar(require("./getHiddenProperties"), exports);
 __exportStar(require("./getTitleAndDescription"), exports);
 __exportStar(require("./getTypes"), exports);
 __exportStar(require("./mergeSchemas"), exports);

package/dist/cjs/utils/orderAdditionalProperties.js

@@ -1,46 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.orderAdditionalProperties = orderAdditionalProperties;
+const orderByUiSchema_1 = require("./orderByUiSchema");
 function orderAdditionalProperties(uiOrderArray, valuesArray) {
-    if (uiOrderArray.length === 0)
+    if (!uiOrderArray || uiOrderArray.length === 0)
         return valuesArray;
-    const includesAsterisk = uiOrderArray.includes("*");
-    const filteredValues = (arr) => arr.filter((element) => valuesArray.includes(element));
-    let finalArray = [];
-    if (!includesAsterisk) {
-        finalArray = filteredValues(uiOrderArray);
-    }
-    else {
-        const uiOrderArrayWithoutAsterisk = uiOrderArray.filter((item) => item !== "*");
-        if (uiOrderArray.length === 1) {
-            finalArray = valuesArray;
-        }
-        else if (uiOrderArray.indexOf("*") === 0) {
-            // wildcard is first element
-            const individualValues = valuesArray.filter((element) => !uiOrderArrayWithoutAsterisk.includes(element));
-            const commonValues = filteredValues(uiOrderArrayWithoutAsterisk);
-            finalArray = [...individualValues, ...commonValues];
-        }
-        else if (uiOrderArray.indexOf("*") === uiOrderArray.length - 1) {
-            // wildcard is final element
-            const individualValues = valuesArray.filter((element) => !uiOrderArrayWithoutAsterisk.includes(element));
-            const commonValues = filteredValues(uiOrderArrayWithoutAsterisk);
-            finalArray = [...commonValues, ...individualValues];
-        }
-        else {
-            // wildcard is somewhere in the middle
-            const indexForUnspecified = uiOrderArray.indexOf("*");
-            const definedBefore = uiOrderArray.slice(0, indexForUnspecified);
-            const definedAfter = uiOrderArray.slice(indexForUnspecified + 1);
-            const commonBeforeValues = filteredValues(definedBefore);
-            const commonAfterValues = filteredValues(definedAfter);
-            const individualValues = valuesArray.filter((element) => ![...commonBeforeValues, ...commonAfterValues].includes(element));
-            finalArray = [
-                ...commonBeforeValues,
-                ...individualValues,
-                ...commonAfterValues,
-            ];
-        }
-    }
-    return finalArray;
+    const additionalPropertiesOrder = uiOrderArray
+        .flatMap((entry) => (typeof entry === "string" ? entry : entry.fields))
+        .filter((item) => valuesArray.includes(item) || item === "*");
+    return (0, orderByUiSchema_1.orderByUiSchema)(additionalPropertiesOrder, valuesArray);
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { useField } from "formik";
-import { guessType } from "../../../utils";
+import { extractUiSchema, guessType } from "../../../utils";
 import { COMPONENT_TYPES } from "../../../common/constants";
 import { SchemaField } from "../SchemaField/SchemaField";
 import { AnyFieldWrapper } from "./styledComponents";
@@ -9,6 +9,9 @@ export const AnyField = (props) => {
     const { name, schema, uiSchema } = props;
     const [{ value }] = useField(name);
     const [type, setType] = useState(value !== undefined ? guessType(value) : "string");
+    const { 
+    //TODO: This is not right
+    props: { wrapper: wrapperProps = {} } = {}, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const enrichedSchema = useMemo(() => {
         switch (type) {
             case "object":
@@ -19,5 +22,5 @@ export const AnyField = (props) => {
                 return { ...(schema || {}), type };
         }
     }, [type, schema]);
-    return (_jsxs(AnyFieldWrapper, { children: [_jsx("select", { value: type, onChange: (event) => setType(event.target.value), children: Object.keys(COMPONENT_TYPES).map((type) => (_jsx("option", { value: type, children: type }, type))) }), _jsx(SchemaField, { name: name, schema: enrichedSchema, uiSchema: uiSchema })] }));
+    return (_jsxs(AnyFieldWrapper, { ...wrapperProps, children: [_jsx("select", { value: type, onChange: (event) => setType(event.target.value), children: Object.keys(COMPONENT_TYPES).map((type) => (_jsx("option", { value: type, children: type }, type))) }), _jsx(SchemaField, { name: name, schema: enrichedSchema, uiSchema: uiSchema })] }));
 };

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

@@ -4,13 +4,16 @@ 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, components: { FieldInput }, } = useContext(FormRegistry);
+    const { templates } = useContext(FormRegistry);
     useSetDefault(props);
-    const { name, uiSchema } = 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;
-    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: _jsx(DateFieldWrapper, { children: _jsx(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "date" }) }) }));
+    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, helpText: helpText, disabled: disabled, readOnly: readOnly, errorMessages: errorMessages }) }) }));
 };

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

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useRef, useState, } from "react";
+import { useField, useFormikContext } from "formik";
+import { Wrapper, Row, DisplayInput, HiddenNative, PickerButton, } from "./styledComponents";
+import { parseDateString, toIsoDateString } from "./dateParsing";
+import { FaCalendar } from "react-icons/fa";
+import { FormRegistry } from "../../FormRegistry";
+export const DateInput = ({ name, label, placeholder, min, max, locale, helpText, disabled, readOnly, errorMessages, }) => {
+    const { formLocalization } = useContext(FormRegistry);
+    const effectiveLocale = locale ?? formLocalization?.fields?.DateField?.locale ?? navigator.language;
+    const firstDatePart = new Intl.DateTimeFormat(effectiveLocale)
+        .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(effectiveLocale, { 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(effectiveLocale, { timeZone: "UTC" }).format(dt);
+    }, [effectiveLocale]);
+    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(Wrapper, { 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 }), !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" })), _jsx(PickerButton, { type: "button", onClick: openPicker, "aria-label": "Date picker", title: "Date picker", disabled: disabled || readOnly, children: _jsx(FaCalendar, {}) })] })] }));
+};

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

@@ -0,0 +1,62 @@
+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,2 +1,3 @@
 export * as components from "./styledComponents";
 export * as fields from "./DateField";
+export * from "./DateInput";

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

@@ -1 +1,39 @@
-export {};
+import styled from "styled-components";
+export const Wrapper = styled.div `
+  display: inline-flex;
+  flex-direction: column;
+  max-width: 360px;
+`;
+export const Row = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+export const DisplayInput = styled.input `
+  flex: 1;
+`;
+export const HiddenNative = styled.input `
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 0;
+  height: 0;
+`;
+export const PickerButton = styled.button `
+  position: relative;
+  left: -40px;
+  border: none;
+  background: inherit;
+  cursor: pointer;
+  font: inherit;
+    &:focus { 
+        box-shadow: none;; 
+    }
+    &:disabled { 
+        cursor: not-allowed; 
+        opacity: 0.6; 
+    }
+    svg {
+        display: flex;
+    }
+`;

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

@@ -61,5 +61,5 @@ export const FileUploadField = (props) => {
     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 }) }));
+    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/ObjectField/ObjectField.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField, useFormikContext } from "formik";
 import { useContext, useEffect, useMemo } from "react";
 import { ObjectFieldWrapper } from "./styledComponents";
-import { orderAdditionalProperties, orderByUiSchema, resolveSchema, } from "../../../utils";
+import { getHiddenProperties, orderAdditionalProperties, orderByUiSchema, resolveSchema, } from "../../../utils";
 import { useSetDefault } from "../../hooks";
 import { FormRegistry } from "../../FormRegistry";
 import { ObjectFieldButtonPurpose } from "./types";
@@ -32,10 +32,11 @@ export const ObjectField = (props) => {
         }
     }, [valuesToRemove]);
     const propertyKeys = useMemo(() => Object.keys(properties || {}), [properties]);
-    const additionalValues = useMemo(() => Object.fromEntries(Object.entries(value || {}).filter(([key, value]) => !propertyKeys.includes(key))), [value, propertyKeys]);
-    const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(properties || {}));
-    const orderedAddProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(additionalValues || {}));
-    const additionalPropertiesInOrder = orderAdditionalProperties(orderedAddProperties, Object.keys(additionalValues || {}));
+    const additionalPropertyKeys = useMemo(() => Object.keys(value || {}).filter((key) => !propertyKeys.includes(key)), [value, propertyKeys]);
+    const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], propertyKeys);
+    const hiddenProperties = getHiddenProperties(uiSchema?.["ui:order"], propertyKeys);
+    const orderedAdditionalProperties = orderAdditionalProperties(uiSchema?.["ui:order"], additionalPropertyKeys);
+    const hiddenAdditionalProperties = getHiddenProperties(uiSchema?.["ui:order"], additionalPropertyKeys);
     const getObjectFieldButton = ({ purpose, onClick, uiSchema, }) => {
         switch (purpose) {
             case ObjectFieldButtonPurpose.ADD:
@@ -55,6 +56,7 @@ export const ObjectField = (props) => {
         (props.uiSchema?.["ui:options"]?.isCollapsible
             ? templates.CollapsibleObjectFieldTemplate
             : templates.ObjectFieldTemplate);
+    const showAdditionalProperties = !hideUnmarkedAdditionalProperties || !!additionalProperties;
     return (_jsx(ObjectFieldWrapper, { children: _jsxs(SelectedObjectFieldTemplate, { ...props, "data-fjsf-object": name || "ROOT", "data-fjsf-level": !name ? 0 : name.split(".").length, children: [orderedProperties
                     .map((child) => {
                     if (typeof child === "string") {
@@ -73,10 +75,28 @@ export const ObjectField = (props) => {
                             }) }, fields.join("_")));
                     }
                 })
-                    .filter((x) => x), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
-                    additionalPropertiesInOrder.map((childName) => {
+                    .filter((x) => x), hiddenProperties.map((child) => {
+                    const childSchema = properties?.[child];
+                    if (!childSchema)
+                        return undefined;
+                    const childUiSchema = uiSchema?.[child];
+                    return (_jsx(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: {
+                            ...childUiSchema,
+                            props: {
+                                ...childUiSchema?.props,
+                                wrapper: {
+                                    ...childUiSchema?.props?.wrapper,
+                                    style: {
+                                        ...childUiSchema?.props?.wrapper?.style,
+                                        display: "none",
+                                    },
+                                },
+                            },
+                        }, style: { display: "none" } }, child));
+                }), showAdditionalProperties &&
+                    orderedAdditionalProperties.map((childName) => {
                         let correctUiSchema = uiSchema?.[childName];
-                        if (uiSchema.properties?.["ui:order"] !== undefined &&
+                        if (uiSchema?.properties?.["ui:order"] !== undefined &&
                             uiSchema?.[childName]?.["ui:order"] === undefined) {
                             correctUiSchema = {
                                 ...correctUiSchema,
@@ -91,6 +111,17 @@ export const ObjectField = (props) => {
                                         },
                                         uiSchema: uiSchema,
                                     }) })] }, childName));
+                    }), showAdditionalProperties &&
+                    hiddenAdditionalProperties.map((childName) => {
+                        let correctUiSchema = uiSchema?.[childName];
+                        if (uiSchema.properties?.["ui:order"] !== undefined &&
+                            uiSchema?.[childName]?.["ui:order"] === undefined) {
+                            correctUiSchema = {
+                                ...correctUiSchema,
+                                "ui:order": uiSchema.properties?.["ui:order"],
+                            };
+                        }
+                        return (_jsx(ObjectFieldItem, { style: { display: "none" }, children: _jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName) }, childName));
                     }), additionalProperties &&
                     getObjectFieldButton({
                         purpose: ObjectFieldButtonPurpose.ADD,

package/dist/esm/Form/fields/ObjectField/ObjectFieldSection.js

@@ -4,10 +4,10 @@ import { FormRegistry } from "../../FormRegistry";
 import { IconWrapper } from "./styledComponents";
 export const ObjectFieldSection = ({ title, collapsible, children, }) => {
     const [collapsed, setCollapsed] = useState(collapsible);
-    const { components: { ObjectFieldSectionWrapper, ObjectFieldSectionTitle }, } = useContext(FormRegistry);
+    const { components: { ObjectFieldSectionWrapper, ObjectFieldSectionTitle, ObjectFieldSectionChildrenWrapper, }, } = useContext(FormRegistry);
     return (_jsxs(ObjectFieldSectionWrapper, { children: [_jsxs(ObjectFieldSectionTitle, { onClick: () => {
                     if (collapsible) {
                         setCollapsed((currentState) => !currentState);
                     }
-                }, children: [title, _jsx(IconWrapper, { children: collapsible && (collapsed ? "▸" : "▾") })] }), !collapsed && children] }));
+                }, children: [title, _jsx(IconWrapper, { children: collapsible && (collapsed ? "▸" : "▾") })] }), _jsx(ObjectFieldSectionChildrenWrapper, { style: collapsed ? { display: "none" } : undefined, children: children })] }));
 };

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

@@ -35,3 +35,4 @@ export const ObjectFieldSectionTitle = styled.legend `
   margin: 0;
   justify-content: space-between;
 `;
+export const ObjectFieldSectionChildrenWrapper = styled.div ``;

package/dist/esm/Form/hooks/useSetDefault.js

@@ -7,13 +7,15 @@ export const useSetDefault = (props) => {
     const [{ value }, , { setValue }] = useField(props.name);
     useEffect(() => {
         let newValue = value;
-        if (value === "now" && props.schema.format === "date") {
-            const today = new Date().toISOString().split("T")[0];
-            newValue = today;
-        }
         if (!newValue) {
             if (props.schema.default !== undefined) {
-                newValue = props.schema.default;
+                if (props.schema.format === "date" && props.schema.default === "now") {
+                    const today = new Date().toISOString().split("T")[0];
+                    newValue = today;
+                }
+                else {
+                    newValue = props.schema.default;
+                }
             }
             else if (props.forceDefaultValue) {
                 newValue = getDefaultValueForType(props.schema.type);
@@ -22,5 +24,5 @@ export const useSetDefault = (props) => {
         if (newValue && newValue !== value) {
             setValue(newValue);
         }
-    }, [value, props.schema.default, props.forceDefaultValue]);
+    }, []);
 };

package/dist/esm/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js

@@ -33,5 +33,5 @@ export const CollapsibleObjectFieldTemplate = (props) => {
     const hide = collapsed;
     return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [_jsxs(TitleInfoWrapper, { children: [title && (_jsx(Toggle, { onClick: () => setCollapsed(!collapsed), 
                         //ariaExpanded={!hide}
-                        ariaLabel: ariaLabel ?? name, children: _jsxs(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, {}), _jsx(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && _jsx(Info, { ...info })] }), description && (_jsx(Description, { ...descriptionProps, children: description })), !hide && _jsx(ChildrenWrapper, { children: children }), help && _jsx(Help, { ...helpProps, children: help })] }));
+                        ariaLabel: ariaLabel ?? name, children: _jsxs(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, {}), _jsx(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && _jsx(Info, { ...info })] }), description && (_jsx(Description, { ...descriptionProps, children: description })), _jsx(ChildrenWrapper, { style: hide ? { display: "none" } : undefined, children: children }), help && _jsx(Help, { ...helpProps, children: help })] }));
 };

package/dist/esm/utils/getHiddenProperties.js

@@ -0,0 +1,7 @@
+export const getHiddenProperties = (order, properties) => {
+    if (!order || order.includes("*")) {
+        return [];
+    }
+    const propertiesInOrder = order.flatMap((entry) => typeof entry === "string" ? entry : entry.fields);
+    return properties.filter((key) => !propertiesInOrder.includes(key));
+};

package/dist/esm/utils/index.js

@@ -1,6 +1,7 @@
 export * from "./deepOverlap";
 export * from "./extractUiSchema";
 export * from "./getEnums";
+export * from "./getHiddenProperties";
 export * from "./getTitleAndDescription";
 export * from "./getTypes";
 export * from "./mergeSchemas";

package/dist/esm/utils/orderAdditionalProperties.js

@@ -1,43 +1,9 @@
+import { orderByUiSchema } from "./orderByUiSchema";
 export function orderAdditionalProperties(uiOrderArray, valuesArray) {
-    if (uiOrderArray.length === 0)
+    if (!uiOrderArray || uiOrderArray.length === 0)
         return valuesArray;
-    const includesAsterisk = uiOrderArray.includes("*");
-    const filteredValues = (arr) => arr.filter((element) => valuesArray.includes(element));
-    let finalArray = [];
-    if (!includesAsterisk) {
-        finalArray = filteredValues(uiOrderArray);
-    }
-    else {
-        const uiOrderArrayWithoutAsterisk = uiOrderArray.filter((item) => item !== "*");
-        if (uiOrderArray.length === 1) {
-            finalArray = valuesArray;
-        }
-        else if (uiOrderArray.indexOf("*") === 0) {
-            // wildcard is first element
-            const individualValues = valuesArray.filter((element) => !uiOrderArrayWithoutAsterisk.includes(element));
-            const commonValues = filteredValues(uiOrderArrayWithoutAsterisk);
-            finalArray = [...individualValues, ...commonValues];
-        }
-        else if (uiOrderArray.indexOf("*") === uiOrderArray.length - 1) {
-            // wildcard is final element
-            const individualValues = valuesArray.filter((element) => !uiOrderArrayWithoutAsterisk.includes(element));
-            const commonValues = filteredValues(uiOrderArrayWithoutAsterisk);
-            finalArray = [...commonValues, ...individualValues];
-        }
-        else {
-            // wildcard is somewhere in the middle
-            const indexForUnspecified = uiOrderArray.indexOf("*");
-            const definedBefore = uiOrderArray.slice(0, indexForUnspecified);
-            const definedAfter = uiOrderArray.slice(indexForUnspecified + 1);
-            const commonBeforeValues = filteredValues(definedBefore);
-            const commonAfterValues = filteredValues(definedAfter);
-            const individualValues = valuesArray.filter((element) => ![...commonBeforeValues, ...commonAfterValues].includes(element));
-            finalArray = [
-                ...commonBeforeValues,
-                ...individualValues,
-                ...commonAfterValues,
-            ];
-        }
-    }
-    return finalArray;
+    const additionalPropertiesOrder = uiOrderArray
+        .flatMap((entry) => (typeof entry === "string" ? entry : entry.fields))
+        .filter((item) => valuesArray.includes(item) || item === "*");
+    return orderByUiSchema(additionalPropertiesOrder, valuesArray);
 }

package/dist/types/Form/components/index.d.ts

@@ -168,6 +168,7 @@ export declare const components: {
     ObjectFieldAddButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>, never>> & string;
     ObjectFieldSectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
     ObjectFieldSectionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
+    ObjectFieldSectionChildrenWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     MultipleChoiceFieldInput: ({ inputProps, name, className, enums, style, value, form, }: import("../fields/MultipleChoiceField").MultipleChoiceFieldInputProps) => import("react/jsx-runtime").JSX.Element;
     MultipleChoiceFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;

package/dist/types/Form/fields/DateField/DateInput.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export type DateInputProps = {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    min?: string;
+    max?: string;
+    locale?: string;
+    helpText?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    errorMessages?: {
+        invalid?: string;
+        outOfRange?: string;
+    };
+};
+export declare const DateInput: React.FC<DateInputProps>;

package/dist/types/Form/fields/DateField/dateParsing.d.ts

@@ -0,0 +1,9 @@
+export type PreferOrder = "DMY" | "MDY";
+export declare function toIsoDateString(date: Date): string;
+export declare function isValidYMD(y: number, m: number, d: number): boolean;
+export declare function ymdToDate({ y, m, d, }: {
+    y: number;
+    m: number;
+    d: number;
+}): Date | undefined;
+export declare function parseDateString(input: string, preferOrder: PreferOrder): Date | undefined;

package/dist/types/Form/fields/DateField/index.d.ts

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

package/dist/types/Form/fields/DateField/styledComponents.d.ts

@@ -1 +1,5 @@
-export {};
+export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Row: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DisplayInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const HiddenNative: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const PickerButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/dist/types/Form/fields/ObjectField/index.d.ts

@@ -14,6 +14,7 @@ declare const components: {
     ObjectFieldAddButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>, never>> & string;
     ObjectFieldSectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
     ObjectFieldSectionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
+    ObjectFieldSectionChildrenWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 };
 export { components };
 export type * from "./types";

package/dist/types/Form/fields/ObjectField/styledComponents.d.ts

@@ -12,3 +12,4 @@ export declare const ObjectFieldRemoveButton: import("styled-components/dist/typ
 export declare const ObjectFieldAddButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>, never>> & string;
 export declare const ObjectFieldSectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
 export declare const ObjectFieldSectionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
+export declare const ObjectFieldSectionChildrenWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/types/Form/fields/index.d.ts

@@ -89,6 +89,7 @@ export declare const fieldComponents: {
     ObjectFieldAddButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>, never>> & string;
     ObjectFieldSectionWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
     ObjectFieldSectionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, never>> & string;
+    ObjectFieldSectionChildrenWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     MultipleChoiceFieldInput: ({ inputProps, name, className, enums, style, value, form, }: MultipleChoiceField.MultipleChoiceFieldInputProps) => import("react/jsx-runtime").JSX.Element;
     MultipleChoiceFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;

package/dist/types/utils/getHiddenProperties.d.ts

@@ -0,0 +1,2 @@
+import { UiSchema } from "../common/types";
+export declare const getHiddenProperties: (order: UiSchema["ui:order"], properties: string[]) => string[];

package/dist/types/utils/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./deepOverlap";
 export * from "./extractUiSchema";
 export * from "./getEnums";
+export * from "./getHiddenProperties";
 export * from "./getTitleAndDescription";
 export * from "./getTypes";
 export * from "./mergeSchemas";

package/dist/types/utils/orderAdditionalProperties.d.ts

@@ -1 +1,2 @@
-export declare function orderAdditionalProperties(uiOrderArray: string[], valuesArray: string[]): string[];
+import { UiSchema } from "../common/types";
+export declare function orderAdditionalProperties(uiOrderArray: UiSchema["ui:order"], valuesArray: string[]): string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "1.0.11",
+  "version": "1.2.1",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [