@mailstep/design-system 0.8.52 → 0.9.0

package/ui/Modules/Dashboard/components/Config/components/InputConfig.js

@@ -0,0 +1,104 @@
+import Button_default from "../../../../../Elements/Button/index.js";
+import styles_default from "../../../styles.js";
+import { useText } from "../../Text/Text.js";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import omit from "lodash/omit";
+//#region packages/ui/Modules/Dashboard/components/Config/components/InputConfig.tsx
+const getSelectValue = (currentValue, targetValue, isMulti, isChecked = false) => {
+	if (isMulti) {
+		const asserted = currentValue ?? [];
+		if (isChecked) return asserted.concat(targetValue);
+		return asserted.filter((val) => val !== targetValue);
+	}
+	return targetValue;
+};
+const createConfigField = (fieldName, value, label) => ({
+	[fieldName]: value,
+	...label && { [`${fieldName}Label`]: label }
+});
+const InputConfig = ({ onChange, config, label, name, input, isMulti = false, options = [], placeholder }) => {
+	const none = useText("widgets.none");
+	const clear = useText("widgets.clear");
+	const selectAll = useText("widgets.selectAll");
+	const value = config?.[name];
+	const handleChange = useCallback((e) => {
+		const selectOption = options.find((option) => option.value === e.target.value);
+		const selectValue = getSelectValue(value, selectOption?.value || "", isMulti, e.target.checked);
+		const configField = createConfigField(name, input ? e.target.value : selectValue, input ? void 0 : selectOption?.label);
+		onChange({
+			...config,
+			...configField
+		});
+	}, [
+		name,
+		options,
+		onChange,
+		value,
+		isMulti,
+		config,
+		input
+	]);
+	const handleSelectAll = useCallback(() => {
+		const configFields = createConfigField(name, options.map((opt) => opt.value));
+		onChange({
+			...config,
+			...configFields
+		});
+	}, [
+		name,
+		options,
+		config,
+		onChange
+	]);
+	const handleRemoveAll = useCallback(() => {
+		onChange({ ...omit(config, name) });
+	}, [
+		name,
+		config,
+		onChange
+	]);
+	return /* @__PURE__ */ jsxs(styles_default.ConfigRow, {
+		isBlock: isMulti,
+		children: [/* @__PURE__ */ jsxs(styles_default.ConfigLabel, { children: [label, ": "] }), /* @__PURE__ */ jsx(styles_default.ConfigInput, { children: input ? /* @__PURE__ */ jsx(styles_default.Input, {
+			type: input,
+			defaultValue: value || "",
+			onChange: handleChange
+		}) : isMulti ? /* @__PURE__ */ jsxs(styles_default.CheckboxContent, { children: [/* @__PURE__ */ jsxs(styles_default.CheckboxControls, { children: [
+			/* @__PURE__ */ jsx(Button_default, {
+				onClick: handleSelectAll,
+				children: selectAll
+			}),
+			" ",
+			/* @__PURE__ */ jsx(Button_default, {
+				appearance: "secondary",
+				onClick: handleRemoveAll,
+				children: clear
+			})
+		] }), options.map((option) => {
+			const isChecked = (value || []).includes(option.value);
+			return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("input", {
+				id: option.value,
+				type: "checkbox",
+				value: option.value,
+				onChange: handleChange,
+				checked: isChecked
+			}), /* @__PURE__ */ jsx("label", {
+				htmlFor: option.value,
+				children: option.label
+			})] }, option.value);
+		})] }) : /* @__PURE__ */ jsxs(styles_default.Select, {
+			onChange: handleChange,
+			value: value || "",
+			children: [/* @__PURE__ */ jsx("option", {
+				value: "",
+				children: placeholder || none
+			}), options.map((option) => /* @__PURE__ */ jsx("option", {
+				value: option.value,
+				children: option.label
+			}, option.value))]
+		}) })]
+	});
+};
+//#endregion
+export { InputConfig as default };

package/ui/Modules/Dashboard/components/Config/types.d.ts

@@ -0,0 +1 @@
+export type { MultiConfigProps } from './MultiConfig';

package/ui/Modules/Dashboard/components/Config/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Modules/Dashboard/components/Dashboard/Dashboard.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+import type { DashboardProps } from '../../types';
+import './dashboard.css';
+type Props = {
+    title?: DashboardProps['title'];
+    widgetDefinitions: DashboardProps['widgetDefinitions'];
+};
+declare const DashboardComponent: ({ title, widgetDefinitions }: Props) => JSX.Element;
+export default DashboardComponent;

package/ui/Modules/Dashboard/components/Dashboard/Dashboard.js

@@ -0,0 +1,16 @@
+import styles_default from "../../styles.js";
+import Header_default from "../Header/index.js";
+import Layout_default from "../Layout/index.js";
+import DashboardBody from "./components/Body.js";
+import LayoutErrorBoundary from "./components/LayoutErrorBoundary.js";
+/* empty css           */
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Dashboard/Dashboard.tsx
+const emptyWidgetDefinitions = [];
+const DashboardComponent = ({ title, widgetDefinitions = emptyWidgetDefinitions }) => /* @__PURE__ */ jsxs(styles_default.Wrapper, { children: [/* @__PURE__ */ jsx(Header_default, {
+	title,
+	widgetDefinitions
+}), /* @__PURE__ */ jsx(DashboardBody, { children: /* @__PURE__ */ jsx(LayoutErrorBoundary, { children: /* @__PURE__ */ jsx(Layout_default, { widgetDefinitions }) }) })] });
+//#endregion
+export { DashboardComponent as default };

package/ui/Modules/Dashboard/components/Dashboard/DashboardContainer.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'react';
+import type { DashboardProps } from '../../types';
+declare const DashboardContainer: ({ initialWidgets, onChange, lang, components, ...rest }: DashboardProps) => JSX.Element;
+export default DashboardContainer;

package/ui/Modules/Dashboard/components/Dashboard/DashboardContainer.js

@@ -0,0 +1,31 @@
+import { actions } from "../../store/reducers/widgetListReducer.js";
+import LangContext from "../../context/LangContext.js";
+import ComponentContext, { defaultComponents } from "../../context/ComponentContext.js";
+import DashboardComponent from "./Dashboard.js";
+import HandleChange from "./components/HandleChange.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useDispatch } from "react-redux";
+//#region packages/ui/Modules/Dashboard/components/Dashboard/DashboardContainer.tsx
+const DashboardContainer = ({ initialWidgets, onChange, lang = "en", components, ...rest }) => {
+	const dispatch = useDispatch();
+	/**
+	* on mount move data from props to store
+	*/
+	React.useEffect(() => {
+		if (initialWidgets) dispatch(actions.initWidgets(initialWidgets));
+	}, [dispatch, JSON.stringify(initialWidgets)]);
+	const mergedComponents = React.useMemo(() => ({
+		...defaultComponents,
+		...components || {}
+	}), [components]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LangContext.Provider, {
+		value: lang,
+		children: /* @__PURE__ */ jsx(ComponentContext.Provider, {
+			value: mergedComponents,
+			children: /* @__PURE__ */ jsx(DashboardComponent, { ...rest })
+		})
+	}), /* @__PURE__ */ jsx(HandleChange, { onChange })] });
+};
+//#endregion
+export { DashboardContainer as default };

package/ui/Modules/Dashboard/components/Dashboard/components/Body.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { JSX } from 'react';
+interface DashboardBodyProps {
+    children: React.ReactElement;
+}
+declare const DashboardBody: ({ children }: DashboardBodyProps) => JSX.Element;
+export default DashboardBody;

package/ui/Modules/Dashboard/components/Dashboard/components/Body.js

@@ -0,0 +1,7 @@
+import styles_default from "../../../styles.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Dashboard/components/Body.tsx
+const DashboardBody = ({ children }) => /* @__PURE__ */ jsx(styles_default.Body, { children });
+//#endregion
+export { DashboardBody as default };

package/ui/Modules/Dashboard/components/Dashboard/components/HandleChange.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import type { DashboardProps } from '../../../types';
+declare const HandleChange: ({ onChange }: {
+    onChange: DashboardProps["onChange"];
+}) => JSX.Element;
+export default HandleChange;

package/ui/Modules/Dashboard/components/Dashboard/components/HandleChange.js

@@ -0,0 +1,25 @@
+import { selectors } from "../../../store/reducers/widgetListReducer.js";
+import React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useSelector } from "react-redux";
+//#region packages/ui/Modules/Dashboard/components/Dashboard/components/HandleChange.tsx
+const useEffectChange = (onChange, widgets, deps) => {
+	const [wasFirstRender, setWasFirstRender] = React.useState(false);
+	React.useEffect(() => {
+		if (!onChange) return;
+		if (!wasFirstRender && widgets !== null) {
+			setWasFirstRender(true);
+			return;
+		}
+		onChange();
+	}, deps);
+};
+const HandleChange = ({ onChange }) => {
+	const widgets = useSelector(selectors.getWidgets);
+	useEffectChange(() => {
+		if (onChange && widgets !== null) onChange(widgets);
+	}, widgets, [onChange, JSON.stringify(widgets)]);
+	return /* @__PURE__ */ jsx(Fragment, {});
+};
+//#endregion
+export { HandleChange as default };

package/ui/Modules/Dashboard/components/Dashboard/components/LayoutErrorBoundary.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface LayoutErrorBoundaryProps {
+    children: React.ReactNode;
+}
+type LayoutErrorBoundaryState = {
+    error: Error | null;
+};
+declare class LayoutErrorBoundary extends React.Component<LayoutErrorBoundaryProps, LayoutErrorBoundaryState> {
+    constructor(props: LayoutErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): LayoutErrorBoundaryState;
+    render(): React.ReactNode;
+}
+export default LayoutErrorBoundary;

package/ui/Modules/Dashboard/components/Dashboard/components/LayoutErrorBoundary.js

@@ -0,0 +1,19 @@
+import styles_default from "../../../styles.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Dashboard/components/LayoutErrorBoundary.tsx
+var LayoutErrorBoundary = class extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = { error: null };
+	}
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	render() {
+		if (this.state.error) return /* @__PURE__ */ jsxs(styles_default.LayoutError, { children: [/* @__PURE__ */ jsx(styles_default.LayoutErrorTitle, { children: "Something went wrong." }), /* @__PURE__ */ jsx(styles_default.LayoutErrorMessage, { children: this.state.error?.message })] });
+		return this.props.children;
+	}
+};
+//#endregion
+export { LayoutErrorBoundary as default };

package/ui/Modules/Dashboard/components/Dashboard/dashboard2.css

@@ -0,0 +1,124 @@
+.react-grid-layout {
+  transition: height .2s;
+  position: relative;
+}
+
+.react-grid-item {
+  transition: left .2s, top .2s;
+}
+
+.react-grid-item img {
+  pointer-events: none;
+  user-select: none;
+}
+
+.react-grid-item.cssTransforms {
+  transition-property: transform;
+}
+
+.react-grid-item.resizing {
+  z-index: 1;
+  will-change: width, height;
+}
+
+.react-grid-item.react-draggable-dragging {
+  z-index: 3;
+  will-change: transform;
+  transition: none;
+}
+
+.react-grid-item.dropping {
+  visibility: hidden;
+}
+
+.react-grid-item.react-grid-placeholder {
+  opacity: .2;
+  z-index: 2;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -o-user-select: none;
+  background: red;
+  transition-duration: .1s;
+}
+
+.react-grid-item > .react-resizable-handle {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+}
+
+.react-grid-item > .react-resizable-handle:after {
+  content: "";
+  border-bottom: 2px solid #0006;
+  border-right: 2px solid #0006;
+  width: 5px;
+  height: 5px;
+  position: absolute;
+  bottom: 3px;
+  right: 3px;
+}
+
+.react-resizable-hide > .react-resizable-handle {
+  display: none;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
+  cursor: sw-resize;
+  bottom: 0;
+  left: 0;
+  transform: rotate(90deg);
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+  cursor: se-resize;
+  bottom: 0;
+  right: 0;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
+  cursor: nw-resize;
+  top: 0;
+  left: 0;
+  transform: rotate(180deg);
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
+  cursor: ne-resize;
+  top: 0;
+  right: 0;
+  transform: rotate(270deg);
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w, .react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+  cursor: ew-resize;
+  margin-top: -10px;
+  top: 50%;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
+  left: 0;
+  transform: rotate(135deg);
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
+  right: 0;
+  transform: rotate(315deg);
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n, .react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+  cursor: ns-resize;
+  margin-left: -10px;
+  left: 50%;
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
+  top: 0;
+  transform: rotate(225deg);
+}
+
+.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
+  bottom: 0;
+  transform: rotate(45deg);
+}

package/ui/Modules/Dashboard/components/Dashboard/index.d.ts

@@ -0,0 +1,2 @@
+import DashboardContainer from './DashboardContainer';
+export default DashboardContainer;

package/ui/Modules/Dashboard/components/Dashboard/index.js

@@ -0,0 +1,5 @@
+import DashboardContainer from "./DashboardContainer.js";
+//#region packages/ui/Modules/Dashboard/components/Dashboard/index.ts
+var Dashboard_default = DashboardContainer;
+//#endregion
+export { Dashboard_default as default };

package/ui/Modules/Dashboard/components/Header/Header.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import type { WidgetDefinition } from '../../types';
+interface HeaderProps {
+    title?: string | boolean;
+    widgetDefinitions: WidgetDefinition[];
+}
+declare const Header: ({ title, widgetDefinitions }: HeaderProps) => JSX.Element | null;
+export default Header;

package/ui/Modules/Dashboard/components/Header/Header.js

@@ -0,0 +1,9 @@
+import styles_default from "../../styles.js";
+import Text from "../Text/Text.js";
+import Picker_default from "../Picker/index.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Header/Header.tsx
+const Header = ({ title = "", widgetDefinitions }) => /* @__PURE__ */ jsxs(styles_default.Header, { children: [/* @__PURE__ */ jsx("h1", { children: title || title === false || /* @__PURE__ */ jsx(Text, { code: "dashboard.title" }) }), /* @__PURE__ */ jsx(Picker_default, { widgetDefinitions })] });
+//#endregion
+export { Header as default };

package/ui/Modules/Dashboard/components/Header/index.d.ts

@@ -0,0 +1,2 @@
+import Header from './Header';
+export default Header;

package/ui/Modules/Dashboard/components/Header/index.js

@@ -0,0 +1,5 @@
+import Header from "./Header.js";
+//#region packages/ui/Modules/Dashboard/components/Header/index.ts
+var Header_default = Header;
+//#endregion
+export { Header_default as default };

package/ui/Modules/Dashboard/components/Layout/Layout.d.ts

@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+import { Layout } from 'react-grid-layout';
+import type { LayoutWidgetItem, WidgetDefinition } from '../../types';
+export declare const rowHeight = 100;
+export declare const margin: [number, number];
+interface DashboardLayoutProps {
+    widgetDefinitions: WidgetDefinition[];
+    widgetList: LayoutWidgetItem[] | null;
+    onLayoutChange: (layout: Layout[]) => void;
+    openedConfigs: string[];
+    toggleOpenedConfig: (widgetId: string) => void;
+    onSetHeight: (id: string, height: number) => void;
+}
+/**
+ * Map of items
+ */
+declare const DashboardLayout: ({ widgetList, widgetDefinitions, onLayoutChange, toggleOpenedConfig, openedConfigs, onSetHeight }: DashboardLayoutProps) => JSX.Element;
+export default DashboardLayout;

package/ui/Modules/Dashboard/components/Layout/Layout.js

@@ -0,0 +1,39 @@
+import styles_default from "../../styles.js";
+import Text from "../Text/Text.js";
+import Item_default from "./components/Item/index.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import GridLayout, { WidthProvider } from "react-grid-layout";
+//#region packages/ui/Modules/Dashboard/components/Layout/Layout.tsx
+const rowHeight = 100;
+const margin = [20, 20];
+const GridLayoutWithWidth = WidthProvider(GridLayout);
+/**
+* Map of items
+*/
+const DashboardLayout = ({ widgetList, widgetDefinitions, onLayoutChange, toggleOpenedConfig, openedConfigs, onSetHeight }) => {
+	if (!widgetList?.length) return /* @__PURE__ */ jsx(styles_default.Nowidget, { children: /* @__PURE__ */ jsx(Text, { code: "layout.nowidget" }) });
+	return /* @__PURE__ */ jsx(GridLayoutWithWidth, {
+		className: "layout",
+		rowHeight: 100,
+		margin,
+		onLayoutChange,
+		layout: widgetList.map((widgetItem) => widgetItem.layout),
+		draggableHandle: ".drag-handle",
+		children: widgetList.map((widgetItem) => {
+			const isConfigOpen = openedConfigs.includes(widgetItem.id) || widgetItem.config === null;
+			return /* @__PURE__ */ jsx(styles_default.LayoutItem, {
+				isConfigOpen,
+				children: /* @__PURE__ */ jsx(Item_default, {
+					widgetItem,
+					widgetDefinitions,
+					toggleOpenedConfig,
+					isConfigOpen,
+					onSetHeight
+				})
+			}, widgetItem.id);
+		})
+	});
+};
+//#endregion
+export { DashboardLayout as default, margin, rowHeight };

package/ui/Modules/Dashboard/components/Layout/LayoutContainer.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import type { WidgetDefinition } from '../../types';
+type DashboardLayoutContainerProps = {
+    widgetDefinitions: WidgetDefinition[];
+};
+declare const LayoutContainer: ({ widgetDefinitions }: DashboardLayoutContainerProps) => JSX.Element;
+export default LayoutContainer;

package/ui/Modules/Dashboard/components/Layout/LayoutContainer.js

@@ -0,0 +1,40 @@
+import { actions, selectors } from "../../store/reducers/widgetListReducer.js";
+import DashboardLayout, { margin } from "./Layout.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useDispatch, useSelector } from "react-redux";
+//#region packages/ui/Modules/Dashboard/components/Layout/LayoutContainer.tsx
+const LayoutContainer = ({ widgetDefinitions }) => {
+	const dispatch = useDispatch();
+	const widgetList = useSelector(selectors.getWidgets);
+	const handleLayoutChange = React.useCallback((layouts) => {
+		dispatch(actions.setWidgetsLayout(layouts));
+	}, [dispatch]);
+	const [openedConfigs, setOpenedConfigs] = React.useState([]);
+	const handleSetHeight = React.useCallback((widgetId, height) => {
+		const widgetItem = widgetList?.find((widgetItem) => widgetItem.layout.i === widgetId);
+		if (!height || !widgetList || !widgetItem) return;
+		const { layout } = widgetItem;
+		const optimalH = Math.ceil((height + margin[1]) / (100 + margin[1]));
+		const newH = Math.min(Math.max(layout.minH || 0, optimalH), layout.maxH || 100);
+		if (layout.h !== newH) dispatch(actions.setWidgetsLayout(widgetList.map((widgetItem) => ({
+			...widgetItem.layout,
+			...widgetItem.layout.i === widgetId ? {
+				...layout,
+				h: newH
+			} : {}
+		}))));
+	}, [widgetList, dispatch]);
+	return /* @__PURE__ */ jsx(DashboardLayout, {
+		widgetDefinitions,
+		widgetList,
+		onLayoutChange: handleLayoutChange,
+		toggleOpenedConfig: React.useCallback((widgetId) => {
+			setOpenedConfigs((state) => state.includes(widgetId) ? state.filter((id) => id !== widgetId) : [...state, widgetId]);
+		}, [setOpenedConfigs]),
+		openedConfigs,
+		onSetHeight: handleSetHeight
+	});
+};
+//#endregion
+export { LayoutContainer as default };

package/ui/Modules/Dashboard/components/Layout/components/Item/Item.d.ts

@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+import { WidgetDefinition, WidgetConfig } from '../../../../types';
+type DashboardItemProps = {
+    id: string;
+    widget: WidgetDefinition;
+    newConfig: WidgetConfig;
+    config: WidgetConfig;
+    onRemove: () => void;
+    onSave: () => void;
+    onCancel: () => void;
+    onSetConfig: (config: WidgetConfig) => void;
+    onSetHeight: (id: string, height: number) => void;
+    onSaveConfigProps: (props: Record<string, any>) => void;
+    isConfigOpen: boolean;
+    toggleConfigOpen: () => void;
+};
+declare const DashboardItem: ({ id, widget, newConfig, config, onRemove, onSetConfig, onSetHeight, onSave, onCancel, isConfigOpen, toggleConfigOpen, onSaveConfigProps, }: DashboardItemProps) => JSX.Element;
+export default DashboardItem;

package/ui/Modules/Dashboard/components/Layout/components/Item/Item.js

@@ -0,0 +1,79 @@
+import styles_default from "../../../../styles.js";
+import ComponentContext from "../../../../context/ComponentContext.js";
+import ItemConfig_default from "../ItemConfig/index.js";
+import usePrevious from "../../../../hooks/usePrevious.js";
+import { useRefWithCallback } from "../../../../hooks/useRefWithCallback.js";
+import "../../Layout.js";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/Item/Item.tsx
+const WidgetsWithFullHeight = ["table", "chart"];
+const DashboardItem = ({ id, widget, newConfig, config, onRemove, onSetConfig, onSetHeight, onSave, onCancel, isConfigOpen, toggleConfigOpen, onSaveConfigProps }) => {
+	const { ItemHeader } = React.useContext(ComponentContext);
+	const Widget = widget.component;
+	const configInDropdown = widget.isWidgetConfigInDropdown || false;
+	const widgetRef = useRef(null);
+	const headerRef = useRef(null);
+	const headerHeight = (headerRef.current?.clientHeight || 0) + 40;
+	const wasConfigOpen = usePrevious(isConfigOpen);
+	const [isChanged, refCallback, ref] = useRefWithCallback();
+	const canChangeHeight = !WidgetsWithFullHeight.includes(widget?.code);
+	const [widgetWithPaginationHeight, setWidgetWithPaginationHeight] = useState(null);
+	const returnWidgetWithPaginationHeight = useCallback((height) => {
+		height && setWidgetWithPaginationHeight(height);
+	}, []);
+	useEffect(() => {
+		if (!configInDropdown && wasConfigOpen === false && isConfigOpen) onSetHeight(id, widget.initHeight * 100);
+	}, [isConfigOpen]);
+	useEffect(() => {
+		if (!configInDropdown && !isConfigOpen && canChangeHeight && wasConfigOpen === true) onSetHeight(id, (ref.current?.clientHeight || 0) + headerHeight);
+	}, [isConfigOpen, isChanged]);
+	useEffect(() => {
+		if (!canChangeHeight && !isConfigOpen && wasConfigOpen === true) widgetWithPaginationHeight && onSetHeight(id, widgetWithPaginationHeight + headerHeight);
+	}, [isConfigOpen, widgetWithPaginationHeight]);
+	const ItemConfigJSX = /* @__PURE__ */ jsx(ItemConfig_default, {
+		config: newConfig,
+		onCancel,
+		onRemove,
+		onSetConfig,
+		onSave,
+		component: widget.configComponent
+	});
+	return /* @__PURE__ */ jsxs(styles_default.ItemWrapper, { children: [
+		/* @__PURE__ */ jsx(ItemHeader, {
+			dragHandleClassName: "drag-handle",
+			widget,
+			config,
+			onSave,
+			headerRef,
+			onRemove,
+			isConfigOpen,
+			toggleConfigOpen
+		}),
+		/* @__PURE__ */ jsx(styles_default.ItemBodyWrapper, {
+			isConfigOpen,
+			children: /* @__PURE__ */ jsxs(styles_default.ItemBody, {
+				isConfigOpen,
+				inDropdown: configInDropdown,
+				isFullHeight: !canChangeHeight,
+				children: [!configInDropdown && /* @__PURE__ */ jsx(styles_default.WidgetConfig, {
+					isConfigOpen,
+					inDropdown: configInDropdown,
+					children: ItemConfigJSX
+				}), /* @__PURE__ */ jsx(styles_default.WidgetVisibility, {
+					isVisible: !isConfigOpen,
+					children: /* @__PURE__ */ jsx(Widget, {
+						config,
+						innerRef: canChangeHeight ? refCallback : widgetRef,
+						onSaveConfigProps,
+						components: widget.components,
+						returnWidgetWithPaginationHeight
+					})
+				})]
+			})
+		}),
+		configInDropdown && isConfigOpen && /* @__PURE__ */ jsx(styles_default.WidgetConfigInDropdown, { children: ItemConfigJSX })
+	] });
+};
+//#endregion
+export { DashboardItem as default };

package/ui/Modules/Dashboard/components/Layout/components/Item/ItemContainer.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from 'react';
+import type { WidgetDefinition, LayoutWidgetItem } from '../../../../types';
+type ItemContainerProps = {
+    widgetDefinitions: WidgetDefinition[];
+    widgetItem: LayoutWidgetItem;
+    toggleOpenedConfig: (id: string) => void;
+    isConfigOpen: boolean;
+    onSetHeight: (id: string, height: number) => void;
+};
+declare const ItemContainer: ({ widgetItem, widgetDefinitions, toggleOpenedConfig, isConfigOpen, onSetHeight }: ItemContainerProps) => JSX.Element;
+export default ItemContainer;