udp-react-enterprise-component-library 25.18.1-beta.54 → 25.18.1-beta.56

package/dist/{TicketCard-IqCCKSc0.js → TicketCard-CpttpQoj.js}

@@ -140,4 +140,4 @@ TicketCard.defaultProps = { component: "h2" };
 
 //#endregion
 export { StatusLineItem as n, NotificationElement as r, TicketCard as t };
-//# sourceMappingURL=TicketCard-IqCCKSc0.js.map
+//# sourceMappingURL=TicketCard-CpttpQoj.js.map

package/dist/{TicketCard-IqCCKSc0.js.map → TicketCard-CpttpQoj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TicketCard-IqCCKSc0.js","names":["useStyles","useStyles"],"sources":["../src/UI/dataDisplay/ticketCard/NotificationElement.jsx","../src/UI/dataDisplay/ticketCard/StatusLineItem.jsx","../src/UI/dataDisplay/ticketCard/TicketCard.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: 0,\n    height: 0,\n    borderTop: '0px solid transparent',\n    borderRight: `45px solid ${theme?.palette?.error?.main}`,\n    borderBottom: '45px solid transparent'\n  },\n  number: {\n    marginLeft: theme.spacing(3.5),\n    paddingTop: theme.spacing(0.5),\n    color: theme?.palette?.common?.white\n  }\n}))\n\nexport const NotificationElement = ({ alertNumber }) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.number}>\n        <Typography> {alertNumber} </Typography>\n      </div>\n    </div>\n  )\n}\nNotificationElement.propTypes = {\n  /**\n   * number of alert items\n   */\n  alertNumber: PropTypes.number.isRequired\n}\n","import React from 'react'\nimport { makeStyles, Divider, Typography } from '@material-ui/core'\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton'\nimport { StatusChip } from '../status/StatusChip'\nimport { ArrowUpRightIcon } from '@fluentui/react-icons'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%',\n    height: 44\n  },\n  wrapper: { display: 'flex' },\n  labelCount: {\n    flex: 1,\n    display: 'flex'\n  },\n  status: {\n    marginRight: theme.spacing(1)\n  },\n  icon: {\n    marginRight: theme.spacing(1)\n  }\n}))\n\nexport const StatusLineItem = ({\n  label,\n  amount,\n  status,\n  icon,\n  handleClick\n}) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.wrapper}>\n        <div className={classes.labelCount}>\n          <div className={classes.icon}> {icon} </div>\n          <Typography> {label} </Typography>\n        </div>\n        <div className={classes.status}>\n          {status === 'error' && <StatusChip label={amount} status={status} />}\n\n          {status !== 'error' && amount}\n        </div>\n        <FluentIconButton\n          onClick={handleClick}\n          className={classes.launch}\n          icon={ArrowUpRightIcon}\n          aria-label='launch'\n        />\n      </div>\n\n      <Divider />\n    </div>\n  )\n}\nStatusLineItem.propTypes = {\n  /**\n   * stat label\n   */\n  label: PropTypes.string.isRequired,\n  /**\n   * Total amount stat\n   */\n  amount: PropTypes.number,\n  /**\n   * Type of status for status chip\n   */\n  status: PropTypes.string,\n  /**\n   * list icon\n   */\n  icon: PropTypes.node,\n  /**\n   * onClick event\n   */\n  handleClick: PropTypes.func\n}\n","import React from 'react'\nimport { makeStyles, Card, CardContent, Typography } from '@material-ui/core'\nimport { StatusLineItem } from './StatusLineItem'\nimport { NotificationElement } from './NotificationElement'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex'\n  },\n  overviewContainer: {\n    width: theme.spacing(16),\n    height: theme.spacing(16),\n    background: '#393939', // Add to theme\n    marginRight: theme.spacing(2),\n    position: 'relative'\n  },\n  notification: {\n    position: 'absolute',\n    right: 0,\n    top: 0\n  },\n  totalNumber: {\n    textAlign: 'center',\n    // color: theme.palette.common.white\n    color: '#FFFFFF', // Hex color added to avoid TypeError\n    fontWeight: 400\n  },\n  label: {\n    display: 'flex',\n    justifyContent: 'center',\n    marginTop: -8,\n    // color: theme.pallette.common.white\n    color: '#FFFFFF'\n  },\n  itemContainer: {\n    width: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n    alignContent: 'space-around',\n    marginTop: theme.spacing(0.5)\n  }\n}))\n\nexport const TicketCard = ({\n  totalAmount,\n  label,\n  notification,\n  alertNumber,\n  ticketData,\n  component = 'h6'\n}) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <div>\n        <Card elevation={0} square className={classes.overviewContainer}>\n          <CardContent>\n            <Typography\n              variant='h1'\n              component={component}\n              className={classes.totalNumber}\n            >\n              {totalAmount}\n            </Typography>\n          </CardContent>\n          <div className={classes.label}>\n            <Typography variant='caption'>{label} </Typography>\n          </div>\n          {notification && (\n            <div className={classes.notification}>\n              <NotificationElement alertNumber={alertNumber} />\n            </div>\n          )}\n        </Card>\n      </div>\n\n      <div className={classes.itemContainer}>\n        {ticketData &&\n          ticketData.map((item) => {\n            return (\n              <StatusLineItem\n                label={item.label}\n                amount={item.amount}\n                status={item.status === 'error' && 'error'}\n                icon={item.icon}\n                key={item.id}\n              />\n            )\n          })}\n      </div>\n    </div>\n  )\n}\nTicketCard.propTypes = {\n  /**\n   * Total amount stat\n   */\n  totalAmount: PropTypes.number,\n  /**\n   * Stat label\n   */\n  label: PropTypes.string.isRequired,\n  /**\n   * Type of status to toggle notification\n   */\n  notification: PropTypes.bool,\n  /**\n   * amount of alert items\n   */\n  alertNumber: PropTypes.number,\n  /**\n   * prop for mapped data\n   */\n  ticketData: PropTypes.arrayOf(\n    PropTypes.shape({\n      ticketAmount: PropTypes.string.isRequired,\n      label: PropTypes.number.isRequired,\n      notification: PropTypes.number.isRequired,\n      alertNumber: PropTypes.number,\n      id: PropTypes.number.isRequired,\n      ticketData: PropTypes.arrayOf(\n        PropTypes.shape({\n          label: PropTypes.string.isRequired,\n          amount: PropTypes.number,\n          status: PropTypes.string.isRequired,\n          icon: PropTypes.node\n        })\n      )\n    }).isRequired\n  ).isRequired,\n  /**\n   * Header Tag override. Defaults to H2\n   */\n  component: PropTypes.string\n}\n\nTicketCard.defaultProps = {\n  component: 'h2'\n}\n"],"mappings":"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"}
+{"version":3,"file":"TicketCard-CpttpQoj.js","names":["useStyles","useStyles"],"sources":["../src/UI/dataDisplay/ticketCard/NotificationElement.jsx","../src/UI/dataDisplay/ticketCard/StatusLineItem.jsx","../src/UI/dataDisplay/ticketCard/TicketCard.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: 0,\n    height: 0,\n    borderTop: '0px solid transparent',\n    borderRight: `45px solid ${theme?.palette?.error?.main}`,\n    borderBottom: '45px solid transparent'\n  },\n  number: {\n    marginLeft: theme.spacing(3.5),\n    paddingTop: theme.spacing(0.5),\n    color: theme?.palette?.common?.white\n  }\n}))\n\nexport const NotificationElement = ({ alertNumber }) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.number}>\n        <Typography> {alertNumber} </Typography>\n      </div>\n    </div>\n  )\n}\nNotificationElement.propTypes = {\n  /**\n   * number of alert items\n   */\n  alertNumber: PropTypes.number.isRequired\n}\n","import React from 'react'\nimport { makeStyles, Divider, Typography } from '@material-ui/core'\nimport { FluentIconButton } from '../../inputs/buttons/FluentIconButton'\nimport { StatusChip } from '../status/StatusChip'\nimport { ArrowUpRightIcon } from '@fluentui/react-icons'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    width: '100%',\n    height: 44\n  },\n  wrapper: { display: 'flex' },\n  labelCount: {\n    flex: 1,\n    display: 'flex'\n  },\n  status: {\n    marginRight: theme.spacing(1)\n  },\n  icon: {\n    marginRight: theme.spacing(1)\n  }\n}))\n\nexport const StatusLineItem = ({\n  label,\n  amount,\n  status,\n  icon,\n  handleClick\n}) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.wrapper}>\n        <div className={classes.labelCount}>\n          <div className={classes.icon}> {icon} </div>\n          <Typography> {label} </Typography>\n        </div>\n        <div className={classes.status}>\n          {status === 'error' && <StatusChip label={amount} status={status} />}\n\n          {status !== 'error' && amount}\n        </div>\n        <FluentIconButton\n          onClick={handleClick}\n          className={classes.launch}\n          icon={ArrowUpRightIcon}\n          aria-label='launch'\n        />\n      </div>\n\n      <Divider />\n    </div>\n  )\n}\nStatusLineItem.propTypes = {\n  /**\n   * stat label\n   */\n  label: PropTypes.string.isRequired,\n  /**\n   * Total amount stat\n   */\n  amount: PropTypes.number,\n  /**\n   * Type of status for status chip\n   */\n  status: PropTypes.string,\n  /**\n   * list icon\n   */\n  icon: PropTypes.node,\n  /**\n   * onClick event\n   */\n  handleClick: PropTypes.func\n}\n","import React from 'react'\nimport { makeStyles, Card, CardContent, Typography } from '@material-ui/core'\nimport { StatusLineItem } from './StatusLineItem'\nimport { NotificationElement } from './NotificationElement'\nimport PropTypes from 'prop-types'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex'\n  },\n  overviewContainer: {\n    width: theme.spacing(16),\n    height: theme.spacing(16),\n    background: '#393939', // Add to theme\n    marginRight: theme.spacing(2),\n    position: 'relative'\n  },\n  notification: {\n    position: 'absolute',\n    right: 0,\n    top: 0\n  },\n  totalNumber: {\n    textAlign: 'center',\n    // color: theme.palette.common.white\n    color: '#FFFFFF', // Hex color added to avoid TypeError\n    fontWeight: 400\n  },\n  label: {\n    display: 'flex',\n    justifyContent: 'center',\n    marginTop: -8,\n    // color: theme.pallette.common.white\n    color: '#FFFFFF'\n  },\n  itemContainer: {\n    width: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n    alignContent: 'space-around',\n    marginTop: theme.spacing(0.5)\n  }\n}))\n\nexport const TicketCard = ({\n  totalAmount,\n  label,\n  notification,\n  alertNumber,\n  ticketData,\n  component = 'h6'\n}) => {\n  const classes = useStyles()\n\n  return (\n    <div className={classes.root}>\n      <div>\n        <Card elevation={0} square className={classes.overviewContainer}>\n          <CardContent>\n            <Typography\n              variant='h1'\n              component={component}\n              className={classes.totalNumber}\n            >\n              {totalAmount}\n            </Typography>\n          </CardContent>\n          <div className={classes.label}>\n            <Typography variant='caption'>{label} </Typography>\n          </div>\n          {notification && (\n            <div className={classes.notification}>\n              <NotificationElement alertNumber={alertNumber} />\n            </div>\n          )}\n        </Card>\n      </div>\n\n      <div className={classes.itemContainer}>\n        {ticketData &&\n          ticketData.map((item) => {\n            return (\n              <StatusLineItem\n                label={item.label}\n                amount={item.amount}\n                status={item.status === 'error' && 'error'}\n                icon={item.icon}\n                key={item.id}\n              />\n            )\n          })}\n      </div>\n    </div>\n  )\n}\nTicketCard.propTypes = {\n  /**\n   * Total amount stat\n   */\n  totalAmount: PropTypes.number,\n  /**\n   * Stat label\n   */\n  label: PropTypes.string.isRequired,\n  /**\n   * Type of status to toggle notification\n   */\n  notification: PropTypes.bool,\n  /**\n   * amount of alert items\n   */\n  alertNumber: PropTypes.number,\n  /**\n   * prop for mapped data\n   */\n  ticketData: PropTypes.arrayOf(\n    PropTypes.shape({\n      ticketAmount: PropTypes.string.isRequired,\n      label: PropTypes.number.isRequired,\n      notification: PropTypes.number.isRequired,\n      alertNumber: PropTypes.number,\n      id: PropTypes.number.isRequired,\n      ticketData: PropTypes.arrayOf(\n        PropTypes.shape({\n          label: PropTypes.string.isRequired,\n          amount: PropTypes.number,\n          status: PropTypes.string.isRequired,\n          icon: PropTypes.node\n        })\n      )\n    }).isRequired\n  ).isRequired,\n  /**\n   * Header Tag override. Defaults to H2\n   */\n  component: PropTypes.string\n}\n\nTicketCard.defaultProps = {\n  component: 'h2'\n}\n"],"mappings":";;;;;;;;AAIA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,OAAO;EACP,QAAQ;EACR,WAAW;EACX,aAAa,cAAc,OAAO,SAAS,OAAO;EAClD,cAAc;EACf;CACD,QAAQ;EACN,YAAY,MAAM,QAAQ,IAAI;EAC9B,YAAY,MAAM,QAAQ,GAAI;EAC9B,OAAO,OAAO,SAAS,QAAQ;EAChC;CACF,EAAE;AAEH,MAAa,uBAAuB,EAAE,kBAAkB;CACtD,MAAM,UAAUA,aAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,SAAI,WAAW,QAAQ,UACtB,oCAAC,kBAAW,KAAE,aAAY,IAAc,CACpC,CACF;;AAGV,oBAAoB,YAAY,EAI9B,aAAa,UAAU,OAAO,YAC/B;;;;AC5BD,MAAMC,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,OAAO;EACP,QAAQ;EACT;CACD,SAAS,EAAE,SAAS,QAAQ;CAC5B,YAAY;EACV,MAAM;EACN,SAAS;EACV;CACD,QAAQ,EACN,aAAa,MAAM,QAAQ,EAAE,EAC9B;CACD,MAAM,EACJ,aAAa,MAAM,QAAQ,EAAE,EAC9B;CACF,EAAE;AAEH,MAAa,kBAAkB,EAC7B,OACA,QACA,QACA,MACA,kBACI;CACJ,MAAM,UAAUA,aAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,SAAI,WAAW,QAAQ,WACtB,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAAC,SAAI,WAAW,QAAQ,QAAM,KAAE,MAAK,IAAO,EAC5C,oCAAC,kBAAW,KAAE,OAAM,IAAc,CAC9B,EACN,oCAAC,SAAI,WAAW,QAAQ,UACrB,WAAW,WAAW,oCAAC;EAAW,OAAO;EAAgB;GAAU,EAEnE,WAAW,WAAW,OACnB,EACN,oCAAC;EACC,SAAS;EACT,WAAW,QAAQ;EACnB,MAAM;EACN,cAAW;GACX,CACE,EAEN,oCAAC,cAAU,CACP;;AAGV,eAAe,YAAY;CAIzB,OAAO,UAAU,OAAO;CAIxB,QAAQ,UAAU;CAIlB,QAAQ,UAAU;CAIlB,MAAM,UAAU;CAIhB,aAAa,UAAU;CACxB;;;;ACzED,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EACJ,SAAS,QACV;CACD,mBAAmB;EACjB,OAAO,MAAM,QAAQ,GAAG;EACxB,QAAQ,MAAM,QAAQ,GAAG;EACzB,YAAY;EACZ,aAAa,MAAM,QAAQ,EAAE;EAC7B,UAAU;EACX;CACD,cAAc;EACZ,UAAU;EACV,OAAO;EACP,KAAK;EACN;CACD,aAAa;EACX,WAAW;EAEX,OAAO;EACP,YAAY;EACb;CACD,OAAO;EACL,SAAS;EACT,gBAAgB;EAChB,WAAW;EAEX,OAAO;EACR;CACD,eAAe;EACb,OAAO;EACP,SAAS;EACT,eAAe;EACf,cAAc;EACd,WAAW,MAAM,QAAQ,GAAI;EAC9B;CACF,EAAE;AAEH,MAAa,cAAc,EACzB,aACA,OACA,cACA,aACA,YACA,YAAY,WACR;CACJ,MAAM,UAAU,WAAW;AAE3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,aACC,oCAAC;EAAK,WAAW;EAAG;EAAO,WAAW,QAAQ;IAC5C,oCAAC,mBACC,oCAAC;EACC,SAAQ;EACG;EACX,WAAW,QAAQ;IAElB,YACU,CACD,EACd,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAAC,cAAW,SAAQ,aAAW,OAAM,IAAc,CAC/C,EACL,gBACC,oCAAC,SAAI,WAAW,QAAQ,gBACtB,oCAAC,uBAAiC,cAAe,CAC7C,CAEH,CACH,EAEN,oCAAC,SAAI,WAAW,QAAQ,iBACrB,cACC,WAAW,KAAK,SAAS;AACvB,SACE,oCAAC;GACC,OAAO,KAAK;GACZ,QAAQ,KAAK;GACb,QAAQ,KAAK,WAAW,WAAW;GACnC,MAAM,KAAK;GACX,KAAK,KAAK;IACV;GAEJ,CACA,CACF;;AAGV,WAAW,YAAY;CAIrB,aAAa,UAAU;CAIvB,OAAO,UAAU,OAAO;CAIxB,cAAc,UAAU;CAIxB,aAAa,UAAU;CAIvB,YAAY,UAAU,QACpB,UAAU,MAAM;EACd,cAAc,UAAU,OAAO;EAC/B,OAAO,UAAU,OAAO;EACxB,cAAc,UAAU,OAAO;EAC/B,aAAa,UAAU;EACvB,IAAI,UAAU,OAAO;EACrB,YAAY,UAAU,QACpB,UAAU,MAAM;GACd,OAAO,UAAU,OAAO;GACxB,QAAQ,UAAU;GAClB,QAAQ,UAAU,OAAO;GACzB,MAAM,UAAU;GACjB,CAAC,CACH;EACF,CAAC,CAAC,WACJ,CAAC;CAIF,WAAW,UAAU;CACtB;AAED,WAAW,eAAe,EACxB,WAAW,MACZ"}

package/dist/UI/dataDisplay/GraphCard/index.js

@@ -1,3 +1,3 @@
-import { t as GraphCard } from "../../../GraphCard-Dv4a99wo.js";
+import { t as GraphCard } from "../../../GraphCard-BhcSveF4.js";
 
 export { GraphCard };

package/dist/UI/dataDisplay/cardList/index.js

@@ -1,3 +1,3 @@
-import { n as PaginationPlacement, t as CardList } from "../../../CardList-BPNGTxsh.js";
+import { n as PaginationPlacement, t as CardList } from "../../../CardList-B8nTYXo7.js";
 
 export { CardList, PaginationPlacement };

package/dist/UI/dataDisplay/directory/index.js

@@ -1,3 +1,3 @@
-import { n as DirectoryListItem, t as Directory } from "../../../Directory-CoEKdRkU.js";
+import { n as DirectoryListItem, t as Directory } from "../../../Directory-MpK8T6IZ.js";
 
 export { Directory, DirectoryListItem };

package/dist/UI/dataDisplay/entityHeader/index.js

@@ -1,3 +1,3 @@
-import { t as EntityHeader } from "../../../EntityHeader-DKkYwvsi.js";
+import { t as EntityHeader } from "../../../EntityHeader-C3Ae5BLK.js";
 
 export { EntityHeader };

package/dist/UI/dataDisplay/map/index.js

@@ -1,3 +1,3 @@
-import { n as ColorKey, t as IconKey } from "../../../IconKey-D7fZ_U4O.js";
+import { n as ColorKey, t as IconKey } from "../../../IconKey-BLHF3hfg.js";
 
 export { ColorKey, IconKey };

package/dist/UI/dataDisplay/notes/index.js

@@ -1,3 +1,3 @@
-import { n as useStyles, r as Note, t as Notes } from "../../../Notes-UkwV2z4D.js";
+import { n as useStyles, r as Note, t as Notes } from "../../../Notes-YAF2dipI.js";
 
 export { Note, Notes, useStyles };

package/dist/UI/dataDisplay/ticketCard/index.js

@@ -1,3 +1,3 @@
-import { n as StatusLineItem, r as NotificationElement, t as TicketCard } from "../../../TicketCard-IqCCKSc0.js";
+import { n as StatusLineItem, r as NotificationElement, t as TicketCard } from "../../../TicketCard-CpttpQoj.js";
 
 export { NotificationElement, StatusLineItem, TicketCard };

package/dist/UI/dataDisplay/visualization/index.js

@@ -1,3 +1,3 @@
-import { n as GaugeGraph, r as RatioVisulization, t as AmbientVisualizer } from "../../../AmbientVisualizer-B1Xwwe0J.js";
+import { n as GaugeGraph, r as RatioVisulization, t as AmbientVisualizer } from "../../../AmbientVisualizer-BABKxgsK.js";
 
 export { AmbientVisualizer, GaugeGraph, RatioVisulization };

package/dist/UI/inputs/fieldArrayCard/index.js

@@ -1,3 +1,3 @@
-import { n as FieldType, t as FieldArrayCard } from "../../../FieldArrayCard-C1I5_qJ4.js";
+import { n as FieldType, t as FieldArrayCard } from "../../../FieldArrayCard-Ds_ysYWL.js";
 
 export { FieldArrayCard, FieldType };

package/dist/UI/inputs/link/index.js

@@ -1,4 +1,4 @@
 import { t as BreadCrumbMenu } from "../../../BreadCrumbMenu-AehSna6J.js";
-import { t as FluentLink } from "../../../FluentLink-D-gKioCQ.js";
+import { t as FluentLink } from "../../../FluentLink-CkA7BUEB.js";
 
 export { BreadCrumbMenu, FluentLink };

package/dist/UI/inputs/menus/index.js

@@ -1,4 +1,4 @@
-import { i as FluentSelectGroupMenu, n as FluentScrollLoadAutocompleteMenu, r as SelectGroupMenu, t as FluentSimpleSelect } from "../../../FluentSimpleSelect-Djff-up8.js";
-import { t as FluentSelectMenu } from "../../../FluentSelectMenu-BEREJbe-.js";
+import { i as FluentSelectGroupMenu, n as FluentScrollLoadAutocompleteMenu, r as SelectGroupMenu, t as FluentSimpleSelect } from "../../../FluentSimpleSelect-BfoxBQj4.js";
+import { t as FluentSelectMenu } from "../../../FluentSelectMenu-Cx274cVa.js";
 
 export { FluentScrollLoadAutocompleteMenu, FluentSelectGroupMenu, FluentSelectMenu, FluentSimpleSelect, SelectGroupMenu };

package/dist/UI/inputs/pickers/index.js

@@ -1,6 +1,6 @@
 import { t as FluentColorPicker } from "../../../FluentColorPicker-Wi2o3JqX.js";
 import { t as FluentDatePicker } from "../../../FluentDatePicker-C6WEywwM.js";
-import { n as UdpDateSelector, r as FluentDateTimePicker, t as UdpTimeSelector } from "../../../pickers-B-bB40GS.js";
-import { t as FluentTimePicker } from "../../../FluentTimePicker-hNcocKsd.js";
+import { t as FluentTimePicker } from "../../../FluentTimePicker-BFxFcgvX.js";
+import { n as UdpDateSelector, r as FluentDateTimePicker, t as UdpTimeSelector } from "../../../UdpTimeSelector-Dc5RiWq-.js";
 
 export { FluentColorPicker, FluentDatePicker, FluentDateTimePicker, FluentTimePicker, UdpDateSelector, UdpTimeSelector };

package/dist/UI/surfaces/cards/chartDisplayCards/index.js

@@ -1,3 +1,3 @@
-import { n as AmbientSplitStatCard, t as AmbientVisualizationCard } from "../../../../AmbientVisualizationCard-Dig-Mh_G.js";
+import { n as AmbientSplitStatCard, t as AmbientVisualizationCard } from "../../../../AmbientVisualizationCard-BmTQR121.js";
 
 export { AmbientSplitStatCard, AmbientVisualizationCard };

package/dist/{pickers-B-bB40GS.js → UdpTimeSelector-Dc5RiWq-.js}

@@ -144,4 +144,4 @@ UdpTimeSelector.propTypes = {
 
 //#endregion
 export { UdpDateSelector as n, FluentDateTimePicker as r, UdpTimeSelector as t };
-//# sourceMappingURL=pickers-B-bB40GS.js.map
+//# sourceMappingURL=UdpTimeSelector-Dc5RiWq-.js.map

package/dist/UdpTimeSelector-Dc5RiWq-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UdpTimeSelector-Dc5RiWq-.js","names":["useStyles","useStyles"],"sources":["../src/UI/inputs/pickers/FluentDateTimePicker.jsx","../src/UI/inputs/pickers/UdpDateSelector.jsx","../src/UI/inputs/pickers/UdpTimeSelector.jsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { makeStyles, InputAdornment } from '@material-ui/core';\nimport { EventDateIcon } from '@fluentui/react-icons';\nimport {\n  MuiPickersUtilsProvider,\n  KeyboardDateTimePicker\n} from '@material-ui/pickers';\nimport DateFnsUtils from '@date-io/date-fns';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  inputRoot: {\n    fontSize: 12\n  },\n  input: {\n    borderRadius: 2,\n    height: 32,\n    padding: 0,\n    paddingLeft: theme.spacing(1)\n  },\n  formTextInput: {\n    fontSize: 14\n  },\n  labelRoot: {\n    fontSize: 14\n  },\n  FormControl: {\n    display: 'none',\n    marginTop: 0\n  }\n}));\n\nexport const FluentDateTimePicker = (props) => {\n  const classes = useStyles();\n  const {\n    id,\n    udprecordid,\n    label,\n    startAdornment,\n    endAdornment,\n    handleDateChange: onChangeProp,\n    selectedDate,\n    ...otherProps\n  } = props;\n\n  const onChange = useCallback(\n    (e, value) => {\n      return onChangeProp?.(e, value);\n    },\n    [onChangeProp]\n  );\n\n  return (\n    <div>\n      <MuiPickersUtilsProvider utils={DateFnsUtils}>\n        <KeyboardDateTimePicker\n          // disableToolbar\n          // variant='inline'\n          format='MM/dd/yyyy HH:mm'\n          margin='normal'\n          id={id}\n          udprecordid={udprecordid}\n          inputVariant='outlined'\n          value={selectedDate}\n          onChange={onChange}\n          {...otherProps}\n          KeyboardButtonProps={{\n            'aria-label': 'change date',\n            udprecordid: udprecordid + '-button'\n          }}\n          keyboardIcon={<EventDateIcon style={{ fontSize: 16 }} />}\n          InputProps={{\n            classes: {\n              root: classes.input,\n              input: classes.formTextInput,\n              ...props.InputProps?.classes\n            },\n            ...props.InputProps,\n            ...startAdornment,\n            ...endAdornment,\n            startAdornment: (\n              <InputAdornment\n                classes={{ root: classes.inputRoot }}\n                className={classes.inputRoot}\n                position='start'\n              >\n                {label}\n              </InputAdornment>\n            )\n          }}\n          InputLabelProps={{\n            shrink: false,\n            classes: {\n              root: classes.labelRoot,\n              focused: classes.labelFocused\n            }\n          }}\n        />\n      </MuiPickersUtilsProvider>\n    </div>\n  );\n};\n\nFluentDateTimePicker.propTypes = {\n  /**\n   * Adornment label (eg, From: )\n   */\n  label: PropTypes.string.isRequired\n  /**\n   * Id\n   */\n};\n","import React from 'react';  \nimport { makeStyles} from '@material-ui/core';  \nimport PropTypes from 'prop-types';  \n  \nconst useStyles = makeStyles((theme) => ({  \n  dateInput: {  \n    borderRadius: 2,  \n    height: 32,  \n    padding: theme.spacing(1),  \n    margin: theme.spacing(1), // Add margin around the input  \n    fontSize: 14,  \n    border: '1px solid #ced4da',  \n    backgroundColor: 'transparent', // Set the background color to transparent  \n    '&:focus': {  \n      borderColor: theme.palette.primary.main,  \n      outline: 'none',  \n    },  \n  },  \n}));  \n  \nexport const UdpDateSelector = (props) => {  \n  const classes = useStyles();  \n  const {  \n    id,  \n    udprecordid,  \n    label,  \n    handleDateChange: onChangeProp,  \n    selectedDate,  \n    ...otherProps  \n  } = props;  \n  \n  const onChange = (event) => {  \n    return onChangeProp?.(event.target.value);  \n  };  \n  \n  return (  \n    <label htmlFor={id} className={classes.labelRoot}>  \n      {label}  \n      <input  \n        type=\"date\"  \n        id={id}  \n        className={classes.dateInput}  \n        value={selectedDate}  \n        onChange={onChange}  \n        {...otherProps}  \n      />  \n    </label>  \n  );  \n};  \n  \nUdpDateSelector.propTypes = {  \n  label: PropTypes.string.isRequired,  \n  id: PropTypes.string.isRequired,  \n  handleDateChange: PropTypes.func,  \n  selectedDate: PropTypes.string,  \n};  \n  \nexport default UdpDateSelector;  ","import React from 'react';  \nimport { makeStyles } from '@material-ui/core';  \nimport PropTypes from 'prop-types';  \n  \nconst useStyles = makeStyles((theme) => ({  \n  // Style for the time input box with transparent background  \n  timeInput: {  \n    borderRadius: 2, // Rounded corners with a radius of 2px  \n    height: 32, \n    padding: theme.spacing(1), // Padding inside the input box, typically 8px if default theme spacing is used  \n    margin: theme.spacing(1), // Margin outside the input box to create space around the element  \n    fontSize: 14, // Font size of 14px for the text inside the input  \n    border: '1px solid #ced4da', // Border of 1px solid grey, matching old Material-UI grey  \n    backgroundColor: 'transparent', \n    '&:focus': {  \n      borderColor: theme.palette.primary.main, // Border color changes to primary color when the input is focused  \n      outline: 'none', // Removes the default browser outline on focus  \n    },  \n  },  \n}));  \n\n  \nexport const UdpTimeSelector = (props) => {  \n  const classes = useStyles();  \n  const { id, label, ...otherProps } = props;  \n  \n  return (  \n    <label htmlFor={id} className={classes.labelRoot}>  \n      {label}  \n      <input  \n        type=\"time\"  \n        id={id}  \n        udprecordid={\"udpRecord-FluentTimePicker-\"+id}\n        className={classes.timeInput}  \n        {...otherProps}  \n      />  \n    </label>  \n  );  \n};  \n  \nUdpTimeSelector.propTypes = {  \n  /**  \n   * Label for the time input  \n   */  \n  label: PropTypes.string,  \n  /**  \n   * Id for the time input  \n   */  \n  id: PropTypes.string,  \n};  \n  \nexport default UdpTimeSelector; "],"mappings":"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"}

package/dist/{UdpTransactionsPage-CCcw7ZRU.js → UdpTransactionsPage-CNl_xeZO.js}

@@ -20,13 +20,14 @@ import { t as UdpTabs } from "./UdpTabs-DVZGEwOC.js";
 import { t as PageContainer } from "./PageContainer-DTXNLt_2.js";
 import { t as Adornment } from "./Adornment-Ciq1X7he.js";
 import { t as AmbientCard } from "./AmbientCard-CLW4bPCu.js";
-import { t as FluentDatePicker } from "./FluentDatePicker-C6WEywwM.js";
+import { t as AmbientTextField } from "./AmbientTextField-CdnqPJUw.js";
 import { t as FluentDialog } from "./FluentDialog-B5ZxvX1E.js";
 import { t as LinearProgress$1 } from "./LinearProgress-CpJeIaEP.js";
 import { t as FluentTextField } from "./FluentTextField-WfFk-koa.js";
 import { t as useAuthedUser } from "./useAuthedUser-Bhr7Yhlg.js";
 import { t as Divider$1 } from "./Divider-B63XWSBY.js";
 import { n as AmbientList } from "./dataDisplay-CTkvIsCs.js";
+import { t as AmbientAutoComplete } from "./AmbientAutoComplete-NohpvB31.js";
 import { t as EmptyStateDisplay } from "./EmptyStateDisplay-YOwCw38_.js";
 import { t as FileViewer } from "./fileViewer-BbIFHura.js";
 import { n as UdpTabPanel } from "./tabs-CAaJhUt5.js";
@@ -34,7 +35,7 @@ import { n as UdpTimeline } from "./timeline-CdeAJqvB.js";
 import { t as SearchMethodUdpGrid } from "./SearchMethodUdpGrid-CWYZUOx-.js";
 import { i as getLocalizedDateTimeString, t as formatDate } from "./dateUtils-COj9Xpy9.js";
 import { t as UdpActionCard } from "./UdpActionCard-D-YAYE-C.js";
-import { t as Attachments } from "./uploader-CGVZIlR1.js";
+import { t as Attachments } from "./uploader-YWjDebFN.js";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { CircularProgress, FormControlLabel, LinearProgress, Switch, makeStyles } from "@material-ui/core";
 import { useSnackbar } from "notistack";
@@ -47,6 +48,7 @@ import { ConfigService, UdpAttachmentItem, UdpTimelineConnector, UdpTimelineDot,
 import "./udp/pages/UdpTransactionsPage/sidesheets/WorkflowActions.css";
 import "./udp/pages/UdpTransactionsPage/sidesheets/EditTransaction.css";
 import "./udp/pages/UdpTransactionsPage/components/EditTransactionDetailsFooterItem.css";
+import "./udp/pages/UdpTransactionsPage/components/EditTransactionDetailsFormFields.css";
 import "./udp/pages/UdpTransactionsPage/UdpTransactionsPage.css";
 
 //#region src/stores/transactionStore.ts
@@ -1170,12 +1172,13 @@ var EditTransactionDetailsFooterItem_default = EditTransactionDetailsFooterItem;
 const EditTransactionDetailsFormFields = (props) => {
 	const { transaction, fieldAttributes } = props;
 	const { t } = useTranslation();
+	const { getHiddenFields, getRequiredFields } = useTransactionEngine(transaction.transactionTypeId);
 	const fieldComponentMap = {
-		string: FluentTextField,
-		datetime: FluentDatePicker,
-		number: FluentTextField,
+		string: AmbientTextField,
+		datetime: AmbientTextField,
+		number: AmbientTextField,
 		bool: Switch,
-		array: FluentTextFieldAutoComplete
+		array: AmbientAutoComplete
 	};
 	const getEntityName = (optionValuesArr, entityId) => {
 		return (optionValuesArr?.find((entity) => entity.id == entityId))?.name;
@@ -1185,29 +1188,41 @@ const EditTransactionDetailsFormFields = (props) => {
 		"short",
 		"long"
 	];
+	const removeTimeFormatDate = (date) => {
+		const parsedDate = new Date(date);
+		if (parsedDate.getTime()) {
+			const year = parsedDate.getFullYear();
+			const month = parsedDate.getMonth() + 1;
+			const day = parsedDate.getDate().toString().padStart(2, "0");
+			return `${year}-${month.toString().padStart(2, "0")}-${day}`;
+		}
+		return parsedDate;
+	};
 	const dataTypeComponentMap = (transaction$1, attribute) => {
-		let formattedSanitizedName = attribute.sanitizedName.slice(0, 1).toLowerCase() + attribute.sanitizedName.slice(1);
-		let formattedDataType = attribute.dataType.includes("?") ? attribute.dataType.split("?")[0].toLowerCase() : attribute.dataType.toLowerCase();
-		formattedDataType = numberDataTypes.includes(formattedDataType) ? "number" : formattedDataType;
-		if (attribute.sanitizedName.toLowerCase() == "id") formattedSanitizedName = formattedSanitizedName.toLowerCase();
-		const isAsscoiationLabel = attribute.properties.maintainenceConfig.associationLabel;
+		const fieldName = attribute.name;
+		let fieldDataType = attribute.type.toLowerCase();
+		fieldDataType = numberDataTypes.includes(fieldDataType) ? "number" : fieldDataType;
+		const isAsscoiationLabel = attribute.associationLabel;
 		let fieldComponentProps = null;
-		switch (formattedDataType) {
+		switch (fieldDataType) {
 			case "number":
 				fieldComponentProps = {
-					initialValue: transaction$1.entityBusinessObject[formattedSanitizedName],
+					initialValue: transaction$1.entityBusinessObject[fieldName],
 					type: "number",
 					InputProps: { inputProps: { min: 0 } }
 				};
 				break;
 			case "datetime":
-				fieldComponentProps = { initialValue: transaction$1.entityBusinessObject[formattedSanitizedName] };
+				fieldComponentProps = {
+					initialValue: removeTimeFormatDate(transaction$1.entityBusinessObject[fieldName]),
+					type: "date"
+				};
 				break;
 			case "array":
 				fieldComponentProps = {
-					options: attribute?.options.map((option) => option.id),
-					optionLabelDisplayFunction: (option) => getEntityName(attribute?.options, option),
-					initialValue: transaction$1.entityBusinessObject[formattedSanitizedName]
+					options: attribute?.options?.map((option) => option.id),
+					getOptionLabelFunction: (option) => getEntityName(attribute?.options, option) || option,
+					initialValue: transaction$1.entityBusinessObject[fieldName]
 				};
 				break;
 			case "bool":
@@ -1216,24 +1231,26 @@ const EditTransactionDetailsFormFields = (props) => {
 					initialValue: false
 				};
 				break;
-			default: fieldComponentProps = { initialValue: transaction$1.entityBusinessObject[formattedSanitizedName] };
+			default: fieldComponentProps = { initialValue: transaction$1.entityBusinessObject[fieldName] };
 		}
-		let formLabel = isAsscoiationLabel ? attribute.domainName + " Name" : attribute.sanitizedName;
+		const formLabel = isAsscoiationLabel ? fieldName + " Name" : fieldName;
+		const isRequired = getRequiredFields(transaction$1).includes(fieldName) || attribute.required;
+		const isHidden = getHiddenFields(transaction$1).includes(fieldName) || attribute.isPrimaryKey || !attribute.extendedProperties.defaultVisible;
 		let fieldComponent = /* @__PURE__ */ React.createElement(Field, {
-			component: fieldComponentMap[formattedDataType] ?? FluentTextField,
+			component: fieldComponentMap[fieldDataType] ?? AmbientTextField,
 			label: t(formLabel),
-			name: formattedSanitizedName,
+			name: fieldName,
 			fullWidth: true,
 			variant: "outlined",
 			margin: "normal",
-			disabled: attribute.properties.isReadOnly,
-			required: !attribute.dataType.includes("?") && formattedDataType != "bool",
+			disabled: attribute.isReadOnly,
+			required: isRequired && fieldDataType != "bool",
 			...fieldComponentProps
 		});
-		return /* @__PURE__ */ React.createElement(React.Fragment, null, attribute.dataType == "bool" ? /* @__PURE__ */ React.createElement(FormControlLabel, {
+		return /* @__PURE__ */ React.createElement(React.Fragment, null, !isHidden && (fieldDataType == "bool" ? /* @__PURE__ */ React.createElement(FormControlLabel, {
 			control: fieldComponent,
 			label: formLabel
-		}) : fieldComponent);
+		}) : fieldComponent));
 	};
 	return /* @__PURE__ */ React.createElement(React.Fragment, null, fieldAttributes.map((attribute) => {
 		return /* @__PURE__ */ React.createElement(React.Fragment, null, dataTypeComponentMap(transaction, attribute));
@@ -1249,7 +1266,11 @@ const EditTransactionDetailsForm = (props) => {
 	const fullyQualifiedName = transaction.entityBusinessKey?.split("|")[0];
 	const { handleErrorSnackbar, handleSuccessSnackbar } = useHandleAxiosSnackbar();
 	const { t } = useTranslation();
-	const [{ data: udpObjectInfo }, fetchUdpObjectInfo] = useAxiosMutate(`${process.env.REACT_APP_PRODUCT_API_BASE}`, `UdpObjectInfo/search`, {
+	const { currentApiCatalogId, catalogsMap } = useCatalogStore();
+	const catalogObjectList = useMemo(() => {
+		if (catalogsMap && currentApiCatalogId && catalogsMap[currentApiCatalogId]) return catalogsMap[currentApiCatalogId]?.ctlg?.catalogObjectList;
+	}, [catalogsMap, currentApiCatalogId]);
+	const [{ data: udpObjectInfo }, fetchUdpObjectInfo] = useAxiosMutate(ConfigService$1.productV1ApiUrl, `UdpObjectInfo/search`, {
 		method: "post",
 		data: {
 			eagerLoad: true,
@@ -1262,9 +1283,9 @@ const EditTransactionDetailsForm = (props) => {
 			}]
 		}
 	});
-	const updateFieldInfo = (tableEntries, filteredEntityFieldInfo, fkFieldInfo, fkDomainName) => {
+	const updateFieldInfo = (tableEntries, catalogObjectFieldInfo, fkFieldInfo, fkDomainName) => {
 		let updatedFields = {
-			dataType: "array",
+			type: "array",
 			options: tableEntries,
 			domainName: fkDomainName
 		};
@@ -1272,29 +1293,87 @@ const EditTransactionDetailsForm = (props) => {
 			...fkFieldInfo,
 			...updatedFields
 		};
-		const index = filteredEntityFieldInfo.findIndex((f) => f.id === fkFieldInfo.id);
-		if (index != -1) filteredEntityFieldInfo[index] = updatedFieldInfo;
+		const index = catalogObjectFieldInfo.findIndex((f) => f.name.toLowerCase() === fkFieldInfo.name.toLowerCase());
+		if (index != -1) catalogObjectFieldInfo[index] = updatedFieldInfo;
 	};
-	const filterAdjustEntityAttributes = async (entityObjectInfo) => {
-		let filteredEntityFieldInfo = entityObjectInfo.objectFieldInfo.filter((fieldInfo) => fieldInfo.properties.isDefaultVisible);
-		await Promise.all(entityObjectInfo.childObjectAssociations.map(async (coa) => {
-			let fkFieldInfo = filteredEntityFieldInfo.find((fieldInfo) => fieldInfo.id == coa.sourceFieldInfoID);
-			if (fkFieldInfo?.id == coa.sourceFieldInfoID && coa.cardinality != CardinalityTypeEnums.Many_To_Many) {
-				let fkDomainName = (await apiMutate(`${process.env.REACT_APP_PRODUCT_API_BASE}`, `UdpObjectInfo/${coa.targetObjectID}`, { method: "get" })).data.sanitizedName;
-				const getTableEntriesResp = await apiMutate(`${process.env.REACT_APP_PRODUCT_API_BASE}`, `${fkDomainName}`, { method: "get" });
-				if (getTableEntriesResp.data.length > 0) updateFieldInfo(getTableEntriesResp.data, filteredEntityFieldInfo, fkFieldInfo, fkDomainName);
-			}
-		}));
-		return filteredEntityFieldInfo;
+	const mergeCatalogObjectInfoFieldInfo = useCallback((entityCatalogObjectInfo, filteredEntityFieldInfo) => {
+		return entityCatalogObjectInfo.map((entityCatalogObject) => {
+			let matchingEntityFieldInfo = filteredEntityFieldInfo.find((fieldInfo) => {
+				let formattedFieldName = fieldInfo.name.slice(0, 1).toLowerCase() + fieldInfo.name.slice(1);
+				if (fieldInfo.name == "ID") formattedFieldName = formattedFieldName.toLowerCase();
+				return formattedFieldName == entityCatalogObject.name;
+			});
+			if (matchingEntityFieldInfo) {
+				let additional_fields = {
+					hidden: matchingEntityFieldInfo.properties.maintainenceConfig.hidden,
+					associationLabel: matchingEntityFieldInfo.properties.maintainenceConfig.associationLabel,
+					isPrimaryKey: matchingEntityFieldInfo.isPrimaryKey
+				};
+				return {
+					...entityCatalogObject,
+					...additional_fields
+				};
+			} else return entityCatalogObject;
+		});
+	}, []);
+	const filterOutManyToManyRelationships = (CatalogObjectInfo) => {
+		return CatalogObjectInfo.filter((catalogObject) => {
+			const cardinality = catalogObject.extendedProperties?.childEntityAssoc?.Cardinality;
+			if (cardinality != void 0) return cardinality != CardinalityTypeEnums.Many_To_Many && cardinality != CardinalityTypeEnums.One_To_One && catalogObject.name.toLowerCase() != "businessobjectkey";
+			else return catalogObject.name.toLowerCase() != "businessobjectkey";
+		});
 	};
+	const updateFkFields = useCallback(async (entityCatalogObjectInfo, catalogObjectInfo) => {
+		const childEntityAssociation = catalogObjectInfo.extendedProperties.childEntityAssoc;
+		if (childEntityAssociation.Cardinality != void 0) {
+			const foreignKeyAssociationFields = childEntityAssociation.Keys[0].split(",");
+			let fieldsInAssociationToIgnore = [
+				"id",
+				"businessobjectkey",
+				"entitybusinesskey"
+			];
+			return Promise.all(foreignKeyAssociationFields.map(async (fkFieldName) => {
+				if (fkFieldName.toLowerCase() != "id" && !fieldsInAssociationToIgnore.includes(fkFieldName.toLowerCase())) {
+					let fkFieldInfo = entityCatalogObjectInfo.find((field) => field.name.toLowerCase() == fkFieldName.toLowerCase());
+					const fkDomainName = getSanitizedName(childEntityAssociation.TargetType);
+					try {
+						const getTableEntriesResp = await apiMutate(ConfigService$1.productV1ApiUrl, `${fkDomainName}`, { method: "get" });
+						if (getTableEntriesResp.data.length > 0 && fkFieldInfo) updateFieldInfo(getTableEntriesResp.data, entityCatalogObjectInfo, fkFieldInfo, fkDomainName);
+					} catch (error) {
+						handleErrorSnackbar(new Error(t(`Error finiding field information! Please try again.`)));
+					}
+				}
+			}));
+		}
+	}, [handleErrorSnackbar, t]);
+	const filterAdjustEntityAttributes = useCallback(async (catalogObjectInfo) => {
+		let entityCatalogObjectInfo = catalogObjectInfo;
+		entityCatalogObjectInfo = filterOutManyToManyRelationships(entityCatalogObjectInfo);
+		let filteredEntityFieldInfo = (await fetchUdpObjectInfo()).data.pageList[0].objectFieldInfo.filter((fieldInfo) => fieldInfo.properties.isDefaultVisible);
+		await Promise.all(entityCatalogObjectInfo.map((catalogObjectInfo$1) => {
+			return updateFkFields(entityCatalogObjectInfo, catalogObjectInfo$1);
+		}));
+		entityCatalogObjectInfo = entityCatalogObjectInfo.filter((catalogObject) => !catalogObject.extendedProperties.childEntity);
+		return mergeCatalogObjectInfoFieldInfo(entityCatalogObjectInfo, filteredEntityFieldInfo);
+	}, [
+		fetchUdpObjectInfo,
+		mergeCatalogObjectInfoFieldInfo,
+		updateFkFields
+	]);
 	useEffect(() => {
-		fetchUdpObjectInfo().then((udpObjectInfoResp) => {
-			filterAdjustEntityAttributes(udpObjectInfoResp.data.pageList[0]).then((filteredResp) => {
+		if (catalogObjectList) {
+			let domainName = transaction.entityBusinessKey.split("|")[0].split(".").pop();
+			let domainCatalogObject = catalogObjectList?.find((catalogObject) => getSanitizedName(catalogObject.catalogObjectName) == domainName);
+			if (domainCatalogObject) filterAdjustEntityAttributes(domainCatalogObject.properties).then((filteredResp) => {
 				setEntityAttributes(filteredResp);
 			});
-		});
-	}, []);
-	const executeSaveChanges = useCallback(async (data) => apiMutate(ConfigService.productV1ApiUrl, `udpTransaction/${transaction?.transactionId}/saveChanges`, { method: "put" }, data), [transaction.transactionId]);
+		}
+	}, [
+		filterAdjustEntityAttributes,
+		catalogObjectList,
+		transaction
+	]);
+	const executeSaveChanges = useCallback(async (data) => apiMutate(ConfigService$1.productV1ApiUrl, `udpTransaction/${transaction?.transactionId}/saveChanges`, { method: "put" }, data), [transaction.transactionId]);
 	const onSubmit = useCallback(async (values) => {
 		if ((await executeSaveChanges({ data: values }))?.status === 200) handleSuccessSnackbar(t("Transaction has been saved successfully"));
 		else handleErrorSnackbar(new Error(t(`Error saving Transaction. Please try again later.`)));
@@ -2045,4 +2124,4 @@ var UdpTransactionsPage_exports = /* @__PURE__ */ __export({ default: () => UdpT
 
 //#endregion
 export { UdpTransactionsPage_default as n, UdpTransactionsPage_exports as t };
-//# sourceMappingURL=UdpTransactionsPage-CCcw7ZRU.js.map
+//# sourceMappingURL=UdpTransactionsPage-CNl_xeZO.js.map