udp-react-enterprise-component-library 25.18.1-beta.25 → 25.18.1-beta.26

package/dist/Expander-BxaMSun-.js

@@ -1,81 +0,0 @@
-import React, { useState } from "react";
-import { Typography, lighten, makeStyles } from "@material-ui/core";
-import { ChevronDownIcon, ChevronUpIcon } from "@fluentui/react-icons";
-import MuiExpansionPanel from "@material-ui/core/ExpansionPanel";
-import MuiExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
-import MuiExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
-
-//#region src/UI/navigation/menus/ExpanderItem.jsx
-const useStyles$1 = makeStyles((theme) => ({
-	root: {
-		display: "flex",
-		width: "100%"
-	},
-	title: {
-		width: "100%",
-		flex: 1
-	}
-}));
-const ExpanderItem = ({ label, expanded }) => {
-	const classes = useStyles$1();
-	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement("div", { className: classes.title }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, label)), !expanded && /* @__PURE__ */ React.createElement(ChevronDownIcon, null), expanded && /* @__PURE__ */ React.createElement(ChevronUpIcon, null));
-};
-
-//#endregion
-//#region src/UI/navigation/menus/Expander.jsx
-const useStyles = makeStyles((theme) => ({
-	rootPanel: {
-		boxShadow: "none",
-		padding: 0,
-		minWidth: 300,
-		"&:not(:last-child)": { borderBottom: 0 },
-		"&$expanded": { margin: "auto" }
-	},
-	expanded: { minHeight: 40 },
-	root: {
-		background: (props) => props.accent ? theme.palette.primary.main : lighten(theme.palette.primary.light, .4),
-		color: (props) => props.accent && theme.palette.common.white,
-		marginBottom: -1,
-		minHeight: 40,
-		"&$expanded": {
-			minHeight: 40,
-			height: 20,
-			paddingTop: 25,
-			backgroundColor: (props) => props.accent ? theme.palette.primary.main : lighten(theme.palette.primary.light, .7)
-		}
-	},
-	content: { "&$expanded": { margin: "12px 0" } },
-	detailsRoot: {
-		padding: 0,
-		flexDirection: (props) => props.single ? "column" : "row"
-	}
-}));
-const Block = (props) => {
-	const [expanded, setExpanded] = useState("panel1");
-	const classes = useStyles(props);
-	const { label, children, number, id, ...otherProps } = props;
-	const handleChange = (panel) => (event, newExpanded) => {
-		setExpanded(newExpanded ? panel : false);
-	};
-	return /* @__PURE__ */ React.createElement(MuiExpansionPanel, {
-		classes: { root: classes.rootPanel },
-		...otherProps,
-		square: true,
-		expanded: expanded === `panel${number}`,
-		onChange: handleChange(`panel${number}`),
-		id
-	}, /* @__PURE__ */ React.createElement(MuiExpansionPanelSummary, {
-		classes: {
-			root: classes.root,
-			expanded: classes.expanded
-		},
-		"aria-controls": "panel3d-content"
-	}, /* @__PURE__ */ React.createElement(ExpanderItem, {
-		label,
-		expanded: expanded === `panel${number}`
-	})), /* @__PURE__ */ React.createElement(MuiExpansionPanelDetails, { classes: { root: classes.detailsRoot } }, children));
-};
-
-//#endregion
-export { ExpanderItem as n, Block as t };
-//# sourceMappingURL=Expander-BxaMSun-.js.map

package/dist/Expander-BxaMSun-.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Expander-BxaMSun-.js","names":["useStyles"],"sources":["../src/UI/navigation/menus/ExpanderItem.jsx","../src/UI/navigation/menus/Expander.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, Typography } from '@material-ui/core'\nimport { ChevronDownIcon, ChevronUpIcon } from '@fluentui/react-icons'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    width: '100%'\n  },\n  title: {\n    width: '100%',\n    flex: 1\n  }\n}))\n\nexport const ExpanderItem = ({ label, expanded }) => {\n  const classes = useStyles()\n  // const [expanded, setExpanded] = useState(false);\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.title}>\n        <Typography variant='subtitle2'>{label}</Typography>\n      </div>\n\n      {!expanded && <ChevronDownIcon />}\n      {expanded && <ChevronUpIcon />}\n    </div>\n  )\n}\n","import React, { useState } from 'react'\nimport { lighten, makeStyles } from '@material-ui/core'\nimport MuiExpansionPanel from '@material-ui/core/ExpansionPanel'\nimport MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'\nimport MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'\nimport { ExpanderItem } from './ExpanderItem'\n\nconst useStyles = makeStyles((theme) => ({\n  rootPanel: {\n    boxShadow: 'none',\n    padding: 0,\n    minWidth: 300,\n    '&:not(:last-child)': {\n      borderBottom: 0\n    },\n    '&$expanded': {\n      margin: 'auto'\n    }\n  },\n  expanded: {\n    minHeight: 40\n  },\n  root: {\n    background: (props) =>\n      props.accent\n        ? theme.palette.primary.main\n        : lighten(theme.palette.primary.light, 0.4),\n\n    color: (props) => props.accent && theme.palette.common.white,\n    marginBottom: -1,\n    minHeight: 40,\n    '&$expanded': {\n      minHeight: 40,\n      height: 20,\n      paddingTop: 25,\n      backgroundColor: (props) =>\n        props.accent\n          ? theme.palette.primary.main\n          : lighten(theme.palette.primary.light, 0.7)\n    }\n  },\n  content: {\n    '&$expanded': {\n      margin: '12px 0'\n    }\n  },\n  detailsRoot: {\n    padding: 0,\n    flexDirection: (props) => (props.single ? 'column' : 'row')\n  }\n}))\n\nexport const Block = (props) => {\n  const [expanded, setExpanded] = useState('panel1')\n  const classes = useStyles(props)\n\n  const { label, children, number, id, ...otherProps } = props\n\n  const handleChange = (panel) => (event, newExpanded) => {\n    setExpanded(newExpanded ? panel : false)\n  }\n  return (\n    <MuiExpansionPanel\n      classes={{ root: classes.rootPanel }}\n      {...otherProps}\n      square\n      expanded={expanded === `panel${number}`}\n      onChange={handleChange(`panel${number}`)}\n      id={id}\n    >\n      <MuiExpansionPanelSummary\n        classes={{ root: classes.root, expanded: classes.expanded }}\n        aria-controls='panel3d-content'\n      >\n        <ExpanderItem label={label} expanded={expanded === `panel${number}`} />\n      </MuiExpansionPanelSummary>\n      <MuiExpansionPanelDetails classes={{ root: classes.detailsRoot }}>\n        {children}\n      </MuiExpansionPanelDetails>\n    </MuiExpansionPanel>\n  )\n}\n"],"mappings":";;;;;;;;AAIA,MAAMA,cAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS;EACT,OAAO;EACR;CACD,OAAO;EACL,OAAO;EACP,MAAM;EACP;CACF,EAAE;AAEH,MAAa,gBAAgB,EAAE,OAAO,eAAe;CACnD,MAAM,UAAUA,aAAW;AAG3B,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAAC,cAAW,SAAQ,eAAa,MAAmB,CAChD,EAEL,CAAC,YAAY,oCAAC,sBAAkB,EAChC,YAAY,oCAAC,oBAAgB,CAC1B;;;;;ACpBV,MAAM,YAAY,YAAY,WAAW;CACvC,WAAW;EACT,WAAW;EACX,SAAS;EACT,UAAU;EACV,sBAAsB,EACpB,cAAc,GACf;EACD,cAAc,EACZ,QAAQ,QACT;EACF;CACD,UAAU,EACR,WAAW,IACZ;CACD,MAAM;EACJ,aAAa,UACX,MAAM,SACF,MAAM,QAAQ,QAAQ,OACtB,QAAQ,MAAM,QAAQ,QAAQ,OAAO,GAAI;EAE/C,QAAQ,UAAU,MAAM,UAAU,MAAM,QAAQ,OAAO;EACvD,cAAc;EACd,WAAW;EACX,cAAc;GACZ,WAAW;GACX,QAAQ;GACR,YAAY;GACZ,kBAAkB,UAChB,MAAM,SACF,MAAM,QAAQ,QAAQ,OACtB,QAAQ,MAAM,QAAQ,QAAQ,OAAO,GAAI;GAChD;EACF;CACD,SAAS,EACP,cAAc,EACZ,QAAQ,UACT,EACF;CACD,aAAa;EACX,SAAS;EACT,gBAAgB,UAAW,MAAM,SAAS,WAAW;EACtD;CACF,EAAE;AAEH,MAAa,SAAS,UAAU;CAC9B,MAAM,CAAC,UAAU,eAAe,SAAS,SAAS;CAClD,MAAM,UAAU,UAAU,MAAM;CAEhC,MAAM,EAAE,OAAO,UAAU,QAAQ,IAAI,GAAG,eAAe;CAEvD,MAAM,gBAAgB,WAAW,OAAO,gBAAgB;AACtD,cAAY,cAAc,QAAQ,MAAM;;AAE1C,QACE,oCAAC;EACC,SAAS,EAAE,MAAM,QAAQ,WAAW;EACpC,GAAI;EACJ;EACA,UAAU,aAAa,QAAQ;EAC/B,UAAU,aAAa,QAAQ,SAAS;EACpC;IAEJ,oCAAC;EACC,SAAS;GAAE,MAAM,QAAQ;GAAM,UAAU,QAAQ;GAAU;EAC3D,iBAAc;IAEd,oCAAC;EAAoB;EAAO,UAAU,aAAa,QAAQ;GAAY,CAC9C,EAC3B,oCAAC,4BAAyB,SAAS,EAAE,MAAM,QAAQ,aAAa,IAC7D,SACwB,CACT"}

package/dist/ExtenderToggle-CKt1tY6l.js

@@ -1,48 +0,0 @@
-import { t as Token } from "./Token-rFpVjQT_.js";
-import React from "react";
-import { Typography, makeStyles } from "@material-ui/core";
-import { ChevronDownIcon } from "@fluentui/react-icons";
-import PropTypes from "prop-types";
-
-//#region src/UI/templates/ui/ExtenderToggle.jsx
-const useStyles = makeStyles((theme) => ({
-	root: {
-		display: "flex",
-		flexDirection: "row",
-		borderRadius: "0px 0px 25px 25px ",
-		paddingRight: (props) => props.toggleLabel && theme.spacing(2),
-		background: (props) => props.color,
-		cursor: "pointer"
-	},
-	label: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "flex-end",
-		color: (props) => theme?.palette?.getContrastText(props.color ? theme.palette?.secondary?.main : props.color)
-	},
-	token: { transform: (props) => props.open ? "rotateZ(-180deg)" : "rotateZ(0deg)" }
-}));
-const ExtenderToggle = (props) => {
-	const classes = useStyles(props);
-	const { onClick, toggleLabel, compact } = props;
-	return /* @__PURE__ */ React.createElement("div", {
-		className: !compact && classes.root,
-		onClick
-	}, /* @__PURE__ */ React.createElement("div", { className: classes.token }, /* @__PURE__ */ React.createElement(Token, {
-		icon: ChevronDownIcon,
-		color: "default",
-		size: "small",
-		variant: "filled",
-		type: "icon",
-		compact
-	})), /* @__PURE__ */ React.createElement("div", { className: classes.label }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, " ", toggleLabel, " ")));
-};
-ExtenderToggle.propTypes = {
-	onClick: PropTypes.func,
-	toggleLabel: PropTypes.string,
-	color: PropTypes.string
-};
-
-//#endregion
-export { ExtenderToggle as t };
-//# sourceMappingURL=ExtenderToggle-CKt1tY6l.js.map

package/dist/ExtenderToggle-CKt1tY6l.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExtenderToggle-CKt1tY6l.js","names":[],"sources":["../src/UI/templates/ui/ExtenderToggle.jsx"],"sourcesContent":["import React from 'react';\nimport { makeStyles, Typography } from '@material-ui/core';\nimport { Token } from '../../components/dataDisplay/Token';\nimport { ChevronDownIcon } from '@fluentui/react-icons';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    borderRadius: '0px 0px 25px 25px ',\n    paddingRight: (props) => props.toggleLabel && theme.spacing(2),\n    background: (props) => props.color,\n    cursor: 'pointer'\n  },\n  label: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    color: (props) =>\n      theme?.palette?.getContrastText(\n        props.color ? theme.palette?.secondary?.main : props.color\n      )\n  },\n  token: {\n    transform: (props) => (props.open ? 'rotateZ(-180deg)' : 'rotateZ(0deg)')\n  }\n}));\n\nexport const ExtenderToggle = (props) => {\n  const classes = useStyles(props);\n  const { onClick, toggleLabel, compact } = props;\n\n  return (\n    <div className={!compact && classes.root} onClick={onClick}>\n      <div className={classes.token}>\n        <Token\n          icon={ChevronDownIcon}\n          color='default'\n          size='small'\n          variant='filled'\n          type='icon'\n          compact={compact}\n        />\n      </div>\n      <div className={classes.label}>\n        <Typography variant='caption'> {toggleLabel} </Typography>\n      </div>\n    </div>\n  );\n};\nExtenderToggle.propTypes = {\n  /**\n   * onClick - click event for toggle\n   */\n  onClick: PropTypes.func,\n  /**\n   * toggleLabel - lable that appears on toggle\n   */\n  toggleLabel: PropTypes.string,\n  /**\n   * color - background color for the toggle button\n   */\n  color: PropTypes.string\n};\n"],"mappings":";;;;;;;AAMA,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM;EACJ,SAAS;EACT,eAAe;EACf,cAAc;EACd,eAAe,UAAU,MAAM,eAAe,MAAM,QAAQ,EAAE;EAC9D,aAAa,UAAU,MAAM;EAC7B,QAAQ;EACT;CACD,OAAO;EACL,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,QAAQ,UACN,OAAO,SAAS,gBACd,MAAM,QAAQ,MAAM,SAAS,WAAW,OAAO,MAAM,MACtD;EACJ;CACD,OAAO,EACL,YAAY,UAAW,MAAM,OAAO,qBAAqB,iBAC1D;CACF,EAAE;AAEH,MAAa,kBAAkB,UAAU;CACvC,MAAM,UAAU,UAAU,MAAM;CAChC,MAAM,EAAE,SAAS,aAAa,YAAY;AAE1C,QACE,oCAAC;EAAI,WAAW,CAAC,WAAW,QAAQ;EAAe;IACjD,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAAC;EACC,MAAM;EACN,OAAM;EACN,MAAK;EACL,SAAQ;EACR,MAAK;EACI;GACT,CACE,EACN,oCAAC,SAAI,WAAW,QAAQ,SACtB,oCAAC,cAAW,SAAQ,aAAU,KAAE,aAAY,IAAc,CACtD,CACF;;AAGV,eAAe,YAAY;CAIzB,SAAS,UAAU;CAInB,aAAa,UAAU;CAIvB,OAAO,UAAU;CAClB"}

package/dist/FieldArrayCard-KGSDXwrq.js

@@ -1,404 +0,0 @@
-import { r as useAgGridApi } from "./AgTable-B2xTzAm2.js";
-import { t as Field } from "./Field-Cda5rJe2.js";
-import { t as apiMutate } from "./useAxiosMutate-DcLxzykX.js";
-import { t as DateTimeField } from "./DateTimeField-CUzs3MIq.js";
-import { t as FluentTextFieldAutoComplete } from "./FluentTextFieldAutoComplete-5Hp3qpk6.js";
-import { t as FluentToggle } from "./FluentToggle-B1DqTfua.js";
-import { t as Typography$1 } from "./Typography-BMsa1JYd.js";
-import { t as LayoutUnit } from "./LayoutUnit-D4jJvonh.js";
-import { n as SideSheet } from "./SideSheet-C-rILQqR.js";
-import { t as AmbientCard } from "./AmbientCard-DK9abODq.js";
-import { t as FluentDatePicker } from "./FluentDatePicker-C6WEywwM.js";
-import { t as FilterOperators } from "./SearchOperator-D9838PIe.js";
-import { t as AmbientGridTemplate } from "./AmbientGridTemplate-BecuOnHe.js";
-import { t as IconButtonWithTooltip } from "./IconButtonWithToolTip-DswviiJB.js";
-import { t as FluentTextField } from "./FluentTextField-CXvZawOG.js";
-import { t as FluentCheckbox } from "./FluentCheckbox-CW8pHQ21.js";
-import { t as EmptyStateDisplay } from "./EmptyStateDisplay-CVeCBelv.js";
-import { t as Grid$1 } from "./Grid-CQe49OTv.js";
-import { t as FluentTimePicker } from "./FluentTimePicker-BfGJcPck.js";
-import { t as FormControlLabel$1 } from "./FormControlLabel-CtB6GV-I.js";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { makeStyles } from "@material-ui/core";
-import { AddIcon, DeleteIcon } from "@fluentui/react-icons";
-import { useTranslation } from "react-i18next";
-import { FieldArray } from "react-final-form-arrays";
-
-//#region src/UI/inputs/fieldArrayCard/fieldArrayCardEnum.ts
-let FieldType = /* @__PURE__ */ function(FieldType$1) {
-	FieldType$1["Text"] = "text";
-	FieldType$1["Date"] = "date";
-	FieldType$1["DateRange"] = "dateRange";
-	FieldType$1["Time"] = "time";
-	FieldType$1["DateTime"] = "dateTime";
-	FieldType$1["Toggle"] = "toggle";
-	FieldType$1["Checkbox"] = "checkbox";
-	FieldType$1["DropdownMenu"] = "dropdownMenu";
-	return FieldType$1;
-}({});
-
-//#endregion
-//#region src/UI/inputs/fieldArrayCard/SearchSideSheet.jsx
-const SearchSideSheet = (props) => {
-	const { open, handleClose, exclude, title, productApiBase, searchApi, colDefs = [], gridTitle, idField, formIdField, handleSearch, width = "800px", height = "58vh" } = props;
-	const [selectedData, setSelectedData] = useState([]);
-	const { t } = useTranslation();
-	const { gridApi, onGridReady, gridColumnApi } = useAgGridApi();
-	const paginationPageSize = 20;
-	const searchData = useCallback(async (data) => apiMutate(productApiBase, searchApi, { method: "post" }, data), [productApiBase, searchApi]);
-	const onSelectionChanged = useCallback(() => {
-		setSelectedData(gridApi?.getSelectedRows() ?? []);
-	}, [gridApi]);
-	const handleCloseSideSheet = useCallback((data) => {
-		handleClose(data);
-		setSelectedData([]);
-	}, [handleClose]);
-	const dataSource = useMemo(() => ({ getRows: async ({ request, success, fail }) => {
-		if (handleSearch) {
-			handleSearch(paginationPageSize, request, success, fail);
-			return;
-		}
-		await searchData({ data: {
-			filterElements: request?.filterModel ? Object.entries(request.filterModel)?.map(([key, value]) => {
-				return {
-					searchField: key,
-					searchOperator: FilterOperators[value?.type],
-					searchValue: value?.filter
-				};
-			}) : [],
-			orderElements: request?.sortModel ? request.sortModel?.map((sortObj) => {
-				return {
-					sortColumn: sortObj?.colId,
-					sortDirection: sortObj?.sort?.toUpperCase()
-				};
-			}) : [],
-			pagesize: paginationPageSize,
-			pageNumber: (request?.startRow ?? 0) / paginationPageSize + 1
-		} }).then((response) => {
-			success({
-				rowData: response.data?.pageList,
-				rowCount: response.data?.total
-			});
-		}).catch((error) => {
-			fail();
-		});
-	} }), [searchData, handleSearch]);
-	return /* @__PURE__ */ React.createElement(SideSheet, {
-		open,
-		onClose: () => handleCloseSideSheet(),
-		title,
-		width,
-		buttonLabel: t("Choose"),
-		onSubmit: () => {
-			handleCloseSideSheet(selectedData);
-		}
-	}, /* @__PURE__ */ React.createElement(AmbientGridTemplate, {
-		title: gridTitle,
-		rowModelType: "serverSide",
-		serverSideDatasource: dataSource,
-		cacheBlockSize: paginationPageSize,
-		serverSideStoreType: "partial",
-		paginationPageSize,
-		columnDefs: [{
-			field: "",
-			checkboxSelection: true,
-			maxWidth: 60,
-			minWidth: 60,
-			cellRenderer: (params) => {
-				console.log({
-					exclude,
-					formIdField,
-					idField,
-					bool: exclude?.find((selectedItem) => selectedItem[formIdField] === params.data?.[idField])
-				});
-				if (params?.data && !!exclude?.find((selectedItem) => selectedItem[formIdField] === params.data?.[idField])) params.node.setSelected(true);
-			}
-		}, ...colDefs],
-		hideGroupTab: true,
-		hideColumnTab: true,
-		suppressRowClickSelection: true,
-		onSelectionChanged,
-		rowSelection: "multiple",
-		api: gridApi,
-		gridReady: onGridReady,
-		columnApi: gridColumnApi,
-		dynamicSizing: true,
-		height
-	}));
-};
-var SearchSideSheet_default = SearchSideSheet;
-
-//#endregion
-//#region src/UI/inputs/fieldArrayCard/AutocompleteFinalField.jsx
-const AutocompleteFinalField = (props) => {
-	const { value, options, idField = "id", ...otherProps } = props;
-	const currentValue = useMemo(() => {
-		if (typeof value === "object") return value;
-		return options.find((option) => option[idField] === value) || null;
-	}, [
-		idField,
-		options,
-		value
-	]);
-	return /* @__PURE__ */ React.createElement(FluentTextFieldAutoComplete, {
-		...otherProps,
-		options,
-		value: currentValue
-	});
-};
-var AutocompleteFinalField_default = AutocompleteFinalField;
-
-//#endregion
-//#region src/UI/inputs/fieldArrayCard/DateRangeField.jsx
-const DateRangeField = (props) => {
-	const { fieldName, startDateProps = {}, endDateProps = {}, sameRow = false, initialValues } = props;
-	const [maxStartDate, setMaxStartDate] = useState();
-	const [minEndDate, setMinEndDate] = useState();
-	const { t } = useTranslation();
-	useEffect(() => {
-		const currentStartDate = initialValues[startDateProps?.name ?? "startDate"];
-		if (currentStartDate) {
-			let minDate = new Date(currentStartDate);
-			minDate.setDate(minDate?.getDate() + 1);
-			setMinEndDate(minDate);
-		} else setMinEndDate(void 0);
-	}, [initialValues, startDateProps.name]);
-	useEffect(() => {
-		const currentEndDate = initialValues[endDateProps?.name ?? "endDate"];
-		if (currentEndDate) {
-			let maxDate = new Date(currentEndDate);
-			maxDate.setDate(maxDate?.getDate() - 1);
-			maxDate.setHours(0, 0, 0, 0);
-			setMaxStartDate(maxDate);
-		} else setMaxStartDate(void 0);
-	}, [endDateProps.name, initialValues]);
-	return /* @__PURE__ */ React.createElement(Grid$1, {
-		container: true,
-		spacing: sameRow ? 2 : 0
-	}, /* @__PURE__ */ React.createElement(Grid$1, {
-		item: true,
-		xs: 12,
-		sm: sameRow ? 6 : 12
-	}, /* @__PURE__ */ React.createElement(Field, {
-		...startDateProps,
-		parse: (value) => value ? value : null,
-		format: (value) => value ? value : null,
-		label: startDateProps?.label ?? t("Start Date"),
-		name: `${fieldName}.${startDateProps?.name ?? "startDate"}`,
-		key: `${fieldName}.${startDateProps?.name ?? "startDate"}`,
-		component: FluentDatePicker,
-		size: "small",
-		maxDate: maxStartDate,
-		allowNull: true
-	})), /* @__PURE__ */ React.createElement(Grid$1, {
-		item: true,
-		xs: 12,
-		sm: sameRow ? 6 : 12
-	}, /* @__PURE__ */ React.createElement(Field, {
-		...endDateProps,
-		parse: (value) => value ?? null,
-		format: (value) => value ?? null,
-		label: endDateProps?.label ?? t("End Date"),
-		name: `${fieldName}.${endDateProps?.name ?? "endDate"}`,
-		key: `${fieldName}.${endDateProps?.name ?? "endDate"}`,
-		component: FluentDatePicker,
-		size: "small",
-		minDate: minEndDate,
-		allowNull: true
-	})));
-};
-var DateRangeField_default = DateRangeField;
-
-//#endregion
-//#region src/UI/inputs/fieldArrayCard/FieldArrayCard.jsx
-const useStyles = makeStyles((theme) => ({
-	toggleWrapper: {
-		marginLeft: theme.spacing(-.1),
-		gap: theme.spacing(1),
-		marginTop: theme.spacing(.8)
-	},
-	checkboxField: { marginLeft: theme.spacing(-1.1) },
-	sectionHeader: {
-		display: "flex",
-		justifyContent: "space-between",
-		gap: theme.spacing(1),
-		alignItems: "center",
-		marginBottom: theme.spacing(1)
-	},
-	fieldsWrapper: {
-		display: "flex",
-		flexDirection: "column"
-	},
-	cardsWrapper: {
-		display: "flex",
-		flexDirection: "column",
-		gap: theme.spacing(2)
-	},
-	cardHeader: {
-		display: "flex",
-		justifyContent: "space-between",
-		gap: theme.spacing(1),
-		alignItems: "center"
-	}
-}));
-const FieldArrayCard = (props) => {
-	const { title = " ", fieldArrayName, getRowTitle, fieldConfig, removeTopLayoutUnit = false, defaultAddedItemValues, enableSearchSideSheet, searchSideSheetTitle, searchFieldId = "id", formFieldId = "id", formatAddedSearchItems, productApiBase, searchApi, searchGridColDefs, searchGridTitle, handleSearch, disableExcludeInSearch = false, searchSideSheetWidth, searchSideSheetHeight } = props;
-	const classes = useStyles();
-	const [openSideSheet, setOpenSideSheet] = useState(false);
-	const { t } = useTranslation();
-	const getField = useCallback((finalFieldName, config, fieldObj) => {
-		const { fieldName, fieldType, fieldLabel, componentProps } = config;
-		let fieldComponent = null;
-		switch (fieldType) {
-			case FieldType.DropdownMenu:
-				fieldComponent = /* @__PURE__ */ React.createElement(Field, {
-					...componentProps,
-					name: `${finalFieldName}.${fieldName}`,
-					component: AutocompleteFinalField_default,
-					label: fieldLabel
-				});
-				break;
-			case FieldType.Date:
-				fieldComponent = /* @__PURE__ */ React.createElement(Field, {
-					...componentProps,
-					name: `${finalFieldName}.${fieldName}`,
-					component: FluentDatePicker,
-					label: fieldLabel,
-					size: "small",
-					allowNull: true
-				});
-				break;
-			case FieldType.DateRange:
-				fieldComponent = /* @__PURE__ */ React.createElement(DateRangeField_default, {
-					...componentProps,
-					fieldName: finalFieldName,
-					initialValues: fieldObj
-				});
-				break;
-			case FieldType.Time:
-				fieldComponent = /* @__PURE__ */ React.createElement(Field, {
-					...componentProps,
-					name: `${finalFieldName}.${fieldName}`,
-					component: FluentTimePicker,
-					label: fieldLabel,
-					size: "small"
-				});
-				break;
-			case FieldType.DateTime:
-				fieldComponent = /* @__PURE__ */ React.createElement(Field, {
-					...componentProps,
-					name: `${finalFieldName}.${fieldName}`,
-					component: DateTimeField,
-					label: fieldLabel,
-					size: "small",
-					allowNull: true
-				});
-				break;
-			case FieldType.Toggle:
-				fieldComponent = /* @__PURE__ */ React.createElement(FormControlLabel$1, {
-					control: /* @__PURE__ */ React.createElement(Field, {
-						defaultChecked: false,
-						...componentProps,
-						name: `${finalFieldName}.${fieldName}`,
-						component: FluentToggle,
-						type: "checkbox"
-					}),
-					label: fieldLabel,
-					className: classes.toggleWrapper
-				});
-				break;
-			case FieldType.Checkbox:
-				fieldComponent = /* @__PURE__ */ React.createElement(FormControlLabel$1, {
-					control: /* @__PURE__ */ React.createElement(Field, {
-						defaultChecked: false,
-						...componentProps,
-						name: `${finalFieldName}.${fieldName}`,
-						component: FluentCheckbox,
-						type: "checkbox"
-					}),
-					label: fieldLabel,
-					className: classes.checkboxField
-				});
-				break;
-			default:
-				fieldComponent = /* @__PURE__ */ React.createElement(Field, {
-					...componentProps,
-					name: `${finalFieldName}.${fieldName}`,
-					component: FluentTextField,
-					label: fieldLabel
-				});
-				break;
-		}
-		return fieldComponent;
-	}, [classes.checkboxField, classes.toggleWrapper]);
-	const handleCloseSideSheet = useCallback((selectedRecords, fieldArray) => {
-		const formattedRecords = formatAddedSearchItems ? formatAddedSearchItems(selectedRecords ?? []) : selectedRecords;
-		if (formattedRecords?.length) {
-			for (const record of formattedRecords) if (disableExcludeInSearch || !!!fieldArray?.value?.find((item) => item[formFieldId] === record[formFieldId])) fieldArray.push(record);
-		}
-		setOpenSideSheet(false);
-	}, [
-		disableExcludeInSearch,
-		formFieldId,
-		formatAddedSearchItems
-	]);
-	const handleAddField = useCallback((fields) => {
-		if (enableSearchSideSheet) setOpenSideSheet(true);
-		else if (defaultAddedItemValues) fields.push(defaultAddedItemValues);
-		else fields.push({});
-	}, [defaultAddedItemValues, enableSearchSideSheet]);
-	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FieldArray, { name: fieldArrayName }, ({ fields }) => {
-		return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: classes.sectionHeader }, /* @__PURE__ */ React.createElement("div", null, title && /* @__PURE__ */ React.createElement(Typography$1, { variant: "h6" }, title)), /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
-			onClick: () => {
-				handleAddField(fields);
-			},
-			icon: AddIcon,
-			title: t("Add")
-		})), /* @__PURE__ */ React.createElement("div", { className: classes.cardsWrapper }, fields?.value?.length > 0 ? fields.map((name, index) => {
-			const rowTitle = getRowTitle && getRowTitle(fields?.value?.[index]);
-			return /* @__PURE__ */ React.createElement(AmbientCard, { fullWidth: true }, /* @__PURE__ */ React.createElement("div", { className: classes.cardHeader }, /* @__PURE__ */ React.createElement(Typography$1, { variant: "h6" }, rowTitle), /* @__PURE__ */ React.createElement(IconButtonWithTooltip, {
-				onClick: () => fields.remove(index),
-				icon: DeleteIcon,
-				title: t("Delete")
-			})), rowTitle && !removeTopLayoutUnit && /* @__PURE__ */ React.createElement(LayoutUnit, { unit: "xxs" }), /* @__PURE__ */ React.createElement("div", { className: classes.fieldsWrapper }, fieldConfig?.map((config) => {
-				if (Array.isArray(config)) return /* @__PURE__ */ React.createElement(Grid$1, {
-					container: true,
-					spacing: 2
-				}, config?.map((innerConfig) => {
-					return /* @__PURE__ */ React.createElement(Grid$1, {
-						item: true,
-						xs: 12,
-						sm: 12 / config?.length
-					}, getField(name, innerConfig, fields?.value?.[index]));
-				}));
-				else return getField(name, config, fields?.value?.[index]);
-			})));
-		}) : /* @__PURE__ */ React.createElement(AmbientCard, {
-			fullWidth: true,
-			cardHeight: "155px"
-		}, /* @__PURE__ */ React.createElement(EmptyStateDisplay, {
-			primaryText: t("No records to show"),
-			secondaryText: t("Try adding one")
-		}))), /* @__PURE__ */ React.createElement(SearchSideSheet_default, {
-			open: openSideSheet,
-			handleClose: (data) => {
-				handleCloseSideSheet(data, fields);
-			},
-			exclude: disableExcludeInSearch ? [] : fields?.value,
-			title: searchSideSheetTitle,
-			productApiBase,
-			searchApi,
-			colDefs: searchGridColDefs,
-			idField: searchFieldId,
-			formIdField: formFieldId,
-			gridTitle: searchGridTitle,
-			handleSearch,
-			width: searchSideSheetWidth,
-			height: searchSideSheetHeight
-		}));
-	}));
-};
-
-//#endregion
-export { FieldType as n, FieldArrayCard as t };
-//# sourceMappingURL=FieldArrayCard-KGSDXwrq.js.map

package/dist/FieldArrayCard-KGSDXwrq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FieldArrayCard-KGSDXwrq.js","names":["Grid","AutocompleteFinalField","DateRangeField","FormControlLabel","Typography","Grid","SearchSideSheet"],"sources":["../src/UI/inputs/fieldArrayCard/fieldArrayCardEnum.ts","../src/UI/inputs/fieldArrayCard/SearchSideSheet.jsx","../src/UI/inputs/fieldArrayCard/AutocompleteFinalField.jsx","../src/UI/inputs/fieldArrayCard/DateRangeField.jsx","../src/UI/inputs/fieldArrayCard/FieldArrayCard.jsx"],"sourcesContent":["export enum FieldType {\n  Text = 'text',\n  Date = 'date',\n  DateRange = 'dateRange',\n  Time = 'time',\n  DateTime = 'dateTime',\n  Toggle = 'toggle',\n  Checkbox = 'checkbox',\n  DropdownMenu = 'dropdownMenu',\n}","import React, { useCallback, useMemo, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { AmbientGridTemplate } from '../../templates/deprecated/AmbientGridTemplate/AmbientGridTemplate';\nimport { apiMutate } from '../../../utilities/useAxiosMutate';\nimport { FilterOperators } from '../../../models/SearchOperator';\nimport { SideSheet } from '../../surfaces/SideSheet';\nimport { useAgGridApi } from '../../../utilities/aggrid/AgTable';\n\nconst SearchSideSheet = props => {\n  const {\n    open,\n    handleClose,\n    exclude,\n    title,\n    productApiBase,\n    searchApi,\n    colDefs = [],\n    gridTitle,\n    idField,\n    formIdField,\n    handleSearch,\n    width = '800px',\n    height='58vh'\n  } = props;\n  const [selectedData, setSelectedData] = useState([]);\n  const { t } = useTranslation();\n  const { gridApi, onGridReady, gridColumnApi } = useAgGridApi();\n  const paginationPageSize = 20;\n\n  // TODO: use queryId or new data grid from stencil\n  const searchData = useCallback(\n    async data =>\n      apiMutate(\n        productApiBase,\n        searchApi,\n        {\n          method: 'post',\n        },\n        data\n      ),\n    [productApiBase, searchApi]\n  );\n\n  const onSelectionChanged = useCallback(() => {\n    const selectedRows = gridApi?.getSelectedRows() ?? [];\n    setSelectedData(selectedRows);\n  }, [gridApi]);\n\n  const handleCloseSideSheet = useCallback(\n    data => {\n      handleClose(data);\n      setSelectedData([]);\n    },\n    [handleClose]\n  );\n\n  const dataSource = useMemo(\n    () => ({\n      getRows: async ({ request, success, fail }) => {\n        if (handleSearch) {\n          handleSearch(paginationPageSize, request, success, fail);\n          return;\n        }\n        const filterElements = request?.filterModel\n          ? Object.entries(request.filterModel)?.map(([key, value]) => {\n              return {\n                searchField: key,\n                searchOperator: FilterOperators[value?.type],\n                searchValue: value?.filter,\n              };\n            })\n          : [];\n\n        const orderElements = request?.sortModel\n          ? request.sortModel?.map(sortObj => {\n              return {\n                sortColumn: sortObj?.colId,\n                sortDirection: sortObj?.sort?.toUpperCase(),\n              };\n            })\n          : [];\n        await searchData({\n          data: {\n            filterElements: filterElements,\n            orderElements: orderElements,\n            pagesize: paginationPageSize,\n            pageNumber: (request?.startRow ?? 0) / paginationPageSize + 1,\n          },\n        })\n          .then(response => {\n            success({\n              rowData: response.data?.pageList,\n              rowCount: response.data?.total,\n            });\n          })\n          .catch(error => {\n            fail();\n          });\n\n      },\n    }),\n    [searchData, handleSearch]\n  );\n  return (\n    <SideSheet\n      open={open}\n      onClose={() => handleCloseSideSheet()}\n      title={title}\n      width={width}\n      buttonLabel={t('Choose')}\n      onSubmit={() => {\n        handleCloseSideSheet(selectedData);\n      }}\n    >\n      <AmbientGridTemplate\n        title={gridTitle}\n        rowModelType=\"serverSide\"\n        serverSideDatasource={dataSource}\n        cacheBlockSize={paginationPageSize}\n        serverSideStoreType=\"partial\"\n        paginationPageSize={paginationPageSize}\n        columnDefs={[\n          {\n            field: '',\n            checkboxSelection: true,\n            maxWidth: 60,\n            minWidth: 60,\n            cellRenderer: params => {\n              console.log({\n                exclude,\n                formIdField,\n                idField,\n                bool: exclude?.find(\n                  selectedItem =>\n                    selectedItem[formIdField] === params.data?.[idField]\n                ),\n              });\n              if (\n                params?.data &&\n                !!exclude?.find(\n                  selectedItem =>\n                    selectedItem[formIdField] === params.data?.[idField]\n                )\n              ) {\n                params.node.setSelected(true);\n              }\n            },\n          },\n          ...colDefs,\n        ]}\n        hideGroupTab\n        hideColumnTab\n        suppressRowClickSelection={true}\n        onSelectionChanged={onSelectionChanged}\n        rowSelection=\"multiple\"\n        api={gridApi}\n        gridReady={onGridReady}\n        columnApi={gridColumnApi}\n        dynamicSizing={true}\n        height={height}\n      />\n    </SideSheet>\n  );\n};\n\nexport default SearchSideSheet;\n","import React, { useMemo } from 'react';\nimport { FluentTextFieldAutoComplete } from '../textField/FluentTextFieldAutoComplete';\n\n// this is only to used in FieldArrayCard\nconst AutocompleteFinalField = props => {\n  const { value, options, idField = 'id' ,...otherProps } = props;\n\n  const currentValue = useMemo(() => {\n    if (typeof value === 'object') {\n      return value;\n    }\n\n    return options.find(option => option[idField] === value) || null;\n  }, [idField, options, value]);\n\n  return (\n    <FluentTextFieldAutoComplete\n      {...otherProps}\n      options={options}\n      value={currentValue}\n    />\n  );\n};\n\nexport default AutocompleteFinalField;\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Field } from '../../../utilities/form';\nimport { FluentDatePicker } from '../pickers/FluentDatePicker';\nimport { Grid } from '../../Grid';\n\nconst DateRangeField = props => {\n  const {\n    fieldName,\n    startDateProps = {},\n    endDateProps = {},\n    sameRow = false,\n    initialValues,\n  } = props;\n  const [maxStartDate, setMaxStartDate] = useState();\n  const [minEndDate, setMinEndDate] = useState();\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    const currentStartDate = initialValues[startDateProps?.name ?? 'startDate'];\n    if (currentStartDate) {\n      let minDate = new Date(currentStartDate);\n      minDate.setDate(minDate?.getDate() + 1);\n      setMinEndDate(minDate);\n    } else {\n      setMinEndDate(undefined);\n    }\n  }, [initialValues, startDateProps.name]);\n\n  useEffect(() => {\n    const currentEndDate = initialValues[endDateProps?.name ?? 'endDate'];\n    if (currentEndDate) {\n      let maxDate = new Date(currentEndDate);\n      maxDate.setDate(maxDate?.getDate() - 1);\n      maxDate.setHours(0, 0, 0, 0);\n      setMaxStartDate(maxDate);\n    } else {\n      setMaxStartDate(undefined);\n    }\n  }, [endDateProps.name, initialValues]);\n\n  return (\n    <Grid container spacing={sameRow ? 2 : 0}>\n      <Grid item xs={12} sm={sameRow ? 6 : 12}>\n        <Field\n          {...startDateProps}\n          parse={value => (value ? value : null)}\n          format={value => (value ? value : null)}\n          label={startDateProps?.label ?? t('Start Date')}\n          name={`${fieldName}.${startDateProps?.name ?? 'startDate'}`}\n          key={`${fieldName}.${startDateProps?.name ?? 'startDate'}`}\n          component={FluentDatePicker}\n          size=\"small\"\n          maxDate={maxStartDate}\n          allowNull\n        />\n      </Grid>\n      <Grid item xs={12} sm={sameRow ? 6 : 12}>\n        <Field\n          {...endDateProps}\n          parse={value => value ?? null}\n          format={value => value ?? null}\n          label={endDateProps?.label ?? t('End Date')}\n          name={`${fieldName}.${endDateProps?.name ?? 'endDate'}`}\n          key={`${fieldName}.${endDateProps?.name ?? 'endDate'}`}\n          component={FluentDatePicker}\n          size=\"small\"\n          minDate={minEndDate}\n          allowNull\n        />\n      </Grid>\n    </Grid>\n  );\n};\n\nexport default DateRangeField;\n","import { AddIcon, DeleteIcon } from '@fluentui/react-icons';\nimport { makeStyles } from '@material-ui/core';\nimport React, { useCallback, useState } from 'react';\nimport { FieldArray } from 'react-final-form-arrays';\nimport { useTranslation } from 'react-i18next';\nimport SearchSideSheet from './SearchSideSheet';\nimport AutocompleteFinalField from './AutocompleteFinalField';\nimport DateRangeField from './DateRangeField';\nimport { FieldType } from './fieldArrayCardEnum';\nimport { AmbientCard } from '../../surfaces/cards/AmbientCard';\nimport { DateTimeField } from '../datetimes/DateTimeField';\nimport { EmptyStateDisplay } from '../../dataDisplay/EmptyStateDisplay';\nimport { Field } from '../../../utilities/form';\nimport { FluentCheckbox } from '../checkbox/FluentCheckbox';\nimport { FluentDatePicker } from '../pickers/FluentDatePicker';\nimport { FluentTextField } from '../textField/FluentTextField';\nimport { FluentTimePicker } from '../pickers/FluentTimePicker';\nimport { FluentToggle } from '../toggle/FluentToggle';\nimport { FormControlLabel } from '../../utilityDisplay/FormControlLabel';\nimport { Grid } from '../../Grid';\nimport { IconButtonWithTooltip } from '../buttons/IconButtonWithToolTip';\nimport { LayoutUnit } from '../../../layout/LayoutUnit';\nimport { Typography } from '../../dataDisplay/typography/Typography';\n\nconst useStyles = makeStyles(theme => ({\n  toggleWrapper: {\n    marginLeft: theme.spacing(-0.1),\n    gap: theme.spacing(1),\n    marginTop: theme.spacing(0.8),\n  },\n  checkboxField: {\n    marginLeft: theme.spacing(-1.1),\n  },\n  sectionHeader: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n    marginBottom: theme.spacing(1),\n  },\n  fieldsWrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  cardsWrapper: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(2),\n  },\n  cardHeader: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n  },\n}));\n\nexport const FieldArrayCard = props => {\n  const {\n    title = ' ',\n    fieldArrayName,\n    getRowTitle,\n    fieldConfig,\n    removeTopLayoutUnit = false,\n    defaultAddedItemValues,\n    //search sidesheet props\n    enableSearchSideSheet,\n    searchSideSheetTitle,\n    searchFieldId = 'id',\n    formFieldId = 'id',\n    formatAddedSearchItems,\n    productApiBase,\n    searchApi,\n    searchGridColDefs,\n    searchGridTitle,\n    handleSearch,\n    disableExcludeInSearch = false,\n    searchSideSheetWidth,\n    searchSideSheetHeight,\n  } = props;\n  const classes = useStyles();\n  const [openSideSheet, setOpenSideSheet] = useState(false);\n  const { t } = useTranslation();\n\n  const getField = useCallback(\n    (finalFieldName, config, fieldObj) => {\n      const { fieldName, fieldType, fieldLabel, componentProps } = config;\n\n      let fieldComponent = null;\n\n      switch (fieldType) {\n        case FieldType.DropdownMenu:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={AutocompleteFinalField}\n              label={fieldLabel}\n            />\n          );\n          break;\n        case FieldType.Date:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={FluentDatePicker}\n              label={fieldLabel}\n              size=\"small\"\n              allowNull\n            />\n          );\n          break;\n        case FieldType.DateRange:\n          fieldComponent = (\n            <DateRangeField\n              {...componentProps}\n              fieldName={finalFieldName}\n              initialValues={fieldObj}\n            />\n          );\n          break;\n        case FieldType.Time:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={FluentTimePicker}\n              label={fieldLabel}\n              size=\"small\"\n            />\n          );\n          break;\n        case FieldType.DateTime:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={DateTimeField}\n              label={fieldLabel}\n              size=\"small\"\n              allowNull\n            />\n          );\n          break;\n        case FieldType.Toggle:\n          fieldComponent = (\n            <FormControlLabel\n              control={\n                <Field\n                  defaultChecked={false}\n                  {...componentProps}\n                  name={`${finalFieldName}.${fieldName}`}\n                  component={FluentToggle}\n                  type=\"checkbox\"\n                />\n              }\n              label={fieldLabel}\n              className={classes.toggleWrapper}\n            />\n          );\n          break;\n        case FieldType.Checkbox:\n          fieldComponent = (\n            <FormControlLabel\n              control={\n                <Field\n                  defaultChecked={false}\n                  {...componentProps}\n                  name={`${finalFieldName}.${fieldName}`}\n                  component={FluentCheckbox}\n                  type=\"checkbox\"\n                />\n              }\n              label={fieldLabel}\n              className={classes.checkboxField}\n            />\n          );\n          break;\n        default:\n          fieldComponent = (\n            <Field\n              {...componentProps}\n              name={`${finalFieldName}.${fieldName}`}\n              component={FluentTextField}\n              label={fieldLabel}\n            />\n          );\n          break;\n      }\n\n      return fieldComponent;\n    },\n    [classes.checkboxField, classes.toggleWrapper]\n  );\n\n  const handleCloseSideSheet = useCallback(\n    (selectedRecords, fieldArray) => {\n      const formattedRecords = formatAddedSearchItems\n        ? formatAddedSearchItems(selectedRecords ?? [])\n        : selectedRecords;\n\n      if (formattedRecords?.length) {\n        for (const record of formattedRecords) {\n          if (\n            disableExcludeInSearch ||\n            !!!fieldArray?.value?.find(\n              item => item[formFieldId] === record[formFieldId]\n            )\n          )\n            fieldArray.push(record);\n        }\n      }\n\n      setOpenSideSheet(false);\n    },\n    [disableExcludeInSearch, formFieldId, formatAddedSearchItems]\n  );\n\n  const handleAddField = useCallback(\n    fields => {\n      if (enableSearchSideSheet) {\n        setOpenSideSheet(true);\n      } else {\n        if (defaultAddedItemValues) {\n          fields.push(defaultAddedItemValues);\n        } else {\n          fields.push({});\n        }\n      }\n    },\n    [defaultAddedItemValues, enableSearchSideSheet]\n  );\n\n  return (\n    <div>\n      <FieldArray name={fieldArrayName}>\n        {({ fields }) => {\n          return (\n            <div>\n              <div className={classes.sectionHeader}>\n                <div>\n                  {title && <Typography variant=\"h6\">{title}</Typography>}\n                </div>\n                <IconButtonWithTooltip\n                  onClick={() => {\n                    handleAddField(fields);\n                  }}\n                  icon={AddIcon}\n                  title={t('Add')}\n                />\n              </div>\n\n              <div className={classes.cardsWrapper}>\n                {fields?.value?.length > 0 ? (\n                  fields.map((name, index) => {\n                    const rowTitle =\n                      getRowTitle && getRowTitle(fields?.value?.[index]);\n                    return (\n                      <AmbientCard fullWidth>\n                        <div className={classes.cardHeader}>\n                          <Typography variant=\"h6\">{rowTitle}</Typography>\n\n                          <IconButtonWithTooltip\n                            onClick={() => fields.remove(index)}\n                            icon={DeleteIcon}\n                            title={t('Delete')}\n                          />\n                        </div>\n                        {rowTitle && !removeTopLayoutUnit && (\n                          <LayoutUnit unit=\"xxs\" />\n                        )}\n                        <div className={classes.fieldsWrapper}>\n                          {fieldConfig?.map(config => {\n                            if (Array.isArray(config)) {\n                              return (\n                                <Grid container spacing={2}>\n                                  {config?.map(innerConfig => {\n                                    return (\n                                      <Grid\n                                        item\n                                        xs={12}\n                                        sm={12 / config?.length}\n                                      >\n                                        {getField(\n                                          name,\n                                          innerConfig,\n                                          fields?.value?.[index]\n                                        )}\n                                      </Grid>\n                                    );\n                                  })}\n                                </Grid>\n                              );\n                            } else {\n                              return getField(\n                                name,\n                                config,\n                                fields?.value?.[index]\n                              );\n                            }\n                          })}\n                        </div>\n                      </AmbientCard>\n                    );\n                  })\n                ) : (\n                  <AmbientCard fullWidth cardHeight=\"155px\">\n                    <EmptyStateDisplay\n                      primaryText={t('No records to show')}\n                      secondaryText={t('Try adding one')}\n                    />\n                  </AmbientCard>\n                )}\n              </div>\n              <SearchSideSheet\n                open={openSideSheet}\n                handleClose={data => {\n                  handleCloseSideSheet(data, fields);\n                }}\n                exclude={disableExcludeInSearch ? [] : fields?.value}\n                title={searchSideSheetTitle}\n                productApiBase={productApiBase}\n                searchApi={searchApi}\n                colDefs={searchGridColDefs}\n                idField={searchFieldId}\n                formIdField={formFieldId}\n                gridTitle={searchGridTitle}\n                handleSearch={handleSearch}\n                width={searchSideSheetWidth}\n                height={searchSideSheetHeight}\n              />\n            </div>\n          );\n        }}\n      </FieldArray>\n    </div>\n  );\n};\n"],"mappings":"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"}