@plesk/ui-library 3.39.0 → 3.40.1

package/esm/components/Toolbar/RegistryContextBeta.js

@@ -0,0 +1,103 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import { createContext, useContext, useState, useLayoutEffect } from 'react';
+const RegistryContext = /*#__PURE__*/createContext(undefined);
+RegistryContext.displayName = 'RegistryContext';
+const useRegistryContext = () => useContext(RegistryContext);
+export default RegistryContext;
+class Registry {
+  constructor() {
+    _defineProperty(this, "items", []);
+  }
+  register(item) {
+    this.items.push(item);
+  }
+  unregister(item) {
+    this.items = this.items.filter(i => i !== item);
+  }
+  compact() {
+    let changed = false;
+    for (const item of [...this.items].reverse()) {
+      if (!item.isCompact) {
+        item.compact();
+        changed = true;
+        break;
+      }
+    }
+    return changed;
+  }
+  expand() {
+    let changed = false;
+    for (const item of this.items) {
+      if (this.checkItemIsCompactOrHasCompactItems(item)) {
+        item.expand();
+        changed = true;
+        break;
+      }
+    }
+    return changed;
+  }
+  get isCompact() {
+    return this.items.every(_ref => {
+      let {
+        isCompact
+      } = _ref;
+      return isCompact;
+    });
+  }
+  get hasCompactItems() {
+    return this.items.some(this.checkItemIsCompactOrHasCompactItems);
+  }
+  checkItemIsCompactOrHasCompactItems(item) {
+    return item.isCompact || 'hasCompactItems' in item && item.hasCompactItems;
+  }
+}
+class RegistryItem {
+  constructor(_ref2) {
+    let {
+      onCompactStateChange
+    } = _ref2;
+    _defineProperty(this, "_isCompact", false);
+    _defineProperty(this, "onCompactStateChange", void 0);
+    this.onCompactStateChange = onCompactStateChange;
+  }
+  compact() {
+    this._isCompact = true;
+    this.onCompactStateChange(true);
+  }
+  expand() {
+    this._isCompact = false;
+    this.onCompactStateChange(false);
+  }
+  get isCompact() {
+    return this._isCompact;
+  }
+}
+export const useRegistry = () => {
+  const parentRegistry = useRegistryContext();
+  const [registry] = useState(() => new Registry());
+  useLayoutEffect(() => {
+    if (!parentRegistry) return undefined;
+    parentRegistry.register(registry);
+    return () => {
+      parentRegistry.unregister(registry);
+    };
+  }, [parentRegistry, registry]);
+  return registry;
+};
+export const useRegistryItem = () => {
+  const registry = useRegistryContext();
+  const [isCompact, setIsCompact] = useState(false);
+  const [registryItem] = useState(() => new RegistryItem({
+    onCompactStateChange: setIsCompact
+  }));
+  useLayoutEffect(() => {
+    if (!registry) return undefined;
+    registry.register(registryItem);
+    return () => {
+      registry.unregister(registryItem);
+    };
+  }, [registry, registryItem]);
+  return [isCompact];
+};

package/esm/components/Toolbar/Toolbar.js

@@ -1,13 +1,16 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import { Component } from 'react';
+import { Component, useRef, useState, useMemo } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import RegistryContext, { createRegistry } from './RegistryContext';
+import RegistryContextBeta, { useRegistry } from './RegistryContextBeta';
 import DistractionFreeModeContext from '../DistractionFreeModeContext';
 import { toToolbarItems } from './ToolbarItem';
 import Squeezer from '../Squeezer';
+import { useSqueeze } from '../../hooks';
+import { useToolbarBetaContext } from './ToolbarBetaProvider';
 
 /**
  * `Toolbar` component is a panel containing various instruments used for managing the contents of a large content block.
@@ -17,7 +20,7 @@ import Squeezer from '../Squeezer';
  * @since 0.0.57
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-class Toolbar extends Component {
+class ToolbarClassComponent extends Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "state", {
@@ -74,9 +77,50 @@ class Toolbar extends Component {
     });
   }
 }
-_defineProperty(Toolbar, "defaultProps", {
+_defineProperty(ToolbarClassComponent, "defaultProps", {
   children: null,
   className: null,
   baseClassName: `${CLS_PREFIX}toolbar`
 });
+const ToolbarBeta = _ref2 => {
+  let {
+    children,
+    className,
+    baseClassName = `${CLS_PREFIX}toolbar`,
+    ...props
+  } = _ref2;
+  const containerRef = useRef(null);
+  const [isDistractionFreeModeEnabled, setIsDistractionFreeModeEnabled] = useState(false);
+  const distractionFreeModeContextValue = useMemo(() => ({
+    enabled: isDistractionFreeModeEnabled,
+    toggle: () => setIsDistractionFreeModeEnabled(current => !current)
+  }), [isDistractionFreeModeEnabled]);
+  const registry = useRegistry();
+  useSqueeze({
+    ref: containerRef,
+    compact: () => registry.compact(),
+    expand: () => registry.expand()
+  });
+  const toolbarItems = toToolbarItems(children, true);
+  return /*#__PURE__*/_jsx("div", {
+    ref: containerRef,
+    className: classNames(baseClassName, className),
+    ...props,
+    children: /*#__PURE__*/_jsx(RegistryContextBeta.Provider, {
+      value: registry,
+      children: /*#__PURE__*/_jsx(DistractionFreeModeContext.Provider, {
+        value: distractionFreeModeContextValue,
+        children: toolbarItems
+      })
+    })
+  });
+};
+const Toolbar = props => {
+  const isToolbarBeta = useToolbarBetaContext();
+  return isToolbarBeta ? /*#__PURE__*/_jsx(ToolbarBeta, {
+    ...props
+  }) : /*#__PURE__*/_jsx(ToolbarClassComponent, {
+    ...props
+  });
+};
 export default Toolbar;

package/esm/components/Toolbar/ToolbarBetaProvider.js

@@ -0,0 +1,16 @@
+// Copyright 1999-2024. Plesk International GmbH. All rights reserved.
+
+import { createContext, useContext } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ToolbarBetaContext = /*#__PURE__*/createContext(false);
+export const useToolbarBetaContext = () => useContext(ToolbarBetaContext);
+const ToolbarBetaProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(ToolbarBetaContext.Provider, {
+    value: true,
+    children: children
+  });
+};
+export default ToolbarBetaProvider;

package/esm/components/Toolbar/ToolbarGroup.js

@@ -1,15 +1,17 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import { Component, Children, useContext, isValidElement } from 'react';
+import { Component, Children, useContext, isValidElement, useState } from 'react';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Dropdown from '../Dropdown';
 import ToolbarMenu from './ToolbarMenu';
 import RegistryContext, { createRegistry } from './RegistryContext';
+import RegistryContextBeta, { useRegistry, useRegistryItem } from './RegistryContextBeta';
 import DistractionFreeModeContext from '../DistractionFreeModeContext';
 import { toToolbarItems } from './ToolbarItem';
 import ToolbarExpander from './ToolbarExpander';
+import { useToolbarBetaContext } from './ToolbarBetaProvider';
 
 /**
  * `ToolbarGroup` is a part of [Toolbar](#!/Toolbar) component.
@@ -17,7 +19,7 @@ import ToolbarExpander from './ToolbarExpander';
  * @since 0.0.57
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-class ToolbarGroup extends Component {
+class ToolbarGroupClassComponent extends Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "state", {
@@ -137,7 +139,7 @@ class ToolbarGroup extends Component {
     });
   }
 }
-_defineProperty(ToolbarGroup, "defaultProps", {
+_defineProperty(ToolbarGroupClassComponent, "defaultProps", {
   registry: undefined,
   distractionFreeMode: undefined
 });
@@ -149,7 +151,7 @@ const ToolbarGroupWrapper = _ref => {
   } = _ref;
   const registry = useContext(RegistryContext);
   const distractionFreeMode = useContext(DistractionFreeModeContext);
-  return /*#__PURE__*/_jsx(ToolbarGroup, {
+  return /*#__PURE__*/_jsx(ToolbarGroupClassComponent, {
     groupable: groupable,
     baseClassName: baseClassName,
     ...props,
@@ -158,4 +160,64 @@ const ToolbarGroupWrapper = _ref => {
   });
 };
 ToolbarGroupWrapper.displayName = 'ToolbarGroup';
-export default ToolbarGroupWrapper;
+const ToolbarGroupBeta = _ref2 => {
+  let {
+    baseClassName = `${CLS_PREFIX}toolbar__group`,
+    className,
+    title,
+    children,
+    groupable = true,
+    ...props
+  } = _ref2;
+  const [compact] = useRegistryItem();
+  const registry = useRegistry();
+  const [availableInDistractionFreeMode, setAvailableInDistractionFreeMode] = useState(false);
+  const distractionFreeMode = useContext(DistractionFreeModeContext);
+  const distractionFreeModeContextValue = {
+    enabled: distractionFreeMode?.enabled ?? false,
+    toggle: () => {
+      if (distractionFreeMode) {
+        distractionFreeMode.toggle();
+        setAvailableInDistractionFreeMode(current => !current);
+      }
+    }
+  };
+  let hasExpander = Children.toArray(children).some(child => /*#__PURE__*/isValidElement(child) && child.type === ToolbarExpander);
+  if (groupable && compact && Children.count(children) > 1) {
+    hasExpander = false;
+    children = /*#__PURE__*/_jsx(Dropdown, {
+      menu: /*#__PURE__*/_jsx(ToolbarMenu, {
+        onItemClick: () => {},
+        children: children
+      }),
+      children: title
+    });
+  } else {
+    children = /*#__PURE__*/_jsx(RegistryContextBeta.Provider, {
+      value: registry,
+      children: /*#__PURE__*/_jsx(DistractionFreeModeContext.Provider, {
+        value: distractionFreeModeContextValue,
+        children: toToolbarItems(children, true)
+      })
+    });
+  }
+  if (distractionFreeModeContextValue.enabled && !availableInDistractionFreeMode) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(baseClassName, className, {
+      [`${baseClassName}--grow`]: hasExpander || distractionFreeModeContextValue.enabled && availableInDistractionFreeMode
+    }),
+    ...props,
+    children: children
+  });
+};
+const ToolbarGroup = props => {
+  const isToolbarBeta = useToolbarBetaContext();
+  return isToolbarBeta ? /*#__PURE__*/_jsx(ToolbarGroupBeta, {
+    ...props
+  }) : /*#__PURE__*/_jsx(ToolbarGroupWrapper, {
+    ...props
+  });
+};
+export default ToolbarGroup;

package/esm/components/Toolbar/ToolbarItem.js

@@ -8,6 +8,7 @@ import ResponsiveContext from '../ResponsiveContext';
 import RegistryContext from './RegistryContext';
 import ToolbarGroup from './ToolbarGroup';
 import ToolbarExpander from './ToolbarExpander';
+import { useRegistryItem } from './RegistryContextBeta';
 import { jsx as _jsx } from "react/jsx-runtime";
 class ToolbarItem extends Component {
   constructor() {
@@ -47,16 +48,30 @@ class ToolbarItem extends Component {
   }
 }
 ToolbarItem.contextType = RegistryContext;
-export const toToolbarItems = children => Children.map(children, child => {
-  if (! /*#__PURE__*/isValidElement(child)) {
-    return child;
-  }
-  if (child.type === ToolbarGroup || child.type === ToolbarExpander) {
-    return child;
-  }
-  return /*#__PURE__*/_jsx(ToolbarItem, {
-    children: /*#__PURE__*/cloneElement(child, {
-      className: classNames(child.props.className, `${CLS_PREFIX}toolbar__group-item`)
-    })
+const ToolbarItemBeta = _ref => {
+  let {
+    children
+  } = _ref;
+  const [isCompact] = useRegistryItem();
+  return /*#__PURE__*/_jsx(ResponsiveContext.Provider, {
+    value: isCompact,
+    children: children
+  });
+};
+export const toToolbarItems = function (children) {
+  let isBeta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return Children.map(children, child => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      return child;
+    }
+    if (child.type === ToolbarGroup || child.type === ToolbarExpander) {
+      return child;
+    }
+    const Component = isBeta ? ToolbarItemBeta : ToolbarItem;
+    return /*#__PURE__*/_jsx(Component, {
+      children: /*#__PURE__*/cloneElement(child, {
+        className: classNames(child.props.className, `${CLS_PREFIX}toolbar__group-item`)
+      })
+    });
   });
-});
+};

package/esm/components/Toolbar/ToolbarMenu.js

@@ -8,6 +8,7 @@ import Button from '../Button';
 import Dropdown from '../Dropdown';
 import { ListOperation } from '../List';
 import { wrapFunction } from '../utils';
+import { BUTTON_PROP_NAMES } from '../Button/Button';
 import { jsx as _jsx } from "react/jsx-runtime";
 const toMenuItem = (child, isLast, onItemClick) => {
   switch (child.type) {
@@ -24,7 +25,7 @@ const toMenuItem = (child, isLast, onItemClick) => {
         } = child.props);
         props.onClick = wrapFunction(props.onClick, onItemClick);
         Object.keys(other).forEach(k => {
-          if (!(Button.defaultProps && k in Button.defaultProps)) {
+          if (!BUTTON_PROP_NAMES.includes(k)) {
             props[k] = other[k];
           }
         });

package/esm/components/Toolbar/index.js

@@ -2,4 +2,5 @@
 
 export { default } from './Toolbar';
 export { default as ToolbarGroup } from './ToolbarGroup';
-export { default as ToolbarExpander } from './ToolbarExpander';
+export { default as ToolbarExpander } from './ToolbarExpander';
+export { default as ToolbarBetaProvider } from './ToolbarBetaProvider';

package/esm/components/index.js

@@ -69,7 +69,7 @@ export { default as Progress } from './Progress';
 export { default as ProgressBar } from './ProgressBar';
 export { default as ProgressDialog } from './ProgressDialog';
 export { default as ProgressDialogStep } from './ProgressDialogStep';
-export { default as ProgressStep } from './ProgressStep';
+export { default as ProgressStep, PROGRESS_STEP_DEFAULT_STATUS } from './ProgressStep';
 export { default as Rating } from './Rating';
 export { default as Section } from './Section';
 export * from './Section';
@@ -86,7 +86,7 @@ export { default as SwitchesPanelItem } from './SwitchesPanelItem';
 export { default as Tabs, Tab, SearchBar } from './Tabs';
 export { default as Text } from './Text';
 export { default as Toaster } from './Toaster';
-export { default as Toolbar, ToolbarGroup, ToolbarExpander } from './Toolbar';
+export { default as Toolbar, ToolbarGroup, ToolbarExpander, ToolbarBetaProvider } from './Toolbar';
 export { default as Tooltip } from './Tooltip';
 export { default as Tour } from './Tour';
 export { default as Translate } from './Translate';

package/esm/hooks/index.js

@@ -0,0 +1,3 @@
+// Copyright 1999-2024. Plesk International GmbH. All rights reserved.
+
+export { useSqueeze } from './useSqueeze';

package/esm/hooks/useResizeObserver.js

@@ -0,0 +1,22 @@
+// Copyright 1999-2024. Plesk International GmbH. All rights reserved.
+
+import { useEffect, useRef } from 'react';
+export const useResizeObserver = _ref => {
+  let {
+    ref,
+    onResize
+  } = _ref;
+  const onResizeRef = useRef(undefined);
+  onResizeRef.current = onResize;
+  useEffect(() => {
+    if (!ref.current) return undefined;
+    if (typeof window === 'undefined' || !('ResizeObserver' in window)) return undefined;
+    const observer = new ResizeObserver(() => {
+      onResizeRef.current?.();
+    });
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+};

package/esm/hooks/useSqueeze.js

@@ -0,0 +1,41 @@
+// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
+
+import { useRef, useLayoutEffect, useState } from 'react';
+import { useResizeObserver } from './useResizeObserver';
+export const useSqueeze = _ref => {
+  let {
+    ref,
+    compact,
+    expand
+  } = _ref;
+  const minWidth = useRef(0);
+  const lastAction = useRef(null);
+  const [recheck, setRecheck] = useState(false);
+  const checkRef = useRef();
+  const check = () => {
+    if (!ref.current) return;
+    const root = ref.current;
+    const width = Math.ceil(root.getBoundingClientRect().width);
+    const scrollWidth = Math.floor(root.scrollWidth);
+    let isCompactChanged = false;
+    if (scrollWidth > width) {
+      isCompactChanged = compact();
+      minWidth.current = scrollWidth;
+      lastAction.current = 'compact';
+    } else if (minWidth.current && width > minWidth.current || lastAction.current === 'expand') {
+      isCompactChanged = expand();
+      lastAction.current = 'expand';
+    }
+    if (isCompactChanged) {
+      setRecheck(c => !c);
+    }
+  };
+  checkRef.current = check;
+  useLayoutEffect(() => {
+    checkRef.current?.();
+  }, [recheck]);
+  useResizeObserver({
+    ref,
+    onResize: check
+  });
+};

package/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plesk/ui-library",
-  "version": "3.39.0",
+  "version": "3.40.1",
   "description": "Plesk UI Library",
   "main": "index.js",
   "module": "esm/index.js",
@@ -43,7 +43,7 @@
     "/index.js"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.24.4",
+    "@babel/runtime": "^7.24.5",
     "@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.4",
+    "@babel/core": "^7.24.5",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
-    "@babel/types": "^7.24.0",
+    "@babel/types": "^7.24.5",
     "@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.2",
+    "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/buble": "^0.20.5",
@@ -82,8 +82,8 @@
     "@types/jest-image-snapshot": "^6.4.0",
     "@types/marked": "^4.3.2",
     "@types/node": "^16.18.96",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-measure": "2.0.9",
     "@types/react-transition-group": "^4.4.10",
     "@types/svg4everybody": "2.1.2",
@@ -114,9 +114,9 @@
     "postcss-logical": "^6.2.0",
     "prettier": "^2.8.8",
     "puppeteer-core": "21.7.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-styleguidist": "^13.1.2",
     "rimraf": "^5.0.5",
     "rtlcss": "^4.1.1",