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

package/lib/layouts/ExpandPanelRenderer.d.ts

@@ -34,7 +34,7 @@ export interface DispatchPropsOfExpandPanel {
 }
 export interface ExpandPanelProps extends StatePropsOfExpandPanel, DispatchPropsOfExpandPanel {
 }
-export declare const ExpandPanelRenderer: React.MemoExoticComponent<(props: ExpandPanelProps) => JSX.Element>;
+export declare const ExpandPanelRenderer: React.MemoExoticComponent<(props: ExpandPanelProps) => React.JSX.Element>;
 /**
  * Maps state to dispatch properties of an expand pandel control.
  *

package/lib/layouts/MaterialArrayLayout.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ArrayLayoutProps } from '@jsonforms/core';
-export declare const MaterialArrayLayout: React.MemoExoticComponent<(props: ArrayLayoutProps) => JSX.Element>;
+export declare const MaterialArrayLayout: React.MemoExoticComponent<(props: ArrayLayoutProps) => React.JSX.Element>;

package/lib/layouts/MaterialArrayLayoutRenderer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ArrayLayoutProps, RankedTester } from '@jsonforms/core';
-export declare const MaterialArrayLayoutRenderer: ({ visible, addItem, ...props }: ArrayLayoutProps) => JSX.Element;
+export declare const MaterialArrayLayoutRenderer: ({ visible, addItem, ...props }: ArrayLayoutProps) => React.JSX.Element;
 export declare const materialArrayLayoutTester: RankedTester;
 declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
 export default _default;

package/lib/layouts/MaterialCategorizationLayout.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { RankedTester, StatePropsOfLayout, Tester } from '@jsonforms/core';
 import { TranslateProps } from '@jsonforms/react';
 import { AjvProps } from '../util/layout';
@@ -13,6 +13,6 @@ export interface MaterialCategorizationLayoutRendererProps extends StatePropsOfL
     data?: any;
     onChange?(selected: number, prevSelected: number): void;
 }
-export declare const MaterialCategorizationLayoutRenderer: (props: MaterialCategorizationLayoutRendererProps) => JSX.Element;
-declare const _default: (props: MaterialCategorizationLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => JSX.Element;
+export declare const MaterialCategorizationLayoutRenderer: (props: MaterialCategorizationLayoutRendererProps) => React.JSX.Element;
+declare const _default: (props: MaterialCategorizationLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => React.JSX.Element;
 export default _default;

package/lib/layouts/MaterialCategorizationStepperLayout.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { RankedTester, StatePropsOfLayout } from '@jsonforms/core';
 import { TranslateProps } from '@jsonforms/react';
 import { AjvProps } from '../util/layout';
@@ -9,6 +9,6 @@ export interface CategorizationStepperState {
 export interface MaterialCategorizationStepperLayoutRendererProps extends StatePropsOfLayout, AjvProps, TranslateProps {
     data: any;
 }
-export declare const MaterialCategorizationStepperLayoutRenderer: (props: MaterialCategorizationStepperLayoutRendererProps) => JSX.Element;
-declare const _default: (props: MaterialCategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => JSX.Element;
+export declare const MaterialCategorizationStepperLayoutRenderer: (props: MaterialCategorizationStepperLayoutRendererProps) => React.JSX.Element;
+declare const _default: (props: MaterialCategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => React.JSX.Element;
 export default _default;

package/lib/layouts/MaterialGroupLayout.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LayoutProps, RankedTester } from '@jsonforms/core';
 export declare const groupTester: RankedTester;
-export declare const MaterializedGroupLayoutRenderer: ({ uischema, schema, path, visible, enabled, renderers, cells, direction, label, }: LayoutProps) => JSX.Element;
+export declare const MaterializedGroupLayoutRenderer: ({ uischema, schema, path, visible, enabled, renderers, cells, direction, label, }: LayoutProps) => React.JSX.Element;
 declare const _default: React.ComponentType<LayoutProps & import("@jsonforms/core").OwnPropsOfLayout>;
 export default _default;
 export declare const materialGroupTester: RankedTester;

package/lib/layouts/MaterialHorizontalLayout.d.ts

@@ -5,6 +5,6 @@ import { LayoutProps, RankedTester } from '@jsonforms/core';
  * @type {RankedTester}
  */
 export declare const materialHorizontalLayoutTester: RankedTester;
-export declare const MaterialHorizontalLayoutRenderer: ({ uischema, renderers, cells, schema, path, enabled, visible, }: LayoutProps) => JSX.Element;
+export declare const MaterialHorizontalLayoutRenderer: ({ uischema, renderers, cells, schema, path, enabled, visible, }: LayoutProps) => React.JSX.Element;
 declare const _default: React.ComponentType<LayoutProps & import("@jsonforms/core").OwnPropsOfLayout>;
 export default _default;

package/lib/layouts/MaterialVerticalLayout.d.ts

@@ -5,6 +5,6 @@ import { LayoutProps, RankedTester } from '@jsonforms/core';
  * @type {RankedTester}
  */
 export declare const materialVerticalLayoutTester: RankedTester;
-export declare const MaterialVerticalLayoutRenderer: ({ uischema, schema, path, enabled, visible, renderers, cells, }: LayoutProps) => JSX.Element;
+export declare const MaterialVerticalLayoutRenderer: ({ uischema, schema, path, enabled, visible, renderers, cells, }: LayoutProps) => React.JSX.Element;
 declare const _default: React.ComponentType<LayoutProps & import("@jsonforms/core").OwnPropsOfLayout>;
 export default _default;

package/lib/layouts/unwrapped.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 export declare const UnwrappedLayouts: {
-    ExpandPanelRenderer: import("react").MemoExoticComponent<(props: import("./ExpandPanelRenderer").ExpandPanelProps) => JSX.Element>;
-    MaterialArrayLayout: ({ visible, addItem, ...props }: import("@jsonforms/core").ArrayLayoutProps) => JSX.Element;
-    MaterialCategorizationLayout: (props: import("./MaterialCategorizationLayout").MaterialCategorizationLayoutRendererProps) => JSX.Element;
-    MaterialGroupLayout: ({ uischema, schema, path, visible, enabled, renderers, cells, direction, label, }: import("@jsonforms/core").LayoutProps) => JSX.Element;
-    MaterialHorizontalLayout: ({ uischema, renderers, cells, schema, path, enabled, visible, }: import("@jsonforms/core").LayoutProps) => JSX.Element;
-    MaterialVerticalLayout: ({ uischema, schema, path, enabled, visible, renderers, cells, }: import("@jsonforms/core").LayoutProps) => JSX.Element;
+    ExpandPanelRenderer: import("react").MemoExoticComponent<(props: import("./ExpandPanelRenderer").ExpandPanelProps) => import("react").JSX.Element>;
+    MaterialArrayLayout: ({ visible, addItem, ...props }: import("@jsonforms/core").ArrayLayoutProps) => import("react").JSX.Element;
+    MaterialCategorizationLayout: (props: import("./MaterialCategorizationLayout").MaterialCategorizationLayoutRendererProps) => import("react").JSX.Element;
+    MaterialGroupLayout: ({ uischema, schema, path, visible, enabled, renderers, cells, direction, label, }: import("@jsonforms/core").LayoutProps) => import("react").JSX.Element;
+    MaterialHorizontalLayout: ({ uischema, renderers, cells, schema, path, enabled, visible, }: import("@jsonforms/core").LayoutProps) => import("react").JSX.Element;
+    MaterialVerticalLayout: ({ uischema, schema, path, enabled, visible, renderers, cells, }: import("@jsonforms/core").LayoutProps) => import("react").JSX.Element;
 };
 export * from './ArrayToolbar';

package/lib/mui-controls/MuiAutocomplete.d.ts

@@ -6,4 +6,4 @@ export interface WithOptionLabel {
     renderOption?(props: React.HTMLAttributes<HTMLLIElement>, option: EnumOption, state: AutocompleteRenderOptionState): ReactNode;
     filterOptions?(options: EnumOption[], state: FilterOptionsState<EnumOption>): EnumOption[];
 }
-export declare const MuiAutocomplete: (props: ControlProps & EnumCellProps & WithClassname & WithOptionLabel) => JSX.Element;
+export declare const MuiAutocomplete: (props: ControlProps & EnumCellProps & WithClassname & WithOptionLabel) => React.JSX.Element;

package/lib/mui-controls/MuiInputInteger.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-export declare const MuiInputInteger: React.NamedExoticComponent<CellProps & WithClassname>;
+import { WithInputProps } from '../util';
+export declare const MuiInputInteger: React.NamedExoticComponent<CellProps & WithClassname & WithInputProps>;

package/lib/mui-controls/MuiInputNumber.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-export declare const MuiInputNumber: React.NamedExoticComponent<CellProps & WithClassname>;
+import { WithInputProps } from '../util';
+export declare const MuiInputNumber: React.NamedExoticComponent<CellProps & WithClassname & WithInputProps>;

package/lib/mui-controls/MuiInputNumberFormat.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { CellProps, Formatted, WithClassname } from '@jsonforms/core';
-export declare const MuiInputNumberFormat: React.NamedExoticComponent<CellProps & WithClassname & Formatted<number>>;
+import { WithInputProps } from '../util';
+export declare const MuiInputNumberFormat: React.NamedExoticComponent<CellProps & WithClassname & Formatted<number> & WithInputProps>;

package/lib/mui-controls/MuiInputText.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
 import { InputProps } from '@mui/material';
+import { WithInputProps } from '../util';
 interface MuiTextInputProps {
     muiInputProps?: InputProps['inputProps'];
     inputComponent?: InputProps['inputComponent'];
 }
-export declare const MuiInputText: React.NamedExoticComponent<CellProps & WithClassname & MuiTextInputProps>;
+export declare const MuiInputText: React.NamedExoticComponent<CellProps & WithClassname & MuiTextInputProps & WithInputProps>;
 export {};

package/lib/mui-controls/MuiInputTime.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-export declare const MuiInputTime: React.NamedExoticComponent<CellProps & WithClassname>;
+import { WithInputProps } from '../util';
+export declare const MuiInputTime: React.NamedExoticComponent<CellProps & WithClassname & WithInputProps>;

package/lib/mui-controls/MuiSelect.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { EnumCellProps, WithClassname } from '@jsonforms/core';
 import { TranslateProps } from '@jsonforms/react';
-export declare const MuiSelect: React.NamedExoticComponent<EnumCellProps & WithClassname & TranslateProps>;
+import { WithInputProps } from '../util';
+export declare const MuiSelect: React.NamedExoticComponent<EnumCellProps & WithClassname & TranslateProps & WithInputProps>;

package/lib/util/layout.d.ts

@@ -2,16 +2,16 @@ import React, { ComponentType } from 'react';
 import Ajv from 'ajv';
 import type { UISchemaElement } from '@jsonforms/core';
 import { JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry, JsonSchema, OwnPropsOfRenderer } from '@jsonforms/core';
-export declare const renderLayoutElements: (elements: UISchemaElement[], schema: JsonSchema, path: string, enabled: boolean, renderers?: JsonFormsRendererRegistryEntry[], cells?: JsonFormsCellRendererRegistryEntry[]) => JSX.Element[];
+export declare const renderLayoutElements: (elements: UISchemaElement[], schema: JsonSchema, path: string, enabled: boolean, renderers?: JsonFormsRendererRegistryEntry[], cells?: JsonFormsCellRendererRegistryEntry[]) => React.JSX.Element[];
 export interface MaterialLayoutRendererProps extends OwnPropsOfRenderer {
     elements: UISchemaElement[];
     direction: 'row' | 'column';
 }
-export declare const MaterialLayoutRenderer: React.MemoExoticComponent<({ visible, elements, schema, path, enabled, direction, renderers, cells, }: MaterialLayoutRendererProps) => JSX.Element>;
+export declare const MaterialLayoutRenderer: React.MemoExoticComponent<({ visible, elements, schema, path, enabled, direction, renderers, cells, }: MaterialLayoutRendererProps) => React.JSX.Element>;
 export interface AjvProps {
     ajv: Ajv;
 }
-export declare const withAjvProps: <P extends {}>(Component: React.ComponentType<AjvProps & P>) => (props: P) => JSX.Element;
+export declare const withAjvProps: <P extends {}>(Component: React.ComponentType<AjvProps & P>) => (props: P) => React.JSX.Element;
 export interface MaterialLabelableLayoutRendererProps extends MaterialLayoutRendererProps {
     label?: string;
 }

package/lib/util/theme.d.ts

@@ -1,4 +1,5 @@
-import { Theme } from '@mui/material';
+/// <reference types="react" />
+import { Theme, TextFieldProps, InputBaseProps } from '@mui/material';
 export interface JsonFormsTheme extends Theme {
     jsonforms?: {
         input?: {
@@ -8,3 +9,9 @@ export interface JsonFormsTheme extends Theme {
         };
     };
 }
+export interface WithInputProps {
+    label?: string;
+}
+export declare const defaultInputVariant: TextFieldProps['variant'];
+export declare function useInputVariant(): TextFieldProps['variant'];
+export declare function useInputComponent(): React.JSXElementConstructor<InputBaseProps & WithInputProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.1.0",
+  "version": "3.2.0-alpha.0",
   "description": "Material Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -45,7 +45,8 @@
     "test": "jest --no-cache",
     "test-cov": "jest --no-cache --coverage",
     "report": "nyc report --reporter=html",
-    "doc": "typedoc --name 'JSON Forms React Material Renderers' --mode file --excludeExternals --theme ../../typedoc-jsonforms --out docs src"
+    "doc": "typedoc --name 'JSON Forms React Material Renderers' --excludeExternals --theme ../../typedoc-jsonforms --out docs src",
+    "tsc": "tsc --build tsconfig.json"
   },
   "jest": {
     "moduleFileExtensions": [
@@ -56,6 +57,7 @@
     "transform": {
       "^.+\\.(ts|tsx)$": "ts-jest"
     },
+    "testEnvironment": "jsdom",
     "testMatch": [
       "**/test/**/*.test.tsx"
     ],
@@ -77,22 +79,24 @@
   },
   "dependencies": {
     "@date-io/dayjs": "1.3.13",
-    "dayjs": "1.10.6"
+    "dayjs": "1.10.6",
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.1.0",
-    "@jsonforms/react": "3.1.0",
-    "@mui/icons-material": "~5.11.16",
+    "@jsonforms/core": "3.1.1-alpha.1",
+    "@jsonforms/react": "3.1.1-alpha.1",
+    "@mui/icons-material": "^5.11.16",
     "@mui/material": "~5.13.0",
-    "@mui/x-date-pickers": "^6.0.0"
+    "@mui/x-date-pickers": "^6.0.0",
+    "react": "^16.12.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "^3.1.0",
-    "@jsonforms/react": "^3.1.0",
+    "@jsonforms/core": "3.2.0-alpha.0",
+    "@jsonforms/react": "3.2.0-alpha.0",
     "@mui/icons-material": "~5.11.16",
     "@mui/material": "~5.13.0",
     "@mui/x-date-pickers": "^6.5.0",
@@ -101,36 +105,41 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
     "@types/enzyme": "^3.10.3",
+    "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "copy-webpack-plugin": "^5.0.5",
-    "enzyme": "^3.10.0",
+    "enzyme": "^3.11.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
-    "jest": "^26.6.3",
+    "jest": "^27.5.1",
+    "jsdom": "^22.0.0",
+    "jsdom-global": "^3.0.2",
     "nyc": "^15.1.0",
     "prettier": "^2.8.4",
+    "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.78.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-import-css": "^3.1.0",
-    "rollup-plugin-typescript2": "^0.31.1",
+    "rollup-plugin-import-css": "^3.3.1",
+    "rollup-plugin-typescript2": "^0.34.1",
     "rollup-plugin-visualizer": "^5.4.1",
     "source-map-loader": "^0.2.4",
-    "ts-jest": "^26.4.4",
+    "ts-jest": "^27.1.4",
     "ts-loader": "^6.2.1",
-    "typedoc": "^0.19.2",
+    "tslib": "^2.5.0",
+    "typedoc": "~0.21.9",
     "typescript": "4.2.3",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.9.0"
   },
-  "gitHead": "7e0115feeced7711b0768d325566aaa6b054c32b"
+  "gitHead": "9146b0fdf5913d2251fadd5435d2c7e813db6f71"
 }

package/src/cells/MaterialDateCell.tsx

@@ -31,22 +31,37 @@ import {
   WithClassname,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
-import Input from '@mui/material/Input';
 import merge from 'lodash/merge';
+import { useInputComponent, WithInputProps } from '../util';
 
-export const MaterialDateCell = (props: CellProps & WithClassname) => {
-  const { data, className, id, enabled, uischema, path, handleChange, config } =
-    props;
+export const MaterialDateCell = (
+  props: CellProps & WithClassname & WithInputProps
+) => {
+  const {
+    data,
+    className,
+    id,
+    enabled,
+    uischema,
+    path,
+    handleChange,
+    config,
+    label,
+  } = props;
 
+  const InputComponent = useInputComponent();
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
   return (
-    <Input
+    <InputComponent
       type='date'
       value={data || ''}
-      onChange={(ev) => handleChange(path, ev.target.value)}
+      onChange={(ev: React.ChangeEvent<HTMLInputElement>) =>
+        handleChange(path, ev.target.value)
+      }
       className={className}
       id={id}
+      label={label}
       disabled={!enabled}
       autoFocus={appliedUiSchemaOptions.focus}
       fullWidth={true}

package/src/complex/MaterialAnyOfRenderer.tsx

@@ -25,18 +25,22 @@
 import React, { useCallback, useState } from 'react';
 
 import {
+  CombinatorRendererProps,
   createCombinatorRenderInfos,
+  createDefaultValue,
   isAnyOfControl,
   JsonSchema,
   RankedTester,
   rankWith,
-  StatePropsOfCombinator,
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
 import { Hidden, Tab, Tabs } from '@mui/material';
 import CombinatorProperties from './CombinatorProperties';
+import isEmpty from 'lodash/isEmpty';
+import { TabSwitchConfirmDialog } from './TabSwitchConfirmDialog';
 
 export const MaterialAnyOfRenderer = ({
+  handleChange,
   schema,
   rootSchema,
   indexOfFittingSchema,
@@ -46,12 +50,44 @@ export const MaterialAnyOfRenderer = ({
   cells,
   uischema,
   uischemas,
-}: StatePropsOfCombinator) => {
+  id,
+  data,
+}: CombinatorRendererProps) => {
   const [selectedAnyOf, setSelectedAnyOf] = useState(indexOfFittingSchema || 0);
-  const handleChange = useCallback(
-    (_ev: any, value: number) => setSelectedAnyOf(value),
-    [setSelectedAnyOf]
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+  const [newSelectedIndex, setNewSelectedIndex] = useState(0);
+
+  const handleClose = useCallback(
+    () => setConfirmDialogOpen(false),
+    [setConfirmDialogOpen]
+  );
+
+  const handleTabChange = useCallback(
+    (_event: any, newIndex: number) => {
+      if (
+        isEmpty(data) ||
+        typeof data ===
+          typeof createDefaultValue(anyOfRenderInfos[newIndex].schema)
+      ) {
+        setSelectedAnyOf(newIndex);
+      } else {
+        setNewSelectedIndex(newIndex);
+        setConfirmDialogOpen(true);
+      }
+    },
+    [setConfirmDialogOpen, setSelectedAnyOf, data]
   );
+
+  const openNewTab = (newIndex: number) => {
+    handleChange(path, createDefaultValue(anyOfRenderInfos[newIndex].schema));
+    setSelectedAnyOf(newIndex);
+  };
+
+  const confirm = useCallback(() => {
+    openNewTab(newSelectedIndex);
+    setConfirmDialogOpen(false);
+  }, [handleChange, createDefaultValue, newSelectedIndex]);
+
   const anyOf = 'anyOf';
   const anyOfRenderInfos = createCombinatorRenderInfos(
     (schema as JsonSchema).anyOf,
@@ -69,7 +105,7 @@ export const MaterialAnyOfRenderer = ({
         combinatorKeyword={anyOf}
         path={path}
       />
-      <Tabs value={selectedAnyOf} onChange={handleChange}>
+      <Tabs value={selectedAnyOf} onChange={handleTabChange}>
         {anyOfRenderInfos.map((anyOfRenderInfo) => (
           <Tab key={anyOfRenderInfo.label} label={anyOfRenderInfo.label} />
         ))}
@@ -87,6 +123,13 @@ export const MaterialAnyOfRenderer = ({
             />
           )
       )}
+      <TabSwitchConfirmDialog
+        cancel={handleClose}
+        confirm={confirm}
+        id={'anyOf-' + id}
+        open={confirmDialogOpen}
+        handleClose={handleClose}
+      />
     </Hidden>
   );
 };

package/src/complex/MaterialOneOfRenderer.tsx

@@ -25,6 +25,8 @@
 import React, { useCallback, useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 
+import { TabSwitchConfirmDialog } from './TabSwitchConfirmDialog';
+
 import {
   CombinatorRendererProps,
   createCombinatorRenderInfos,
@@ -35,17 +37,7 @@ import {
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Hidden,
-  Tab,
-  Tabs,
-} from '@mui/material';
+import { Hidden, Tab, Tabs } from '@mui/material';
 import { JsonFormsDispatch, withJsonFormsOneOfProps } from '@jsonforms/react';
 import CombinatorProperties from './CombinatorProperties';
 
@@ -67,13 +59,16 @@ export const MaterialOneOfRenderer = ({
   uischemas,
   data,
 }: CombinatorRendererProps) => {
-  const [open, setOpen] = useState(false);
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(indexOfFittingSchema || 0);
   const [newSelectedIndex, setNewSelectedIndex] = useState(0);
-  const handleClose = useCallback(() => setOpen(false), [setOpen]);
+  const handleClose = useCallback(
+    () => setConfirmDialogOpen(false),
+    [setConfirmDialogOpen]
+  );
   const cancel = useCallback(() => {
-    setOpen(false);
-  }, [setOpen]);
+    setConfirmDialogOpen(false);
+  }, [setConfirmDialogOpen]);
   const oneOfRenderInfos = createCombinatorRenderInfos(
     (schema as JsonSchema).oneOf,
     rootSchema,
@@ -90,18 +85,19 @@ export const MaterialOneOfRenderer = ({
 
   const confirm = useCallback(() => {
     openNewTab(newSelectedIndex);
-    setOpen(false);
+    setConfirmDialogOpen(false);
   }, [handleChange, createDefaultValue, newSelectedIndex]);
+
   const handleTabChange = useCallback(
     (_event: any, newOneOfIndex: number) => {
       setNewSelectedIndex(newOneOfIndex);
       if (isEmpty(data)) {
         openNewTab(newOneOfIndex);
       } else {
-        setOpen(true);
+        setConfirmDialogOpen(true);
       }
     },
-    [setOpen, setSelectedIndex, data]
+    [setConfirmDialogOpen, setSelectedIndex, data]
   );
 
   return (
@@ -129,33 +125,13 @@ export const MaterialOneOfRenderer = ({
             />
           )
       )}
-      <Dialog
-        open={open}
-        onClose={handleClose}
-        aria-labelledby='alert-dialog-title'
-        aria-describedby='alert-dialog-description'
-      >
-        <DialogTitle id='alert-dialog-title'>{'Clear form?'}</DialogTitle>
-        <DialogContent>
-          <DialogContentText id='alert-dialog-description'>
-            Your data will be cleared if you navigate away from this tab. Do you
-            want to proceed?
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={cancel} color='primary'>
-            No
-          </Button>
-          <Button
-            onClick={confirm}
-            color='primary'
-            autoFocus
-            id={`oneOf-${id}-confirm-yes`}
-          >
-            Yes
-          </Button>
-        </DialogActions>
-      </Dialog>
+      <TabSwitchConfirmDialog
+        cancel={cancel}
+        confirm={confirm}
+        id={'oneOf-' + id}
+        open={confirmDialogOpen}
+        handleClose={handleClose}
+      />
     </Hidden>
   );
 };

package/src/complex/TabSwitchConfirmDialog.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from '@mui/material';
+
+export interface TabSwitchConfirmDialogProps {
+  open: boolean;
+  handleClose: () => void;
+  confirm: () => void;
+  cancel: () => void;
+  id: string;
+}
+
+export const TabSwitchConfirmDialog = ({
+  open,
+  handleClose,
+  confirm,
+  cancel,
+  id,
+}: TabSwitchConfirmDialogProps) => {
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      aria-labelledby='alert-dialog-title'
+      aria-describedby='alert-dialog-description'
+    >
+      <DialogTitle id='alert-dialog-title'>{'Clear form?'}</DialogTitle>
+      <DialogContent>
+        <DialogContentText id='alert-dialog-description'>
+          Your data will be cleared if you navigate away from this tab. Do you
+          want to proceed?
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={cancel} color='primary'>
+          No
+        </Button>
+        <Button
+          onClick={confirm}
+          color='primary'
+          autoFocus
+          id={`${id}-confirm-yes`}
+        >
+          Yes
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};