@jsonforms/material-renderers 3.1.0-alpha.0 → 3.1.0-alpha.2

package/src/mui-controls/MuiAutocomplete.tsx

@@ -23,7 +23,13 @@
   THE SOFTWARE.
 */
 import React, { ReactNode } from 'react';
-import { ControlProps, EnumCellProps, EnumOption, isDescriptionHidden, WithClassname } from '@jsonforms/core';
+import {
+  ControlProps,
+  EnumCellProps,
+  EnumOption,
+  isDescriptionHidden,
+  WithClassname,
+} from '@jsonforms/core';
 
 import {
   Autocomplete,
@@ -31,18 +37,27 @@ import {
   FilterOptionsState,
   FormHelperText,
   Hidden,
-  TextField
+  TextField,
 } from '@mui/material';
 import merge from 'lodash/merge';
 import { useFocus } from '../util/focus';
 
 export interface WithOptionLabel {
-  getOptionLabel?(option: EnumOption) : string;
-  renderOption?(props: React.HTMLAttributes<HTMLLIElement>, option: EnumOption, state: AutocompleteRenderOptionState): ReactNode;
-  filterOptions?(options: EnumOption[], state: FilterOptionsState<EnumOption>) : EnumOption[];
+  getOptionLabel?(option: EnumOption): string;
+  renderOption?(
+    props: React.HTMLAttributes<HTMLLIElement>,
+    option: EnumOption,
+    state: AutocompleteRenderOptionState
+  ): ReactNode;
+  filterOptions?(
+    options: EnumOption[],
+    state: FilterOptionsState<EnumOption>
+  ): EnumOption[];
 }
 
-export const MuiAutocomplete = (props: ControlProps & EnumCellProps & WithClassname & WithOptionLabel) => {
+export const MuiAutocomplete = (
+  props: ControlProps & EnumCellProps & WithClassname & WithOptionLabel
+) => {
   const {
     description,
     errors,
@@ -61,21 +76,21 @@ export const MuiAutocomplete = (props: ControlProps & EnumCellProps & WithClassn
     getOptionLabel,
     renderOption,
     filterOptions,
-    isValid
+    isValid,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const [inputValue, setInputValue] = React.useState(data ?? '');
   const [focused, onFocus, onBlur] = useFocus();
 
-  const findOption = options.find(o => o.value === data) ?? null;
-  
+  const findOption = options.find((o) => o.value === data) ?? null;
+
   const showDescription = !isDescriptionHidden(
     visible,
     description,
     focused,
     appliedUiSchemaOptions.showUnfocusedDescription
   );
-  
+
   const firstFormHelperText = showDescription
     ? description
     : !isValid
@@ -102,38 +117,39 @@ export const MuiAutocomplete = (props: ControlProps & EnumCellProps & WithClassn
         autoComplete
         fullWidth
         options={options}
-        getOptionLabel={getOptionLabel || (option => option?.label)}
+        getOptionLabel={getOptionLabel || ((option) => option?.label)}
         freeSolo={false}
-        renderInput={params => { 
-          return(
-          <TextField
-            label={label} 
-            variant={'standard'}
-            type='text'
-            inputProps={params.inputProps}
-            inputRef={params.InputProps.ref}
-            autoFocus={appliedUiSchemaOptions.focus}
-            disabled={!enabled}
-            {...params}
-            id={id + '-input'}
-            required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
-            error={!isValid}
-            fullWidth={!appliedUiSchemaOptions.trim}
-            InputLabelProps={data ? { shrink: true } : undefined}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            focused={focused}
-          />
-        )}}
+        renderInput={(params) => {
+          return (
+            <TextField
+              label={label}
+              variant={'standard'}
+              type='text'
+              inputProps={params.inputProps}
+              inputRef={params.InputProps.ref}
+              autoFocus={appliedUiSchemaOptions.focus}
+              disabled={!enabled}
+              {...params}
+              id={id + '-input'}
+              required={
+                required && !appliedUiSchemaOptions.hideRequiredAsterisk
+              }
+              error={!isValid}
+              fullWidth={!appliedUiSchemaOptions.trim}
+              InputLabelProps={data ? { shrink: true } : undefined}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              focused={focused}
+            />
+          );
+        }}
         renderOption={renderOption}
         filterOptions={filterOptions}
       />
       <FormHelperText error={!isValid && !showDescription}>
         {firstFormHelperText}
       </FormHelperText>
-      <FormHelperText error={!isValid}>
-        {secondFormHelperText}
-      </FormHelperText>
+      <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
     </Hidden>
   );
 };

package/src/mui-controls/MuiCheckbox.tsx

@@ -24,10 +24,16 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import { Checkbox } from '@mui/material';
+import { Checkbox, InputProps } from '@mui/material';
 import merge from 'lodash/merge';
 
-export const MuiCheckbox = React.memo((props: CellProps & WithClassname) => {
+interface MuiCheckboxInputProps {
+  inputProps?: InputProps['inputProps'];
+}
+
+export const MuiCheckbox = React.memo(function MuiCheckbox(
+  props: CellProps & WithClassname & MuiCheckboxInputProps
+) {
   const {
     data,
     className,
@@ -36,10 +42,13 @@ export const MuiCheckbox = React.memo((props: CellProps & WithClassname) => {
     uischema,
     path,
     handleChange,
-    config
+    config,
+    inputProps,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const inputProps = { autoFocus: !!appliedUiSchemaOptions.focus };
+  const inputPropsMerged = merge({}, inputProps, {
+    autoFocus: !!appliedUiSchemaOptions.focus,
+  });
   // !! causes undefined value to be converted to false, otherwise has no effect
   const checked = !!data;
 
@@ -50,7 +59,7 @@ export const MuiCheckbox = React.memo((props: CellProps & WithClassname) => {
       className={className}
       id={id}
       disabled={!enabled}
-      inputProps={inputProps}
+      inputProps={inputPropsMerged}
     />
   );
 });

package/src/mui-controls/MuiInputInteger.tsx

@@ -29,38 +29,37 @@ import merge from 'lodash/merge';
 import { useDebouncedChange } from '../util';
 
 const toNumber = (value: string) =>
-      value === '' ? undefined : parseInt(value, 10);
-const eventToValue = (ev:any) => toNumber(ev.target.value);
+  value === '' ? undefined : parseInt(value, 10);
+const eventToValue = (ev: any) => toNumber(ev.target.value);
 
-export const MuiInputInteger = React.memo( 
-  (props: CellProps & WithClassname) => {
-    const {
-      data,
-      className,
-      id,
-      enabled,
-      uischema,
-      path,
-      handleChange,
-      config
-    } = props;
-    const inputProps = { step: '1' };
-    
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+export const MuiInputInteger = React.memo(function MuiInputInteger(
+  props: CellProps & WithClassname
+) {
+  const { data, className, id, enabled, uischema, path, handleChange, config } =
+    props;
+  const inputProps = { step: '1' };
 
-    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue);
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
-    return (
-      <Input
-        type='number'
-        value={inputValue}
-        onChange={onChange}
-        className={className}
-        id={id}
-        disabled={!enabled}
-        autoFocus={appliedUiSchemaOptions.focus}
-        inputProps={inputProps}
-        fullWidth={true}
-      />
-    );
-  });
+  const [inputValue, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path,
+    eventToValue
+  );
+
+  return (
+    <Input
+      type='number'
+      value={inputValue}
+      onChange={onChange}
+      className={className}
+      id={id}
+      disabled={!enabled}
+      autoFocus={appliedUiSchemaOptions.focus}
+      inputProps={inputProps}
+      fullWidth={true}
+    />
+  );
+});

package/src/mui-controls/MuiInputNumber.tsx

@@ -26,26 +26,26 @@ import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
 import { Input } from '@mui/material';
 import merge from 'lodash/merge';
-import {useDebouncedChange} from '../util';
+import { useDebouncedChange } from '../util';
 
 const toNumber = (value: string) =>
-    value === '' ? undefined : parseFloat(value);
-const eventToValue = (ev:any) => toNumber(ev.target.value);
-export const MuiInputNumber = React.memo((props: CellProps & WithClassname) => {
-  const {
-    data,
-    className,
-    id,
-    enabled,
-    uischema,
-    path,
-    handleChange,
-    config
-  } = props;
+  value === '' ? undefined : parseFloat(value);
+const eventToValue = (ev: any) => toNumber(ev.target.value);
+export const MuiInputNumber = React.memo(function MuiInputNumber(
+  props: CellProps & WithClassname
+) {
+  const { data, className, id, enabled, uischema, path, handleChange, config } =
+    props;
   const inputProps = { step: '0.1' };
-  
+
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue);
+  const [inputValue, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path,
+    eventToValue
+  );
 
   return (
     <Input

package/src/mui-controls/MuiInputNumberFormat.tsx

@@ -22,52 +22,61 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, {useCallback} from 'react';
+import React, { useCallback } from 'react';
 import { CellProps, Formatted, WithClassname } from '@jsonforms/core';
 import { Input } from '@mui/material';
 import merge from 'lodash/merge';
 import { useDebouncedChange } from '../util';
 
-export const MuiInputNumberFormat = React.memo( 
-  (props: CellProps & WithClassname & Formatted<number>) => {
-    const {
-      className,
-      id,
-      enabled,
-      uischema,
-      isValid,
-      path,
-      handleChange,
-      schema,
-      config
-    } = props;
-    const maxLength = schema.maxLength;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    let inputProps;
-    if (appliedUiSchemaOptions.restrict) {
-      inputProps = { maxLength: maxLength };
-    } else {
-      inputProps = {};
-    }
-    const formattedNumber = props.toFormatted(props.data);
+export const MuiInputNumberFormat = React.memo(function MuiInputNumberFormat(
+  props: CellProps & WithClassname & Formatted<number>
+) {
+  const {
+    className,
+    id,
+    enabled,
+    uischema,
+    isValid,
+    path,
+    handleChange,
+    schema,
+    config,
+  } = props;
+  const maxLength = schema.maxLength;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  let inputProps;
+  if (appliedUiSchemaOptions.restrict) {
+    inputProps = { maxLength: maxLength };
+  } else {
+    inputProps = {};
+  }
+  const formattedNumber = props.toFormatted(props.data);
 
-    const validStringNumber = useCallback((ev:any) => props.fromFormatted(ev.currentTarget.value),[props.fromFormatted]);
-    const [inputValue, onChange] = useDebouncedChange(handleChange, '', formattedNumber, path, validStringNumber);
+  const validStringNumber = useCallback(
+    (ev: any) => props.fromFormatted(ev.currentTarget.value),
+    [props.fromFormatted]
+  );
+  const [inputValue, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    formattedNumber,
+    path,
+    validStringNumber
+  );
 
-
-    return (
-      <Input
-        type='text'
-        value={inputValue}
-        onChange={onChange}
-        className={className}
-        id={id}
-        disabled={!enabled}
-        autoFocus={appliedUiSchemaOptions.focus}
-        multiline={appliedUiSchemaOptions.multi}
-        fullWidth={!appliedUiSchemaOptions.trim || maxLength === undefined}
-        inputProps={inputProps}
-        error={!isValid}
-      />
-    );
-  });
+  return (
+    <Input
+      type='text'
+      value={inputValue}
+      onChange={onChange}
+      className={className}
+      id={id}
+      disabled={!enabled}
+      autoFocus={appliedUiSchemaOptions.focus}
+      multiline={appliedUiSchemaOptions.multi}
+      fullWidth={!appliedUiSchemaOptions.trim || maxLength === undefined}
+      inputProps={inputProps}
+      error={!isValid}
+    />
+  );
+});

package/src/mui-controls/MuiInputText.tsx

@@ -30,7 +30,7 @@ import {
   InputAdornment,
   InputBaseComponentProps,
   InputProps,
-  useTheme
+  useTheme,
 } from '@mui/material';
 import merge from 'lodash/merge';
 import Close from '@mui/icons-material/Close';
@@ -41,9 +41,12 @@ interface MuiTextInputProps {
   inputComponent?: InputProps['inputComponent'];
 }
 
-const eventToValue = (ev:any) => ev.target.value === '' ? undefined : ev.target.value;
+const eventToValue = (ev: any) =>
+  ev.target.value === '' ? undefined : ev.target.value;
 
-export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTextInputProps) => { 
+export const MuiInputText = React.memo(function MuiInputText(
+  props: CellProps & WithClassname & MuiTextInputProps
+) {
   const [showAdornment, setShowAdornment] = useState(false);
   const {
     data,
@@ -57,7 +60,7 @@ export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTe
     handleChange,
     schema,
     muiInputProps,
-    inputComponent
+    inputComponent,
   } = props;
   const maxLength = schema.maxLength;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -67,29 +70,35 @@ export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTe
   } else {
     inputProps = {};
   }
-  
+
   inputProps = merge(inputProps, muiInputProps);
-  
+
   if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
     inputProps.size = maxLength;
-  };
-  
-  const [inputText, onChange, onClear] = useDebouncedChange(handleChange, '', data, path, eventToValue);
+  }
+
+  const [inputText, onChange, onClear] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path,
+    eventToValue
+  );
   const onPointerEnter = () => setShowAdornment(true);
   const onPointerLeave = () => setShowAdornment(false);
 
   const theme: JsonFormsTheme = useTheme();
-  
+
   const closeStyle = {
-    background: theme.jsonforms?.input?.delete?.background || theme.palette.background.default,
-    borderRadius: '50%'
+    background:
+      theme.jsonforms?.input?.delete?.background ||
+      theme.palette.background.default,
+    borderRadius: '50%',
   };
 
   return (
     <Input
-      type={
-        appliedUiSchemaOptions.format === 'password' ? 'password' : 'text'
-      }
+      type={appliedUiSchemaOptions.format === 'password' ? 'password' : 'text'}
       value={inputText}
       onChange={onChange}
       className={className}
@@ -107,17 +116,19 @@ export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTe
           position='end'
           style={{
             display:
-              !showAdornment || !enabled || data === undefined ? 'none' : 'flex',
+              !showAdornment || !enabled || data === undefined
+                ? 'none'
+                : 'flex',
             position: 'absolute',
-            right: 0
+            right: 0,
           }}
         >
           <IconButton
             aria-label='Clear input field'
-            onClick={onClear}   
+            onClick={onClear}
             size='large'
           >
-            <Close style={closeStyle}/>
+            <Close style={closeStyle} />
           </IconButton>
         </InputAdornment>
       }

package/src/mui-controls/MuiInputTime.tsx

@@ -28,19 +28,18 @@ import { Input } from '@mui/material';
 import merge from 'lodash/merge';
 import { useDebouncedChange } from '../util';
 
-export const MuiInputTime = React.memo((props: CellProps & WithClassname) => {
-  const {
-    data,
-    className,
-    id,
-    enabled,
-    uischema,
-    path,
-    handleChange,
-    config
-  } = props;
+export const MuiInputTime = React.memo(function MuiInputTime(
+  props: CellProps & WithClassname
+) {
+  const { data, className, id, enabled, uischema, path, handleChange, config } =
+    props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path);
+  const [inputValue, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path
+  );
 
   return (
     <Input

package/src/mui-controls/MuiSelect.tsx

@@ -30,7 +30,9 @@ import merge from 'lodash/merge';
 import { TranslateProps } from '@jsonforms/react';
 import { i18nDefaults } from '../util';
 
-export const MuiSelect = React.memo((props: EnumCellProps & WithClassname & TranslateProps) => {
+export const MuiSelect = React.memo(function MuiSelect(
+  props: EnumCellProps & WithClassname & TranslateProps
+) {
   const {
     data,
     className,
@@ -42,10 +44,13 @@ export const MuiSelect = React.memo((props: EnumCellProps & WithClassname & Tran
     handleChange,
     options,
     config,
-    t
+    t,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const noneOptionLabel = useMemo(() => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path}), [t, schema, uischema, path]);
+  const noneOptionLabel = useMemo(
+    () => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }),
+    [t, schema, uischema, path]
+  );
 
   return (
     <Select
@@ -54,12 +59,16 @@ export const MuiSelect = React.memo((props: EnumCellProps & WithClassname & Tran
       disabled={!enabled}
       autoFocus={appliedUiSchemaOptions.focus}
       value={data !== undefined ? data : ''}
-      onChange={ev =>handleChange(path, ev.target.value || undefined)}
+      onChange={(ev) => handleChange(path, ev.target.value || undefined)}
       fullWidth={true}
       variant={'standard'}
     >
-      {[<MenuItem value={''} key='jsonforms.enum.none'><em>{noneOptionLabel}</em></MenuItem>].concat(
-        options.map(optionValue => (
+      {[
+        <MenuItem value={''} key='jsonforms.enum.none'>
+          <em>{noneOptionLabel}</em>
+        </MenuItem>,
+      ].concat(
+        options.map((optionValue) => (
           <MenuItem value={optionValue.value} key={optionValue.value}>
             {optionValue.label}
           </MenuItem>

package/src/mui-controls/MuiToggle.tsx

@@ -24,10 +24,16 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import { Switch } from '@mui/material';
+import { Switch, InputProps } from '@mui/material';
 import merge from 'lodash/merge';
 
-export const MuiToggle = React.memo((props: CellProps & WithClassname) => {
+interface MuiToggleInputProps {
+  inputProps?: InputProps['inputProps'];
+}
+
+export const MuiToggle = React.memo(function MuiToggle(
+  props: CellProps & WithClassname & MuiToggleInputProps
+) {
   const {
     data,
     className,
@@ -36,10 +42,13 @@ export const MuiToggle = React.memo((props: CellProps & WithClassname) => {
     uischema,
     path,
     handleChange,
-    config
+    config,
+    inputProps,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const inputProps = { autoFocus: !!appliedUiSchemaOptions.focus };
+  const inputPropsMerged = merge({}, inputProps, {
+    autoFocus: !!appliedUiSchemaOptions.focus,
+  });
   const checked = !!data;
 
   return (
@@ -49,7 +58,7 @@ export const MuiToggle = React.memo((props: CellProps & WithClassname) => {
       className={className}
       id={id}
       disabled={!enabled}
-      inputProps={inputProps}
+      inputProps={inputPropsMerged}
     />
   );
 });

package/src/mui-controls/index.ts

@@ -22,10 +22,12 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
+export * from './MuiAutocomplete';
 export * from './MuiCheckbox';
-export * from './MuiSelect';
 export * from './MuiInputInteger';
 export * from './MuiInputNumber';
 export * from './MuiInputNumberFormat';
 export * from './MuiInputText';
 export * from './MuiInputTime';
+export * from './MuiSelect';
+export * from './MuiToggle';