@nolwenture/formik-jsonschema-form 0.26.8 → 1.0.0-beta.2

package/dist/cjs/FormView/types/FormViewRegistryContext.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/common/types/Field.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/common/types/FieldInfo.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/common/types/Form.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/common/types/Schemas.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/{sampleData → common/types}/index.js

@@ -14,11 +14,6 @@ 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 });
-__exportStar(require("./simpleData"), exports);
-__exportStar(require("./completeSchema"), exports);
-__exportStar(require("./generatedSchema"), exports);
-__exportStar(require("./requiredInputSchema"), exports);
-__exportStar(require("./conditionsSchema"), exports);
-__exportStar(require("./multipleChoiceSchema"), exports);
-__exportStar(require("./refDefSchema"), exports);
-__exportStar(require("./collapsibleSchema"), exports);
+__exportStar(require("./Field"), exports);
+__exportStar(require("./Form"), exports);
+__exportStar(require("./Schemas"), exports);

package/dist/cjs/index.js

@@ -26,13 +26,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.templates = exports.fields = exports.styledComponents = void 0;
-__exportStar(require("./types"), exports);
-__exportStar(require("./utils"), exports);
+exports.view = void 0;
+//This file exists for purpose releasing "moduleResolution": "node" compatible version (until we split this to multiple packages)
 __exportStar(require("./Form"), exports);
-__exportStar(require("./FormPdf"), exports);
-exports.styledComponents = __importStar(require("./styledComponents"));
-exports.fields = __importStar(require("./fields"));
-exports.templates = __importStar(require("./templates"));
-__exportStar(require("./FileUploadContext"), exports);
-__exportStar(require("./FormEditor"), exports);
+exports.view = __importStar(require("./FormView"));

package/dist/cjs/utils/extractUiSchema.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractUiSchema = void 0;
+const extractUiSchema = (props = {}) => {
+    // props is frozen by React, so it needs to be copied
+    const schema = { ...props };
+    if (schema.props !== undefined) {
+        schema["ui:props"] = {
+            ...(schema["ui:props"] ?? {}),
+            ...(schema.props ?? {}),
+        };
+    }
+    const { "ui:options": options = {}, ...uiSchema } = schema;
+    return {
+        ...Object.keys(uiSchema || {}).reduce((result, key) => ({
+            ...result,
+            [key.replace("ui:", "")]: uiSchema[key],
+        }), {}),
+        ...options,
+    };
+};
+exports.extractUiSchema = extractUiSchema;

package/dist/cjs/utils/getEnums.js

@@ -1,6 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSelectedEnum = exports.getEnums = void 0;
+exports.getSelectedEnum = exports.getEnums = exports.EnumsTypes = void 0;
+var EnumsTypes;
+(function (EnumsTypes) {
+    EnumsTypes["SELECT"] = "select";
+    EnumsTypes["MULTI_SELECT"] = "multiSelect";
+})(EnumsTypes || (exports.EnumsTypes = EnumsTypes = {}));
+//TODO: Add some proper typing
 const getEnums = ({ schema }) => {
     if (!schema) {
         return { values: [] };
@@ -14,7 +20,7 @@ const getEnums = ({ schema }) => {
     }
     if (schema.enum) {
         return {
-            type: "select",
+            type: EnumsTypes.SELECT,
             values: schema.enum.map((option) => ({
                 const: option,
                 title: `${option}`,
@@ -23,13 +29,13 @@ const getEnums = ({ schema }) => {
     }
     if (schema.oneOf) {
         return {
-            type: "select",
+            type: EnumsTypes.SELECT,
             values: schema.oneOf,
         };
     }
     if (schema.anyOf) {
         return {
-            type: "multiSelect",
+            type: EnumsTypes.MULTI_SELECT,
             values: schema.anyOf,
         };
     }

package/dist/cjs/utils/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.warnFromUnsupportedKeys = void 0;
 __exportStar(require("./deepOverlap"), exports);
+__exportStar(require("./extractUiSchema"), exports);
 __exportStar(require("./getEnums"), exports);
 __exportStar(require("./getTitleAndDescription"), exports);
 __exportStar(require("./getTypes"), exports);

package/dist/cjs/utils/orderByUiSchema.js

@@ -10,14 +10,15 @@ function orderByUiSchema(order, allProperties) {
             return order;
         }
     }
-    return undefined;
+    return allProperties;
 }
 function orderWithAsterisk(order, allProperties) {
     const orderWithoutDuplicates = [...new Set(order)];
+    const fieldsInOrder = orderWithoutDuplicates.flatMap((entry) => typeof entry === "string" ? entry : entry.fields);
     const finalOrderedArray = [];
     orderWithoutDuplicates.forEach((element) => {
         if (element === "*") {
-            const propertiesWithoutOrder = allProperties.filter((prop) => !orderWithoutDuplicates.includes(prop));
+            const propertiesWithoutOrder = allProperties.filter((prop) => !fieldsInOrder.includes(prop));
             finalOrderedArray.push(...propertiesWithoutOrder);
         }
         else {

package/dist/esm/{Form.js → Form/Form.js}

@@ -1,20 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
 import { useFormikContext } from "formik";
-import * as defaultComponents from "./styledComponents";
-import { warnFromUnsupportedKeys } from "./utils";
-import * as defaultFields from "./fields";
-import * as defaultTemplates from "./templates";
-export const FormRegistry = React.createContext({
-    fields: defaultFields,
-    templates: defaultTemplates,
-    components: defaultComponents,
-    definitions: {},
-    uiSchemaDefinitions: {},
-    formContext: {},
-    useItemsAsAdditionalItems: false,
-    hideUnmarkedAdditionalProperties: false,
-});
+import { warnFromUnsupportedKeys } from "../utils";
+import { FormRegistry } from "./FormRegistry";
+import { components as defaultComponents } from "./components";
+import { fields as defaultFields } from "./fields";
+import { templates as defaultTemplates } from "./templates";
 export const Form = (props) => {
     warnFromUnsupportedKeys("Form", props, [
         "schema",
@@ -32,11 +22,17 @@ export const Form = (props) => {
     const { isSubmitting } = useFormikContext();
     const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
     const schemaDefinitions = schema.definitions;
-    const uiSchemaDefinitions = uiSchema.definitions;
+    const uiSchemaDefinitions = uiSchema?.definitions;
     const registry = {
-        fields: { ...defaultFields, ...fields },
+        fields: {
+            ...defaultFields,
+            ...fields,
+        },
         templates: { ...defaultTemplates, ...templates },
-        components: { ...defaultComponents, ...components },
+        components: {
+            ...defaultComponents,
+            ...components,
+        },
         definitions: schemaDefinitions,
         uiSchemaDefinitions,
         formContext,

package/dist/esm/Form/FormRegistry.js

@@ -0,0 +1,11 @@
+import React from "react";
+export const FormRegistry = React.createContext({
+    fields: {},
+    templates: {},
+    components: {},
+    definitions: {},
+    uiSchemaDefinitions: {},
+    formContext: {},
+    useItemsAsAdditionalItems: false,
+    hideUnmarkedAdditionalProperties: false,
+});

package/dist/esm/Form/components/Clickable.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from "styled-components";
+const ClickableEl = styled.button `
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  outline: inherit;
+  cursor: pointer;
+`;
+export const Clickable = ({ children, onClick, onMouseUp = () => { }, onMouseDown = () => { }, innerRef = () => { }, className, ariaLabel, ariaExpanded = false, ariaControls, id, }) => {
+    return (_jsx(ClickableEl, { type: "button", onClick: onClick, onMouseUp: onMouseUp, onMouseDown: onMouseDown, ref: (r) => innerRef(r), className: className, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-controls": ariaControls, id: id, children: children }));
+};

package/dist/esm/Form/components/ErrorMessage.js

@@ -0,0 +1,3 @@
+import styled from "styled-components";
+import * as formik from "formik";
+export const ErrorMessage = styled(formik.ErrorMessage) ``;

package/dist/esm/Form/components/FieldInfo.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import { readableColor } from "polished";
+export const FieldInfoBoxElement = styled.div `
+  transition: opacity 0.5s;
+  position: absolute;
+  z-index: 1080;
+  opacity: 0;
+  visibility: hidden;
+  margin: 0;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.small};
+  word-wrap: break-word;
+  min-width: max-content;
+
+  top: ${({ position }) => position === "bottom" ? "140%" : position === "top" ? "auto" : "50%"};
+  bottom: ${({ position }) => position === "top"
+    ? "140%"
+    : position === "right" || position === "left"
+        ? "50%"
+        : "auto"};
+  left: ${({ position }) => position === "right"
+    ? "100%"
+    : position === "bottom" || position === "top"
+        ? "50%"
+        : "auto"};
+  right: ${({ position }) => position === "left"
+    ? "100%"
+    : position === "bottom" || position === "top"
+        ? "50%"
+        : "auto"};
+  transform: translate(
+    ${({ position }) => position === "bottom" || position === "top" ? "-50%" : "0"},
+    ${({ position }) => position === "right" || position === "left" ? "-50%" : "0"}
+  );
+`;
+export const FieldInfoBoxArrowElement = styled.div `
+  top: ${({ position }) => position === "top"
+    ? "100%"
+    : position === "right" || position === "left"
+        ? "40%"
+        : "unset"};
+  left: ${({ position }) => position === "top" || position === "bottom"
+    ? "50%"
+    : position === "right"
+        ? "-2%"
+        : "102.5%"};
+  bottom: ${({ position }) => (position === "bottom" ? "100%" : "unset")};
+  border: solid transparent;
+  content: "";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  border-top-color: ${({ position, theme }) => position === "top" ? theme.intent.none : "transparent"};
+  border-bottom-color: ${({ position, theme }) => position === "bottom" ? theme.intent.none : "transparent"};
+  border-right-color: ${({ position, theme }) => position === "right" ? theme.intent.none : "transparent"};
+  border-left-color: ${({ position, theme }) => position === "left" ? theme.intent.none : "transparent"};
+  border-width: 5px;
+  margin-left: -5px;
+`;
+export const FieldInfoBoxInnerElement = styled.div `
+  background: ${(props) => props.theme.intent.none};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.intent.none}`};
+  border-radius: ${(props) => props.theme.borderRadius.none};
+  color: ${(props) => readableColor(props.theme.text.default)};
+  cursor: default;
+  padding: ${(props) => `${props.theme.spacing.xs} ${props.theme.spacing.s}`};
+  text-align: center;
+`;
+export const FieldInfoContainer = styled.a `
+  position: relative;
+  color: ${(props) => props.theme.text.default};
+  background: none;
+  outline: none;
+  cursor: pointer;
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid
+      ${props.theme.border.default}`};
+  border-radius: ${(props) => props.theme.borderRadius.circle};
+  line-height: 1em;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.small};
+  padding: ${(props) => `0 ${props.theme.spacing.s}`};
+  text-decoration: unset;
+  margin: ${(props) => `0 ${props.theme.spacing.s} 0 -${props.theme.spacing.xs}`};
+
+  &:active,
+  &:focus {
+    color: ${(props) => readableColor(props.theme.text.default)};
+    background: ${(props) => props.theme.text.default};
+    ${FieldInfoBoxElement} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`;
+export const FieldInfoLabel = styled.span ``;
+export const FieldInfo = ({ label, content, position, props, className, }) => {
+    return (_jsxs(FieldInfoContainer, { href: "#", onClick: (e) => e.preventDefault(), className: className, children: [_jsx(FieldInfoLabel, { children: label ?? "i" }), _jsxs(FieldInfoBoxElement, { position: position ?? "top", role: "tooltip", children: [_jsx(FieldInfoBoxArrowElement, { position: position ?? "top" }), _jsx(FieldInfoBoxInnerElement, { children: content })] })] }));
+};

package/dist/esm/Form/components/FieldInput.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import * as formik from "formik";
+export const FieldWrapper = styled.div `
+    margin: ${(props) => `${props.theme.spacing.s} 0`};
+    color: ${(props) => props.theme.text.default};
+`;
+export const FieldTitle = styled.label `
+    font-size: ${(props) => props.theme.typography.size.base};
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    font-weight: ${(props) => props.theme.typography.weight.medium};
+    margin-right: ${(props) => props.theme.spacing.s};
+    color: ${(props) => props.theme.text.default};
+`;
+export const FieldDescription = styled.p `
+    color: ${(props) => props.theme.text.default};
+    margin: 0;
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    font-size: ${(props) => props.theme.typography.size.base};
+`;
+export const FieldHelp = styled.p `
+    color: ${(props) => props.theme.text.default};
+    margin: 0;
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    font-size: ${(props) => props.theme.typography.size.small};
+`;
+/*
+ * Works like Formik field, but "as" props needs to be given with "formikAs", since styled components uses as.
+ *
+ */
+export const FieldInput = styled(({ formikAs, ...props }) => {
+    return _jsx(formik.Field, { ...props, as: formikAs });
+}) ``;

package/dist/esm/Form/components/Form.js

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+import * as formik from "formik";
+import { commonCheckboxStyles, commonRadioStyles, commonButtonStyles, commonInputStyles, commonSelectStyles, } from "../styles/common";
+export const Form = styled(formik.Form) `
+    ${commonCheckboxStyles}
+
+    ${commonRadioStyles}
+
+    color: ${(props) => props.theme.text.default};
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+
+    ${commonButtonStyles}
+
+    ${commonInputStyles}
+
+    ${commonSelectStyles}
+
+    :focus {
+        ${(props) => props.theme.focus.default};
+    }
+`;
+export const FormButtonWrapper = styled.div ``;
+export const FormButton = styled.button `
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+`;

package/dist/esm/Form/components/Icon.js

@@ -0,0 +1,4 @@
+import { styled } from "styled-components";
+export const Icon = styled.div `
+  padding: ${(props) => `0 ${props.theme.spacing.s}`};
+`;

package/dist/esm/Form/components/RequiredIndicator.js

@@ -0,0 +1,6 @@
+import { styled } from "styled-components";
+export const RequiredIndicator = styled.span `
+  ::before {
+    content: "*";
+  }
+`;

package/dist/esm/Form/components/index.js

@@ -0,0 +1,22 @@
+import { fieldComponents } from "../fields";
+import { templateComponents } from "../templates";
+//Please keep this in alphabetical order
+import * as Clickable from "./Clickable";
+import * as ErrorMessage from "./ErrorMessage";
+import * as FieldInfo from "./FieldInfo";
+import * as Field from "./FieldInput";
+import * as Form from "./Form";
+import * as Icon from "./Icon";
+import * as RequiredIndicator from "./RequiredIndicator";
+export const components = {
+    ...fieldComponents,
+    ...templateComponents,
+    //Please keep this in alphabetical order
+    ...Clickable,
+    ...ErrorMessage,
+    ...FieldInfo,
+    ...Field,
+    ...Form,
+    ...Icon,
+    ...RequiredIndicator,
+};

package/dist/esm/{fields → Form/fields/AnyField}/AnyField.js

@@ -1,9 +1,10 @@
 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 { SchemaField } from "./SchemaField";
-import { COMPONENT_TYPES } from "./types";
+import { guessType } from "../../../utils";
+import { COMPONENT_TYPES } from "../../../common/constants";
+import { SchemaField } from "../SchemaField/SchemaField";
+import { AnyFieldWrapper } from "./styledComponents";
 export const AnyField = (props) => {
     const { name, schema, uiSchema } = props;
     const [{ value }] = useField(name);
@@ -18,5 +19,5 @@ export const AnyField = (props) => {
                 return { ...(schema || {}), type };
         }
     }, [type, schema]);
-    return (_jsxs("div", { 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, { 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/AnyField/index.js

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

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

@@ -0,0 +1,6 @@
+import { styled } from "styled-components";
+import { commonInputStyles, commonSelectStyles } from "../../styles/common";
+export const AnyFieldWrapper = styled.div `
+    ${commonInputStyles}
+    ${commonSelectStyles}
+`;

package/dist/esm/{fields → Form/fields/ArrayField}/ArrayField.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useField } from "formik";
 import { useContext, useMemo } from "react";
-import { FormRegistry } from "../Form";
-import { useExtractUiSchema, useSetDefault } from "../hooks";
-import { FieldInput } from "../styledComponents";
-import { FieldTemplate } from "../templates";
-import { getEnums } from "../utils";
+import { useField } from "formik";
+import { EnumsTypes, extractUiSchema, getEnums } from "../../../utils";
+import { useSetDefault } from "../../hooks";
+import { FormRegistry } from "../../FormRegistry";
 const appendArray = (values) => {
     return values ? [...values, ""] : [""];
 };
@@ -31,10 +29,10 @@ const moveInArray = (values, index, direction) => {
     }
 };
 export const ArrayField = (props) => {
-    const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem, ArrayFieldList, ArrayFieldItemButtons, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
+    const { fields: { SchemaField }, templates: { ArrayFieldTemplate, FieldTemplate }, components: { FieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldList, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, schema, uiSchema } = props;
-    const { type, props: inputProps } = useExtractUiSchema(uiSchema);
+    const { type, props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const [{ value }, _, { setValue }] = useField(name);
     const { items, additionalItems, } = useMemo(() => {
         let items = schema.items && typeof schema.items !== "boolean" ? schema.items : [];
@@ -95,10 +93,10 @@ export const ArrayField = (props) => {
     //   [schema]
     // );
     // Backwards compatibility ends
-    const { disabled } = useExtractUiSchema(uiSchema);
+    const { disabled } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const valueArray = Array.isArray(value) ? value : undefined;
     return schema.anyOf !== undefined ? (_jsx(FieldTemplate, { ...props, "data-fjsf-array": name, children: _jsx(FieldInput, { type,
-            ...inputProps, name: name, formikAs: "select", multiple: enums?.type === "multiSelect", children: enums?.values.map((option, index) => (_jsx("option", { value: option.const, children: option.title }, index))) }) })) : (_jsxs(ArrayFieldTemplate, { ...props, "data-fjsf-array": name, children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: uiSchema?.[index] || uiSchema?.items, 
+            ...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(ArrayFieldTemplate, { ...props, "data-fjsf-array": name, children: [_jsxs(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => (_jsx(ArrayFieldItem, { children: _jsx(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: uiSchema?.[index] || uiSchema?.items, 
                             // "true" will prevent validation for required array fields
                             // since a value always exists in the array
                             forceDefaultValue: false }) }, index))), (valueArray?.slice(items.length) || []).map((_, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"

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

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

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

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+import { ObjectFieldButton, ObjectFieldItem, ObjectFieldItemButtons, ObjectFieldList, } from "../ObjectField/styledComponents";
+export const ArrayFieldList = ObjectFieldList;
+export const ArrayFieldItem = ObjectFieldItem;
+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/{fields → Form/fields/BooleanField}/BooleanField.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
-import { FormRegistry } from "../Form";
-import { useExtractUiSchema, useSetDefault } from "../hooks";
+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: { FieldTemplate }, components: { FieldInput, BooleanFieldWrapper }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
-    const { label, props: inputProps } = useExtractUiSchema(uiSchema);
+    const { label, props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const { values, setValues } = useFormikContext();
     return (_jsx(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsxs(BooleanFieldWrapper, { children: [_jsx(FieldInput, { ...inputProps, name: name, type: "checkbox" }), _jsx("span", { onClick: () => {
                         setValues({

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

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

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

@@ -0,0 +1,12 @@
+import { styled } from "styled-components";
+import { commonCheckboxStyles } from "../../styles/common";
+export const BooleanFieldWrapper = styled.div `
+  align-items: center;
+  color: ${(props) => props.theme.text.default};
+  cursor: pointer;
+  display: flex;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  gap: ${(props) => props.theme.spacing.s};
+
+  ${commonCheckboxStyles}
+`;

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

@@ -0,0 +1,13 @@
+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 { DateFieldWrapper } from "./styledComponents";
+export const DateField = (props) => {
+    const { templates: { FieldTemplate }, components: { FieldInput }, } = useContext(FormRegistry);
+    useSetDefault(props);
+    const { name, uiSchema } = props;
+    const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
+    return (_jsx(FieldTemplate, { ...props, "data-fjsf-string": name, children: _jsx(DateFieldWrapper, { children: _jsx(FieldInput, { ...inputProps, name: name, type: "date" }) }) }));
+};

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

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

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

@@ -0,0 +1,6 @@
+import { styled } from "styled-components";
+import { commonInputStyles, datePickerIconStyles } from "../../styles/common";
+export const DateFieldWrapper = styled.div `
+    ${commonInputStyles}
+    ${datePickerIconStyles}
+`;

package/dist/esm/{fields → Form/fields/FileUploadField}/FileUploadField.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useState } from "react";
-import { FormRegistry } from "../Form";
-import { useExtractUiSchema, useSetDefault } from "../hooks";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { getIn, useFormikContext } from "formik";
-import { FileUploadContext } from "../FileUploadContext";
+import { extractUiSchema } from "../../../utils";
+import { FileUploadContext } from "../../../common/FileUploadContext";
+import { useSetDefault } from "../../hooks";
+import { FormRegistry } from "../../FormRegistry";
 export const FileUploadField = (props) => {
-    const { templates: { FieldTemplate }, components: { FileUploadField }, } = useContext(FormRegistry);
+    const { templates: { FieldTemplate }, components: { FileUploadFieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
-    const { props: inputProps } = useExtractUiSchema(uiSchema);
+    const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const { setFieldValue, values } = useFormikContext();
     const value = getIn(values, name);
     const { uploadFile, fetchFile, removeFile } = useContext(FileUploadContext);
@@ -57,5 +58,5 @@ export const FileUploadField = (props) => {
             setFieldValue(name, null);
         }
     };
-    return (_jsx(FieldTemplate, { ...props, "data-fjsf-object": name, children: _jsx(FileUploadField, { ...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(FieldTemplate, { ...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

@@ -0,0 +1,17 @@
+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, "%"] })] })] })) }))] }));
+};