@nolwenture/formik-jsonschema-form 1.0.0-beta.16 → 1.0.0-beta.18

package/README.md

@@ -630,7 +630,7 @@ const collapsibleSchema: Schema = {
 };
 
 const collapsibleUiSchema: UiSchema = {
-  colObject: { props: { isCollapsible: true } },
+  colObject: { "ui:props": { isCollapsible: true } },
 };
 ```
 

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

@@ -4,13 +4,6 @@ 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 }));

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

@@ -5,16 +5,16 @@ 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;
+  margin: 0;
   min-width: max-content;
+  opacity: 0;
+  position: absolute;
+  transition: opacity 0.5s;
+  visibility: hidden;
+  word-wrap: break-word;
+  z-index: 1080;
 
   top: ${({ position }) => position === "bottom" ? "140%" : position === "top" ? "auto" : "50%"};
   bottom: ${({ position }) => position === "top"
@@ -63,13 +63,17 @@ exports.FieldInfoBoxArrowElement = styled_components_1.styled.div `
   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;
+    background: ${(props) => props.theme.color.background.default};
+    border-radius: ${(props) => props.theme.borderRadius.none};
+    border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.intent.default.none}`};
+    color: ${(props) => props.theme.color.text.default};
+    cursor: default;
+    font-size: ${(props) => props.theme.typography.size.small};
+    line-height: ${(props) => props.theme.typography.lineHeight.small};
+    max-width: 30ch;
+    padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.m}`};
+    text-align: left;
+    white-space: pre-wrap;
 `;
 exports.FieldInfoContainer = styled_components_1.styled.a `
   position: relative;

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

@@ -35,7 +35,7 @@ const ObjectField = (props) => {
     }, [valuesToRemove]);
     const propertyKeys = (0, react_1.useMemo)(() => Object.keys(properties || {}), [properties]);
     const additionalValues = (0, react_1.useMemo)(() => Object.fromEntries(Object.entries(value || {}).filter(([key, value]) => !propertyKeys.includes(key))), [value, propertyKeys]);
-    const FieldTemplateComponent = props.uiSchema?.props?.isCollapsible
+    const FieldTemplateComponent = props.uiSchema?.["ui:options"]?.isCollapsible
         ? CollapsibleObjectFieldTemplate
         : ObjectFieldTemplate;
     const orderedProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(properties || {}));

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

@@ -36,7 +36,7 @@ exports.SearchableMultiTagSelectFieldBadgeCloseElement = styled_components_1.sty
   cursor: pointer;
   margin-left: ${(props) => props.theme.spacing.s};
   font-size: ${(props) => props.theme.typography.size.small};
-  align-self: baseline;
+  align-self: center;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 `;
 exports.SearchableMultiTagSelectFieldOptionList = styled_components_1.styled.ul `

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

@@ -8,10 +8,11 @@ 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.color.background.input};
-  width: 100%;
-  min-height: 5rem;
   color: ${(props) => props.theme.color.text.default};
+  display: inline-block;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   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

@@ -186,21 +186,38 @@ exports.commonRadioStyles = (0, styled_components_1.css) `
   }
 `;
 exports.commonSelectStyles = (0, styled_components_1.css) `
-  select {
-    background-color: ${(props) => props.theme.color.background.input};
-    border-radius: ${(props) => props.theme.borderRadius.none};
-    border: ${(props) => `${props.theme.strokeWidth.thin} solid
-        ${props.theme.color.border.default}`};
-    color: ${(props) => props.theme.color.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.normal};
-    padding: ${(props) => `${props.theme.spacing.s}`};
+    select {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        background-color: ${(props) => props.theme.color.background.input};
+        border-radius: ${(props) => props.theme.borderRadius.none};
+        border: ${(props) => `${props.theme.strokeWidth.thin} solid
+            ${props.theme.color.border.default}`};
+        color: ${(props) => props.theme.color.text.default};
+        cursor: pointer;
+        font-family: ${(props) => props.theme.typography.fontFamily.base};
+        font-size: ${(props) => props.theme.typography.size.base};
+        font-weight: ${(props) => props.theme.typography.weight.normal};
+        outline: none;
+        padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.m}`};
+        width: 100%;
+        
+        background-image: ${(props) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 320 512'%3E%3Cpath fill='${encodeURIComponent(props.theme.color.text.default)}' d='M31 192h258c17 0 26 21 14 33l-129 129c-8 8-21 8-29 0L17 225c-12-12-3-33 14-33z'/%3E%3C/svg%3E")`};
+        background-position: ${(props) => `right ${props.theme.spacing.m} top 50%`};
+        background-repeat: no-repeat;
+        background-size: ${(props) => props.theme.spacing.l}; auto;
 
-    &:focus {
-      ${(props) => props.theme.focus.default};
+        &:focus {
+            ${(props) => props.theme.focus.default};
+        }
+    } 
+
+    select[multiple] {
+        appearance: auto;
+        background-image: none;
+        overflow: auto;
     }
-  }
 `;
 exports.datePickerIconStyles = (0, styled_components_1.css) `
   ::-webkit-calendar-picker-indicator {

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

@@ -12,9 +12,9 @@ const CollapsibleObjectFieldTemplate = (props) => {
     const { children, name, uiSchema, ...otherProps } = props;
     const title = (0, utils_1.getTitle)(props);
     const description = (0, utils_1.getDescription)(props);
-    const { help, info, 
+    const { help, info, isCollapsedOnLoad = true, openIcon, collapsedIcon, 
     //TODO: This is not right
-    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, isCollapsedOnLoad = true, openIcon, collapsedIcon, ariaLabel,
+    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, ariaLabel,
     // error: errorProps,
      } = {}, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const dataAttributes = Object.keys(otherProps)

package/dist/cjs/FormView/fields/ObjectField/ObjectField.js

@@ -30,7 +30,7 @@ const ObjectField = (props) => {
             setValue(newValue);
         }
     }, [valuesToRemove]);
-    const FieldTemplateComponent = props.uiSchema?.props?.isCollapsible
+    const FieldTemplateComponent = props.uiSchema?.["ui:options"]?.isCollapsible
         ? CollapsibleObjectFieldTemplate
         : ObjectFieldTemplate;
     const orderedProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(properties || {}));

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

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

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

@@ -2,16 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { readableColor } from "polished";
 export const FieldInfoBoxElement = styled.div `
-  transition: opacity 0.5s;
-  position: absolute;
-  z-index: 1080;
-  opacity: 0;
-  visibility: hidden;
-  margin: 0;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
-  word-wrap: break-word;
+  margin: 0;
   min-width: max-content;
+  opacity: 0;
+  position: absolute;
+  transition: opacity 0.5s;
+  visibility: hidden;
+  word-wrap: break-word;
+  z-index: 1080;
 
   top: ${({ position }) => position === "bottom" ? "140%" : position === "top" ? "auto" : "50%"};
   bottom: ${({ position }) => position === "top"
@@ -60,13 +60,17 @@ export const FieldInfoBoxArrowElement = styled.div `
   margin-left: -5px;
 `;
 export const FieldInfoBoxInnerElement = 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) => readableColor(props.theme.color.text.default)};
-  cursor: default;
-  padding: ${(props) => `${props.theme.spacing.xs} ${props.theme.spacing.s}`};
-  text-align: center;
+    background: ${(props) => props.theme.color.background.default};
+    border-radius: ${(props) => props.theme.borderRadius.none};
+    border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.intent.default.none}`};
+    color: ${(props) => props.theme.color.text.default};
+    cursor: default;
+    font-size: ${(props) => props.theme.typography.size.small};
+    line-height: ${(props) => props.theme.typography.lineHeight.small};
+    max-width: 30ch;
+    padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.m}`};
+    text-align: left;
+    white-space: pre-wrap;
 `;
 export const FieldInfoContainer = styled.a `
   position: relative;

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

@@ -32,7 +32,7 @@ export const ObjectField = (props) => {
     }, [valuesToRemove]);
     const propertyKeys = useMemo(() => Object.keys(properties || {}), [properties]);
     const additionalValues = useMemo(() => Object.fromEntries(Object.entries(value || {}).filter(([key, value]) => !propertyKeys.includes(key))), [value, propertyKeys]);
-    const FieldTemplateComponent = props.uiSchema?.props?.isCollapsible
+    const FieldTemplateComponent = props.uiSchema?.["ui:options"]?.isCollapsible
         ? CollapsibleObjectFieldTemplate
         : ObjectFieldTemplate;
     const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(properties || {}));

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

@@ -33,7 +33,7 @@ export const SearchableMultiTagSelectFieldBadgeCloseElement = styled.span `
   cursor: pointer;
   margin-left: ${(props) => props.theme.spacing.s};
   font-size: ${(props) => props.theme.typography.size.small};
-  align-self: baseline;
+  align-self: center;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 `;
 export const SearchableMultiTagSelectFieldOptionList = styled.ul `

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

@@ -2,10 +2,11 @@ import styled from "styled-components";
 import { FieldInput } from "../../components/FieldInput";
 export const TextAreaFieldInput = styled(FieldInput) `
   background-color: ${(props) => props.theme.color.background.input};
-  width: 100%;
-  min-height: 5rem;
   color: ${(props) => props.theme.color.text.default};
+  display: inline-block;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   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

@@ -183,21 +183,38 @@ export const commonRadioStyles = css `
   }
 `;
 export const commonSelectStyles = css `
-  select {
-    background-color: ${(props) => props.theme.color.background.input};
-    border-radius: ${(props) => props.theme.borderRadius.none};
-    border: ${(props) => `${props.theme.strokeWidth.thin} solid
-        ${props.theme.color.border.default}`};
-    color: ${(props) => props.theme.color.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.normal};
-    padding: ${(props) => `${props.theme.spacing.s}`};
+    select {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        background-color: ${(props) => props.theme.color.background.input};
+        border-radius: ${(props) => props.theme.borderRadius.none};
+        border: ${(props) => `${props.theme.strokeWidth.thin} solid
+            ${props.theme.color.border.default}`};
+        color: ${(props) => props.theme.color.text.default};
+        cursor: pointer;
+        font-family: ${(props) => props.theme.typography.fontFamily.base};
+        font-size: ${(props) => props.theme.typography.size.base};
+        font-weight: ${(props) => props.theme.typography.weight.normal};
+        outline: none;
+        padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.m}`};
+        width: 100%;
+        
+        background-image: ${(props) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 320 512'%3E%3Cpath fill='${encodeURIComponent(props.theme.color.text.default)}' d='M31 192h258c17 0 26 21 14 33l-129 129c-8 8-21 8-29 0L17 225c-12-12-3-33 14-33z'/%3E%3C/svg%3E")`};
+        background-position: ${(props) => `right ${props.theme.spacing.m} top 50%`};
+        background-repeat: no-repeat;
+        background-size: ${(props) => props.theme.spacing.l}; auto;
 
-    &:focus {
-      ${(props) => props.theme.focus.default};
+        &:focus {
+            ${(props) => props.theme.focus.default};
+        }
+    } 
+
+    select[multiple] {
+        appearance: auto;
+        background-image: none;
+        overflow: auto;
     }
-  }
 `;
 export const datePickerIconStyles = css `
   ::-webkit-calendar-picker-indicator {

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

@@ -9,9 +9,9 @@ export const CollapsibleObjectFieldTemplate = (props) => {
     const { children, name, uiSchema, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
-    const { help, info, 
+    const { help, info, isCollapsedOnLoad = true, openIcon, collapsedIcon, 
     //TODO: This is not right
-    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, isCollapsedOnLoad = true, openIcon, collapsedIcon, ariaLabel,
+    props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, ariaLabel,
     // error: errorProps,
      } = {}, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const dataAttributes = Object.keys(otherProps)

package/dist/esm/FormView/fields/ObjectField/ObjectField.js

@@ -27,7 +27,7 @@ export const ObjectField = (props) => {
             setValue(newValue);
         }
     }, [valuesToRemove]);
-    const FieldTemplateComponent = props.uiSchema?.props?.isCollapsible
+    const FieldTemplateComponent = props.uiSchema?.["ui:options"]?.isCollapsible
         ? CollapsibleObjectFieldTemplate
         : ObjectFieldTemplate;
     const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(properties || {}));

package/package.json

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