@cfinnestad/react-form-builder 1.0.30 → 1.0.32

package/dist/esm/types/components/Builder/Builder.d.ts

@@ -41,6 +41,10 @@ export type BuilderUseOptions = {
     submitColors?: string[];
     fileTypes?: Accept;
 };
+export type ModalProps = {
+    item: AnyItem;
+    inList?: boolean;
+};
 export type BuilderOptions = Options & {};
 export type BuilderProps = {
     AllowedItems?: AllowedItems;

package/dist/esm/types/components/Items/EditModal.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { ItemProps } from "./Items";
 type EditModalProps = ItemProps & {
     showModal: boolean;
+    inList: boolean;
 };
 declare const EditModal: (itemProps: EditModalProps) => React.JSX.Element;
 export default EditModal;

package/dist/esm/types/components/Items/Items.d.ts

@@ -2,13 +2,13 @@ import { Dispatch, FC, JSX, SetStateAction } from "react";
 import { ActionProps } from "../Actions";
 import { SubmitButtonProps } from "./Submit";
 import { Theme } from "@mui/material/styles";
-import { ActiveType } from "../Builder/Builder";
+import { ActiveType, ModalProps } from "../Builder/Builder";
 import { Accept } from "react-dropzone";
 export type AllowedSubtypes = {
     [key: string]: AnyFieldType;
 };
 export type AllowedItems = {
-    [key: string]: ItemType | HTMLType | GroupType | FieldType | SubmitType | HiddenType;
+    [key: string]: ItemType | HTMLType | GroupType | ListType | FieldType | SubmitType | HiddenType;
 };
 export type BuildErrors = {
     [key: string]: string;
@@ -20,7 +20,7 @@ export type Options = {
     onSave?: (Items: AnyItem[]) => void;
     SetItem: Dispatch<SetStateAction<AnyItem>>;
     setItems: Dispatch<SetStateAction<AnyItem[]>>;
-    setModal?: Dispatch<SetStateAction<boolean>>;
+    setModal?: Dispatch<SetStateAction<ModalProps | undefined>>;
     Mode?: string;
     getError: (error: string, item: any) => string | undefined;
     searchableOptions?: {
@@ -126,6 +126,17 @@ export type SubmitItem = BaseItem & {
     label?: string;
     color?: string;
 };
+export type ListItem = BaseItem & {
+    type: 'List';
+    label?: string;
+    addButton?: string;
+    addColor?: string;
+    list?: InListItem[];
+    deprecated?: boolean;
+    minListSize: number;
+    maxListSize: number;
+    baseItem: InListItem;
+};
 export type GroupItem = NamedItem & {
     type: 'Group';
     label?: string;
@@ -239,7 +250,8 @@ export type BooleanSubtype = FieldItem & {
     description: string;
     value?: boolean;
 };
-export type AnyItem = BaseItem | FieldItem | GroupItem | HTMLItem | HiddenItem | SelectSubtype | RadioSubtype | CheckboxSubtype | TextSubtype | FileSubtype | EmailSubtype | NumberSubtype | DateSubtype | BooleanSubtype | PhoneSubtype | AutocompleteSubtype;
+export type AnyItem = BaseItem | FieldItem | GroupItem | ListItem | HTMLItem | HiddenItem | SelectSubtype | RadioSubtype | CheckboxSubtype | TextSubtype | FileSubtype | EmailSubtype | NumberSubtype | DateSubtype | BooleanSubtype | PhoneSubtype | AutocompleteSubtype;
+export type InListItem = FieldItem | GroupItem;
 export type ItemType = {
     Item: AnyItem;
     ItemFC: (props: ItemProps | HiddenProps | FieldProps | SubmitProps | HTMLProps | GroupProps) => JSX.Element;
@@ -255,6 +267,11 @@ export type GroupType = {
     ItemFC: (props: GroupProps) => JSX.Element;
     EditFC: (props: GroupProps) => JSX.Element;
 };
+export type ListType = {
+    Item: ListItem;
+    ItemFC: (props: ListProps) => JSX.Element;
+    EditFC: (props: ListProps) => JSX.Element;
+};
 export type SubmitType = {
     Item: SubmitItem;
     ItemFC: (props: SubmitProps) => JSX.Element;
@@ -354,6 +371,9 @@ export type FieldProps = BaseItemProps & {
 export type GroupProps = BaseItemProps & {
     item: GroupItem;
 };
+export type ListProps = BaseItemProps & {
+    item: ListItem;
+};
 export type HTMLProps = BaseItemProps & {
     item: HTMLItem;
 };
@@ -396,7 +416,11 @@ export type AutocompleteProps = FieldProps & {
 export type PhoneProps = FieldProps & {
     item: PhoneSubtype;
 };
-export type ItemProps = BaseItemProps | GroupProps | HiddenProps | HTMLProps | SubmitProps | FieldProps | SelectProps | RadioProps | CheckboxProps | TextProps | EmailProps | NumberProps | DateProps | BooleanProps | AutocompleteProps | PhoneProps;
+export type ListItemProps = ItemProps & {
+    index: number;
+    parentItem: ListItem;
+};
+export type ItemProps = BaseItemProps | GroupProps | ListProps | HiddenProps | HTMLProps | SubmitProps | FieldProps | SelectProps | RadioProps | CheckboxProps | TextProps | EmailProps | NumberProps | DateProps | BooleanProps | AutocompleteProps | PhoneProps;
 export declare function isGroup(item: AnyItem): item is GroupItem;
 export declare function isHidden(item: AnyItem): item is HiddenItem;
 export declare function isField(item: AnyItem): item is FieldItem;
@@ -415,6 +439,8 @@ export declare function isAutocomplete(item: AnyItem): item is AutocompleteSubty
 export declare function isPhone(item: AnyItem): item is PhoneSubtype;
 export declare function isOption(item: AnyItem): item is OptionSubtype;
 export declare function isNamed(item: AnyItem): item is NamedItem;
+export declare function isList(item: AnyItem): item is ListItem;
+export declare function isListItem(item: AnyItem): item is InListItem;
 export declare function hasFiles(items: AnyItem[], allItems?: AnyItem[]): boolean;
 export declare function itemsCloneDeep(items: AnyItem[]): AnyItem[];
 export declare function itemCloneDeep(item: AnyItem): AnyItem;

package/dist/esm/types/components/Items/List/ItemList.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ListProps } from "../Items";
+declare const ItemList: ({ item, items, options, activeItem, setActiveItem, errorHandler }: ListProps) => React.JSX.Element;
+export default ItemList;

package/dist/esm/types/components/Items/List/ItemListEdit.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ListProps } from "../Items";
+declare const ItemListEdit: ({ item, items, options, groupId, setActiveItem, errorHandler }: ListProps) => React.JSX.Element;
+export default ItemListEdit;

package/dist/esm/types/components/Items/List/List.stories.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import { ListItem } from "../Items";
+declare const meta: {
+    title: string;
+    component: ({ Items, SetItems, Options }: import("../../index").RenderProps) => React.JSX.Element;
+    tags: string[];
+    argTypes: {
+        Items: ListItem[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const grouplist: Story;
+export declare const Filter: Story;

package/dist/esm/types/components/Items/List/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ItemList';
+export { default as ItemListEdit } from './ItemListEdit';

package/dist/index.d.ts

@@ -22,7 +22,7 @@ type AllowedSubtypes = {
     [key: string]: AnyFieldType;
 };
 type AllowedItems = {
-    [key: string]: ItemType | HTMLType | GroupType | FieldType | SubmitType | HiddenType;
+    [key: string]: ItemType | HTMLType | GroupType | ListType | FieldType | SubmitType | HiddenType;
 };
 type BuildErrors = {
     [key: string]: string;
@@ -34,7 +34,7 @@ type Options = {
     onSave?: (Items: AnyItem[]) => void;
     SetItem: Dispatch<SetStateAction<AnyItem>>;
     setItems: Dispatch<SetStateAction<AnyItem[]>>;
-    setModal?: Dispatch<SetStateAction<boolean>>;
+    setModal?: Dispatch<SetStateAction<ModalProps | undefined>>;
     Mode?: string;
     getError: (error: string, item: any) => string | undefined;
     searchableOptions?: {
@@ -140,6 +140,17 @@ type SubmitItem = BaseItem & {
     label?: string;
     color?: string;
 };
+type ListItem = BaseItem & {
+    type: 'List';
+    label?: string;
+    addButton?: string;
+    addColor?: string;
+    list?: InListItem[];
+    deprecated?: boolean;
+    minListSize: number;
+    maxListSize: number;
+    baseItem: InListItem;
+};
 type GroupItem = NamedItem & {
     type: 'Group';
     label?: string;
@@ -253,7 +264,8 @@ type BooleanSubtype = FieldItem & {
     description: string;
     value?: boolean;
 };
-type AnyItem = BaseItem | FieldItem | GroupItem | HTMLItem | HiddenItem | SelectSubtype | RadioSubtype | CheckboxSubtype | TextSubtype | FileSubtype | EmailSubtype | NumberSubtype | DateSubtype | BooleanSubtype | PhoneSubtype | AutocompleteSubtype;
+type AnyItem = BaseItem | FieldItem | GroupItem | ListItem | HTMLItem | HiddenItem | SelectSubtype | RadioSubtype | CheckboxSubtype | TextSubtype | FileSubtype | EmailSubtype | NumberSubtype | DateSubtype | BooleanSubtype | PhoneSubtype | AutocompleteSubtype;
+type InListItem = FieldItem | GroupItem;
 type ItemType = {
     Item: AnyItem;
     ItemFC: (props: ItemProps | HiddenProps | FieldProps | SubmitProps | HTMLProps | GroupProps) => JSX.Element;
@@ -269,6 +281,11 @@ type GroupType = {
     ItemFC: (props: GroupProps) => JSX.Element;
     EditFC: (props: GroupProps) => JSX.Element;
 };
+type ListType = {
+    Item: ListItem;
+    ItemFC: (props: ListProps) => JSX.Element;
+    EditFC: (props: ListProps) => JSX.Element;
+};
 type SubmitType = {
     Item: SubmitItem;
     ItemFC: (props: SubmitProps) => JSX.Element;
@@ -368,6 +385,9 @@ type FieldProps = BaseItemProps & {
 type GroupProps = BaseItemProps & {
     item: GroupItem;
 };
+type ListProps = BaseItemProps & {
+    item: ListItem;
+};
 type HTMLProps = BaseItemProps & {
     item: HTMLItem;
 };
@@ -410,7 +430,11 @@ type AutocompleteProps = FieldProps & {
 type PhoneProps = FieldProps & {
     item: PhoneSubtype;
 };
-type ItemProps = BaseItemProps | GroupProps | HiddenProps | HTMLProps | SubmitProps | FieldProps | SelectProps | RadioProps | CheckboxProps | TextProps | EmailProps | NumberProps | DateProps | BooleanProps | AutocompleteProps | PhoneProps;
+type ListItemProps = ItemProps & {
+    index: number;
+    parentItem: ListItem;
+};
+type ItemProps = BaseItemProps | GroupProps | ListProps | HiddenProps | HTMLProps | SubmitProps | FieldProps | SelectProps | RadioProps | CheckboxProps | TextProps | EmailProps | NumberProps | DateProps | BooleanProps | AutocompleteProps | PhoneProps;
 declare function isGroup(item: AnyItem): item is GroupItem;
 declare function isHidden(item: AnyItem): item is HiddenItem;
 declare function isField(item: AnyItem): item is FieldItem;
@@ -429,6 +453,8 @@ declare function isAutocomplete(item: AnyItem): item is AutocompleteSubtype;
 declare function isPhone(item: AnyItem): item is PhoneSubtype;
 declare function isOption(item: AnyItem): item is OptionSubtype;
 declare function isNamed(item: AnyItem): item is NamedItem;
+declare function isList(item: AnyItem): item is ListItem;
+declare function isListItem(item: AnyItem): item is InListItem;
 declare function hasFiles(items: AnyItem[], allItems?: AnyItem[]): boolean;
 declare function itemsCloneDeep(items: AnyItem[]): AnyItem[];
 declare function itemCloneDeep(item: AnyItem): AnyItem;
@@ -489,6 +515,10 @@ type BuilderUseOptions = {
     submitColors?: string[];
     fileTypes?: Accept;
 };
+type ModalProps = {
+    item: AnyItem;
+    inList?: boolean;
+};
 type BuilderProps = {
     AllowedItems?: AllowedItems;
     AdditionalItems?: AllowedItems;
@@ -532,4 +562,4 @@ declare const RenderedFlatObject: (items: AnyItem[], files?: Files, allItems?: A
 declare const RenderedArray: (items: AnyItem[], files?: Files, allItems?: AnyItem[]) => {} | [];
 declare const RenderedFlatArray: (items: AnyItem[], files?: Files, allItems?: AnyItem[]) => object[];
 
-export { AllowedItems, AllowedSubtypes, AndFilter, AnyFieldType, AnyItem, AutocompleteProps, AutocompleteSubtype, AutocompleteType, BaseItem, BaseItemProps, BooleanProps, BooleanSubtype, BooleanType, BuildErrors, Builder, BuilderProps, BuilderUseOptions, CheckboxProps, CheckboxSubtype, CheckboxType, Clear, ComparisonFilter, DateProps, DateSubtype, DateType, EmailProps, EmailSubtype, EmailType, EqFilter, ErrorType, Errors, FieldFilter, FieldItem, FieldProps, FieldType, FileProps, FileSubtype, FileType, Files, FilterType, GetNamedItem as GetItem, GroupItem, GroupProps, GroupType, GtFilter, GteFilter, HTMLItem, HTMLProps, HTMLType, HiddenItem, HiddenProps, HiddenType, InFilter, ItemProps, ItemType, LtFilter, LteFilter, MultiplesSubtype, NamedItem, NotFilter, NumberProps, NumberSubtype, NumberType, Option, OptionSubtype, Options, OrFilter, PhoneProps, PhoneSubtype, PhoneType, Preview, RadioProps, RadioSubtype, RadioType, Render, RenderOptions, RenderProps, RenderedArray, RenderedFlatArray, RenderedFlatObject, RenderedObject, Save, SelectProps, SelectSubtype, SelectType, UpdateItemInItems as SetItem, SubmitButtonElement, SubmitButtonProps, SubmitItem, SubmitProps, SubmitType, TextProps, TextSubtype, TextType, Transfer, ValidateFields, getSiblingItems, hasFiles, isAndFilter, isAutocomplete, isBoolean, isCheckbox, isComparisonFilter, isDate, isEmail, isEqFilter, isField, isFieldFilter, isFile, isGroup, isGtFilter, isGteFilter, isHidden, isHtml, isInFilter, isLtFilter, isLteFilter, isNamed, isNotFilter, isNumber, isOption, isOrFilter, isPhone, isRadio, isSelect, isSubmit, isText, itemCloneDeep, itemsCloneDeep, validateNameChange };
+export { AllowedItems, AllowedSubtypes, AndFilter, AnyFieldType, AnyItem, AutocompleteProps, AutocompleteSubtype, AutocompleteType, BaseItem, BaseItemProps, BooleanProps, BooleanSubtype, BooleanType, BuildErrors, Builder, BuilderProps, BuilderUseOptions, CheckboxProps, CheckboxSubtype, CheckboxType, Clear, ComparisonFilter, DateProps, DateSubtype, DateType, EmailProps, EmailSubtype, EmailType, EqFilter, ErrorType, Errors, FieldFilter, FieldItem, FieldProps, FieldType, FileProps, FileSubtype, FileType, Files, FilterType, GetNamedItem as GetItem, GroupItem, GroupProps, GroupType, GtFilter, GteFilter, HTMLItem, HTMLProps, HTMLType, HiddenItem, HiddenProps, HiddenType, InFilter, InListItem, ItemProps, ItemType, ListItem, ListItemProps, ListProps, ListType, LtFilter, LteFilter, MultiplesSubtype, NamedItem, NotFilter, NumberProps, NumberSubtype, NumberType, Option, OptionSubtype, Options, OrFilter, PhoneProps, PhoneSubtype, PhoneType, Preview, RadioProps, RadioSubtype, RadioType, Render, RenderOptions, RenderProps, RenderedArray, RenderedFlatArray, RenderedFlatObject, RenderedObject, Save, SelectProps, SelectSubtype, SelectType, UpdateItemInItems as SetItem, SubmitButtonElement, SubmitButtonProps, SubmitItem, SubmitProps, SubmitType, TextProps, TextSubtype, TextType, Transfer, ValidateFields, getSiblingItems, hasFiles, isAndFilter, isAutocomplete, isBoolean, isCheckbox, isComparisonFilter, isDate, isEmail, isEqFilter, isField, isFieldFilter, isFile, isGroup, isGtFilter, isGteFilter, isHidden, isHtml, isInFilter, isList, isListItem, isLtFilter, isLteFilter, isNamed, isNotFilter, isNumber, isOption, isOrFilter, isPhone, isRadio, isSelect, isSubmit, isText, itemCloneDeep, itemsCloneDeep, validateNameChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfinnestad/react-form-builder",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "FormBuilder and FormRender Component library for building and gathering custom form data",
   "scripts": {
     "rollup": "rollup -c",