@jsonforms/material-renderers 3.4.0-alpha.3 → 3.4.0-beta.0

package/lib/layouts/MaterialArrayLayout.d.ts

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

package/lib/layouts/MaterialArrayLayoutRenderer.d.ts

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

package/lib/layouts/unwrapped.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 export declare const UnwrappedLayouts: {
     ExpandPanelRenderer: import("react").MemoExoticComponent<(props: import("./ExpandPanelRenderer").ExpandPanelProps) => import("react").JSX.Element>;
-    MaterialArrayLayout: ({ visible, addItem, ...props }: import("@jsonforms/core").ArrayLayoutProps) => import("react").JSX.Element;
+    MaterialArrayLayout: ({ visible, addItem, translations, ...props }: import("@jsonforms/core").ArrayLayoutProps & {
+        translations: import("@jsonforms/core").ArrayTranslations;
+    }) => 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.4.0-alpha.3",
+  "version": "3.4.0-beta.0",
   "description": "Material Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -73,10 +73,10 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.4.0-alpha.3",
-    "@jsonforms/react": "3.4.0-alpha.3",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.0",
+    "@jsonforms/core": "3.4.0-beta.0",
+    "@jsonforms/react": "3.4.0-beta.0",
+    "@mui/icons-material": "^5.11.16 || ^6.0.0",
+    "@mui/material": "^5.13.0 || ^6.0.0",
     "@mui/x-date-pickers": "^6.0.0 || ^7.0.0",
     "react": "^16.12.0 || ^17.0.0 || ^18.0.0"
   },
@@ -126,8 +126,8 @@
     "webpack": "^5.78.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
-    "@jsonforms/core": "3.4.0-alpha.3",
-    "@jsonforms/react": "3.4.0-alpha.3"
+    "@jsonforms/core": "3.4.0-beta.0",
+    "@jsonforms/react": "3.4.0-beta.0"
   },
   "scripts": {
     "build": "rollup -c rollup.config.js",

package/src/additional/MaterialListWithDetailRenderer.tsx

@@ -25,6 +25,7 @@
 import {
   and,
   ArrayLayoutProps,
+  ArrayTranslations,
   composePaths,
   computeLabel,
   createDefaultValue,
@@ -36,7 +37,9 @@ import {
 } from '@jsonforms/core';
 import {
   JsonFormsDispatch,
+  withArrayTranslationProps,
   withJsonFormsArrayLayoutProps,
+  withTranslateProps,
 } from '@jsonforms/react';
 import { Grid, List, Typography } from '@mui/material';
 import map from 'lodash/map';
@@ -63,11 +66,11 @@ export const MaterialListWithDetailRenderer = ({
   cells,
   config,
   rootSchema,
-  translations,
   description,
   disableAdd,
   disableRemove,
-}: ArrayLayoutProps) => {
+  translations,
+}: ArrayLayoutProps & { translations: ArrayTranslations }) => {
   const [selectedIndex, setSelectedIndex] = useState(undefined);
   const handleRemoveItem = useCallback(
     (p: string, value: any) => () => {
@@ -101,6 +104,7 @@ export const MaterialListWithDetailRenderer = ({
       ),
     [uischemas, schema, uischema.scope, path, uischema, rootSchema]
   );
+
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;
   const doDisableRemove = disableRemove || appliedUiSchemaOptions.disableRemove;
@@ -179,4 +183,6 @@ export const materialListWithDetailTester: RankedTester = rankWith(
   and(uiTypeIs('ListWithDetail'), isObjectArray)
 );
 
-export default withJsonFormsArrayLayoutProps(MaterialListWithDetailRenderer);
+export default withJsonFormsArrayLayoutProps(
+  withTranslateProps(withArrayTranslationProps(MaterialListWithDetailRenderer))
+);

package/src/complex/MaterialArrayControlRenderer.tsx

@@ -25,21 +25,28 @@
 import React, { useCallback, useState } from 'react';
 import {
   ArrayLayoutProps,
+  ArrayTranslations,
   RankedTester,
   isObjectArrayControl,
   isPrimitiveArrayControl,
   or,
   rankWith,
 } from '@jsonforms/core';
-import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
+import {
+  withArrayTranslationProps,
+  withJsonFormsArrayLayoutProps,
+  withTranslateProps,
+} from '@jsonforms/react';
 import { MaterialTableControl } from './MaterialTableControl';
 import { DeleteDialog } from './DeleteDialog';
 
-export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
+export const MaterialArrayControlRenderer = (
+  props: ArrayLayoutProps & { translations: ArrayTranslations }
+) => {
   const [open, setOpen] = useState(false);
   const [path, setPath] = useState(undefined);
   const [rowData, setRowData] = useState(undefined);
-  const { removeItems, visible } = props;
+  const { removeItems, visible, translations } = props;
 
   const openDeleteDialog = useCallback(
     (p: string, rowIndex: number) => {
@@ -63,16 +70,20 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
 
   return (
     <>
-      <MaterialTableControl {...props} openDeleteDialog={openDeleteDialog} />
+      <MaterialTableControl
+        {...props}
+        openDeleteDialog={openDeleteDialog}
+        translations={translations}
+      />
       <DeleteDialog
         open={open}
         onCancel={deleteCancel}
         onConfirm={deleteConfirm}
         onClose={deleteClose}
-        acceptText={props.translations.deleteDialogAccept}
-        declineText={props.translations.deleteDialogDecline}
-        title={props.translations.deleteDialogTitle}
-        message={props.translations.deleteDialogMessage}
+        acceptText={translations.deleteDialogAccept}
+        declineText={translations.deleteDialogDecline}
+        title={translations.deleteDialogTitle}
+        message={translations.deleteDialogMessage}
       />
     </>
   );
@@ -83,4 +94,6 @@ export const materialArrayControlTester: RankedTester = rankWith(
   or(isObjectArrayControl, isPrimitiveArrayControl)
 );
 
-export default withJsonFormsArrayLayoutProps(MaterialArrayControlRenderer);
+export default withJsonFormsArrayLayoutProps(
+  withTranslateProps(withArrayTranslationProps(MaterialArrayControlRenderer))
+);

package/src/complex/MaterialOneOfRenderer.tsx

@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 
 import { TabSwitchConfirmDialog } from './TabSwitchConfirmDialog';
@@ -69,13 +69,17 @@ export const MaterialOneOfRenderer = ({
   const cancel = useCallback(() => {
     setConfirmDialogOpen(false);
   }, [setConfirmDialogOpen]);
-  const oneOfRenderInfos = createCombinatorRenderInfos(
-    (schema as JsonSchema).oneOf,
-    rootSchema,
-    'oneOf',
-    uischema,
-    path,
-    uischemas
+  const oneOfRenderInfos = useMemo(
+    () =>
+      createCombinatorRenderInfos(
+        (schema as JsonSchema).oneOf,
+        rootSchema,
+        'oneOf',
+        uischema,
+        path,
+        uischemas
+      ),
+    [schema, rootSchema, uischema, path, uischemas]
   );
 
   const openNewTab = (newIndex: number) => {

package/src/complex/MaterialTableControl.tsx

@@ -451,7 +451,8 @@ const TableRows = ({
 };
 
 export class MaterialTableControl extends React.Component<
-  ArrayLayoutProps & WithDeleteDialogSupport,
+  ArrayLayoutProps &
+    WithDeleteDialogSupport & { translations: ArrayTranslations },
   any
 > {
   addItem = (path: string, value: any) => this.props.addItem(path, value);

package/src/layouts/MaterialArrayLayout.tsx

@@ -26,6 +26,7 @@ import range from 'lodash/range';
 import React, { useState, useCallback } from 'react';
 import {
   ArrayLayoutProps,
+  ArrayTranslations,
   composePaths,
   computeLabel,
   createDefaultValue,
@@ -35,7 +36,9 @@ import { ArrayLayoutToolbar } from './ArrayToolbar';
 import ExpandPanelRenderer from './ExpandPanelRenderer';
 import merge from 'lodash/merge';
 
-const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => {
+const MaterialArrayLayoutComponent = (
+  props: ArrayLayoutProps & { translations: ArrayTranslations }
+) => {
   const [expanded, setExpanded] = useState<string | boolean>(false);
   const innerCreateDefaultValue = useCallback(
     () => createDefaultValue(props.schema, props.rootSchema),
@@ -65,10 +68,10 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => {
     rootSchema,
     config,
     uischemas,
-    translations,
     description,
     disableAdd,
     disableRemove,
+    translations,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
   const doDisableAdd = disableAdd || appliedUiSchemaOptions.disableAdd;

package/src/layouts/MaterialArrayLayoutRenderer.tsx

@@ -26,29 +26,39 @@ import React, { useCallback } from 'react';
 
 import {
   ArrayLayoutProps,
+  ArrayTranslations,
   isObjectArrayWithNesting,
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
 import { MaterialArrayLayout } from './MaterialArrayLayout';
-import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
+import {
+  withArrayTranslationProps,
+  withJsonFormsArrayLayoutProps,
+  withTranslateProps,
+} from '@jsonforms/react';
 
 export const MaterialArrayLayoutRenderer = ({
   visible,
   addItem,
+  translations,
   ...props
-}: ArrayLayoutProps) => {
+}: ArrayLayoutProps & { translations: ArrayTranslations }) => {
   const addItemCb = useCallback(
     (p: string, value: any) => addItem(p, value),
     [addItem]
   );
-
   if (!visible) {
     return null;
   }
 
   return (
-    <MaterialArrayLayout visible={visible} addItem={addItemCb} {...props} />
+    <MaterialArrayLayout
+      translations={translations}
+      visible={visible}
+      addItem={addItemCb}
+      {...props}
+    />
   );
 };
 
@@ -56,4 +66,6 @@ export const materialArrayLayoutTester: RankedTester = rankWith(
   4,
   isObjectArrayWithNesting
 );
-export default withJsonFormsArrayLayoutProps(MaterialArrayLayoutRenderer);
+export default withJsonFormsArrayLayoutProps(
+  withTranslateProps(withArrayTranslationProps(MaterialArrayLayoutRenderer))
+);