udp-react-enterprise-component-library 25.18.1-beta.65 → 25.18.1-beta.66

package/dist/{TrimForAvatar-BmM2bU6E.js → TrimForAvatar-BP1gZWd5.js}

@@ -5,4 +5,4 @@ const TrimForAvatar = (avatar) => {
 
 //#endregion
 export { TrimForAvatar as t };
-//# sourceMappingURL=TrimForAvatar-BmM2bU6E.js.map
+//# sourceMappingURL=TrimForAvatar-BP1gZWd5.js.map

package/dist/{TrimForAvatar-BmM2bU6E.js.map → TrimForAvatar-BP1gZWd5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TrimForAvatar-BmM2bU6E.js","names":[],"sources":["../src/utilities/TrimForAvatar.js"],"sourcesContent":["export const TrimForAvatar = (avatar) => {\n  return avatar?.trim()?.charAt(0) || '?'\n}\n"],"mappings":";AAAA,MAAa,iBAAiB,WAAW;AACvC,QAAO,QAAQ,MAAM,EAAE,OAAO,EAAE,IAAI"}
+{"version":3,"file":"TrimForAvatar-BP1gZWd5.js","names":[],"sources":["../src/utilities/TrimForAvatar.js"],"sourcesContent":["export const TrimForAvatar = (avatar) => {\n  return avatar?.trim()?.charAt(0) || '?'\n}\n"],"mappings":";AAAA,MAAa,iBAAiB,WAAW;AACvC,QAAO,QAAQ,MAAM,EAAE,OAAO,EAAE,IAAI"}

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

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

package/dist/UI/inputs/buttons/UdpActionCard/index.js

@@ -1,3 +1,3 @@
-import { t as UdpActionCard } from "../../../../UdpActionCard-D-YAYE-C.js";
+import { t as UdpActionCard } from "../../../../UdpActionCard-VtAacuCM.js";
 
 export { UdpActionCard };

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

@@ -8,8 +8,8 @@ import { t as AmbientToggleButton } from "../../../AmbientToggleButton-BjyjXj8S.
 import { n as styles } from "../../../AmbientToggleButtonGroupDefault-CngfAplM.js";
 import { t as AmbientChipButton } from "../../../AmbientChipButton-DYAYXuKp.js";
 import { t as IconButtonWithTooltip } from "../../../IconButtonWithToolTip-DswviiJB.js";
-import { a as FluentMenuListItem, i as FluentMenuListButton, n as FluentCompoundButton, r as FluentUploadButton, t as FluentUploadIconButton } from "../../../buttons-CuLiERQe.js";
-import { t as AmbientToggleButtonGroup } from "../../../AmbientToggleButtonGroup-Bi9yW5gC.js";
-import { t as UdpActionCard } from "../../../UdpActionCard-D-YAYE-C.js";
+import { a as FluentMenuListItem, i as FluentMenuListButton, n as FluentCompoundButton, r as FluentUploadButton, t as FluentUploadIconButton } from "../../../buttons-DyKpA2qY.js";
+import { t as AmbientToggleButtonGroup } from "../../../AmbientToggleButtonGroup-DgFod3VK.js";
+import { t as UdpActionCard } from "../../../UdpActionCard-VtAacuCM.js";
 
 export { AmbientCardButton, AmbientChipButton, AmbientPopoverMenuItem, AmbientToggleButton, AmbientToggleButtonGroup, AmbientTokenButton, FluentButton, FluentCompoundButton, FluentIconButton, FluentMenuListButton, FluentMenuListItem, FluentUploadButton, FluentUploadIconButton, IconButtonWithTooltip, PrimaryActionButton, ToolBarButton, UdpActionCard, styles };

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

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

package/dist/{UdpActionCard-D-YAYE-C.js → UdpActionCard-VtAacuCM.js}

@@ -83,4 +83,4 @@ UdpActionCard.propTypes = {
 
 //#endregion
 export { UdpActionCard as t };
-//# sourceMappingURL=UdpActionCard-D-YAYE-C.js.map
+//# sourceMappingURL=UdpActionCard-VtAacuCM.js.map

package/dist/{UdpActionCard-D-YAYE-C.js.map → UdpActionCard-VtAacuCM.js.map}

@@ -1 +1 @@
-{"version":3,"file":"UdpActionCard-D-YAYE-C.js","names":[],"sources":["../src/UI/inputs/buttons/UdpActionCard/UdpActionCard.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport { FluentIcon } from '../../../../utilities/iconLibrary';\nimport './UdpActionCard.css';\n\n/**\n * UdpActionCard - An accessible workflow card component\n *\n * @param {Object} props\n * @param {React.Component} props.icon - Fluent UI icon component\n * @param {string} props.iconColor - Icon color (CSS var, hex, or system color: info, warning, error, success, note)\n * @param {string} props.primaryText - Main heading text\n * @param {string} props.secondaryText - Description text\n * @param {string} [props.href] - External link URL\n * @param {string} [props.to] - React Router link path\n * @param {function} [props.onClick] - Click handler\n * @param {string} [props.className] - Additional CSS classes\n */\nexport const UdpActionCard = ({\n  icon,\n  iconColor = 'info',\n  primaryText,\n  secondaryText,\n  href,\n  to,\n  onClick,\n  className = '',\n  ...rest\n}) => {\n  // Resolve icon color to CSS variable or direct value\n  const getIconColor = () => {\n    const systemColors = {\n      info: 'var(--info-color-main)',\n      warning: 'var(--warning-color-main)',\n      error: 'var(--error-color-main)',\n      success: 'var(--success-color-main)',\n      note: 'var(--note-color-main)',\n      primary: 'var(--primary-color-main)',\n      secondary: 'var(--secondary-color-main)',\n    };\n\n    // Check if it's a system color\n    if (systemColors[iconColor]) {\n      return systemColors[iconColor];\n    }\n\n    // Check if it's already a CSS variable\n    if (iconColor.startsWith('var(--')) {\n      return iconColor;\n    }\n\n    // Otherwise, treat as hex or named color\n    return iconColor;\n  };\n\n  const resolvedIconColor = getIconColor();\n\n  // Safety check: ensure icon prop is provided\n  if (!icon) {\n    console.error('UdpActionCard: icon prop is required');\n    return null;\n  }\n\n  // Card content\n  const cardContent = (\n    <>\n      <div\n        className=\"udp-action-card__icon\"\n        style={{ color: resolvedIconColor }}\n      >\n        <FluentIcon component={icon} size={48} customSize />\n      </div>\n      <div className=\"udp-action-card__content\">\n        <div className=\"udp-action-card__primary-text\">{primaryText}</div>\n        <div className=\"udp-action-card__secondary-text\">{secondaryText}</div>\n      </div>\n    </>\n  );\n\n  // Determine which element to render\n  const commonProps = {\n    className: `udp-action-card ${className}`,\n    style: { '--card-border-color': resolvedIconColor },\n    ...rest,\n  };\n\n  // External link\n  if (href) {\n    return (\n      <a {...commonProps} href={href} rel=\"noopener noreferrer\">\n        {cardContent}\n      </a>\n    );\n  }\n\n  // Router link\n  if (to) {\n    return (\n      <Link {...commonProps} to={to}>\n        {cardContent}\n      </Link>\n    );\n  }\n\n  // Button with onClick\n  if (onClick) {\n    return (\n      <button {...commonProps} onClick={onClick} type=\"button\">\n        {cardContent}\n      </button>\n    );\n  }\n\n  // Default: non-interactive div\n  return (\n    <div {...commonProps} role=\"article\">\n      {cardContent}\n    </div>\n  );\n};\n\nUdpActionCard.propTypes = {\n  icon: PropTypes.elementType.isRequired,\n  iconColor: PropTypes.string,\n  primaryText: PropTypes.string.isRequired,\n  secondaryText: PropTypes.string.isRequired,\n  href: PropTypes.string,\n  to: PropTypes.string,\n  onClick: PropTypes.func,\n  className: PropTypes.string,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAa,iBAAiB,EAC5B,MACA,YAAY,QACZ,aACA,eACA,MACA,IACA,SACA,YAAY,IACZ,GAAG,WACC;CAEJ,MAAM,qBAAqB;EACzB,MAAM,eAAe;GACnB,MAAM;GACN,SAAS;GACT,OAAO;GACP,SAAS;GACT,MAAM;GACN,SAAS;GACT,WAAW;GACZ;AAGD,MAAI,aAAa,WACf,QAAO,aAAa;AAItB,MAAI,UAAU,WAAW,SAAS,CAChC,QAAO;AAIT,SAAO;;CAGT,MAAM,oBAAoB,cAAc;AAGxC,KAAI,CAAC,MAAM;AACT,UAAQ,MAAM,uCAAuC;AACrD,SAAO;;CAIT,MAAM,cACJ,0DACE,oCAAC;EACC,WAAU;EACV,OAAO,EAAE,OAAO,mBAAmB;IAEnC,oCAAC;EAAW,WAAW;EAAM,MAAM;EAAI;GAAa,CAChD,EACN,oCAAC,SAAI,WAAU,8BACb,oCAAC,SAAI,WAAU,mCAAiC,YAAkB,EAClE,oCAAC,SAAI,WAAU,qCAAmC,cAAoB,CAClE,CACL;CAIL,MAAM,cAAc;EAClB,WAAW,mBAAmB;EAC9B,OAAO,EAAE,uBAAuB,mBAAmB;EACnD,GAAG;EACJ;AAGD,KAAI,KACF,QACE,oCAAC;EAAE,GAAI;EAAmB;EAAM,KAAI;IACjC,YACC;AAKR,KAAI,GACF,QACE,oCAAC;EAAK,GAAI;EAAiB;IACxB,YACI;AAKX,KAAI,QACF,QACE,oCAAC;EAAO,GAAI;EAAsB;EAAS,MAAK;IAC7C,YACM;AAKb,QACE,oCAAC;EAAI,GAAI;EAAa,MAAK;IACxB,YACG;;AAIV,cAAc,YAAY;CACxB,MAAM,UAAU,YAAY;CAC5B,WAAW,UAAU;CACrB,aAAa,UAAU,OAAO;CAC9B,eAAe,UAAU,OAAO;CAChC,MAAM,UAAU;CAChB,IAAI,UAAU;CACd,SAAS,UAAU;CACnB,WAAW,UAAU;CACtB"}
+{"version":3,"file":"UdpActionCard-VtAacuCM.js","names":[],"sources":["../src/UI/inputs/buttons/UdpActionCard/UdpActionCard.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport { FluentIcon } from '../../../../utilities/iconLibrary';\nimport './UdpActionCard.css';\n\n/**\n * UdpActionCard - An accessible workflow card component\n *\n * @param {Object} props\n * @param {React.Component} props.icon - Fluent UI icon component\n * @param {string} props.iconColor - Icon color (CSS var, hex, or system color: info, warning, error, success, note)\n * @param {string} props.primaryText - Main heading text\n * @param {string} props.secondaryText - Description text\n * @param {string} [props.href] - External link URL\n * @param {string} [props.to] - React Router link path\n * @param {function} [props.onClick] - Click handler\n * @param {string} [props.className] - Additional CSS classes\n */\nexport const UdpActionCard = ({\n  icon,\n  iconColor = 'info',\n  primaryText,\n  secondaryText,\n  href,\n  to,\n  onClick,\n  className = '',\n  ...rest\n}) => {\n  // Resolve icon color to CSS variable or direct value\n  const getIconColor = () => {\n    const systemColors = {\n      info: 'var(--info-color-main)',\n      warning: 'var(--warning-color-main)',\n      error: 'var(--error-color-main)',\n      success: 'var(--success-color-main)',\n      note: 'var(--note-color-main)',\n      primary: 'var(--primary-color-main)',\n      secondary: 'var(--secondary-color-main)',\n    };\n\n    // Check if it's a system color\n    if (systemColors[iconColor]) {\n      return systemColors[iconColor];\n    }\n\n    // Check if it's already a CSS variable\n    if (iconColor.startsWith('var(--')) {\n      return iconColor;\n    }\n\n    // Otherwise, treat as hex or named color\n    return iconColor;\n  };\n\n  const resolvedIconColor = getIconColor();\n\n  // Safety check: ensure icon prop is provided\n  if (!icon) {\n    console.error('UdpActionCard: icon prop is required');\n    return null;\n  }\n\n  // Card content\n  const cardContent = (\n    <>\n      <div\n        className=\"udp-action-card__icon\"\n        style={{ color: resolvedIconColor }}\n      >\n        <FluentIcon component={icon} size={48} customSize />\n      </div>\n      <div className=\"udp-action-card__content\">\n        <div className=\"udp-action-card__primary-text\">{primaryText}</div>\n        <div className=\"udp-action-card__secondary-text\">{secondaryText}</div>\n      </div>\n    </>\n  );\n\n  // Determine which element to render\n  const commonProps = {\n    className: `udp-action-card ${className}`,\n    style: { '--card-border-color': resolvedIconColor },\n    ...rest,\n  };\n\n  // External link\n  if (href) {\n    return (\n      <a {...commonProps} href={href} rel=\"noopener noreferrer\">\n        {cardContent}\n      </a>\n    );\n  }\n\n  // Router link\n  if (to) {\n    return (\n      <Link {...commonProps} to={to}>\n        {cardContent}\n      </Link>\n    );\n  }\n\n  // Button with onClick\n  if (onClick) {\n    return (\n      <button {...commonProps} onClick={onClick} type=\"button\">\n        {cardContent}\n      </button>\n    );\n  }\n\n  // Default: non-interactive div\n  return (\n    <div {...commonProps} role=\"article\">\n      {cardContent}\n    </div>\n  );\n};\n\nUdpActionCard.propTypes = {\n  icon: PropTypes.elementType.isRequired,\n  iconColor: PropTypes.string,\n  primaryText: PropTypes.string.isRequired,\n  secondaryText: PropTypes.string.isRequired,\n  href: PropTypes.string,\n  to: PropTypes.string,\n  onClick: PropTypes.func,\n  className: PropTypes.string,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAa,iBAAiB,EAC5B,MACA,YAAY,QACZ,aACA,eACA,MACA,IACA,SACA,YAAY,IACZ,GAAG,WACC;CAEJ,MAAM,qBAAqB;EACzB,MAAM,eAAe;GACnB,MAAM;GACN,SAAS;GACT,OAAO;GACP,SAAS;GACT,MAAM;GACN,SAAS;GACT,WAAW;GACZ;AAGD,MAAI,aAAa,WACf,QAAO,aAAa;AAItB,MAAI,UAAU,WAAW,SAAS,CAChC,QAAO;AAIT,SAAO;;CAGT,MAAM,oBAAoB,cAAc;AAGxC,KAAI,CAAC,MAAM;AACT,UAAQ,MAAM,uCAAuC;AACrD,SAAO;;CAIT,MAAM,cACJ,0DACE,oCAAC;EACC,WAAU;EACV,OAAO,EAAE,OAAO,mBAAmB;IAEnC,oCAAC;EAAW,WAAW;EAAM,MAAM;EAAI;GAAa,CAChD,EACN,oCAAC,SAAI,WAAU,8BACb,oCAAC,SAAI,WAAU,mCAAiC,YAAkB,EAClE,oCAAC,SAAI,WAAU,qCAAmC,cAAoB,CAClE,CACL;CAIL,MAAM,cAAc;EAClB,WAAW,mBAAmB;EAC9B,OAAO,EAAE,uBAAuB,mBAAmB;EACnD,GAAG;EACJ;AAGD,KAAI,KACF,QACE,oCAAC;EAAE,GAAI;EAAmB;EAAM,KAAI;IACjC,YACC;AAKR,KAAI,GACF,QACE,oCAAC;EAAK,GAAI;EAAiB;IACxB,YACI;AAKX,KAAI,QACF,QACE,oCAAC;EAAO,GAAI;EAAsB;EAAS,MAAK;IAC7C,YACM;AAKb,QACE,oCAAC;EAAI,GAAI;EAAa,MAAK;IACxB,YACG;;AAIV,cAAc,YAAY;CACxB,MAAM,UAAU,YAAY;CAC5B,WAAW,UAAU;CACrB,aAAa,UAAU,OAAO;CAC9B,eAAe,UAAU,OAAO;CAChC,MAAM,UAAU;CAChB,IAAI,UAAU;CACd,SAAS,UAAU;CACnB,WAAW,UAAU;CACtB"}

package/dist/{UdpTransactionTypesPage-CWA-n7y0.js → UdpTransactionTypesPage-DgFxT4pz.js}

@@ -27,10 +27,53 @@ import { useTranslation } from "react-i18next";
 import { FieldArray } from "react-final-form-arrays";
 
 //#region src/udp/pages/UdpTransactionTypesPage/forms/UdpTransactionTypeForm.jsx
+const useStyles$3 = makeStyles((theme) => ({
+	domainFields: {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "flex-end",
+		justifyContent: "flex-start",
+		"& > *": { marginRight: theme.spacing(2) }
+	},
+	domainValueField: { minWidth: "200px" },
+	addRemoveButtons: {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "flex-start",
+		margin: `${theme.spacing(2)}px  0  0 ${-theme.spacing(2)}px`,
+		"& > *": { margin: `0 ${theme.spacing(2)}px` }
+	},
+	removeIcon: {
+		fontSize: theme.spacing(3.5),
+		marginTop: theme.spacing(1)
+	}
+}));
 const UdpTransactionTypeForm = (props, ref) => {
-	const { onSubmit, initialData, disableSubTypeFields, domainNameOptions, onSelectDomainName, domainFieldOptions } = props;
+	const { onSubmit, initialData, disableSubTypeFields, domainNameOptions, onSelectDomainName, domainFieldOptions, selectedDomainName } = props;
 	const handleSubmitRef = useRef();
 	const { t } = useTranslation();
+	const classes = useStyles$3();
+	const formInitialValues = useMemo(() => {
+		let formattedData;
+		if (!initialData) return;
+		formattedData = {
+			...initialData,
+			domainName: domainNameOptions?.find((domainName) => domainName === selectedDomainName || ""),
+			domainFieldType: domainFieldOptions?.find((domainField) => domainField === initialData?.domainFieldType),
+			domainFieldLabel: domainFieldOptions?.find((domainField) => domainField === initialData?.domainFieldLabel),
+			revisionField: domainFieldOptions?.find((domainField) => domainField === initialData?.revisionField),
+			domainFields: selectedDomainName === initialData?.domainName && initialData?.domainFields ? Object.entries(initialData?.domainFields).map(([fieldKey, fieldConfig]) => {
+				return [fieldKey, { ...fieldConfig && typeof fieldConfig === "object" ? fieldConfig : { value: fieldConfig } }];
+			}) : [[]]
+		};
+		return formattedData;
+	}, [
+		initialData,
+		domainNameOptions,
+		domainFieldOptions,
+		selectedDomainName
+	]);
 	useImperativeHandle(ref, () => ({ submit: () => {
 		handleSubmitRef?.current();
 	} }));
@@ -39,8 +82,11 @@ const UdpTransactionTypeForm = (props, ref) => {
 	}, [initialData, onSubmit]);
 	return /* @__PURE__ */ React.createElement(Form$1, {
 		onSubmit: handleSubmit,
+		mutators: { ...arrayMutators },
+		initialValues: { ...formInitialValues },
 		render: ({ handleSubmit: handleSubmit$1, form }) => {
 			handleSubmitRef.current = handleSubmit$1;
+			const push = form?.mutators?.push ?? (() => {});
 			const handleDomainNameChange = (value) => {
 				const nextDomainName = value || "";
 				if ((form.getState().values?.domainName || "") !== nextDomainName) {
@@ -67,8 +113,7 @@ const UdpTransactionTypeForm = (props, ref) => {
 				variant: "outlined",
 				margin: "normal",
 				size: "small",
-				required: true,
-				initialValue: initialData?.name || ""
+				required: true
 			}), /* @__PURE__ */ React.createElement(Field$1, {
 				component: AmbientAutoComplete,
 				label: t("Domain"),
@@ -77,7 +122,6 @@ const UdpTransactionTypeForm = (props, ref) => {
 				variant: "outlined",
 				isMultiple: false,
 				disableCloseOnSelect: false,
-				initialValue: initialData?.domainName,
 				options: domainNameOptions || [],
 				getOptionLabelFunction: (option) => option,
 				additionalOnChangeAction: handleDomainNameChange
@@ -89,7 +133,6 @@ const UdpTransactionTypeForm = (props, ref) => {
 				variant: "outlined",
 				isMultiple: false,
 				disableCloseOnSelect: false,
-				initialValue: initialData?.domainFieldType,
 				options: domainFieldOptions || [],
 				getOptionLabelFunction: (option) => option,
 				additionalOnChangeAction: handleDomainFieldTypeChange,
@@ -103,20 +146,7 @@ const UdpTransactionTypeForm = (props, ref) => {
 				variant: "outlined",
 				margin: "normal",
 				size: "small",
-				initialValue: initialData?.domainFieldValue || "",
 				disabled: disableSubTypeFields
-			}), /* @__PURE__ */ React.createElement(Field$1, {
-				component: AmbientAutoComplete,
-				label: "Grid Columns",
-				id: "domainFields",
-				name: "domainFields",
-				variant: "outlined",
-				isMultiple: true,
-				disableCloseOnSelect: true,
-				initialValue: initialData?.domainFields,
-				options: domainFieldOptions || [],
-				getOptionLabelFunction: (option) => option,
-				helperText: t("Field properties to be displayed as columns in the transaction grid")
 			}), /* @__PURE__ */ React.createElement(Field$1, {
 				component: AmbientAutoComplete,
 				label: t("Field Label"),
@@ -125,7 +155,6 @@ const UdpTransactionTypeForm = (props, ref) => {
 				variant: "outlined",
 				isMultiple: false,
 				disableCloseOnSelect: false,
-				initialValue: initialData?.domainFieldLabel,
 				options: domainFieldOptions || [],
 				getOptionLabelFunction: (option) => option,
 				helperText: t("Field property to be used in transaction page labels")
@@ -134,8 +163,7 @@ const UdpTransactionTypeForm = (props, ref) => {
 					component: Switch,
 					id: "enabled",
 					name: "enabled",
-					type: "checkbox",
-					initialValue: !!initialData?.enabled
+					type: "checkbox"
 				}),
 				label: t("Enabled")
 			}), /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "nudge" }), /* @__PURE__ */ React.createElement(FormControlLabel, {
@@ -144,7 +172,6 @@ const UdpTransactionTypeForm = (props, ref) => {
 					id: "hasRevision",
 					name: "hasRevision",
 					type: "checkbox",
-					initialValue: !!initialData?.hasRevision,
 					parse: parseHasRevision
 				}),
 				label: t("Allow Revisions")
@@ -156,10 +183,51 @@ const UdpTransactionTypeForm = (props, ref) => {
 				variant: "outlined",
 				isMultiple: false,
 				disableCloseOnSelect: false,
-				initialValue: initialData?.revisionField,
 				options: domainFieldOptions || [],
 				getOptionLabelFunction: (option) => option
-			}));
+			}), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classes.addRemoveButtons }, /* @__PURE__ */ React.createElement(FluentButton, {
+				variant: "contained",
+				color: "primary",
+				onClick: () => push("domainFields", void 0)
+			}, t("Add a Domain Field"))), /* @__PURE__ */ React.createElement(FieldArray, { name: "domainFields" }, ({ fields }) => fields.map((name, index) => /* @__PURE__ */ React.createElement("div", {
+				key: `${name}${index}`,
+				className: classes.domainFields
+			}, /* @__PURE__ */ React.createElement(Field$1, {
+				component: AmbientAutoComplete,
+				label: index === 0 && t("Field"),
+				name: `${name}[0]`,
+				variant: "outlined",
+				isMultiple: false,
+				disableCloseOnSelect: false,
+				options: domainFieldOptions || [],
+				getOptionLabelFunction: (option) => option,
+				onChange: () => {}
+			}), /* @__PURE__ */ React.createElement(Field$1, {
+				component: FluentTextField,
+				label: index === 0 && t("Display Name"),
+				name: `${name}[1].displayName`,
+				fullWidth: true,
+				variant: "outlined",
+				margin: "normal",
+				size: "small",
+				onChange: () => {},
+				className: classes.domainValueField
+			}), /* @__PURE__ */ React.createElement(Field$1, {
+				component: FluentTextField,
+				label: index === 0 && t("Order"),
+				name: `${name}[1].order`,
+				fullWidth: true,
+				variant: "outlined",
+				margin: "normal",
+				size: "small",
+				type: "number",
+				onChange: () => {},
+				className: classes.domainValueField
+			}), /* @__PURE__ */ React.createElement("span", {
+				onClick: () => fields.remove(index),
+				style: { cursor: "pointer" },
+				className: classes.removeIcon
+			}, /* @__PURE__ */ React.createElement(StatusCircleErrorXIcon, null)))))));
 		}
 	});
 };
@@ -168,7 +236,7 @@ var UdpTransactionTypeForm_default = forwardRef(UdpTransactionTypeForm);
 //#endregion
 //#region src/udp/pages/UdpTransactionTypesPage/sidesheets/UdpTransactionTypeSidesheet.jsx
 const UdpTransactionTypeSidesheet = (props) => {
-	const { initialTransactionType, isSideSheetOpen, handleSideSheet, setSelectedDomainName, handleCreateTransactionType, handleUpdateTransactionType, catalogObjects, catalogObjectProperties } = props;
+	const { initialTransactionType, isSideSheetOpen, handleSideSheet, setSelectedDomainName, selectedDomainName, handleCreateTransactionType, handleUpdateTransactionType, catalogObjects, catalogObjectProperties } = props;
 	const isEditing = !!initialTransactionType;
 	const formRef = useRef();
 	const { t } = useTranslation();
@@ -195,6 +263,9 @@ const UdpTransactionTypeSidesheet = (props) => {
 			return t$1.entityBusinessObject?.[initialTransactionType.domainFieldType] === targetValue;
 		});
 	}, [transactions, initialTransactionType]);
+	useEffect(() => {
+		if (initialTransactionType) setSelectedDomainName(initialTransactionType?.domainName);
+	}, [initialTransactionType, setSelectedDomainName]);
 	useEffect(() => {
 		let isMounted = true;
 		const fetchTransactions = async () => {
@@ -228,7 +299,7 @@ const UdpTransactionTypeSidesheet = (props) => {
 	]);
 	return /* @__PURE__ */ React.createElement(SideSheet, {
 		open: isSideSheetOpen,
-		width: 500,
+		width: 800,
 		title: isEditing ? t("Edit Transaction Type") : t("Create Transaction Type"),
 		onClose: () => handleCloseSidesheet(false),
 		buttonLabel: isEditing ? t("Save") : t("Create"),
@@ -242,7 +313,8 @@ const UdpTransactionTypeSidesheet = (props) => {
 		disableSubTypeFields: shouldDisableSubTypes,
 		domainNameOptions: catalogObjectNames,
 		onSelectDomainName: setSelectedDomainName,
-		domainFieldOptions: catalogObjectProperties
+		domainFieldOptions: catalogObjectProperties,
+		selectedDomainName
 	}));
 };
 var UdpTransactionTypeSidesheet_default = UdpTransactionTypeSidesheet;
@@ -2264,7 +2336,11 @@ const UdpTransactionTypesPage = () => {
 	const catalogObjectProperties = useMemo(() => {
 		const catalogObjectList = catalogObjects?.ctlg?.catalogObjectList;
 		if (!catalogObjectList) return [];
-		const catalogObject = catalogObjectList?.find((obj) => (obj.catalogObjectName === selectedTransactionType?.domainName || obj.catalogObjectName === selectedDomainName) && obj.apiCatalogId === currentApiCatalogId);
+		const catalogObject = catalogObjectList?.find((obj) => {
+			if (obj.apiCatalogId !== currentApiCatalogId) return false;
+			if (selectedDomainName || selectedTransactionType && !selectedDomainName) return obj.catalogObjectName === selectedDomainName;
+			return obj.catalogObjectName === selectedTransactionType?.domainName;
+		});
 		if (!catalogObject) return [];
 		return catalogObject?.properties.filter((property) => property.name !== "businessObjectKey" && property.name !== null).map((property) => property.name);
 	}, [
@@ -2328,7 +2404,22 @@ const UdpTransactionTypesPage = () => {
 	}, []);
 	/** TransactionType */
 	const handleCreateTransactionType = useCallback(async (formValues) => {
-		const newTransactionType = { ...formValues };
+		const { domainFields, ...restValues } = formValues;
+		const domainFieldsDictionary = (Array.isArray(domainFields) ? domainFields : []).reduce((accumulator, entry) => {
+			if (!entry) return accumulator;
+			const field = entry[0];
+			const displayName = entry[1]?.displayName || field;
+			const order = entry[1]?.order || 0;
+			if (field) accumulator[field] = {
+				displayName,
+				order
+			};
+			return accumulator;
+		}, {});
+		const newTransactionType = {
+			...restValues,
+			domainFields: domainFieldsDictionary
+		};
 		try {
 			if ((await postCreateTransactionType(newTransactionType))?.status === 201) enqueueSnackbar(t("TransactionType created successfully"), {
 				anchorOrigin: {
@@ -2358,10 +2449,23 @@ const UdpTransactionTypesPage = () => {
 		t
 	]);
 	const handleUpdateTransactionType = useCallback(async (formValues, initialValues) => {
+		const { domainFields, ...restValues } = formValues;
 		const transactionTypeId = initialValues.transactionTypeId;
+		const domainFieldsDictionary = (Array.isArray(domainFields) ? domainFields : []).reduce((accumulator, entry) => {
+			if (!entry) return accumulator;
+			const field = entry[0];
+			const displayName = entry[1]?.displayName || field;
+			const order = entry[1]?.order || 0;
+			if (field) accumulator[field] = {
+				displayName,
+				order
+			};
+			return accumulator;
+		}, {});
 		const updatedTransactionType = {
 			...initialValues,
-			...formValues
+			...formValues,
+			domainFields: domainFieldsDictionary
 		};
 		try {
 			if ((await putUpdateTransactionType(transactionTypeId, updatedTransactionType)).status === 204) enqueueSnackbar(t("TransactionType updated successfully"), {
@@ -3293,7 +3397,8 @@ const UdpTransactionTypesPage = () => {
 				headerName: t("Domain Fields"),
 				field: "domainFields",
 				resizable: true,
-				sortable: false
+				sortable: false,
+				hide: true
 			},
 			{
 				headerName: t("Allow Revisions"),
@@ -3451,6 +3556,7 @@ const UdpTransactionTypesPage = () => {
 	}), /* @__PURE__ */ React.createElement(UdpTransactionTypeSidesheet_default, {
 		key: selectedTransactionType?.transactionTypeId,
 		initialTransactionType: selectedTransactionType,
+		selectedDomainName,
 		isSideSheetOpen: isTransactionTypeSideSheetOpen,
 		handleSideSheet,
 		setSelectedDomainName,
@@ -3612,4 +3718,4 @@ var UdpTransactionTypesPage_exports = /* @__PURE__ */ __exportAll({ default: ()
 
 //#endregion
 export { UdpTransactionTypesPage_default as n, UdpTransactionTypesPage_exports as t };
-//# sourceMappingURL=UdpTransactionTypesPage-CWA-n7y0.js.map
+//# sourceMappingURL=UdpTransactionTypesPage-DgFxT4pz.js.map