@zesty-io/material 0.1.0 → 0.1.1

package/es/CopyButton/index.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useState, useEffect } from 'react';
 import Button from '@mui/material/Button';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -17,10 +17,10 @@ const CopyButton = ({ value, sx, ...props }) => {
             clearTimeout(iconTimer);
         };
     }, [copied]);
-    return (_jsxs(Button, { variant: 'outlined', onClick: copyValue, size: "small", title: props.children ? `Copy ${props.children}` : `Copy ${value}`, sx: {
+    return (_jsx(Button, { variant: 'outlined', onClick: copyValue, size: "small", title: props.children ? `Copy ${props.children}` : `Copy ${value}`, sx: {
             textTransform: 'unset',
             // Spread sx prop at the end to allow sx prop overrides
             ...sx,
-        }, ...props, children: [copied ? (_jsx(CheckIcon, { color: 'success', fontSize: 'small' })) : (_jsx(ContentCopyIcon, { fontSize: 'small' })), props.children ? props.children : value] }));
+        }, startIcon: copied ? (_jsx(CheckIcon, { color: 'success', fontSize: 'small' })) : (_jsx(ContentCopyIcon, { fontSize: 'small' })), ...props, children: props.children ? props.children : value }));
 };
 export default CopyButton;

package/es/FieldTypeColor/index.d.ts

@@ -2,5 +2,5 @@
 import { OutlinedTextFieldProps } from '@mui/material/TextField';
 export interface FieldTypeColorProps extends Omit<OutlinedTextFieldProps, 'variant'> {
 }
-declare const FieldTypeColor: ({ InputProps, InputLabelProps, ...props }: FieldTypeColorProps) => JSX.Element;
+declare const FieldTypeColor: ({ InputProps, label, required, ...props }: FieldTypeColorProps) => JSX.Element;
 export default FieldTypeColor;

package/es/FieldTypeColor/index.js

@@ -1,20 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import MuiTextField from '@mui/material/TextField';
-import { Button, InputAdornment } from '@mui/material';
+import { Button, FormControl, FormLabel, InputAdornment } from '@mui/material';
 import BrushIcon from '@mui/icons-material/Brush';
-const FieldTypeColor = ({ InputProps, InputLabelProps, ...props }) => {
-    return (_jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'color', InputProps: {
-            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
-                        // References color input via event in order to open color picker
-                        const input = e.currentTarget?.parentElement?.parentElement?.firstElementChild;
-                        input?.click();
-                    }, children: _jsx(BrushIcon, { fontSize: 'small' }) }) })),
-            // Spread props at the end to allow Input prop overrides
-            ...InputProps,
-        }, InputLabelProps: {
-            shrink: true,
-            // Spread props at the end to allow InputLabel prop overrides
-            ...InputLabelProps,
-        }, ...props }));
+const FieldTypeColor = ({ InputProps, label, required, ...props }) => {
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'color', InputProps: {
+                    endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
+                                // References color input via event in order to open color picker
+                                const input = e.currentTarget?.parentElement?.parentElement?.firstElementChild;
+                                input?.click();
+                            }, children: _jsx(BrushIcon, { fontSize: 'small' }) }) })),
+                    // Spread props at the end to allow Input prop overrides
+                    ...InputProps,
+                }, ...props })] }));
 };
 export default FieldTypeColor;

package/es/FieldTypeDate/FieldTypeDate.stories.js

@@ -13,8 +13,5 @@ const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
     label: 'Date label',
-    textFieldProps: {
-        helperText: 'Date helper text',
-        error: false,
-    }
+    helperText: 'Date helper text',
 };

package/es/FieldTypeDate/index.d.ts

@@ -1,11 +1,9 @@
 /// <reference types="react" />
 import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
-import { TextFieldProps } from '@mui/material';
 export interface FieldTypeDateProps extends Omit<DatePickerProps<Date, Date>, 'renderInput'> {
-    /**
-     * Props passed to TextField component
-     */
-    textFieldProps?: TextFieldProps;
+    helperText?: string;
+    error?: boolean;
+    required?: boolean;
 }
-declare const FieldTypeDate: ({ textFieldProps, ...props }: FieldTypeDateProps) => JSX.Element;
+declare const FieldTypeDate: ({ label, helperText, error, required, ...props }: FieldTypeDateProps) => JSX.Element;
 export default FieldTypeDate;

package/es/FieldTypeDate/index.js

@@ -1,14 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { TextField } from '@mui/material';
+import { FormControl, FormLabel, TextField } from '@mui/material';
 ;
-const FieldTypeDate = ({ textFieldProps, ...props }) => {
-    return (_jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DatePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { InputLabelProps: {
-                    shrink: true,
-                    // Spread props at the end to allow InputLabelProps overrides
-                    ...textFieldProps?.InputLabelProps,
-                }, ...params, ...textFieldProps }), ...props }) }));
+const FieldTypeDate = ({ label, helperText, error, required, ...props }) => {
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DatePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error }), ...props }) })] }));
 };
 export default FieldTypeDate;

package/es/FieldTypeDateTime/FieldTypeDateTime.stories.js

@@ -13,8 +13,5 @@ const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
     label: 'Date label',
-    textFieldProps: {
-        helperText: 'Date helper text',
-        error: false,
-    }
+    helperText: 'Date helper text',
 };

package/es/FieldTypeDateTime/index.d.ts

@@ -1,11 +1,9 @@
 /// <reference types="react" />
 import { DateTimePickerProps } from '@mui/x-date-pickers/DateTimePicker';
-import { TextFieldProps } from '@mui/material';
 export interface FieldTypeDateTimeProps extends Omit<DateTimePickerProps<Date, Date>, 'renderInput'> {
-    /**
-     * Props passed to TextField component
-     */
-    textFieldProps?: TextFieldProps;
+    helperText?: string;
+    error?: boolean;
+    required?: boolean;
 }
-declare const FieldTypeDateTime: ({ textFieldProps, ...props }: FieldTypeDateTimeProps) => JSX.Element;
+declare const FieldTypeDateTime: ({ label, helperText, error, required, ...props }: FieldTypeDateTimeProps) => JSX.Element;
 export default FieldTypeDateTime;

package/es/FieldTypeDateTime/index.js

@@ -1,14 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-import { TextField } from '@mui/material';
+import { TextField, FormControl, FormLabel } from '@mui/material';
 ;
-const FieldTypeDateTime = ({ textFieldProps, ...props }) => {
-    return (_jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DateTimePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { InputLabelProps: {
-                    shrink: true,
-                    // Spread props at the end to allow InputLabelProps overrides
-                    ...textFieldProps?.InputLabelProps,
-                }, ...params, ...textFieldProps }), ...props }) }));
+const FieldTypeDateTime = ({ label, helperText, error, required, ...props }) => {
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DateTimePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error }), ...props }) })] }));
 };
 export default FieldTypeDateTime;

package/es/FieldTypeDropdown/FieldTypeDropwdon.stories.js

@@ -30,5 +30,6 @@ const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
     placeholder: 'Placeholder Text...',
-    label: 'Number label',
+    label: 'Dropdown label',
+    helperText: 'Dropdown helper text',
 };

package/es/FieldTypeDropdown/index.d.ts

@@ -7,5 +7,5 @@ interface Option {
 export interface FieldTypeDropdownProps extends Omit<OutlinedTextFieldProps, 'variant'> {
     options: Option[];
 }
-declare const FieldTypeDropdown: ({ InputLabelProps, options, ...props }: FieldTypeDropdownProps) => JSX.Element;
+declare const FieldTypeDropdown: ({ label, options, required, ...props }: FieldTypeDropdownProps) => JSX.Element;
 export default FieldTypeDropdown;

package/es/FieldTypeDropdown/index.js

@@ -1,15 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuItem } from '@mui/material';
 import MuiTextField from '@mui/material/TextField';
-const FieldTypeDropdown = ({ InputLabelProps, options, ...props }) => {
-    return (_jsxs(MuiTextField, { size: "small", variant: 'outlined', select: true, InputLabelProps: {
-            shrink: true,
-            // Spread props at the end to allow InputLabel prop overrides
-            ...InputLabelProps,
-        }, 
-        // Spread props at the end to allow prop overrides
-        SelectProps: {
-            displayEmpty: true,
-        }, ...props, children: [_jsx(MenuItem, { value: '', children: "- None -" }, ''), options.map((option) => (_jsx(MenuItem, { value: option.value, children: option.label }, option.value)))] }));
+import { FormControl, FormLabel } from '@mui/material';
+const FieldTypeDropdown = ({ label, options, required, ...props }) => {
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsxs(MuiTextField, { size: "small", variant: 'outlined', select: true, SelectProps: {
+                    displayEmpty: true,
+                }, ...props, children: [_jsx(MenuItem, { value: '', children: "- None -" }, ''), options.map((option) => (_jsx(MenuItem, { value: option.value, children: option.label }, option.value)))] })] }));
 };
 export default FieldTypeDropdown;

package/es/FieldTypeNumber/FieldTypeNumber.stories.js

@@ -17,4 +17,5 @@ export const Default = Template.bind({});
 Default.args = {
     placeholder: 'Placeholder Text...',
     label: 'Number label',
+    helperText: 'Number helper text',
 };

package/es/FieldTypeNumber/index.d.ts

@@ -2,5 +2,5 @@
 import { OutlinedTextFieldProps } from '@mui/material/TextField';
 export interface FieldTypeNumberProps extends Omit<OutlinedTextFieldProps, 'variant'> {
 }
-declare const FieldTypeText: ({ InputLabelProps, ...props }: FieldTypeNumberProps) => JSX.Element;
+declare const FieldTypeText: ({ label, required, ...props }: FieldTypeNumberProps) => JSX.Element;
 export default FieldTypeText;

package/es/FieldTypeNumber/index.js

@@ -1,10 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormLabel } from '@mui/material';
 import MuiTextField from '@mui/material/TextField';
-const FieldTypeText = ({ InputLabelProps, ...props }) => {
-    return (_jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'number', InputLabelProps: {
-            shrink: true,
-            // Spread props at the end to allow InputLabel prop overrides
-            ...InputLabelProps,
-        }, ...props }));
+const FieldTypeText = ({ label, required, ...props }) => {
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'number', ...props })] }));
 };
 export default FieldTypeText;

package/es/FieldTypeOneToMany/FieldTypeOneToMany.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { FieldTypeOneToManyProps } from '.';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<FieldTypeOneToManyProps>;

package/es/FieldTypeOneToMany/FieldTypeOneToMany.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import FieldTypeOneToMany from '.';
+import { randomOptions } from '../utils/virtualization';
+export default {
+    title: 'FieldTypeOneToMany',
+    component: FieldTypeOneToMany,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = useState([]);
+    const [options, setOptions] = useState([]);
+    const handleOnOpen = async () => {
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+        setOptions(randomOptions);
+    };
+    const handleOnChange = (e, values) => {
+        setValue(values);
+    };
+    return (_jsx(FieldTypeOneToMany, { ...args, value: value, onChange: handleOnChange, options: options, onOpen: handleOnOpen }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    textFieldProps: {
+        placeholder: 'Placeholder Text...',
+        label: 'OneToOne label',
+        helperText: 'OneToOne helperText',
+    }
+};

package/es/FieldTypeOneToMany/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { AutocompleteProps, TextFieldProps } from '@mui/material';
+export interface FieldTypeOneToManyProps extends Omit<AutocompleteProps<any, false, false, false>, 'onOpen' | 'renderInput'> {
+    /**
+     * Props passed to TextField component
+     */
+    textFieldProps?: TextFieldProps;
+    /**
+     * Callback to be fired upon opening the dropdown
+     */
+    onOpen: () => Promise<any>;
+}
+declare const FieldTypeOneToMany: ({ textFieldProps, onOpen, ...props }: FieldTypeOneToManyProps) => JSX.Element;
+export default FieldTypeOneToMany;

package/es/FieldTypeOneToMany/index.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Popper, styled, TextField } from '@mui/material';
+import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
+import { ListboxComponent } from '../utils/virtualization';
+const FieldTypeOneToMany = ({ textFieldProps, onOpen, ...props }) => {
+    const [loaded, setLoaded] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const handleOpen = () => {
+        if (!loaded && onOpen) {
+            onOpen().then(() => {
+                setLoading(false);
+            });
+            setLoaded(true);
+        }
+    };
+    return (_jsx(Autocomplete, { onOpen: handleOpen, loading: loading, fullWidth: true, multiple: true, disableListWrap: true, PopperComponent: StyledPopper, ListboxComponent: ListboxComponent, renderInput: (params) => (_jsx(TextField, { ...params, ...textFieldProps, InputLabelProps: {
+                shrink: true,
+            } })), renderOption: (props, option) => [props, option], ...props }));
+};
+export default FieldTypeOneToMany;
+const StyledPopper = styled(Popper)({
+    [`& .${autocompleteClasses.listbox}`]: {
+        boxSizing: 'border-box',
+        '& ul': {
+            padding: 0,
+            margin: 0,
+        },
+    },
+});

package/es/FieldTypeOneToOne/FieldTypeOneToOne.stories.d.ts

@@ -0,0 +1,5 @@
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { FieldTypeOneToOneProps } from './';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<FieldTypeOneToOneProps>;

package/es/FieldTypeOneToOne/FieldTypeOneToOne.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import FieldTypeOneToOne from './';
+export default {
+    title: 'FieldTypeOneToOne',
+    component: FieldTypeOneToOne,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = useState({ component: '- None -', value: '0', inputLabel: '- None -' });
+    const [options, setOptions] = useState([]);
+    const handleOnOpen = async () => {
+        const largeArr = new Array(1000).fill(null);
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+        const data = largeArr.map((_, idx) => ({ component: _jsx("div", { children: `Test ${idx}` }), value: String(Math.random()), inputLabel: `Test ${idx}` }));
+        setOptions(data);
+    };
+    const handleOnChange = (e, option) => {
+        setValue(option);
+    };
+    return (_jsx(FieldTypeOneToOne, { ...args, value: value, onChange: handleOnChange, options: options, onOpen: handleOnOpen }));
+};
+export const Default = Template.bind({});
+Default.args = {
+    label: 'OneToOne label',
+    helperText: 'OneToOne helperText',
+    placeholder: 'OneToOne placeholder'
+};

package/es/FieldTypeOneToOne/index.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { AutocompleteProps } from '@mui/material';
+export interface FieldTypeOneToOneProps extends Omit<AutocompleteProps<any, false, false, false>, 'onOpen' | 'renderInput'> {
+    label?: string;
+    helperText?: string;
+    placeholder?: string;
+    error?: boolean;
+    required?: boolean;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    /**
+     * Callback to be fired upon opening the dropdown
+     */
+    onOpen?: () => Promise<any>;
+    /**
+     * Structure for option
+     */
+    options: {
+        /**
+         * Component to be rendered in the dropdown
+         */
+        component: ReactNode | string;
+        /**
+         * Value of option
+         */
+        value: string;
+        /**
+         * Label that should display in the input when selected
+         */
+        inputLabel: string;
+    }[];
+}
+declare const FieldTypeOneToOne: ({ label, helperText, placeholder, error, onOpen, options, required, startAdornment, endAdornment, ...props }: FieldTypeOneToOneProps) => JSX.Element;
+export default FieldTypeOneToOne;

package/es/FieldTypeOneToOne/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Popper, styled, TextField, FormLabel, FormControl, InputAdornment } from '@mui/material';
+import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
+import { ListboxComponent } from '../utils/virtualization';
+const FieldTypeOneToOne = ({ label, helperText, placeholder, error, onOpen, options, required, startAdornment, endAdornment, ...props }) => {
+    const [loaded, setLoaded] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const handleOpen = () => {
+        if (!loaded && onOpen) {
+            onOpen().then(() => {
+                setLoading(false);
+            });
+            setLoading(true);
+            setLoaded(true);
+        }
+    };
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(Autocomplete, { onOpen: handleOpen, loading: loading, fullWidth: true, disableListWrap: true, disableClearable: true, disablePortal: true, size: 'small', PopperComponent: StyledPopper, ListboxComponent: ListboxComponent, renderInput: (params) => (_jsx(TextField, { ...params, helperText: helperText, error: error, placeholder: placeholder, InputProps: {
+                        ...params.InputProps,
+                        startAdornment: _jsx(InputAdornment, { position: 'end', children: startAdornment }),
+                        endAdornment: _jsxs(_Fragment, { children: [params.InputProps.endAdornment, _jsx(InputAdornment, { sx: { position: 'relative', right: '40px' }, position: 'end', children: endAdornment })] })
+                    } })), options: loading ? [] : options, getOptionLabel: (option) => option.inputLabel, renderOption: (props, option) => [props, option.component], ...props })] }));
+};
+export default FieldTypeOneToOne;
+const StyledPopper = styled(Popper)({
+    [`& .${autocompleteClasses.listbox}`]: {
+        boxSizing: 'border-box',
+        '& ul': {
+            padding: 0,
+            margin: 0,
+        },
+    },
+});

package/es/FieldTypeSort/FieldTypeSort.stories.js

@@ -18,4 +18,5 @@ Default.args = {
     placeholder: 'Placeholder Text...',
     label: 'Sort label',
     helperText: 'Sort helper text',
+    error: false,
 };

package/es/FieldTypeSort/index.d.ts

@@ -3,5 +3,5 @@ import { OutlinedTextFieldProps } from '@mui/material/TextField';
 export interface FieldTypeSortProps extends Omit<OutlinedTextFieldProps, 'variant'> {
     value: string;
 }
-declare const FieldTypeSort: ({ value, InputProps, InputLabelProps, sx, ...props }: FieldTypeSortProps) => JSX.Element;
+declare const FieldTypeSort: ({ label, value, InputProps, required, ...props }: FieldTypeSortProps) => JSX.Element;
 export default FieldTypeSort;

package/es/FieldTypeSort/index.js

@@ -1,32 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import MuiTextField from '@mui/material/TextField';
-import { Button, InputAdornment } from '@mui/material';
+import { Button, FormControl, FormLabel, InputAdornment } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
-const FieldTypeSort = ({ value, InputProps, InputLabelProps, sx, ...props }) => {
-    return (_jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'number', value: value, sx: {
-            width: 165,
-            // Spread props at the end to allow sx prop overrides
-            ...sx
-        }, InputProps: {
-            startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
-                        // References input via event in order to modify its value
-                        const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
-                        console.log('testing input', input);
-                        input.value = String(+input.value + 1);
-                    }, children: _jsx(AddIcon, { fontSize: 'small' }) }) })),
-            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
-                        // References input via event in order to modify its value
-                        const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
-                        console.log('testing input', input);
-                        input.value = String(+input.value - 1);
-                    }, children: _jsx(RemoveIcon, { fontSize: 'small' }) }) })),
-            // Spread props at the end to allow Input prop overrides
-            ...InputProps,
-        }, InputLabelProps: {
-            shrink: true,
-            // Spread props at the end to allow InputLabel prop overrides
-            ...InputLabelProps,
-        }, ...props }));
+const FieldTypeSort = ({ label, value, InputProps, required, ...props }) => {
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'number', value: value, InputProps: {
+                    startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
+                                // References input via event in order to modify its value
+                                const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
+                                input.value = String(+input.value - 1);
+                            }, children: _jsx(RemoveIcon, { fontSize: 'small' }) }) })),
+                    endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(Button, { size: "small", variant: "contained", onClick: (e) => {
+                                // References input via event in order to modify its value
+                                const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
+                                input.value = String(+input.value + 1);
+                            }, children: _jsx(AddIcon, { fontSize: 'small' }) }) })),
+                    // Spread props at the end to allow Input prop overrides
+                    ...InputProps,
+                }, ...props })] }));
 };
 export default FieldTypeSort;

package/es/FieldTypeText/FieldTypeText.stories.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import FieldTypeText from './';
 export default {
@@ -11,12 +11,13 @@ const Template = (args) => {
     const handleOnChange = (e) => {
         setValue(e.target.value);
     };
-    return (_jsx(FieldTypeText, { ...args, value: value, onChange: handleOnChange }));
+    return (_jsx(_Fragment, { children: _jsx(FieldTypeText, { ...args, value: value, onChange: handleOnChange }) }));
 };
 export const Default = Template.bind({});
 Default.args = {
     placeholder: 'Placeholder Text...',
     label: 'Text label',
+    helperText: 'Text helper text',
 };
 export const TextArea = Template.bind({});
 TextArea.args = {
@@ -24,4 +25,5 @@ TextArea.args = {
     rows: 4,
     placeholder: 'Placeholder Text...',
     label: 'Text Label',
+    helperText: 'Text helper text',
 };

package/es/FieldTypeText/index.d.ts

@@ -8,5 +8,5 @@ export interface FieldTypeTextProps extends Omit<OutlinedTextFieldProps, 'varian
     maxLength?: number;
     value: string;
 }
-declare const FieldTypeText: ({ maxLength, value, helperText, InputProps, InputLabelProps, ...props }: FieldTypeTextProps) => JSX.Element;
+declare const FieldTypeText: ({ label, maxLength, value, helperText, required, ...props }: FieldTypeTextProps) => JSX.Element;
 export default FieldTypeText;

package/es/FieldTypeText/index.js

@@ -1,15 +1,7 @@
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import MuiTextField from '@mui/material/TextField';
-import { InputAdornment } from '@mui/material';
-const FieldTypeText = ({ maxLength = 150, value, helperText, InputProps, InputLabelProps, ...props }) => {
-    return (_jsx(MuiTextField, { size: "small", variant: 'outlined', value: value, InputProps: {
-            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsxs(_Fragment, { children: [value.length, "/", maxLength] }) })),
-            // Spread props at the end to allow Input prop overrides
-            ...InputProps,
-        }, InputLabelProps: {
-            shrink: true,
-            // Spread props at the end to allow InputLabel prop overrides
-            ...InputLabelProps,
-        }, error: value.length > maxLength, helperText: value.length > maxLength ? 'Your input is over the specified limit' : helperText, ...props }));
+import { FormControl, FormLabel, Box } from '@mui/material';
+const FieldTypeText = ({ label, maxLength = 150, value, helperText, required, ...props }) => {
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsxs(FormLabel, { sx: { display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': { order: 2 } }, children: [_jsx(Box, { sx: { order: 1 }, children: label }), _jsxs(Box, { sx: { order: 3, flex: 1, textAlign: 'right' }, children: [value?.length, "/", maxLength] })] }), _jsx(MuiTextField, { size: "small", variant: 'outlined', value: value, error: value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : helperText, ...props })] }));
 };
 export default FieldTypeText;

package/es/FieldTypeUrl/index.d.ts

@@ -8,5 +8,5 @@ export interface FieldTypeUrlProps extends Omit<OutlinedTextFieldProps, 'variant
     maxLength?: number;
     value: string;
 }
-declare const FieldTypeUrl: ({ maxLength, value, helperText, InputProps, InputLabelProps, inputProps, ...props }: FieldTypeUrlProps) => JSX.Element;
+declare const FieldTypeUrl: ({ label, maxLength, value, helperText, required, inputProps, ...props }: FieldTypeUrlProps) => JSX.Element;
 export default FieldTypeUrl;

package/es/FieldTypeUrl/index.js

@@ -1,21 +1,13 @@
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import MuiTextField from '@mui/material/TextField';
-import { InputAdornment } from '@mui/material';
-const FieldTypeUrl = ({ maxLength = 2000, value, helperText, InputProps, InputLabelProps, inputProps, ...props }) => {
+import { FormControl, FormLabel, Box } from '@mui/material';
+const FieldTypeUrl = ({ label, maxLength = 2000, value, helperText, required, inputProps, ...props }) => {
     const inputRef = useRef(null);
-    return (_jsx(MuiTextField, { size: "small", type: 'url', variant: 'outlined', value: value, InputProps: {
-            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsxs(_Fragment, { children: [value.length, "/", maxLength] }) })),
-            // Spread props at the end to allow Input prop overrides
-            ...InputProps,
-        }, InputLabelProps: {
-            shrink: true,
-            // Spread props at the end to allow InputLabel prop overrides
-            ...InputLabelProps,
-        }, inputProps: {
-            ref: inputRef,
-            // Spread props at the end to allow inputProps prop overrides
-            ...inputProps,
-        }, error: (value && !inputRef.current?.validity.valid) || value.length > maxLength, helperText: value.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef.current?.validity.valid) ? 'Your input is not a valid url' : helperText, ...props }));
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsxs(FormLabel, { sx: { display: 'flex', justifyContent: 'space-between', '& .MuiFormLabel-asterisk': { order: 2 } }, children: [_jsx(Box, { sx: { order: 1 }, children: label }), _jsxs(Box, { sx: { order: 3, flex: 1, textAlign: 'right' }, children: [value?.length, "/", maxLength] })] }), _jsx(MuiTextField, { size: "small", type: 'url', variant: 'outlined', value: value, inputProps: {
+                    ref: inputRef,
+                    // Spread props at the end to allow inputProps prop overrides
+                    ...inputProps,
+                }, error: (value && !inputRef.current?.validity.valid) || value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef.current?.validity.valid) ? 'Your input is not a valid url' : helperText, ...props })] }));
 };
 export default FieldTypeUrl;

package/es/index.d.ts

@@ -7,5 +7,7 @@ export { default as FieldTypeDateTime } from './FieldTypeDateTime';
 export { default as FieldTypeColor } from './FieldTypeColor';
 export { default as FieldTypeNumber } from './FieldTypeNumber';
 export { default as FieldTypeDropdown } from './FieldTypeDropdown';
+export { default as FieldTypeOneToOne } from './FieldTypeOneToOne';
+export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
 export { default as CopyButton } from './CopyButton';
 export { default as ConfirmModal } from './ConfirmModal';

package/es/index.js

@@ -7,5 +7,7 @@ export { default as FieldTypeDateTime } from './FieldTypeDateTime';
 export { default as FieldTypeColor } from './FieldTypeColor';
 export { default as FieldTypeNumber } from './FieldTypeNumber';
 export { default as FieldTypeDropdown } from './FieldTypeDropdown';
+export { default as FieldTypeOneToOne } from './FieldTypeOneToOne';
+export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
 export { default as CopyButton } from './CopyButton';
 export { default as ConfirmModal } from './ConfirmModal';

package/es/theme/index.js

@@ -39,6 +39,9 @@ theme = createTheme(theme, {
                 root: {
                     color: theme.palette.primary.dark,
                 },
+                asterisk: {
+                    color: theme.palette.error.main,
+                }
             },
         },
         MuiToggleButton: {