@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.
- package/cjs/components/Button/Button.js +4 -22
- package/cjs/components/Card/CardButton.js +2 -3
- package/cjs/components/CardList/CardListToolbar.js +3 -8
- package/cjs/components/Dialog/Dialog.js +5 -27
- package/cjs/components/Drawer/Drawer.js +7 -20
- package/cjs/components/Dropdown/Dropdown.js +3 -11
- package/cjs/components/FormField/FormField.js +13 -26
- package/cjs/components/Icon/constants.js +2 -2
- package/cjs/components/Icon/images/symbols.svg +9 -1
- package/cjs/components/List/List.js +1 -14
- package/cjs/components/Progress/Progress.js +6 -5
- package/cjs/components/ProgressStep/ProgressStep.js +5 -14
- package/cjs/components/ProgressStep/index.js +6 -0
- package/cjs/components/Section/Section.js +11 -19
- package/cjs/components/SplitButton/SplitButton.js +2 -3
- package/cjs/components/TextArea/TextArea.js +49 -97
- package/cjs/components/TextArea/calculateNodeHeight.js +8 -8
- package/cjs/components/Toolbar/RegistryContextBeta.js +112 -0
- package/cjs/components/Toolbar/Toolbar.js +46 -2
- package/cjs/components/Toolbar/ToolbarBetaProvider.js +23 -0
- package/cjs/components/Toolbar/ToolbarGroup.js +66 -4
- package/cjs/components/Toolbar/ToolbarItem.js +27 -12
- package/cjs/components/Toolbar/ToolbarMenu.js +2 -1
- package/cjs/components/Toolbar/index.js +8 -1
- package/cjs/components/index.js +15 -1
- package/cjs/hooks/index.js +12 -0
- package/cjs/hooks/useResizeObserver.js +29 -0
- package/cjs/hooks/useSqueeze.js +48 -0
- package/cjs/index.js +1 -1
- package/dist/images/symbols.svg +9 -1
- package/dist/plesk-ui-library-rtl.css +1 -1
- package/dist/plesk-ui-library-rtl.css.map +1 -1
- package/dist/plesk-ui-library.css +1 -1
- package/dist/plesk-ui-library.css.map +1 -1
- package/dist/plesk-ui-library.js +591 -309
- package/dist/plesk-ui-library.js.map +1 -1
- package/dist/plesk-ui-library.min.js +5 -5
- package/dist/plesk-ui-library.min.js.map +1 -1
- package/esm/components/Button/Button.js +3 -21
- package/esm/components/Card/CardButton.js +2 -3
- package/esm/components/CardList/CardListToolbar.js +3 -8
- package/esm/components/Dialog/Dialog.js +5 -27
- package/esm/components/Drawer/Drawer.js +7 -20
- package/esm/components/Dropdown/Dropdown.js +3 -11
- package/esm/components/FormField/FormField.js +13 -26
- package/esm/components/Icon/constants.js +2 -2
- package/esm/components/Icon/images/symbols.svg +9 -1
- package/esm/components/List/List.js +1 -14
- package/esm/components/Progress/Progress.js +7 -6
- package/esm/components/ProgressStep/ProgressStep.js +4 -13
- package/esm/components/ProgressStep/index.js +1 -1
- package/esm/components/Section/Section.js +11 -19
- package/esm/components/SplitButton/SplitButton.js +2 -3
- package/esm/components/TextArea/TextArea.js +50 -98
- package/esm/components/TextArea/calculateNodeHeight.js +8 -8
- package/esm/components/Toolbar/RegistryContextBeta.js +103 -0
- package/esm/components/Toolbar/Toolbar.js +47 -3
- package/esm/components/Toolbar/ToolbarBetaProvider.js +16 -0
- package/esm/components/Toolbar/ToolbarGroup.js +67 -5
- package/esm/components/Toolbar/ToolbarItem.js +27 -12
- package/esm/components/Toolbar/ToolbarMenu.js +2 -1
- package/esm/components/Toolbar/index.js +2 -1
- package/esm/components/index.js +2 -2
- package/esm/hooks/index.js +3 -0
- package/esm/hooks/useResizeObserver.js +22 -0
- package/esm/hooks/useSqueeze.js +41 -0
- package/esm/index.js +1 -1
- package/package.json +13 -13
- package/styleguide/build/bundle.8f00c54c.js +2 -0
- package/styleguide/images/symbols.svg +9 -1
- package/styleguide/index.html +2 -2
- package/types/src/components/Button/Button.d.ts +1 -0
- package/types/src/components/Dialog/Dialog.d.ts +1 -25
- package/types/src/components/Drawer/Drawer.d.ts +1 -4
- package/types/src/components/FormField/FormField.d.ts +1 -23
- package/types/src/components/Icon/constants.d.ts +1 -1
- package/types/src/components/ProgressStep/ProgressStep.d.ts +2 -13
- package/types/src/components/ProgressStep/index.d.ts +1 -1
- package/types/src/components/Section/Section.d.ts +2 -32
- package/types/src/components/TextArea/TextArea.d.ts +5 -32
- package/types/src/components/TextArea/calculateNodeHeight.d.ts +2 -6
- package/types/src/components/Toolbar/RegistryContextBeta.d.ts +25 -0
- package/types/src/components/Toolbar/Toolbar.d.ts +2 -22
- package/types/src/components/Toolbar/ToolbarBetaProvider.d.ts +5 -0
- package/types/src/components/Toolbar/ToolbarGroup.d.ts +2 -5
- package/types/src/components/Toolbar/ToolbarItem.d.ts +1 -1
- package/types/src/components/Toolbar/index.d.ts +1 -0
- package/types/src/components/index.d.ts +2 -2
- package/types/src/hooks/index.d.ts +1 -0
- package/types/src/hooks/useResizeObserver.d.ts +7 -0
- package/types/src/hooks/useSqueeze.d.ts +10 -0
- package/styleguide/build/bundle.42040fbd.js +0 -2
- /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
|
|
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
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
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
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
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] :
|
|
51
|
-
let maxRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] :
|
|
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 =
|
|
74
|
-
let maxHeight =
|
|
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 !==
|
|
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 !==
|
|
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 !==
|
|
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 ?
|
|
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
|
|
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)(
|
|
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
|
|
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)(
|
|
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)(
|
|
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
|
-
|
|
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
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
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 (!
|
|
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"));
|
package/cjs/components/index.js
CHANGED
|
@@ -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 =
|
|
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) {
|