@zesty-io/material 0.2.0 → 0.2.1

package/es/FieldTypeDate/index.js

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

package/es/FieldTypeDateTime/index.js

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

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: ({ label, value, InputProps, required, ...props }: FieldTypeSortProps) => JSX.Element;
+declare const FieldTypeSort: ({ label, value, InputProps, required, onChange, ...props }: FieldTypeSortProps) => JSX.Element;
 export default FieldTypeSort;

package/es/FieldTypeSort/index.js

@@ -3,17 +3,29 @@ import MuiTextField from '@mui/material/TextField';
 import { Button, FormControl, FormLabel, InputAdornment } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
-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: {
+const FieldTypeSort = ({ label, value, InputProps, required, onChange, ...props }) => {
+    return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(MuiTextField, { size: "small", variant: 'outlined', type: 'number', value: value, onChange: onChange, 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
+                                e.stopPropagation();
+                                // References input via click event in order to obtain its value
                                 const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
-                                input.value = String(+input.value - 1);
+                                const newValue = String(+input.value - 1);
+                                // Updates internal input value in case component is not controlled
+                                input.value = newValue;
+                                // Mocks an event change
+                                const event = { target: { value: newValue } };
+                                onChange && onChange(event);
                             }, 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
+                                e.stopPropagation();
+                                // References input via click event in order to obtain its value
                                 const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1];
-                                input.value = String(+input.value + 1);
+                                const newValue = String(+input.value + 1);
+                                // Updates internal input value in case component is not controlled
+                                input.value = newValue;
+                                // Mocks an event change
+                                const event = { target: { value: newValue } };
+                                onChange && onChange(event);
                             }, children: _jsx(AddIcon, { fontSize: 'small' }) }) })),
                     // Spread props at the end to allow Input prop overrides
                     ...InputProps,

package/es/FieldTypeUrl/index.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
+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 }) => {
-    const inputRef = useRef(null);
+    // 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,
+                    ref: (inputRef) => setInputRef(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 })] }));
+                }, 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/theme/index.js

@@ -7,6 +7,13 @@ let theme = createTheme({
 });
 theme = createTheme(theme, {
     components: {
+        MuiAccordionSummary: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#e4e9f1',
+                },
+            },
+        },
         MuiButton: {
             styleOverrides: {
                 root: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zesty-io/material",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Contains custom components which are in addition to the @mui design-system",
   "author": "Zesty.io",
   "license": "MIT",

package/src/FieldTypeDate/index.tsx

@@ -21,6 +21,7 @@ const FieldTypeDate = ({label, helperText, error, required, ...props}: FieldType
               {...params}
               helperText={helperText}
               error={error}
+              size="small"
             />
           }
           // Spread props at the end to allow prop overrides

package/src/FieldTypeDateTime/index.tsx

@@ -22,6 +22,7 @@ const FieldTypeDateTime = ({label, helperText, error, required, ...props}: Field
               {...params}
               helperText={helperText}
               error={error}
+              size="small"
             />
           }
           // Spread props at the end to allow prop overrides

package/src/FieldTypeSort/index.tsx

@@ -1,3 +1,4 @@
+import { ChangeEvent } from 'react';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
 import { Button, FormControl, FormLabel, InputAdornment } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
@@ -7,7 +8,7 @@ export interface FieldTypeSortProps extends Omit<OutlinedTextFieldProps, 'varian
   value: string;
 }
 
-const FieldTypeSort = ({label, value, InputProps, required, ...props }: FieldTypeSortProps) => {
+const FieldTypeSort = ({label, value, InputProps, required, onChange, ...props }: FieldTypeSortProps) => {
   return (
     <FormControl fullWidth required={required}>
       <FormLabel>{label}</FormLabel>
@@ -16,6 +17,7 @@ const FieldTypeSort = ({label, value, InputProps, required, ...props }: FieldTyp
         variant='outlined'
         type='number'
         value={value}
+        onChange={onChange}
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
@@ -23,9 +25,15 @@ const FieldTypeSort = ({label, value, InputProps, required, ...props }: FieldTyp
                 size="small"
                 variant="contained"
                 onClick={(e) => {
-                  // References input via event in order to modify its value
+                  e.stopPropagation();
+                  // References input via click event in order to obtain its value
                   const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1] as HTMLInputElement;
-                  input.value = String(+input.value - 1)
+                  const newValue = String(+input.value - 1)
+                  // Updates internal input value in case component is not controlled
+                  input.value = newValue
+                  // Mocks an event change
+                  const event = {target: {value: newValue}}
+                  onChange && onChange(event as ChangeEvent<HTMLTextAreaElement | HTMLInputElement>);
                 }}><RemoveIcon fontSize='small' />
               </Button>
             </InputAdornment>
@@ -36,9 +44,15 @@ const FieldTypeSort = ({label, value, InputProps, required, ...props }: FieldTyp
                 size="small"
                 variant="contained"
                 onClick={(e) => {
-                  // References input via event in order to modify its value
+                  e.stopPropagation();
+                  // References input via click event in order to obtain its value
                   const input = e.currentTarget?.parentElement?.parentElement?.childNodes?.[1] as HTMLInputElement;
-                  input.value = String(+input.value + 1)
+                  const newValue = String(+input.value + 1)
+                  // Updates internal input value in case component is not controlled
+                  input.value = newValue
+                  // Mocks an event change
+                  const event = {target: {value: newValue}}
+                  onChange && onChange(event as ChangeEvent<HTMLTextAreaElement | HTMLInputElement>);
                 }}><AddIcon fontSize='small' />
               </Button>
             </InputAdornment>

package/src/FieldTypeUrl/index.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useState } from 'react';
 import MuiTextField, { OutlinedTextFieldProps } from '@mui/material/TextField';
 import { FormControl, FormLabel, Box } from '@mui/material';
 
@@ -12,7 +12,8 @@ export interface FieldTypeUrlProps extends Omit<OutlinedTextFieldProps, 'variant
 }
 
 const FieldTypeUrl = ({label, maxLength = 2000, value, helperText, required, inputProps, ...props }: FieldTypeUrlProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
+  // 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<HTMLInputElement>();
 
   return (
     <FormControl fullWidth required={required}>
@@ -27,12 +28,12 @@ const FieldTypeUrl = ({label, maxLength = 2000, value, helperText, required, inp
         variant='outlined'
         value={value}
         inputProps={{
-          ref: inputRef,
+          ref: (inputRef: HTMLInputElement) => setInputRef(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}
+        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}
         // Spread props at the end to allow prop overrides
         {...props}
       />

package/src/theme/index.ts

@@ -9,6 +9,13 @@ let theme: Theme = createTheme({
 
 theme = createTheme(theme, {
   components: {
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#e4e9f1',
+        },
+      },
+    },
     MuiButton: {
       styleOverrides: {
         root: {