@deviceinsight/ng-ui-components 7.22.0 → 7.24.0

package/dist/index.cjs

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 	}
 	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
 	value: mod,
 	enumerable: true
 }) : target, mod));
@@ -94,8 +94,10 @@ var setGlobalErrorMessageBoxOptions = (options) => {
 	globalErrorMessageBoxOptions = options;
 };
 var storeGroupName = (groupName, toastId) => {
-	if (groupName) if (groupNamesToToastIds[groupName]) groupNamesToToastIds[groupName] = [...groupNamesToToastIds[groupName], toastId];
-	else groupNamesToToastIds[groupName] = [toastId];
+	if (groupName) {
+		if (groupNamesToToastIds[groupName]) groupNamesToToastIds[groupName] = [...groupNamesToToastIds[groupName], toastId];
+		else groupNamesToToastIds[groupName] = [toastId];
+	}
 };
 var messageBoxSuccess = (content, options, groupName) => {
 	const toastId = react_toastify_unstyled.toast.success(content, {
@@ -271,8 +273,10 @@ function convertToTree({ childNodeKey, idKey, displayNameKey, typeKey, lazyLoada
 */
 function patchNode(node, patch) {
 	let patchedChildren;
-	if (patch.children !== void 0) if (node.children !== void 0) patchedChildren = [...node.children, ...patch.children];
-	else patchedChildren = [...patch.children];
+	if (patch.children !== void 0) {
+		if (node.children !== void 0) patchedChildren = [...node.children, ...patch.children];
+		else patchedChildren = [...patch.children];
+	}
 	return {
 		...node,
 		...patch,
@@ -411,9 +415,11 @@ var ValidatedTextInput = class extends react.Component {
 //#region src/components/colorpicker/ColorTextInput.tsx
 function ColorTextInput({ value, pattern, onChange, placeholder, style }) {
 	const [text, setText] = (0, react.useState)(value);
-	(0, react.useEffect)(() => {
+	const [lastValue, setLastValue] = (0, react.useState)(value);
+	if (value !== lastValue) {
+		setLastValue(value);
 		setText(value);
-	}, [value]);
+	}
 	function handleChange(value, valid) {
 		setText(value);
 		if (valid) onChange(value);
@@ -544,9 +550,7 @@ function inputToTzDate(value, pattern, timezone) {
 var DateInput = (0, react.forwardRef)(({ value, clearable, inline, readOnly, wrapperClassName, onChange, locale, timezone, ...otherProps }, ref) => {
 	const [pattern, setPattern] = (0, react.useState)(dayjs.default.localeData().longDateFormat("L"));
 	const { t } = useTranslation();
-	const [valid, setValid] = (0, react.useState)(false);
 	const [popupOpen, setPopupOpen] = (0, react.useState)(false);
-	const [inputText, setInputText] = (0, react.useState)("");
 	const debouncedSetPopupActive = (0, react.useMemo)(() => (0, lodash.debounce)(setPopupOpen, 30), []);
 	(0, react.useEffect)(() => {
 		const language = locale ?? i18next.default.language;
@@ -564,17 +568,22 @@ var DateInput = (0, react.forwardRef)(({ value, clearable, inline, readOnly, wra
 		t,
 		timezone
 	]);
-	(0, react.useEffect)(() => {
-		if (value == null) setInputText("");
-		else setInputText(formattedDate(value));
-	}, [formattedDate, value]);
-	(0, react.useEffect)(() => {
+	const [valid, setValid] = (0, react.useState)(() => isInputValid(value, pattern));
+	const [inputText, setInputText] = (0, react.useState)(() => value == null ? "" : formattedDate(value));
+	const [lastInput, setLastInput] = (0, react.useState)({
+		value,
+		pattern,
+		timezone
+	});
+	if (!Object.is(value, lastInput.value) || pattern !== lastInput.pattern || timezone !== lastInput.timezone) {
+		setLastInput({
+			value,
+			pattern,
+			timezone
+		});
+		setInputText(value == null ? "" : formattedDate(value));
 		setValid(isInputValid(value, pattern));
-	}, [pattern, value]);
-	(0, react.useEffect)(() => {
-		dayjs.default.locale(locale ?? i18next.default.language);
-		setPattern(dayjs.default.localeData().longDateFormat("L"));
-	}, [locale]);
+	}
 	const handleInputTextChange = (text) => {
 		setInputText(text);
 		if (text) {
@@ -837,8 +846,9 @@ function RouteLink({ to, confirm, className, title, children, keyboardShortcut,
 			pushRoute();
 		}
 	};
+	const href = history.createHref(typeof to === "string" ? { pathname: to } : to);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-		href: history.createHref(typeof to === "string" ? { pathname: to } : to),
+		href,
 		onClick: handleClickEvent,
 		className: `di route-link ${className || ""}`,
 		title: title ? t(title.id, { defaultValue: title.defaultValue }) : void 0,
@@ -1079,8 +1089,9 @@ var NodeInfo = class extends react.PureComponent {
 	}
 	render() {
 		const { node, node: { name }, leafNode, expanded, isLastChild, onExpand, selectionState, isLoading } = this.props;
+		const selected = selectionState === SelectionState.ALL;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: `node-info ${selectionState === SelectionState.ALL ? "selected" : ""}`,
+			className: `node-info ${selected ? "selected" : ""}`,
 			children: [
 				isLastChild !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, { lastChild: isLastChild }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NodeImage, {
@@ -1114,7 +1125,6 @@ var Node = class Node extends react.Component {
 		super(..._args);
 		this.state = {
 			expanded: false,
-			selectionState: this.getSelectionState(),
 			isLoading: false
 		};
 		this.toggleExpand = () => {
@@ -1140,28 +1150,23 @@ var Node = class Node extends react.Component {
 	* @param {Props} prevProps
 	* @param {State} prevState
 	*/
-	shouldComponentUpdate(prevProps, prevState) {
-		const { selectedNodes: prevSelectedNodes, treeSize: prevTreeSize } = prevProps;
-		const { expanded: prevExpanded, selectionState: prevSelectionState, isLoading: prevIsLoading } = prevState;
+	shouldComponentUpdate(nextProps, nextState) {
+		const { selectedNodes: nextSelectedNodes, treeSize: nextTreeSize } = nextProps;
+		const { expanded: nextExpanded, isLoading: nextIsLoading } = nextState;
 		const { selectedNodes, node, treeSize } = this.props;
-		const { expanded, selectionState, isLoading } = this.state;
-		if (prevIsLoading !== isLoading) return true;
-		if (prevTreeSize !== treeSize) return true;
-		if (this.isLeaf()) return prevSelectedNodes.includes(node.id) && !selectedNodes.includes(node.id) || !prevSelectedNodes.includes(node.id) && selectedNodes.includes(node.id) || prevSelectionState !== selectionState;
-		else return prevSelectedNodes.length !== selectedNodes.length || prevExpanded !== expanded || prevSelectionState !== selectionState;
-	}
-	componentDidMount() {
-		this.setState({ selectionState: this.getSelectionState() });
-	}
-	componentDidUpdate() {
-		this.setState({ selectionState: this.getSelectionState() });
+		const { expanded, isLoading } = this.state;
+		const selectionStateChanged = this.getSelectionState(this.props) !== this.getSelectionState(nextProps);
+		if (isLoading !== nextIsLoading) return true;
+		if (treeSize !== nextTreeSize) return true;
+		if (this.isLeaf()) return selectedNodes.includes(node.id) && !nextSelectedNodes.includes(node.id) || !selectedNodes.includes(node.id) && nextSelectedNodes.includes(node.id) || selectionStateChanged;
+		else return selectedNodes.length !== nextSelectedNodes.length || expanded !== nextExpanded || selectionStateChanged;
 	}
 	isLeaf() {
 		const { node } = this.props;
 		return node.children === void 0;
 	}
-	getSelectionState() {
-		const { node, selectedNodes } = this.props;
+	getSelectionState(props = this.props) {
+		const { node, selectedNodes } = props;
 		if (this.isLeaf()) return selectedNodes.includes(node.id) ? SelectionState.ALL : SelectionState.NONE;
 		else {
 			const leafIds = getAllLeafIds(node);
@@ -1173,7 +1178,8 @@ var Node = class Node extends react.Component {
 	}
 	render() {
 		const { node, isLastChild, ...commonNodeProps } = this.props;
-		const { expanded, selectionState, isLoading } = this.state;
+		const { expanded, isLoading } = this.state;
+		const selectionState = this.getSelectionState();
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "node",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NodeInfo, {
@@ -1204,19 +1210,15 @@ var Node = class Node extends react.Component {
 var TreeView = class extends react.Component {
 	constructor(..._args) {
 		super(..._args);
+		this.convert = convertToTree(this.props.dataSetConfig);
+		this.initialTree = this.initTree(this.props.treeData);
 		this.state = {
 			treeData: this.props.treeData,
-			tree: {
-				id: "virtualRootNode",
-				name: "",
-				children: [],
-				path: "/",
-				originalNode: {}
-			},
-			treeSize: 0,
-			selectedNodes: this.props.selectedNodes || []
+			tree: this.initialTree,
+			treeSize: getTreeSize(this.initialTree),
+			selectedNodes: this.props.selectedNodes || [],
+			lastSelectedNodes: this.props.selectedNodes || []
 		};
-		this.convert = convertToTree(this.props.dataSetConfig);
 		this.selectNodes = (nodes) => {
 			const { onSelect } = this.props;
 			const { selectedNodes } = this.state;
@@ -1264,19 +1266,15 @@ var TreeView = class extends react.Component {
 			});
 		};
 	}
-	componentDidMount() {
-		const { treeData } = this.props;
-		const tree = this.initTree(treeData);
-		const treeSize = getTreeSize(tree);
-		this.setState({
-			tree,
-			treeSize
-		});
-	}
-	componentDidUpdate(prevProps) {
-		const { selectedNodes: prevNodes } = prevProps;
-		const { selectedNodes } = this.props;
-		if (selectedNodes && prevNodes && prevNodes.length !== selectedNodes.length) this.setState({ selectedNodes });
+	static {
+		this.getDerivedStateFromProps = (props, state) => {
+			const { selectedNodes } = props;
+			if (selectedNodes && selectedNodes.length !== state.lastSelectedNodes.length) return {
+				selectedNodes,
+				lastSelectedNodes: selectedNodes
+			};
+			return null;
+		};
 	}
 	initTree(treeData) {
 		return {
@@ -1353,9 +1351,11 @@ function Pagination({ onChangePage, page, totalPages, onChangeSize, size }) {
 	(0, react.useEffect)(() => {
 		changePageDebouncedRef.current = (0, lodash.debounce)(onChangePage, 500);
 	}, [onChangePage]);
-	(0, react.useEffect)(() => {
+	const [lastPage, setLastPage] = (0, react.useState)(page);
+	if (page !== lastPage) {
+		setLastPage(page);
 		setPageRaw(`${page + 1}`);
-	}, [page]);
+	}
 	function goToFirstPage() {
 		onChangePage(0);
 	}
@@ -1575,8 +1575,10 @@ var SelectWithSearch = class extends react.Component {
 							value: this.state.inputValue,
 							label: this.state.inputValue
 						};
-						this.setState((prevState) => ({ options: [newItem, ...prevState.options] }));
-						this.state.inputValue = null;
+						this.setState((prevState) => ({
+							options: [newItem, ...prevState.options],
+							inputValue: null
+						}));
 						onChange(newItem);
 					});
 				}
@@ -1783,10 +1785,12 @@ var ReactableTableHeader = class extends react.Component {
 		this.getClassName = (columnDef) => {
 			const { paginationSettings, tableName } = this.props;
 			const className = getClassName(tableName, columnDef.name);
-			if (columnDef.sortable) if (columnDef.name === paginationSettings.sort.property) if (paginationSettings.sort.direction === "ASC") return `${className} sortable sortAsc`;
-			else return `${className} sortable sortDes`;
-			else return `${className} sortable`;
-			else return `${className}`;
+			if (columnDef.sortable) {
+				if (columnDef.name === paginationSettings.sort.property) {
+					if (paginationSettings.sort.direction === "ASC") return `${className} sortable sortAsc`;
+					else return `${className} sortable sortDes`;
+				} else return `${className} sortable`;
+			} else return `${className}`;
 		};
 		this.printLabel = (label) => {
 			if (isTranslationDescriptor(label)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trans, {
@@ -2074,17 +2078,19 @@ var ReactableWithClientSidePagination = class extends react.Component {
 		};
 		this.handleSelectChange = (selected, item) => {
 			const { onSelectedItemsChange, selectedItems = [], uniqueItemKey } = this.props;
-			if (onSelectedItemsChange) if (selected) onSelectedItemsChange(selectedItems.concat(uniqueItemKey(item)));
-			else onSelectedItemsChange(selectedItems.filter((key) => key !== uniqueItemKey(item)));
-			else console.warn("ReactableWithClientSidePagination: onSelectedItemsChange property is missing");
+			if (onSelectedItemsChange) {
+				if (selected) onSelectedItemsChange(selectedItems.concat(uniqueItemKey(item)));
+				else onSelectedItemsChange(selectedItems.filter((key) => key !== uniqueItemKey(item)));
+			} else console.warn("ReactableWithClientSidePagination: onSelectedItemsChange property is missing");
 		};
 		this.handleSelectAllChange = (selectedAll) => {
 			const { onSelectedItemsChange, items, selectedItems = [], uniqueItemKey } = this.props;
 			const { filteredItems } = this.state;
 			const visibleItems = (filteredItems || items || []).map(uniqueItemKey);
-			if (onSelectedItemsChange) if (selectedAll) onSelectedItemsChange((0, lodash.uniqWith)([...selectedItems, ...visibleItems], lodash.isEqual).sort());
-			else onSelectedItemsChange((0, lodash.difference)(selectedItems, visibleItems));
-			else console.warn("ReactableWithClientSidePagination: onSelectedItemsChange property is missing");
+			if (onSelectedItemsChange) {
+				if (selectedAll) onSelectedItemsChange((0, lodash.uniqWith)([...selectedItems, ...visibleItems], lodash.isEqual).sort());
+				else onSelectedItemsChange((0, lodash.difference)(selectedItems, visibleItems));
+			} else console.warn("ReactableWithClientSidePagination: onSelectedItemsChange property is missing");
 		};
 		this.areSelectedAll = () => {
 			const { items, selectedItems, uniqueItemKey } = this.props;
@@ -2100,21 +2106,33 @@ var ReactableWithClientSidePagination = class extends react.Component {
 		this.state = {
 			paginationSettings: paginationSettings || DEFAULT_PAGINATION_SETTINGS,
 			filterSettings: {},
-			filteredItems: null
+			filteredItems: null,
+			lastSettings: paginationSettings
 		};
 	}
 	componentDidUpdate(prevProps) {
 		const { items } = this.props;
 		const { items: prevItems } = prevProps;
-		const settings = this.props.paginationSettings || this.props.initialPaginationSettings;
-		const prevSettings = prevProps.paginationSettings || prevProps.initialPaginationSettings;
 		if (items && prevItems && items.length !== prevItems.length) this.calculatePageNumber(items, this.state.paginationSettings);
-		if (settings && !(0, lodash.isEqual)(settings, prevSettings)) this.setState({ paginationSettings: settings }, () => this.handleChangePage(0));
+	}
+	static {
+		this.getDerivedStateFromProps = (props, state) => {
+			const settings = props.paginationSettings || props.initialPaginationSettings;
+			if (settings && !(0, lodash.isEqual)(settings, state.lastSettings)) return {
+				lastSettings: settings,
+				paginationSettings: {
+					...settings,
+					page: 0
+				}
+			};
+			return null;
+		};
 	}
 	render() {
 		const { uniqueItemKey, isLoading, columnDefs, rowDef, tableName, clickable, selectable, selectedItems, onChangeSize } = this.props;
+		const finalColumnDefs = selectable ? extendColumnDefsWithCheckboxes(columnDefs, this.handleSelectChange, this.handleSelectAllChange, this.areSelectedAll(), selectedItems || [], uniqueItemKey) : columnDefs;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Reactable, {
-			columnDefs: selectable ? extendColumnDefsWithCheckboxes(columnDefs, this.handleSelectChange, this.handleSelectAllChange, this.areSelectedAll(), selectedItems || [], uniqueItemKey) : columnDefs,
+			columnDefs: finalColumnDefs,
 			rowDef,
 			uniqueItemKey,
 			paginationSettings: this.state.paginationSettings,
@@ -2292,20 +2310,17 @@ var ImageUpload = class extends react.Component {
 	constructor(..._args) {
 		super(..._args);
 		this.state = {
-			dragOverPreview: false,
+			dragOverUrl: void 0,
 			file: null
 		};
 		this.handleDragOver = () => {
-			this.setState({ dragOverPreview: true });
+			this.setState({ dragOverUrl: this.props.imageUrl });
 		};
 	}
-	componentDidUpdate(prevProps) {
-		if (prevProps.imageUrl !== this.props.imageUrl) this.setState({ dragOverPreview: false });
-	}
 	render() {
 		const { accept, imageUrl, imageSize, onSelectFile, onRemoveFile, onDownloadFile, ...otherProps } = this.props;
-		const { dragOverPreview, file } = this.state;
-		if (imageUrl && !dragOverPreview && file) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PreviewImage, {
+		const { dragOverUrl, file } = this.state;
+		if (imageUrl && !(dragOverUrl !== void 0 && dragOverUrl === imageUrl) && file) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PreviewImage, {
 			url: imageUrl,
 			imageSize,
 			onRemoveFile: () => onRemoveFile?.(file),
@@ -2315,7 +2330,10 @@ var ImageUpload = class extends react.Component {
 		else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileUpload, {
 			...otherProps,
 			onRemoveFile: (file) => {
-				this.setState({ file: null });
+				this.setState({
+					file: null,
+					dragOverUrl: void 0
+				});
 				onRemoveFile?.(file);
 			},
 			onSelectFile: (file) => {
@@ -2394,9 +2412,17 @@ var formatTime = (timezone, date) => {
 var DateTimeInput = (0, react.forwardRef)(({ timestamp, timezone, warning, readOnly = false, onChange, ...otherProps }, ref) => {
 	const [time, setTime] = (0, react.useState)(formatTime(timezone, timestamp));
 	const timeValue = time == null ? formatTime(timezone, timestamp) : time;
-	(0, react.useEffect)(() => {
+	const [lastInput, setLastInput] = (0, react.useState)({
+		timestamp,
+		timezone
+	});
+	if (timestamp !== lastInput.timestamp || timezone !== lastInput.timezone) {
+		setLastInput({
+			timestamp,
+			timezone
+		});
 		setTime(formatTime(timezone, timestamp));
-	}, [timezone, timestamp]);
+	}
 	function handleChangeDate(date, fromTextField) {
 		const currentDate = dayjs.default.tz(timestamp, timezone);
 		onChange(dayjs.default.tz(date, timezone).set("hour", currentDate.hour()).set("minute", currentDate.minute()).set("second", currentDate.second()).set("millisecond", currentDate.millisecond()).valueOf(), fromTextField);
@@ -2515,7 +2541,13 @@ var SelectWithSearchAsync = class extends react.Component {
 		const { currentItem } = this.state;
 		if (value && (!currentItem || currentItem.value !== value)) {
 			if (!this.reloadItemFromCache()) searchById(value).then(this.addBackendItemToCache);
-		} else if (!value && currentItem) this.setState({ currentItem: null });
+		}
+	}
+	static {
+		this.getDerivedStateFromProps = (props, state) => {
+			if (!props.value && state.currentItem) return { currentItem: null };
+			return null;
+		};
 	}
 	render() {
 		const { clearable, noResultsMessage, disabled, menuPortalTarget } = this.props;
@@ -2582,7 +2614,7 @@ var MultiMenuItem = class extends react.PureComponent {
 };
 //#endregion
 //#region src/components/periodpicker/components/Inputs.tsx
-var ONE_HOUR = 3600 * 1e3;
+var ONE_HOUR = 36e5;
 function Inputs({ period, onChange, readOnly, locale, timezone }) {
 	const [showWarningTarget, setShowWarningTarget] = (0, react.useState)("");
 	const warningTimeoutRef = (0, react.useRef)(void 0);
@@ -2791,7 +2823,7 @@ function createLastXDays(days, timezone) {
 		tsEnd: (0, dayjs.default)().endOf("day").valueOf()
 	};
 }
-var DAY_TO_MILLIS = 1e3 * 60 * 60 * 24;
+var DAY_TO_MILLIS = 864e5;
 function periodToDays({ tsStart, tsEnd }) {
 	return Math.round((tsEnd - tsStart + 1) / DAY_TO_MILLIS);
 }
@@ -2801,7 +2833,7 @@ function Menu({ onChange, onShowCustomPeriod, periodName, timezone }) {
 	const [visible, setVisible] = (0, react.useState)(false);
 	const [showDatePicker, setShowDatePicker] = (0, react.useState)(false);
 	const [showMonthPicker, setShowMonthPicker] = (0, react.useState)(false);
-	const [datePickerDate, setDatePickerDate] = (0, react.useState)(Date.now());
+	const [datePickerDate, setDatePickerDate] = (0, react.useState)(() => Date.now());
 	function setPeriod(period) {
 		onChange(period);
 		setVisible(false);
@@ -3227,17 +3259,18 @@ function sortModifications(modifications) {
 //#endregion
 //#region src/components/svg/SvgImage.tsx
 function useGlobalStyleElement() {
-	const styleElementRef = (0, react.useRef)(null);
+	const [styleElement] = (0, react.useState)(() => {
+		const element = document.createElement("style");
+		element.appendChild(document.createTextNode(""));
+		return element;
+	});
 	(0, react.useEffect)(() => {
-		const styleElement = document.createElement("style");
-		styleElement.appendChild(document.createTextNode(""));
 		if (document && document.head) document.head.appendChild(styleElement);
-		styleElementRef.current = styleElement;
 		return () => {
-			if (document && document.head && styleElement) document.head.removeChild(styleElement);
+			if (document && document.head) document.head.removeChild(styleElement);
 		};
-	}, []);
-	return styleElementRef.current;
+	}, [styleElement]);
+	return styleElement;
 }
 function SvgImage({ imageData, modifications, onConflict }) {
 	const svgWrapperRef = (0, react.useRef)(null);
@@ -3326,9 +3359,10 @@ var getClickConfiguration = (onClick) => {
 var Chart = class extends react.Component {
 	constructor(..._args) {
 		super(..._args);
-		this.state = {};
+		this.state = { titleApplied: false };
 		this.chart = null;
 		this.ro = null;
+		this.titleTimeoutId = void 0;
 		this.handleChart = (chart) => {
 			this.chart = chart;
 			this.ro = new ResizeObserver(() => {
@@ -3338,8 +3372,16 @@ var Chart = class extends react.Component {
 		};
 	}
 	componentDidMount() {
+		this.titleTimeoutId = setTimeout(() => this.setState({ titleApplied: true }), 0);
+	}
+	/**
+	* Builds the Highcharts configuration from the props. Everything here is derived, so it is
+	* rebuilt while rendering rather than mirrored into state.
+	*/
+	buildOptions() {
 		const { type, title, items, tooltipTitle, valueFormatter, onClick } = this.props;
-		this.setState({
+		const { titleApplied } = this.state;
+		return {
 			...initialOptions,
 			plotOptions: {
 				...initialOptions.plotOptions,
@@ -3356,44 +3398,12 @@ var Chart = class extends react.Component {
 				...initialOptions.legend,
 				enabled: type === "pie"
 			},
-			yAxis: {
-				...initialOptions.yAxis,
-				enabled: type === "column",
-				title: { text: title || "" }
-			},
-			series: [{
-				type,
-				innerSize: "50%",
-				data: items.map(({ label, value }) => [label, value])
-			}]
-		});
-		setTimeout(() => {
-			this.setState({ title: {
-				...initialOptions.title,
-				text: type === "column" ? "" : title || ""
-			} });
-		}, 0);
-	}
-	componentDidUpdate(prevProps) {
-		const { type, title, items, tooltipTitle, valueFormatter, onClick } = this.props;
-		if (title !== prevProps.title) this.setState({
 			title: {
-				...this.state.title,
-				text: type === "column" ? "" : title || ""
-			},
-			yAxis: {
-				...this.state.yAxis,
-				title: { text: title || "" }
-			}
-		});
-		if (type !== prevProps.type) this.setState({
-			legend: {
-				...this.state.legend,
-				enabled: type === "pie"
+				...initialOptions.title,
+				text: titleApplied && type !== "column" ? title || "" : ""
 			},
-			title: { text: type === "column" ? "" : title || "" },
 			yAxis: {
-				...this.state.yAxis,
+				...initialOptions.yAxis,
 				enabled: type === "column",
 				title: { text: type === "column" ? title || "" : "" }
 			},
@@ -3402,35 +3412,20 @@ var Chart = class extends react.Component {
 				innerSize: "50%",
 				data: items.map(({ label, value }) => [label, value])
 			}]
-		});
-		if (!(0, lodash.isEqual)(items, prevProps.items)) this.setState({ series: [{
-			type,
-			innerSize: "50%",
-			data: items.map(({ label, value }) => [label, value])
-		}] });
-		if (tooltipTitle !== prevProps.tooltipTitle || valueFormatter !== prevProps.valueFormatter || onClick !== prevProps.onClick) this.setState({
-			tooltip: {
-				...initialOptions.tooltip,
-				formatter() {
-					const format = valueFormatter || ((value) => value);
-					return createTooltip(tooltipTitle || "", this.point.name, format(this.point.y));
-				}
-			},
-			plotOptions: {
-				...initialOptions.plotOptions,
-				...getClickConfiguration(onClick)
-			}
-		});
+		};
 	}
 	componentWillUnmount() {
+		clearTimeout(this.titleTimeoutId);
 		if (this.ro && this.chart?.renderTo) this.ro.unobserve(this.chart.renderTo);
 		this.chart = null;
 		this.ro = null;
 	}
 	render() {
+		const built = this.buildOptions();
+		const options = this.props.updateOptions ? this.props.updateOptions(built) : built;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(highcharts_react_official.default, {
 			highcharts: highcharts.default,
-			options: this.props.updateOptions ? this.props.updateOptions(this.state) : this.state,
+			options,
 			containerProps: { className: this.props.className },
 			callback: this.handleChart
 		});
@@ -3527,12 +3522,13 @@ function useLimitStyling(limit, min, max) {
 			if (!containerEl) throw new Error(".rc-slider-rail element missing");
 			const disabledAreaEl = containerEl?.querySelector(`.disabled-area-element`);
 			const sliderWidth = containerEl.getBoundingClientRect().width;
-			if (disabledAreaEl) if (limit == null) disabledAreaEl.remove();
-			else {
-				const width = Math.round((max - limit) / (max - min) * sliderWidth);
-				disabledAreaEl.style.width = `${width}px`;
-			}
-			else if (limit != null) {
+			if (disabledAreaEl) {
+				if (limit == null) disabledAreaEl.remove();
+				else {
+					const width = Math.round((max - limit) / (max - min) * sliderWidth);
+					disabledAreaEl.style.width = `${width}px`;
+				}
+			} else if (limit != null) {
 				const width = Math.round((max - limit) / (max - min) * sliderWidth);
 				const disabledAreaEl = document.createElement("div");
 				disabledAreaEl.classList.add("disabled-area-element");