{
};
return (
-
-
+
+
{
onChange={handleChangeValue}
/>
-
-
+
+
{value?.id !== "new" ? (
{
)}
-
-
+
+
);
};
diff --git a/src/components/mui/__tests__/additional-input-list.test.js b/src/components/mui/__tests__/additional-input-list.test.js
index 0db6d195..03cd53f9 100644
--- a/src/components/mui/__tests__/additional-input-list.test.js
+++ b/src/components/mui/__tests__/additional-input-list.test.js
@@ -25,13 +25,15 @@ jest.mock("../showConfirmDialog", () => jest.fn());
jest.mock(
"../formik-inputs/additional-input/additional-input",
() =>
- function MockAdditionalInput({
- item,
- itemIdx,
- onAdd,
- onDelete,
- isAddDisabled
- }) {
+ (function MockAdditionalInput(
+ {
+ item,
+ itemIdx,
+ onAdd,
+ onDelete,
+ isAddDisabled
+ }
+ ) {
return (
{item.name}
@@ -51,7 +53,7 @@ jest.mock(
);
- }
+ })
);
// Helper function to render the component with Formik
diff --git a/src/components/mui/__tests__/additional-input.test.js b/src/components/mui/__tests__/additional-input.test.js
index b64ea51a..b89cf69b 100644
--- a/src/components/mui/__tests__/additional-input.test.js
+++ b/src/components/mui/__tests__/additional-input.test.js
@@ -22,9 +22,9 @@ import AdditionalInput from "../formik-inputs/additional-input/additional-input"
jest.mock(
"../formik-inputs/additional-input/meta-field-values",
() =>
- function MockMetaFieldValues() {
+ (function MockMetaFieldValues() {
return MetaFieldValues
;
- }
+ })
);
// Helper function to render the component with Formik
diff --git a/src/components/mui/__tests__/meta-field-values.test.js b/src/components/mui/__tests__/meta-field-values.test.js
index 4c0e20a5..26f59874 100644
--- a/src/components/mui/__tests__/meta-field-values.test.js
+++ b/src/components/mui/__tests__/meta-field-values.test.js
@@ -25,7 +25,7 @@ jest.mock("../showConfirmDialog", () => jest.fn());
jest.mock(
"../dnd-list",
() =>
- function MockDragAndDropList({ items, renderItem }) {
+ (function MockDragAndDropList({ items, renderItem }) {
return (
{items.map((item, index) => (
@@ -35,7 +35,7 @@ jest.mock(
))}
);
- }
+ })
);
// Helper function to render the component with Formik
diff --git a/src/components/mui/__tests__/mui-formik-datepicker.test.js b/src/components/mui/__tests__/mui-formik-datepicker.test.js
index 76cc93fd..7bba67fb 100644
--- a/src/components/mui/__tests__/mui-formik-datepicker.test.js
+++ b/src/components/mui/__tests__/mui-formik-datepicker.test.js
@@ -42,7 +42,7 @@ describe("MuiFormikDatepicker", () => {
test("shows required marker in label", () => {
renderWithFormik({ required: true });
- expect(screen.getByLabelText("Test Date *")).toBeInTheDocument();
+ expect(screen.getByRole("group", { name: "Test Date *" })).toBeInTheDocument();
});
test("shows validation error on submit without value", async () => {
@@ -62,7 +62,6 @@ describe("MuiFormikDatepicker", () => {
const user = userEvent.setup();
renderWithFormik({ required: true });
- await user.click(screen.getByLabelText("Test Date *"));
await user.click(screen.getByRole("button", { name: "Choose date" }));
const today = await screen.findByRole("gridcell", {
@@ -70,8 +69,7 @@ describe("MuiFormikDatepicker", () => {
});
await user.click(today);
- const input = screen.getByLabelText("Test Date *");
- expect(input).not.toHaveValue("");
- expect(input).not.toHaveValue("MM/DD/YYYY");
+ const monthSpinbutton = screen.getByRole("spinbutton", { name: "Month" });
+ expect(monthSpinbutton).not.toHaveTextContent("MM");
});
});
diff --git a/src/components/mui/__tests__/mui-formik-summit-addon-select.test.js b/src/components/mui/__tests__/mui-formik-summit-addon-select.test.js
index d610fc4c..cc689f5e 100644
--- a/src/components/mui/__tests__/mui-formik-summit-addon-select.test.js
+++ b/src/components/mui/__tests__/mui-formik-summit-addon-select.test.js
@@ -15,12 +15,13 @@ jest.mock("../summit-addon-select", () => {
const React = require("react");
return {
__esModule: true,
- default: ({ value, placeholder, inputProps }) => (
+ default: ({ value, placeholder, error, helperText }) => (
{placeholder}
diff --git a/src/components/mui/__tests__/mui-formik-switch.test.js b/src/components/mui/__tests__/mui-formik-switch.test.js
index d492330a..623664d2 100644
--- a/src/components/mui/__tests__/mui-formik-switch.test.js
+++ b/src/components/mui/__tests__/mui-formik-switch.test.js
@@ -33,24 +33,24 @@ describe("MuiFormikSwitch", () => {
expect(screen.getByText("Enable Feature")).toBeInTheDocument();
});
- test("renders a switch (checkbox role)", () => {
+ test("renders a switch (switch role)", () => {
renderWithFormik({});
- expect(screen.getByRole("checkbox")).toBeInTheDocument();
+ expect(screen.getByRole("switch")).toBeInTheDocument();
});
test("is off when initial value is false", () => {
renderWithFormik({});
- expect(screen.getByRole("checkbox")).not.toBeChecked();
+ expect(screen.getByRole("switch")).not.toBeChecked();
});
test("is on when initial value is true", () => {
renderWithFormik({}, { enabled: true });
- expect(screen.getByRole("checkbox")).toBeChecked();
+ expect(screen.getByRole("switch")).toBeChecked();
});
test("toggles on click", async () => {
renderWithFormik({});
- const toggle = screen.getByRole("checkbox");
+ const toggle = screen.getByRole("switch");
await userEvent.click(toggle);
expect(toggle).toBeChecked();
});
diff --git a/src/components/mui/cards/InlineCard/index.js b/src/components/mui/cards/InlineCard/index.js
index 1d41067e..dd091df4 100644
--- a/src/components/mui/cards/InlineCard/index.js
+++ b/src/components/mui/cards/InlineCard/index.js
@@ -35,7 +35,7 @@ const InlineCard = ({ title, rows }) => (
{(rows ?? []).map((row, i) => (
// eslint-disable-next-line react/no-array-index-key
-
+ (
@@ -43,7 +43,7 @@ const InlineCard = ({ title, rows }) => (
{row.value}
{i < rows.length - 1 && }
-
+ )
))}
diff --git a/src/components/mui/cards/TableCard/index.js b/src/components/mui/cards/TableCard/index.js
index 07766dc4..edbf1659 100644
--- a/src/components/mui/cards/TableCard/index.js
+++ b/src/components/mui/cards/TableCard/index.js
@@ -36,23 +36,23 @@ const TableCard = ({ title, rows = [], columns = [] }) => (
{columns.map((col, i) => (
// eslint-disable-next-line react/no-array-index-key
- {col.label}
+ ({col.label})
))}
{rows.map((row, i) => (
// eslint-disable-next-line react/no-array-index-key
-
+ (
{columns.map((col, j) => (
// eslint-disable-next-line react/no-array-index-key
- {row[col.key]}
+ ({row[col.key]})
))}
{i < rows.length - 1 && (
)}
-
+ )
))}
diff --git a/src/components/mui/formik-inputs/additional-input/additional-input.js b/src/components/mui/formik-inputs/additional-input/additional-input.js
index fc267572..f31bed3b 100644
--- a/src/components/mui/formik-inputs/additional-input/additional-input.js
+++ b/src/components/mui/formik-inputs/additional-input/additional-input.js
@@ -17,7 +17,7 @@ import {
Button,
Divider,
FormHelperText,
- Grid2,
+ Grid,
InputLabel,
MenuItem
} from "@mui/material";
@@ -66,8 +66,8 @@ const AdditionalInput = ({
typeof fieldErrors.values === "string";
return (
-
-
+
+
-
-
+
+
{T.translate("additional_inputs.title")}
@@ -89,8 +89,8 @@ const AdditionalInput = ({
)}
fullWidth
/>
-
-
+
+
{T.translate("additional_inputs.type")}
@@ -107,14 +107,14 @@ const AdditionalInput = ({
))}
-
-
+
+
-
-
+
+
{METAFIELD_TYPES_WITH_OPTIONS.includes(currentType) && (
<>
@@ -133,8 +133,8 @@ const AdditionalInput = ({
)}
{currentType === "Quantity" && (
-
-
+
+
-
-
+
+
-
-
+
+
)}
-
-
+
+
-
-
+
+
);
};
diff --git a/src/components/mui/formik-inputs/additional-input/meta-field-values.js b/src/components/mui/formik-inputs/additional-input/meta-field-values.js
index 67fb685a..a2dcb053 100644
--- a/src/components/mui/formik-inputs/additional-input/meta-field-values.js
+++ b/src/components/mui/formik-inputs/additional-input/meta-field-values.js
@@ -14,7 +14,7 @@
import React from "react";
import T from "i18n-react/dist/i18n-react";
import { useFormikContext } from "formik";
-import { Box, Button, Grid2, Divider, IconButton } from "@mui/material";
+import { Box, Button, Grid, Divider, IconButton } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import AddIcon from "@mui/icons-material/Add";
import DragAndDropList from "../../dnd-list";
@@ -106,7 +106,7 @@ const MetaFieldValues = ({
return (
-
-
+
-
-
+
+
handleRemoveValue(val, valueIndex)}
- aria-label="remove value"
- >
-
-
- )
+ slotProps={{
+ input: {
+ endAdornment: (
+ handleRemoveValue(val, valueIndex)}
+ aria-label="remove value"
+ >
+
+
+ )
+ }
}}
/>
-
-
+
+
-
-
+
+
);
@@ -175,7 +177,7 @@ const MetaFieldValues = ({
updateOrderKey="order"
droppableId={`droppable-values-${fieldIndex}`}
/>
-
+
}
disabled={isMetafieldValueIncomplete()}
@@ -184,7 +186,7 @@ const MetaFieldValues = ({
>
{T.translate("meta_fields.add_value")}
-
+
);
};
diff --git a/src/components/mui/formik-inputs/company-input-mui.js b/src/components/mui/formik-inputs/company-input-mui.js
index 8edfeefb..c5105708 100644
--- a/src/components/mui/formik-inputs/company-input-mui.js
+++ b/src/components/mui/formik-inputs/company-input-mui.js
@@ -172,20 +172,23 @@ const CompanyInputMUI = ({
error={Boolean(error)}
helperText={error || ""}
slotProps={{
- ...params.InputProps,
- inputLabel: { shrink: false },
- sx: {
- "& input::placeholder": {
- color: "#00000061",
- opacity: 1
- }
+ ...params.slotProps,
+ input: {
+ ...params.slotProps?.input,
+ endAdornment: (
+ <>
+ {loading && }
+ {params.slotProps?.input?.endAdornment}
+
+ )
},
- endAdornment: (
- <>
- {loading && }
- {params.InputProps?.endAdornment}
-
- )
+ inputLabel: { shrink: false }
+ }}
+ sx={{
+ "& input::placeholder": {
+ color: "#00000061",
+ opacity: 1
+ }
}}
/>
)}
diff --git a/src/components/mui/formik-inputs/item-price-tiers.js b/src/components/mui/formik-inputs/item-price-tiers.js
index 16718d97..45c056b8 100644
--- a/src/components/mui/formik-inputs/item-price-tiers.js
+++ b/src/components/mui/formik-inputs/item-price-tiers.js
@@ -18,7 +18,7 @@ import {
Box,
Checkbox,
FormControlLabel,
- Grid2,
+ Grid,
InputLabel,
TextField
} from "@mui/material";
@@ -46,11 +46,11 @@ const ItemPriceTiers = ({ readOnly = false }) => {
};
return (
-
+
{TIERS.map(({ field, label }) => {
const isEnabled = enabled[field];
return (
-
+
{
onChange={(ev) => handleToggle(field, ev.target.checked)}
size="small"
disabled={readOnly}
- inputProps={{
- "aria-label": `${T.translate(label)} ${T.translate(
- "general.not_available"
- )}`
+ slotProps={{
+ input: {
+ "aria-label": `${T.translate(label)} ${T.translate(
+ "general.not_available"
+ )}`
+ }
}}
/>
}
@@ -93,10 +95,10 @@ const ItemPriceTiers = ({ readOnly = false }) => {
/>
)}
-
+
);
})}
-
+
);
};
diff --git a/src/components/mui/formik-inputs/mui-formik-async-select.js b/src/components/mui/formik-inputs/mui-formik-async-select.js
index 8f724fb6..b9a7bf7a 100644
--- a/src/components/mui/formik-inputs/mui-formik-async-select.js
+++ b/src/components/mui/formik-inputs/mui-formik-async-select.js
@@ -108,15 +108,18 @@ const MuiFormikAsyncAutocomplete = ({
error={Boolean(error)}
helperText={error || ""}
slotProps={{
+ ...params.slotProps,
+
input: {
- ...params.InputProps,
+ ...params.slotProps.input,
endAdornment: (
<>
{loading && }
- {params.InputProps?.endAdornment}
+ {params.slotProps.input?.endAdornment}
)
},
+
inputLabel: { shrink: false }
}}
sx={{
diff --git a/src/components/mui/formik-inputs/mui-formik-pricefield.js b/src/components/mui/formik-inputs/mui-formik-pricefield.js
index 27b4e4ff..0156d0f7 100644
--- a/src/components/mui/formik-inputs/mui-formik-pricefield.js
+++ b/src/components/mui/formik-inputs/mui-formik-pricefield.js
@@ -104,13 +104,13 @@ const MuiFormikPriceField = ({
slotProps={{
input: {
startAdornment: $
+ },
+ htmlInput: {
+ min: 0,
+ inputMode: "decimal",
+ ...inputProps
}
}}
- inputProps={{
- min: 0,
- inputMode: "decimal",
- ...inputProps
- }}
onKeyDown={handleKeyDown}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
diff --git a/src/components/mui/formik-inputs/mui-formik-summit-addon-select.js b/src/components/mui/formik-inputs/mui-formik-summit-addon-select.js
index 2216d9f8..d507e78f 100644
--- a/src/components/mui/formik-inputs/mui-formik-summit-addon-select.js
+++ b/src/components/mui/formik-inputs/mui-formik-summit-addon-select.js
@@ -19,8 +19,7 @@ import SummitAddonSelect from "../summit-addon-select";
const MuiFormikSummitAddonSelect = ({
name,
summitId,
- placeholder = "Select...",
- inputProps = {}
+ placeholder = "Select..."
}) => {
const [field, meta, helpers] = useField(name);
@@ -30,11 +29,8 @@ const MuiFormikSummitAddonSelect = ({
summitId={summitId}
onChange={helpers.setValue}
placeholder={placeholder}
- inputProps={{
- error: meta.touched && Boolean(meta.error),
- helperText: meta.touched && meta.error,
- ...inputProps
- }}
+ error={meta.touched && Boolean(meta.error)}
+ helperText={meta.touched ? meta.error : ""}
/>
);
};
@@ -42,8 +38,7 @@ const MuiFormikSummitAddonSelect = ({
MuiFormikSummitAddonSelect.propTypes = {
name: PropTypes.string.isRequired,
summitId: PropTypes.number.isRequired,
- placeholder: PropTypes.string,
- inputProps: PropTypes.object
+ placeholder: PropTypes.string
};
export default MuiFormikSummitAddonSelect;
diff --git a/src/components/mui/formik-inputs/mui-formik-textfield.js b/src/components/mui/formik-inputs/mui-formik-textfield.js
index b8526fb3..f4acd4f7 100644
--- a/src/components/mui/formik-inputs/mui-formik-textfield.js
+++ b/src/components/mui/formik-inputs/mui-formik-textfield.js
@@ -21,6 +21,7 @@ const MuiFormikTextField = ({
label,
maxLength,
required = false,
+ slotProps: externalSlotProps,
...props
}) => {
const [field, meta] = useField(name);
@@ -43,9 +44,8 @@ const MuiFormikTextField = ({
error={meta.touched && Boolean(meta.error)}
helperText={meta.touched && meta.error}
slotProps={{
- htmlInput: {
- maxLength
- }
+ ...externalSlotProps,
+ htmlInput: { maxLength, ...externalSlotProps?.htmlInput }
}}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
diff --git a/src/components/mui/formik-inputs/mui-sponsor-input.js b/src/components/mui/formik-inputs/mui-sponsor-input.js
index aa8d6a45..57776aec 100644
--- a/src/components/mui/formik-inputs/mui-sponsor-input.js
+++ b/src/components/mui/formik-inputs/mui-sponsor-input.js
@@ -133,20 +133,23 @@ const MuiSponsorInput = ({
error={Boolean(error)}
helperText={errorMessage || ""}
slotProps={{
- ...params.InputProps,
- inputLabel: { shrink: false },
- sx: {
- "& input::placeholder": {
- color: "#00000061",
- opacity: 1
- }
+ ...params.slotProps,
+ input: {
+ ...params.slotProps?.input,
+ endAdornment: (
+ <>
+ {loading && }
+ {params.slotProps?.input?.endAdornment}
+
+ )
},
- endAdornment: (
- <>
- {loading && }
- {params.InputProps?.endAdornment}
-
- )
+ inputLabel: { shrink: false }
+ }}
+ sx={{
+ "& input::placeholder": {
+ color: "#00000061",
+ opacity: 1
+ }
}}
/>
)}
diff --git a/src/components/mui/formik-inputs/sponsorship-input-mui.js b/src/components/mui/formik-inputs/sponsorship-input-mui.js
index 358eb192..edfa4d13 100644
--- a/src/components/mui/formik-inputs/sponsorship-input-mui.js
+++ b/src/components/mui/formik-inputs/sponsorship-input-mui.js
@@ -129,20 +129,23 @@ const SponsorshipTypeInputMUI = ({
error={Boolean(error)}
helperText={errorMessage || ""}
slotProps={{
- ...params.InputProps,
- inputLabel: { shrink: false },
- sx: {
- "& input::placeholder": {
- color: "#00000061",
- opacity: 1
- }
+ ...params.slotProps,
+ input: {
+ ...params.slotProps?.input,
+ endAdornment: (
+ <>
+ {loading && }
+ {params.slotProps?.input?.endAdornment}
+
+ )
},
- endAdornment: (
- <>
- {loading && }
- {params.InputProps?.endAdornment}
-
- )
+ inputLabel: { shrink: false }
+ }}
+ sx={{
+ "& input::placeholder": {
+ color: "#00000061",
+ opacity: 1
+ }
}}
/>
)}
diff --git a/src/components/mui/menu-button.js b/src/components/mui/menu-button.js
index 70c8bb40..6ba9a433 100644
--- a/src/components/mui/menu-button.js
+++ b/src/components/mui/menu-button.js
@@ -81,10 +81,8 @@ const MenuButton = ({
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleClose}
- MenuListProps={{
- "aria-labelledby": buttonId
- }}
slotProps={{
+ list: { "aria-labelledby": buttonId },
paper: {
sx: { minWidth: 220 }
}
diff --git a/src/components/mui/summit-addon-select.js b/src/components/mui/summit-addon-select.js
index 92927685..65d84424 100644
--- a/src/components/mui/summit-addon-select.js
+++ b/src/components/mui/summit-addon-select.js
@@ -12,7 +12,7 @@
* */
import React, { useEffect, useState } from "react";
-import { MenuItem, Select } from "@mui/material";
+import { FormControl, FormHelperText, MenuItem, Select } from "@mui/material";
import PropTypes from "prop-types";
import { querySummitAddons } from "../../utils/query-actions";
@@ -21,7 +21,8 @@ const SummitAddonSelect = ({
summitId,
placeholder = "Select...",
onChange,
- inputProps = {}
+ error = false,
+ helperText = ""
}) => {
const [options, setOptions] = useState([]);
@@ -40,27 +41,28 @@ const SummitAddonSelect = ({
};
return (
-
+
+
+ {helperText && {helperText}}
+
);
};
@@ -68,7 +70,9 @@ SummitAddonSelect.propTypes = {
value: PropTypes.string,
summitId: PropTypes.number.isRequired,
placeholder: PropTypes.string,
- onChange: PropTypes.func.isRequired
+ onChange: PropTypes.func.isRequired,
+ error: PropTypes.bool,
+ helperText: PropTypes.string
};
export default SummitAddonSelect;
diff --git a/src/components/mui/table/extra-rows/DiscountRow.jsx b/src/components/mui/table/extra-rows/DiscountRow.jsx
index 27fe1a79..1dfa03c3 100644
--- a/src/components/mui/table/extra-rows/DiscountRow.jsx
+++ b/src/components/mui/table/extra-rows/DiscountRow.jsx
@@ -46,7 +46,7 @@ const DiscountRow = ({ discount, discountCents, balance, colGap = 0, trailing =
{[...Array(colGap)].map((_, i) => (
// eslint-disable-next-line react/no-array-index-key
-