@plesk/ui-library 3.38.2 → 3.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/cjs/components/Button/Button.js +4 -22
  2. package/cjs/components/Card/CardButton.js +2 -3
  3. package/cjs/components/CardList/CardListToolbar.js +3 -8
  4. package/cjs/components/Dialog/Dialog.js +5 -27
  5. package/cjs/components/Drawer/Drawer.js +7 -20
  6. package/cjs/components/Dropdown/Dropdown.js +3 -11
  7. package/cjs/components/FormField/FormField.js +13 -26
  8. package/cjs/components/Icon/constants.js +2 -2
  9. package/cjs/components/Icon/images/symbols.svg +9 -1
  10. package/cjs/components/List/List.js +1 -14
  11. package/cjs/components/Progress/Progress.js +6 -5
  12. package/cjs/components/ProgressStep/ProgressStep.js +5 -14
  13. package/cjs/components/ProgressStep/index.js +6 -0
  14. package/cjs/components/Section/Section.js +11 -19
  15. package/cjs/components/SplitButton/SplitButton.js +2 -3
  16. package/cjs/components/TextArea/TextArea.js +49 -97
  17. package/cjs/components/TextArea/calculateNodeHeight.js +8 -8
  18. package/cjs/components/Toolbar/RegistryContextBeta.js +112 -0
  19. package/cjs/components/Toolbar/Toolbar.js +46 -2
  20. package/cjs/components/Toolbar/ToolbarBetaProvider.js +23 -0
  21. package/cjs/components/Toolbar/ToolbarGroup.js +66 -4
  22. package/cjs/components/Toolbar/ToolbarItem.js +27 -12
  23. package/cjs/components/Toolbar/ToolbarMenu.js +2 -1
  24. package/cjs/components/Toolbar/index.js +8 -1
  25. package/cjs/components/index.js +15 -1
  26. package/cjs/hooks/index.js +12 -0
  27. package/cjs/hooks/useResizeObserver.js +29 -0
  28. package/cjs/hooks/useSqueeze.js +48 -0
  29. package/cjs/index.js +1 -1
  30. package/dist/images/symbols.svg +9 -1
  31. package/dist/plesk-ui-library-rtl.css +1 -1
  32. package/dist/plesk-ui-library-rtl.css.map +1 -1
  33. package/dist/plesk-ui-library.css +1 -1
  34. package/dist/plesk-ui-library.css.map +1 -1
  35. package/dist/plesk-ui-library.js +591 -309
  36. package/dist/plesk-ui-library.js.map +1 -1
  37. package/dist/plesk-ui-library.min.js +5 -5
  38. package/dist/plesk-ui-library.min.js.map +1 -1
  39. package/esm/components/Button/Button.js +3 -21
  40. package/esm/components/Card/CardButton.js +2 -3
  41. package/esm/components/CardList/CardListToolbar.js +3 -8
  42. package/esm/components/Dialog/Dialog.js +5 -27
  43. package/esm/components/Drawer/Drawer.js +7 -20
  44. package/esm/components/Dropdown/Dropdown.js +3 -11
  45. package/esm/components/FormField/FormField.js +13 -26
  46. package/esm/components/Icon/constants.js +2 -2
  47. package/esm/components/Icon/images/symbols.svg +9 -1
  48. package/esm/components/List/List.js +1 -14
  49. package/esm/components/Progress/Progress.js +7 -6
  50. package/esm/components/ProgressStep/ProgressStep.js +4 -13
  51. package/esm/components/ProgressStep/index.js +1 -1
  52. package/esm/components/Section/Section.js +11 -19
  53. package/esm/components/SplitButton/SplitButton.js +2 -3
  54. package/esm/components/TextArea/TextArea.js +50 -98
  55. package/esm/components/TextArea/calculateNodeHeight.js +8 -8
  56. package/esm/components/Toolbar/RegistryContextBeta.js +103 -0
  57. package/esm/components/Toolbar/Toolbar.js +47 -3
  58. package/esm/components/Toolbar/ToolbarBetaProvider.js +16 -0
  59. package/esm/components/Toolbar/ToolbarGroup.js +67 -5
  60. package/esm/components/Toolbar/ToolbarItem.js +27 -12
  61. package/esm/components/Toolbar/ToolbarMenu.js +2 -1
  62. package/esm/components/Toolbar/index.js +2 -1
  63. package/esm/components/index.js +2 -2
  64. package/esm/hooks/index.js +3 -0
  65. package/esm/hooks/useResizeObserver.js +22 -0
  66. package/esm/hooks/useSqueeze.js +41 -0
  67. package/esm/index.js +1 -1
  68. package/package.json +13 -13
  69. package/styleguide/build/bundle.8f00c54c.js +2 -0
  70. package/styleguide/images/symbols.svg +9 -1
  71. package/styleguide/index.html +2 -2
  72. package/types/src/components/Button/Button.d.ts +1 -0
  73. package/types/src/components/Dialog/Dialog.d.ts +1 -25
  74. package/types/src/components/Drawer/Drawer.d.ts +1 -4
  75. package/types/src/components/FormField/FormField.d.ts +1 -23
  76. package/types/src/components/Icon/constants.d.ts +1 -1
  77. package/types/src/components/ProgressStep/ProgressStep.d.ts +2 -13
  78. package/types/src/components/ProgressStep/index.d.ts +1 -1
  79. package/types/src/components/Section/Section.d.ts +2 -32
  80. package/types/src/components/TextArea/TextArea.d.ts +5 -32
  81. package/types/src/components/TextArea/calculateNodeHeight.d.ts +2 -6
  82. package/types/src/components/Toolbar/RegistryContextBeta.d.ts +25 -0
  83. package/types/src/components/Toolbar/Toolbar.d.ts +2 -22
  84. package/types/src/components/Toolbar/ToolbarBetaProvider.d.ts +5 -0
  85. package/types/src/components/Toolbar/ToolbarGroup.d.ts +2 -5
  86. package/types/src/components/Toolbar/ToolbarItem.d.ts +1 -1
  87. package/types/src/components/Toolbar/index.d.ts +1 -0
  88. package/types/src/components/index.d.ts +2 -2
  89. package/types/src/hooks/index.d.ts +1 -0
  90. package/types/src/hooks/useResizeObserver.d.ts +7 -0
  91. package/types/src/hooks/useSqueeze.d.ts +10 -0
  92. package/styleguide/build/bundle.42040fbd.js +0 -2
  93. /package/styleguide/build/{bundle.42040fbd.js.LICENSE.txt → bundle.8f00c54c.js.LICENSE.txt} +0 -0
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = void 0;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
8
  var _classnames = _interopRequireDefault(require("classnames"));
10
9
  var _react = require("react");
11
10
  var _constants = require("../../constants");
@@ -24,109 +23,62 @@ const getMinMax = rows => {
24
23
  maxRows: rows.max
25
24
  };
26
25
  }
27
- return null;
26
+ return {};
28
27
  };
29
- const AVAILABLE_SIZES = ['sm', 'md', 'lg', 'xl', 'fill'];
28
+ const AVAILABLE_SIZES = new Set(['sm', 'md', 'lg', 'xl', 'fill']);
30
29
 
31
30
  /**
32
31
  * `TextArea` is used for entering long text (like email body, descriptions, comments).
33
32
  * @since 1.9.0
34
33
  */
35
-
36
- class TextArea extends _react.Component {
37
- constructor() {
38
- super(...arguments);
39
- (0, _defineProperty2.default)(this, "state", {
40
- textareaStyles: null
41
- });
42
- (0, _defineProperty2.default)(this, "rootRef", /*#__PURE__*/(0, _react.createRef)());
43
- (0, _defineProperty2.default)(this, "handleChange", e => {
44
- const {
45
- autoheight,
46
- onChange
47
- } = this.props;
48
- if (autoheight) {
49
- this.adjustHeight();
50
- }
51
- if (typeof onChange === 'function') {
52
- onChange(e);
53
- }
54
- });
55
- }
56
- static getDerivedStateFromProps(_ref) {
57
- let {
58
- rows
59
- } = _ref;
60
- if (rows) {
61
- return getMinMax(rows);
62
- }
63
- return null;
64
- }
65
- componentDidMount() {
66
- this.adjustHeight();
67
- }
68
- componentDidUpdate(prevProps) {
69
- const {
70
- autoheight
71
- } = this.props;
72
- if (autoheight !== prevProps.autoheight) {
73
- this.adjustHeight();
74
- }
75
- }
76
- adjustHeight() {
77
- const {
78
- autoheight
79
- } = this.props;
80
- if (!autoheight) {
81
- this.setState({
82
- textareaStyles: null
83
- });
34
+ const TextArea = _ref => {
35
+ let {
36
+ baseClassName = `${_constants.CLS_PREFIX}textarea`,
37
+ className,
38
+ rows = 4,
39
+ size = 'md',
40
+ autoheight = false,
41
+ onChange,
42
+ style,
43
+ ...props
44
+ } = _ref;
45
+ const rootRef = (0, _react.useRef)(null);
46
+ const useSizeModifier = size && AVAILABLE_SIZES.has(size);
47
+ const {
48
+ minRows,
49
+ maxRows
50
+ } = getMinMax(rows);
51
+ const [heightStyle, setHeightStyle] = (0, _react.useState)();
52
+ const adjustHeight = (0, _react.useCallback)(() => {
53
+ if (!autoheight || !rootRef.current) {
54
+ setHeightStyle(undefined);
84
55
  return;
85
56
  }
86
- const {
87
- minRows,
88
- maxRows
89
- } = this.state;
90
- if (this.rootRef.current) {
91
- const textareaStyles = (0, _calculateNodeHeight.default)(this.rootRef.current, false, minRows, maxRows);
92
- this.setState({
93
- textareaStyles
94
- });
57
+ setHeightStyle((0, _calculateNodeHeight.default)(rootRef.current, false, minRows, maxRows));
58
+ }, [autoheight, maxRows, minRows]);
59
+ (0, _react.useLayoutEffect)(() => {
60
+ adjustHeight();
61
+ }, [adjustHeight]);
62
+ const handleChange = e => {
63
+ if (autoheight) {
64
+ adjustHeight();
95
65
  }
96
- }
97
- render() {
98
- const {
99
- baseClassName,
100
- className,
101
- rows,
102
- size,
103
- autoheight,
104
- onChange,
105
- ...other
106
- } = this.props;
107
- const {
108
- textareaStyles,
109
- minRows
110
- } = this.state;
111
- const useSizeModifier = size && AVAILABLE_SIZES.indexOf(size) !== -1;
112
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
113
- className: (0, _classnames.default)(baseClassName, {
114
- [`${baseClassName}--size-${size}`]: useSizeModifier
115
- }, className),
116
- ref: this.rootRef,
117
- style: textareaStyles,
118
- onChange: this.handleChange,
119
- rows: minRows,
120
- ...other
121
- });
122
- }
123
- }
124
- (0, _defineProperty2.default)(TextArea, "defaultProps", {
125
- baseClassName: `${_constants.CLS_PREFIX}textarea`,
126
- className: null,
127
- rows: 4,
128
- size: 'md',
129
- autoheight: false,
130
- onChange: null
131
- });
66
+ if (typeof onChange === 'function') {
67
+ onChange(e);
68
+ }
69
+ };
70
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
71
+ ref: rootRef,
72
+ className: (0, _classnames.default)(baseClassName, {
73
+ [`${baseClassName}--size-${size}`]: useSizeModifier
74
+ }, className),
75
+ style: {
76
+ ...style,
77
+ ...heightStyle
78
+ },
79
+ onChange: handleChange,
80
+ rows: minRows,
81
+ ...props
82
+ });
83
+ };
132
84
  var _default = exports.default = TextArea;
@@ -47,8 +47,8 @@ const calculateNodeStyling = function (node) {
47
47
  // eslint-disable-next-line max-params
48
48
  function calculateNodeHeight(uiTextNode) {
49
49
  let useCache = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
50
- let minRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
51
- let maxRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
50
+ let minRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
51
+ let maxRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
52
52
  if (!hiddenTextarea) {
53
53
  hiddenTextarea = document.createElement('textarea');
54
54
  document.body.appendChild(hiddenTextarea);
@@ -70,8 +70,8 @@ function calculateNodeHeight(uiTextNode) {
70
70
  // Need to have the overflow attribute to hide the scrollbar otherwise text-lines will not calculated properly as the shadow will technically be narrower for content
71
71
  hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
72
72
  hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
73
- let minHeight = null;
74
- let maxHeight = null;
73
+ let minHeight = undefined;
74
+ let maxHeight = undefined;
75
75
  let height = hiddenTextarea.scrollHeight;
76
76
  let overflowY;
77
77
  if (boxSizing === 'border-box') {
@@ -81,23 +81,23 @@ function calculateNodeHeight(uiTextNode) {
81
81
  // remove padding, since height = content
82
82
  height = height - paddingSize;
83
83
  }
84
- if (minRows !== null || maxRows !== null) {
84
+ if (minRows !== undefined || maxRows !== undefined) {
85
85
  // measure height of a textarea with a single row
86
86
  hiddenTextarea.value = ' ';
87
87
  const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
88
- if (minRows !== null) {
88
+ if (minRows !== undefined) {
89
89
  minHeight = singleRowHeight * minRows;
90
90
  if (boxSizing === 'border-box') {
91
91
  minHeight = minHeight + paddingSize + borderSize;
92
92
  }
93
93
  height = Math.max(minHeight, height);
94
94
  }
95
- if (maxRows !== null) {
95
+ if (maxRows !== undefined) {
96
96
  maxHeight = singleRowHeight * maxRows;
97
97
  if (boxSizing === 'border-box') {
98
98
  maxHeight = maxHeight + paddingSize + borderSize;
99
99
  }
100
- overflowY = height > maxHeight ? '' : 'hidden';
100
+ overflowY = height > maxHeight ? undefined : 'hidden';
101
101
  height = Math.min(maxHeight, height);
102
102
  }
103
103
  }
@@ -0,0 +1,112 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.useRegistryItem = exports.useRegistry = exports.default = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
+ var _react = require("react");
10
+ // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
11
+
12
+ const RegistryContext = /*#__PURE__*/(0, _react.createContext)(undefined);
13
+ RegistryContext.displayName = 'RegistryContext';
14
+ const useRegistryContext = () => (0, _react.useContext)(RegistryContext);
15
+ var _default = exports.default = RegistryContext;
16
+ class Registry {
17
+ constructor() {
18
+ (0, _defineProperty2.default)(this, "items", []);
19
+ }
20
+ register(item) {
21
+ this.items.push(item);
22
+ }
23
+ unregister(item) {
24
+ this.items = this.items.filter(i => i !== item);
25
+ }
26
+ compact() {
27
+ let changed = false;
28
+ for (const item of [...this.items].reverse()) {
29
+ if (!item.isCompact) {
30
+ item.compact();
31
+ changed = true;
32
+ break;
33
+ }
34
+ }
35
+ return changed;
36
+ }
37
+ expand() {
38
+ let changed = false;
39
+ for (const item of this.items) {
40
+ if (this.checkItemIsCompactOrHasCompactItems(item)) {
41
+ item.expand();
42
+ changed = true;
43
+ break;
44
+ }
45
+ }
46
+ return changed;
47
+ }
48
+ get isCompact() {
49
+ return this.items.every(_ref => {
50
+ let {
51
+ isCompact
52
+ } = _ref;
53
+ return isCompact;
54
+ });
55
+ }
56
+ get hasCompactItems() {
57
+ return this.items.some(this.checkItemIsCompactOrHasCompactItems);
58
+ }
59
+ checkItemIsCompactOrHasCompactItems(item) {
60
+ return item.isCompact || 'hasCompactItems' in item && item.hasCompactItems;
61
+ }
62
+ }
63
+ class RegistryItem {
64
+ constructor(_ref2) {
65
+ let {
66
+ onCompactStateChange
67
+ } = _ref2;
68
+ (0, _defineProperty2.default)(this, "_isCompact", false);
69
+ (0, _defineProperty2.default)(this, "onCompactStateChange", void 0);
70
+ this.onCompactStateChange = onCompactStateChange;
71
+ }
72
+ compact() {
73
+ this._isCompact = true;
74
+ this.onCompactStateChange(true);
75
+ }
76
+ expand() {
77
+ this._isCompact = false;
78
+ this.onCompactStateChange(false);
79
+ }
80
+ get isCompact() {
81
+ return this._isCompact;
82
+ }
83
+ }
84
+ const useRegistry = () => {
85
+ const parentRegistry = useRegistryContext();
86
+ const [registry] = (0, _react.useState)(() => new Registry());
87
+ (0, _react.useLayoutEffect)(() => {
88
+ if (!parentRegistry) return undefined;
89
+ parentRegistry.register(registry);
90
+ return () => {
91
+ parentRegistry.unregister(registry);
92
+ };
93
+ }, [parentRegistry, registry]);
94
+ return registry;
95
+ };
96
+ exports.useRegistry = useRegistry;
97
+ const useRegistryItem = () => {
98
+ const registry = useRegistryContext();
99
+ const [isCompact, setIsCompact] = (0, _react.useState)(false);
100
+ const [registryItem] = (0, _react.useState)(() => new RegistryItem({
101
+ onCompactStateChange: setIsCompact
102
+ }));
103
+ (0, _react.useLayoutEffect)(() => {
104
+ if (!registry) return undefined;
105
+ registry.register(registryItem);
106
+ return () => {
107
+ registry.unregister(registryItem);
108
+ };
109
+ }, [registry, registryItem]);
110
+ return [isCompact];
111
+ };
112
+ exports.useRegistryItem = useRegistryItem;
@@ -10,9 +10,12 @@ var _react = require("react");
10
10
  var _classnames = _interopRequireDefault(require("classnames"));
11
11
  var _constants = require("../../constants");
12
12
  var _RegistryContext = _interopRequireWildcard(require("./RegistryContext"));
13
+ var _RegistryContextBeta = _interopRequireWildcard(require("./RegistryContextBeta"));
13
14
  var _DistractionFreeModeContext = _interopRequireDefault(require("../DistractionFreeModeContext"));
14
15
  var _ToolbarItem = require("./ToolbarItem");
15
16
  var _Squeezer = _interopRequireDefault(require("../Squeezer"));
17
+ var _hooks = require("../../hooks");
18
+ var _ToolbarBetaProvider = require("./ToolbarBetaProvider");
16
19
  var _jsxRuntime = require("react/jsx-runtime");
17
20
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
18
21
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -26,7 +29,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
26
29
  * @since 0.0.57
27
30
  */
28
31
 
29
- class Toolbar extends _react.Component {
32
+ class ToolbarClassComponent extends _react.Component {
30
33
  constructor(props) {
31
34
  super(props);
32
35
  (0, _defineProperty2.default)(this, "state", {
@@ -83,9 +86,50 @@ class Toolbar extends _react.Component {
83
86
  });
84
87
  }
85
88
  }
86
- (0, _defineProperty2.default)(Toolbar, "defaultProps", {
89
+ (0, _defineProperty2.default)(ToolbarClassComponent, "defaultProps", {
87
90
  children: null,
88
91
  className: null,
89
92
  baseClassName: `${_constants.CLS_PREFIX}toolbar`
90
93
  });
94
+ const ToolbarBeta = _ref2 => {
95
+ let {
96
+ children,
97
+ className,
98
+ baseClassName = `${_constants.CLS_PREFIX}toolbar`,
99
+ ...props
100
+ } = _ref2;
101
+ const containerRef = (0, _react.useRef)(null);
102
+ const [isDistractionFreeModeEnabled, setIsDistractionFreeModeEnabled] = (0, _react.useState)(false);
103
+ const distractionFreeModeContextValue = (0, _react.useMemo)(() => ({
104
+ enabled: isDistractionFreeModeEnabled,
105
+ toggle: () => setIsDistractionFreeModeEnabled(current => !current)
106
+ }), [isDistractionFreeModeEnabled]);
107
+ const registry = (0, _RegistryContextBeta.useRegistry)();
108
+ (0, _hooks.useSqueeze)({
109
+ ref: containerRef,
110
+ compact: () => registry.compact(),
111
+ expand: () => registry.expand()
112
+ });
113
+ const toolbarItems = (0, _ToolbarItem.toToolbarItems)(children, true);
114
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
115
+ ref: containerRef,
116
+ className: (0, _classnames.default)(baseClassName, className),
117
+ ...props,
118
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RegistryContextBeta.default.Provider, {
119
+ value: registry,
120
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DistractionFreeModeContext.default.Provider, {
121
+ value: distractionFreeModeContextValue,
122
+ children: toolbarItems
123
+ })
124
+ })
125
+ });
126
+ };
127
+ const Toolbar = props => {
128
+ const isToolbarBeta = (0, _ToolbarBetaProvider.useToolbarBetaContext)();
129
+ return isToolbarBeta ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarBeta, {
130
+ ...props
131
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarClassComponent, {
132
+ ...props
133
+ });
134
+ };
91
135
  var _default = exports.default = Toolbar;
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useToolbarBetaContext = exports.default = void 0;
7
+ var _react = require("react");
8
+ var _jsxRuntime = require("react/jsx-runtime");
9
+ // Copyright 1999-2024. Plesk International GmbH. All rights reserved.
10
+
11
+ const ToolbarBetaContext = /*#__PURE__*/(0, _react.createContext)(false);
12
+ const useToolbarBetaContext = () => (0, _react.useContext)(ToolbarBetaContext);
13
+ exports.useToolbarBetaContext = useToolbarBetaContext;
14
+ const ToolbarBetaProvider = _ref => {
15
+ let {
16
+ children
17
+ } = _ref;
18
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarBetaContext.Provider, {
19
+ value: true,
20
+ children: children
21
+ });
22
+ };
23
+ var _default = exports.default = ToolbarBetaProvider;
@@ -12,9 +12,11 @@ var _constants = require("../../constants");
12
12
  var _Dropdown = _interopRequireDefault(require("../Dropdown"));
13
13
  var _ToolbarMenu = _interopRequireDefault(require("./ToolbarMenu"));
14
14
  var _RegistryContext = _interopRequireWildcard(require("./RegistryContext"));
15
+ var _RegistryContextBeta = _interopRequireWildcard(require("./RegistryContextBeta"));
15
16
  var _DistractionFreeModeContext = _interopRequireDefault(require("../DistractionFreeModeContext"));
16
17
  var _ToolbarItem = require("./ToolbarItem");
17
18
  var _ToolbarExpander = _interopRequireDefault(require("./ToolbarExpander"));
19
+ var _ToolbarBetaProvider = require("./ToolbarBetaProvider");
18
20
  var _jsxRuntime = require("react/jsx-runtime");
19
21
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
20
22
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -26,7 +28,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
26
28
  * @since 0.0.57
27
29
  */
28
30
 
29
- class ToolbarGroup extends _react.Component {
31
+ class ToolbarGroupClassComponent extends _react.Component {
30
32
  constructor(props) {
31
33
  super(props);
32
34
  (0, _defineProperty2.default)(this, "state", {
@@ -146,7 +148,7 @@ class ToolbarGroup extends _react.Component {
146
148
  });
147
149
  }
148
150
  }
149
- (0, _defineProperty2.default)(ToolbarGroup, "defaultProps", {
151
+ (0, _defineProperty2.default)(ToolbarGroupClassComponent, "defaultProps", {
150
152
  registry: undefined,
151
153
  distractionFreeMode: undefined
152
154
  });
@@ -158,7 +160,7 @@ const ToolbarGroupWrapper = _ref => {
158
160
  } = _ref;
159
161
  const registry = (0, _react.useContext)(_RegistryContext.default);
160
162
  const distractionFreeMode = (0, _react.useContext)(_DistractionFreeModeContext.default);
161
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarGroup, {
163
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarGroupClassComponent, {
162
164
  groupable: groupable,
163
165
  baseClassName: baseClassName,
164
166
  ...props,
@@ -167,4 +169,64 @@ const ToolbarGroupWrapper = _ref => {
167
169
  });
168
170
  };
169
171
  ToolbarGroupWrapper.displayName = 'ToolbarGroup';
170
- var _default = exports.default = ToolbarGroupWrapper;
172
+ const ToolbarGroupBeta = _ref2 => {
173
+ let {
174
+ baseClassName = `${_constants.CLS_PREFIX}toolbar__group`,
175
+ className,
176
+ title,
177
+ children,
178
+ groupable = true,
179
+ ...props
180
+ } = _ref2;
181
+ const [compact] = (0, _RegistryContextBeta.useRegistryItem)();
182
+ const registry = (0, _RegistryContextBeta.useRegistry)();
183
+ const [availableInDistractionFreeMode, setAvailableInDistractionFreeMode] = (0, _react.useState)(false);
184
+ const distractionFreeMode = (0, _react.useContext)(_DistractionFreeModeContext.default);
185
+ const distractionFreeModeContextValue = {
186
+ enabled: distractionFreeMode?.enabled ?? false,
187
+ toggle: () => {
188
+ if (distractionFreeMode) {
189
+ distractionFreeMode.toggle();
190
+ setAvailableInDistractionFreeMode(current => !current);
191
+ }
192
+ }
193
+ };
194
+ let hasExpander = _react.Children.toArray(children).some(child => /*#__PURE__*/(0, _react.isValidElement)(child) && child.type === _ToolbarExpander.default);
195
+ if (groupable && compact && _react.Children.count(children) > 1) {
196
+ hasExpander = false;
197
+ children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
198
+ menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarMenu.default, {
199
+ onItemClick: () => {},
200
+ children: children
201
+ }),
202
+ children: title
203
+ });
204
+ } else {
205
+ children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RegistryContextBeta.default.Provider, {
206
+ value: registry,
207
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DistractionFreeModeContext.default.Provider, {
208
+ value: distractionFreeModeContextValue,
209
+ children: (0, _ToolbarItem.toToolbarItems)(children, true)
210
+ })
211
+ });
212
+ }
213
+ if (distractionFreeModeContextValue.enabled && !availableInDistractionFreeMode) {
214
+ return null;
215
+ }
216
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
217
+ className: (0, _classnames.default)(baseClassName, className, {
218
+ [`${baseClassName}--grow`]: hasExpander || distractionFreeModeContextValue.enabled && availableInDistractionFreeMode
219
+ }),
220
+ ...props,
221
+ children: children
222
+ });
223
+ };
224
+ const ToolbarGroup = props => {
225
+ const isToolbarBeta = (0, _ToolbarBetaProvider.useToolbarBetaContext)();
226
+ return isToolbarBeta ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarGroupBeta, {
227
+ ...props
228
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarGroupWrapper, {
229
+ ...props
230
+ });
231
+ };
232
+ var _default = exports.default = ToolbarGroup;
@@ -13,6 +13,7 @@ var _ResponsiveContext = _interopRequireDefault(require("../ResponsiveContext"))
13
13
  var _RegistryContext = _interopRequireDefault(require("./RegistryContext"));
14
14
  var _ToolbarGroup = _interopRequireDefault(require("./ToolbarGroup"));
15
15
  var _ToolbarExpander = _interopRequireDefault(require("./ToolbarExpander"));
16
+ var _RegistryContextBeta = require("./RegistryContextBeta");
16
17
  var _jsxRuntime = require("react/jsx-runtime");
17
18
  // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
18
19
 
@@ -54,17 +55,31 @@ class ToolbarItem extends _react.Component {
54
55
  }
55
56
  }
56
57
  ToolbarItem.contextType = _RegistryContext.default;
57
- const toToolbarItems = children => _react.Children.map(children, child => {
58
- if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
59
- return child;
60
- }
61
- if (child.type === _ToolbarGroup.default || child.type === _ToolbarExpander.default) {
62
- return child;
63
- }
64
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarItem, {
65
- children: /*#__PURE__*/(0, _react.cloneElement)(child, {
66
- className: (0, _classnames.default)(child.props.className, `${_constants.CLS_PREFIX}toolbar__group-item`)
67
- })
58
+ const ToolbarItemBeta = _ref => {
59
+ let {
60
+ children
61
+ } = _ref;
62
+ const [isCompact] = (0, _RegistryContextBeta.useRegistryItem)();
63
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveContext.default.Provider, {
64
+ value: isCompact,
65
+ children: children
68
66
  });
69
- });
67
+ };
68
+ const toToolbarItems = function (children) {
69
+ let isBeta = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
70
+ return _react.Children.map(children, child => {
71
+ if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
72
+ return child;
73
+ }
74
+ if (child.type === _ToolbarGroup.default || child.type === _ToolbarExpander.default) {
75
+ return child;
76
+ }
77
+ const Component = isBeta ? ToolbarItemBeta : ToolbarItem;
78
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
79
+ children: /*#__PURE__*/(0, _react.cloneElement)(child, {
80
+ className: (0, _classnames.default)(child.props.className, `${_constants.CLS_PREFIX}toolbar__group-item`)
81
+ })
82
+ });
83
+ });
84
+ };
70
85
  exports.toToolbarItems = toToolbarItems;
@@ -13,6 +13,7 @@ var _Button = _interopRequireDefault(require("../Button"));
13
13
  var _Dropdown = _interopRequireDefault(require("../Dropdown"));
14
14
  var _List = require("../List");
15
15
  var _utils = require("../utils");
16
+ var _Button2 = require("../Button/Button");
16
17
  var _jsxRuntime = require("react/jsx-runtime");
17
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
18
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -33,7 +34,7 @@ const toMenuItem = (child, isLast, onItemClick) => {
33
34
  } = child.props);
34
35
  props.onClick = (0, _utils.wrapFunction)(props.onClick, onItemClick);
35
36
  Object.keys(other).forEach(k => {
36
- if (!(_Button.default.defaultProps && k in _Button.default.defaultProps)) {
37
+ if (!_Button2.BUTTON_PROP_NAMES.includes(k)) {
37
38
  props[k] = other[k];
38
39
  }
39
40
  });
@@ -4,6 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
+ Object.defineProperty(exports, "ToolbarBetaProvider", {
8
+ enumerable: true,
9
+ get: function () {
10
+ return _ToolbarBetaProvider.default;
11
+ }
12
+ });
7
13
  Object.defineProperty(exports, "ToolbarExpander", {
8
14
  enumerable: true,
9
15
  get: function () {
@@ -24,4 +30,5 @@ Object.defineProperty(exports, "default", {
24
30
  });
25
31
  var _Toolbar = _interopRequireDefault(require("./Toolbar"));
26
32
  var _ToolbarGroup = _interopRequireDefault(require("./ToolbarGroup"));
27
- var _ToolbarExpander = _interopRequireDefault(require("./ToolbarExpander"));
33
+ var _ToolbarExpander = _interopRequireDefault(require("./ToolbarExpander"));
34
+ var _ToolbarBetaProvider = _interopRequireDefault(require("./ToolbarBetaProvider"));
@@ -82,6 +82,7 @@ var _exportNames = {
82
82
  ProgressDialog: true,
83
83
  ProgressDialogStep: true,
84
84
  ProgressStep: true,
85
+ PROGRESS_STEP_DEFAULT_STATUS: true,
85
86
  Rating: true,
86
87
  Section: true,
87
88
  SegmentedControl: true,
@@ -103,6 +104,7 @@ var _exportNames = {
103
104
  Toolbar: true,
104
105
  ToolbarGroup: true,
105
106
  ToolbarExpander: true,
107
+ ToolbarBetaProvider: true,
106
108
  Tooltip: true,
107
109
  Tour: true,
108
110
  Translate: true,
@@ -496,6 +498,12 @@ Object.defineProperty(exports, "Overlay", {
496
498
  return _Overlay.default;
497
499
  }
498
500
  });
501
+ Object.defineProperty(exports, "PROGRESS_STEP_DEFAULT_STATUS", {
502
+ enumerable: true,
503
+ get: function () {
504
+ return _ProgressStep.PROGRESS_STEP_DEFAULT_STATUS;
505
+ }
506
+ });
499
507
  Object.defineProperty(exports, "PageHeader", {
500
508
  enumerable: true,
501
509
  get: function () {
@@ -718,6 +726,12 @@ Object.defineProperty(exports, "Toolbar", {
718
726
  return _Toolbar.default;
719
727
  }
720
728
  });
729
+ Object.defineProperty(exports, "ToolbarBetaProvider", {
730
+ enumerable: true,
731
+ get: function () {
732
+ return _Toolbar.ToolbarBetaProvider;
733
+ }
734
+ });
721
735
  Object.defineProperty(exports, "ToolbarExpander", {
722
736
  enumerable: true,
723
737
  get: function () {
@@ -877,7 +891,7 @@ var _Progress = _interopRequireDefault(require("./Progress"));
877
891
  var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
878
892
  var _ProgressDialog = _interopRequireDefault(require("./ProgressDialog"));
879
893
  var _ProgressDialogStep = _interopRequireDefault(require("./ProgressDialogStep"));
880
- var _ProgressStep = _interopRequireDefault(require("./ProgressStep"));
894
+ var _ProgressStep = _interopRequireWildcard(require("./ProgressStep"));
881
895
  var _Rating = _interopRequireDefault(require("./Rating"));
882
896
  var _Section = _interopRequireWildcard(require("./Section"));
883
897
  Object.keys(_Section).forEach(function (key) {