@pega/lists-react 9.25.1-3 → 9.25.1-4

package/lib/Core/Utils/fetchRowActions.d.ts

@@ -0,0 +1,16 @@
+import type { Action } from '@pega/cosmos-react-core';
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+type RowContext = ReturnType<RsCoreTypes.Row['getContext']>;
+interface FetchRowActionsParams {
+    getExecutionContext?: () => RowContext | undefined;
+    meta: RsCoreTypes.Meta;
+    translate: (key: string) => string;
+}
+export interface HydratedRowAction extends Action {
+    primary: string;
+    onClick: () => void;
+}
+/** Fetches configured, dynamic, and static menu actions for a row. */
+export default function fetchRowActions({ getExecutionContext, meta, translate }: FetchRowActionsParams): Promise<HydratedRowAction[]>;
+export {};
+//# sourceMappingURL=fetchRowActions.d.ts.map

package/lib/Core/Utils/fetchRowActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetchRowActions.d.ts","sourceRoot":"","sources":["../../../Core/Utils/fetchRowActions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAGlE,KAAK,UAAU,GAAG,UAAU,CAAC,WAAW,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC;AAE5D,UAAU,qBAAqB;IAC7B,mBAAmB,CAAC,EAAE,MAAM,UAAU,GAAG,SAAS,CAAC;IACnD,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,iBAAkB,SAAQ,MAAM;IAC/C,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA6CD,sEAAsE;AACtE,wBAA8B,eAAe,CAAC,EAC5C,mBAAmB,EACnB,IAAI,EACJ,SAAS,EACV,EAAE,qBAAqB,GAAG,OAAO,CAAC,iBAAiB,EAAE,CAAC,CA2BtD"}

package/lib/Core/Utils/fetchRowActions.js

@@ -0,0 +1,49 @@
+function hydrateActions(actions, rowContext, refreshRow) {
+    return actions.map(action => ({
+        ...action,
+        primary: action.text,
+        onClick: () => action.onClick(rowContext, refreshRow)
+    }));
+}
+function isVisibleInMenu(actionConfig, rowContext) {
+    return (!!actionConfig &&
+        typeof actionConfig === 'object' &&
+        actionConfig.placement === 'menu' &&
+        actionConfig.isVisible?.(rowContext) === true &&
+        typeof actionConfig.onClick === 'function');
+}
+function getConfigActions(meta, rowContext, refreshRow, translate) {
+    const actions = [];
+    if (isVisibleInMenu(meta.editing, rowContext)) {
+        actions.push({ text: translate('Edit'), id: 'edit', onClick: meta.editing.onClick });
+    }
+    if (isVisibleInMenu(meta.deleting, rowContext)) {
+        actions.push({ text: translate('Delete'), id: 'delete', onClick: meta.deleting.onClick });
+    }
+    return hydrateActions(actions, rowContext, refreshRow);
+}
+/** Fetches configured, dynamic, and static menu actions for a row. */
+export default async function fetchRowActions({ getExecutionContext, meta, translate }) {
+    const executionContext = getExecutionContext?.();
+    if (!executionContext)
+        return [];
+    const rowContext = executionContext.getValue();
+    const refreshRow = () => executionContext.refreshRow();
+    const configActions = getConfigActions(meta, rowContext, refreshRow, translate);
+    const staticActions = hydrateActions(meta.rowActions ?? [], rowContext, refreshRow);
+    try {
+        const dynamicActions = await executionContext.getRowActionDetails(rowContext);
+        const latestContext = getExecutionContext?.() ?? executionContext;
+        const latestRowContext = latestContext.getValue();
+        const refreshLatestRow = () => latestContext.refreshRow();
+        return [
+            ...configActions,
+            ...hydrateActions(Array.isArray(dynamicActions) ? dynamicActions : [], latestRowContext, refreshLatestRow),
+            ...staticActions
+        ];
+    }
+    catch {
+        return [...configActions, ...staticActions];
+    }
+}
+//# sourceMappingURL=fetchRowActions.js.map

package/lib/Core/Utils/fetchRowActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetchRowActions.js","sourceRoot":"","sources":["../../../Core/Utils/fetchRowActions.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Action } from '@pega/cosmos-react-core';\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { RowAction } from 'pega-repeating-structures-core/lib/types/Meta.types';\n\ntype RowContext = ReturnType<RsCoreTypes.Row['getContext']>;\n\ninterface FetchRowActionsParams {\n  getExecutionContext?: () => RowContext | undefined;\n  meta: RsCoreTypes.Meta;\n  translate: (key: string) => string;\n}\n\nexport interface HydratedRowAction extends Action {\n  primary: string;\n  onClick: () => void;\n}\n\nfunction hydrateActions(\n  actions: RowAction[],\n  rowContext: RsCoreTypes.RowData,\n  refreshRow: () => Promise<void>\n): HydratedRowAction[] {\n  return actions.map(action => ({\n    ...action,\n    primary: action.text,\n    onClick: () => action.onClick(rowContext, refreshRow)\n  }));\n}\n\nfunction isVisibleInMenu(\n  actionConfig: RsCoreTypes.Meta['editing'] | RsCoreTypes.Meta['deleting'],\n  rowContext: RsCoreTypes.RowData\n): actionConfig is RsCoreTypes.ActionConfig {\n  return (\n    !!actionConfig &&\n    typeof actionConfig === 'object' &&\n    actionConfig.placement === 'menu' &&\n    actionConfig.isVisible?.(rowContext) === true &&\n    typeof actionConfig.onClick === 'function'\n  );\n}\n\nfunction getConfigActions(\n  meta: RsCoreTypes.Meta,\n  rowContext: RsCoreTypes.RowData,\n  refreshRow: () => Promise<void>,\n  translate: FetchRowActionsParams['translate']\n): HydratedRowAction[] {\n  const actions: RowAction[] = [];\n\n  if (isVisibleInMenu(meta.editing, rowContext)) {\n    actions.push({ text: translate('Edit'), id: 'edit', onClick: meta.editing.onClick });\n  }\n  if (isVisibleInMenu(meta.deleting, rowContext)) {\n    actions.push({ text: translate('Delete'), id: 'delete', onClick: meta.deleting.onClick });\n  }\n\n  return hydrateActions(actions, rowContext, refreshRow);\n}\n\n/** Fetches configured, dynamic, and static menu actions for a row. */\nexport default async function fetchRowActions({\n  getExecutionContext,\n  meta,\n  translate\n}: FetchRowActionsParams): Promise<HydratedRowAction[]> {\n  const executionContext = getExecutionContext?.();\n  if (!executionContext) return [];\n\n  const rowContext = executionContext.getValue();\n  const refreshRow = () => executionContext.refreshRow();\n  const configActions = getConfigActions(meta, rowContext, refreshRow, translate);\n  const staticActions = hydrateActions(meta.rowActions ?? [], rowContext, refreshRow);\n\n  try {\n    const dynamicActions = await executionContext.getRowActionDetails(rowContext);\n    const latestContext = getExecutionContext?.() ?? executionContext;\n    const latestRowContext = latestContext.getValue();\n    const refreshLatestRow = () => latestContext.refreshRow();\n\n    return [\n      ...configActions,\n      ...hydrateActions(\n        Array.isArray(dynamicActions) ? dynamicActions : [],\n        latestRowContext,\n        refreshLatestRow\n      ),\n      ...staticActions\n    ];\n  } catch {\n    return [...configActions, ...staticActions];\n  }\n}\n"]}

package/lib/Core/Utils/styles.d.ts

@@ -1,4 +1,13 @@
 import type { RsCoreTypes } from 'pega-repeating-structures-core';
+export declare function getHeightStyles(view: RsCoreTypes.View, isFullscreen: boolean): {
+    height?: undefined;
+    minHeight?: undefined;
+    maxHeight?: undefined;
+} | {
+    height: string;
+    minHeight: string;
+    maxHeight: string;
+};
 export declare const generateRSHeightStyles: ({ view, isFullscreen }: {
     view: RsCoreTypes.View;
     isFullscreen: boolean;

package/lib/Core/Utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../Core/Utils/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAgElE,eAAO,MAAM,sBAAsB,GAAI,wBAGpC;IACD,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;CACvB,gDAUA,CAAC;AAGF,eAAO,MAAM,mCAAmC,mDAM/C,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../Core/Utils/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAKlE,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,YAAY,EAAE,OAAO;;;;;;;;EA4D5E;AAGD,eAAO,MAAM,sBAAsB,GAAI,wBAGpC;IACD,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;CACvB,gDAUA,CAAC;AAGF,eAAO,MAAM,mCAAmC,mDAM/C,CAAC"}

package/lib/Core/Utils/styles.js

@@ -1,7 +1,7 @@
 import { css } from 'styled-components';
 const DEFAULT_READONLY_TABLE_HEIGHT = '600px';
 const MAX_HEIGHT_MIN_VALUE_FALLBACK = '25rem';
-function getHeightStyles(view, isFullscreen) {
+export function getHeightStyles(view, isFullscreen) {
     if (!view)
         return {};
     const { viewHeight, meta: { basicMode, height: { height, minHeight, maxHeight, maxHeightMinValueVariable, deltaAdjustment = 0 } = {} } } = view;
@@ -12,7 +12,8 @@ function getHeightStyles(view, isFullscreen) {
     // Fullscreen mode overrides other height calculations
     if (isFullscreen) {
         return {
-            height: 'auto',
+            // Stretch the fullscreen table using --content-height-in-view, which Fullscreen provides after portaling the table.
+            height: `calc(var(--content-height-in-view) - ${cardPadding})`,
             minHeight: 'auto',
             maxHeight: `calc(max(100dvh, ${maxHeightMinimumValue}) - ${cardPadding})`
         };
@@ -34,7 +35,11 @@ function getHeightStyles(view, isFullscreen) {
     if (basicMode) {
         calculatedHeight = 'auto';
     }
-    if (height) {
+    if (typeof height === 'string' && height.startsWith('--')) {
+        // CSS variable: explicit height takes precedence over basicMode.
+        calculatedHeight = `calc(var(${height}) - ${deltaAdjustment}px - ${cardPadding})`;
+    }
+    else if (typeof height === 'number') {
         calculatedHeight = `calc(${height}px - ${deltaAdjustment}px - ${cardPadding})`;
     }
     if (viewHeight) {

package/lib/Core/Utils/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../Core/Utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIxC,MAAM,6BAA6B,GAAG,OAAO,CAAC;AAC9C,MAAM,6BAA6B,GAAG,OAAO,CAAC;AAE9C,SAAS,eAAe,CAAC,IAAsB,EAAE,YAAqB;IACpE,IAAI,CAAC,IAAI;QAAE,OAAO,EAAE,CAAC;IAErB,MAAM,EACJ,UAAU,EACV,IAAI,EAAE,EACJ,SAAS,EACT,MAAM,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,yBAAyB,EAAE,eAAe,GAAG,CAAC,EAAE,GAAG,EAAE,EAC9F,EACF,GAAG,IAAI,CAAC;IAET,MAAM,qBAAqB,GAAG,yBAAyB;QACrD,CAAC,CAAC,OAAO,yBAAyB,KAAK,6BAA6B,GAAG;QACvE,CAAC,CAAC,6BAA6B,CAAC;IAElC,MAAM,WAAW,GAAG,6BAA6B,CAAC;IAElD,sDAAsD;IACtD,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO;YACL,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,MAAM;YACjB,SAAS,EAAE,oBAAoB,qBAAqB,OAAO,WAAW,GAAG;SAC1E,CAAC;IACJ,CAAC;IAED,0BAA0B;IAC1B,IAAI,mBAAmB,GAAG,MAAM,CAAC;IACjC,IAAI,SAAS,EAAE,CAAC;QACd,mBAAmB,GAAG,6BAA6B,CAAC;IACtD,CAAC;IACD,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;QAClC,mBAAmB,GAAG,YAAY,SAAS,OAAO,qBAAqB,OAAO,eAAe,QAAQ,WAAW,GAAG,CAAC;IACtH,CAAC;IACD,IAAI,OAAO,SAAS,KAAK,QAAQ,IAAI,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;QAChE,mBAAmB,GAAG,gBAAgB,SAAS,KAAK,6BAA6B,MAAM,qBAAqB,OAAO,eAAe,QAAQ,WAAW,GAAG,CAAC;IAC3J,CAAC;IAED,sBAAsB;IACtB,yHAAyH;IACzH,IAAI,gBAAgB,GAAG,mBAAmB,CAAC;IAC3C,IAAI,SAAS,EAAE,CAAC;QACd,gBAAgB,GAAG,MAAM,CAAC;IAC5B,CAAC;IACD,IAAI,MAAM,EAAE,CAAC;QACX,gBAAgB,GAAG,QAAQ,MAAM,QAAQ,eAAe,QAAQ,WAAW,GAAG,CAAC;IACjF,CAAC;IACD,IAAI,UAAU,EAAE,CAAC;QACf,gBAAgB,GAAG,QAAQ,UAAU,QAAQ,eAAe,QAAQ,WAAW,GAAG,CAAC;IACrF,CAAC;IAED,OAAO;QACL,MAAM,EAAE,gBAAgB;QACxB,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC,CAAC,MAAM;QAChD,SAAS,EAAE,mBAAmB;KAC/B,CAAC;AACJ,CAAC;AAED,8CAA8C;AAC9C,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EACJ,YAAY,EAIb,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;IAE7E,OAAO,GAAG,CAAA;;;cAGE,MAAM;kBACF,SAAS;kBACT,SAAS;GACxB,CAAC;AACJ,CAAC,CAAC;AAEF,kIAAkI;AAClI,MAAM,CAAC,MAAM,mCAAmC,GAAG,GAAG,EAAE;IACtD,OAAO,GAAG,CAAA;;;;GAIT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { css } from 'styled-components';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nconst DEFAULT_READONLY_TABLE_HEIGHT = '600px';\nconst MAX_HEIGHT_MIN_VALUE_FALLBACK = '25rem';\n\nfunction getHeightStyles(view: RsCoreTypes.View, isFullscreen: boolean) {\n  if (!view) return {};\n\n  const {\n    viewHeight,\n    meta: {\n      basicMode,\n      height: { height, minHeight, maxHeight, maxHeightMinValueVariable, deltaAdjustment = 0 } = {}\n    }\n  } = view;\n\n  const maxHeightMinimumValue = maxHeightMinValueVariable\n    ? `var(${maxHeightMinValueVariable}, ${MAX_HEIGHT_MIN_VALUE_FALLBACK})`\n    : MAX_HEIGHT_MIN_VALUE_FALLBACK;\n\n  const cardPadding = 'var(--rs-card-padding, 0px)';\n\n  // Fullscreen mode overrides other height calculations\n  if (isFullscreen) {\n    return {\n      height: 'auto',\n      minHeight: 'auto',\n      maxHeight: `calc(max(100dvh, ${maxHeightMinimumValue}) - ${cardPadding})`\n    };\n  }\n\n  // Max-height calculations\n  let calculatedMaxHeight = 'none';\n  if (basicMode) {\n    calculatedMaxHeight = DEFAULT_READONLY_TABLE_HEIGHT;\n  }\n  if (typeof maxHeight === 'number') {\n    calculatedMaxHeight = `calc(max(${maxHeight}px, ${maxHeightMinimumValue}) - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n  if (typeof maxHeight === 'string' && maxHeight.startsWith('--')) {\n    calculatedMaxHeight = `calc(max(var(${maxHeight}, ${DEFAULT_READONLY_TABLE_HEIGHT}), ${maxHeightMinimumValue}) - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n\n  // Height calculations\n  // For landing pages stretch the repeating view to the max available height even though there might be less or no records\n  let calculatedHeight = calculatedMaxHeight;\n  if (basicMode) {\n    calculatedHeight = 'auto';\n  }\n  if (height) {\n    calculatedHeight = `calc(${height}px - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n  if (viewHeight) {\n    calculatedHeight = `calc(${viewHeight}px - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n\n  return {\n    height: calculatedHeight,\n    minHeight: minHeight ? `${minHeight}px` : 'auto',\n    maxHeight: calculatedMaxHeight\n  };\n}\n\n// Exposes styles to be set on the RS template\nexport const generateRSHeightStyles = ({\n  view,\n  isFullscreen\n}: {\n  view: RsCoreTypes.View;\n  isFullscreen: boolean;\n}) => {\n  const { height, minHeight, maxHeight } = getHeightStyles(view, isFullscreen);\n\n  return css`\n    display: flex;\n    flex-direction: column;\n    height: ${height};\n    min-height: ${minHeight};\n    max-height: ${maxHeight};\n  `;\n};\n\n// Exposes styles to be set on the container that contains the data records and need to be expanded and collapsed based on records\nexport const generateRSDataContainerHeightStyles = () => {\n  return css`\n    display: flex;\n    flex: 1 1 auto;\n    overflow: hidden;\n  `;\n};\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../Core/Utils/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from 'styled-components';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\n\nconst DEFAULT_READONLY_TABLE_HEIGHT = '600px';\nconst MAX_HEIGHT_MIN_VALUE_FALLBACK = '25rem';\n\nexport function getHeightStyles(view: RsCoreTypes.View, isFullscreen: boolean) {\n  if (!view) return {};\n\n  const {\n    viewHeight,\n    meta: {\n      basicMode,\n      height: { height, minHeight, maxHeight, maxHeightMinValueVariable, deltaAdjustment = 0 } = {}\n    }\n  } = view;\n\n  const maxHeightMinimumValue = maxHeightMinValueVariable\n    ? `var(${maxHeightMinValueVariable}, ${MAX_HEIGHT_MIN_VALUE_FALLBACK})`\n    : MAX_HEIGHT_MIN_VALUE_FALLBACK;\n\n  const cardPadding = 'var(--rs-card-padding, 0px)';\n\n  // Fullscreen mode overrides other height calculations\n  if (isFullscreen) {\n    return {\n      // Stretch the fullscreen table using --content-height-in-view, which Fullscreen provides after portaling the table.\n      height: `calc(var(--content-height-in-view) - ${cardPadding})`,\n      minHeight: 'auto',\n      maxHeight: `calc(max(100dvh, ${maxHeightMinimumValue}) - ${cardPadding})`\n    };\n  }\n\n  // Max-height calculations\n  let calculatedMaxHeight = 'none';\n  if (basicMode) {\n    calculatedMaxHeight = DEFAULT_READONLY_TABLE_HEIGHT;\n  }\n  if (typeof maxHeight === 'number') {\n    calculatedMaxHeight = `calc(max(${maxHeight}px, ${maxHeightMinimumValue}) - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n  if (typeof maxHeight === 'string' && maxHeight.startsWith('--')) {\n    calculatedMaxHeight = `calc(max(var(${maxHeight}, ${DEFAULT_READONLY_TABLE_HEIGHT}), ${maxHeightMinimumValue}) - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n\n  // Height calculations\n  // For landing pages stretch the repeating view to the max available height even though there might be less or no records\n  let calculatedHeight = calculatedMaxHeight;\n  if (basicMode) {\n    calculatedHeight = 'auto';\n  }\n  if (typeof height === 'string' && height.startsWith('--')) {\n    // CSS variable: explicit height takes precedence over basicMode.\n    calculatedHeight = `calc(var(${height}) - ${deltaAdjustment}px - ${cardPadding})`;\n  } else if (typeof height === 'number') {\n    calculatedHeight = `calc(${height}px - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n  if (viewHeight) {\n    calculatedHeight = `calc(${viewHeight}px - ${deltaAdjustment}px - ${cardPadding})`;\n  }\n\n  return {\n    height: calculatedHeight,\n    minHeight: minHeight ? `${minHeight}px` : 'auto',\n    maxHeight: calculatedMaxHeight\n  };\n}\n\n// Exposes styles to be set on the RS template\nexport const generateRSHeightStyles = ({\n  view,\n  isFullscreen\n}: {\n  view: RsCoreTypes.View;\n  isFullscreen: boolean;\n}) => {\n  const { height, minHeight, maxHeight } = getHeightStyles(view, isFullscreen);\n\n  return css`\n    display: flex;\n    flex-direction: column;\n    height: ${height};\n    min-height: ${minHeight};\n    max-height: ${maxHeight};\n  `;\n};\n\n// Exposes styles to be set on the container that contains the data records and need to be expanded and collapsed based on records\nexport const generateRSDataContainerHeightStyles = () => {\n  return css`\n    display: flex;\n    flex: 1 1 auto;\n    overflow: hidden;\n  `;\n};\n"]}

package/lib/Core/Views/Table/CellWrapper.d.ts

@@ -1,9 +1,10 @@
 export const CellIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
 declare const _default: import("react").MemoExoticComponent<typeof CellWrapper>;
 export default _default;
-declare function CellWrapper({ column, level }: {
+declare function CellWrapper({ column, level, onMasterDetailKeyDown }: {
     column: any;
     level?: number | undefined;
+    onMasterDetailKeyDown: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace CellWrapper {
     namespace propTypes {
@@ -11,6 +12,7 @@ declare namespace CellWrapper {
             [x: string]: any;
         }>;
         let level: PropTypes.Requireable<number>;
+        let onMasterDetailKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
 import PropTypes from 'prop-types';

package/lib/Core/Views/Table/CellWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellWrapper.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/CellWrapper.jsx"],"names":[],"mappings":"AAyCA,wbAkBG;;;AAEH;;;4CAyDC;;;;;;;;;sBAtHqB,YAAY"}
+{"version":3,"file":"CellWrapper.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/CellWrapper.jsx"],"names":[],"mappings":"AAyCA,wbAkBG;;;AAEH;;;;4CA0DC;;;;;;;;;;sBAvHqB,YAAY"}

package/lib/Core/Views/Table/CellWrapper.js

@@ -48,7 +48,7 @@ export const CellIcon = styled(Icon)(({ cellAlign }) => {
     }
   `;
 });
-function CellWrapper({ column, level = 0 }) {
+function CellWrapper({ column, level = 0, onMasterDetailKeyDown }) {
     const ref = useRef();
     const { field: { cellAlign, type: fieldType }, isCustomColumn, isLastColumn, isFirstVisualColumn, getCellStyleFormat } = column;
     const { classList, style: cellStyle, ...restProps } = column.getUIProps();
@@ -66,11 +66,12 @@ function CellWrapper({ column, level = 0 }) {
             'cell-first': isFirstVisualColumn,
             'cell-last-frozen': column.lastFrozen,
             'column-type-action': fieldType === FieldType.ACTION_FIELD_TYPE
-        }, !isCustomColumn && cellAlign && CELL_ALIGN_CLASSES[cellAlign]), style: cellStyles, ref: ref, tabIndex: -1, "data-style-format": styleFormatId, children: [_jsx(RenderingEngine, { style: renderingEngineStyles, highlighter: true, ...column.getRenderingEngineProps(), context: context }), cellIconProps && _jsx(CellIcon, { ...cellIconProps, cellAlign: cellAlign, set: 'budicon' }), styleFormatId && (_jsx(VisuallyHiddenText, { id: styleFormatId, children: `,${translate('state')}: ${styleFormatLabel},` }))] }));
+        }, !isCustomColumn && cellAlign && CELL_ALIGN_CLASSES[cellAlign]), style: cellStyles, ref: ref, tabIndex: -1, onKeyDownCapture: onMasterDetailKeyDown, "data-style-format": styleFormatId, children: [_jsx(RenderingEngine, { style: renderingEngineStyles, highlighter: true, ...column.getRenderingEngineProps(), context: context }), cellIconProps && _jsx(CellIcon, { ...cellIconProps, cellAlign: cellAlign, set: 'budicon' }), styleFormatId && (_jsx(VisuallyHiddenText, { id: styleFormatId, children: `,${translate('state')}: ${styleFormatLabel},` }))] }));
 }
 CellWrapper.propTypes = {
     column: PropTypes.objectOf(PropTypes.any),
-    level: PropTypes.number
+    level: PropTypes.number,
+    onMasterDetailKeyDown: PropTypes.func
 };
 export default memo(CellWrapper);
 //# sourceMappingURL=CellWrapper.js.map

package/lib/Core/Views/Table/CellWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellWrapper.js","sourceRoot":"","sources":["../../../../Core/Views/Table/CellWrapper.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { memo, useCallback, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { FieldType } from 'pega-repeating-structures-core';\nimport { Icon, VisuallyHiddenText } from '@pega/cosmos-react-core';\n\nimport { createClassName as cx } from '../../Utils';\nimport RenderingEngine from '../../Components/RenderingEngine/RenderCell';\nimport { CELL_ALIGN_CLASSES } from '../../constants';\nimport { hierarchicalgroupheaderleftdisplacement } from '../../Components/HierarchicalGroupRenderer';\nimport useTranslate from '../../Hooks/useTranslate';\n\nconst getStyles = (column, level, styleFormatConfig) => {\n  const {\n    isFirstDataColumn,\n    parent,\n    field: { idHash, cellAlign }\n  } = column;\n  const { backgroundColor, icon: cellIconProps, foregroundColor } = styleFormatConfig;\n\n  const cellStyles = {\n    left: `var(--col-left-${idHash})`,\n    order: `var(--col-order-${idHash})`,\n    width: `var(--col-width-${idHash})`,\n    ...(backgroundColor && { backgroundColor }),\n    ...(isFirstDataColumn && parent?.hierarchicalGroupEnabled && { paddingLeft: 0 })\n  };\n\n  const renderingEngineStyles = {\n    ...(isFirstDataColumn &&\n      parent?.hierarchicalGroupEnabled && {\n        paddingLeft: hierarchicalgroupheaderleftdisplacement(level)\n      }),\n    ...(cellIconProps && { order: cellAlign === 'right' ? 2 : 1 }),\n    ...(foregroundColor && { color: foregroundColor })\n  };\n\n  return { cellStyles, renderingEngineStyles };\n};\n\nexport const CellIcon = styled(Icon)(({ cellAlign }) => {\n  // icon size 12px\n  return css`\n    /*\n     * Icon styles sometimes fail to override correctly. Increasing specificity ensures consistent override behavior.\n     * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n     */\n    &&& {\n      height: 0.75rem;\n      width: 0.75rem;\n      min-width: 0.75rem;\n      min-height: 0.75rem;\n      margin-inline-end: ${cellAlign !== 'right' && '0.5rem'};\n      margin-inline-start: ${cellAlign === 'right' && '0.5rem'};\n      order: ${cellAlign === 'right' ? 1 : 2};\n      flex-shrink: 0;\n    }\n  `;\n});\n\nfunction CellWrapper({ column, level = 0 }) {\n  const ref = useRef();\n  const {\n    field: { cellAlign, type: fieldType },\n    isCustomColumn,\n    isLastColumn,\n    isFirstVisualColumn,\n    getCellStyleFormat\n  } = column;\n  const { classList, style: cellStyle, ...restProps } = column.getUIProps();\n  const {\n    config: styleFormatConfig = {},\n    label: styleFormatLabel,\n    id: styleFormatId\n  } = getCellStyleFormat() ?? {};\n  const { foregroundColor, icon: cellIconProps } = styleFormatConfig;\n  const context = {\n    getElement: () => ref.current,\n    getStyles: useCallback(() => ({ foregroundColor }), [foregroundColor])\n  };\n  const { cellStyles, renderingEngineStyles } = getStyles(column, level, styleFormatConfig);\n  const [translate] = useTranslate();\n\n  return (\n    <div\n      {...restProps}\n      className={cx(\n        'cell',\n        ...classList,\n        {\n          'cell-fixed': column.frozen,\n          'cell-last': isLastColumn,\n          'cell-first': isFirstVisualColumn,\n          'cell-last-frozen': column.lastFrozen,\n          'column-type-action': fieldType === FieldType.ACTION_FIELD_TYPE\n        },\n        !isCustomColumn && cellAlign && CELL_ALIGN_CLASSES[cellAlign]\n      )}\n      style={cellStyles}\n      ref={ref}\n      tabIndex={-1}\n      data-style-format={styleFormatId}\n    >\n      <RenderingEngine\n        style={renderingEngineStyles}\n        highlighter\n        {...column.getRenderingEngineProps()}\n        context={context}\n      />\n      {cellIconProps && <CellIcon {...cellIconProps} cellAlign={cellAlign} set='budicon' />}\n      {styleFormatId && (\n        <VisuallyHiddenText\n          id={styleFormatId}\n        >{`,${translate('state')}: ${styleFormatLabel},`}</VisuallyHiddenText>\n      )}\n    </div>\n  );\n}\n\nCellWrapper.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any),\n  level: PropTypes.number\n};\n\nexport default memo(CellWrapper);\n"]}
+{"version":3,"file":"CellWrapper.js","sourceRoot":"","sources":["../../../../Core/Views/Table/CellWrapper.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EAAE,eAAe,IAAI,EAAE,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,eAAe,MAAM,6CAA6C,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,uCAAuC,EAAE,MAAM,4CAA4C,CAAC;AACrG,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAEpD,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE;IACrD,MAAM,EACJ,iBAAiB,EACjB,MAAM,EACN,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC7B,GAAG,MAAM,CAAC;IACX,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,iBAAiB,CAAC;IAEpF,MAAM,UAAU,GAAG;QACjB,IAAI,EAAE,kBAAkB,MAAM,GAAG;QACjC,KAAK,EAAE,mBAAmB,MAAM,GAAG;QACnC,KAAK,EAAE,mBAAmB,MAAM,GAAG;QACnC,GAAG,CAAC,eAAe,IAAI,EAAE,eAAe,EAAE,CAAC;QAC3C,GAAG,CAAC,iBAAiB,IAAI,MAAM,EAAE,wBAAwB,IAAI,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC;KACjF,CAAC;IAEF,MAAM,qBAAqB,GAAG;QAC5B,GAAG,CAAC,iBAAiB;YACnB,MAAM,EAAE,wBAAwB,IAAI;YAClC,WAAW,EAAE,uCAAuC,CAAC,KAAK,CAAC;SAC5D,CAAC;QACJ,GAAG,CAAC,aAAa,IAAI,EAAE,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9D,GAAG,CAAC,eAAe,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,CAAC;KACnD,CAAC;IAEF,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACrD,iBAAiB;IACjB,OAAO,GAAG,CAAA;;;;;;;;;;2BAUe,SAAS,KAAK,OAAO,IAAI,QAAQ;6BAC/B,SAAS,KAAK,OAAO,IAAI,QAAQ;eAC/C,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;GAGzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,qBAAqB,EAAE;IAC/D,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EACrC,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EACnB,GAAG,MAAM,CAAC;IACX,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;IAC1E,MAAM,EACJ,MAAM,EAAE,iBAAiB,GAAG,EAAE,EAC9B,KAAK,EAAE,gBAAgB,EACvB,EAAE,EAAE,aAAa,EAClB,GAAG,kBAAkB,EAAE,IAAI,EAAE,CAAC;IAC/B,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,iBAAiB,CAAC;IACnE,MAAM,OAAO,GAAG;QACd,UAAU,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,OAAO;QAC7B,SAAS,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;KACvE,CAAC;IACF,MAAM,EAAE,UAAU,EAAE,qBAAqB,EAAE,GAAG,SAAS,CAAC,MAAM,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC;IAC1F,MAAM,CAAC,SAAS,CAAC,GAAG,YAAY,EAAE,CAAC;IAEnC,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,EAAE,CACX,MAAM,EACN,GAAG,SAAS,EACZ;YACE,YAAY,EAAE,MAAM,CAAC,MAAM;YAC3B,WAAW,EAAE,YAAY;YACzB,YAAY,EAAE,mBAAmB;YACjC,kBAAkB,EAAE,MAAM,CAAC,UAAU;YACrC,oBAAoB,EAAE,SAAS,KAAK,SAAS,CAAC,iBAAiB;SAChE,EACD,CAAC,cAAc,IAAI,SAAS,IAAI,kBAAkB,CAAC,SAAS,CAAC,CAC9D,EACD,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,CAAC,EACZ,gBAAgB,EAAE,qBAAqB,uBACpB,aAAa,aAEhC,KAAC,eAAe,IACd,KAAK,EAAE,qBAAqB,EAC5B,WAAW,WACP,MAAM,CAAC,uBAAuB,EAAE,EACpC,OAAO,EAAE,OAAO,GAChB,EACD,aAAa,IAAI,KAAC,QAAQ,OAAK,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAC,SAAS,GAAG,EACpF,aAAa,IAAI,CAChB,KAAC,kBAAkB,IACjB,EAAE,EAAE,aAAa,YACjB,IAAI,SAAS,CAAC,OAAO,CAAC,KAAK,gBAAgB,GAAG,GAAsB,CACvE,IACG,CACP,CAAC;AACJ,CAAC;AAED,WAAW,CAAC,SAAS,GAAG;IACtB,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACzC,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,qBAAqB,EAAE,SAAS,CAAC,IAAI;CACtC,CAAC;AAEF,eAAe,IAAI,CAAC,WAAW,CAAC,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { memo, useCallback, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { FieldType } from 'pega-repeating-structures-core';\nimport { Icon, VisuallyHiddenText } from '@pega/cosmos-react-core';\n\nimport { createClassName as cx } from '../../Utils';\nimport RenderingEngine from '../../Components/RenderingEngine/RenderCell';\nimport { CELL_ALIGN_CLASSES } from '../../constants';\nimport { hierarchicalgroupheaderleftdisplacement } from '../../Components/HierarchicalGroupRenderer';\nimport useTranslate from '../../Hooks/useTranslate';\n\nconst getStyles = (column, level, styleFormatConfig) => {\n  const {\n    isFirstDataColumn,\n    parent,\n    field: { idHash, cellAlign }\n  } = column;\n  const { backgroundColor, icon: cellIconProps, foregroundColor } = styleFormatConfig;\n\n  const cellStyles = {\n    left: `var(--col-left-${idHash})`,\n    order: `var(--col-order-${idHash})`,\n    width: `var(--col-width-${idHash})`,\n    ...(backgroundColor && { backgroundColor }),\n    ...(isFirstDataColumn && parent?.hierarchicalGroupEnabled && { paddingLeft: 0 })\n  };\n\n  const renderingEngineStyles = {\n    ...(isFirstDataColumn &&\n      parent?.hierarchicalGroupEnabled && {\n        paddingLeft: hierarchicalgroupheaderleftdisplacement(level)\n      }),\n    ...(cellIconProps && { order: cellAlign === 'right' ? 2 : 1 }),\n    ...(foregroundColor && { color: foregroundColor })\n  };\n\n  return { cellStyles, renderingEngineStyles };\n};\n\nexport const CellIcon = styled(Icon)(({ cellAlign }) => {\n  // icon size 12px\n  return css`\n    /*\n     * Icon styles sometimes fail to override correctly. Increasing specificity ensures consistent override behavior.\n     * https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity\n     */\n    &&& {\n      height: 0.75rem;\n      width: 0.75rem;\n      min-width: 0.75rem;\n      min-height: 0.75rem;\n      margin-inline-end: ${cellAlign !== 'right' && '0.5rem'};\n      margin-inline-start: ${cellAlign === 'right' && '0.5rem'};\n      order: ${cellAlign === 'right' ? 1 : 2};\n      flex-shrink: 0;\n    }\n  `;\n});\n\nfunction CellWrapper({ column, level = 0, onMasterDetailKeyDown }) {\n  const ref = useRef();\n  const {\n    field: { cellAlign, type: fieldType },\n    isCustomColumn,\n    isLastColumn,\n    isFirstVisualColumn,\n    getCellStyleFormat\n  } = column;\n  const { classList, style: cellStyle, ...restProps } = column.getUIProps();\n  const {\n    config: styleFormatConfig = {},\n    label: styleFormatLabel,\n    id: styleFormatId\n  } = getCellStyleFormat() ?? {};\n  const { foregroundColor, icon: cellIconProps } = styleFormatConfig;\n  const context = {\n    getElement: () => ref.current,\n    getStyles: useCallback(() => ({ foregroundColor }), [foregroundColor])\n  };\n  const { cellStyles, renderingEngineStyles } = getStyles(column, level, styleFormatConfig);\n  const [translate] = useTranslate();\n\n  return (\n    <div\n      {...restProps}\n      className={cx(\n        'cell',\n        ...classList,\n        {\n          'cell-fixed': column.frozen,\n          'cell-last': isLastColumn,\n          'cell-first': isFirstVisualColumn,\n          'cell-last-frozen': column.lastFrozen,\n          'column-type-action': fieldType === FieldType.ACTION_FIELD_TYPE\n        },\n        !isCustomColumn && cellAlign && CELL_ALIGN_CLASSES[cellAlign]\n      )}\n      style={cellStyles}\n      ref={ref}\n      tabIndex={-1}\n      onKeyDownCapture={onMasterDetailKeyDown}\n      data-style-format={styleFormatId}\n    >\n      <RenderingEngine\n        style={renderingEngineStyles}\n        highlighter\n        {...column.getRenderingEngineProps()}\n        context={context}\n      />\n      {cellIconProps && <CellIcon {...cellIconProps} cellAlign={cellAlign} set='budicon' />}\n      {styleFormatId && (\n        <VisuallyHiddenText\n          id={styleFormatId}\n        >{`,${translate('state')}: ${styleFormatLabel},`}</VisuallyHiddenText>\n      )}\n    </div>\n  );\n}\n\nCellWrapper.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any),\n  level: PropTypes.number,\n  onMasterDetailKeyDown: PropTypes.func\n};\n\nexport default memo(CellWrapper);\n"]}

package/lib/Core/Views/Table/Row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/Row.jsx"],"names":[],"mappings":";;AAKA;;;;;4CAcC;;;;;;;;;;;sBAnBqB,YAAY"}
+{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/Row.jsx"],"names":[],"mappings":";;AAYA;;;;;4CAoCC;;;;;;;;;;;sBAhDqB,YAAY"}

package/lib/Core/Views/Table/Row.js

@@ -1,17 +1,31 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import { memo } from 'react';
+import { createClassName as cx } from '../../Utils';
+import { MASTER_DETAIL_INDICATOR_CLASS, MASTER_DETAIL_PREVIEW_HIGHLIGHT_CLASS } from '../../constants';
 import CellWrapper from './CellWrapper';
+import useMasterDetailRow from './useMasterDetailRow';
 function Row({ row, columns, level = 0, dataIndex }) {
-    const uiProps = { ...row.getUIProps(), ...(dataIndex >= 0 ? { 'data-index': dataIndex } : {}) };
-    return (_jsx("div", { ...uiProps, children: [...columns]
-            .sort((colA, colB) => colA.order - colB.order)
-            .map(column => {
-            column.setExecutionContext(row);
-            if (column.hidden)
-                return null;
-            return _jsx(CellWrapper, { row: row, column: column, level: level }, column.field.id);
-        }) }));
+    const rowUiProps = row.getUIProps();
+    const { isMasterDetailEnabled, onRowClick, onCellKeyDownCapture, rowElementRef } = useMasterDetailRow(row);
+    const isPreviewHighlighted = !!row.masterDetailActive;
+    const uiProps = {
+        ...rowUiProps,
+        ...(dataIndex >= 0 ? { 'data-index': dataIndex } : {}),
+        className: cx(rowUiProps.className, {
+            [MASTER_DETAIL_PREVIEW_HIGHLIGHT_CLASS]: isPreviewHighlighted
+        })
+    };
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- TableA11y owns grid navigation while Row owns Master Detail activation.
+    _jsxs("div", { ...uiProps, ref: rowElementRef, onClick: isMasterDetailEnabled ? onRowClick : undefined, children: [[...columns]
+                .sort((colA, colB) => colA.order - colB.order)
+                .map(column => {
+                column.setExecutionContext(row);
+                if (column.hidden)
+                    return null;
+                return (_jsx(CellWrapper, { row: row, column: column, level: level, onMasterDetailKeyDown: isMasterDetailEnabled ? onCellKeyDownCapture : undefined }, column.field.id));
+            }), isPreviewHighlighted && (_jsx("span", { className: MASTER_DETAIL_INDICATOR_CLASS, "aria-hidden": 'true' }))] }));
 }
 Row.propTypes = {
     columns: PropTypes.arrayOf(PropTypes.any),

package/lib/Core/Views/Table/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../../Core/Views/Table/Row.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE7B,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,SAAS,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE;IACjD,MAAM,OAAO,GAAG,EAAE,GAAG,GAAG,CAAC,UAAU,EAAE,EAAE,GAAG,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;IAEhG,OAAO,CACL,iBAAS,OAAO,YACb,CAAC,GAAG,OAAO,CAAC;aACV,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;aAC7C,GAAG,CAAC,MAAM,CAAC,EAAE;YACZ,MAAM,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;YAChC,IAAI,MAAM,CAAC,MAAM;gBAAE,OAAO,IAAI,CAAC;YAC/B,OAAO,KAAC,WAAW,IAAuB,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,IAAvD,MAAM,CAAC,KAAK,CAAC,EAAE,CAA4C,CAAC;QACvF,CAAC,CAAC,GACA,CACP,CAAC;AACJ,CAAC;AAED,GAAG,CAAC,SAAS,GAAG;IACd,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC;IACzC,GAAG,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACtC,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,SAAS,EAAE,SAAS,CAAC,MAAM;CAC5B,CAAC;AAEF,eAAe,IAAI,CAAC,GAAG,CAAC,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { memo } from 'react';\n\nimport CellWrapper from './CellWrapper';\n\nfunction Row({ row, columns, level = 0, dataIndex }) {\n  const uiProps = { ...row.getUIProps(), ...(dataIndex >= 0 ? { 'data-index': dataIndex } : {}) };\n\n  return (\n    <div {...uiProps}>\n      {[...columns]\n        .sort((colA, colB) => colA.order - colB.order)\n        .map(column => {\n          column.setExecutionContext(row);\n          if (column.hidden) return null;\n          return <CellWrapper key={column.field.id} row={row} column={column} level={level} />;\n        })}\n    </div>\n  );\n}\n\nRow.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any),\n  row: PropTypes.objectOf(PropTypes.any),\n  level: PropTypes.number,\n  dataIndex: PropTypes.number\n};\n\nexport default memo(Row);\n"]}
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../../Core/Views/Table/Row.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE7B,OAAO,EAAE,eAAe,IAAI,EAAE,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EACL,6BAA6B,EAC7B,qCAAqC,EACtC,MAAM,iBAAiB,CAAC;AAEzB,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,SAAS,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE;IACjD,MAAM,UAAU,GAAG,GAAG,CAAC,UAAU,EAAE,CAAC;IACpC,MAAM,EAAE,qBAAqB,EAAE,UAAU,EAAE,oBAAoB,EAAE,aAAa,EAAE,GAC9E,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC1B,MAAM,oBAAoB,GAAG,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC;IACtD,MAAM,OAAO,GAAG;QACd,GAAG,UAAU;QACb,GAAG,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACtD,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,SAAS,EAAE;YAClC,CAAC,qCAAqC,CAAC,EAAE,oBAAoB;SAC9D,CAAC;KACH,CAAC;IAEF,OAAO;IACL,qLAAqL;IACrL,kBAAS,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,aAC1F,CAAC,GAAG,OAAO,CAAC;iBACV,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;iBAC7C,GAAG,CAAC,MAAM,CAAC,EAAE;gBACZ,MAAM,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;gBAChC,IAAI,MAAM,CAAC,MAAM;oBAAE,OAAO,IAAI,CAAC;gBAC/B,OAAO,CACL,KAAC,WAAW,IAEV,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,qBAAqB,EAAE,qBAAqB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,IAJ1E,MAAM,CAAC,KAAK,CAAC,EAAE,CAKpB,CACH,CAAC;YACJ,CAAC,CAAC,EACH,oBAAoB,IAAI,CACvB,eAAM,SAAS,EAAE,6BAA6B,iBAAc,MAAM,GAAG,CACtE,IACG,CACP,CAAC;AACJ,CAAC;AAED,GAAG,CAAC,SAAS,GAAG;IACd,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC;IACzC,GAAG,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC;IACtC,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,SAAS,EAAE,SAAS,CAAC,MAAM;CAC5B,CAAC;AAEF,eAAe,IAAI,CAAC,GAAG,CAAC,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { memo } from 'react';\n\nimport { createClassName as cx } from '../../Utils';\nimport {\n  MASTER_DETAIL_INDICATOR_CLASS,\n  MASTER_DETAIL_PREVIEW_HIGHLIGHT_CLASS\n} from '../../constants';\n\nimport CellWrapper from './CellWrapper';\nimport useMasterDetailRow from './useMasterDetailRow';\n\nfunction Row({ row, columns, level = 0, dataIndex }) {\n  const rowUiProps = row.getUIProps();\n  const { isMasterDetailEnabled, onRowClick, onCellKeyDownCapture, rowElementRef } =\n    useMasterDetailRow(row);\n  const isPreviewHighlighted = !!row.masterDetailActive;\n  const uiProps = {\n    ...rowUiProps,\n    ...(dataIndex >= 0 ? { 'data-index': dataIndex } : {}),\n    className: cx(rowUiProps.className, {\n      [MASTER_DETAIL_PREVIEW_HIGHLIGHT_CLASS]: isPreviewHighlighted\n    })\n  };\n\n  return (\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- TableA11y owns grid navigation while Row owns Master Detail activation.\n    <div {...uiProps} ref={rowElementRef} onClick={isMasterDetailEnabled ? onRowClick : undefined}>\n      {[...columns]\n        .sort((colA, colB) => colA.order - colB.order)\n        .map(column => {\n          column.setExecutionContext(row);\n          if (column.hidden) return null;\n          return (\n            <CellWrapper\n              key={column.field.id}\n              row={row}\n              column={column}\n              level={level}\n              onMasterDetailKeyDown={isMasterDetailEnabled ? onCellKeyDownCapture : undefined}\n            />\n          );\n        })}\n      {isPreviewHighlighted && (\n        <span className={MASTER_DETAIL_INDICATOR_CLASS} aria-hidden='true' />\n      )}\n    </div>\n  );\n}\n\nRow.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any),\n  row: PropTypes.objectOf(PropTypes.any),\n  level: PropTypes.number,\n  dataIndex: PropTypes.number\n};\n\nexport default memo(Row);\n"]}

package/lib/Core/Views/Table/StyledTableContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledTableContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":";AAyBA;;yJAkhCG"}
+{"version":3,"file":"StyledTableContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Table/StyledTableContainer.jsx"],"names":[],"mappings":";AA4CA;;yJAwjCG"}

package/lib/Core/Views/Table/StyledTableContainer.js

@@ -7,7 +7,21 @@ import { StyledRadioCheck } from '@pega/cosmos-react-core/lib/components/RadioCh
 import { StyledLabel, StyledProgressBackdrop, calculateFontSize, tryCatch, isSameColor } from '@pega/cosmos-react-core';
 import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
 import { generateRSDataContainerHeightStyles, generateRSHeightStyles } from '../../Utils/styles';
+import { MASTER_DETAIL_INDICATOR_CLASS, MASTER_DETAIL_PREVIEW_HIGHLIGHT_CLASS } from '../../constants';
 import { CellIcon } from './CellWrapper';
+const dataRowSelector = `.row:not(.group-header-row):not(.hierarchical-group-header-row):not(
+  .hierarchical-group-footer-row
+):not(.header)`;
+const rowBackground = backgroundColor => css `
+  background-color: ${backgroundColor};
+
+  /* Sticky action cells and the first frozen cell use pseudo-elements to paint their backgrounds. */
+  > .cell,
+  > .cell-action::before,
+  > .cell-fixed.cell-first::before {
+    background-color: ${backgroundColor};
+  }
+`;
 const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref: ref, ...props })))(({ theme, view, isFullscreen }) => {
     let colIdToFillRemainingSpace;
     let isAggregationApplied = false;
@@ -24,7 +38,8 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     const showFreezeLine = view.state.responsive?.sm &&
         !(view.hasNoRecords || view.hasNoFrozenColumns || view.bHideFreezeLine);
-    const selectedRowColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
+    const highlightedRowColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
+    const previewHighlightBorderColor = tryCatch(() => transparentize(0.7, theme.base.palette.interactive));
     const lightGreyColor = theme.base.colors.gray['extra-light'];
     const freezeLineShadowTransparent = transparentize(getLuminance(theme.components.table.header['foreground-color']) < 0.5 ? 0.9 : 0.75, theme.components.table.header['foreground-color']);
     const headerBackground = theme.components.table.header['background-color'];
@@ -62,9 +77,11 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
     const borderHorizontalInner = theme.components.table.border['horizontal-inner'] && !theme.components.table['striped-rows'];
     const borderHorizontalOuter = theme.components.table.border['horizontal-outer'];
     const showBorderOnLastStripedRow = theme.components.table.border['horizontal-inner'] && theme.components.table['striped-rows'];
+    const isMasterDetailEnabled = !!view.meta.masterDetail;
     return css `
     --forground-color: ${theme.base.palette['foreground-color']};
     --interactive: ${theme.base.palette.interactive};
+    --light-blue: ${theme.base.colors.blue['extra-light']};
     --medium-blue: ${theme.base.colors.blue.medium};
     --border-color: ${theme.base.palette['border-line']};
     --border-color-freeze: #a5a5a5;
@@ -202,8 +219,7 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
         }
 
         > .header-lable-container {
-          /* stylelint-disable-next-line unit-allowed-list */
-          min-width: 20px;
+          min-width: 1.25rem;
         }
         /* stylelint-disable selector-max-class */
         &.cell-fixed > .cell-content {
@@ -479,10 +495,8 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       align-items: center;
 
       svg {
-        /* stylelint-disable-next-line unit-allowed-list */
-        width: 14px;
-        /* stylelint-disable-next-line unit-allowed-list */
-        height: 14px;
+        width: 0.875rem;
+        height: 0.875rem;
       }
     }
 
@@ -661,7 +675,7 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
       display: grid;
       position: sticky;
       top: 0;
-      z-index: 6;
+      z-index: 9;
       border-start-start-radius: inherit;
       border-start-end-radius: inherit;
 
@@ -920,26 +934,62 @@ const StyledTableContainer = styled(forwardRef((props, ref) => _jsx("div", { ref
         opacity: 1;
       }
       .row.selected-row {
-        background-color: ${selectedRowColor};
-
-        > .cell,
-        .cell-fixed,
-        .cell-action {
-          background-color: ${selectedRowColor};
-        }
+        ${rowBackground(highlightedRowColor)}
       }
-      .row-on-hover:hover {
-        background-color: ${lightGreyColor};
-        input.checkbox-on-hover + label {
-          opacity: 1;
+      ${isMasterDetailEnabled &&
+        css `
+        ${dataRowSelector}:hover {
+          ${rowBackground(highlightedRowColor)}
         }
 
-        > .cell,
-        .cell-fixed,
-        .cell-action {
-          background-color: ${lightGreyColor};
+        ${dataRowSelector}.${MASTER_DETAIL_PREVIEW_HIGHLIGHT_CLASS} {
+          ${rowBackground(highlightedRowColor)}
+          border-radius: 0.125rem;
+          &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            box-shadow: inset 0 0 0 0.125rem ${previewHighlightBorderColor};
+            pointer-events: none;
+            z-index: 7;
+          }
+
+          .${MASTER_DETAIL_INDICATOR_CLASS} {
+            position: absolute;
+            inset-inline-end: 0;
+            inset-block-start: 50%;
+            inline-size: 0.5625rem;
+            block-size: 2.125rem;
+            transform: translateX(var(--detail-indicator-offset, 0)) translateY(-50%);
+            pointer-events: none;
+            z-index: 8;
+
+            &::before {
+              content: '';
+              position: absolute;
+              inset-inline-end: 0.1875rem;
+              inset-block-start: 50%;
+              inline-size: 0.375rem;
+              block-size: 0.5rem;
+              transform: translateY(-50%);
+              background: var(--interactive);
+              clip-path: polygon(0 50%, 100% 0, 100% 100%);
+            }
+
+            &::after {
+              content: '';
+              position: absolute;
+              inset-inline-end: 0;
+              inset-block-start: 50%;
+              inline-size: 0.1875rem;
+              block-size: 2.125rem;
+              transform: translateY(-50%);
+              border-radius: 0.0625rem;
+              background: var(--interactive);
+            }
+          }
         }
-      }
+      `}
       .row.hierarchical-group-footer-row {
         .cell-fixed {
           background: ${lightGreyColor};