udp-react-enterprise-component-library 25.16.0 → 25.16.2-beta.1

package/dist/DashboardWidget-CpxtRgWv.js

@@ -0,0 +1,248 @@
+import { useShellStore } from "./shellStore-Bqwtbs_K.js";
+import { FUICardHeaderMenu, FUICard_default } from "./FUICard-B5SvhKL0.js";
+import { FUIMenuItem_default } from "./FUIMenuItem-C6Ypt-fU.js";
+import React, { memo, useCallback, useMemo, useRef } from "react";
+import { CircularProgress, lighten, makeStyles, useTheme } from "@material-ui/core";
+import clsx from "clsx";
+import { DeleteIcon } from "@fluentui/react-icons";
+import { v4 } from "uuid";
+import { useDragLayer } from "react-dnd";
+import { Responsive } from "react-grid-layout";
+import { useMeasure } from "react-use";
+import "react-grid-layout/css/styles.css";
+import "react-resizable/css/styles.css";
+
+//#region src/dashboard/getWidgetLayout.ts
+const getW = (w) => {
+	if (typeof w === "object") return {
+		w: w.default,
+		minW: w.min,
+		maxW: w.max
+	};
+	if (typeof w === "number") return { w };
+	return { w: 2 };
+};
+const getH = (h) => {
+	if (typeof h === "object") return {
+		h: h.default,
+		minH: h.min,
+		maxH: h.max
+	};
+	if (typeof h === "number") return { h };
+	return { h: 2 };
+};
+/**
+* Get a default layout for widgets of a type
+*/
+function getWidgetLayout(getWidget, widgetType) {
+	const { w, h } = (getWidget && getWidget(widgetType)?.layout) ?? {};
+	const layout = {
+		...getW(w),
+		...getH(h)
+	};
+	const wResizable = "minW" in layout || "maxW" in layout;
+	const hResizable = "minH" in layout || "maxH" in layout;
+	layout.isResizable = wResizable || hResizable;
+	return layout;
+}
+
+//#endregion
+//#region src/dashboard/DashboardCardGrid.jsx
+const useStyle = makeStyles((theme) => ({ root: {
+	display: "flex",
+	flexDirection: "column",
+	width: "100%",
+	height: "100%",
+	marginBottom: (props) => props?.disableMargin ? "" : theme.spacing(3)
+} }), { name: "DashboardCardGrid" });
+const DASHBOARD_WIDGET = Symbol("DASHBOARD_WIDGET");
+const breakpoints = {
+	xs: 0,
+	xl: 1150
+};
+const breakpointCols = {
+	xs: 4,
+	xl: 4
+};
+/**
+* Grid layout for dashboard cards
+*/
+const DashboardCardGrid = (props) => {
+	const classes = useStyle(props);
+	const { children, onCreateCard, gridProperties,...other } = props;
+	const { getWidget } = useShellStore();
+	const rglRef = useRef();
+	const [ref, { width }] = useMeasure();
+	const theme = useTheme();
+	const { droppingWidgetType } = useDragLayer((monitor) => {
+		if (monitor.getItemType() === DASHBOARD_WIDGET) {
+			const { id: wigetType } = monitor.getItem();
+			return { droppingWidgetType: wigetType };
+		}
+		return { droppingWidgetType: null };
+	});
+	const droppingItemLayout = useMemo(() => {
+		if (droppingWidgetType) return {
+			i: v4(),
+			...getWidgetLayout(getWidget, droppingWidgetType)
+		};
+	}, [getWidget, droppingWidgetType]);
+	const drag = useCallback((layout, oldLayoutItem, layoutItem, placeholder) => {}, []);
+	const resize = useCallback((layout, oldLayoutItem, layoutItem, placeholder) => {
+		if (layoutItem.w >= 6 && layoutItem.w < 8) {
+			layoutItem.w = 4;
+			placeholder.w = 4;
+		}
+	}, []);
+	const drop = useCallback((layout, item) => {
+		if (droppingWidgetType) {
+			const { x, y, w, h } = item;
+			const { breakpoint } = rglRef.current.state;
+			if (onCreateCard) onCreateCard({
+				widgetType: droppingWidgetType,
+				id: v4(),
+				layout: { [breakpoint]: {
+					x,
+					y,
+					w,
+					h
+				} },
+				params: []
+			});
+		}
+	}, [droppingWidgetType, onCreateCard]);
+	return /* @__PURE__ */ React.createElement("div", {
+		ref,
+		className: classes.root
+	}, width ? /* @__PURE__ */ React.createElement(Responsive, {
+		ref: rglRef,
+		...other,
+		width,
+		breakpoints,
+		cols: breakpointCols,
+		rowHeight: 128,
+		margin: [theme.spacing(3), theme.spacing(3)],
+		containerPadding: [0, 0],
+		draggableHandle: "[data-handle]",
+		onDrag: drag,
+		onResize: resize,
+		onDrop: drop,
+		isDroppable: gridProperties?.isDroppable || false,
+		isDraggable: gridProperties?.isDraggable || false,
+		droppingItem: droppingItemLayout,
+		style: { height: "100%" }
+	}, children) : null);
+};
+var DashboardCardGrid_default = DashboardCardGrid;
+
+//#endregion
+//#region src/dashboard/WidgetCard.jsx
+/**
+* Core component for dashboard widget cards
+*/
+const WidgetCard = (props) => {
+	const { children, headerActions, className, widgetType, id, layout, params, setParam, onDelete, loading, errors, theme, hideWidgetName, innerPadding, contentHeight, contentMaxHeight,...other } = props;
+	const classes = makeStyles((theme$1) => ({
+		root: { "&.react-resizable-hide .react-resizable-handle": { display: "none" } },
+		darkRoot: {
+			"&.react-resizable-hide .react-resizable-handle": { display: "none" },
+			background: "#424242",
+			color: "white"
+		},
+		anyRoot: { "& .MuiCardContent-root": {
+			justifyContent: "space-between",
+			overflow: "auto",
+			padding: 0
+		} },
+		handle: {
+			cursor: "move",
+			"&:hover": { backgroundColor: theme$1.palette.action.hover },
+			display: hideWidgetName && "none"
+		},
+		loadingContent: {
+			flex: 1,
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		innerWidgetContentContainer: {
+			height: widgetType === "TransformerLoadWidget" ? "auto" : contentHeight ? contentHeight : "100%",
+			maxHeight: contentMaxHeight ? contentMaxHeight : "",
+			minWidth: widgetType === "ProgressBarWidget" ? 0 : 270,
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "space-between",
+			padding: innerPadding || (widgetType === "VEERegisterRead" ? 0 : theme$1.spacing(2))
+		}
+	}))();
+	const raised = /(^|\s)react-draggable-dragging(\s|$)/.test(className ?? "");
+	let body = children;
+	if (loading && !body) body = /* @__PURE__ */ React.createElement("div", { className: classes.loadingContent }, /* @__PURE__ */ React.createElement(CircularProgress, { size: 64 }));
+	if (errors && !body) body = /* @__PURE__ */ React.createElement("div", null, "Unexpected error");
+	return /* @__PURE__ */ React.createElement(FUICard_default, {
+		...other,
+		className: clsx(className, theme === "dark" ? classes.darkRoot : classes.root, classes.anyRoot),
+		raised,
+		CardHeaderProps: {
+			className: classes.handle,
+			"data-handle": true
+		},
+		headerActions: /* @__PURE__ */ React.createElement(React.Fragment, null, headerActions, /* @__PURE__ */ React.createElement(FUICardHeaderMenu, null, /* @__PURE__ */ React.createElement(FUIMenuItem_default, {
+			onClick: onDelete,
+			fluentIcon: DeleteIcon,
+			primary: "Delete"
+		})))
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.innerWidgetContentContainer }, body));
+};
+
+//#endregion
+//#region src/dashboard/DashboardWidget.jsx
+/**
+* Widget implementation for dashboards
+*/
+let DashboardWidget = (props) => {
+	const { widgetType, id, deleteCard, children, params: paramValues, setParams,...other } = props;
+	const { getWidget, isValidWidget } = useShellStore();
+	const onDelete = useCallback(() => {
+		deleteCard(id);
+	}, [deleteCard, id]);
+	const { Widget, params: paramDefs } = useMemo(() => {
+		if (!isValidWidget || !getWidget) return {};
+		if (isValidWidget(widgetType) && getWidget) return getWidget(widgetType);
+		return {};
+	}, [
+		widgetType,
+		getWidget,
+		isValidWidget
+	]);
+	const params = useMemo(() => {
+		const params$1 = {};
+		if (paramDefs) {
+			for (const name in paramDefs) params$1[name] = paramDefs[name].defaultValue;
+			for (const param in paramValues) params$1[param] = paramValues[param];
+		}
+		return params$1;
+	}, [paramDefs, paramValues]);
+	const setParam = useCallback((name, value) => setParams(id, { [name]: value }), [id, setParams]);
+	if (!isValidWidget || !getWidget) return /* @__PURE__ */ React.createElement(WidgetCard, {
+		...other,
+		title: "Error"
+	}, "isValidWidget or getWidget functions are not defined");
+	if (!Widget) return /* @__PURE__ */ React.createElement(WidgetCard, {
+		...other,
+		title: "Error"
+	}, "Unknown widget type \"", widgetType, "\".");
+	else return /* @__PURE__ */ React.createElement(Widget, {
+		...other,
+		id,
+		params,
+		setParam,
+		onDelete
+	}, children);
+};
+var DashboardWidget_default = memo(DashboardWidget);
+
+//#endregion
+export { DashboardCardGrid_default, DashboardWidget_default, WidgetCard, getWidgetLayout };
+//# sourceMappingURL=DashboardWidget-CpxtRgWv.js.map

package/dist/DashboardWidget-CpxtRgWv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardWidget-CpxtRgWv.js","names":["layout: Omit<Layout, 'i' | 'x' | 'y'>","uuid","ResponsiveGridLayout","theme","FUICard","FUIMenuItem","params"],"sources":["../src/dashboard/getWidgetLayout.ts","../src/dashboard/DashboardCardGrid.jsx","../src/dashboard/WidgetCard.jsx","../src/dashboard/DashboardWidget.jsx"],"sourcesContent":["import { Layout } from 'react-grid-layout';\nimport { LayoutDimension } from './types';\n\nconst getW = (\n  w: LayoutDimension | undefined\n): Pick<Layout, 'w' | 'minW' | 'maxW'> => {\n  if (typeof w === 'object') {\n    return {\n      w: w.default,\n      minW: w.min,\n      maxW: w.max\n    };\n  }\n\n  if (typeof w === 'number') {\n    return { w };\n  }\n\n  return { w: 2 };\n};\n\nconst getH = (\n  h: LayoutDimension | undefined\n): Pick<Layout, 'h' | 'minH' | 'maxH'> => {\n  if (typeof h === 'object') {\n    return {\n      h: h.default,\n      minH: h.min,\n      maxH: h.max\n    };\n  }\n\n  if (typeof h === 'number') {\n    return { h };\n  }\n\n  return { h: 2 };\n};\n\n/**\n * Get a default layout for widgets of a type\n */\nexport default function getWidgetLayout(\n  getWidget: Function,\n  widgetType: string\n): Omit<Layout, 'i' | 'x' | 'y'> {\n  const { w, h } = (getWidget && getWidget(widgetType)?.layout) ?? {};\n\n  const layout: Omit<Layout, 'i' | 'x' | 'y'> = {\n    ...getW(w),\n    ...getH(h)\n  };\n\n  const wResizable = 'minW' in layout || 'maxW' in layout;\n  const hResizable = 'minH' in layout || 'maxH' in layout;\n  layout.isResizable = wResizable || hResizable;\n\n  return layout;\n}\n","import { v4 as uuid } from 'uuid';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { Responsive as ResponsiveGridLayout } from 'react-grid-layout';\nimport { makeStyles, useTheme } from '@material-ui/core';\nimport { useMeasure } from 'react-use';\nimport 'react-grid-layout/css/styles.css';\nimport 'react-resizable/css/styles.css';\nimport { useDragLayer } from 'react-dnd';\nimport getWidgetLayout from './getWidgetLayout.ts';\nimport { useShellStore } from '../stores/shellStore';\n\nconst useStyle = makeStyles(\n  (theme) => ({\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      width: '100%',\n      height: '100%',\n      marginBottom: (props) => (props?.disableMargin ? '' : theme.spacing(3))\n    }\n  }),\n  { name: 'DashboardCardGrid' }\n);\n\nconst DASHBOARD_WIDGET = Symbol('DASHBOARD_WIDGET');\n\nconst breakpoints = {\n  xs: 0,\n  xl: 1150\n};\n\nconst breakpointCols = {\n  xs: 4,\n  xl: 4\n};\n\n/**\n * Grid layout for dashboard cards\n */\nconst DashboardCardGrid = (props) => {\n  const classes = useStyle(props);\n  const { children, onCreateCard, gridProperties, ...other } = props;\n  const { getWidget } = useShellStore();\n  const rglRef = useRef();\n  const [ref, { width }] = useMeasure();\n  const theme = useTheme();\n  const { droppingWidgetType } = useDragLayer((monitor) => {\n    if (monitor.getItemType() === DASHBOARD_WIDGET) {\n      const { id: wigetType } = monitor.getItem();\n      return { droppingWidgetType: wigetType };\n    }\n\n    return { droppingWidgetType: null };\n  });\n  const droppingItemLayout = useMemo(() => {\n    if (droppingWidgetType) {\n      return { i: uuid(), ...getWidgetLayout(getWidget, droppingWidgetType) };\n    }\n  }, [getWidget, droppingWidgetType]);\n\n  const drag = useCallback((layout, oldLayoutItem, layoutItem, placeholder) => {\n    // Cards larger than 1 should snap to columns that are a multiple of 2\n    // if (layoutItem.w > 1) {\n    //   // @fixme This affects the visual placeholder, but doesn't actually fix the layout item when its dropped\n    //   placeholder.x = layoutItem.x = Math.floor(layoutItem.x / 2) * 2;\n    // }\n  }, []);\n\n  const resize = useCallback(\n    (layout, oldLayoutItem, layoutItem, placeholder) => {\n      // Widths larger than 1 should be a multiple of 2\n      // The small size of columns is just so we can have small 1x1 tiles that are 1/2 the size of normal cards\n      // if (layoutItem.w > 1) {\n      //   const w = Math.floor(layoutItem.w / 2) * 3;\n      //   layoutItem.w = w;\n      //   placeholder.w = w;\n      // }\n\n      // There is no 3 (i.e. 6) column layout so don't allow cards to be that size either\n      if (layoutItem.w >= 6 && layoutItem.w < 8) {\n        layoutItem.w = 4;\n        placeholder.w = 4;\n      }\n    },\n    []\n  );\n\n  const drop = useCallback(\n    (layout, item) => {\n      if (droppingWidgetType) {\n        const { x, y, w, h } = item;\n        const { breakpoint } = rglRef.current.state;\n        if (onCreateCard)\n          onCreateCard({\n            widgetType: droppingWidgetType,\n            id: uuid(),\n            layout: {\n              [breakpoint]: {\n                x,\n                y,\n                w,\n                h\n              }\n            },\n            params: []\n          });\n      }\n    },\n    [droppingWidgetType, onCreateCard]\n  );\n\n  return (\n    <div ref={ref} className={classes.root}>\n      {width ? (\n        <ResponsiveGridLayout\n          ref={rglRef}\n          {...other}\n          width={width}\n          breakpoints={breakpoints}\n          cols={breakpointCols}\n          rowHeight={128}\n          margin={[theme.spacing(3), theme.spacing(3)]}\n          containerPadding={[0, 0]}\n          draggableHandle='[data-handle]'\n          onDrag={drag}\n          onResize={resize}\n          onDrop={drop}\n          isDroppable={gridProperties?.isDroppable || false}\n          isDraggable={gridProperties?.isDraggable || false}\n          droppingItem={droppingItemLayout}\n          style={{\n            height: '100%'\n          }}\n        >\n          {children}\n        </ResponsiveGridLayout>\n      ) : null}\n    </div>\n  );\n};\n\nexport default DashboardCardGrid;\n","import { DeleteIcon } from '@fluentui/react-icons';\nimport { makeStyles, CircularProgress, lighten } from '@material-ui/core';\nimport clsx from 'clsx';\nimport React from 'react';\nimport FUICard, { FUICardHeaderMenu } from '../UI/surfaces/cards/FUICard';\nimport FUIMenuItem from '../UI/widgets/FluentComponents/FUIMenuItem';\n\n/**\n * Core component for dashboard widget cards\n */\nexport const WidgetCard = (props) => {\n  const {\n    children,\n    headerActions,\n    className,\n    widgetType,\n    id,\n    layout,\n    params,\n    setParam,\n    onDelete,\n    loading,\n    errors,\n    theme,\n    hideWidgetName,\n    innerPadding,\n    contentHeight,\n    contentMaxHeight,\n    ...other\n  } = props;\n\n  const useStyles = makeStyles((theme) => ({\n    root: {\n      '&.react-resizable-hide .react-resizable-handle': {\n        display: 'none'\n      }\n    },\n    darkRoot: {\n      '&.react-resizable-hide .react-resizable-handle': {\n        display: 'none'\n      },\n      background: '#424242',\n      color: 'white'\n    },\n    anyRoot: {\n      '& .MuiCardContent-root': {\n        justifyContent: 'space-between',\n        overflow: 'auto',\n        padding: 0\n      }\n    },\n    handle: {\n      cursor: 'move',\n      '&:hover': {\n        backgroundColor: theme.palette.action.hover\n      },\n      display: hideWidgetName && 'none'\n    },\n    loadingContent: {\n      flex: 1,\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center'\n    },\n    innerWidgetContentContainer: {\n      height:\n        widgetType === 'TransformerLoadWidget'\n          ? 'auto'\n          : contentHeight\n          ? contentHeight\n          : '100%',\n      maxHeight: contentMaxHeight ? contentMaxHeight : '',\n      minWidth: widgetType === 'ProgressBarWidget' ? 0 : 270,\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n      padding:\n        innerPadding ||\n        (widgetType === 'VEERegisterRead' ? 0 : theme.spacing(2))\n    }\n  }));\n  const classes = useStyles();\n  const raised = /(^|\\s)react-draggable-dragging(\\s|$)/.test(className ?? '');\n\n  let body = children;\n  if (loading && !body) {\n    body = (\n      <div className={classes.loadingContent}>\n        <CircularProgress size={64} />\n      </div>\n    );\n  }\n  if (errors && !body) {\n    body = <div>Unexpected error</div>;\n  }\n\n  return (\n    <FUICard\n      {...other}\n      className={clsx(\n        className,\n        theme === 'dark' ? classes.darkRoot : classes.root,\n        classes.anyRoot\n      )}\n      raised={raised}\n      CardHeaderProps={{\n        className: classes.handle,\n        'data-handle': true\n      }}\n      headerActions={\n        <>\n          {headerActions}\n          <FUICardHeaderMenu>\n            <FUIMenuItem\n              onClick={onDelete}\n              fluentIcon={DeleteIcon}\n              primary='Delete'\n            />\n          </FUICardHeaderMenu>\n        </>\n      }\n    >\n      <div className={classes.innerWidgetContentContainer}>{body}</div>\n    </FUICard>\n  );\n};\n","import React, { memo, useCallback, useMemo } from 'react';\nimport { WidgetCard } from './WidgetCard';\nimport { useShellStore } from '../stores/shellStore';\n\n/**\n * Widget implementation for dashboards\n */\nlet DashboardWidget = (props) => {\n  const {\n    widgetType,\n    id,\n    deleteCard,\n    children,\n    params: paramValues,\n    setParams,\n    ...other\n  } = props;\n  const { getWidget, isValidWidget } = useShellStore();\n  const onDelete = useCallback(() => {\n    deleteCard(id);\n  }, [deleteCard, id]);\n\n  const { Widget, params: paramDefs } = useMemo(() => {\n    if (!isValidWidget || !getWidget) {\n      return {};\n    }\n    if (isValidWidget(widgetType) && getWidget) {\n      return getWidget(widgetType);\n    }\n\n    return {};\n  }, [widgetType, getWidget, isValidWidget]);\n\n  const params = useMemo(() => {\n    const params = {};\n    if (paramDefs) {\n      for (const name in paramDefs) {\n        params[name] = paramDefs[name].defaultValue;\n      }\n      for (const param in paramValues) {\n        params[param] = paramValues[param];\n      }\n    }\n\n    return params;\n  }, [paramDefs, paramValues]);\n  const setParam = useCallback(\n    (name, value) => setParams(id, { [name]: value }),\n    [id, setParams]\n  );\n\n  if (!isValidWidget || !getWidget) {\n    return (\n      <WidgetCard {...other} title='Error'>\n        isValidWidget or getWidget functions are not defined\n      </WidgetCard>\n    );\n  }\n\n  if (!Widget) {\n    return (\n      <WidgetCard {...other} title='Error'>\n        Unknown widget type \"{widgetType}\".\n      </WidgetCard>\n    );\n  } else {\n    return (\n      <Widget\n        {...other}\n        id={id}\n        params={params}\n        setParam={setParam}\n        onDelete={onDelete}\n      >\n        {children}\n      </Widget>\n    );\n  }\n};\n\nexport default memo(DashboardWidget);\n"],"mappings":"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"}

package/dist/DataBrowserContainer-CESNdu3e.js

@@ -0,0 +1,396 @@
+import { useAgGridApi } from "./AgTable-0F_xrxvX.js";
+import { findTermByType } from "./CrudBrowserUtilities-Cm_FNdfE.js";
+import { useUser } from "./useUser-Cn88hlN_.js";
+import { toLowerFirstChar, toTitleCase, toUpperFirstChar } from "./StringUtilities-DyjYA5pU.js";
+import { getSanitizedName } from "./entityUtilities-D7_FeTEd.js";
+import { LookupTypeIdEnums, UdpEnums } from "./unitySystemEnums-DXk8yS3v.js";
+import { SqlFilterOperators, getSearchObject } from "./SearchUtilities-CxVn31Ak.js";
+import { SideSheet } from "./SideSheet-BhKZOd2G.js";
+import { executeQueryAdHoc, executeQueryWithParameters } from "./methodUtils-Bgi0VCWP.js";
+import { useBuildEnvironment } from "./EnvironmentRibbon-CPm8YnJ4.js";
+import { usePromotedMethodEntity } from "./usePromotedMethodEntity-YlKDqDnn.js";
+import { ActionsRenderer, AmbientGridTemplate } from "./AmbientGridTemplate-B58pNLnZ.js";
+import { useLookupsStore } from "./lookupsStore-A8pX7cDA.js";
+import { useQueryExecutors } from "./useQueryExecutors-CU1LD7zt.js";
+import { SearchServiceDatasource } from "./SearchServiceDatasource-C-eLl_u3.js";
+import { CrudTableSidePanel } from "./CrudTableSidePanel-DdQ_D8g0.js";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useHistory } from "react-router-dom";
+import { AddIcon, ConfigurationSolidIcon, LookupEntitiesIcon } from "@fluentui/react-icons";
+import { cloneDeep } from "lodash";
+import { useTranslation } from "react-i18next";
+import { format } from "date-fns";
+
+//#region src/dataBrowser/DataBrowserColumnDefs.js
+const defaultGridColumn = {
+	headerName: "",
+	field: "",
+	minWidth: 80,
+	autoHeight: false,
+	sortable: false
+};
+const DataBrowserColumnDefs = (entityAttributes, actionList, isServerSide, queryColumnsData, columnName = "Actions", crudTableActionRenderName = "actionsRenderer", panelDirection = "right") => {
+	const childEntityAttributes = entityAttributes?.reduce((defs, element) => {
+		if (element?.extendedProperties?.childEntity) defs.push(element);
+		return defs;
+	}, []);
+	let shownColumns = [];
+	let hiddenColumns = [];
+	entityAttributes?.forEach((element) => {
+		if (!element?.extendedProperties?.childEntity) {
+			let matchingColumn = null;
+			const matchingColumnIndex = queryColumnsData.findIndex((column) => column.name === element?.name);
+			if (matchingColumnIndex >= 0) matchingColumn = queryColumnsData[matchingColumnIndex];
+			const childEntity = childEntityAttributes.find((ea) => Object.keys(ea?.extendedProperties?.childEntityAssoc || {}).length && !ea?.extendedProperties?.childEntityAssoc?.UdpType && ea?.name === element?.name && ea?.extendedProperties?.childEntityAssoc.Keys.find((k) => toLowerFirstChar(k).includes(element?.name)));
+			let columnHeaderName = toTitleCase(childEntity ? childEntity?.reference : element?.name);
+			if (matchingColumn) columnHeaderName = toTitleCase(childEntity ? childEntity?.reference : matchingColumn?.alias || matchingColumn?.name);
+			let def = {
+				...defaultGridColumn,
+				headerName: columnHeaderName,
+				field: element?.name.charAt(0).toLowerCase() + element?.name.slice(1),
+				hide: !matchingColumn
+			};
+			if (element?.extendedProperties?.searchable && isServerSide) def = {
+				...def,
+				filter: "agTextColumnFilter",
+				filterParams: {
+					suppressAndOrCondition: true,
+					filterOptions: [
+						"equals",
+						"contains",
+						"notEqual",
+						"greaterThan",
+						"lessThan",
+						"greaterThanOrEqual",
+						"lessThanOrEqual"
+					]
+				},
+				enableRowGroup: true
+			};
+			if (element?.extendedProperties?.orderable || !isServerSide) def = {
+				...def,
+				sortable: true
+			};
+			if (matchingColumn) shownColumns[matchingColumnIndex] = def;
+			else hiddenColumns.push(def);
+		}
+	});
+	let columnDefs = shownColumns.concat(hiddenColumns);
+	columnDefs.push({
+		headerName: crudTableActionRenderName === "actionsRenderer" ? "Actions" : columnName,
+		filter: false,
+		pinned: panelDirection,
+		width: 150,
+		maxWidth: 180,
+		cellRenderer: crudTableActionRenderName,
+		cellRendererParams: { actionList },
+		valueGetter: (params) => params.data,
+		suppressMenu: true,
+		sortable: false,
+		cellStyle: {
+			display: "flex",
+			alignItems: "center"
+		}
+	});
+	return columnDefs;
+};
+const defaultColActionsDef = {
+	resizable: true,
+	editable: false,
+	sortable: false,
+	filter: true,
+	floatingFilter: false,
+	enableRowGroup: true
+};
+
+//#endregion
+//#region src/dataBrowser/DataBrowserContainer.jsx
+const GRID_ID = "4be3be45-1930-4ab9-b7b7-0c0fa3e30490";
+const DataBrowserContainer = (props) => {
+	const { entityData, actionList, onCreate, entityAttributes, foreignKeyData, isLoading, promotedEntity, setEntityData, apiMethod, isServerSide = false, setGridApi, filterElements, backToConfigPage, queryColumnsData, lookupsMap = {},...other } = props;
+	const [isSheetOpen, setSheetOpen] = useState(false);
+	const [sideSheetWidth, setSideSheetWidth] = useState(600);
+	const [sideSheetButtonLabel, setSideSheetButtonLabel] = useState("");
+	const [otherSideSheetProps, setOtherSideSheetProps] = useState({});
+	const [sideSheetOnSubmit, setSideSheetOnSubmit] = useState(() => () => console.warn("onSubmit not set"));
+	const [filterChipsArray, setFilterChipsArray] = useState([]);
+	const [searchFilterElements, setSearchFilterElements] = useState(filterElements);
+	const [entityUdpObjectInfo, setEntityUdpObjectInfo] = useState(null);
+	const { t } = useTranslation();
+	const history = useHistory();
+	const user = useUser();
+	const { gridApi, gridColumnApi, onGridReady } = useAgGridApi();
+	const { executeQueryAdHocAndMapLookups, getCleanData } = useQueryExecutors();
+	const lookupApiMethodId = useLookupsStore((state) => state.lookupApiMethodId);
+	const buildEnv = useBuildEnvironment();
+	const closeSheet = useCallback(() => {
+		setSheetOpen(false);
+	}, []);
+	const { data: udpObjectInfoEntity } = usePromotedMethodEntity("udpObjectInfo", true);
+	const entityName = useMemo(() => {
+		if (!promotedEntity) return "";
+		return promotedEntity.entityName || "";
+	}, [promotedEntity]);
+	const commonEntityName = useMemo(() => {
+		if (!entityName || !entityUdpObjectInfo) return "";
+		return toTitleCase(entityUdpObjectInfo?.properties?.displayName || getSanitizedName(entityName));
+	}, [entityName, entityUdpObjectInfo]);
+	const createApiMethodPageId = useMemo(() => {
+		return promotedEntity?.unityBaseCreateMethod?.pageId;
+	}, [promotedEntity]);
+	const secondaryActionButtons = useMemo(() => {
+		const actions = [];
+		if (backToConfigPage) actions.push({
+			onClick: backToConfigPage,
+			label: t("Back To Config"),
+			icon: ConfigurationSolidIcon,
+			tooltip: t("Back To Config"),
+			background: "transparent"
+		});
+		return actions;
+	}, [backToConfigPage, t]);
+	const virtualActions = useMemo(() => {
+		return [{
+			id: 3,
+			title: t("Open Virtual Table"),
+			icon: LookupEntitiesIcon,
+			loading: !!!foreignKeyData,
+			onClick: (value) => {
+				history.push({
+					pathname: `/virtual/${value.id}`,
+					search: `?entityName=${entityName}`,
+					state: {
+						value,
+						promotedEntity,
+						label: value.name
+					}
+				});
+			},
+			checkDisabled: (value) => value.typeId !== LookupTypeIdEnums.Lookup
+		}];
+	}, [
+		entityName,
+		t,
+		history,
+		promotedEntity,
+		foreignKeyData
+	]);
+	const jointActionList = useMemo(() => {
+		if (!actionList) return [];
+		if (entityName.toLowerCase() === UdpEnums.Udp_Lookup.toLowerCase()) return [...actionList, ...virtualActions];
+		return actionList;
+	}, [
+		actionList,
+		virtualActions,
+		entityName
+	]);
+	const columnDefs = useMemo(() => {
+		return DataBrowserColumnDefs(entityAttributes, jointActionList, true, queryColumnsData);
+	}, [
+		entityAttributes,
+		jointActionList,
+		queryColumnsData
+	]);
+	const groupData = useMemo(() => {
+		return columnDefs?.map((item) => {
+			return {
+				groupItem: item.field,
+				label: item.headerName,
+				value: item.field
+			};
+		});
+	}, [columnDefs]);
+	const SideOptionList = useMemo(() => /* @__PURE__ */ React.createElement(SideSheet, {
+		open: isSheetOpen,
+		onClose: closeSheet,
+		title: `Add New ${commonEntityName}`,
+		width: sideSheetWidth,
+		buttonLabel: sideSheetButtonLabel,
+		onSubmit: sideSheetOnSubmit,
+		...otherSideSheetProps
+	}, /* @__PURE__ */ React.createElement(CrudTableSidePanel, {
+		entityAttributes,
+		foreignKeyData,
+		onCreate,
+		closeSideSheet: closeSheet,
+		pageId: createApiMethodPageId,
+		setSideSheetWidth,
+		setSideSheetButtonLabel,
+		setSideSheetOnSubmit,
+		setSideSheetProps: setOtherSideSheetProps,
+		isNewEntry: true,
+		entityData,
+		entityName
+	})), [
+		isSheetOpen,
+		closeSheet,
+		entityName,
+		sideSheetWidth,
+		sideSheetButtonLabel,
+		sideSheetOnSubmit,
+		entityAttributes,
+		foreignKeyData,
+		onCreate,
+		createApiMethodPageId,
+		entityData,
+		otherSideSheetProps,
+		commonEntityName
+	]);
+	const getLookupResults = useCallback(async () => {
+		if (!lookupsMap || !lookupApiMethodId) return null;
+		const lookupId = Object.values(lookupsMap).find((item) => item.filterOn)?.value || "";
+		if (lookupId) return await executeQueryWithParameters({ data: { id: lookupId } }, lookupApiMethodId);
+		return null;
+	}, [lookupsMap, lookupApiMethodId]);
+	const formattedData = useMemo(() => {
+		if (entityData) {
+			let formattedEntityData = cloneDeep(entityData);
+			const datetimeFields = entityAttributes?.reduce((defs, element) => {
+				if (!element?.extendedProperties?.childEntity && findTermByType(element?.type, "datetime")) defs.push(element?.name.charAt(0).toLowerCase() + element?.name.slice(1));
+				return defs;
+			}, []);
+			if (datetimeFields?.length) formattedEntityData.forEach((e) => {
+				Object.keys(e).forEach((key) => {
+					if (datetimeFields.find((field) => field === key)) {
+						if (e[key] === null) return;
+						e[key] = format(new Date(e[key]), "yyyy/MM/dd kk:mm:ss");
+					}
+				});
+			});
+			return formattedEntityData;
+		}
+		return [];
+	}, [entityAttributes, entityData]);
+	const handleChipToggle = useCallback((chip) => {
+		if (isServerSide && chip && chip.filterValue && chip.keyName) {
+			const updatedSearchFilterElements = [...searchFilterElements];
+			const chipFilterElement = {
+				searchValue: chip.filterValue,
+				searchField: toUpperFirstChar(chip.keyName),
+				searchOperator: SqlFilterOperators.EQUALS
+			};
+			updatedSearchFilterElements.push(chipFilterElement);
+			setSearchFilterElements(updatedSearchFilterElements);
+		}
+	}, [isServerSide, searchFilterElements]);
+	const handleChipUntoggle = useCallback(() => {
+		setSearchFilterElements(filterElements);
+	}, [filterElements]);
+	const setFilterChips = useCallback(async () => {
+		let filterChipsArray$1 = [];
+		const lookupResults = (await getLookupResults())?.data;
+		if (!lookupResults) {
+			setFilterChipsArray([]);
+			return;
+		}
+		let keyName = lookupResults.keyName;
+		const valueName = lookupResults.valueName;
+		const lookupToFilterOn = Object.values(lookupsMap).find((item) => item.filterOn);
+		let chipKey = keyName;
+		const lookupMapKeys = Object.keys(lookupsMap);
+		for (let i = 0; i < lookupMapKeys.length; i++) {
+			const key = lookupMapKeys[i];
+			if (lookupsMap[key].value === lookupToFilterOn?.value) {
+				chipKey = key;
+				break;
+			}
+		}
+		for (let i = 0; i < lookupResults?.data.length; i++) {
+			const lookupResult = lookupResults.data[i];
+			const label = lookupResult[valueName];
+			const numRows = formattedData?.filter((obj) => obj[keyName] === label)?.length;
+			let chipData = {
+				label: `${label}`,
+				value: !isServerSide ? numRows || "" : "",
+				filterValue: lookupResult[keyName],
+				id: i,
+				keyName: chipKey
+			};
+			chipData.onToggle = () => handleChipToggle(chipData);
+			chipData.onUntoggle = () => handleChipUntoggle();
+			if (!isServerSide && numRows > 0) filterChipsArray$1.push(chipData);
+			if (isServerSide) filterChipsArray$1.push(chipData);
+		}
+		setFilterChipsArray(filterChipsArray$1);
+	}, [
+		getLookupResults,
+		handleChipToggle,
+		handleChipUntoggle,
+		isServerSide,
+		formattedData,
+		lookupsMap
+	]);
+	useEffect(() => {
+		setFilterChips();
+	}, [setFilterChips]);
+	useEffect(() => {
+		setSearchFilterElements(filterElements || []);
+	}, [filterElements]);
+	useEffect(() => {
+		if (!gridApi) return;
+		if (setGridApi) setGridApi(gridApi);
+		if (promotedEntity && isServerSide && lookupsMap) {
+			let datasource = SearchServiceDatasource(null, promotedEntity?.unityBaseSearchMethod?.apiMethodId, searchFilterElements, 1, executeQueryAdHocAndMapLookups, setEntityData, lookupsMap, false, getCleanData);
+			gridApi?.setServerSideDatasource(datasource);
+		}
+	}, [
+		gridApi,
+		promotedEntity,
+		setEntityData,
+		setGridApi,
+		isServerSide,
+		searchFilterElements,
+		executeQueryAdHocAndMapLookups,
+		lookupsMap,
+		getCleanData
+	]);
+	useEffect(() => {
+		const executeSearchForEntityUdpObjectInfo = async (apiMethodId, sanitizedEntityName) => {
+			const response = await executeQueryAdHoc({ data: getSearchObject([{
+				searchField: "SanitizedName",
+				searchOperator: "=",
+				searchValue: sanitizedEntityName
+			}], 1, 50, false) }, apiMethodId);
+			if (response.status === 200) {
+				const data = response?.data?.pageList[0];
+				setEntityUdpObjectInfo(data);
+			}
+		};
+		if (udpObjectInfoEntity?.unityBaseSearchMethod && entityName) executeSearchForEntityUdpObjectInfo(udpObjectInfoEntity?.unityBaseSearchMethod?.apiMethodId, getSanitizedName(entityName));
+	}, [udpObjectInfoEntity, entityName]);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AmbientGridTemplate, {
+		gridId: GRID_ID,
+		user,
+		useNewHeader: true,
+		api: gridApi,
+		onGridReady,
+		columnApi: gridColumnApi,
+		apiMethod,
+		title: commonEntityName,
+		data: !isServerSide && formattedData,
+		columnDefs,
+		groupingData: groupData,
+		onPrimaryActionClick: () => setSheetOpen && setSheetOpen(true),
+		primaryActionLabel: t("Add"),
+		primaryActionIcon: AddIcon,
+		frameworkComponents: { actionsRenderer: ActionsRenderer },
+		height: `calc(100vh - ${buildEnv ? "139px" : "114px"})`,
+		hideSearchBar: isServerSide,
+		loading: isLoading,
+		suppressScrollOnNewData: true,
+		dynamicSizing: false,
+		disableRowSelection: true,
+		rowModelType: isServerSide ? "serverSide" : null,
+		serverSideStoreType: isServerSide ? "partial" : null,
+		cacheOverflowSize: isServerSide ? 2 : null,
+		cacheBlockSize: isServerSide ? 20 : null,
+		maxConcurrentDatasourceRequests: isServerSide ? 1 : null,
+		secondaryActionButtons,
+		filterChips: [...filterChipsArray],
+		...other
+	}), SideOptionList);
+};
+
+//#endregion
+export { DataBrowserColumnDefs, DataBrowserContainer, defaultColActionsDef };
+//# sourceMappingURL=DataBrowserContainer-CESNdu3e.js.map