fixed the styling issues identified in selectable card (#477)

Co-authored-by: manasa <[email protected]>

Author: 4manasa

packages/react-sdk-components/src/components/field/Checkbox/Checkbox.tsx

@@ -35,6 +35,12 @@ 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'
   }
 }));
 
@@ -75,6 +81,8 @@ export default function CheckboxComponent(props: CheckboxProps) {
     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();
@@ -90,7 +98,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
   }, [value]);
 
   useEffect(() => {
-    if (referenceList?.length > 0) {
+    if (referenceList?.length > 0 && !readOnlyMode) {
       thePConn.setReferenceList(selectionList);
       updateNewInstuctions(thePConn, selectionList);
     }
@@ -140,39 +148,41 @@ export default function CheckboxComponent(props: CheckboxProps) {
     return (
       <div>
         <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
-        <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 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>
     );
   }

packages/react-sdk-components/src/components/field/SelectableCard/SelectableCard.tsx

@@ -76,13 +76,18 @@ export default function SelectableCard(props) {
 
         const component = (
           <div style={{ paddingTop: '15px' }}>
-            <Card className={className} style={{ display: 'flex', height: '500px' }} data-testid={testId}>
+            <Card className={className} style={{ display: 'flex', flexDirection: 'column', height: '100%' }} data-testid={testId}>
               <CardContent
                 style={{
-                  ...(imagePosition === 'inline-start' && { display: 'flex' })
+                  ...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { display: 'flex', height: '100%' }),
+                  ...(imagePosition === 'inline-end' && { flexDirection: 'row-reverse' })
                 }}
               >
-                <div>
+                <div
+                  style={{
+                    ...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { width: '40%' })
+                  }}
+                >
                   {image && (
                     <img
                       src={image.src}
@@ -99,7 +104,11 @@ export default function SelectableCard(props) {
                     />
                   )}
                 </div>
-                <div>
+                <div
+                  style={{
+                    ...((imagePosition === 'inline-start' || imagePosition === 'inline-end') && { width: '60%' })
+                  }}
+                >
                   {type === 'radio' ? (
                     <FormControlLabel
                       control={

packages/react-sdk-components/src/components/template/DataReference/SearchForm.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Tab, Tabs, Typography, RadioGroup, FormControlLabel, Radio, Select, MenuItem, Grid, Box } from '@mui/material';
+import { Tab, Tabs, Typography, RadioGroup, FormControlLabel, Radio, MenuItem, Box, TextField } from '@mui/material';
+import Grid from '@mui/material/Grid2';
 import { TabContext, TabPanel } from '@mui/lab';
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
 
@@ -92,13 +93,13 @@ const SearchForm = props => {
   if (tabItems.length > 3) {
     searchCategoriesComp = (
       <Grid container spacing={2}>
-        <Select value={currentTabId} onChange={handleTabClick} fullWidth>
+        <TextField value={currentTabId} select onChange={handleTabClick} fullWidth>
           {tabItems.map(tab => (
             <MenuItem key={tab.id} value={tab.id}>
               {tab.name}
             </MenuItem>
           ))}
-        </Select>
+        </TextField>
       </Grid>
     );
   } else if (tabItems.length > 1) {

packages/react-sdk-components/src/components/template/ListView/ListView.tsx

@@ -102,16 +102,13 @@ export default function ListView(props: ListViewProps) {
   // List component context
   const [listContext, setListContext] = useState<any>({});
   const { meta } = listContext;
-  const xRayApis = PCore.getDebugger().getXRayRuntime();
-  const xRayUid = xRayApis.startXRay();
   const { current: uniqueId } = useRef(crypto.randomUUID());
 
   useInit({
     ...props,
     setListContext,
     ref,
     showDynamicFields,
-    xRayUid,
     cosmosTableRef
   });
 

packages/react-sdk-components/src/components/template/ListView/hooks.ts

@@ -14,7 +14,6 @@ export default function useInit(props) {
     ref,
     showDynamicFields,
     isDataObject,
-    xRayUid,
     cosmosTableRef
   } = props;
   let { editing, selectionMode } = props;
@@ -73,8 +72,7 @@ export default function useInit(props) {
         getPConnect,
         compositeKeys,
         isSearchable,
-        isCacheable: true,
-        xRayUid
+        isCacheable: true
       }).then(async context => {
         if (isCompStillMounted) {
           return readContextResponse(context, {
@@ -83,7 +81,6 @@ export default function useInit(props) {
             selectionCountThreshold,
             ref,
             selectionMode,
-            xRayUid,
             cosmosTableRef
           });
         }