@plesk/ui-library 3.40.3 → 3.40.5

package/esm/components/Badge/Badge.js

@@ -45,7 +45,9 @@ const Badge = _ref => {
   return /*#__PURE__*/_jsxs("div", {
     className: classNames(baseClassName, className),
     ...props,
-    children: [children, label]
+    children: [/*#__PURE__*/_jsx("div", {
+      children: children
+    }), label]
   });
 };
 export default Badge;

package/esm/components/ItemList/ItemList.js

@@ -135,6 +135,7 @@ class ItemList extends Component {
     let {
       baseClassName,
       children,
+      onSelect,
       ...props
     } = _ref3;
     return /*#__PURE__*/_jsx(Grid, {

package/esm/components/LocaleProvider/LocaleProvider.js

@@ -56,7 +56,7 @@ function (key) {
   }
   return applyParams(message, params);
 };
-const LocaleContext = /*#__PURE__*/createContext(undefined);
+export const LocaleContext = /*#__PURE__*/createContext(undefined);
 export const useTranslate = namespace => {
   const context = useContext(LocaleContext);
   return useCallback((key, params, fallback) => {

package/esm/components/SwitchesPanelItem/SwitchesPanelItem.js

@@ -1,7 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import { Component } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Switch from '../Switch';
@@ -13,81 +11,54 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Used in [SwitchesPanel](#!/SwitchesPanel).
  * @since 0.3.0
  */
-class SwitchesPanelItem extends Component {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "state", {
-      checked: this.props.defaultChecked
-    });
-    _defineProperty(this, "handleChange", checked => {
-      this.setState({
-        checked
-      });
-      this.props.onChange(checked);
-    });
-  }
-  render() {
-    const {
-      onChange,
-      defaultChecked,
-      intent,
-      title,
-      description,
-      fullDescription,
-      baseClassName,
-      className,
-      switchProps,
-      children,
-      ...props
-    } = this.props;
-    const {
-      checked
-    } = this.state;
-    return /*#__PURE__*/_jsxs("div", {
-      className: classNames(baseClassName, {
-        [`${baseClassName}--${intent}`]: intent && checked
-      }, className),
-      ...props,
-      children: [/*#__PURE__*/_jsx("h5", {
-        className: `${baseClassName}__title`,
-        children: title
-      }), description && /*#__PURE__*/_jsx("p", {
-        className: `${baseClassName}__description`,
-        children: description
-      }), /*#__PURE__*/_jsxs("div", {
-        className: `${baseClassName}__actions`,
-        children: [/*#__PURE__*/_jsx(Switch, {
-          className: `${baseClassName}__switch`,
-          intent: intent,
-          onChange: this.handleChange,
-          defaultChecked: defaultChecked,
-          ...switchProps
-        }), (fullDescription || children) && /*#__PURE__*/_jsxs("div", {
-          className: `${baseClassName}__controls`,
-          children: [children, fullDescription && /*#__PURE__*/_jsx(Popover, {
-            intent: "info",
-            target: /*#__PURE__*/_jsx(Action, {
-              icon: "question-mark-circle",
-              outerProps: {
-                className: `${baseClassName}__full-description-toggle`
-              }
-            }),
-            placement: "bottom",
-            children: fullDescription
-          })]
+const SwitchesPanelItem = _ref => {
+  let {
+    onChange,
+    defaultChecked = false,
+    intent,
+    title,
+    description,
+    fullDescription,
+    className,
+    switchProps = {},
+    children,
+    baseClassName = `${CLS_PREFIX}switches-panel-item`,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(baseClassName, {
+      [`${baseClassName}--${intent}`]: intent
+    }, className),
+    ...props,
+    children: [/*#__PURE__*/_jsx("h5", {
+      className: `${baseClassName}__title`,
+      children: title
+    }), description && /*#__PURE__*/_jsx("p", {
+      className: `${baseClassName}__description`,
+      children: description
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}__actions`,
+      children: [/*#__PURE__*/_jsx(Switch, {
+        className: `${baseClassName}__switch`,
+        intent: intent,
+        onChange: onChange,
+        defaultChecked: defaultChecked,
+        ...switchProps
+      }), (fullDescription || children) && /*#__PURE__*/_jsxs("div", {
+        className: `${baseClassName}__controls`,
+        children: [children, fullDescription && /*#__PURE__*/_jsx(Popover, {
+          intent: "info",
+          target: /*#__PURE__*/_jsx(Action, {
+            icon: "question-mark-circle",
+            outerProps: {
+              className: `${baseClassName}__full-description-toggle`
+            }
+          }),
+          placement: "bottom",
+          children: fullDescription
         })]
       })]
-    });
-  }
-}
-_defineProperty(SwitchesPanelItem, "defaultProps", {
-  defaultChecked: false,
-  intent: null,
-  description: null,
-  fullDescription: null,
-  switchProps: {},
-  children: null,
-  className: null,
-  baseClassName: `${CLS_PREFIX}switches-panel-item`
-});
+    })]
+  });
+};
 export default SwitchesPanelItem;

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,
@@ -38,4 +43,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.3";
+const version = "3.40.5";
 export * from './publicPath';
 export { version };
 export * from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.40.3",
+  "version": "3.40.5",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",
@@ -43,7 +43,7 @@
     "/index.js"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
+    "@babel/runtime": "^7.24.7",
     "@plesk/react-movable": "^2.7.1",
     "classnames": "^2.5.1",
     "codemirror": "5.58.2",
@@ -59,19 +59,19 @@
     "use-focus-visible": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.6",
+    "@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.6",
-    "@babel/preset-env": "^7.24.6",
-    "@babel/preset-react": "^7.24.6",
-    "@babel/preset-typescript": "^7.24.6",
-    "@babel/types": "^7.24.6",
+    "@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.5",
+    "@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",
@@ -81,7 +81,7 @@
     "@types/jest": "^29.5.12",
     "@types/jest-image-snapshot": "^6.4.0",
     "@types/marked": "^4.3.2",
-    "@types/node": "^16.18.97",
+    "@types/node": "^16.18.98",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-measure": "2.0.9",
@@ -129,7 +129,7 @@
     "svg-mixer": "^2.3.14",
     "terser-webpack-plugin": "^5.3.10",
     "typescript": "5.2.2",
-    "webpack": "^5.91.0",
+    "webpack": "^5.92.0",
     "webpack-cli": "^5.1.4"
   },
   "peerDependencies": {