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

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

@@ -0,0 +1,28 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fields = exports.components = void 0;
+exports.components = __importStar(require("./styledComponents"));
+exports.fields = __importStar(require("./TextAreaField"));

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

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextAreaFieldInput = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const FieldInput_1 = require("../../components/FieldInput");
+exports.TextAreaFieldInput = (0, styled_components_1.default)(FieldInput_1.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/cjs/{fields → Form/fields/ToggleField}/ToggleField.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Form_1 = require("../Form");
-const hooks_1 = require("../hooks");
+const utils_1 = require("../../../utils");
+const hooks_1 = require("../../hooks");
+const FormRegistry_1 = require("../../FormRegistry");
 const ToggleField = (props) => {
-    const { templates: { FieldTemplate }, components: { ToggleSwitchField }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { templates: { FieldTemplate }, components: { ToggleFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
-    const { props: inputProps } = (0, hooks_1.useExtractUiSchema)(uiSchema);
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(ToggleSwitchField, { ...inputProps, name: name }) }));
+    const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: (0, jsx_runtime_1.jsx)(ToggleFieldInput, { inputProps: inputProps, name: name }) }));
 };
 exports.ToggleField = ToggleField;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleFieldInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const FormRegistry_1 = require("../../FormRegistry");
+const ToggleFieldInput = ({ inputProps, name, className, }) => {
+    const { components: { ToggleFieldLabel, ToggleFieldInputElement, ToggleFieldToggle, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    return ((0, jsx_runtime_1.jsxs)(ToggleFieldLabel, { className: className, children: [(0, jsx_runtime_1.jsx)(ToggleFieldInputElement, { ...inputProps, name: name, type: "checkbox" }), (0, jsx_runtime_1.jsx)(ToggleFieldToggle, {})] }));
+};
+exports.ToggleFieldInput = ToggleFieldInput;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.components = exports.fields = void 0;
+const ToggleFieldInput_1 = require("./ToggleFieldInput");
+const styledComponents = __importStar(require("./styledComponents"));
+exports.fields = __importStar(require("./ToggleField"));
+const components = { ...styledComponents, ToggleFieldInput: ToggleFieldInput_1.ToggleFieldInput };
+exports.components = components;

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleFieldInputElement = exports.ToggleFieldLabel = exports.ToggleFieldToggle = void 0;
+const styled_components_1 = require("styled-components");
+const FieldInput_1 = require("../../components/FieldInput");
+exports.ToggleFieldToggle = styled_components_1.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;
+  }
+`;
+exports.ToggleFieldLabel = styled_components_1.styled.label `
+  position: relative;
+  display: inline-block;
+  width: 2rem;
+`;
+exports.ToggleFieldInputElement = (0, styled_components_1.styled)(FieldInput_1.FieldInput) `
+  opacity: 0;
+  width: 0;
+  height: 0;
+
+  &:checked + ${exports.ToggleFieldToggle} {
+    //background: ${(props) => props.theme.background.input};
+  }
+
+  &:focus + ${exports.ToggleFieldToggle} {
+    ${(props) => props.theme.focus.default};
+  }
+
+  &:checked + ${exports.ToggleFieldToggle}:before {
+    transform: translateX(0.75rem);
+  }
+`;

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

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fields = exports.fieldComponents = void 0;
+//Please keep this in alphabetical order
+const AnyField = __importStar(require("./AnyField"));
+const ArrayField = __importStar(require("./ArrayField"));
+const BooleanField = __importStar(require("./BooleanField"));
+const DateField = __importStar(require("./DateField"));
+const FileUploadField = __importStar(require("./FileUploadField"));
+const MultipleChoiceField = __importStar(require("./MultipleChoiceField"));
+const NullField = __importStar(require("./NullField"));
+const NumberField = __importStar(require("./NumberField"));
+const ObjectField = __importStar(require("./ObjectField"));
+const RadioField = __importStar(require("./RadioField"));
+const SchemaField = __importStar(require("./SchemaField"));
+const SearchableMultiTagSelectField = __importStar(require("./SearchableMultiTagSelectField"));
+const SearchableSelectField = __importStar(require("./SearchableSelectField"));
+const StringField = __importStar(require("./StringField"));
+const TextAreaField = __importStar(require("./TextAreaField"));
+const ToggleField = __importStar(require("./ToggleField"));
+//Please keep this in alphabetical order
+exports.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
+exports.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/cjs/{hooks → Form/hooks}/index.js

@@ -14,5 +14,4 @@ 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("./useExtractUiSchema"), exports);
 __exportStar(require("./useSetDefault"), exports);

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSetDefault = void 0;
 const react_1 = require("react");
 const formik_1 = require("formik");
-const getTypes_1 = require("../utils/getTypes");
+const utils_1 = require("../../utils");
 const useSetDefault = (props) => {
     if (!props.name) {
         return;
@@ -15,7 +15,7 @@ const useSetDefault = (props) => {
                 setValue(props.schema.default);
             }
             else if (props.forceDefaultValue) {
-                setValue((0, getTypes_1.getDefaultValueForType)(props.schema.type));
+                setValue((0, utils_1.getDefaultValueForType)(props.schema.type));
             }
         }
     }, []);

package/dist/cjs/Form/index.js

@@ -0,0 +1,29 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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.FormTemplates = exports.FormFields = exports.FormComponents = void 0;
+__exportStar(require("../utils"), exports);
+__exportStar(require("../common/types"), exports);
+__exportStar(require("../common/constants"), exports);
+__exportStar(require("../common/FileUploadContext"), exports);
+__exportStar(require("./hooks"), exports);
+const fields_1 = require("./fields");
+Object.defineProperty(exports, "FormFields", { enumerable: true, get: function () { return fields_1.fields; } });
+const components_1 = require("./components");
+Object.defineProperty(exports, "FormComponents", { enumerable: true, get: function () { return components_1.components; } });
+const templates_1 = require("./templates");
+Object.defineProperty(exports, "FormTemplates", { enumerable: true, get: function () { return templates_1.templates; } });
+__exportStar(require("./Form"), exports);

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

@@ -0,0 +1,211 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.datePickerIconStyles = exports.commonSelectStyles = exports.commonRadioStyles = exports.commonCheckboxStyles = exports.commonInputStyles = exports.commonButtonStyles = void 0;
+const styled_components_1 = require("styled-components");
+const polished_1 = require("polished");
+exports.commonButtonStyles = (0, styled_components_1.css) `
+  button {
+    background-color: ${(props) => props.theme.intent.none};
+    border: none;
+    font-size: ${(props) => props.theme.typography.size.base};
+    &:hover {
+      background: ${(props) => (0, polished_1.darken)(0.1, props.theme.intent.none)};
+      color: ${(props) => (0, polished_1.readableColor)((0, polished_1.darken)(0.1, props.theme.intent.none))};
+    }
+    padding: ${(props) => `${props.theme.spacing.m} ${props.theme.spacing.l}`};
+
+    &:focus {
+      ${(props) => props.theme.focus.default};
+    }
+  }
+`;
+exports.commonInputStyles = (0, styled_components_1.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};
+    }
+  }
+`;
+exports.commonCheckboxStyles = (0, styled_components_1.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) => (0, polished_1.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);
+      }
+    }
+  }
+`;
+exports.commonRadioStyles = (0, styled_components_1.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) => (0, polished_1.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);
+      }
+    }
+  }
+`;
+exports.commonSelectStyles = (0, styled_components_1.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};
+    }
+  }
+`;
+exports.datePickerIconStyles = (0, styled_components_1.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/cjs/{templates → Form/templates/ArrayFieldTemplate}/ArrayFieldTemplate.js

@@ -3,19 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArrayFieldTemplate = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Form_1 = require("../Form");
-const utils_1 = require("../utils");
-const hooks_1 = require("../hooks");
-const styledComponents_1 = require("../styledComponents");
 const formik_1 = require("formik");
+const utils_1 = require("../../../utils");
+const FormRegistry_1 = require("../../FormRegistry");
+const styledComponents_1 = require("./styledComponents");
 const ArrayFieldTemplate = (props) => {
-    const { components: { ArrayFieldWrapper, ArrayFieldTitle, FieldDescription, ErrorMessage, FieldHelp, InfoFieldButton, }, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { components } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { Wrapper, Title, Description, Help, Info, RequiredIndicator, ErrorMessage, } = (0, styledComponents_1.getComponents)(components);
     const { name, uiSchema, children, ...otherProps } = props;
     const title = (0, utils_1.getTitle)(props);
     const description = (0, utils_1.getDescription)(props);
-    const { help, info, 
-    //TODO: This is not right
-    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const { help, info, props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const dataAttributes = Object.keys(otherProps)
         .filter((key) => key.startsWith("data-"))
         .reduce((acc, key) => {
@@ -33,6 +31,6 @@ const ArrayFieldTemplate = (props) => {
     // 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 ((0, jsx_runtime_1.jsxs)(ArrayFieldWrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(ArrayFieldTitle, { ...titleProps, htmlFor: name, children: [title, props?.required && (0, jsx_runtime_1.jsx)(styledComponents_1.RequiredIndicator, { children: "*" })] })), info && (0, jsx_runtime_1.jsx)(InfoFieldButton, { ...info }), description && ((0, jsx_runtime_1.jsx)(FieldDescription, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(FieldHelp, { ...helpProps, children: help }), errorIsString && (0, jsx_runtime_1.jsx)(ErrorMessage, { ...errorProps, name: name })] }));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {})] })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help }), errorIsString && (0, jsx_runtime_1.jsx)(ErrorMessage, { ...errorProps, name: name })] }));
 };
 exports.ArrayFieldTemplate = ArrayFieldTemplate;

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

@@ -0,0 +1,28 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.templates = exports.components = void 0;
+exports.components = __importStar(require("./styledComponents"));
+exports.templates = __importStar(require("./ArrayFieldTemplate"));

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrayFieldTemplateErrorMessage = exports.ArrayFieldTemplateRequiredIndicator = exports.ArrayFieldTemplateInfo = exports.ArrayFieldTemplateHelp = exports.ArrayFieldTemplateDescription = exports.ArrayFieldTemplateTitle = exports.ArrayFieldTemplateIcon = exports.ArrayFieldTemplateWrapper = void 0;
+exports.getComponents = getComponents;
+exports.ArrayFieldTemplateWrapper = undefined;
+exports.ArrayFieldTemplateIcon = undefined;
+exports.ArrayFieldTemplateTitle = undefined;
+exports.ArrayFieldTemplateDescription = undefined;
+exports.ArrayFieldTemplateHelp = undefined;
+exports.ArrayFieldTemplateInfo = undefined;
+exports.ArrayFieldTemplateRequiredIndicator = undefined;
+exports.ArrayFieldTemplateErrorMessage = undefined;
+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/cjs/Form/templates/ArrayFieldTemplate/types.js

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

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleObjectFieldTemplate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../../utils");
+const FormRegistry_1 = require("../../FormRegistry");
+const styledComponents_1 = require("./styledComponents");
+const CollapsibleObjectFieldTemplate = (props) => {
+    const { components } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { Toggle, ChildWrapper, RequiredIndicator, Icon, Description, Title, Wrapper, Help, Info, } = (0, styledComponents_1.getComponents)(components);
+    const { children, name, uiSchema, ...otherProps } = props;
+    const title = (0, utils_1.getTitle)(props);
+    const description = (0, utils_1.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,
+     } = {}, } = (0, react_1.useMemo)(() => (0, utils_1.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] = (0, react_1.useState)(isCollapsedOnLoad);
+    const hide = collapsed;
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsx)(Toggle, { onClick: () => setCollapsed(!collapsed), ariaExpanded: !hide, ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(Title, { style: { display: "flex", alignItems: "center" }, ...titleProps, 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)(Wrapper, { children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
+};
+exports.CollapsibleObjectFieldTemplate = CollapsibleObjectFieldTemplate;