@nolwenture/formik-jsonschema-form 1.0.0 → 1.0.2

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

@@ -38,6 +38,8 @@ 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 `
+  display: flex;
+  flex-direction: column;
   margin: ${(props) => `${props.theme.spacing.s} 0`};
   color: ${(props) => props.theme.color.text.default};
 `;

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

@@ -2,6 +2,4 @@
 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}`};
-`;
+exports.Icon = styled_components_1.styled.div ``;

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

@@ -4,6 +4,7 @@ exports.ObjectFieldSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const FormRegistry_1 = require("../../FormRegistry");
+const styledComponents_1 = require("./styledComponents");
 const ObjectFieldSection = ({ title, collapsible, children, }) => {
     const [collapsed, setCollapsed] = (0, react_1.useState)(collapsible);
     const { components: { ObjectFieldSectionWrapper, ObjectFieldSectionTitle }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
@@ -11,6 +12,6 @@ const ObjectFieldSection = ({ title, collapsible, children, }) => {
                     if (collapsible) {
                         setCollapsed((currentState) => !currentState);
                     }
-                }, children: [collapsible && (collapsed ? "▸" : "▾"), title] }), !collapsed && children] }));
+                }, children: [title, (0, jsx_runtime_1.jsx)(styledComponents_1.IconWrapper, { children: collapsible && (collapsed ? "▸" : "▾") })] }), !collapsed && children] }));
 };
 exports.ObjectFieldSection = ObjectFieldSection;

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

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectFieldSectionTitle = exports.ObjectFieldSectionWrapper = exports.ObjectFieldAddButton = exports.ObjectFieldRemoveButton = exports.ObjectFieldDownButton = exports.ObjectFieldUpButton = exports.ObjectFieldButton = exports.ObjectFieldItemButtons = exports.ObjectFieldItem = exports.ObjectFieldWrapper = void 0;
+exports.ObjectFieldSectionTitle = exports.ObjectFieldSectionWrapper = exports.ObjectFieldAddButton = exports.ObjectFieldRemoveButton = exports.ObjectFieldDownButton = exports.ObjectFieldUpButton = exports.ObjectFieldButton = exports.ObjectFieldItemButtons = exports.ObjectFieldItem = exports.ObjectFieldWrapper = exports.IconWrapper = void 0;
 const styled_components_1 = require("styled-components");
 const common_1 = require("../../styles/common");
 const component_library_1 = require("@nolwenture/component-library");
+exports.IconWrapper = styled_components_1.styled.div `
+  display: flex;
+`;
 exports.ObjectFieldWrapper = (0, styled_components_1.styled)(common_1.CommonFieldWrapper) ``;
 exports.ObjectFieldItem = styled_components_1.styled.li `
   color: ${(props) => props.theme.color.text.default};
@@ -18,10 +21,20 @@ exports.ObjectFieldItemButtons = styled_components_1.styled.div `
 exports.ObjectFieldButton = (0, styled_components_1.styled)(component_library_1.Button) `
   line-height: 1;
   padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.m}`};
+  justify-content: center;
 `;
 exports.ObjectFieldUpButton = (0, styled_components_1.styled)(exports.ObjectFieldButton) ``;
 exports.ObjectFieldDownButton = (0, styled_components_1.styled)(exports.ObjectFieldButton) ``;
 exports.ObjectFieldRemoveButton = (0, styled_components_1.styled)(exports.ObjectFieldButton) ``;
 exports.ObjectFieldAddButton = (0, styled_components_1.styled)(exports.ObjectFieldButton) ``;
-exports.ObjectFieldSectionWrapper = styled_components_1.styled.fieldset ``;
-exports.ObjectFieldSectionTitle = styled_components_1.styled.legend ``;
+exports.ObjectFieldSectionWrapper = styled_components_1.styled.fieldset `
+  padding: ${(props) => props.theme.spacing.s} ${(props) => props.theme.spacing.l} ${(props) => props.theme.spacing.s} ${(props) => props.theme.spacing.s};
+`;
+exports.ObjectFieldSectionTitle = styled_components_1.styled.legend `
+  display: flex;
+  gap: ${(props) => props.theme.spacing.s};
+  float: left;
+  width: 100%;
+  margin: 0;
+  justify-content: space-between;
+`;

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

@@ -11,12 +11,10 @@ exports.SearchableMultiTagSelectFieldContainer = (0, styled_components_1.styled)
   
 `;
 exports.SearchableMultiTagSelectFieldSearchContainer = styled_components_1.styled.div `
-  display: inline-block;
-  position: relative;
-  width: fit-content;
+  display: flex;
+  flex-direction: column;
 `;
 exports.SearchableMultiTagSelectFieldInputElement = (0, styled_components_1.styled)(FieldInput_1.FieldInput) `
-  width: 100%;
 `;
 exports.SearchableMultiTagSelectFieldBadgeContainer = styled_components_1.styled.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};

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

@@ -14,5 +14,4 @@ exports.TextAreaFieldInput = (0, styled_components_1.default)(FieldInput_1.Field
   font-size: ${(props) => props.theme.typography.size.base};
   min-height: 5rem;
   padding: ${(props) => props.theme.spacing.s};
-  width: 95%;
 `;

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

@@ -4,6 +4,10 @@ exports.CommonCheckboxStyles = exports.CommonFieldWrapper = void 0;
 const styled_components_1 = require("styled-components");
 const polished_1 = require("polished");
 exports.CommonFieldWrapper = styled_components_1.styled.div `
+
+  display: flex;
+  flex-direction: column;
+
   input {
     background-color: ${(props) => props.theme.color.background.input};
     border-radius: ${(props) => props.theme.borderRadius.none};
@@ -18,6 +22,9 @@ exports.CommonFieldWrapper = styled_components_1.styled.div `
       color: ${(props) => props.theme.color.text.muted};
     }
 
+    &:read-only {
+    }
+
     &:focus {
       ${(props) => props.theme.focus.default};
     }
@@ -52,6 +59,10 @@ exports.CommonFieldWrapper = styled_components_1.styled.div `
     background-repeat: no-repeat;
     background-size: ${(props) => props.theme.spacing.l}; auto;
 
+    &:read-only {
+     
+    }
+
     &:focus {
         ${(props) => props.theme.focus.default};
     }
@@ -166,5 +177,9 @@ exports.CommonCheckboxStyles = styled_components_1.styled.div `
         transform: scale(1);
       }
     }
+
+    &:read-only {
+  
+    }
   }
 `;

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

@@ -10,6 +10,7 @@ exports.CollapsibleObjectFieldTemplateIcon = undefined;
 exports.CollapsibleObjectFieldTemplateTitle = (0, styled_components_1.styled)(styledComponents_1.ObjectFieldTemplateTitle) `
   display: flex;
   align-items: center;
+  gap: ${(props) => props.theme.spacing.s};
 `;
 exports.CollapsibleObjectFieldTemplateDescription = undefined;
 exports.CollapsibleObjectFieldTemplateHelp = undefined;

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

@@ -2,6 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import * as formik from "formik";
 export const FieldWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
   margin: ${(props) => `${props.theme.spacing.s} 0`};
   color: ${(props) => props.theme.color.text.default};
 `;

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

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

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

@@ -1,6 +1,7 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useState } from "react";
 import { FormRegistry } from "../../FormRegistry";
+import { IconWrapper } from "./styledComponents";
 export const ObjectFieldSection = ({ title, collapsible, children, }) => {
     const [collapsed, setCollapsed] = useState(collapsible);
     const { components: { ObjectFieldSectionWrapper, ObjectFieldSectionTitle }, } = useContext(FormRegistry);
@@ -8,5 +9,5 @@ export const ObjectFieldSection = ({ title, collapsible, children, }) => {
                     if (collapsible) {
                         setCollapsed((currentState) => !currentState);
                     }
-                }, children: [collapsible && (collapsed ? "▸" : "▾"), title] }), !collapsed && children] }));
+                }, children: [title, _jsx(IconWrapper, { children: collapsible && (collapsed ? "▸" : "▾") })] }), !collapsed && children] }));
 };

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

@@ -1,6 +1,9 @@
 import { styled } from "styled-components";
 import { CommonFieldWrapper } from "../../styles/common";
 import { Button } from "@nolwenture/component-library";
+export const IconWrapper = styled.div `
+  display: flex;
+`;
 export const ObjectFieldWrapper = styled(CommonFieldWrapper) ``;
 export const ObjectFieldItem = styled.li `
   color: ${(props) => props.theme.color.text.default};
@@ -15,10 +18,20 @@ export const ObjectFieldItemButtons = styled.div `
 export const ObjectFieldButton = styled(Button) `
   line-height: 1;
   padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.m}`};
+  justify-content: center;
 `;
 export const ObjectFieldUpButton = styled(ObjectFieldButton) ``;
 export const ObjectFieldDownButton = styled(ObjectFieldButton) ``;
 export const ObjectFieldRemoveButton = styled(ObjectFieldButton) ``;
 export const ObjectFieldAddButton = styled(ObjectFieldButton) ``;
-export const ObjectFieldSectionWrapper = styled.fieldset ``;
-export const ObjectFieldSectionTitle = styled.legend ``;
+export const ObjectFieldSectionWrapper = styled.fieldset `
+  padding: ${(props) => props.theme.spacing.s} ${(props) => props.theme.spacing.l} ${(props) => props.theme.spacing.s} ${(props) => props.theme.spacing.s};
+`;
+export const ObjectFieldSectionTitle = styled.legend `
+  display: flex;
+  gap: ${(props) => props.theme.spacing.s};
+  float: left;
+  width: 100%;
+  margin: 0;
+  justify-content: space-between;
+`;

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

@@ -8,12 +8,10 @@ export const SearchableMultiTagSelectFieldContainer = styled(CommonFieldWrapper)
   
 `;
 export const SearchableMultiTagSelectFieldSearchContainer = styled.div `
-  display: inline-block;
-  position: relative;
-  width: fit-content;
+  display: flex;
+  flex-direction: column;
 `;
 export const SearchableMultiTagSelectFieldInputElement = styled(FieldInput) `
-  width: 100%;
 `;
 export const SearchableMultiTagSelectFieldBadgeContainer = styled.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};

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

@@ -8,5 +8,4 @@ export const TextAreaFieldInput = styled(FieldInput) `
   font-size: ${(props) => props.theme.typography.size.base};
   min-height: 5rem;
   padding: ${(props) => props.theme.spacing.s};
-  width: 95%;
 `;

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

@@ -1,6 +1,10 @@
 import { styled } from "styled-components";
 import { readableColor } from "polished";
 export const CommonFieldWrapper = styled.div `
+
+  display: flex;
+  flex-direction: column;
+
   input {
     background-color: ${(props) => props.theme.color.background.input};
     border-radius: ${(props) => props.theme.borderRadius.none};
@@ -15,6 +19,9 @@ export const CommonFieldWrapper = styled.div `
       color: ${(props) => props.theme.color.text.muted};
     }
 
+    &:read-only {
+    }
+
     &:focus {
       ${(props) => props.theme.focus.default};
     }
@@ -49,6 +56,10 @@ export const CommonFieldWrapper = styled.div `
     background-repeat: no-repeat;
     background-size: ${(props) => props.theme.spacing.l}; auto;
 
+    &:read-only {
+     
+    }
+
     &:focus {
         ${(props) => props.theme.focus.default};
     }
@@ -163,5 +174,9 @@ export const CommonCheckboxStyles = styled.div `
         transform: scale(1);
       }
     }
+
+    &:read-only {
+  
+    }
   }
 `;

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

@@ -6,6 +6,7 @@ export const CollapsibleObjectFieldTemplateIcon = undefined;
 export const CollapsibleObjectFieldTemplateTitle = styled(ObjectFieldTemplateTitle) `
   display: flex;
   align-items: center;
+  gap: ${(props) => props.theme.spacing.s};
 `;
 export const CollapsibleObjectFieldTemplateDescription = undefined;
 export const CollapsibleObjectFieldTemplateHelp = undefined;

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

@@ -146,6 +146,7 @@ export declare const components: {
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
     }, never>> & string;
     ObjectFieldSection: import("react").FC<import("../fields/ObjectField").ObjectFieldSectionProps>;
+    IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     ObjectFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }, never>> & string;

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

@@ -1,6 +1,7 @@
 export * as fields from "./ObjectField";
 declare const components: {
     ObjectFieldSection: import("react").FC<import("./types").ObjectFieldSectionProps>;
+    IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     ObjectFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }, never>> & string;

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

@@ -1,4 +1,5 @@
 import { Button } from "@nolwenture/component-library";
+export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ObjectFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, never>> & string;

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

@@ -76,6 +76,7 @@ export declare const fieldComponents: {
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
     }, never>> & string;
     ObjectFieldSection: import("react").FC<ObjectField.ObjectFieldSectionProps>;
+    IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     ObjectFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }, never>> & string;

package/package.json

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