@deviceinsight/ng-ui-components 7.23.0 → 7.25.0

package/README.md

@@ -95,9 +95,10 @@ 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:
+`.gitlab-ci.yml` installs the dependencies and then runs `test`, `lint` and `typecheck`
+on every branch except `main`. The `audit` job (`npm run scan`) only runs on `develop`,
+`feature/*` and `renovate/*` branches, so hotfixes and tags are not blocked by it. 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`
@@ -118,77 +119,55 @@ After git flow is installed, the repo needs to be initialized. Run `git flow ini
 question with the default (press Enter/Return). The script verifies that the branches
 are named `main` and `develop`.
 
-## Building a release
+## Releasing the develop branch
 
-To build a release of this library, execute `./release.sh`, which consists of the following steps:
+Run the release script from the repository root:
 
-### Before the release: Check for vulnerabilities and run the tests
-
-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, the script runs the checks locally before building the
-release:
-
-```
-npm install
-npm run scan
-npm run test
+```shell
+./release.sh
 ```
 
-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`.
-
-3. Edit the version in `package.json`.
-
-3.1. Edit the version in `package.json`, remove the `-SNAPSHOT`.
-
-3.2. Commit `package.json`. Commit message should be `Release $RELEASE_VERSION`, e.g. `Release 1.2.0`.
-
-4. Finish the release:
-
-`git flow release finish`
-
-This will merge the release branch into the `main` branch and create a tag.
-It will also merge the release branch into the `develop` branch.
-
-After this you should be on the `develop` branch.
-
-4.1 A merge conflict might occur in `package.json` for the `version`, when main is merged into the develop branch:
-
-Resolve it by taking the version of the `develop` branch. Then run `npm install` to resolve conflicts in `package-lock.version`.
-
-Run `git status` to see if there are more conflicts. If there are, resolve them and `git add` the fixed files.
-
-If there are no more conflicts, run `git add package*` and `git commit`.
-
-5. Start a new snapshot version:
-
-5.1.
-Edit the version in `package.json`,
-increment the minor version (e.g., from `1.1.0` to `1.2.0`) and add the `-SNAPSHOT` again,
-so that the version is e.g. `1.2.0-SNAPSHOT`.
-
-5.2. Run `npm install`.
-
-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:
-
-On branch `develop`:
-
-`git push`
-`git checkout main`
-`git push`
-`git push --tags`
-`git checkout develop`
+Before running it, make sure the workarea is clean and all commits on `develop` are pushed; otherwise the script aborts.
+It releases the current version from `package.json` (without `-SNAPSHOT`) and afterwards starts the next minor snapshot version.
+
+## Building a hotfix for a specific version of this library
+
+When building a hotfix in `ng-ui-scale`, first check which version of this library is used on the `main` branch of `ng-ui-scale`, e.g. with `git show origin/main:package.json | grep ng-ui-components`.
+Then build the hotfix on top of exactly that version, so that no unrelated changes from newer releases end up in the `ng-ui-scale` hotfix.
+Do not use `release.sh` or `git flow hotfix` for this: `git flow hotfix finish` merges into `main`, which already contains the newer release.
+
+Example: `ng-ui-scale` uses 7.22.0 while 7.24.0 is already released (the version on `main` of this library):
+
+1. Create the branch `hotfix/7.22.1` from the tag 7.22.0:
+   ```shell
+   git fetch --tags
+   git checkout -b hotfix/7.22.1 7.22.0
+   ```
+2. Set the version in `package.json` and `package-lock.json` to 7.22.1:
+   ```shell
+   npm version 7.22.1 --no-git-tag-version
+   ```
+   If the `audit` job in `.gitlab-ci.yml` still runs on every branch except `main`, copy its `rules` from `develop`, so that the vulnerability audit does not block the hotfix pipeline.
+3. Implement or cherry-pick the changes needed for the hotfix, either directly on the hotfix branch or in a feature branch that is merged into it.
+4. Add a `## Version 7.22.1` entry to `CHANGELOG.md` describing the changes in the hotfix.
+5. Run `npm run build`, `npm test -- --run` and `npm run lint` to verify there are no errors.
+6. Commit the changes.
+7. Tag the hotfix commit and push the tag:
+   ```shell
+   git tag -a 7.22.1 -m "Hotfix 7.22.1"
+   git push origin 7.22.1
+   ```
+   The `publish` CI job builds the tag and publishes it to npm.
+   Because 7.22.1 is older than the `latest` version, it is published under the dist-tag `hotfix-7.22` and `latest` stays at 7.24.0.
+8. Merge the hotfix branch into `develop` and push `develop`:
+   ```shell
+   git checkout develop
+   git pull
+   git merge --no-ff hotfix/7.22.1
+   git push
+   ```
+   `package.json` and `package-lock.json` will conflict; keep the `-SNAPSHOT` version of `develop` and run `npm install` before committing the merge.
+   In `CHANGELOG.md`, keep the 7.22.1 entry between the entries for 7.23.0 and 7.22.0.
+   Do not merge the hotfix branch into `main`.
+9. Delete the local hotfix branch: `git branch -d hotfix/7.22.1`.
+10. Update `ng-ui-scale` on its hotfix branch to 7.22.1.

package/dist/index.cjs

@@ -6,7 +6,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
 var __copyProps = (to, from, except, desc) => {
 	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
 		key = keys[i];
@@ -17,7 +16,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));
@@ -73,7 +72,6 @@ let _svgdotjs_svg_js = require("@svgdotjs/svg.js");
 let highcharts = require("highcharts");
 highcharts = __toESM(highcharts, 1);
 let highcharts_react_official = require("highcharts-react-official");
-highcharts_react_official = __toESM(highcharts_react_official, 1);
 let _rc_component_slider = require("@rc-component/slider");
 _rc_component_slider = __toESM(_rc_component_slider, 1);
 let _rc_component_tooltip = require("@rc-component/tooltip");
@@ -94,8 +92,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 +271,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,
@@ -842,8 +844,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,
@@ -1084,8 +1087,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, {
@@ -1779,10 +1783,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, {
@@ -2070,17 +2076,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;
@@ -2120,8 +2128,9 @@ var ReactableWithClientSidePagination = class extends react.Component {
 	}
 	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,
@@ -2603,7 +2612,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);
@@ -2812,7 +2821,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);
 }
@@ -3411,9 +3420,10 @@ var Chart = class extends react.Component {
 	}
 	render() {
 		const built = this.buildOptions();
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(highcharts_react_official.default, {
+		const options = this.props.updateOptions ? this.props.updateOptions(built) : built;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(highcharts_react_official.HighchartsReact, {
 			highcharts: highcharts.default,
-			options: this.props.updateOptions ? this.props.updateOptions(built) : built,
+			options,
 			containerProps: { className: this.props.className },
 			callback: this.handleChart
 		});
@@ -3421,54 +3431,15 @@ var Chart = class extends react.Component {
 };
 //#endregion
 //#region src/components/slider/RcSliderWithTooltip.tsx
-var import_raf = /* @__PURE__ */ __toESM((/* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.default = void 0;
-	var raf = (callback) => +setTimeout(callback, 16);
-	var caf = (num) => clearTimeout(num);
-	if (typeof window !== "undefined" && "requestAnimationFrame" in window) {
-		raf = (callback) => window.requestAnimationFrame(callback);
-		caf = (handle) => window.cancelAnimationFrame(handle);
-	}
-	var rafUUID = 0;
-	var rafIds = /* @__PURE__ */ new Map();
-	function cleanup(id) {
-		rafIds.delete(id);
-	}
-	var wrapperRaf = (callback, times = 1) => {
-		rafUUID += 1;
-		const id = rafUUID;
-		function callRef(leftTimes) {
-			if (leftTimes === 0) {
-				cleanup(id);
-				callback();
-			} else {
-				const realId = raf(() => {
-					callRef(leftTimes - 1);
-				});
-				rafIds.set(id, realId);
-			}
-		}
-		callRef(times);
-		return id;
-	};
-	wrapperRaf.cancel = (id) => {
-		const realId = rafIds.get(id);
-		cleanup(id);
-		return caf(realId);
-	};
-	if (process.env.NODE_ENV !== "production") wrapperRaf.ids = () => rafIds;
-	exports.default = wrapperRaf;
-})))(), 1);
 var HandleTooltip = (props) => {
 	const { value, children, visible, tipFormatter = (val) => `${val}`, ...restProps } = props;
 	const tooltipRef = (0, react.useRef)(null);
 	const rafRef = (0, react.useRef)(null);
 	function cancelKeepAlign() {
-		if (rafRef.current) import_raf.default.cancel(rafRef.current);
+		if (rafRef.current) cancelAnimationFrame(rafRef.current);
 	}
 	function keepAlign() {
-		rafRef.current = (0, import_raf.default)(() => {
+		rafRef.current = requestAnimationFrame(() => {
 			tooltipRef.current?.forceAlign();
 		});
 	}
@@ -3510,12 +3481,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");