@plesk/ui-library 3.40.4 → 3.40.6

package/esm/components/Tour/Tour.js

@@ -2,11 +2,11 @@
 
 import { Children, cloneElement, isValidElement } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * `Tour` component is used for introducing a new functionality in the product.
- * The component consists of several [Spots](#!/Spot), each of them highlighting a specific feature
- * or element you want to focus user attention on.
- * @since 2.7.0
+/**
+ * `Tour` component is used for introducing a new functionality in the product.
+ * The component consists of several [Spots](#!/Spot), each of them highlighting a specific feature
+ * or element you want to focus user attention on.
+ * @since 2.7.0
  */
 const Tour = _ref => {
   let {

package/esm/components/Translate/Translate.js

@@ -2,9 +2,9 @@
 
 import { useTranslate } from '../LocaleProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * `Translate` component.
- * @since 0.0.42
+/**
+ * `Translate` component.
+ * @since 0.0.42
  */
 const Translate = _ref => {
   let {

package/esm/components/index.js

@@ -53,8 +53,7 @@ export { default as ItemList } from './ItemList';
 export { default as Label } from './Label';
 export { default as Layout } from './Layout';
 export { default as List, ListActions, ListAction, ListOperation, ListEmptyView, ListActionsDivider } from './List';
-export { default as LocaleProvider } from './LocaleProvider';
-export * from './LocaleProvider';
+export { default as LocaleProvider, useTranslate, LocaleContext, LocaleBetaProvider } from './LocaleProvider';
 export { default as Markdown } from './Markdown';
 export { default as Media, MediaSection } from './Media';
 export { default as Menu, MenuDivider, MenuHeader, MenuItem, MenuSelectableItem, MenuBaseItem } from './Menu';

package/esm/hooks/useMutationObserver.js

@@ -0,0 +1,23 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import { useEffect, useRef } from 'react';
+export const useMutationObserver = _ref => {
+  let {
+    ref,
+    onMutate,
+    options
+  } = _ref;
+  const onMutateRef = useRef(undefined);
+  onMutateRef.current = onMutate;
+  useEffect(() => {
+    if (!ref.current) return undefined;
+    if (typeof window === 'undefined' || !('MutationObserver' in window)) return undefined;
+    const observer = new MutationObserver(() => {
+      onMutateRef.current?.();
+    });
+    observer.observe(ref.current, options);
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref, options]);
+};

package/esm/hooks/useSqueeze.js

@@ -2,6 +2,11 @@
 
 import { useRef, useLayoutEffect, useState } from 'react';
 import { useResizeObserver } from './useResizeObserver';
+import { useMutationObserver } from './useMutationObserver';
+const MUTATION_OBSERVER_OPTIONS = {
+  subtree: true,
+  childList: true
+};
 export const useSqueeze = _ref => {
   let {
     ref,
@@ -16,7 +21,9 @@ export const useSqueeze = _ref => {
     if (!ref.current) return;
     const root = ref.current;
     const width = Math.ceil(root.getBoundingClientRect().width);
-    const scrollWidth = Math.floor(root.scrollWidth);
+    const {
+      scrollWidth
+    } = root;
     let isCompactChanged = false;
     if (scrollWidth > width) {
       isCompactChanged = compact();
@@ -38,4 +45,9 @@ export const useSqueeze = _ref => {
     ref,
     onResize: check
   });
+  useMutationObserver({
+    ref,
+    onMutate: check,
+    options: MUTATION_OBSERVER_OPTIONS
+  });
 };

package/esm/index.js

@@ -1,6 +1,6 @@
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 import svg4everybody from 'svg4everybody';
-const version = "3.40.4";
+const version = "3.40.6";
 export * from './publicPath';
 export { version };
 export * from './utils';

package/index.js

@@ -1,5 +1,5 @@
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-'use strict';
-
-module.exports = require('./cjs/index.js');
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+'use strict';
+
+module.exports = require('./cjs/index.js');

package/package.json

@@ -1,150 +1,150 @@
-{
-  "name": "@plesk/ui-library",
-  "version": "3.40.4",
-  "description": "Plesk UI Library",
-  "main": "index.js",
-  "module": "esm/index.js",
-  "types": "./types/src",
-  "sideEffects": [
-    "cjs/index.js",
-    "esm/index.js",
-    "dist/*.js",
-    "dist/*.css"
-  ],
-  "scripts": {
-    "pretest": "yarn lint",
-    "test": "jest --ci --coverage --coverageReporters text-summary",
-    "test:vr": "cross-env VISUAL_REGRESSION=true jest",
-    "build": "yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs",
-    "build:umd": "webpack --config ./configs/build.config.js",
-    "build:esm": "cross-env NODE_ENV=esm node ./scripts/build.js",
-    "build:cjs": "cross-env NODE_ENV=cjs node ./scripts/build.js",
-    "build:types": "rimraf ./types && tsc --project ./configs/types-generator.config.json",
-    "create-svg-sprite": "node ./scripts/create-svg-sprite.js",
-    "lint": "yarn lint:es && yarn lint:types && yarn lint:style && yarn format:check",
-    "lint:es": "eslint --ext js,md,tsx src configs scripts styleguidist",
-    "lint:types": "tsc",
-    "lint:style": "stylelint \"{src,styleguidist}/**/*.less\"",
-    "format:check": "prettier --check src",
-    "format": "prettier --write src",
-    "styleguide": "styleguidist server --config ./configs/styleguide.config.js",
-    "styleguide:build": "styleguidist build --config ./configs/styleguide.config.js",
-    "prepublishOnly": "yarn install && yarn test && yarn build && yarn styleguide:build",
-    "storybook": "webpack serve --config ./configs/storybook.config.js --allowed-hosts all",
-    "postinstall": "node ./scripts/postinstall.js"
-  },
-  "files": [
-    "esm",
-    "cjs",
-    "dist",
-    "styleguide",
-    "types",
-    "/scripts/postinstall.js",
-    "/index.js"
-  ],
-  "dependencies": {
-    "@babel/runtime": "^7.24.7",
-    "@plesk/react-movable": "^2.7.1",
-    "classnames": "^2.5.1",
-    "codemirror": "5.58.2",
-    "marked": "4.2.12",
-    "memoize-one": "^5.2.1",
-    "popper.js": "1.16.1",
-    "prop-types": "^15.8.1",
-    "react-measure": "2.5.2",
-    "react-sortable-hoc": "0.6.8",
-    "react-transition-group": "^4.4.5",
-    "scroll-into-view-if-needed": "^2.2.31",
-    "svg4everybody": "2.1.9",
-    "use-focus-visible": "^1.0.2"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
-    "@babel/types": "^7.24.7",
-    "@csstools/postcss-logical-float-and-clear": "^1.0.1",
-    "@plesk/eslint-config": "^3.0.0",
-    "@plesk/stylelint-config": "^2.0.0",
-    "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^14.3.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/buble": "^0.20.5",
-    "@types/classnames": "2.3.1",
-    "@types/codemirror": "^5.60.15",
-    "@types/doctrine": "^0.0.5",
-    "@types/jest": "^29.5.12",
-    "@types/jest-image-snapshot": "^6.4.0",
-    "@types/marked": "^4.3.2",
-    "@types/node": "^16.18.98",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-measure": "2.0.9",
-    "@types/react-transition-group": "^4.4.10",
-    "@types/svg4everybody": "2.1.2",
-    "@types/webpack-env": "^1.18.5",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "autoprefixer": "^10.4.19",
-    "babel-loader": "^8.3.0",
-    "babel-plugin-transform-require-ignore": "^0.1.1",
-    "clean-webpack-plugin": "^4.0.0",
-    "cross-env": "^7.0.3",
-    "css-loader": "^6.11.0",
-    "css-minimizer-webpack-plugin": "^5.0.1",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-markdown": "^3.0.1",
-    "html-webpack-plugin": "^5.6.0",
-    "jest": "^29.7.0",
-    "jest-dev-server": "^9.0.2",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-image-snapshot": "^6.4.0",
-    "less": "^4.2.0",
-    "less-loader": "^11.1.4",
-    "mini-css-extract-plugin": "^2.9.0",
-    "postcss": "^8.4.38",
-    "postcss-less": "^6.0.0",
-    "postcss-loader": "^7.3.4",
-    "postcss-logical": "^6.2.0",
-    "prettier": "^2.8.8",
-    "puppeteer-core": "21.7.0",
-    "react": "^18.3.1",
-    "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^18.3.1",
-    "react-styleguidist": "^13.1.2",
-    "rimraf": "^5.0.7",
-    "rtlcss": "^4.1.1",
-    "style-loader": "^3.3.4",
-    "stylelint": "^15.11.0",
-    "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
-    "stylelint-no-unsupported-browser-features": "^6.1.0",
-    "stylelint-prettier": "^3.0.0",
-    "stylelint-use-logical-spec": "^5.0.1",
-    "svg-mixer": "^2.3.14",
-    "terser-webpack-plugin": "^5.3.10",
-    "typescript": "5.2.2",
-    "webpack": "^5.92.0",
-    "webpack-cli": "^5.1.4"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "resolutions": {
-    "trim": ">=0.0.3",
-    "postcss": "^8.4.23"
-  },
-  "browserslist": [
-    "defaults",
-    "not op_mini all",
-    "not kaios > 0"
-  ],
-  "author": "Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)",
-  "license": "Apache-2.0"
-}
+{
+  "name": "@plesk/ui-library",
+  "version": "3.40.6",
+  "description": "Plesk UI Library",
+  "main": "index.js",
+  "module": "esm/index.js",
+  "types": "./types/src",
+  "sideEffects": [
+    "cjs/index.js",
+    "esm/index.js",
+    "dist/*.js",
+    "dist/*.css"
+  ],
+  "scripts": {
+    "pretest": "yarn lint",
+    "test": "jest --ci --coverage --coverageReporters text-summary",
+    "test:vr": "cross-env VISUAL_REGRESSION=true jest",
+    "build": "yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs",
+    "build:umd": "webpack --config ./configs/build.config.js",
+    "build:esm": "cross-env NODE_ENV=esm node ./scripts/build.js",
+    "build:cjs": "cross-env NODE_ENV=cjs node ./scripts/build.js",
+    "build:types": "rimraf ./types && tsc --project ./configs/types-generator.config.json",
+    "create-svg-sprite": "node ./scripts/create-svg-sprite.js",
+    "lint": "yarn lint:es && yarn lint:types && yarn lint:style && yarn format:check",
+    "lint:es": "eslint --ext js,md,tsx src configs scripts styleguidist",
+    "lint:types": "tsc",
+    "lint:style": "stylelint \"{src,styleguidist}/**/*.less\"",
+    "format:check": "prettier --check src",
+    "format": "prettier --write src",
+    "styleguide": "styleguidist server --config ./configs/styleguide.config.js",
+    "styleguide:build": "styleguidist build --config ./configs/styleguide.config.js",
+    "prepublishOnly": "yarn install && yarn test && yarn build && yarn styleguide:build",
+    "storybook": "webpack serve --config ./configs/storybook.config.js --allowed-hosts all",
+    "postinstall": "node ./scripts/postinstall.js"
+  },
+  "files": [
+    "esm",
+    "cjs",
+    "dist",
+    "styleguide",
+    "types",
+    "/scripts/postinstall.js",
+    "/index.js"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.24.8",
+    "@plesk/react-movable": "^2.7.1",
+    "classnames": "^2.5.1",
+    "codemirror": "5.58.2",
+    "marked": "4.2.12",
+    "memoize-one": "^5.2.1",
+    "popper.js": "1.16.1",
+    "prop-types": "^15.8.1",
+    "react-measure": "2.5.2",
+    "react-sortable-hoc": "0.6.8",
+    "react-transition-group": "^4.4.5",
+    "scroll-into-view-if-needed": "^2.2.31",
+    "svg4everybody": "2.1.9",
+    "use-focus-visible": "^1.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.9",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@babel/types": "^7.24.9",
+    "@csstools/postcss-logical-float-and-clear": "^1.0.1",
+    "@plesk/eslint-config": "^3.0.0",
+    "@plesk/stylelint-config": "^2.0.0",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^14.3.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/buble": "^0.20.5",
+    "@types/classnames": "2.3.1",
+    "@types/codemirror": "^5.60.15",
+    "@types/doctrine": "^0.0.5",
+    "@types/jest": "^29.5.12",
+    "@types/jest-image-snapshot": "^6.4.0",
+    "@types/marked": "^4.3.2",
+    "@types/node": "^16.18.101",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-measure": "2.0.9",
+    "@types/react-transition-group": "^4.4.10",
+    "@types/svg4everybody": "2.1.2",
+    "@types/webpack-env": "^1.18.5",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "autoprefixer": "^10.4.19",
+    "babel-loader": "^8.3.0",
+    "babel-plugin-transform-require-ignore": "^0.1.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.11.0",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-markdown": "^3.0.1",
+    "html-webpack-plugin": "^5.6.0",
+    "jest": "^29.7.0",
+    "jest-dev-server": "^9.0.2",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-image-snapshot": "^6.4.0",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.4",
+    "mini-css-extract-plugin": "^2.9.0",
+    "postcss": "^8.4.39",
+    "postcss-less": "^6.0.0",
+    "postcss-loader": "^7.3.4",
+    "postcss-logical": "^6.2.0",
+    "prettier": "^2.8.8",
+    "puppeteer-core": "21.7.0",
+    "react": "^18.3.1",
+    "react-docgen-typescript": "^2.2.2",
+    "react-dom": "^18.3.1",
+    "react-styleguidist": "^13.1.3",
+    "rimraf": "^5.0.9",
+    "rtlcss": "^4.1.1",
+    "style-loader": "^3.3.4",
+    "stylelint": "^15.11.0",
+    "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
+    "stylelint-no-unsupported-browser-features": "^6.1.0",
+    "stylelint-prettier": "^3.0.0",
+    "stylelint-use-logical-spec": "^5.0.1",
+    "svg-mixer": "^2.3.14",
+    "terser-webpack-plugin": "^5.3.10",
+    "typescript": "5.2.2",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "resolutions": {
+    "trim": ">=0.0.3",
+    "postcss": "^8.4.23"
+  },
+  "browserslist": [
+    "defaults",
+    "not op_mini all",
+    "not kaios > 0"
+  ],
+  "author": "Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)",
+  "license": "Apache-2.0"
+}

package/scripts/postinstall.js

@@ -1,9 +1,9 @@
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const fs = require('fs');
-const { resolve } = require('path');
-
-const patch = resolve(__dirname, 'patch-react-styleguidist.js');
-if (fs.existsSync(patch)) {
-    require(patch);
-}
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+const fs = require('fs');
+const { resolve } = require('path');
+
+const patch = resolve(__dirname, 'patch-react-styleguidist.js');
+if (fs.existsSync(patch)) {
+    require(patch);
+}

package/styleguide/browserconfig.xml

@@ -1,9 +1,9 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>