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

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { useFormikContext } from "formik";
+import { extractUiSchema, getEnums } from "../../../utils";
+import { FormRegistry } from "../../FormRegistry";
+import { useSetDefault } from "../../hooks";
+import { StringFieldWrapper } from "./styledComponents";
+export const StringField = (props) => {
+    const { templates: { FieldTemplate }, components: { FieldInput }, } = useContext(FormRegistry);
+    useSetDefault(props);
+    const { name, uiSchema = {}, schema } = props;
+    const { type, placeholder, props: inputProps, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
+    const enums = useMemo(() => getEnums(props), [props]);
+    const form = useFormikContext();
+    const fieldDataAttribute = schema.type === "string"
+        ? { "data-fjsf-string": name }
+        : { "data-fjsf-number": name };
+    switch (enums?.type) {
+        case "select":
+            return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(StringFieldWrapper, { children: _jsxs(FieldInput, { type,
+                        ...inputProps, name: name, formikAs: "select", onChange: (e) => {
+                            const selectedOption = enums?.values.find((option) => option.const.toString() === e.target.value);
+                            const selectedValue = selectedOption
+                                ? selectedOption.const
+                                : e.target.value;
+                            form?.setFieldValue(name, selectedValue);
+                        }, children: [_jsx("option", { value: "", disabled: false,
+                                hidden: true,
+                                ...uiSchema["ui:placeholderOptionOptions"]?.props, children: placeholder }), enums?.values.map((option, index) => (_jsx("option", { value: option.const.toString(), children: option.title }, index)))] }) }) }));
+        default:
+            return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(StringFieldWrapper, { children: _jsx(FieldInput, { type,
+                        placeholder,
+                        ...inputProps, name: name }) }) }));
+    }
+};

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { extractUiSchema } from "../../../utils";
+import { FormRegistry } from "../../FormRegistry";
+import { useSetDefault } from "../../hooks";
+export const TextAreaField = (props) => {
+    const { templates: { FieldTemplate }, components: { TextAreaFieldInput }, } = 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(TextAreaFieldInput, { ...inputProps, name: name, formikAs: "textarea" }) }));
+};

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

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

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

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+import { FieldInput } from "../../components/FieldInput";
+export const TextAreaFieldInput = styled(FieldInput) `
+  background-color: ${(props) => props.theme.background.input};
+  width: 100%;
+  min-height: 5rem;
+  color: ${(props) => props.theme.text.default};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.base};
+  padding: ${(props) => props.theme.spacing.s};
+`;

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

@@ -0,0 +1,12 @@
+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";
+export const ToggleField = (props) => {
+    const { templates: { FieldTemplate }, components: { ToggleFieldInput }, } = useContext(FormRegistry);
+    useSetDefault(props);
+    const { name, uiSchema } = props;
+    const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
+    return (_jsx(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsx(ToggleFieldInput, { inputProps: inputProps, name: name }) }));
+};

package/dist/esm/Form/fields/ToggleField/ToggleFieldInput.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FormRegistry } from "../../FormRegistry";
+export const ToggleFieldInput = ({ inputProps, name, className, }) => {
+    const { components: { ToggleFieldLabel, ToggleFieldInputElement, ToggleFieldToggle, }, } = useContext(FormRegistry);
+    return (_jsxs(ToggleFieldLabel, { className: className, children: [_jsx(ToggleFieldInputElement, { ...inputProps, name: name, type: "checkbox" }), _jsx(ToggleFieldToggle, {})] }));
+};

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

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

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

@@ -0,0 +1,50 @@
+import { styled } from "styled-components";
+import { FieldInput } from "../../components/FieldInput";
+export const ToggleFieldToggle = styled.span `
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: ${(props) => props.theme.intent.none};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: ${(props) => props.theme.borderRadius.circle};
+
+  &:before {
+    position: absolute;
+    content: "";
+    height: 0.9rem;
+    width: 0.9rem;
+    background: ${(props) => props.theme.background.default};
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: ${(props) => props.theme.borderRadius.circle};
+    top: 0.05rem;
+    left: 0.13rem;
+  }
+`;
+export const ToggleFieldLabel = styled.label `
+  position: relative;
+  display: inline-block;
+  width: 2rem;
+`;
+export const ToggleFieldInputElement = styled(FieldInput) `
+  opacity: 0;
+  width: 0;
+  height: 0;
+
+  &:checked + ${ToggleFieldToggle} {
+    //background: ${(props) => props.theme.background.input};
+  }
+
+  &:focus + ${ToggleFieldToggle} {
+    ${(props) => props.theme.focus.default};
+  }
+
+  &:checked + ${ToggleFieldToggle}:before {
+    transform: translateX(0.75rem);
+  }
+`;

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

@@ -0,0 +1,55 @@
+//Please keep this in alphabetical order
+import * as AnyField from "./AnyField";
+import * as ArrayField from "./ArrayField";
+import * as BooleanField from "./BooleanField";
+import * as DateField from "./DateField";
+import * as FileUploadField from "./FileUploadField";
+import * as MultipleChoiceField from "./MultipleChoiceField";
+import * as NullField from "./NullField";
+import * as NumberField from "./NumberField";
+import * as ObjectField from "./ObjectField";
+import * as RadioField from "./RadioField";
+import * as SchemaField from "./SchemaField";
+import * as SearchableMultiTagSelectField from "./SearchableMultiTagSelectField";
+import * as SearchableSelectField from "./SearchableSelectField";
+import * as StringField from "./StringField";
+import * as TextAreaField from "./TextAreaField";
+import * as ToggleField from "./ToggleField";
+//Please keep this in alphabetical order
+export const fieldComponents = {
+    //...AnyField.components, // AnyField doesn't have components
+    ...ArrayField.components,
+    ...BooleanField.components,
+    //...DateField.components, // DateField uses FieldInput (maybe it should wrap it)
+    ...FileUploadField.components,
+    ...MultipleChoiceField.components,
+    //...NullField.components, // NullField doesn't have components
+    //...NumberField.components, // NumberField uses StringField (maybe bit too directly)
+    ...ObjectField.components,
+    ...RadioField.components,
+    //...SchemaField.components,  // SchemaField doesn't have components
+    ...SearchableMultiTagSelectField.components,
+    ...SearchableSelectField.components,
+    //...StringField.components, // StringField uses FieldInput (maybe it should wrap it)
+    ...TextAreaField.components,
+    ...ToggleField.components,
+};
+//Please keep this in alphabetical order
+export const fields = {
+    ...AnyField.fields,
+    ...ArrayField.fields,
+    ...BooleanField.fields,
+    ...DateField.fields,
+    ...FileUploadField.fields,
+    ...MultipleChoiceField.fields,
+    ...NullField.fields,
+    ...NumberField.fields,
+    ...ObjectField.fields,
+    ...RadioField.fields,
+    ...SchemaField.fields,
+    ...SearchableMultiTagSelectField.fields,
+    ...SearchableSelectField.fields,
+    ...StringField.fields,
+    ...TextAreaField.fields,
+    ...ToggleField.fields,
+};

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

@@ -0,0 +1 @@
+export * from "./useSetDefault";

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

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useField } from "formik";
-import { getDefaultValueForType } from "../utils/getTypes";
+import { getDefaultValueForType } from "../../utils";
 export const useSetDefault = (props) => {
     if (!props.name) {
         return;

package/dist/esm/Form/index.js

@@ -0,0 +1,10 @@
+export * from "../utils";
+export * from "../common/types";
+export * from "../common/constants";
+export * from "../common/FileUploadContext";
+export * from "./hooks";
+import { fields as FormFields } from "./fields";
+import { components as FormComponents } from "./components";
+import { templates as FormTemplates } from "./templates";
+export * from "./Form";
+export { FormComponents, FormFields, FormTemplates };

package/dist/esm/Form/styles/common.js

@@ -0,0 +1,208 @@
+import { css } from "styled-components";
+import { darken, readableColor } from "polished";
+export const commonButtonStyles = css `
+  button {
+    background-color: ${(props) => props.theme.intent.none};
+    border: none;
+    font-size: ${(props) => props.theme.typography.size.base};
+    &:hover {
+      background: ${(props) => darken(0.1, props.theme.intent.none)};
+      color: ${(props) => readableColor(darken(0.1, props.theme.intent.none))};
+    }
+    padding: ${(props) => `${props.theme.spacing.m} ${props.theme.spacing.l}`};
+
+    &:focus {
+      ${(props) => props.theme.focus.default};
+    }
+  }
+`;
+export const commonInputStyles = css `
+  input {
+    background-color: ${(props) => props.theme.background.input};
+    border-radius: ${(props) => props.theme.borderRadius.none};
+    border: ${(props) => `${props.theme.strokeWidth.thin} solid
+        ${props.theme.border.default}`};
+    color: ${(props) => props.theme.text.default};
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    font-size: ${(props) => props.theme.typography.size.base};
+    padding: ${(props) => props.theme.spacing.s};
+
+    ::placeholder {
+      color: ${(props) => props.theme.text.muted};
+    }
+
+    &:focus {
+      ${(props) => props.theme.focus.default};
+    }
+  }
+`;
+export const commonCheckboxStyles = css `
+  input[type="checkbox"] {
+    margin-left: 0;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: ${(props) => props.theme.background.input};
+    border-radius: ${(props) => props.theme.borderRadius.none};
+    border: ${(props) => props.theme.strokeWidth.thin} solid
+      ${(props) => props.theme.border.default};
+    color: ${(props) => readableColor(props.theme.background.input)};
+    cursor: pointer;
+    display: grid;
+    font: inherit;
+    height: ${(props) => props.theme.spacing.l};
+    margin: 0;
+    place-content: center;
+    width: ${(props) => props.theme.spacing.l};
+
+    &:before {
+      background-color: CanvasText; //support for forced-colors
+      content: "";
+      width: ${(props) => props.theme.spacing.m};
+      height: ${(props) => props.theme.spacing.m};
+      transform: scale(0);
+      transition: 0.12s transform ease-in-out;
+      transform-origin: center;
+      clip-path: polygon(
+        34.469% 100%,
+        1.486% 62.13%,
+        1.486% 62.13%,
+        0.951% 61.408%,
+        0.535% 60.618%,
+        0.238% 59.777%,
+        0.059% 58.903%,
+        0% 58.011%,
+        0.059% 57.119%,
+        0.238% 56.244%,
+        0.535% 55.403%,
+        0.951% 54.613%,
+        1.486% 53.891%,
+        8.662% 45.652%,
+        8.662% 45.652%,
+        9.291% 45.037%,
+        9.979% 44.56%,
+        10.712% 44.218%,
+        11.474% 44.013%,
+        12.25% 43.945%,
+        13.027% 44.013%,
+        13.789% 44.218%,
+        14.521% 44.56%,
+        15.209% 45.037%,
+        15.838% 45.652%,
+        38.057% 71.162%,
+        85.648% 16.521%,
+        85.648% 16.521%,
+        86.277% 15.907%,
+        86.965% 15.429%,
+        87.697% 15.088%,
+        88.459% 14.883%,
+        89.236% 14.815%,
+        90.013% 14.883%,
+        90.775% 15.088%,
+        91.507% 15.429%,
+        92.195% 15.907%,
+        92.824% 16.521%,
+        100% 24.761%,
+        100% 24.761%,
+        100.535% 25.483%,
+        100.951% 26.273%,
+        101.248% 27.114%,
+        101.427% 27.989%,
+        101.486% 28.88%,
+        101.427% 29.772%,
+        101.248% 30.647%,
+        100.951% 31.488%,
+        100.535% 32.278%,
+        100% 33%,
+        41.645% 100%,
+        41.645% 100%,
+        41.016% 100.614%,
+        40.328% 101.092%,
+        39.596% 101.433%,
+        38.834% 101.638%,
+        38.057% 101.706%,
+        37.281% 101.638%,
+        36.519% 101.433%,
+        35.786% 101.092%,
+        35.098% 100.614%,
+        34.469% 100%
+      );
+    }
+
+    &:focus {
+      ${(props) => props.theme.focus.default};
+    }
+
+    &:checked {
+      background-color: ${(props) => props.theme.intent.none};
+
+      &:before {
+        transform: scale(1);
+      }
+    }
+  }
+`;
+export const commonRadioStyles = css `
+  input[type="radio"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: ${(props) => props.theme.background.input};
+    border-radius: ${(props) => props.theme.borderRadius.circle};
+    border: ${(props) => props.theme.strokeWidth.thin} solid
+      ${(props) => props.theme.border.default};
+    color: ${(props) => readableColor(props.theme.background.input)};
+    cursor: pointer;
+    display: grid;
+    font: inherit;
+    height: ${(props) => props.theme.spacing.l};
+    margin: 0;
+    place-content: center;
+    width: ${(props) => props.theme.spacing.l};
+
+    &:before {
+      background-color: CanvasText; //support for forced-colors
+      border-radius: ${(props) => props.theme.borderRadius.circle};
+      content: "";
+      display: inline-block;
+      height: ${(props) => props.theme.spacing.s};
+      transform: scale(0);
+      transition: 0.12s transform ease-in-out;
+      width: ${(props) => props.theme.spacing.s};
+    }
+
+    &:focus {
+      ${(props) => props.theme.focus.default};
+    }
+
+    &:checked {
+      background-color: ${(props) => props.theme.intent.none};
+
+      &:before {
+        transform: scale(1);
+      }
+    }
+  }
+`;
+export const commonSelectStyles = css `
+  select {
+    background-color: ${(props) => props.theme.background.input};
+    border-radius: ${(props) => props.theme.borderRadius.none};
+    border: ${(props) => `${props.theme.strokeWidth.thin} solid
+        ${props.theme.border.default}`};
+    color: ${(props) => props.theme.text.default};
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    font-size: ${(props) => props.theme.typography.size.base};
+    font-weight: ${(props) => props.theme.typography.weight.base};
+    padding: ${(props) => `${props.theme.spacing.s}`};
+
+    &:focus {
+      ${(props) => props.theme.focus.default};
+    }
+  }
+`;
+export const datePickerIconStyles = css `
+    ::-webkit-calendar-picker-indicator {
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="${(props) => props.theme.text.default}" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
+
+        cursor: pointer;
+    }
+`;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { getIn, useFormikContext } from "formik";
+import { extractUiSchema, getDescription, getTitle } from "../../../utils";
+import { FormRegistry } from "../../FormRegistry";
+import { getComponents } from "./styledComponents";
+export const ArrayFieldTemplate = (props) => {
+    const { components } = useContext(FormRegistry);
+    const { Wrapper, Title, Description, Help, Info, RequiredIndicator, ErrorMessage, } = getComponents(components);
+    const { name, uiSchema, children, ...otherProps } = props;
+    const title = getTitle(props);
+    const description = getDescription(props);
+    const { help, info, props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
+    const dataAttributes = Object.keys(otherProps)
+        .filter((key) => key.startsWith("data-"))
+        .reduce((acc, key) => {
+        acc[key] = otherProps[key];
+        return acc;
+    }, {});
+    const mergedWrapperProps = {
+        ...wrapperProps,
+        ...dataAttributes,
+    };
+    // These lines make sure the error message is a string, which means the error
+    // is actually for the whole Array component, not for one of the children.
+    const { errors } = useFormikContext();
+    const error = getIn(errors, name);
+    // In case of array of objects, it will give error message as an object value,
+    // which is incorrect value for React, causing UI to crash.
+    const errorIsString = typeof error === "string";
+    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [title && (_jsxs(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, {})] })), info && _jsx(Info, { ...info }), description && (_jsx(Description, { ...descriptionProps, children: description })), children, help && _jsx(Help, { ...helpProps, children: help }), errorIsString && _jsx(ErrorMessage, { ...errorProps, name: name })] }));
+};

package/dist/esm/Form/templates/ArrayFieldTemplate/index.js

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

package/dist/esm/Form/templates/ArrayFieldTemplate/styledComponents.js

@@ -0,0 +1,21 @@
+export const ArrayFieldTemplateWrapper = undefined;
+export const ArrayFieldTemplateIcon = undefined;
+export const ArrayFieldTemplateTitle = undefined;
+export const ArrayFieldTemplateDescription = undefined;
+export const ArrayFieldTemplateHelp = undefined;
+export const ArrayFieldTemplateInfo = undefined;
+export const ArrayFieldTemplateRequiredIndicator = undefined;
+export const ArrayFieldTemplateErrorMessage = undefined;
+export function getComponents(components) {
+    return {
+        Wrapper: components.ArrayFieldTemplateWrapper ??
+            components.ObjectFieldTemplateWrapper,
+        Title: components.ArrayFieldTemplateTitle ?? components.ObjectFieldTemplateTitle,
+        Description: components.ArrayFieldTemplateDescription ?? components.FieldDescription,
+        Help: components.ArrayFieldTemplateHelp ?? components.FieldHelp,
+        Info: components.ArrayFieldTemplateInfo ?? components.FieldInfo,
+        RequiredIndicator: components.ArrayFieldTemplateRequiredIndicator ??
+            components.RequiredIndicator,
+        ErrorMessage: components.ArrayFieldTemplateErrorMessage ?? components.ErrorMessage,
+    };
+}

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useMemo, useState } from "react";
+import { extractUiSchema, getDescription, getTitle } from "../../../utils";
+import { FormRegistry } from "../../FormRegistry";
+import { getComponents } from "./styledComponents";
+export const CollapsibleObjectFieldTemplate = (props) => {
+    const { components } = useContext(FormRegistry);
+    const { Toggle, ChildWrapper, RequiredIndicator, Icon, Description, Title, Wrapper, Help, Info, } = getComponents(components);
+    const { children, name, uiSchema, ...otherProps } = props;
+    const title = getTitle(props);
+    const description = getDescription(props);
+    const { help, info, 
+    //TODO: This is not right
+    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, isCollapsedOnLoad = true, openIcon, collapsedIcon, ariaLabel,
+    // error: errorProps,
+     } = {}, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
+    const dataAttributes = Object.keys(otherProps)
+        .filter((key) => key.startsWith("data-"))
+        .reduce((acc, key) => {
+        acc[key] = otherProps[key];
+        return acc;
+    }, {});
+    const mergedWrapperProps = {
+        ...wrapperProps,
+        ...dataAttributes,
+    };
+    const [collapsed, setCollapsed] = useState(isCollapsedOnLoad);
+    const hide = collapsed;
+    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [title && (_jsx(Toggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel ?? name, children: _jsxs(Title, { style: { display: "flex", alignItems: "center" }, ...titleProps, children: [title, props?.required && _jsx(RequiredIndicator, {}), _jsx(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && _jsx(Info, { ...info }), description && (_jsx(Description, { ...descriptionProps, children: description })), !hide && _jsx(Wrapper, { children: children }), help && _jsx(Help, { ...helpProps, children: help })] }));
+};

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

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

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

@@ -0,0 +1,42 @@
+import { styled } from "styled-components";
+import { Clickable } from "../../components/Clickable";
+export const CollapsibleObjectFieldTemplateWrapper = undefined;
+export const CollapsibleObjectFieldTemplateIcon = undefined;
+export const CollapsibleObjectFieldTemplateTitle = undefined;
+export const CollapsibleObjectFieldTemplateDescription = undefined;
+export const CollapsibleObjectFieldTemplateHelp = undefined;
+export const CollapsibleObjectFieldTemplateInfo = undefined;
+export const CollapsibleObjectFieldTemplateRequiredIndicator = undefined;
+export const CollapsibleObjectFieldTemplateErrorMessage = undefined;
+export const CollapsibleObjectFieldTemplateToggle = styled(Clickable) `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+export const CollapsibleObjectFieldTemplateChildWrapper = styled.div ``;
+export function getComponents(components) {
+    return {
+        Wrapper: components.CollapsibleObjectFieldTemplateWrapper ??
+            components.ObjectFieldTemplateWrapper,
+        Icon: components.CollapsibleObjectFieldTemplateIcon ?? components.Icon,
+        Title: components.CollapsibleObjectFieldTemplateTitle ??
+            components.ObjectFieldTemplateTitle,
+        Description: components.CollapsibleObjectFieldTemplateDescription ??
+            components.ObjectFieldTemplateDescription ??
+            components.FieldDescription,
+        Help: components.CollapsibleObjectFieldTemplateHelp ??
+            components.ObjectFieldTemplateHelp ??
+            components.FieldHelp,
+        Info: components.CollapsibleObjectFieldTemplateInfo ??
+            components.ObjectFieldTemplateInfo ??
+            components.FieldInfo,
+        RequiredIndicator: components.CollapsibleObjectFieldTemplateRequiredIndicator ??
+            components.ObjectFieldTemplateRequiredIndicator ??
+            components.RequiredIndicator,
+        ErrorMessage: components.CollapsibleObjectFieldTemplateErrorMessage ??
+            components.ObjectFieldTemplateErrorMessage ??
+            components.ErrorMessage,
+        Toggle: components.CollapsibleObjectFieldTemplateToggle,
+        ChildWrapper: components.CollapsibleObjectFieldTemplateToggle,
+    };
+}

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

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
-import { FormRegistry } from "../Form";
-import { getDescription, getTitle } from "../utils";
-import { useExtractUiSchema } from "../hooks";
+import { useContext, useMemo } from "react";
+import { extractUiSchema, getDescription, getTitle } from "../../../utils";
+import { FormRegistry } from "../../FormRegistry";
 export const FieldTemplate = (props) => {
-    const { components: { FieldWrapper, FieldTitle, FieldDescription, ErrorMessage, FieldHelp, RequiredIndicator, InfoFieldButton, }, } = useContext(FormRegistry);
+    const { components: { FieldWrapper, FieldTitle, FieldDescription, ErrorMessage, FieldHelp, RequiredIndicator, FieldInfo, }, } = useContext(FormRegistry);
     const { name, uiSchema, children, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
-    const { help, info, props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useExtractUiSchema(uiSchema);
+    const { help, info, props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const dataAttributes = Object.keys(otherProps)
         .filter((key) => key.startsWith("data-"))
         .reduce((acc, key) => {
@@ -20,5 +19,5 @@ export const FieldTemplate = (props) => {
         ...wrapperProps,
         ...dataAttributes, // This will only include data-* attributes
     };
-    return (_jsxs(FieldWrapper, { ...mergedWrapperProps, children: [title && (_jsxs(FieldTitle, { ...titleProps, htmlFor: name, children: [title, props.required && _jsx(RequiredIndicator, { children: "*" })] })), info && _jsx(InfoFieldButton, { ...info }), description && (_jsx(FieldDescription, { ...descriptionProps, children: description })), children, help && _jsx(FieldHelp, { ...helpProps, children: help }), _jsx(ErrorMessage, { ...errorProps, name: name })] }));
+    return (_jsxs(FieldWrapper, { ...mergedWrapperProps, children: [title && (_jsxs(FieldTitle, { ...titleProps, htmlFor: name, children: [title, props.required && _jsx(RequiredIndicator, {})] })), info && _jsx(FieldInfo, { ...info }), description && (_jsx(FieldDescription, { ...descriptionProps, children: description })), children, help && _jsx(FieldHelp, { ...helpProps, children: help }), _jsx(ErrorMessage, { ...errorProps, name: name })] }));
 };

package/dist/esm/Form/templates/FieldTemplate/index.js

@@ -0,0 +1 @@
+export * as templates from "./FieldTemplate";

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { extractUiSchema, getDescription, getTitle } from "../../../utils";
+import { FormRegistry } from "../../FormRegistry";
+import { getComponents } from "./styledComponents";
+export const ObjectFieldTemplate = (props) => {
+    const { components } = useContext(FormRegistry);
+    const { Wrapper, Title, Description, Help, Info, RequiredIndicator, ErrorMessage, } = getComponents(components);
+    const { children, uiSchema, ...otherProps } = props;
+    const title = getTitle(props);
+    const description = getDescription(props);
+    const { help, info, 
+    //TODO: This is not right
+    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps,
+    // error: errorProps,
+     } = {}, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
+    const dataAttributes = Object.keys(otherProps)
+        .filter((key) => key.startsWith("data-"))
+        .reduce((acc, key) => {
+        acc[key] = otherProps[key];
+        return acc;
+    }, {});
+    const mergedWrapperProps = {
+        ...wrapperProps,
+        ...dataAttributes,
+    };
+    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [title && (_jsxs(Title, { ...titleProps, children: [title, props?.required && _jsx(RequiredIndicator, {})] })), info && _jsx(Info, { ...info }), description && (_jsx(Description, { ...descriptionProps, children: description })), children, help && _jsx(Help, { ...helpProps, children: help })] }));
+};

package/dist/esm/Form/templates/ObjectFieldTemplate/index.js

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