@deviceinsight/ng-ui-components 7.22.0 → 7.23.0

package/README.md

@@ -1,18 +1,109 @@
+# General
+
+This project contains the higher-level React components shared by
+[NG-UI](https://gitlab.device-insight.com/ng-ui/ng-ui) and custom projects.
+It is published as `@deviceinsight/ng-ui-components` and builds on
+`@deviceinsight/ng-ui-basic-components` and `@deviceinsight/ng-ui-api-client`.
+
+The package is ESM-first (`dist/index.js`) with a CommonJS build (`dist/index.cjs`)
+and type declarations (`dist/types/index.d.ts`). The bundled stylesheet is exported
+separately and has to be imported by the consuming project:
+
+```ts
+import '@deviceinsight/ng-ui-components/style.css';
+```
+
+`react`, `react-dom`, `i18next`, `react-i18next` and `react-router-dom` are peer
+dependencies and have to be provided by the consuming project.
+
+## Contents
+
+`src/index.ts` is the public API. It currently exports:
+
+- **Inputs** — `DateInput`, `DateTimeInput`, `UrnInput`, `ValidatedTextInput`,
+  `SelectWithSearch`, `SelectWithSearchAsync`, `PeriodPicker`, `Slider`
+- **Data display** — `Reactable`, `ReactableWithClientSidePagination`, `Pagination`,
+  `TreeView` (plus `getTreeNodePathById`), `Chart`, `InfoBox`, `ContentHeader`
+- **Color pickers** — `ColorPicker` / `GridColorPicker`, `GradientColorPicker`
+- **Navigation** — `RouteLink`, `RouteTabs`, `MultiMenu`, `MultiMenuItem`
+- **Upload** — `FileUpload`, `ImageUpload`
+- **SVG** — `SvgImage` and the helpers `getSvgElement`, `getMutableNodeList`,
+  `validateSvg`
+- **Prompt** — `withPrompt`
+- **Message box** — `messageBoxSuccess`, `messageBoxInfo`, `messageBoxWarn`,
+  `messageBoxError`, `messageBoxDismissSingle`, `messageBoxDismissGroup`,
+  `messageBoxDismissAll`, `setGlobalMessageBoxOptions`,
+  `setGlobalErrorMessageBoxOptions`, `MessageBoxContainer`
+- **Utilities** — `uuidV4`, `nanoid10`, `initializeTranslation`
+- the accompanying types (`ReactableProps`, `ReactableColumnDef`, `Period`,
+  `SvgImageProps`, `PaginationSettings`, …)
+
+Translations live in `src/i18n` and are set up by calling `initializeTranslation`.
+`src/modules` holds non-component code (message box, utils), `src/styles` the
+stylesheet, `src/utils` shared helpers.
+
+# Development
+
+Node is pinned via `.nvmrc` (see also the `engines` field in `package.json`).
+
+```shell
+npm install
+npm run storybook   # dev server on http://localhost:6006
+```
+
+Available scripts:
+
+| Script                    | Description                                                                |
+| ------------------------- | -------------------------------------------------------------------------- |
+| `npm run build`           | Cleans `dist`, bundles with Vite and emits types via `tsconfig.types.json` |
+| `npm test`                | Runs the Vitest suite (watch mode by default, `--run` for a single pass)   |
+| `npm run watch`           | Rebuilds and runs `yalc push` on every successful compile                  |
+| `npm run clean`           | Removes `dist`                                                             |
+| `npm run storybook`       | Starts Storybook on port 6006                                              |
+| `npm run build-storybook` | Builds the static Storybook                                                |
+| `npm run typecheck`       | `tsc --noEmit`                                                             |
+| `npm run lint`            | Lints with oxlint and checks formatting with Prettier                      |
+| `npm run prettier`        | Formats the sources and `.mdx` files                                       |
+| `npm run scan`            | Vulnerability scan via `audit-ci` using `scan-config.json5`                |
+
+Tests use Vitest with `happy-dom` and Testing Library; the setup lives in
+`vitest.setup.tsx` and the config in `vitest.config.mts`. Components are additionally
+exercised via Storybook stories (`*.stories.tsx`).
+
+Commits are checked by a husky `pre-commit` hook that runs `lint-staged`
+(prettier on the staged files).
+
+`CHANGELOG.md` is maintained per version. Renovate dependency updates append their
+entry automatically via the `postUpgradeTasks` hook in `renovate.json`, which calls
+`./update-changelog.sh <depName> <currentVersion> <newVersion>`.
+
 # Linking for local development
 
-We recommend using `yalc` tool for linking `ng-ui-components`. It's because `yalc` generates exactly the same package as
+We recommend using the `yalc` tool for linking `@deviceinsight/ng-ui-components`. It's because `yalc` generates exactly the same package as
 it would be published to the npm registry, especially it removes files that should be ignored and their existence cause
-problems when we use `yarn link`.
+problems when we use `npm link`.
 
 Here's how to do the linking:
 
 ```shell
-yarn link-local
+npm run build
+npx yalc publish
 
 # in the project where you want to link this library to:
-yalc link "@deviceinsight/ng-ui-components"
+npx yalc link "@deviceinsight/ng-ui-components"
 ```
 
+# CI
+
+`.gitlab-ci.yml` installs the dependencies and then runs `test`, `scan`, `lint` and
+`typecheck` on every branch except `main`. On `develop` the `pages` job publishes the
+static Storybook to GitLab Pages. The `publish` job runs for `develop` and for tags:
+`-SNAPSHOT` versions are published to the internal Nexus registry under the `next`
+tag, releases go to the public npm registry. A release older than the currently
+published `latest` is published under a `hotfix-<major>.<minor>` tag so that `latest`
+is not moved backwards. `publish_alpha` is a manual job that publishes an alpha
+prerelease of the `VERSION` variable to the internal registry under `next`.
+
 # Releasing the library using git flow
 
 ## Prerequisites
@@ -24,7 +115,8 @@ The git flow tools need to be installed. This depends on your operating system.
 They can be also installed from the git repo: https://github.com/petervanderdoes/gitflow-avh
 
 After git flow is installed, the repo needs to be initialized. Run `git flow init` and answer every
-question with the default (press Enter/Return).
+question with the default (press Enter/Return). The script verifies that the branches
+are named `main` and `develop`.
 
 ## Building a release
 
@@ -34,9 +126,8 @@ To build a release of this library, execute `./release.sh`, which consists of th
 
 Vulnerabilities can occur at any time.
 To be sure, the pipeline for the branches and the tags created
-in the release process will not fail, it is wise to run the checks locally before building the
-release.
-To do this, run:
+in the release process will not fail, the script runs the checks locally before building the
+release:
 
 ```
 npm install
@@ -44,12 +135,16 @@ npm run scan
 npm run test
 ```
 
+If `package-lock.json` changed during the install, the script commits it.
+
 ### Building the release
 
 1. Switch to develop branch and make sure both main and develop are current:
 
 `git checkout develop && git pull && git fetch origin main:main`
 
+The script also aborts if the workarea is dirty or if `develop` has unpushed commits.
+
 2. Get the upcoming release from `package.json` and start the release:
 
 `git flow release start $RELEASE_VERSION`, e.g. `git flow release start 1.2.0`.
@@ -86,7 +181,7 @@ so that the version is e.g. `1.2.0-SNAPSHOT`.
 
 5.2. Run `npm install`.
 
-5.2. Commit `package.json` and `package-lock.json`. Commit message should be `Starting $NEW_SNAPSHOT_VERSION`, e.g. `Starting 1.2.0`.
+5.3. Commit `package.json` and `package-lock.json`. Commit message should be `Starting $NEW_SNAPSHOT_VERSION`, e.g. `Starting 1.2.0`.
 
 6. Push the branches and the tag:
 

package/dist/index.cjs

@@ -411,9 +411,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 +546,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 +564,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) {
@@ -1114,7 +1119,6 @@ var Node = class Node extends react.Component {
 		super(..._args);
 		this.state = {
 			expanded: false,
-			selectionState: this.getSelectionState(),
 			isLoading: false
 		};
 		this.toggleExpand = () => {
@@ -1140,28 +1144,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 +1172,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 +1204,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 +1260,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 +1345,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 +1569,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);
 					});
 				}
@@ -2100,16 +2096,27 @@ 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;
@@ -2292,20 +2299,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 +2319,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 +2401,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 +2530,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;
@@ -2801,7 +2822,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 +3248,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 +3348,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 +3361,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 +3387,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 +3401,19 @@ 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();
 		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: this.props.updateOptions ? this.props.updateOptions(built) : built,
 			containerProps: { className: this.props.className },
 			callback: this.handleChart
 		});