udp-react-enterprise-component-library 26.5.0-beta.2 → 26.5.0-beta.21

package/dist/utilities/form/paymentForm/NewECheckForm.js

@@ -1,81 +1,41 @@
 import React from 'react';
-import { FormControl, FormControlLabel, } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { Field } from '../Field';
-import { FluentTextField } from '../../../UI/inputs/textField/FluentTextField';
-import { FluentCheckbox } from '../../../UI/inputs/checkbox/FluentCheckbox';
-import { FluentSelectMenu } from '../../../UI/inputs/menus/FluentSelectMenu';
-import { Typography } from '../../../UI/dataDisplay/typography/Typography';
+import { UdpFlexbox } from '../../../UI/fluent-web-components/UdpFlexbox';
+import { UdpContainerQueryGrid } from '../../../UI/fluent-web-components/UdpContainerQueryGrid';
+import { UdpTextInput } from '../../../UI/fluent-web-components/UdpTextInput';
+import { UdpCheckbox } from '../../../UI/fluent-web-components/UdpCheckbox';
+import { UdpDropdown } from '../../../UI/fluent-web-components/UdpDropdown';
 import { formatBankAccountNumber, formatRoutingNumber, } from './CreditCardUtils';
-import { PaymentCard } from './PaymentCard';
-/**
- * NewCardForm component renders a form for entering new credit card details.
- *
- * @param {Object} props - The properties object.
- * @param {boolean} props.isFormDisabled - Flag to disable the form fields.
- * @param {Record<string, string>} props.classes - CSS classes for styling the form controls.
- * @param {React.Dispatch<React.SetStateAction<string>>} props.setCreditCardNumberInput - Function to set the credit card number input value.
- *
- * @returns {JSX.Element} The rendered NewCardForm component.
- */
-export const NewECheckForm = ({ isFormDisabled, classes, bankAccountTypes, }) => {
+// The UdpContainerQueryGrid wrapper types gaps as numeric-only, but the
+// underlying component also accepts spacing names ("sm"). Cast at the use
+// sites rather than changing the shared wrapper (out of scope for V2).
+const GRID_GAPS = { 0: 'sm' };
+export const NewECheckForm = ({ isFormDisabled, bankAccountTypes, allowSaveMethod = true, }) => {
     const { t } = useTranslation();
-    return (React.createElement(PaymentCard, null, React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
-    // @ts-ignore
-    , { 
-        // @ts-ignore
-        component: FluentTextField, ComponentProps: {
-            // @ts-ignore
+    const dropdownOptions = (bankAccountTypes !== null && bankAccountTypes !== void 0 ? bankAccountTypes : []).map((opt) => ({
+        label: opt.name,
+        value: opt.value,
+    }));
+    return (React.createElement(UdpFlexbox, { direction: "column", gap: "sm", wrap: "nowrap" }, React.createElement(Field, { component: UdpTextInput, ComponentProps: {
             label: t('Name on Bank Account'),
-            variant: 'outlined',
-            size: 'small',
+            maxLength: 256,
             disabled: isFormDisabled,
-            fullWidth: true,
-            inputProps: { maxLength: 256 }
-        }, name: "accountNickName", initialValue: "", required: !isFormDisabled })), React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
-    // @ts-ignore
-    , { 
-        // @ts-ignore
-        component: FluentTextField, ComponentProps: {
-            // @ts-ignore
+        }, name: "accountNickName", initialValue: "", required: !isFormDisabled, onChange: () => { } }), React.createElement(UdpContainerQueryGrid, { columns: { 0: 1, 420: 2 }, gaps: GRID_GAPS }, React.createElement(Field, { component: UdpTextInput, ComponentProps: {
             label: t('Account Number'),
-            variant: 'outlined',
-            size: 'small',
+            autocomplete: 'off',
             disabled: isFormDisabled,
-            fullWidth: true
-        }, name: "accountNumber", initialValue: "", required: !isFormDisabled, pattern: "\\d{16,22}", format: formatBankAccountNumber })), React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
-    //@ts-ignore
-    , { 
-        //@ts-ignore
-        component: FluentSelectMenu, ComponentProps: {
-            label: t('Account Type'),
-            id: 'bankAccountType',
-            variant: 'outlined',
-            margin: 'normal',
-            size: 'small',
-            width: '100%',
-            fullWidth: true,
-            disabled: false,
-            data: bankAccountTypes || [],
-            displayProperty: 'name',
-            autoCompleteProps: {
-                disableClearable: true
-            }
-        }, valueForChange: (e) => {
-            return e.value;
-        }, name: "bankAccountType", required: !isFormDisabled, onChange: () => { } })), React.createElement(FormControl, { className: classes.formControl }, React.createElement(Field
-    // @ts-ignore
-    , { 
-        // @ts-ignore
-        component: FluentTextField, ComponentProps: {
-            // @ts-ignore
+        }, name: "accountNumber", initialValue: "", format: formatBankAccountNumber, required: !isFormDisabled, onChange: () => { } }), React.createElement(Field, { component: UdpTextInput, ComponentProps: {
             label: t('Routing Number'),
-            variant: 'outlined',
-            size: 'small',
+            autocomplete: 'off',
+            disabled: isFormDisabled,
+        }, name: "routingNumber", initialValue: "", format: formatRoutingNumber, required: !isFormDisabled, onChange: () => { } })), React.createElement(UdpContainerQueryGrid, { columns: { 0: 1, 420: 2 }, gaps: GRID_GAPS }, React.createElement(Field, { component: UdpDropdown, ComponentProps: {
+            label: t('Account Type'),
+            options: dropdownOptions,
+            disabled: isFormDisabled,
+        }, name: "bankAccountType", required: !isFormDisabled, onChange: () => { } })), allowSaveMethod && (React.createElement(Field, { component: UdpCheckbox, type: "checkbox", name: "isSaveAsNewMethod", ComponentProps: {
+            label: t('Save'),
             disabled: isFormDisabled,
-            fullWidth: true
-        }, name: "routingNumber", initialValue: "", required: !isFormDisabled, pattern: "\\d{9}", format: formatRoutingNumber })), React.createElement(FormControl, { className: classes.formControlCheck }, React.createElement(FormControlLabel, { control: React.createElement(Field, { component: FluentCheckbox, name: "isSaveAsNewMethod", type: "checkbox", defaultValue: false, 
-            // @ts-ignore
-            disabled: isFormDisabled }), label: React.createElement(Typography, null, t('Save')) }))));
+        }, defaultValue: false, required: false, onChange: () => { } }))));
 };
 //# sourceMappingURL=NewECheckForm.js.map

package/dist/utilities/form/paymentForm/NewECheckForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"NewECheckForm.js","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/NewECheckForm.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NewECheckForm.js","sourceRoot":"","sources":["../../../../src/utilities/form/paymentForm/NewECheckForm.tsx"],"names":[],"mappings":"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"}

package/dist/utilities/form/paymentForm/NewECheckForm.mjs

@@ -1,280 +1,237 @@
+import { c } from "../../../reactCompilerRuntime.mjs";
 import { Field } from "../Field.mjs";
-import { Typography as Typography$1 } from "../../../UI/dataDisplay/typography/Typography.mjs";
-import { FluentTextField } from "../../../UI/inputs/textField/FluentTextField.mjs";
-import { FluentCheckbox } from "../../../UI/inputs/checkbox/FluentCheckbox.mjs";
-import { FluentSelectMenu } from "../../../UI/inputs/menus/FluentSelectMenu.mjs";
-import { PaymentCard } from "./PaymentCard.mjs";
+import { UdpCheckbox } from "../../../UI/fluent-web-components/UdpCheckbox.mjs";
+import { UdpContainerQueryGrid } from "../../../UI/fluent-web-components/UdpContainerQueryGrid.mjs";
+import { UdpDropdown } from "../../../UI/fluent-web-components/UdpDropdown.mjs";
+import { UdpFlexbox } from "../../../UI/fluent-web-components/UdpFlexbox.mjs";
+import { UdpTextInput } from "../../../UI/fluent-web-components/UdpTextInput.mjs";
 import { formatBankAccountNumber, formatRoutingNumber } from "./CreditCardUtils.mjs";
-import { c } from "react-compiler-runtime";
 import React from "react";
-import { FormControl, FormControlLabel } from "@material-ui/core";
 import { useTranslation } from "react-i18next";
 //#region src/utilities/form/paymentForm/NewECheckForm.tsx
-/**
-* NewCardForm component renders a form for entering new credit card details.
-*
-* @param {Object} props - The properties object.
-* @param {boolean} props.isFormDisabled - Flag to disable the form fields.
-* @param {Record<string, string>} props.classes - CSS classes for styling the form controls.
-* @param {React.Dispatch<React.SetStateAction<string>>} props.setCreditCardNumberInput - Function to set the credit card number input value.
-*
-* @returns {JSX.Element} The rendered NewCardForm component.
-*/
+const GRID_GAPS = { 0: "sm" };
 const NewECheckForm = (t0) => {
-	const $ = c(66);
-	const { isFormDisabled, classes, bankAccountTypes } = t0;
+	const $ = c(51);
+	const { isFormDisabled, bankAccountTypes, allowSaveMethod: t1 } = t0;
+	const allowSaveMethod = t1 === void 0 ? true : t1;
 	const { t } = useTranslation();
-	const t1 = classes.formControl;
 	let t2;
-	if ($[0] !== t) {
-		t2 = t("Name on Bank Account");
-		$[0] = t;
+	if ($[0] !== bankAccountTypes) {
+		t2 = bankAccountTypes ?? [];
+		$[0] = bankAccountTypes;
 		$[1] = t2;
 	} else t2 = $[1];
 	let t3;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = { maxLength: 256 };
-		$[2] = t3;
-	} else t3 = $[2];
+	if ($[2] !== t2) {
+		t3 = t2.map(_temp);
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	const dropdownOptions = t3;
 	let t4;
-	if ($[3] !== isFormDisabled || $[4] !== t2) {
-		t4 = {
-			label: t2,
-			variant: "outlined",
-			size: "small",
-			disabled: isFormDisabled,
-			fullWidth: true,
-			inputProps: t3
-		};
-		$[3] = isFormDisabled;
-		$[4] = t2;
+	if ($[4] !== t) {
+		t4 = t("Name on Bank Account");
+		$[4] = t;
 		$[5] = t4;
 	} else t4 = $[5];
-	const t5 = !isFormDisabled;
-	let t6;
-	if ($[6] !== t4 || $[7] !== t5) {
-		t6 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentTextField,
-			ComponentProps: t4,
+	let t5;
+	if ($[6] !== isFormDisabled || $[7] !== t4) {
+		t5 = {
+			label: t4,
+			maxLength: 256,
+			disabled: isFormDisabled
+		};
+		$[6] = isFormDisabled;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	const t6 = !isFormDisabled;
+	let t7;
+	if ($[9] !== t5 || $[10] !== t6) {
+		t7 = /* @__PURE__ */ React.createElement(Field, {
+			component: UdpTextInput,
+			ComponentProps: t5,
 			name: "accountNickName",
 			initialValue: "",
-			required: t5
+			required: t6,
+			onChange: _temp2
 		});
-		$[6] = t4;
-		$[7] = t5;
-		$[8] = t6;
-	} else t6 = $[8];
-	let t7;
-	if ($[9] !== classes.formControl || $[10] !== t6) {
-		t7 = /* @__PURE__ */ React.createElement(FormControl, { className: t1 }, t6);
-		$[9] = classes.formControl;
+		$[9] = t5;
 		$[10] = t6;
 		$[11] = t7;
 	} else t7 = $[11];
-	const t8 = classes.formControl;
+	let t8;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = {
+			0: 1,
+			420: 2
+		};
+		$[12] = t8;
+	} else t8 = $[12];
 	let t9;
-	if ($[12] !== t) {
+	if ($[13] !== t) {
 		t9 = t("Account Number");
-		$[12] = t;
-		$[13] = t9;
-	} else t9 = $[13];
+		$[13] = t;
+		$[14] = t9;
+	} else t9 = $[14];
 	let t10;
-	if ($[14] !== isFormDisabled || $[15] !== t9) {
+	if ($[15] !== isFormDisabled || $[16] !== t9) {
 		t10 = {
 			label: t9,
-			variant: "outlined",
-			size: "small",
-			disabled: isFormDisabled,
-			fullWidth: true
+			autocomplete: "off",
+			disabled: isFormDisabled
 		};
-		$[14] = isFormDisabled;
-		$[15] = t9;
-		$[16] = t10;
-	} else t10 = $[16];
+		$[15] = isFormDisabled;
+		$[16] = t9;
+		$[17] = t10;
+	} else t10 = $[17];
 	const t11 = !isFormDisabled;
 	let t12;
-	if ($[17] !== t10 || $[18] !== t11) {
+	if ($[18] !== t10 || $[19] !== t11) {
 		t12 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentTextField,
+			component: UdpTextInput,
 			ComponentProps: t10,
 			name: "accountNumber",
 			initialValue: "",
+			format: formatBankAccountNumber,
 			required: t11,
-			pattern: "\\d{16,22}",
-			format: formatBankAccountNumber
+			onChange: _temp3
 		});
-		$[17] = t10;
-		$[18] = t11;
-		$[19] = t12;
-	} else t12 = $[19];
+		$[18] = t10;
+		$[19] = t11;
+		$[20] = t12;
+	} else t12 = $[20];
 	let t13;
-	if ($[20] !== classes.formControl || $[21] !== t12) {
-		t13 = /* @__PURE__ */ React.createElement(FormControl, { className: t8 }, t12);
-		$[20] = classes.formControl;
-		$[21] = t12;
+	if ($[21] !== t) {
+		t13 = t("Routing Number");
+		$[21] = t;
 		$[22] = t13;
 	} else t13 = $[22];
-	const t14 = classes.formControl;
-	let t15;
-	if ($[23] !== t) {
-		t15 = t("Account Type");
-		$[23] = t;
-		$[24] = t15;
-	} else t15 = $[24];
+	let t14;
+	if ($[23] !== isFormDisabled || $[24] !== t13) {
+		t14 = {
+			label: t13,
+			autocomplete: "off",
+			disabled: isFormDisabled
+		};
+		$[23] = isFormDisabled;
+		$[24] = t13;
+		$[25] = t14;
+	} else t14 = $[25];
+	const t15 = !isFormDisabled;
 	let t16;
-	if ($[25] !== bankAccountTypes) {
-		t16 = bankAccountTypes || [];
-		$[25] = bankAccountTypes;
-		$[26] = t16;
-	} else t16 = $[26];
+	if ($[26] !== t14 || $[27] !== t15) {
+		t16 = /* @__PURE__ */ React.createElement(Field, {
+			component: UdpTextInput,
+			ComponentProps: t14,
+			name: "routingNumber",
+			initialValue: "",
+			format: formatRoutingNumber,
+			required: t15,
+			onChange: _temp4
+		});
+		$[26] = t14;
+		$[27] = t15;
+		$[28] = t16;
+	} else t16 = $[28];
 	let t17;
-	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = { disableClearable: true };
-		$[27] = t17;
-	} else t17 = $[27];
+	if ($[29] !== t12 || $[30] !== t16) {
+		t17 = /* @__PURE__ */ React.createElement(UdpContainerQueryGrid, {
+			columns: t8,
+			gaps: GRID_GAPS
+		}, t12, t16);
+		$[29] = t12;
+		$[30] = t16;
+		$[31] = t17;
+	} else t17 = $[31];
 	let t18;
-	if ($[28] !== t15 || $[29] !== t16) {
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
 		t18 = {
-			label: t15,
-			id: "bankAccountType",
-			variant: "outlined",
-			margin: "normal",
-			size: "small",
-			width: "100%",
-			fullWidth: true,
-			disabled: false,
-			data: t16,
-			displayProperty: "name",
-			autoCompleteProps: t17
+			0: 1,
+			420: 2
 		};
-		$[28] = t15;
-		$[29] = t16;
-		$[30] = t18;
-	} else t18 = $[30];
-	const t19 = t18;
-	const t20 = !isFormDisabled;
-	let t21;
-	if ($[31] !== t19 || $[32] !== t20) {
-		t21 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentSelectMenu,
-			ComponentProps: t19,
-			valueForChange: _temp,
-			name: "bankAccountType",
-			required: t20,
-			onChange: _temp2
-		});
-		$[31] = t19;
-		$[32] = t20;
-		$[33] = t21;
-	} else t21 = $[33];
-	let t22;
-	if ($[34] !== classes.formControl || $[35] !== t21) {
-		t22 = /* @__PURE__ */ React.createElement(FormControl, { className: t14 }, t21);
-		$[34] = classes.formControl;
-		$[35] = t21;
-		$[36] = t22;
-	} else t22 = $[36];
-	const t23 = classes.formControl;
-	let t24;
-	if ($[37] !== t) {
-		t24 = t("Routing Number");
-		$[37] = t;
-		$[38] = t24;
-	} else t24 = $[38];
-	let t25;
-	if ($[39] !== isFormDisabled || $[40] !== t24) {
-		t25 = {
-			label: t24,
-			variant: "outlined",
-			size: "small",
-			disabled: isFormDisabled,
-			fullWidth: true
+		$[32] = t18;
+	} else t18 = $[32];
+	let t19;
+	if ($[33] !== t) {
+		t19 = t("Account Type");
+		$[33] = t;
+		$[34] = t19;
+	} else t19 = $[34];
+	let t20;
+	if ($[35] !== dropdownOptions || $[36] !== isFormDisabled || $[37] !== t19) {
+		t20 = {
+			label: t19,
+			options: dropdownOptions,
+			disabled: isFormDisabled
 		};
-		$[39] = isFormDisabled;
-		$[40] = t24;
-		$[41] = t25;
-	} else t25 = $[41];
-	const t26 = !isFormDisabled;
-	let t27;
-	if ($[42] !== t25 || $[43] !== t26) {
-		t27 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentTextField,
-			ComponentProps: t25,
-			name: "routingNumber",
-			initialValue: "",
-			required: t26,
-			pattern: "\\d{9}",
-			format: formatRoutingNumber
-		});
-		$[42] = t25;
-		$[43] = t26;
-		$[44] = t27;
-	} else t27 = $[44];
-	let t28;
-	if ($[45] !== classes.formControl || $[46] !== t27) {
-		t28 = /* @__PURE__ */ React.createElement(FormControl, { className: t23 }, t27);
-		$[45] = classes.formControl;
-		$[46] = t27;
-		$[47] = t28;
-	} else t28 = $[47];
-	const t29 = classes.formControlCheck;
-	let t30;
-	if ($[48] !== isFormDisabled) {
-		t30 = /* @__PURE__ */ React.createElement(Field, {
-			component: FluentCheckbox,
-			name: "isSaveAsNewMethod",
+		$[35] = dropdownOptions;
+		$[36] = isFormDisabled;
+		$[37] = t19;
+		$[38] = t20;
+	} else t20 = $[38];
+	const t21 = !isFormDisabled;
+	let t22;
+	if ($[39] !== t20 || $[40] !== t21) {
+		t22 = /* @__PURE__ */ React.createElement(UdpContainerQueryGrid, {
+			columns: t18,
+			gaps: GRID_GAPS
+		}, /* @__PURE__ */ React.createElement(Field, {
+			component: UdpDropdown,
+			ComponentProps: t20,
+			name: "bankAccountType",
+			required: t21,
+			onChange: _temp5
+		}));
+		$[39] = t20;
+		$[40] = t21;
+		$[41] = t22;
+	} else t22 = $[41];
+	let t23;
+	if ($[42] !== allowSaveMethod || $[43] !== isFormDisabled || $[44] !== t) {
+		t23 = allowSaveMethod && /* @__PURE__ */ React.createElement(Field, {
+			component: UdpCheckbox,
 			type: "checkbox",
+			name: "isSaveAsNewMethod",
+			ComponentProps: {
+				label: t("Save"),
+				disabled: isFormDisabled
+			},
 			defaultValue: false,
-			disabled: isFormDisabled
-		});
-		$[48] = isFormDisabled;
-		$[49] = t30;
-	} else t30 = $[49];
-	let t31;
-	if ($[50] !== t) {
-		t31 = t("Save");
-		$[50] = t;
-		$[51] = t31;
-	} else t31 = $[51];
-	let t32;
-	if ($[52] !== t31) {
-		t32 = /* @__PURE__ */ React.createElement(Typography$1, null, t31);
-		$[52] = t31;
-		$[53] = t32;
-	} else t32 = $[53];
-	let t33;
-	if ($[54] !== t30 || $[55] !== t32) {
-		t33 = /* @__PURE__ */ React.createElement(FormControlLabel, {
-			control: t30,
-			label: t32
+			required: false,
+			onChange: _temp6
 		});
-		$[54] = t30;
-		$[55] = t32;
-		$[56] = t33;
-	} else t33 = $[56];
-	let t34;
-	if ($[57] !== classes.formControlCheck || $[58] !== t33) {
-		t34 = /* @__PURE__ */ React.createElement(FormControl, { className: t29 }, t33);
-		$[57] = classes.formControlCheck;
-		$[58] = t33;
-		$[59] = t34;
-	} else t34 = $[59];
-	let t35;
-	if ($[60] !== t13 || $[61] !== t22 || $[62] !== t28 || $[63] !== t34 || $[64] !== t7) {
-		t35 = /* @__PURE__ */ React.createElement(PaymentCard, null, t7, t13, t22, t28, t34);
-		$[60] = t13;
-		$[61] = t22;
-		$[62] = t28;
-		$[63] = t34;
-		$[64] = t7;
-		$[65] = t35;
-	} else t35 = $[65];
-	return t35;
+		$[42] = allowSaveMethod;
+		$[43] = isFormDisabled;
+		$[44] = t;
+		$[45] = t23;
+	} else t23 = $[45];
+	let t24;
+	if ($[46] !== t17 || $[47] !== t22 || $[48] !== t23 || $[49] !== t7) {
+		t24 = /* @__PURE__ */ React.createElement(UdpFlexbox, {
+			direction: "column",
+			gap: "sm",
+			wrap: "nowrap"
+		}, t7, t17, t22, t23);
+		$[46] = t17;
+		$[47] = t22;
+		$[48] = t23;
+		$[49] = t7;
+		$[50] = t24;
+	} else t24 = $[50];
+	return t24;
 };
-function _temp(e) {
-	return e.value;
+function _temp(opt) {
+	return {
+		label: opt.name,
+		value: opt.value
+	};
 }
 function _temp2() {}
+function _temp3() {}
+function _temp4() {}
+function _temp5() {}
+function _temp6() {}
 //#endregion
 export { NewECheckForm };