@pega/react-sdk-overrides 0.25.3 → 0.25.4

package/lib/designSystemExtension/RichTextEditor/RichTextEditor.tsx

@@ -1,12 +1,11 @@
 import React, { forwardRef } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
-import { FormControl, FormHelperText, InputLabel } from '@mui/material';
+import { FormControl, FormHelperText, InputLabel, useTheme } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 
 import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/react-sdk-components/lib/hooks';
-import { theme } from '@pega/react-sdk-components/lib/components/designSystemExtensi/theme';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
   fieldLabel: {
     position: 'relative',
     transform: 'translate(0, 0px) scale(1)',
@@ -32,6 +31,7 @@ interface RichTextEditorProps {
 }
 
 const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorProps, ref) {
+  const theme = useTheme();
   const classes = useStyles();
   const uid = useUID();
   const { id = uid, defaultValue, label, labelHidden, info, testId, placeholder, disabled, required, readOnly, error, onBlur, onChange } = props;
@@ -91,27 +91,27 @@ const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorP
           skin: 'oxide-dark', // or 'oxide' for light theme
           // ...other TinyMCE config...
           content_style: `
-        body {
-          font-family: ${theme.typography.fontFamily};
-          font-size: ${theme.typography.fontSize}px;
-          color: ${theme.palette.text.primary};
-          background: ${theme.palette.background.paper};
-        }
-        a { color: ${theme.palette.primary.main}; }
-        h1, h2, h3, h4, h5, h6 { color: ${theme.palette.text.primary}; font-family: ${theme.typography.fontFamily}; }
-        blockquote { color: ${theme.palette.text.secondary}; border-left: 4px solid ${theme.palette.primary.light}; padding-left: 8px; }
-        ul, ol { color: ${theme.palette.text.primary}; }
-        input, textarea, select {
-          background: ${theme.palette.background.paper};
-          color: ${theme.palette.text.primary};
-          border: 1px solid ${theme.palette.divider};
-          border-radius: 4px;
-          padding: 6px 10px;
-          font-size: 1em;
-          font-family: inherit;
-      }
-      /* Add more styles as needed */
-    `,
+            body {
+              font-family: ${theme.typography.fontFamily};
+              font-size: ${theme.typography.fontSize}px;
+              color: ${theme.palette.text.primary};
+              background: ${theme.palette.background.paper};
+            }
+            a { color: ${theme.palette.primary.main}; }
+            h1, h2, h3, h4, h5, h6 { color: ${theme.palette.text.primary}; font-family: ${theme.typography.fontFamily}; }
+            blockquote { color: ${theme.palette.text.secondary}; border-left: 4px solid ${theme.palette.primary.light}; padding-left: 8px; }
+            ul, ol { color: ${theme.palette.text.primary}; }
+            input, textarea, select {
+              background: ${theme.palette.background.paper};
+              color: ${theme.palette.text.primary};
+              border: 1px solid ${theme.palette.divider};
+              border-radius: 4px;
+              padding: 6px 10px;
+              font-size: 1em;
+              font-family: inherit;
+            }
+            /* Add more styles as needed */
+          `,
           placeholder,
           menubar: false,
           statusbar: false,

package/lib/helpers/simpleTableHelpers.ts

@@ -238,7 +238,7 @@ export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, op
 
   // get resolved field labels for primary fields raw config included in configFields
   const fieldsLabels = updateFieldLabels(fields, configFields, primaryFieldsViewIndex, pConnect, {
-    columnsRawConfig: pConnect.getRawConfigProps()?.children.find(item => item?.name === 'Columns')?.children
+    columnsRawConfig: pConnect.getRawConfigProps()?.children?.find(item => item?.name === 'Columns')?.children
   });
 
   const fieldDefs = configFields.map((field, index) => {

package/lib/template/DefaultPage/DefaultPage.tsx

@@ -0,0 +1,88 @@
+import { useMemo, Children } from 'react';
+import type { ReactNode } from 'react';
+import Banner from '@pega/react-sdk-components/lib/components/designSystemExtension/Banner';
+
+export interface CommonPageProps {
+  /** Page title */
+  title: string;
+
+  /** Page icon */
+  icon: string;
+
+  /** Region children */
+  children: ReactNode | ReactNode[];
+
+  /** Dynamic page pconnect object */
+  // getPConnect: () => PConnect;
+
+  /** Enable GetNextWork in page */
+  enableGetNextWork?: boolean;
+
+  /** GetAI coaches configured in page */
+  // coaches?: GenAICoach[];
+
+  /** Locale reference */
+  localeReference: string;
+}
+interface DefaultPageProps extends CommonPageProps {
+  /** Default page layout one or two columns */
+  layout: 'one-column' | 'two-column' | 'wide-narrow' | 'narrow-wide' | 'dynamic';
+
+  /** Flag to enable banner/hero */
+  enableBanner?: boolean;
+
+  /** Banner - Heading displayed */
+  heading?: string;
+
+  /** Banner - Message displayed */
+  message?: string;
+
+  /** Banner - Theme of the image */
+  imageTheme?: 'light' | 'dark' | undefined;
+
+  /** Banner - Background image */
+  backgroundImage?: string;
+
+  /** Banner - Background color */
+  backgroundColor?: string;
+
+  /** Banner - Tint image */
+  tintImage?: boolean;
+
+  /** Flag to enable layout model */
+  // layoutModel?: GridLayoutModel | undefined;
+}
+
+export default function DefaultPage({
+  layout = 'one-column',
+  children,
+  enableBanner,
+  heading = '',
+  message = '',
+  imageTheme,
+  backgroundImage = '',
+  backgroundColor = '',
+  tintImage
+}: DefaultPageProps) {
+  const childArray = useMemo(() => {
+    return Children.toArray(children);
+  }, [children]);
+
+  if (enableBanner) {
+    return (
+      <Banner
+        variant={layout === 'one-column' ? 'two-column' : layout}
+        a={[childArray[0]]}
+        b={[childArray[1]]}
+        banner={{
+          variant: imageTheme,
+          backgroundColor,
+          title: heading,
+          message,
+          backgroundImage,
+          tintImage
+        }}
+      />
+    );
+  }
+}

package/lib/template/DefaultPage/index.tsx

@@ -0,0 +1 @@
+export { default } from './DefaultPage';

package/lib/template/SelfServiceCaseView/SelfServiceCaseView.tsx

@@ -0,0 +1,3 @@
+export default function SelfServiceCaseView(props) {
+  console.log('SelfServiceCaseView props:', props);
+}

package/lib/template/SelfServiceCaseView/index.tsx

@@ -0,0 +1 @@
+export { default } from './SelfServiceCaseView';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.25.3",
+  "version": "0.25.4",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [