@pega/react-sdk-components 0.24.3 → 0.25.1

package/lib/components/template/InlineDashboard/InlineDashboard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Grid, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Grid, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 const useStyles = makeStyles(( /* theme */) => ({
     headerStyles: {
         fontWeight: 500,

package/lib/components/template/InlineDashboard/InlineDashboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineDashboard.js","sourceRoot":"","sources":["../../../../src/components/template/InlineDashboard/InlineDashboard.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAStD,MAAM,SAAS,GAAG,UAAU,CAAC,EAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC7C,YAAY,EAAE;QACZ,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,SAAS;KACpB;IACD,eAAe,EAAE;QACf,SAAS,EAAE,MAAM;QACjB,YAAY,EAAE,MAAM;KACrB;IACD,SAAS,EAAE;QACT,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,YAAY,EAAE,UAAU;KACzB;IACD,qBAAqB,EAAE;QACrB,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,mBAAmB,EAAE,iBAAiB;KACvC;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,YAAY,EAAE,UAAU;QACxB,SAAS,EAAE,MAAM;KAClB;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAA8C;IACpF,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,gBAAgB,GAAG,QAA0B,CAAC;IAEpD,MAAM,SAAS,GAAG,cAAc,KAAK,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5E,OAAO,CACL,8BACE,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAE,OAAO,CAAC,YAAY,YACrD,KAAK,GACK,EAEZ,cAAc,KAAK,aAAa,IAAI,CACnC,MAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAC,gBAAgB,EAAC,SAAS,EAAE,OAAO,CAAC,eAAe,aACvF,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,YAC5C,gBAAgB,CAAC,CAAC,CAAC,GACf,EACP,KAAC,IAAI,IAAC,EAAE,EAAC,SAAS,EAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,qBAAqB,YACrE,gBAAgB,CAAC,CAAC,CAAC,GACf,IACF,CACR,EACA,cAAc,KAAK,aAAa,IAAI,CACnC,MAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,eAAe,aAClF,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC,YACb,gBAAgB,CAAC,CAAC,CAAC,GACf,EACP,KAAC,IAAI,IAAC,EAAE,EAAC,SAAS,EAAC,IAAI,QAAC,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC,YAAY,YAC3D,gBAAgB,CAAC,CAAC,CAAC,GACf,IACF,CACR,IACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { PropsWithChildren, ReactElement } from 'react';\nimport { Grid, Typography } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { PConnProps } from '../../../types/PConnProps';\n\ninterface InlineDashboardProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  title: string;\n  filterPosition?: string;\n}\n\nconst useStyles = makeStyles((/* theme */) => ({\n  headerStyles: {\n    fontWeight: 500,\n    fontSize: '1.25rem'\n  },\n  containerStyles: {\n    marginTop: '1rem',\n    marginBottom: '1rem'\n  },\n  colStyles: {\n    display: 'grid',\n    gap: '1rem',\n    alignContent: 'baseline'\n  },\n  filterContainerStyles: {\n    display: 'grid',\n    gap: '1rem',\n    gridTemplateColumns: 'repeat(7, 1fr);'\n  },\n  inlineStyles: {\n    display: 'grid',\n    gap: '1rem',\n    alignContent: 'baseline',\n    marginTop: '1rem'\n  }\n}));\n\nexport default function InlineDashboard(props: PropsWithChildren<InlineDashboardProps>) {\n  const classes = useStyles();\n\n  const { children, title, filterPosition } = props;\n  const childrenToRender = children as ReactElement[];\n\n  const direction = filterPosition === 'inline-start' ? 'row-reverse' : 'row';\n  return (\n    <>\n      <Typography variant='h4' className={classes.headerStyles}>\n        {title}\n      </Typography>\n\n      {filterPosition === 'block-start' && (\n        <Grid container spacing={2} direction='column-reverse' className={classes.containerStyles}>\n          <Grid item xs={12} className={classes.colStyles}>\n            {childrenToRender[0]}\n          </Grid>\n          <Grid id='filters' item xs={12} className={classes.filterContainerStyles}>\n            {childrenToRender[1]}\n          </Grid>\n        </Grid>\n      )}\n      {filterPosition !== 'block-start' && (\n        <Grid container spacing={2} direction={direction} className={classes.containerStyles}>\n          <Grid item xs={9}>\n            {childrenToRender[0]}\n          </Grid>\n          <Grid id='filters' item xs={3} className={classes.inlineStyles}>\n            {childrenToRender[1]}\n          </Grid>\n        </Grid>\n      )}\n    </>\n  );\n}\n"]}
+{"version":3,"file":"InlineDashboard.js","sourceRoot":"","sources":["../../../../src/components/template/InlineDashboard/InlineDashboard.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAShD,MAAM,SAAS,GAAG,UAAU,CAAC,EAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC7C,YAAY,EAAE;QACZ,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,SAAS;KACpB;IACD,eAAe,EAAE;QACf,SAAS,EAAE,MAAM;QACjB,YAAY,EAAE,MAAM;KACrB;IACD,SAAS,EAAE;QACT,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,YAAY,EAAE,UAAU;KACzB;IACD,qBAAqB,EAAE;QACrB,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,mBAAmB,EAAE,iBAAiB;KACvC;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,YAAY,EAAE,UAAU;QACxB,SAAS,EAAE,MAAM;KAClB;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAA8C;IACpF,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,gBAAgB,GAAG,QAA0B,CAAC;IAEpD,MAAM,SAAS,GAAG,cAAc,KAAK,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5E,OAAO,CACL,8BACE,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAE,OAAO,CAAC,YAAY,YACrD,KAAK,GACK,EAEZ,cAAc,KAAK,aAAa,IAAI,CACnC,MAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAC,gBAAgB,EAAC,SAAS,EAAE,OAAO,CAAC,eAAe,aACvF,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,YAC5C,gBAAgB,CAAC,CAAC,CAAC,GACf,EACP,KAAC,IAAI,IAAC,EAAE,EAAC,SAAS,EAAC,IAAI,QAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,qBAAqB,YACrE,gBAAgB,CAAC,CAAC,CAAC,GACf,IACF,CACR,EACA,cAAc,KAAK,aAAa,IAAI,CACnC,MAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,eAAe,aAClF,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC,YACb,gBAAgB,CAAC,CAAC,CAAC,GACf,EACP,KAAC,IAAI,IAAC,EAAE,EAAC,SAAS,EAAC,IAAI,QAAC,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC,YAAY,YAC3D,gBAAgB,CAAC,CAAC,CAAC,GACf,IACF,CACR,IACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { PropsWithChildren, ReactElement } from 'react';\nimport { Grid, Typography } from '@mui/material';\nimport makeStyles from '@mui/styles/makeStyles';\nimport { PConnProps } from '../../../types/PConnProps';\n\ninterface InlineDashboardProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  title: string;\n  filterPosition?: string;\n}\n\nconst useStyles = makeStyles((/* theme */) => ({\n  headerStyles: {\n    fontWeight: 500,\n    fontSize: '1.25rem'\n  },\n  containerStyles: {\n    marginTop: '1rem',\n    marginBottom: '1rem'\n  },\n  colStyles: {\n    display: 'grid',\n    gap: '1rem',\n    alignContent: 'baseline'\n  },\n  filterContainerStyles: {\n    display: 'grid',\n    gap: '1rem',\n    gridTemplateColumns: 'repeat(7, 1fr);'\n  },\n  inlineStyles: {\n    display: 'grid',\n    gap: '1rem',\n    alignContent: 'baseline',\n    marginTop: '1rem'\n  }\n}));\n\nexport default function InlineDashboard(props: PropsWithChildren<InlineDashboardProps>) {\n  const classes = useStyles();\n\n  const { children, title, filterPosition } = props;\n  const childrenToRender = children as ReactElement[];\n\n  const direction = filterPosition === 'inline-start' ? 'row-reverse' : 'row';\n  return (\n    <>\n      <Typography variant='h4' className={classes.headerStyles}>\n        {title}\n      </Typography>\n\n      {filterPosition === 'block-start' && (\n        <Grid container spacing={2} direction='column-reverse' className={classes.containerStyles}>\n          <Grid item xs={12} className={classes.colStyles}>\n            {childrenToRender[0]}\n          </Grid>\n          <Grid id='filters' item xs={12} className={classes.filterContainerStyles}>\n            {childrenToRender[1]}\n          </Grid>\n        </Grid>\n      )}\n      {filterPosition !== 'block-start' && (\n        <Grid container spacing={2} direction={direction} className={classes.containerStyles}>\n          <Grid item xs={9}>\n            {childrenToRender[0]}\n          </Grid>\n          <Grid id='filters' item xs={3} className={classes.inlineStyles}>\n            {childrenToRender[1]}\n          </Grid>\n        </Grid>\n      )}\n    </>\n  );\n}\n"]}

package/lib/components/template/ListView/ListView.d.ts

@@ -12,6 +12,9 @@ interface ListViewProps extends PConnProps {
     showDynamicFields?: boolean;
     readonlyContextList?: any;
     value: any;
+    viewName?: string;
+    showRecords?: boolean;
+    displayAs?: string;
 }
 export default function ListView(props: ListViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/template/ListView/ListView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/components/template/ListView/ListView.tsx"],"names":[],"mappings":"AAwCA,OAAO,gBAAgB,CAAC;AAMxB,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,UAAU,aAAc,SAAQ,UAAU;IAExC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAEtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,GAAG,CAAC;IAC1B,KAAK,EAAE,GAAG,CAAC;CACZ;AAeD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA2pCpD"}
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/components/template/ListView/ListView.tsx"],"names":[],"mappings":"AAyCA,OAAO,gBAAgB,CAAC;AAOxB,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,UAAU,aAAc,SAAQ,UAAU;IAExC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAEtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,GAAG,CAAC;IAC1B,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAovCpD"}

package/lib/components/template/ListView/ListView.js

@@ -2,47 +2,48 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /* eslint-disable no-plusplus */
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable @typescript-eslint/no-shadow */
-import { useState, useEffect, useRef } from 'react';
-import { createStyles, makeStyles } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TablePagination from '@material-ui/core/TablePagination';
-import TableRow from '@material-ui/core/TableRow';
-import TableSortLabel from '@material-ui/core/TableSortLabel';
-import Paper from '@material-ui/core/Paper';
-import MoreIcon from '@material-ui/icons/MoreVert';
-import FilterListIcon from '@material-ui/icons/FilterList';
-import SubjectIcon from '@material-ui/icons/Subject';
-import SearchIcon from '@material-ui/icons/Search';
-import TextField from '@material-ui/core/TextField';
-import Grid from '@material-ui/core/Grid';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Select from '@material-ui/core/Select';
-import Button from '@material-ui/core/Button';
-import Link from '@material-ui/core/Link';
-import Typography from '@material-ui/core/Typography';
-import Snackbar from '@material-ui/core/Snackbar';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import { Radio } from '@material-ui/core';
-import Checkbox from '@material-ui/core/Checkbox';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import createStyles from '@mui/styles/createStyles';
+import makeStyles from '@mui/styles/makeStyles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Paper from '@mui/material/Paper';
+import MoreIcon from '@mui/icons-material/MoreVert';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import SubjectIcon from '@mui/icons-material/Subject';
+import SearchIcon from '@mui/icons-material/Search';
+import TextField from '@mui/material/TextField';
+import Grid from '@mui/material/Grid';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Select from '@mui/material/Select';
+import Button from '@mui/material/Button';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { Radio } from '@mui/material';
+import Checkbox from '@mui/material/Checkbox';
 import { filterData } from '../../helpers/simpleTableHelpers';
 import './ListView.css';
 import { getDateFormatInfo } from '../../helpers/date-format-utils';
 import { getCurrencyOptions } from '../../field/Currency/currency-utils';
+import { getGenericFieldsLocalizedValue } from '../../helpers/common-utils';
 import { format } from '../../helpers/formatters';
 import useInit from './hooks';
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 let myRows;
-let myDisplayColumnList;
 let menuColumnId = '';
 let menuColumnType = '';
 let menuColumnLabel = '';
@@ -52,7 +53,8 @@ export default function ListView(props) {
     const { getPConnect, bInForm = true } = props;
     const { globalSearch, referenceList, 
     /* rowClickAction, */
-    selectionMode, referenceType, payload, parameters, compositeKeys, showDynamicFields, readonlyContextList: selectedValues, value } = props;
+    selectionMode, referenceType, payload, parameters, compositeKeys, showDynamicFields, viewName, readonlyContextList: selectedValues, value, displayAs } = props;
+    let { showRecords } = props;
     const ref = useRef({}).current;
     const cosmosTableRef = useRef();
     // List component context
@@ -60,6 +62,7 @@ export default function ListView(props) {
     const { meta } = listContext;
     const xRayApis = PCore.getDebugger().getXRayRuntime();
     const xRayUid = xRayApis.startXRay();
+    const { current: uniqueId } = useRef(crypto.randomUUID());
     useInit({
         ...props,
         setListContext,
@@ -68,8 +71,8 @@ export default function ListView(props) {
         xRayUid,
         cosmosTableRef
     });
+    useClearSelectionsAndUpdateTable({ getPConnect, uniqueId, viewName });
     const thePConn = getPConnect();
-    // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
     const componentConfig = thePConn.getComponentConfig();
     const resolvedConfigProps = thePConn.getConfigProps();
     /** By default, pyGUID is used for Data classes and pyID is for Work classes as row-id/key */
@@ -77,6 +80,7 @@ export default function ListView(props) {
     /** If compositeKeys is defined, use dynamic value, else fallback to pyID or pyGUID. */
     const rowID = compositeKeys && compositeKeys?.length === 1 ? compositeKeys[0] : defRowID;
     const [arRows, setRows] = useState([]);
+    const [rowsData, setRowsData] = useState([]);
     const [arColumns, setColumns] = useState([]);
     const [response, setResponse] = useState([]);
     const [order, setOrder] = useState('asc');
@@ -143,6 +147,32 @@ export default function ListView(props) {
         }
     }));
     const classes = useStyles();
+    // Hook to clear the selections and update table in AdvancedSearch template when switching between search views
+    function useClearSelectionsAndUpdateTable({ getPConnect, uniqueId, viewName }) {
+        const clearSelectionsAndRefreshList = useCallback(({ viewName: name, clearSelections }) => {
+            if (name === viewName) {
+                const { selectionMode } = getPConnect().getRawConfigProps();
+                if (!selectionMode) {
+                    return;
+                }
+                if (clearSelections) {
+                    if (selectionMode === 'single') {
+                        getPConnect().getListActions().setSelectedRows({});
+                    }
+                    else {
+                        getPConnect().getListActions().clearSelectedRows();
+                    }
+                }
+            }
+        }, [getPConnect, viewName]);
+        useEffect(() => {
+            const identifier = `clear-and-update-advanced-search-selections-${uniqueId}`;
+            PCore.getPubSubUtils().subscribe('update-advanced-search-selections', clearSelectionsAndRefreshList, identifier);
+            return () => {
+                PCore.getPubSubUtils().unsubscribe('update-advanced-search-selections', identifier);
+            };
+        }, [uniqueId, clearSelectionsAndRefreshList]);
+    }
     const handleRequestSort = (event, property) => {
         const isAsc = orderBy === property && order === 'asc';
         setOrder(isAsc ? 'desc' : 'asc');
@@ -191,18 +221,24 @@ export default function ListView(props) {
                 theField = theField.substring(1);
             }
             const colIndex = fields.findIndex(ele => ele.name === theField);
-            const displayAsLink = field.config.displayAsLink;
+            // const displayAsLink = field.config.displayAsLink;
+            const { additionalDetails = {} } = field.config;
+            let shouldDisplayAsSemanticLink = additionalDetails.type === 'DISPLAY_LINK';
+            // TODO: This "if" check has been added for backward compatibility, to be removed once the users are notified about the changes in view metadata of US-517164
+            if (!shouldDisplayAsSemanticLink) {
+                shouldDisplayAsSemanticLink = 'displayAsLink' in field.config && field.config.displayAsLink;
+            }
             const headerRow = {};
             headerRow.id = fields[index].id;
             headerRow.type = field.type;
-            headerRow.displayAsLink = displayAsLink;
+            headerRow.displayAsLink = shouldDisplayAsSemanticLink;
             headerRow.numeric = field.type === 'Decimal' || field.type === 'Integer' || field.type === 'Percentage' || field.type === 'Currency' || false;
             headerRow.disablePadding = false;
             headerRow.label = fields[index].label;
             if (colIndex > -1) {
                 headerRow.classID = fields[colIndex].classID;
             }
-            if (displayAsLink) {
+            if (shouldDisplayAsSemanticLink) {
                 headerRow.isAssignmentLink = AssignDashObjects.includes(headerRow.classID);
                 if (field.config.value?.startsWith('@CA')) {
                     headerRow.isAssociation = true;
@@ -223,13 +259,6 @@ export default function ListView(props) {
             return data;
         });
     }
-    function getMyColumnList(arCols) {
-        const myColList = [];
-        arCols.forEach(col => {
-            myColList.push(col.id);
-        });
-        return myColList;
-    }
     /** Will return field from a filter expression */
     function getFieldFromFilter(filter, dateRange = false) {
         let fieldValue;
@@ -243,29 +272,43 @@ export default function ListView(props) {
     }
     // Will be triggered when EVENT_DASHBOARD_FILTER_CHANGE fires
     function processFilterChange(data) {
-        const { filterId, filterExpression } = data;
+        let filterId;
+        let filterExpression;
+        let isDateRange;
+        let field;
         let dashboardFilterPayload = {
             query: {
                 filter: {},
                 select: []
             }
         };
-        filters.current[filterId] = filterExpression;
-        let isDateRange = data.filterExpression?.AND;
-        // Will be AND by default but making it dynamic in case we support dynamic relational ops in future
-        const relationalOp = 'AND';
-        let field = getFieldFromFilter(filterExpression, isDateRange);
-        selectParam = [];
-        // Constructing the select parameters list (will be sent in dashboardFilterPayload)
-        columnList.current.forEach(col => {
-            selectParam.push({
-                field: col
+        if (displayAs === 'advancedSearch') {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            Object.entries(data).reduce((acc, [item, value]) => {
+                const { filterId, filterExpression } = value;
+                filters.current[filterId] = filterExpression;
+                return acc; // Ensure the accumulator is returned
+            }, {});
+        }
+        else {
+            ({ filterId, filterExpression } = data);
+            filters.current[filterId] = filterExpression;
+            isDateRange = data.filterExpression?.AND;
+            field = getFieldFromFilter(filterExpression, isDateRange);
+            selectParam = [];
+            // Constructing the select parameters list (will be sent in dashboardFilterPayload)
+            columnList.current.forEach(col => {
+                selectParam.push({
+                    field: col
+                });
             });
-        });
-        // Checking if the triggered filter is applicable for this list
-        if (data.filterExpression !== null && !(columnList.current?.length && columnList.current?.includes(field))) {
-            return;
+            // Checking if the triggered filter is applicable for this list
+            if (data.filterExpression !== null && !(columnList.current?.length && columnList.current?.includes(field))) {
+                return;
+            }
         }
+        // Will be AND by default but making it dynamic in case we support dynamic relational ops in future
+        const relationalOp = 'AND';
         // This is a flag which will be used to reset dashboardFilterPayload in case we don't find any valid filters
         let validFilter = false;
         let index = 1;
@@ -307,7 +350,7 @@ export default function ListView(props) {
             else {
                 dashboardFilterPayload.query.filter.filterConditions = {
                     ...dashboardFilterPayload.query.filter.filterConditions,
-                    [`T${index++}`]: { ...filter.condition, ignoreCase: true }
+                    [`T${index++}`]: { ...filter.condition, ...(filter.condition.comparator === 'CONTAINS' ? { ignoreCase: true } : {}) }
                 };
                 if (dashboardFilterPayload.query.filter.logic) {
                     dashboardFilterPayload.query.filter.logic = `${dashboardFilterPayload.query.filter.logic} ${relationalOp} T${index - 1}`;
@@ -331,6 +374,9 @@ export default function ListView(props) {
         fetchDataFromServer();
     }
     function fetchAllData(fields) {
+        if (displayAs === 'advancedSearch' && !showRecords) {
+            return Promise.resolve({ data: null });
+        }
         let query = null;
         if (payload) {
             query = payload.query;
@@ -444,7 +490,7 @@ export default function ListView(props) {
         const usingDataResults = getUsingData(tableDataResults);
         // store globally, so can be searched, filtered, etc.
         myRows = usingDataResults;
-        myDisplayColumnList = getMyColumnList(myColumns);
+        setRowsData(myRows);
         // At this point, if we have data ready to render and haven't been asked
         //  to NOT call setRows and setColumns, call them
         if (bCallSetRowsColumns) {
@@ -461,8 +507,35 @@ export default function ListView(props) {
             bCallSetRowsColumns = false;
         };
     }
+    function prepareFilters(data) {
+        return Object.entries(data.payload).reduce((acc, [field, value]) => {
+            if (value) {
+                let comparator = 'EQ';
+                const filterRecord = listContext.meta.fieldDefs.filter(item => item.id === field);
+                if (filterRecord?.[0]?.meta.type === 'TextInput') {
+                    comparator = 'CONTAINS';
+                }
+                acc[field] = {
+                    filterExpression: {
+                        condition: {
+                            lhs: {
+                                field
+                            },
+                            comparator,
+                            rhs: {
+                                value
+                            }
+                        }
+                    },
+                    filterId: field
+                };
+            }
+            return acc;
+        }, {});
+    }
     useEffect(() => {
         if (listContext.meta) {
+            const identifier = `promoted-filters-queryable-${uniqueId}`;
             fetchDataFromServer();
             setTimeout(() => {
                 PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, data => {
@@ -472,38 +545,42 @@ export default function ListView(props) {
                     filters.current = {};
                     processFilterClear();
                 }, `dashboard-component-${'id'}`, false, getPConnect().getContextName());
+                PCore.getPubSubUtils().subscribe(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, data => {
+                    showRecords = data.showRecords;
+                    const filterData = prepareFilters(data);
+                    processFilterChange(filterData);
+                }, identifier);
             }, 0);
             return function cleanupSubscriptions() {
                 PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, `dashboard-component-${'id'}`, getPConnect().getContextName());
                 PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL, `dashboard-component-${'id'}`, getPConnect().getContextName());
+                PCore.getPubSubUtils().unsubscribe(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, identifier);
             };
         }
     }, [listContext]);
     function searchFilter(value, rows) {
+        const cols = arColumns.map(ele => {
+            return ele.id;
+        });
         function filterArray(el) {
-            const bReturn = false;
-            for (const key of Object.keys(el)) {
-                // only search columsn that are displayed (pzInsKey and pxRefObjectClass are added and may or may not be displayed)
-                if (myDisplayColumnList.includes(key)) {
-                    let myVal = el[key];
-                    if (myVal !== null) {
-                        if (typeof myVal !== 'string') {
-                            myVal = myVal.toString();
-                        }
-                        if (myVal.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
-                            return true;
-                        }
+            return Object.keys(el).some(key => {
+                // only search columns that are displayed (pzInsKey and pxRefObjectClass are added and may or may not be displayed)
+                if (cols.includes(key)) {
+                    const myVal = el[key];
+                    if (myVal !== null && typeof myVal !== 'undefined') {
+                        const strVal = String(myVal); // Ensure myVal is a string
+                        return strVal.toLowerCase().includes(value.toLowerCase());
                     }
                 }
-            }
-            return bReturn;
+                return false;
+            });
         }
         rows = rows.filter(filterArray);
         return rows;
     }
     function _onSearch(event) {
         const searchValue = event.target.value;
-        const filteredRows = searchFilter(searchValue, myRows.slice());
+        const filteredRows = searchFilter(searchValue, rowsData?.slice());
         setRows(filteredRows);
     }
     function showToast(message) {
@@ -519,7 +596,6 @@ export default function ListView(props) {
         const options = { containerName: sTarget, channelName: '' };
         thePConn
             .getActionsApi()
-            // @ts-ignore
             .openAssignment(pzInsKey, pxRefObjectClass, options)
             .then(() => {
             // console.log("openAssignment successful");
@@ -720,7 +796,6 @@ export default function ListView(props) {
                 pzInsKey = row[`${associationCategory}:pzInsKey`];
             }
             if (column.isAssignmentLink) {
-                // @ts-ignore
                 thePConn.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
                     containerName: 'primary',
                     channelName: ''
@@ -819,16 +894,17 @@ export default function ListView(props) {
                                                 return (_jsxs(TableCell, { className: classes.cell, sortDirection: orderBy === column.id ? order : false, children: [_jsxs(TableSortLabel, { active: orderBy === column.id, direction: orderBy === column.id ? order : 'asc', onClick: createSortHandler(column.id), children: [column.label, _showFilteredIcon(column.id) && _jsx(FilterListIcon, { className: classes.filteredIcon }), orderBy === column.id ? (_jsx("span", { className: classes.visuallyHidden, children: order === 'desc' ? 'sorted descending' : 'sorted ascending' })) : null] }), _jsx(MoreIcon, { className: classes.moreIcon, onClick: event => {
                                                                 _menuClick(event, column.id, column.type, column.label);
                                                             } })] }, column.id));
-                                            }) }) }), _jsx(TableBody, { children: stableSort(arRows, getComparator(order, orderBy))
-                                            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                                            .map(row => {
-                                            return (_jsx(TableRow, { children: arColumns.map(column => {
-                                                    const value = row[column.id];
-                                                    return (_jsx(TableCell, { align: column.align, className: classes.cell, children: _showButton(column.id, row) || column.displayAsLink ? (_jsx(Link, { component: 'button', onClick: () => {
-                                                                _listViewClick(row, column);
-                                                            }, children: column.format && typeof value === 'number' ? column.format(value) : value })) : (_jsx(_Fragment, { children: column.format && typeof value === 'number' ? column.format(value) : value || '---' })) }, column.id));
-                                                }) }, row.pxRefObjectInsName || row.pyID));
-                                        }) })] }) })) : (_jsxs(TableContainer, { id: 'list-view', children: [_jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && _jsx(TableCell, {}), arColumns.map(column => {
+                                            }) }) }), _jsx(TableBody, { children: arRows &&
+                                            stableSort(arRows, getComparator(order, orderBy))
+                                                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                                                .map(row => {
+                                                return (_jsx(TableRow, { children: arColumns.map(column => {
+                                                        const value = row[column.id];
+                                                        return (_jsx(TableCell, { align: column.align, className: classes.cell, children: _showButton(column.id, row) || column.displayAsLink ? (_jsx(Link, { component: 'button', onClick: () => {
+                                                                    _listViewClick(row, column);
+                                                                }, underline: 'hover', children: column.format && typeof value === 'number' ? column.format(value) : value })) : (_jsx(_Fragment, { children: column.format && typeof value === 'number' ? column.format(value) : value || '---' })) }, column.id));
+                                                    }) }, row.pxRefObjectInsName || row.pyID));
+                                            }) })] }) })) : (_jsxs(TableContainer, { id: 'list-view', children: [_jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && _jsx(TableCell, {}), arColumns.map(column => {
                                                         return (_jsx(TableCell, { className: classes.cell, sortDirection: orderBy === column.id ? order : false, children: _jsxs(TableSortLabel, { active: orderBy === column.id, direction: orderBy === column.id ? order : 'asc', onClick: createSortHandler(column.id), children: [column.label, orderBy === column.id ? (_jsx("span", { className: classes.visuallyHidden, children: order === 'desc' ? 'sorted descending' : 'sorted ascending' })) : null] }) }, column.id));
                                                     })] }) }), _jsx(TableBody, { children: arRows &&
                                                 arRows.length > 0 &&
@@ -839,6 +915,6 @@ export default function ListView(props) {
                                                                 const value = row[column.id];
                                                                 return (_jsx(TableCell, { className: classes.cell, align: column.align, children: processColumnValue(column, value) }, column.id));
                                                             })] }, row[rowID]));
-                                                }) })] }), arRows && arRows.length === 0 && _jsx("div", { className: 'no-records', children: "No records found." })] })) }), arRows && arRows.length > 0 && (_jsx(TablePagination, { id: 'pagination', rowsPerPageOptions: [10, 25, 100], component: 'div', count: arRows.length, rowsPerPage: rowsPerPage, page: page, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage }))] })), _jsxs(Menu, { id: 'simple-menu', anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: _menuClose, children: [_jsxs(MenuItem, { onClick: _filterMenu, children: [_jsx(FilterListIcon, {}), " Filter"] }), _jsxs(MenuItem, { onClick: _groupMenu, children: [_jsx(SubjectIcon, {}), " Group"] })] }), _jsxs(Dialog, { open: open, onClose: _closeDialog, "aria-labelledby": 'form-dialog-title', children: [_jsxs(DialogTitle, { id: 'form-dialog-title', children: ["Filter: ", filterBy] }), _jsx(DialogContent, { children: containsDateOrTime ? (_jsxs(_Fragment, { children: [_jsxs(Select, { value: displayDialogDateFilter, onChange: _dialogDateFilter, fullWidth: true, children: [_jsx(MenuItem, { value: 'notequal', children: "is not equal to" }), _jsx(MenuItem, { value: 'after', children: "after" }), _jsx(MenuItem, { value: 'before', children: "before" }), _jsx(MenuItem, { value: 'null', children: "is null" }), _jsx(MenuItem, { value: 'notnull', children: "is not null" })] }), filterType === 'Date' && (_jsx(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'date', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })), filterType === 'DateTime' && (_jsx(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'datetime-local', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })), filterType === 'Time' && (_jsx(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'time', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Select, { fullWidth: true, onChange: _dialogContainsFilter, value: displayDialogContainsFilter, children: [_jsx(MenuItem, { value: 'contains', children: "Contains" }), _jsx(MenuItem, { value: 'equals', children: "Equals" }), _jsx(MenuItem, { value: 'startswith', children: "Starts with" })] }), _jsx(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'text', fullWidth: true, value: displayDialogContainsValue, onChange: _dialogContainsValue })] })) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: _closeDialog, color: 'secondary', children: "Cancel" }), _jsx(Button, { onClick: _submitFilter, color: 'primary', children: "Submit" })] })] }), _jsx(Snackbar, { open: showSnackbar, autoHideDuration: 3000, onClose: handleSnackbarClose, message: snackbarMessage, action: _jsx(IconButton, { size: 'small', "aria-label": 'close', color: 'inherit', onClick: handleSnackbarClose, children: _jsx(CloseIcon, { fontSize: 'small' }) }) })] }));
+                                                }) })] }), (!arRows || arRows.length === 0) && (_jsx("div", { className: 'no-records', children: getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }))] })) }), arRows && arRows.length > 0 && (_jsx(TablePagination, { id: 'pagination', rowsPerPageOptions: [10, 25, 100], component: 'div', count: arRows.length, rowsPerPage: rowsPerPage, page: page, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage }))] })), _jsxs(Menu, { id: 'simple-menu', anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: _menuClose, children: [_jsxs(MenuItem, { onClick: _filterMenu, children: [_jsx(FilterListIcon, {}), " Filter"] }), _jsxs(MenuItem, { onClick: _groupMenu, children: [_jsx(SubjectIcon, {}), " Group"] })] }), _jsxs(Dialog, { open: open, onClose: _closeDialog, "aria-labelledby": 'form-dialog-title', children: [_jsxs(DialogTitle, { id: 'form-dialog-title', children: ["Filter: ", filterBy] }), _jsx(DialogContent, { children: containsDateOrTime ? (_jsxs(_Fragment, { children: [_jsxs(Select, { variant: 'standard', value: displayDialogDateFilter, onChange: _dialogDateFilter, fullWidth: true, children: [_jsx(MenuItem, { value: 'notequal', children: "is not equal to" }), _jsx(MenuItem, { value: 'after', children: "after" }), _jsx(MenuItem, { value: 'before', children: "before" }), _jsx(MenuItem, { value: 'null', children: "is null" }), _jsx(MenuItem, { value: 'notnull', children: "is not null" })] }), filterType === 'Date' && (_jsx(TextField, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'date', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })), filterType === 'DateTime' && (_jsx(TextField, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'datetime-local', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })), filterType === 'Time' && (_jsx(TextField, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'time', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Select, { variant: 'standard', fullWidth: true, onChange: _dialogContainsFilter, value: displayDialogContainsFilter, children: [_jsx(MenuItem, { value: 'contains', children: "Contains" }), _jsx(MenuItem, { value: 'equals', children: "Equals" }), _jsx(MenuItem, { value: 'startswith', children: "Starts with" })] }), _jsx(TextField, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'text', fullWidth: true, value: displayDialogContainsValue, onChange: _dialogContainsValue })] })) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: _closeDialog, color: 'secondary', children: "Cancel" }), _jsx(Button, { onClick: _submitFilter, color: 'primary', children: "Submit" })] })] }), _jsx(Snackbar, { open: showSnackbar, autoHideDuration: 3000, onClose: handleSnackbarClose, message: snackbarMessage, action: _jsx(IconButton, { size: 'small', "aria-label": 'close', color: 'inherit', onClick: handleSnackbarClose, children: _jsx(CloseIcon, { fontSize: 'small' }) }) })] }));
 }
 //# sourceMappingURL=ListView.js.map