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

package/README.md

@@ -86,13 +86,13 @@ Most of those elements take a string for value, but `ui:info` takes an object wi
 - `content` for the content of the popup container, and
 - `position` taking a string of either "top", "bottom", "left" or "right" (if not provided, default value is "top")
 
-All elements of `ui:info` are customisable. The styledComponent is called `InfoFieldButton` and it consists of the following elements:
+All elements of `ui:info` are customisable. The styledComponent is called `FieldInfo` and it consists of the following elements:
 
-- InfoFieldContainerElement
-- InfoFieldBoxElement
-- InfoFieldBoxInnerElement
-- InfoFieldBoxArrowElement
-- InfoFieldLabel
+- FieldInfoContainer
+- FieldInfoBoxElement
+- FieldInfoBoxInnerElement
+- FieldInfoBoxArrowElement
+- FieldInfoLabel
 
 ```tsx
 import { Form } from "@nolwenture/formik-jsonschema-form";
@@ -212,18 +212,18 @@ return (
 );
 ```
 
-And another example how to override `InfoFieldButton`:
+And another example how to override `FieldInfo`:
 
 ```tsx
-const CustomInfoFieldButton = styled(InfoFieldButton)`
+const CustomFieldInfo = styled(FieldInfo)`
   outline: 2px red solid;
   margin: 0.5em;
-  ${InfoFieldButton.styles.InfoFieldBoxInnerElementStyle} {
+  ${FieldInfo.styles.FieldInfoBoxInnerElementStyle} {
     min-width: 200px;
     background: orange;
     color: blue;
   }
-  ${InfoFieldButton.styles.InfoFieldLabelStyle} {
+  ${FieldInfo.styles.FieldInfoLabelStyle} {
     color: green;
   }
 `;
@@ -236,7 +236,7 @@ return (
       schema={schema}
       uiSchema={uiSchema}
       components={{
-        InfoFieldButton: CustomInfoFieldButton,
+        FieldInfo: CustomFieldInfo,
       }}
     ></Form>
   </Formik>
@@ -407,7 +407,7 @@ export function MyFormComponent() {
 ### Enum fields
 
 Enum fields are fields with multiple options to either choose `oneOf` or `anyOf` from.
-There is an alternative field implementation for "anyOf" that when given `"ui:field": "SearchMultiTagSelectField"` results in a searchable multi tag select field.
+There is an alternative field implementation for "anyOf" that when given `"ui:field": "SearchableMultiTagSelectField"` results in a searchable multi tag select field.
 
 A searchable single select field is also available for `oneOf` and `enum`. To use it, add the following to the field's uiSchema: `"ui:field": "SearchableSelectField"`
 
@@ -468,7 +468,7 @@ const schema = {
 
 const uiSchema = {
   enumTagSelectAnyOf: {
-    "ui:field": "SearchMultiTagSelectField",
+    "ui:field": "SearchableMultiTagSelectField",
     "ui:options": {
       placeholder: "Search...",
       emptySearchMessage: "...no matching results found",
@@ -989,6 +989,25 @@ const uiSchema = {
 };
 ```
 
+Order can be used to group items inside object to sections.
+
+```tsx
+const schema = {
+  properties: {
+    firstField: { type: "string" },
+    secondField: { type: "string" },
+    thirdField: { type: "string" },
+  },
+};
+
+const uiSchema = {
+  "ui:order": [
+    "firstField",
+    {title: "More fields", fields: ["secondField", "thirdField"] collapsible: true}
+  ],
+};
+```
+
 In this example, the resulting order would be ["secondField", "firstField", "thirdField"].
 
 Wildcard `"*"` and `hidden fields` cannot be combined.

package/dist/cjs/Form/Form.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const formik_1 = require("formik");
+const utils_1 = require("../utils");
+const FormRegistry_1 = require("./FormRegistry");
+const components_1 = require("./components");
+const fields_1 = require("./fields");
+const templates_1 = require("./templates");
+const Form = (props) => {
+    (0, utils_1.warnFromUnsupportedKeys)("Form", props, [
+        "schema",
+        "onSubmit",
+        "uiSchema",
+        "className",
+        "formData",
+        "className",
+        "children",
+        "fields",
+        "formContext",
+        "components",
+        "hideUnmarkedAdditionalProperties",
+    ]);
+    const { isSubmitting } = (0, formik_1.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 registry = {
+        fields: {
+            ...fields_1.fields,
+            ...fields,
+        },
+        templates: { ...templates_1.templates, ...templates },
+        components: {
+            ...components_1.components,
+            ...components,
+        },
+        definitions: schemaDefinitions,
+        uiSchemaDefinitions,
+        formContext,
+        useItemsAsAdditionalItems,
+        hideUnmarkedAdditionalProperties,
+    };
+    const { Form: FormEl, FormButton, FormButtonWrapper } = registry.components;
+    const SchemaField = registry.fields.SchemaField;
+    return ((0, jsx_runtime_1.jsx)(FormRegistry_1.FormRegistry.Provider, { value: registry, children: (0, jsx_runtime_1.jsxs)(FormEl, { className: className, children: [(0, jsx_runtime_1.jsx)(SchemaField, { name: "", schema: schema, uiSchema: uiSchema }), children ? (children) : ((0, jsx_runtime_1.jsx)(FormButtonWrapper, { children: !hideSubmit && ((0, jsx_runtime_1.jsx)(FormButton, { type: "submit", disabled: isSubmitting, children: "Send" })) }))] }) }));
+};
+exports.Form = Form;

package/dist/cjs/Form/FormRegistry.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.FormRegistry = void 0;
+const react_1 = __importDefault(require("react"));
+exports.FormRegistry = react_1.default.createContext({
+    fields: {},
+    templates: {},
+    components: {},
+    definitions: {},
+    uiSchemaDefinitions: {},
+    formContext: {},
+    useItemsAsAdditionalItems: false,
+    hideUnmarkedAdditionalProperties: false,
+});

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Clickable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = require("styled-components");
+const ClickableEl = styled_components_1.styled.button `
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  outline: inherit;
+  cursor: pointer;
+`;
+const Clickable = ({ children, onClick, onMouseUp = () => { }, onMouseDown = () => { }, innerRef = () => { }, className, ariaLabel, ariaExpanded = false, ariaControls, id, }) => {
+    return ((0, jsx_runtime_1.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 }));
+};
+exports.Clickable = Clickable;

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

@@ -0,0 +1,32 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const formik = __importStar(require("formik"));
+exports.ErrorMessage = (0, styled_components_1.default)(formik.ErrorMessage) ``;

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

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldInfo = exports.FieldInfoLabel = exports.FieldInfoContainer = exports.FieldInfoBoxInnerElement = exports.FieldInfoBoxArrowElement = exports.FieldInfoBoxElement = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = require("styled-components");
+const polished_1 = require("polished");
+exports.FieldInfoBoxElement = styled_components_1.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"}
+  );
+`;
+exports.FieldInfoBoxArrowElement = styled_components_1.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;
+`;
+exports.FieldInfoBoxInnerElement = styled_components_1.styled.div `
+  background: ${(props) => props.theme.color.intent.default.none};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.intent.default.none}`};
+  border-radius: ${(props) => props.theme.borderRadius.none};
+  color: ${(props) => (0, polished_1.readableColor)(props.theme.color.text.default)};
+  cursor: default;
+  padding: ${(props) => `${props.theme.spacing.xs} ${props.theme.spacing.s}`};
+  text-align: center;
+`;
+exports.FieldInfoContainer = styled_components_1.styled.a `
+  position: relative;
+  color: ${(props) => props.theme.color.text.default};
+  background: none;
+  outline: none;
+  cursor: pointer;
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid
+      ${props.theme.color.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) => (0, polished_1.readableColor)(props.theme.color.text.default)};
+    background: ${(props) => props.theme.color.text.default};
+    ${exports.FieldInfoBoxElement} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+`;
+exports.FieldInfoLabel = styled_components_1.styled.span ``;
+const FieldInfo = ({ label, content, position, props, className, }) => {
+    return ((0, jsx_runtime_1.jsxs)(exports.FieldInfoContainer, { href: "#", onClick: (e) => e.preventDefault(), className: className, children: [(0, jsx_runtime_1.jsx)(exports.FieldInfoLabel, { children: label ?? "i" }), (0, jsx_runtime_1.jsxs)(exports.FieldInfoBoxElement, { position: position ?? "top", role: "tooltip", children: [(0, jsx_runtime_1.jsx)(exports.FieldInfoBoxArrowElement, { position: position ?? "top" }), (0, jsx_runtime_1.jsx)(exports.FieldInfoBoxInnerElement, { children: content })] })] }));
+};
+exports.FieldInfo = FieldInfo;

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

@@ -0,0 +1,64 @@
+"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.SelectFieldInput = exports.FieldInput = exports.FieldHelp = exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = require("styled-components");
+const formik = __importStar(require("formik"));
+exports.FieldWrapper = styled_components_1.styled.div `
+  margin: ${(props) => `${props.theme.spacing.s} 0`};
+  color: ${(props) => props.theme.color.text.default};
+`;
+exports.FieldTitle = styled_components_1.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.color.text.default};
+`;
+exports.FieldDescription = styled_components_1.styled.p `
+  color: ${(props) => props.theme.color.text.default};
+  margin: 0;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.base};
+`;
+exports.FieldHelp = styled_components_1.styled.p `
+  color: ${(props) => props.theme.color.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.
+ *
+ */
+exports.FieldInput = (0, styled_components_1.styled)(({ formikAs, ...props }) => {
+    return (0, jsx_runtime_1.jsx)(formik.Field, { ...props, as: formikAs });
+}) ``;
+exports.SelectFieldInput = (0, styled_components_1.styled)(exports.FieldInput) `
+  &[readonly] {
+    pointer-events: none;
+  }
+`;

package/dist/cjs/Form/components/Form.js

@@ -0,0 +1,54 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormButton = exports.FormButtonWrapper = exports.Form = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const formik = __importStar(require("formik"));
+const common_1 = require("../styles/common");
+exports.Form = (0, styled_components_1.default)(formik.Form) `
+  ${common_1.commonCheckboxStyles}
+
+  ${common_1.commonRadioStyles}
+
+    color: ${(props) => props.theme.color.text.default};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+
+  ${common_1.commonButtonStyles}
+
+  ${common_1.commonInputStyles}
+
+    ${common_1.commonSelectStyles}
+
+    :focus {
+    ${(props) => props.theme.focus.default};
+  }
+`;
+exports.FormButtonWrapper = styled_components_1.default.div ``;
+exports.FormButton = styled_components_1.default.button `
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+`;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const styled_components_1 = require("styled-components");
+exports.Icon = styled_components_1.styled.div `
+  padding: ${(props) => `0 ${props.theme.spacing.s}`};
+`;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RequiredIndicator = void 0;
+const styled_components_1 = require("styled-components");
+exports.RequiredIndicator = styled_components_1.styled.span `
+  ::before {
+    content: "*";
+  }
+`;

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

@@ -0,0 +1,48 @@
+"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 = void 0;
+const fields_1 = require("../fields");
+const templates_1 = require("../templates");
+//Please keep this in alphabetical order
+const Clickable = __importStar(require("./Clickable"));
+const ErrorMessage = __importStar(require("./ErrorMessage"));
+const FieldInfo = __importStar(require("./FieldInfo"));
+const Field = __importStar(require("./FieldInput"));
+const Form = __importStar(require("./Form"));
+const Icon = __importStar(require("./Icon"));
+const RequiredIndicator = __importStar(require("./RequiredIndicator"));
+exports.components = {
+    ...fields_1.fieldComponents,
+    ...templates_1.templateComponents,
+    //Please keep this in alphabetical order
+    ...Clickable,
+    ...ErrorMessage,
+    ...FieldInfo,
+    ...Field,
+    ...Form,
+    ...Icon,
+    ...RequiredIndicator,
+};

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

@@ -4,9 +4,10 @@ exports.AnyField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const formik_1 = require("formik");
-const utils_1 = require("../utils");
-const SchemaField_1 = require("./SchemaField");
-const types_1 = require("./types");
+const utils_1 = require("../../../utils");
+const constants_1 = require("../../../common/constants");
+const SchemaField_1 = require("../SchemaField/SchemaField");
+const styledComponents_1 = require("./styledComponents");
 const AnyField = (props) => {
     const { name, schema, uiSchema } = props;
     const [{ value }] = (0, formik_1.useField)(name);
@@ -21,6 +22,6 @@ const AnyField = (props) => {
                 return { ...(schema || {}), type };
         }
     }, [type, schema]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("select", { value: type, onChange: (event) => setType(event.target.value), children: Object.keys(types_1.COMPONENT_TYPES).map((type) => ((0, jsx_runtime_1.jsx)("option", { value: type, children: type }, type))) }), (0, jsx_runtime_1.jsx)(SchemaField_1.SchemaField, { name: name, schema: enrichedSchema, uiSchema: uiSchema })] }));
+    return ((0, jsx_runtime_1.jsxs)(styledComponents_1.AnyFieldWrapper, { children: [(0, jsx_runtime_1.jsx)("select", { value: type, onChange: (event) => setType(event.target.value), children: Object.keys(constants_1.COMPONENT_TYPES).map((type) => ((0, jsx_runtime_1.jsx)("option", { value: type, children: type }, type))) }), (0, jsx_runtime_1.jsx)(SchemaField_1.SchemaField, { name: name, schema: enrichedSchema, uiSchema: uiSchema })] }));
 };
 exports.AnyField = AnyField;

package/dist/cjs/Form/fields/AnyField/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("./AnyField"));

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnyFieldWrapper = void 0;
+const styled_components_1 = require("styled-components");
+const common_1 = require("../../styles/common");
+exports.AnyFieldWrapper = styled_components_1.styled.div `
+    ${common_1.commonInputStyles}
+    ${common_1.commonSelectStyles}
+`;

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

@@ -2,13 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArrayField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const formik_1 = require("formik");
 const react_1 = require("react");
-const Form_1 = require("../Form");
-const hooks_1 = require("../hooks");
-const styledComponents_1 = require("../styledComponents");
-const templates_1 = require("../templates");
-const utils_1 = require("../utils");
+const formik_1 = require("formik");
+const utils_1 = require("../../../utils");
+const hooks_1 = require("../../hooks");
+const FormRegistry_1 = require("../../FormRegistry");
 const appendArray = (values) => {
     return values ? [...values, ""] : [""];
 };
@@ -34,10 +32,10 @@ const moveInArray = (values, index, direction) => {
     }
 };
 const ArrayField = (props) => {
-    const { fields: { SchemaField }, templates: { ArrayFieldTemplate }, components: { ArrayFieldItem, ArrayFieldList, ArrayFieldItemButtons, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = (0, react_1.useContext)(Form_1.FormRegistry);
+    const { fields: { SchemaField }, templates: { ArrayFieldTemplate, FieldTemplate }, components: { SelectFieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldList, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, schema, uiSchema } = props;
-    const { type, props: inputProps } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const { type, props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const [{ value }, _, { setValue }] = (0, formik_1.useField)(name);
     const { items, additionalItems, } = (0, react_1.useMemo)(() => {
         let items = schema.items && typeof schema.items !== "boolean" ? schema.items : [];
@@ -98,18 +96,30 @@ const ArrayField = (props) => {
     //   [schema]
     // );
     // Backwards compatibility ends
-    const { disabled } = (0, hooks_1.useExtractUiSchema)(uiSchema);
+    const { disabled } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const valueArray = Array.isArray(value) ? value : undefined;
-    return schema.anyOf !== undefined ? ((0, jsx_runtime_1.jsx)(templates_1.FieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(styledComponents_1.FieldInput, { type,
-            ...inputProps, name: name, formikAs: "select", multiple: enums?.type === "multiSelect", children: enums?.values.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.const, children: option.title }, index))) }) })) : ((0, jsx_runtime_1.jsxs)(ArrayFieldTemplate, { ...props, "data-fjsf-array": name, children: [(0, jsx_runtime_1.jsxs)(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => ((0, jsx_runtime_1.jsx)(ArrayFieldItem, { children: (0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index}]`, schema: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: uiSchema?.[index] || uiSchema?.items, 
+    const preventManipulation = disabled || schema.readOnly;
+    return schema.anyOf !== undefined ? ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SelectFieldInput, { type,
+            readOnly: schema.readOnly,
+            ...inputProps, name: name, formikAs: "select", multiple: enums?.type === utils_1.EnumsTypes.MULTI_SELECT, children: enums?.values.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.const, children: option.title }, index))) }) })) : ((0, jsx_runtime_1.jsxs)(ArrayFieldTemplate, { ...props, "data-fjsf-array": name, children: [(0, jsx_runtime_1.jsxs)(ArrayFieldList, { children: [(items || []).map((itemSchema, index) => ((0, jsx_runtime_1.jsx)(ArrayFieldItem, { children: (0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index}]`, schema: prepareChildSchema(itemSchema, schema), uiSchema: {
+                                disabled,
+                                ...(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) => ((0, jsx_runtime_1.jsxs)(ArrayFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
-                                    ? additionalItems
-                                    : {}, uiSchema: {
+                            forceDefaultValue: false }) }, index))), (valueArray?.slice(items.length) || []).map((_, index) => ((0, jsx_runtime_1.jsxs)(ArrayFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { name: `${name}[${index + items.length}]`, schema: prepareChildSchema(additionalItems, schema), uiSchema: {
                                     disabled,
                                     ...(uiSchema?.[index + items.length] || uiSchema?.items),
-                                } }), (0, jsx_runtime_1.jsxs)(ArrayFieldItemButtons, { children: [(0, jsx_runtime_1.jsx)(ArrayFieldRemoveButton, { ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: () => setValue(removeFromArray(value, index + items.length)), children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }), value.length > 1 && index > 0 && ((0, jsx_runtime_1.jsx)(ArrayFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, -1)), children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" })), value.length > 1 &&
-                                        index < value?.slice(items.length).length - 1 && ((0, jsx_runtime_1.jsx)(ArrayFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, 1)), children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }))] })] }, index)))] }), additionalItems && ((0, jsx_runtime_1.jsx)(ArrayFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: () => setValue(appendArray(value)), children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }))] }));
+                                } }), !preventManipulation && ((0, jsx_runtime_1.jsxs)(ArrayFieldItemButtons, { children: [(0, jsx_runtime_1.jsx)(ArrayFieldRemoveButton, { ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: () => setValue(removeFromArray(value, index + items.length)), children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }), value.length > 1 && index > 0 && ((0, jsx_runtime_1.jsx)(ArrayFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, -1)), children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" })), value.length > 1 &&
+                                        index < value?.slice(items.length).length - 1 && ((0, jsx_runtime_1.jsx)(ArrayFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, 1)), children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }))] }))] }, index)))] }), additionalItems && !preventManipulation && ((0, jsx_runtime_1.jsx)(ArrayFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: () => setValue(appendArray(value)), children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }))] }));
 };
 exports.ArrayField = ArrayField;
+function prepareChildSchema(childSchema, parentSchema) {
+    if (!childSchema || typeof childSchema === "boolean") {
+        return {};
+    }
+    if (parentSchema.readOnly) {
+        return { ...childSchema, readOnly: parentSchema.readOnly };
+    }
+    return childSchema;
+}