@zesty-io/material 0.2.4 → 0.2.5

package/es/FieldTypeOneToMany/FieldTypeOneToMany.stories.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import FieldTypeOneToMany from '.';
-export default {
-    title: 'FieldTypeOneToMany',
-    component: FieldTypeOneToMany,
-    argType: {},
-};
-const Template = (args) => {
-    const [value, setValue] = useState([]);
-    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, values) => {
-        setValue(values);
-    };
-    return (_jsx(FieldTypeOneToMany, { ...args, value: value, onChange: handleOnChange, options: options, onOpen: handleOnOpen }));
-};
-export const Default = Template.bind({});
-Default.args = {
-    placeholder: 'Placeholder Text...',
-    label: 'OneToMany label',
-    helperText: 'OneToMany helperText',
-};

package/es/FieldTypeOneToMany/index.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { FormControl, FormLabel, Popper, styled, TextField } from '@mui/material';
-import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
-import { ListboxComponent } from '../utils/virtualization';
-const FieldTypeOneToMany = ({ label, helperText, placeholder, error, onOpen, options, required, ...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, multiple: true, disableListWrap: true, disableClearable: true, disablePortal: true, size: 'small', PopperComponent: StyledPopper, ListboxComponent: ListboxComponent, renderInput: (params) => (_jsx(TextField, { ...params, helperText: helperText, error: error, placeholder: placeholder })), options: loading ? [] : options, getOptionLabel: (option) => option.inputLabel, renderOption: (props, option) => [props, option.component], ...props })] }));
-};
-export default FieldTypeOneToMany;
-const StyledPopper = styled(Popper)({
-    [`& .${autocompleteClasses.listbox}`]: {
-        boxSizing: 'border-box',
-        '& ul': {
-            padding: 0,
-            margin: 0,
-        },
-    },
-});

package/es/FieldTypeOneToOne/FieldTypeOneToOne.stories.js

@@ -1,28 +0,0 @@
-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.js

@@ -1,33 +0,0 @@
-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

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import FieldTypeSort from './';
-export default {
-    title: 'FieldTypeSort',
-    component: FieldTypeSort,
-    argType: {},
-};
-const Template = (args) => {
-    const [value, setValue] = useState('3');
-    const handleOnChange = (e) => {
-        setValue(e.target.value);
-    };
-    return (_jsx(FieldTypeSort, { ...args, value: value, onChange: handleOnChange }));
-};
-export const Default = Template.bind({});
-Default.args = {
-    placeholder: 'Placeholder Text...',
-    label: 'Sort label',
-    helperText: 'Sort helper text',
-    error: false,
-};

package/es/FieldTypeText/FieldTypeText.stories.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import FieldTypeText from './';
-export default {
-    title: 'FieldTypeText',
-    component: FieldTypeText,
-    argType: {},
-};
-const Template = (args) => {
-    const [value, setValue] = useState('');
-    const handleOnChange = (e) => {
-        setValue(e.target.value);
-    };
-    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 = {
-    multiline: true,
-    rows: 4,
-    placeholder: 'Placeholder Text...',
-    label: 'Text Label',
-    helperText: 'Text helper text',
-};

package/es/FieldTypeText/index.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import MuiTextField from '@mui/material/TextField';
-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/FieldTypeUrl.stories.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import FieldTypeUrl from './';
-export default {
-    title: 'FieldTypeUrl',
-    component: FieldTypeUrl,
-    argType: {},
-};
-const Template = (args) => {
-    const [value, setValue] = useState('');
-    const handleOnChange = (e) => {
-        setValue(e.target.value);
-    };
-    return (_jsx(FieldTypeUrl, { ...args, value: value, onChange: handleOnChange }));
-};
-export const Default = Template.bind({});
-Default.args = {
-    placeholder: 'Placeholder Text...',
-    label: 'Some label',
-    fullWidth: true,
-};

package/es/FieldTypeUrl/index.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import MuiTextField from '@mui/material/TextField';
-import { FormControl, FormLabel, Box } from '@mui/material';
-const FieldTypeUrl = ({ label, maxLength = 2000, value, helperText, required, inputProps, ...props }) => {
-    // Use state to hold input reference to re-render once ref changes in case error needs to be shown on mount
-    const [inputRef, setInputRef] = useState();
-    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) => setInputRef(inputRef),
-                    // Spread props at the end to allow inputProps prop overrides
-                    ...inputProps,
-                }, error: (value && !inputRef?.validity.valid) || value?.length > maxLength, helperText: value?.length > maxLength ? 'Your input is over the specified limit' : (value && !inputRef?.validity.valid) ? 'Your input is not a valid url' : helperText, ...props })] }));
-};
-export default FieldTypeUrl;

package/es/LegacyTheme/typography.js

@@ -1,4 +0,0 @@
-const typography = {
-    fontFamily: "'Mulish'",
-};
-export default typography;

package/es/VitualizedAutocomplete/VirtualizedAutocomplete.stories.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import VirtualizedAutocomplete from './';
-export default {
-    title: 'VirtualizedAutocomplete',
-    component: VirtualizedAutocomplete,
-    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(VirtualizedAutocomplete, { ...args, value: value, onChange: handleOnChange, options: options, onOpen: handleOnOpen }));
-};
-export const Default = Template.bind({});
-Default.args = {
-    helperText: 'OneToOne helperText',
-    placeholder: 'OneToOne placeholder'
-};

package/es/VitualizedAutocomplete/index.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Popper, styled, TextField, InputAdornment } from '@mui/material';
-import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
-import { ListboxComponent } from '../utils/virtualization';
-const VirtualizedAutocomplete = ({ helperText, placeholder, error, startAdornment, endAdornment, ...props }) => {
-    return (_jsx(Autocomplete, { fullWidth: true, disableListWrap: 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 })] })
-            } })), getOptionLabel: (option) => option.inputLabel, renderOption: (props, option) => [props, option.component], ...props }));
-};
-export default VirtualizedAutocomplete;
-const StyledPopper = styled(Popper)({
-    [`& .${autocompleteClasses.listbox}`]: {
-        boxSizing: 'border-box',
-        '& ul': {
-            padding: 0,
-            margin: 0,
-        },
-    },
-});

package/es/index.js

@@ -1,14 +0,0 @@
-export { default as legacyTheme } from './LegacyTheme';
-export { default as theme } from './theme';
-export { default as FieldTypeText } from './FieldTypeText';
-export { default as FieldTypeSort } from './FieldTypeSort';
-export { default as FieldTypeUrl } from './FieldTypeUrl';
-export { default as FieldTypeDate } from './FieldTypeDate';
-export { default as FieldTypeDateTime } from './FieldTypeDateTime';
-export { default as FieldTypeColor } from './FieldTypeColor';
-export { default as FieldTypeNumber } from './FieldTypeNumber';
-export { default as FieldTypeOneToOne } from './FieldTypeOneToOne';
-export { default as FieldTypeOneToMany } from './FieldTypeOneToMany';
-export { default as CopyButton } from './CopyButton';
-export { default as ConfirmDialog } from './ConfirmDialog';
-export { default as VirtualizedAutocomplete } from './VitualizedAutocomplete';

package/es/stories/Theme.stories.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ReactJson from 'react-json-view';
-import theme from '../theme';
-export default {
-    title: 'Theme',
-};
-const Template = (args) => {
-    return (_jsx(ReactJson, { src: theme }));
-};
-export const Default = Template.bind({});

package/es/theme/Theme.stories.d.ts

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

package/es/theme/Theme.stories.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ReactJson from 'react-json-view';
-import theme from '.';
-export default {
-    title: 'Theme',
-};
-const Template = (args) => {
-    return (_jsx(ReactJson, { src: theme }));
-};
-export const Default = Template.bind({});

package/es/utils/virtualization.js

@@ -1,63 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import ListSubheader from '@mui/material/ListSubheader';
-import { useTheme } from '@mui/material/styles';
-import { VariableSizeList } from 'react-window';
-import Typography from '@mui/material/Typography';
-const LISTBOX_PADDING = 8; // px
-function renderRow(props) {
-    const { data, index, style } = props;
-    const dataSet = data[index];
-    const inlineStyle = {
-        ...style,
-        top: style.top + LISTBOX_PADDING,
-    };
-    if (dataSet.hasOwnProperty('group')) {
-        return (_jsx(ListSubheader, { component: "div", style: inlineStyle, children: dataSet.group }, dataSet.key));
-    }
-    return (_jsx(Typography, { component: "li", ...dataSet[0], noWrap: true, style: inlineStyle, children: dataSet[1] }));
-}
-const OuterElementContext = React.createContext({});
-const OuterElementType = React.forwardRef((props, ref) => {
-    const outerProps = React.useContext(OuterElementContext);
-    return _jsx("div", { ref: ref, ...props, ...outerProps });
-});
-function useResetCache(data) {
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        if (ref.current != null) {
-            ref.current.resetAfterIndex(0, true);
-        }
-    }, [data]);
-    return ref;
-}
-// Adapter for react-window
-export const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) {
-    const { children, ...other } = props;
-    const itemData = [];
-    children.forEach((item) => {
-        itemData.push(item);
-        itemData.push(...(item.children || []));
-    });
-    const theme = useTheme();
-    const smUp = useMediaQuery(theme.breakpoints.up('sm'), {
-        noSsr: true,
-    });
-    const itemCount = itemData.length;
-    const itemSize = smUp ? 36 : 48;
-    const getChildSize = (child) => {
-        if (child.hasOwnProperty('group')) {
-            return 48;
-        }
-        return itemSize;
-    };
-    const getHeight = () => {
-        if (itemCount > 8) {
-            return 8 * itemSize;
-        }
-        return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
-    };
-    const gridRef = useResetCache(itemCount);
-    return (_jsx("div", { ref: ref, children: _jsx(OuterElementContext.Provider, { value: other, children: _jsx(VariableSizeList, { itemData: itemData, height: getHeight() + 2 * LISTBOX_PADDING, width: "100%", ref: gridRef, outerElementType: OuterElementType, innerElementType: "ul", itemSize: (index) => getChildSize(itemData[index]), overscanCount: 5, itemCount: itemCount, children: renderRow }) }) }));
-});