@mailstep/design-system 0.8.52 → 0.9.1

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;

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

@@ -0,0 +1,64 @@
+import { actions } from "../../../../store/reducers/widgetListReducer.js";
+import { NoWidget } from "../../../Widgets/index.js";
+import WidgetErrorBoundary from "./WidgetErrorBoundary.js";
+import DashboardItem from "./Item.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import throttle from "lodash/throttle";
+import { useDispatch } from "react-redux";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/Item/ItemContainer.tsx
+const SET_CONFIG_DELAY = 200;
+const ItemContainer = ({ widgetItem, widgetDefinitions, toggleOpenedConfig, isConfigOpen, onSetHeight }) => {
+	const dispatch = useDispatch();
+	const [newConfig, setConfig] = useState(widgetItem.config);
+	const widget = widgetDefinitions.find((w) => w.code === widgetItem.code);
+	const toggleConfigOpen = useCallback(() => {
+		toggleOpenedConfig(widgetItem.id);
+	}, [toggleOpenedConfig, widgetItem.id]);
+	const handleSave = useCallback((config) => dispatch(actions.setWidgetsConfig(widgetItem.id, config)), [dispatch, widgetItem.id]);
+	const handleRemove = useCallback(() => dispatch(actions.removeWidget(widgetItem.id)), [widgetItem.id, dispatch]);
+	const setConfigThrottleted = useMemo(() => throttle(setConfig, SET_CONFIG_DELAY), [setConfig]);
+	const saveConfigThrottleted = useMemo(() => throttle(handleSave, SET_CONFIG_DELAY), [handleSave]);
+	const onSave = useCallback(() => {
+		if (widgetItem.config) toggleConfigOpen();
+		handleSave(newConfig);
+	}, [
+		handleSave,
+		toggleConfigOpen,
+		newConfig,
+		widgetItem.config
+	]);
+	const onCancel = useCallback(() => {
+		toggleConfigOpen();
+		setConfig(widgetItem.config);
+	}, [
+		widgetItem.config,
+		setConfig,
+		toggleConfigOpen
+	]);
+	const handeSaveConfigProps = useCallback((props) => {
+		saveConfigThrottleted({
+			...newConfig,
+			...props
+		});
+	}, [saveConfigThrottleted, newConfig]);
+	return /* @__PURE__ */ jsx(WidgetErrorBoundary, {
+		onRemove: handleRemove,
+		children: /* @__PURE__ */ jsx(DashboardItem, {
+			id: widgetItem.layout.i,
+			widget: widget || NoWidget,
+			config: widgetItem.config,
+			newConfig,
+			onRemove: handleRemove,
+			isConfigOpen,
+			toggleConfigOpen: !isConfigOpen ? toggleConfigOpen : onCancel,
+			onSetConfig: setConfigThrottleted,
+			onSaveConfigProps: handeSaveConfigProps,
+			onSave,
+			onCancel,
+			onSetHeight
+		})
+	});
+};
+//#endregion
+export { ItemContainer as default };

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

@@ -0,0 +1,14 @@
+import React from 'react';
+type WidgetErrorBoundaryProps = {
+    children: React.ReactNode;
+    onRemove: () => void;
+};
+type WidgetErrorBoundaryState = {
+    error: Error | null;
+};
+declare class WidgetErrorBoundary extends React.Component<WidgetErrorBoundaryProps, WidgetErrorBoundaryState> {
+    constructor(props: WidgetErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): WidgetErrorBoundaryState;
+    render(): React.ReactNode;
+}
+export default WidgetErrorBoundary;

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

@@ -0,0 +1,28 @@
+import styles_default from "../../../../styles.js";
+import Text from "../../../Text/Text.js";
+import ComponentContext from "../../../../context/ComponentContext.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/Item/WidgetErrorBoundary.tsx
+var WidgetErrorBoundary = 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.WidgetError, { children: [
+			/* @__PURE__ */ jsx(styles_default.WidgetErrorTitle, { children: "ERROR: Something went wrong." }),
+			/* @__PURE__ */ jsx(styles_default.WidgetErrorMessage, { children: this.state.error?.message }),
+			/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ComponentContext.Consumer, { children: ({ Button }) => /* @__PURE__ */ jsx(Button, {
+				onClick: this.props.onRemove,
+				children: /* @__PURE__ */ jsx(Text, { code: "buttons.removeWidget" })
+			}) }) })
+		] });
+		return this.props.children;
+	}
+};
+//#endregion
+export { WidgetErrorBoundary as default };

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

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

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

@@ -0,0 +1,5 @@
+import ItemContainer from "./ItemContainer.js";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/Item/index.tsx
+var Item_default = ItemContainer;
+//#endregion
+export { Item_default as default };

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { JSX } from 'react';
+import { WidgetConfig, ConfigProps } from '../../../../types';
+interface ItemConfigProps {
+    config: WidgetConfig;
+    onRemove: () => void;
+    onSetConfig: (config: WidgetConfig) => void;
+    onSave: () => void;
+    onCancel: () => void;
+    component?: React.ComponentType<ConfigProps>;
+}
+declare const ItemConfig: ({ onCancel, config, onSetConfig, onSave, onRemove, component: ConfigComponent, }: ItemConfigProps) => JSX.Element;
+export default ItemConfig;

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

@@ -0,0 +1,18 @@
+import ComponentContext from "../../../../context/ComponentContext.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Modules/Dashboard/components/Layout/components/ItemConfig/ItemConfig.tsx
+const DefaultConfig = () => null;
+const ItemConfig = ({ onCancel, config, onSetConfig, onSave, onRemove, component: ConfigComponent = DefaultConfig }) => {
+	const { ItemConfigControls } = React.useContext(ComponentContext);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ConfigComponent, {
+		onChange: onSetConfig,
+		config
+	}) }), /* @__PURE__ */ jsx(ItemConfigControls, {
+		onRemove,
+		onSave,
+		onCancel
+	})] });
+};
+//#endregion
+export { ItemConfig as default };