@pega/dx-component-builder-sdk 0.25.5 → 0.25.6

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/FieldValueList/FieldValueList.tsx

@@ -1,6 +1,6 @@
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid2 from '@mui/material/Grid2';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 // FieldValueList is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps
@@ -51,11 +51,11 @@ export default function FieldValueList(props: FieldValueListProps) {
 
   function getGridItemLabel() {
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
+      <Grid2 size={{ xs: variant === 'stacked' ? 12 : 4 }} className={variant === 'stacked' ? classes.noPaddingBottom : ''}>
         <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
           {name}
         </Typography>
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -63,23 +63,22 @@ export default function FieldValueList(props: FieldValueListProps) {
     const formattedValue = formatItemValue(value);
 
     return (
-      <Grid item xs={variant === 'stacked' ? 12 : 6} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
+      <Grid2 size={{ xs: variant === 'stacked' || !name ? 12 : 8 }} className={variant === 'stacked' ? classes.noPaddingTop : ''}>
         {isHtml ? (
-          // eslint-disable-next-line react/no-danger
           <div dangerouslySetInnerHTML={{ __html: formattedValue }} />
         ) : (
           <Typography variant={variant === 'stacked' ? 'h6' : 'body2'} component='span' className={classes.fieldValue}>
             {formattedValue}
           </Typography>
         )}
-      </Grid>
+      </Grid2>
     );
   }
 
   return (
-    <Grid container spacing={4} justifyContent='space-between'>
-      {getGridItemLabel()}
+    <Grid2 container spacing={4} justifyContent='space-between'>
+      {name ? getGridItemLabel() : null}
       {getGridItemValue()}
-    </Grid>
+    </Grid2>
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/Operator/Operator.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import TextField from '@material-ui/core/TextField';
-import Popover from '@material-ui/core/Popover';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@mui/material/TextField';
+import Popover from '@mui/material/Popover';
+import Grid2 from '@mui/material/Grid2';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
-import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Operator is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps
@@ -112,7 +112,6 @@ export default function Operator(props: OperatorProps) {
           }
         ];
       } else {
-        // eslint-disable-next-line no-console
         console.log(
           `Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
         );
@@ -162,25 +161,25 @@ export default function Operator(props: OperatorProps) {
 
     // There are fields, so build the grid.
     return (
-      <Grid container className={classes.popover} spacing={1}>
-        <Grid item xs={12}>
+      <Grid2 container className={classes.popover} spacing={1}>
+        <Grid2 size={{ xs: 12 }}>
           <Typography variant='h6'>{caseOpName}</Typography>
-        </Grid>
+        </Grid2>
         {popoverFields.map(field => {
           return (
             <React.Fragment key={field.id}>
-              <Grid container item xs={12} spacing={1}>
-                <Grid item xs={6}>
+              <Grid2 container size={{ xs: 12 }} spacing={1}>
+                <Grid2 size={{ xs: 6 }}>
                   <Typography variant='caption'>{field.name}</Typography>
-                </Grid>
-                <Grid item xs={6}>
+                </Grid2>
+                <Grid2 size={{ xs: 6 }}>
                   <Typography variant='subtitle2'>{field.value}</Typography>
-                </Grid>
-              </Grid>
+                </Grid2>
+              </Grid2>
             </React.Fragment>
           );
         })}
-      </Grid>
+      </Grid2>
     );
   }
 
@@ -189,18 +188,20 @@ export default function Operator(props: OperatorProps) {
   return (
     <>
       <TextField
+        variant='standard'
         defaultValue={caseOpName}
         label={caseOpLabel}
         onClick={showOperatorDetails}
-        InputProps={{
-          readOnly: true,
-          disableUnderline: true,
-          inputProps: { style: { cursor: 'pointer' } }
+        slotProps={{
+          input: {
+            readOnly: true,
+            disableUnderline: true,
+            inputProps: { style: { cursor: 'pointer' } }
+          }
         }}
       />
       <br />
       {Utils.generateDateTime(caseTime, 'DateTime-Since')}
-
       <Popover
         id={popoverId}
         open={popoverOpen}
@@ -208,7 +209,9 @@ export default function Operator(props: OperatorProps) {
         onClose={handlePopoverClose}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
         transformOrigin={{ vertical: 'top', horizontal: 'center' }}
-        PaperProps={{ style: { maxWidth: '45ch' } }}
+        slotProps={{
+          paper: { style: { maxWidth: '45ch' } }
+        }}
       >
         {getPopoverGrid()}
       </Popover>

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/Pulse/Pulse.tsx

@@ -1,6 +1,6 @@
-import { PropsWithChildren } from 'react';
-import { Card, CardContent, CardHeader, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import type { PropsWithChildren } from 'react';
+import { Card, CardContent, CardHeader, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 // Pulse is one of the few components that does NOT have getPConnect.
 //  So, no need to extend PConnProps

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/RichTextEditor/RichTextEditor.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
-import { FormControl, FormHelperText, InputLabel, makeStyles } from '@material-ui/core';
-
+import { FormControl, FormHelperText, InputLabel, useTheme } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/react-sdk-components/lib/hooks';
 
 const useStyles = makeStyles(theme => ({
@@ -30,6 +30,7 @@ interface RichTextEditorProps {
 }
 
 const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorProps, ref) {
+  const theme = useTheme();
   const classes = useStyles();
   const uid = useUID();
   const { id = uid, defaultValue, label, labelHidden, info, testId, placeholder, disabled, required, readOnly, error, onBlur, onChange } = props;
@@ -73,7 +74,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
 
   if (readOnly) {
     const value = defaultValue || '--';
-    // eslint-disable-next-line react/no-danger
+
     richTextComponent = <div key={id} id={id} className='readonly-richtext-editor' dangerouslySetInnerHTML={{ __html: value }} />;
   } else {
     richTextComponent = (
@@ -86,6 +87,34 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
         initialValue={defaultValue}
         disabled={disabled}
         init={{
+          skin: theme.palette.mode === 'dark' ? 'oxide-dark' : 'oxide',
+          // ...other TinyMCE config...
+          content_style: `
+            body {
+              font-family: ${theme.typography.fontFamily};
+              font-size: ${theme.typography.fontSize}px;
+              color: ${theme.palette.text.primary};
+              background: ${theme.palette.background.paper};
+            }
+            a { color: ${theme.palette.primary.main}; }
+            h1, h2, h3, h4, h5, h6 { color: ${theme.palette.text.primary}; font-family: ${theme.typography.fontFamily}; }
+            blockquote { color: ${theme.palette.text.secondary}; border-left: 4px solid ${theme.palette.primary.light}; padding-left: 8px; }
+            ul, ol { color: ${theme.palette.text.primary}; }
+            input, textarea, select {
+              background: ${theme.palette.background.paper};
+              color: ${theme.palette.text.primary};
+              border: 1px solid ${theme.palette.divider};
+              border-radius: 4px;
+              padding: 6px 10px;
+              font-size: 1em;
+              font-family: inherit;
+            }
+            .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+              color: ${theme.palette.text.secondary};
+              opacity: 0.7;
+            }
+            /* Add more styles as needed */
+          `,
           placeholder,
           menubar: false,
           statusbar: false,
@@ -94,7 +123,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
           autoresize_bottom_margin: 0,
           toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
           toolbar_location: 'bottom',
-          content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
+          // content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
           branding: false,
           paste_data_images: true,
           file_picker_types: 'image',
@@ -107,7 +136,7 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
   }
 
   return (
-    <FormControl data-test-id={testId} error={error} required={required}>
+    <FormControl variant='standard' data-test-id={testId} error={error} required={required}>
       {!labelHidden && (
         <InputLabel id='demo-simple-select-error-label' className={classes.fieldLabel}>
           {label}

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/WssQuickCreate/WssQuickCreate.css

@@ -1,36 +1,29 @@
 .quick-link-ul-list {
   list-style: none;
   padding: 0;
-  grid-template-columns: repeat(auto-fill, minmax(min(40ch, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
   display: grid;
   gap: calc(1rem);
 }
 
-.quick-link-list {
-  background-color: #3f51b5;
-  color: white;
-  border-radius: 8px;
-}
-
 .quick-link-button {
   text-transform: capitalize !important;
   font-size: 16px !important;
-  color: white !important;
-  padding: calc(0.5rem * 2) !important;
-  height: 6rem;
+  color: var(--app-text-color) !important;
+  height: 10rem;
   width: 100%;
-  justify-content: start !important;
 }
 
 .quick-link-icon {
-  width: 1em;
-  height: 1em;
   flex-shrink: 0;
-  filter: invert(100%);
+  object-fit: contain;
+  width: 3rem;
+  height: 3rem;
 }
 
 .quick-link-button-span {
   display: flex;
+  flex-direction: column;
   align-items: center;
   gap: 0.5rem;
 }

package/tests/assets/sdk-r/components/create/override-sdk/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -1,4 +1,5 @@
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
+import { makeStyles } from '@mui/styles';
 import './WssQuickCreate.css';
 
 // WssQuickCreate is one of the few components that does NOT have getPConnect.
@@ -9,19 +10,29 @@ interface WssQuickCreateProps {
   actions?: any[];
 }
 
+const useStyles = makeStyles(theme => ({
+  quickLinkList: {
+    backgroundColor: theme.palette.mode === 'dark' ? 'var(--app-background-color)' : 'var(--link-button-color)',
+    color: 'var(--app-text-color)',
+    borderRadius: '16px',
+    border: '1px solid var(--app-primary-color)'
+  }
+}));
+
 export default function WssQuickCreate(props: WssQuickCreateProps) {
   const { heading, actions } = props;
+  const classes = useStyles();
 
   return (
     <div>
-      <h1 id='quick-links-heading' className='quick-link-heading'>
+      <h1 id='quick-links-heading' className='quick-links-heading'>
         {heading}
       </h1>
       <ul id='quick-links' className='quick-link-ul-list'>
         {actions &&
           actions.map(element => {
             return (
-              <li className='quick-link-list' key={element.label}>
+              <li className={classes.quickLinkList} key={element.label}>
                 <Button className='quick-link-button' onClick={element.onClick}>
                   <span className='quick-link-button-span'>
                     {element.icon && <img className='quick-link-icon' src={element.icon} />}

package/tests/assets/sdk-r/components/create/override-sdk/field/AutoComplete/AutoComplete.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useState } from 'react';
-import { TextField } from '@material-ui/core';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import { TextField } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
 import isDeepEqual from 'fast-deep-equal/react';
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface IOption {
   key: string;
@@ -150,7 +150,7 @@ export default function AutoComplete(props: AutoCompleteProps) {
     }
   }, []);
 
-  if (displayMode === 'LABELS_LEFT') {
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : label} value={value} />;
   }
 
@@ -191,7 +191,7 @@ export default function AutoComplete(props: AutoCompleteProps) {
       getOptionLabel={(option: IOption) => {
         return option.value ? option.value : '';
       }}
-      getOptionSelected={(option: any) => {
+      isOptionEqualToValue={(option: any) => {
         return option.value ? option.value : '';
       }}
       fullWidth

package/tests/assets/sdk-r/components/create/override-sdk/field/CancelAlert/CancelAlert.css

@@ -5,7 +5,7 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: rgba(100, 100, 100, 0.4);
+  background-color: var(--modal-background-color);
   position: fixed;
   z-index: 9999;
   top: 0px;
@@ -16,9 +16,9 @@
   display: table;
   margin: auto;
   min-width: 550px;
-  background-color: white;
-  border: 1px solid black;
+  background-color: var(--modal-top-color);
+  border: 1px solid var(--modal-border-color);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px #777;
+  box-shadow: 0 0 10px 3px var(--modal-box-shadow-color);
 }

package/tests/assets/sdk-r/components/create/override-sdk/field/CancelAlert/CancelAlert.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { Button, Grid, IconButton, Snackbar } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
+import { Button, Grid2, IconButton, Snackbar } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
 
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './CancelAlert.css';
 
 interface CancelAlertProps extends PConnFieldProps {
@@ -58,14 +58,12 @@ export default function CancelAlert(props: CancelAlertProps) {
   function cancelHandler() {
     if (isReverseCoexistence) {
       dismiss(true);
-      // @ts-ignore - An argument for 'payload' was not provided.
       PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.REVERSE_COEXISTENCE_EVENTS.HANDLE_DISCARD);
     } else if (!isDataObject && !isLocalAction && !isBulkAction) {
       disableButton(btnIds.DELETE);
       actionsAPI
         .deleteCaseInCreateStage(containerItemID, hideDelete)
         .then(() => {
-          // @ts-ignore - An argument for 'payload' was not provided.
           PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
         })
         .catch(() => {
@@ -78,18 +76,17 @@ export default function CancelAlert(props: CancelAlertProps) {
         });
     } else if (isLocalAction) {
       dismiss(true);
-      actionsAPI.cancelAssignment(containerItemID);
+      actionsAPI.cancelAssignment(containerItemID, false);
     } else if (isBulkAction) {
       dismiss(true);
       actionsAPI.cancelBulkAction(containerItemID);
     } else {
       dismiss(true);
-      // @ts-ignore - Argument of type '{ containerItemID: string; skipReleaseLockRequest: any; }' is not assignable to parameter of type 'ContainerInfo'.
       containerManagerAPI.removeContainerItem({ containerItemID, skipReleaseLockRequest });
     }
   }
 
-  function handleSnackbarClose(event: React.SyntheticEvent | React.MouseEvent, reason?: string) {
+  function handleSnackbarClose(event: React.SyntheticEvent<any> | Event, reason?: string) {
     if (reason === 'clickaway') {
       return;
     }
@@ -128,10 +125,10 @@ export default function CancelAlert(props: CancelAlertProps) {
             <p>{localizedVal(content, localeCategory)}</p>
           </div>
           <div className='action-controls'>
-            <Grid container spacing={4} justifyContent='space-between'>
-              <Grid item>{leftButton}</Grid>
-              <Grid item>{rightButton}</Grid>
-            </Grid>
+            <Grid2 container spacing={4} justifyContent='space-between'>
+              <Grid2>{leftButton}</Grid2>
+              <Grid2>{rightButton}</Grid2>
+            </Grid2>
           </div>
         </div>
       </div>

package/tests/assets/sdk-r/components/create/override-sdk/field/Checkbox/Checkbox.tsx

@@ -1,12 +1,11 @@
-/* eslint-disable react/no-array-index-key */
 import { useState, useEffect } from 'react';
-import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { insertInstruction, deleteInstruction, updateNewInstuctions } from '@pega/react-sdk-components/lib/components/helpers/instructions-utils';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
-import { makeStyles } from '@material-ui/core/styles';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here
@@ -21,18 +20,33 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   primaryField: string;
   readonlyContextList: any;
   referenceList: string;
+  variant?: string;
+  hideFieldLabels: boolean;
+  additionalProps: any;
+  imagePosition: string;
+  imageSize: string;
+  showImageDescription: string;
+  renderMode: string;
+  image: string;
 }
 
 const useStyles = makeStyles(() => ({
   checkbox: {
     display: 'flex',
     flexDirection: 'column'
+  },
+  selectableCard: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 40ch), 1fr))',
+    gridAutoRows: '1fr',
+    gap: '0.5rem'
   }
 }));
 
 export default function CheckboxComponent(props: CheckboxProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
+  const SelectableCard = getComponentFromMap('SelectableCard');
 
   const {
     getPConnect,
@@ -56,8 +70,20 @@ export default function CheckboxComponent(props: CheckboxProps) {
     selectionList,
     primaryField,
     referenceList,
-    readonlyContextList: selectedvalues
+    readonlyContextList: selectedvalues,
+    variant,
+    hideFieldLabels,
+    additionalProps,
+    imagePosition,
+    imageSize,
+    showImageDescription,
+    renderMode,
+    image
   } = props;
+  const readOnlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [theSelectedButton, setSelectedButton] = useState(value);
   const classes = useStyles();
   const helperTextToDisplay = validatemessage || helperText;
   const thePConn = getPConnect();
@@ -71,13 +97,18 @@ export default function CheckboxComponent(props: CheckboxProps) {
   }, [value]);
 
   useEffect(() => {
-    if (referenceList?.length > 0) {
+    if (referenceList?.length > 0 && !readOnlyMode) {
       thePConn.setReferenceList(selectionList);
       updateNewInstuctions(thePConn, selectionList);
     }
   }, [thePConn]);
 
-  if (displayMode === 'LABELS_LEFT') {
+  useEffect(() => {
+    // This update theSelectedButton which will update the UI to show the selected button correctly
+    setSelectedButton(value);
+  }, [value]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
     return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
 
@@ -93,6 +124,68 @@ export default function CheckboxComponent(props: CheckboxProps) {
     thePConn.getValidationApi().validate(event.target.checked);
   };
 
+  const handleCheckboxChange = (event, item) => {
+    if (event.target.checked) {
+      insertInstruction(thePConn, selectionList, selectionKey, primaryField, item);
+    } else {
+      deleteInstruction(thePConn, selectionList, selectionKey, item);
+    }
+    thePConn.clearErrorMessages({ property: selectionList });
+  };
+
+  const actions = thePConn.getActionsApi();
+
+  const commonProps = {
+    ...additionalProps,
+    className: 'standard',
+    disabled,
+    readOnly,
+    onClick: (actions as any).onClick
+  };
+
+  if (variant === 'card') {
+    return (
+      <div>
+        <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
+        <div className={classes.selectableCard}>
+          <SelectableCard
+            {...commonProps}
+            testId={testId}
+            displayMode={displayMode}
+            dataSource={datasource}
+            getPConnect={getPConnect}
+            readOnly={renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly}
+            onChange={e => {
+              e.stopPropagation();
+              const recordKey = selectionKey?.split('.').pop();
+              const selectedItem = datasource?.source?.find(item => item[recordKey as any] === e.target.id) ?? {};
+              handleCheckboxChange(e, {
+                id: selectedItem[recordKey as any],
+                primary: selectedItem[recordKey as any]
+              });
+            }}
+            onBlur={() => {
+              thePConn.getValidationApi().validate(selectedvalues, selectionList);
+            }}
+            hideFieldLabels={hideFieldLabels}
+            recordKey={selectionKey?.split('.').pop()}
+            cardLabel={primaryField.split('.').pop()}
+            image={{
+              imagePosition,
+              imageSize,
+              showImageDescription,
+              imageField: image?.split('.').pop(),
+              imageDescription: (thePConn?.getRawMetadata()?.config as any).imageDescription?.split('.').pop()
+            }}
+            readOnlyList={selectedvalues}
+            type='checkbox'
+            showNoValue={(renderMode === 'ReadOnly' || readOnly || displayMode === 'DISPLAY_ONLY') && selectedvalues.length === 0}
+          />
+        </div>
+      </div>
+    );
+  }
+
   const handleChangeMultiMode = (event, element) => {
     if (event.target.checked) {
       insertInstruction(thePConn, selectionList, selectionKey, primaryField, {
@@ -161,7 +254,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
   }
 
   return (
-    <FormControl required={required} error={status === 'error'}>
+    <FormControl variant='standard' required={required} error={status === 'error'}>
       {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
       <FormGroup>{theCheckbox}</FormGroup>
       <FormHelperText>{helperTextToDisplay}</FormHelperText>