@zesty-io/material 0.2.3 → 0.2.5

package/{es → cjs}/LegacyTheme/palette.js

@@ -1,3 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 const palette = {
     primary: {
         main: '#404759',
@@ -20,4 +22,4 @@ const palette = {
         contrastText: '#ffffff',
     },
 };
-export default palette;
+exports.default = palette;

package/cjs/LegacyTheme/typography.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const typography = {
+    fontFamily: "'Mulish'",
+};
+exports.default = typography;

package/cjs/VitualizedAutocomplete/VirtualizedAutocomplete.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require("./");
+exports.default = {
+    title: 'VirtualizedAutocomplete',
+    component: _1.default,
+    argType: {},
+};
+const Template = (args) => {
+    const [value, setValue] = (0, react_1.useState)({ component: '- None -', value: '0', inputLabel: '- None -' });
+    const [options, setOptions] = (0, react_1.useState)([]);
+    const handleOnOpen = async () => {
+        const largeArr = new Array(1000).fill(null);
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+        const data = largeArr.map((_, idx) => ({ component: (0, jsx_runtime_1.jsx)("div", { children: `Test ${idx}` }), value: String(Math.random()), inputLabel: `Test ${idx}` }));
+        setOptions(data);
+    };
+    const handleOnChange = (e, option) => {
+        setValue(option);
+    };
+    return ((0, jsx_runtime_1.jsx)(_1.default, { ...args, value: value, onChange: handleOnChange, options: options, onOpen: handleOnOpen }));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    helperText: 'OneToOne helperText',
+    placeholder: 'OneToOne placeholder'
+};

package/cjs/VitualizedAutocomplete/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const Autocomplete_1 = require("@mui/material/Autocomplete");
+const virtualization_1 = require("../utils/virtualization");
+const VirtualizedAutocomplete = ({ helperText, placeholder, error, startAdornment, endAdornment, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(Autocomplete_1.default, { fullWidth: true, disableListWrap: true, size: 'small', PopperComponent: StyledPopper, ListboxComponent: virtualization_1.ListboxComponent, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, helperText: helperText, error: error, placeholder: placeholder, InputProps: {
+                ...params.InputProps,
+                startAdornment: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: 'end', children: startAdornment }),
+                endAdornment: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [params.InputProps.endAdornment, (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { sx: { position: 'relative', right: '40px' }, position: 'end', children: endAdornment })] })
+            } })), getOptionLabel: (option) => option.inputLabel, renderOption: (props, option) => [props, option.component], ...props }));
+};
+exports.default = VirtualizedAutocomplete;
+const StyledPopper = (0, material_1.styled)(material_1.Popper)({
+    [`& .${Autocomplete_1.autocompleteClasses.listbox}`]: {
+        boxSizing: 'border-box',
+        '& ul': {
+            padding: 0,
+            margin: 0,
+        },
+    },
+});

package/cjs/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualizedAutocomplete = exports.ConfirmDialog = exports.CopyButton = exports.FieldTypeOneToMany = exports.FieldTypeOneToOne = exports.FieldTypeNumber = exports.FieldTypeColor = exports.FieldTypeDateTime = exports.FieldTypeDate = exports.FieldTypeUrl = exports.FieldTypeSort = exports.FieldTypeText = exports.theme = exports.legacyTheme = void 0;
+var LegacyTheme_1 = require("./LegacyTheme");
+Object.defineProperty(exports, "legacyTheme", { enumerable: true, get: function () { return LegacyTheme_1.default; } });
+var theme_1 = require("./theme");
+Object.defineProperty(exports, "theme", { enumerable: true, get: function () { return theme_1.default; } });
+var FieldTypeText_1 = require("./FieldTypeText");
+Object.defineProperty(exports, "FieldTypeText", { enumerable: true, get: function () { return FieldTypeText_1.default; } });
+var FieldTypeSort_1 = require("./FieldTypeSort");
+Object.defineProperty(exports, "FieldTypeSort", { enumerable: true, get: function () { return FieldTypeSort_1.default; } });
+var FieldTypeUrl_1 = require("./FieldTypeUrl");
+Object.defineProperty(exports, "FieldTypeUrl", { enumerable: true, get: function () { return FieldTypeUrl_1.default; } });
+var FieldTypeDate_1 = require("./FieldTypeDate");
+Object.defineProperty(exports, "FieldTypeDate", { enumerable: true, get: function () { return FieldTypeDate_1.default; } });
+var FieldTypeDateTime_1 = require("./FieldTypeDateTime");
+Object.defineProperty(exports, "FieldTypeDateTime", { enumerable: true, get: function () { return FieldTypeDateTime_1.default; } });
+var FieldTypeColor_1 = require("./FieldTypeColor");
+Object.defineProperty(exports, "FieldTypeColor", { enumerable: true, get: function () { return FieldTypeColor_1.default; } });
+var FieldTypeNumber_1 = require("./FieldTypeNumber");
+Object.defineProperty(exports, "FieldTypeNumber", { enumerable: true, get: function () { return FieldTypeNumber_1.default; } });
+var FieldTypeOneToOne_1 = require("./FieldTypeOneToOne");
+Object.defineProperty(exports, "FieldTypeOneToOne", { enumerable: true, get: function () { return FieldTypeOneToOne_1.default; } });
+var FieldTypeOneToMany_1 = require("./FieldTypeOneToMany");
+Object.defineProperty(exports, "FieldTypeOneToMany", { enumerable: true, get: function () { return FieldTypeOneToMany_1.default; } });
+var CopyButton_1 = require("./CopyButton");
+Object.defineProperty(exports, "CopyButton", { enumerable: true, get: function () { return CopyButton_1.default; } });
+var ConfirmDialog_1 = require("./ConfirmDialog");
+Object.defineProperty(exports, "ConfirmDialog", { enumerable: true, get: function () { return ConfirmDialog_1.default; } });
+var VitualizedAutocomplete_1 = require("./VitualizedAutocomplete");
+Object.defineProperty(exports, "VirtualizedAutocomplete", { enumerable: true, get: function () { return VitualizedAutocomplete_1.default; } });

package/cjs/theme/Theme.stories.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_json_view_1 = require("react-json-view");
+const _1 = require(".");
+exports.default = {
+    title: 'Theme',
+};
+const Template = (args) => {
+    return ((0, jsx_runtime_1.jsx)(react_json_view_1.default, { src: _1.default }));
+};
+exports.Default = Template.bind({});

package/{es → cjs}/theme/index.js

@@ -1,11 +1,13 @@
-import palette from './palette';
-import typography from './typography';
-import { createTheme } from '@mui/material/styles';
-let theme = createTheme({
-    palette,
-    typography,
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const palette_1 = require("./palette");
+const typography_1 = require("./typography");
+const styles_1 = require("@mui/material/styles");
+let theme = (0, styles_1.createTheme)({
+    palette: palette_1.default,
+    typography: typography_1.default,
 });
-theme = createTheme(theme, {
+theme = (0, styles_1.createTheme)(theme, {
     components: {
         MuiFormLabel: {
             styleOverrides: {
@@ -47,4 +49,4 @@ theme = createTheme(theme, {
         },
     },
 });
-export default theme;
+exports.default = theme;

package/{es → cjs}/theme/palette.js

@@ -1,3 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 const palette = {
     primary: {
         main: "#FF5D03",
@@ -133,4 +135,4 @@ const palette = {
         focus: "rgba(16, 24, 40, 0.12)",
     }
 };
-export default palette;
+exports.default = palette;

package/{es → cjs}/theme/typography.js

@@ -1,3 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 const typography = {
     fontFamily: "'Mulish'",
     h1: {
@@ -46,7 +48,7 @@ const typography = {
         lineHeight: "22px",
     },
     caption: {
-        fontSize: '20px',
+        fontSize: '12px',
         lineHeight: "20px",
     },
     overline: {
@@ -54,4 +56,4 @@ const typography = {
         letterSpacing: "1px",
     },
 };
-export default typography;
+exports.default = typography;

package/cjs/utils/virtualization.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListboxComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = require("react");
+const useMediaQuery_1 = require("@mui/material/useMediaQuery");
+const ListSubheader_1 = require("@mui/material/ListSubheader");
+const styles_1 = require("@mui/material/styles");
+const react_window_1 = require("react-window");
+const Typography_1 = require("@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 ((0, jsx_runtime_1.jsx)(ListSubheader_1.default, { component: "div", style: inlineStyle, children: dataSet.group }, dataSet.key));
+    }
+    return ((0, jsx_runtime_1.jsx)(Typography_1.default, { 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 (0, jsx_runtime_1.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
+exports.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 = (0, styles_1.useTheme)();
+    const smUp = (0, useMediaQuery_1.default)(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 ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)(OuterElementContext.Provider, { value: other, children: (0, jsx_runtime_1.jsx)(react_window_1.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 }) }) }));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",
@@ -12,11 +12,13 @@
     "url": "https://github.com/zesty-io/material/issues"
   },
   "homepage": "https://zesty-io.github.io/material",
-  "main": "es/index.js",
+  "main": "cjs/index.js",
   "module": "es/index.js",
   "types": "es/index.d.ts",
   "scripts": {
-    "build": "npm ci && tsc",
+    "build": "npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir cjs",
     "prerelease": "npm test",
     "release": "npm run build && npm publish --access public",
     "release:alpha": "npm run build && npm publish --access public --tag alpha",

package/src/theme/typography.ts

@@ -56,7 +56,7 @@ const typography: TypographyVariantsOptions = {
     lineHeight: "22px",
   },
   caption: {
-    fontSize: '20px',
+    fontSize: '12px',
     lineHeight: "20px",
   },
   overline: {

package/es/ConfirmDialog/ConfirmDialog.stories.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Button } from '@mui/material';
-import ConfirmDialog from '.';
-export default {
-    title: 'ConfirmDialog',
-    component: ConfirmDialog,
-    argType: {},
-};
-const Template = (args) => {
-    const [open, setOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", onClick: () => setOpen(true), children: "Click me to open" }), _jsx(ConfirmDialog, { ...args, open: open, callback: (confirmed) => setOpen(false) })] }));
-};
-export const Default = Template.bind({});
-Default.args = {
-    title: 'Confirm modal title',
-    content: 'Confirm modal content',
-};
-export const CustomChildren = Template.bind({});
-CustomChildren.args = {
-    title: 'Confirm modal title',
-    content: 'Confirm modal content',
-    children: _jsxs(_Fragment, { children: [_jsx(Button, { color: "error", variant: "contained", children: "Custom 1" }), _jsx(Button, { color: "success", variant: "contained", children: "Custom 2" })] })
-};

package/es/ConfirmDialog/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import { Button } from '@mui/material';
-const ConfirmDialog = ({ title, content, onClose, children, callback, ...props }) => {
-    return (_jsxs(Dialog, { ...props, children: [_jsx(DialogTitle, { children: title }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: content }) }), children ? _jsx(DialogActions, { children: children }) : (_jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", onClick: () => callback(false), children: "No" }), _jsx(Button, { variant: "contained", onClick: () => callback(true), autoFocus: true, children: "Yes" })] }))] }));
-};
-export default ConfirmDialog;

package/es/ConfirmModal/ConfirmModal.stories.d.ts

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

package/es/ConfirmModal/ConfirmModal.stories.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Button } from '@mui/material';
-import ConfirmDialog from '.';
-export default {
-    title: 'ConfirmDialog',
-    component: ConfirmDialog,
-    argType: {},
-};
-const Template = (args) => {
-    const [open, setOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", onClick: () => setOpen(true), children: "Click me to open" }), _jsx(ConfirmDialog, { ...args, open: open, callback: (confirmed) => setOpen(false) })] }));
-};
-export const Default = Template.bind({});
-Default.args = {
-    title: 'Confirm modal title',
-    content: 'Confirm modal content',
-};
-export const CustomChildren = Template.bind({});
-CustomChildren.args = {
-    title: 'Confirm modal title',
-    content: 'Confirm modal content',
-    children: _jsxs(_Fragment, { children: [_jsx(Button, { color: "error", variant: "contained", children: "Custom 1" }), _jsx(Button, { color: "success", variant: "contained", children: "Custom 2" })] })
-};

package/es/ConfirmModal/index.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-import { DialogProps } from '@mui/material/Dialog';
-export interface ConfirmDialogProps extends Omit<DialogProps, 'title'> {
-    /**
-     * Title of confirm dialog
-     */
-    title: string | ReactNode;
-    /**
-     * Content of confirm dialog
-     */
-    content: string | ReactNode;
-    /**
-     * Callback of confirm dialog
-     */
-    callback: (confirmed: boolean) => void;
-}
-declare const ConfirmDialog: ({ title, content, onClose, children, callback, ...props }: ConfirmDialogProps) => JSX.Element;
-export default ConfirmDialog;

package/es/ConfirmModal/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import { Button } from '@mui/material';
-const ConfirmDialog = ({ title, content, onClose, children, callback, ...props }) => {
-    return (_jsxs(Dialog, { ...props, children: [_jsx(DialogTitle, { children: title }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: content }) }), children ? _jsx(DialogActions, { children: children }) : (_jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", onClick: () => callback(false), children: "No" }), _jsx(Button, { variant: "contained", onClick: () => callback(true), autoFocus: true, children: "Yes" })] }))] }));
-};
-export default ConfirmDialog;

package/es/CopyButton/CopyButton.stories.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import CopyButton from '.';
-export default {
-    title: 'CopyButton',
-    component: CopyButton,
-    argType: {},
-};
-const Template = (args) => {
-    return (_jsx(CopyButton, { ...args }));
-};
-export const Default = Template.bind({});
-Default.args = {
-    value: 'Copy Me!'
-};

package/es/CopyButton/index.js

@@ -1,26 +0,0 @@
-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';
-import CheckIcon from '@mui/icons-material/Check';
-const CopyButton = ({ value, sx, ...props }) => {
-    const [copied, setCopied] = useState(false);
-    const copyValue = useCallback(() => {
-        navigator?.clipboard.writeText(value);
-        setCopied(true);
-    }, [value]);
-    useEffect(() => {
-        const iconTimer = setTimeout(() => {
-            setCopied(false);
-        }, 500);
-        return () => {
-            clearTimeout(iconTimer);
-        };
-    }, [copied]);
-    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,
-        }, 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/FieldTypeColor.stories.js

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

package/es/FieldTypeColor/index.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import MuiTextField from '@mui/material/TextField';
-import { Button, FormControl, FormLabel, InputAdornment } from '@mui/material';
-import BrushIcon from '@mui/icons-material/Brush';
-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

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import FieldTypeDate from '.';
-export default {
-    title: 'FieldTypeDate',
-    component: FieldTypeDate,
-    argType: {},
-};
-const Template = (args) => {
-    const [value, setValue] = useState(null);
-    return (_jsx(FieldTypeDate, { ...args, value: value, onChange: (value) => setValue(value) }));
-};
-export const Default = Template.bind({});
-Default.args = {
-    label: 'Date label',
-    helperText: 'Date helper text',
-};

package/es/FieldTypeDate/index.js

@@ -1,10 +0,0 @@
-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 { DesktopDatePicker } from '@mui/x-date-pickers';
-import { FormControl, FormLabel, TextField } from '@mui/material';
-;
-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(DesktopDatePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error, size: "small" }), ...props }) })] }));
-};
-export default FieldTypeDate;

package/es/FieldTypeDateTime/FieldTypeDateTime.stories.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import FieldTypeDateTime from '.';
-export default {
-    title: 'FieldTypeDateTime',
-    component: FieldTypeDateTime,
-    argType: {},
-};
-const Template = (args) => {
-    const [value, setValue] = useState(null);
-    return (_jsx(FieldTypeDateTime, { ...args, value: value, onChange: (value) => setValue(value) }));
-};
-export const Default = Template.bind({});
-Default.args = {
-    label: 'Date label',
-    helperText: 'Date helper text',
-};

package/es/FieldTypeDateTime/index.js

@@ -1,10 +0,0 @@
-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 { DesktopDateTimePicker } from '@mui/x-date-pickers';
-import { TextField, FormControl, FormLabel } from '@mui/material';
-;
-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(DesktopDateTimePicker, { "data-testid": "zds-date-time-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error, size: "small" }), ...props }) })] }));
-};
-export default FieldTypeDateTime;

package/es/FieldTypeDropdown/FieldTypeDropwdon.stories.d.ts

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

package/es/FieldTypeDropdown/FieldTypeDropwdon.stories.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import FieldTypeDropdown from './';
-export default {
-    title: 'FieldTypeDropdown',
-    component: FieldTypeDropdown,
-    argType: {},
-};
-const options = [
-    {
-        value: 'option1',
-        label: 'Option 1',
-    },
-    {
-        value: 'option2',
-        label: 'Option 2',
-    },
-    {
-        value: 'option3',
-        label: 'Option 3',
-    },
-];
-const Template = (args) => {
-    const [value, setValue] = useState('');
-    const handleOnChange = (e) => {
-        setValue(e.target.value);
-    };
-    return (_jsx(FieldTypeDropdown, { ...args, value: value, onChange: handleOnChange, options: options }));
-};
-export const Default = Template.bind({});
-Default.args = {
-    placeholder: 'Placeholder Text...',
-    label: 'Dropdown label',
-    helperText: 'Dropdown helper text',
-};

package/es/FieldTypeDropdown/index.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { OutlinedTextFieldProps } from '@mui/material/TextField';
-interface Option {
-    label: string;
-    value: any;
-}
-export interface FieldTypeDropdownProps extends Omit<OutlinedTextFieldProps, 'variant'> {
-    options: Option[];
-}
-declare const FieldTypeDropdown: ({ label, options, required, ...props }: FieldTypeDropdownProps) => JSX.Element;
-export default FieldTypeDropdown;

package/es/FieldTypeDropdown/index.js

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