@pega/dx-component-builder-sdk 0.242.15 → 0.242.17

package/tests/assets/sdk-r/components/create/override-sdk/infra/FlowContainer/helpers.ts

@@ -0,0 +1,138 @@
+//  Moved PCore.getConstants() into each function in which it's used until we can
+//  make sure that this code isn't run until PCore is defined (after onPCoreReady)
+// const { CASE_INFO } = PCore.getConstants();
+
+export const addContainerItem = pConnect => {
+  const containerManager = pConnect.getContainerManager();
+  const contextName = pConnect.getContextName(); // here we will get parent context name, as flow container is child of view container
+  const caseViewMode = pConnect.getValue('context_data.caseViewMode');
+
+  let key;
+  let flowName;
+
+  if (caseViewMode !== 'review') {
+    const target = contextName.substring(0, contextName.lastIndexOf('_'));
+    const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(target);
+    const containerItemData = PCore.getContainerUtils().getContainerItemData(target, activeContainerItemID);
+
+    if (containerItemData) {
+      ({ key, flowName } = containerItemData);
+    }
+  }
+
+  containerManager.addContainerItem({
+    semanticURL: '',
+    key,
+    flowName,
+    caseViewMode: 'perform',
+    resourceType: 'ASSIGNMENT',
+    data: pConnect.getDataObject(contextName)
+  });
+};
+
+export const hasContainerItems = pConnect => {
+  const contextName = pConnect.getContextName();
+  const containerName = pConnect.getContainerName();
+  return PCore.getContainerUtils().hasContainerItems(`${contextName}/${containerName}`);
+};
+
+export const getActiveCaseActionName = pConnect => {
+  const { CASE_INFO } = PCore.getConstants();
+  const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
+  const activeActionID = pConnect.getValue(CASE_INFO.ACTIVE_ACTION_ID);
+  const activeAction = caseActions.find(action => action.ID === activeActionID);
+  return activeAction?.name || '';
+};
+
+export const getFirstCaseActionName = pConnect => {
+  const { CASE_INFO } = PCore.getConstants();
+  const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
+  return caseActions[0]?.name || '';
+};
+
+export const hasNotificationMessages = pConnect => {
+  return !!pConnect.getValue('caseMessages');
+};
+
+export const isCaseWideLocalAction = pConnect => {
+  const { CASE_INFO } = PCore.getConstants();
+  const actionID = pConnect.getValue(CASE_INFO.ACTIVE_ACTION_ID);
+  const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
+  if (caseActions && actionID) {
+    const activeAction = caseActions.find(caseAction => caseAction.ID === actionID);
+    return activeAction?.type === 'Case';
+  }
+  return false;
+};
+
+export const getChildCaseAssignments = pConnect => {
+  const { CASE_INFO } = PCore.getConstants();
+  const childCases = pConnect.getValue(CASE_INFO.CHILD_ASSIGNMENTS);
+  let allAssignments = [];
+  if (childCases && childCases.length > 0) {
+    childCases.forEach(({ assignments, Name }) => {
+      if (assignments) {
+        const childCaseAssignments = assignments.map(assignment => ({
+          ...assignment,
+          caseName: Name
+        }));
+        allAssignments = allAssignments.concat(childCaseAssignments);
+      }
+    });
+  }
+  return allAssignments;
+};
+
+export const hasAssignments = pConnect => {
+  const { CASE_INFO } = PCore.getConstants();
+  const assignments = pConnect.getValue(CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS);
+  const childCasesAssignments = getChildCaseAssignments(pConnect);
+
+  // eslint-disable-next-line sonarjs/prefer-single-boolean-return
+  if (assignments || childCasesAssignments || isCaseWideLocalAction(pConnect)) {
+    return true;
+  }
+  return false;
+};
+
+export const showBanner = getPConnect => {
+  const pConnect = getPConnect();
+  return hasNotificationMessages(pConnect) || !hasAssignments(pConnect);
+};
+
+export const showTodo = pConnect => {
+  const caseViewMode = pConnect.getValue('context_data.caseViewMode');
+  return caseViewMode !== 'perform';
+};
+
+export const isRenderWithToDoWrapper = (getPConnect, options) => {
+  const pConnect = getPConnect();
+  const { showWithToDo } = options;
+  return showWithToDo && (!isCaseWideLocalAction(pConnect) || showTodo(pConnect));
+};
+
+export const getToDoAssignments = pConnect => {
+  const { CASE_INFO } = PCore.getConstants();
+  const caseActions = pConnect.getValue(CASE_INFO.CASE_INFO_ACTIONS);
+  const assignmentLabel = pConnect.getValue(CASE_INFO.ASSIGNMENT_LABEL);
+  const assignments = pConnect.getValue(CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS) || [];
+  const childCasesAssignments = getChildCaseAssignments(pConnect) || [];
+  let childCasesAssignmentsCopy = JSON.parse(JSON.stringify(childCasesAssignments));
+
+  childCasesAssignmentsCopy = childCasesAssignmentsCopy.map(assignment => {
+    assignment.isChild = true;
+    return assignment;
+  });
+
+  const todoAssignments = [...assignments, ...childCasesAssignmentsCopy];
+  let todoAssignmentsCopy = JSON.parse(JSON.stringify(todoAssignments));
+
+  if (caseActions && !showTodo(pConnect)) {
+    todoAssignmentsCopy = todoAssignmentsCopy.map(assignment => {
+      assignment.name = getActiveCaseActionName(pConnect) || assignmentLabel;
+      return assignment;
+    });
+  }
+
+  return todoAssignmentsCopy;
+};

package/tests/assets/sdk-r/components/create/override-sdk/infra/FlowContainer/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/ListViewActionButtons/ListViewActionButtons.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import makeStyles from '@mui/styles/makeStyles';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+const useStyles = makeStyles((/* theme */) => ({
+  button: {
+    width: '50%',
+    margin: '4px'
+  },
+  div: {
+    display: 'flex',
+    margin: '8px'
+  }
+}));
+
+interface ListViewActionButtonsProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  context: string;
+  closeActionsDialog: Function;
+}
+
+function ListViewActionButtons(props: ListViewActionButtonsProps) {
+  const { getPConnect, context, closeActionsDialog } = props;
+  const classes = useStyles();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Data Object';
+  const [isDisabled, setIsDisabled] = useState(false);
+
+  return (
+    <div className={classes.div}>
+      <Button
+        className={classes.button}
+        variant='contained'
+        color='secondary'
+        onClick={() => {
+          getPConnect().getActionsApi().cancelDataObject(context);
+        }}
+      >
+        {localizedVal('Cancel', localeCategory)}
+      </Button>
+      <Button
+        className={classes.button}
+        variant='contained'
+        color='primary'
+        disabled={isDisabled}
+        onClick={() => {
+          setIsDisabled(true);
+          getPConnect()
+            .getActionsApi()
+            .submitEmbeddedDataModal(context)
+            .then(() => {
+              setIsDisabled(false);
+              closeActionsDialog();
+            })
+            .catch(err => {
+              // eslint-disable-next-line no-console
+              console.log(err);
+            });
+        }}
+      >
+        {localizedVal('Submit', localeCategory)}
+      </Button>
+    </div>
+  );
+}
+
+export default ListViewActionButtons;

package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/ListViewActionButtons/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/ModalViewContainer.tsx

@@ -0,0 +1,345 @@
+import { createElement, useEffect, useRef, useState } from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import makeStyles from '@mui/styles/makeStyles';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import difference from 'lodash.difference';
+
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+// Need to get correct implementation from component map for Assignment and CancelAlert
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { getBanners } from '@pega/react-sdk-components/lib/components/helpers/case-utils';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface ModalViewContainerProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  loadingInfo?: string;
+  routingInfo?: any;
+  pageMessages?: string[];
+}
+
+function isOpenModalAction(prevModalCollection, currentModalList) {
+  return prevModalCollection && currentModalList ? Object.keys(prevModalCollection).length < currentModalList.length : false;
+}
+
+function isUpdateModalAction(prevModalCollection, currentModalList) {
+  return prevModalCollection && currentModalList ? Object.keys(prevModalCollection).length === currentModalList.length : false;
+}
+
+function isCloseModalAction(prevModalCollection, currentModalList) {
+  return prevModalCollection && currentModalList ? Object.keys(prevModalCollection).length > currentModalList.length : false;
+}
+
+function buildName(pConnect, name = '') {
+  const context = pConnect.getContextName();
+  return `${context}/${name}`;
+}
+
+function getKeyAndLatestItem(routinginfo, pConn, options) {
+  const containerName = pConn.getContainerName();
+  const { acTertiary = false } = options || {};
+  if (PCore.getContainerUtils().hasContainerItems(buildName(pConn, containerName))) {
+    const { accessedOrder, items } = routinginfo;
+    let key;
+    // eslint-disable-next-line no-plusplus
+    for (let i = accessedOrder.length - 1; i >= 0; i--) {
+      const tempkey = accessedOrder[i];
+      if ((acTertiary && items[tempkey].acTertiary) || (!acTertiary && !items[tempkey].acTertiary)) {
+        key = tempkey;
+        break;
+      }
+    }
+    const latestItem = items[key];
+    return { key, latestItem };
+  }
+  return {};
+}
+
+function getConfigObject(item, pConnect, isReverseCoexistence = false) {
+  let config;
+  if (isReverseCoexistence) {
+    config = {
+      options: {
+        pageReference: pConnect?.getPageReference(),
+        hasForm: true,
+        containerName: pConnect?.getContainerName() || PCore.getConstants().MODAL
+      }
+    };
+    return PCore.createPConnect(config);
+  }
+  if (item) {
+    const { context, view, isBulkAction } = item;
+    const target = PCore.getContainerUtils().getTargetFromContainerItemID(context);
+    config = {
+      meta: view,
+      options: {
+        context,
+        pageReference: view.config.context || pConnect.getPageReference(),
+        hasForm: true,
+        ...(isBulkAction && { isBulkAction }),
+        containerName: pConnect?.getContainerName() || PCore.getConstants().MODAL,
+        target
+      }
+    };
+    return PCore.createPConnect(config);
+  }
+  return null;
+}
+
+const useStyles = makeStyles(theme => ({
+  dlgTitle: {
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(0)
+  },
+  dlgContent: {
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2),
+    marginTop: theme.spacing(0),
+    marginBottom: theme.spacing(2)
+  }
+}));
+
+export default function ModalViewContainer(props: ModalViewContainerProps) {
+  // Get the proper implementation (local or Pega-provided) for these components that are emitted below
+  const Assignment = getComponentFromMap('Assignment');
+  const CancelAlert = getComponentFromMap('CancelAlert');
+  const ListViewActionButtons = getComponentFromMap('ListViewActionButtons');
+
+  const classes = useStyles();
+
+  const modalCollection = useRef({});
+  const routingInfoRef = useRef({});
+  const { getPConnect, routingInfo = null, pageMessages = [] } = props;
+  const pConn = getPConnect();
+  const { acTertiary } = pConn.getConfigProps() as any;
+  const {
+    CONTAINER_TYPE: { MULTIPLE },
+    PUB_SUB_EVENTS: { EVENT_SHOW_CANCEL_ALERT }
+  } = PCore.getConstants();
+  const { subscribe, unsubscribe } = PCore.getPubSubUtils();
+  const [bShowModal, setShowModal] = useState(false);
+  const [bShowCancelAlert, setShowCancelAlert] = useState(false);
+  const [createdView, setCreatedView] = useState<any>(null);
+  const [title, setTitle] = useState('');
+  const [arNewChildrenAsReact, setArNewChildrenAsReact] = useState<any[]>([]);
+  const [itemKey, setItemKey] = useState('');
+  const [cancelAlertProps, setCancelAlertProps] = useState({});
+  const [isMultiRecordData, setMultiRecordData] = useState(false);
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Data Object';
+
+  const ERROR_WHILE_RENDERING = 'ERROR_WHILE_RENDERING';
+
+  function showAlert(payload) {
+    const { latestItem } = getKeyAndLatestItem(routingInfoRef.current, pConn, { acTertiary });
+    const isReverseCoexistence = (PCore.getCoexistenceManager().getBroadcastUtils() as any).isReverseCoexistenceCaseLoaded();
+    const { isModalAction, hideDelete, isDataObject, skipReleaseLockRequest } = payload;
+
+    /*
+      If we are in create stage full page mode, created a new case and trying to click on cancel button
+      it will show two alert dialogs which is not expected. Hence isModalAction flag to avoid that.
+    */
+    if (latestItem && isModalAction) {
+      const configObject = getConfigObject(latestItem, pConn, isReverseCoexistence);
+      const contextName = configObject?.getPConnect().getContextName();
+      setCancelAlertProps({
+        heading: 'Discard unsaved changes?',
+        content: 'You have unsaved changes. You can discard them or go back to keep working.',
+        getPConnect: configObject?.getPConnect,
+        itemKey: contextName,
+        hideDelete,
+        isDataObject,
+        skipReleaseLockRequest
+      });
+      setShowCancelAlert(true);
+    }
+  }
+
+  function handleModalOpen(key) {
+    modalCollection.current = {
+      ...modalCollection.current,
+      [key]: {}
+    };
+  }
+
+  function handleModalClose(accessedOrder) {
+    const tempModalCollection = modalCollection.current;
+    const [closedModalKey] = difference(Object.keys(tempModalCollection), accessedOrder);
+
+    if (closedModalKey && tempModalCollection[closedModalKey]) {
+      const modifiedModalCollection = { ...tempModalCollection };
+      delete modifiedModalCollection[closedModalKey];
+      modalCollection.current = modifiedModalCollection;
+      setShowModal(false);
+    }
+  }
+
+  const dismissCancelAlert = dismissAllModals => {
+    setShowCancelAlert(false);
+
+    if (dismissAllModals) {
+      setShowModal(false);
+    }
+  };
+
+  function getModalHeading(dataObjectAction) {
+    return dataObjectAction === PCore.getConstants().RESOURCE_STATUS.CREATE
+      ? localizedVal('Add Record', localeCategory)
+      : localizedVal('Edit Record', localeCategory);
+  }
+
+  function determineModalHeaderByAction(actionName, caseTypeName, ID, caseLocaleRef) {
+    if (actionName) {
+      return localizedVal(actionName, localeCategory);
+    }
+    return `${localizedVal('Create', localeCategory)} ${localizedVal(caseTypeName, undefined, caseLocaleRef)} (${ID})`;
+  }
+
+  useEffect(() => {
+    // Establish the necessary containers
+    const containerMgr = pConn.getContainerManager();
+    containerMgr.initializeContainers({ type: MULTIPLE });
+  }, [MULTIPLE, pConn]);
+
+  useEffect(() => {
+    // Persisting routing information between the renders in showAlert
+    routingInfoRef.current = routingInfo;
+  });
+
+  useEffect(() => {
+    subscribe(EVENT_SHOW_CANCEL_ALERT, showAlert, EVENT_SHOW_CANCEL_ALERT /* Unique string for subscription */);
+    subscribe(
+      ERROR_WHILE_RENDERING,
+      error => {
+        // setError(true);
+        // eslint-disable-next-line no-console
+        console.error(error);
+      },
+      `${ERROR_WHILE_RENDERING}-mc-${getPConnect().getContextName()}`,
+      false,
+      getPConnect().getContextName()
+    );
+
+    // Unsubscribe on component unmount
+    return () => {
+      unsubscribe(EVENT_SHOW_CANCEL_ALERT, EVENT_SHOW_CANCEL_ALERT /* Should be same unique string passed during subscription */);
+    };
+  });
+
+  useEffect(() => {
+    if (routingInfo) {
+      const { accessedOrder, type } = routingInfo;
+      const { key, latestItem } = getKeyAndLatestItem(routingInfo, pConn, { acTertiary });
+
+      if (
+        latestItem &&
+        type === MULTIPLE &&
+        (isOpenModalAction(modalCollection.current, accessedOrder) || isUpdateModalAction(modalCollection.current, accessedOrder))
+      ) {
+        const { actionName } = latestItem;
+        // const { isDockable = false } = latestItem?.modalOptions || {};
+        const configObject: any = getConfigObject(latestItem, null, false);
+        const pConnect = configObject.getPConnect();
+        const caseInfo: any = pConnect.getCaseInfo();
+        const caseName = caseInfo.getName();
+        const caseTypeName = caseInfo.getCaseTypeName();
+        const ID = caseInfo.getBusinessID() || caseInfo.getID();
+        const isDataObject = routingInfo.items[latestItem.context].resourceType === PCore.getConstants().RESOURCE_TYPES.DATA;
+        const dataObjectAction = routingInfo.items[latestItem.context].resourceStatus;
+        const isMultiRecord = routingInfo.items[latestItem.context].isMultiRecordData;
+        const headingValue =
+          isDataObject || isMultiRecord
+            ? getModalHeading(dataObjectAction)
+            : determineModalHeaderByAction(actionName, caseTypeName, ID, `${caseInfo?.getClassName()}!CASE!${caseInfo.getName()}`.toUpperCase());
+
+        let arChildrenAsReact: any[] = [];
+
+        if (pConnect.getComponentName() === 'reference') {
+          // Reference component doesn't have children. It can build the View we want.
+          // The Reference component getPConnect is in configObject
+
+          arChildrenAsReact.push(
+            createElement(createPConnectComponent(), {
+              ...configObject,
+              key: `${caseName}-${ID}`
+            })
+          );
+        } else {
+          // This is the 8.6 implementation. Leaving it in for reference for now.
+          // And create a similar array of the children as React components
+          // passed to Assignment component when rendered
+          arChildrenAsReact = (pConnect.getChildren() as []).map((child: any) => {
+            // Use Case Summary ID as the React element's key
+            const caseSummaryID = child.getPConnect().getCaseSummary().ID;
+            return createElement(createPConnectComponent(), {
+              ...child,
+              key: caseSummaryID
+            });
+          });
+        }
+
+        if (arChildrenAsReact.length > 0) setArNewChildrenAsReact(arChildrenAsReact);
+        setMultiRecordData(isMultiRecord);
+        setTitle(headingValue);
+        setCreatedView({ configObject, latestItem });
+        setItemKey(key);
+        setShowModal(true);
+
+        // Update modal use case which happens when assignment in submitted in modal.
+        if (isUpdateModalAction(modalCollection.current, accessedOrder)) {
+          // handleModalUpdate(key);
+        } else if (isOpenModalAction(modalCollection.current, accessedOrder)) {
+          // New modal open scenario
+          handleModalOpen(key);
+        }
+      } else if (isCloseModalAction(modalCollection.current, accessedOrder)) {
+        handleModalClose(accessedOrder);
+      }
+    }
+  }, [routingInfo]);
+
+  function closeActionsDialog() {
+    // actionsDialog.current = true;
+    setShowModal(false);
+  }
+
+  return (
+    <>
+      <Dialog open={bShowModal} aria-labelledby='form-dialog-title'>
+        <DialogTitle id='form-dialog-title' className={`${classes.dlgTitle} psdk-dialog-title`}>
+          {title}
+        </DialogTitle>
+        <DialogContent className={`${classes.dlgContent} psdk-dialog-content`}>
+          {bShowModal ? (
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <Assignment
+                getPConnect={createdView.configObject.getPConnect}
+                itemKey={itemKey}
+                isInModal
+                banners={getBanners({
+                  target: itemKey,
+                  pageMessages
+                })}
+              >
+                {arNewChildrenAsReact}
+              </Assignment>
+            </LocalizationProvider>
+          ) : null}
+        </DialogContent>
+
+        {isMultiRecordData && (
+          <ListViewActionButtons
+            getPConnect={createdView.configObject.getPConnect}
+            context={createdView.latestItem.context}
+            closeActionsDialog={closeActionsDialog}
+          />
+        )}
+      </Dialog>
+      {bShowCancelAlert && <CancelAlert {...cancelAlertProps} dismiss={dismissCancelAlert} />}
+    </>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/infra/ModalViewContainer/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/infra/NavBar/NavBar.css

@@ -165,4 +165,5 @@
 
 .scrollable {
   overflow-y: scroll !important;
+  min-height: 200px !important;
 }

package/tests/assets/sdk-r/components/create/override-sdk/infra/Reference/Reference.tsx

@@ -0,0 +1,52 @@
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface ReferenceProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  visibility?: boolean;
+  context?: string;
+  readOnly?: boolean;
+  displayMode?: string;
+}
+
+export default function Reference(props: ReferenceProps) {
+  const { visibility = true, context = '', getPConnect, readOnly = false, displayMode = '' } = props;
+
+  const pConnect = getPConnect();
+  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
+  const referenceConfig = { ...pConnect.getComponentConfig() } || {};
+
+  delete referenceConfig?.name;
+  delete referenceConfig?.type;
+  delete referenceConfig?.visibility;
+
+  const viewMetadata: any = pConnect.getReferencedView();
+
+  if (!viewMetadata) {
+    // console.log("View not found ", pConnect.getComponentConfig());
+    return null;
+  }
+
+  const viewObject = {
+    ...viewMetadata,
+    config: {
+      ...viewMetadata.config,
+      ...referenceConfig
+    }
+  };
+
+  // @ts-ignore - Argument of type 'null' is not assignable to parameter of type 'string'.
+  const viewComponent: any = pConnect.createComponent(viewObject, null, null, {
+    pageReference: context && context.startsWith('@CLASS') ? '' : context
+  });
+
+  viewComponent.props.getPConnect().setInheritedConfig({
+    ...referenceConfig,
+    readOnly,
+    displayMode
+  });
+
+  if (visibility !== false) {
+    return <>{viewComponent}</>;
+  }
+  return null;
+}

package/tests/assets/sdk-r/components/create/override-sdk/infra/Reference/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/infra/Region/Region.tsx

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+
+// Region does NOT have getPConnect. So, no need to extend from PConnProps
+interface RegionProps {
+  // If any, enter additional props that only exist on this component
+}
+
+export default function Region(props: PropsWithChildren<RegionProps>) {
+  const { children } = props;
+
+  return (
+    <>
+      {/* <div>Region</div> */}
+      {children}
+    </>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/infra/Region/index.tsx

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