@pareto-engineering/design-system 4.2.1-alpha.0 → 4.2.1
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/dist/cjs/a/XMLEditor/XMLEditor.js +3 -15
- package/dist/cjs/f/fields/EditorInput/EditorInput.js +2 -15
- package/dist/cjs/f/fields/EditorInput/common/StopPropagationPlugin.js +2 -7
- package/dist/cjs/f/fields/SelectInput/common/Menu/Menu.js +1 -1
- package/dist/cjs/f/fields/SelectInput/common/Multiple/Multiple.js +1 -1
- package/dist/cjs/f/fields/SelectInput/styles.scss +1 -1
- package/dist/es/a/XMLEditor/XMLEditor.js +3 -15
- package/dist/es/f/fields/EditorInput/EditorInput.js +2 -15
- package/dist/es/f/fields/EditorInput/common/StopPropagationPlugin.js +2 -6
- package/dist/es/f/fields/SelectInput/common/Menu/Menu.js +1 -1
- package/dist/es/f/fields/SelectInput/common/Multiple/Multiple.js +1 -1
- package/dist/es/f/fields/SelectInput/styles.scss +1 -1
- package/package.json +4 -4
- package/src/ui/a/XMLEditor/XMLEditor.jsx +1 -15
- package/src/ui/f/fields/EditorInput/EditorInput.jsx +1 -15
- package/src/ui/f/fields/EditorInput/common/StopPropagationPlugin.jsx +2 -6
- package/src/ui/f/fields/SelectInput/common/Menu/Menu.jsx +1 -0
- package/src/ui/f/fields/SelectInput/common/Multiple/Multiple.jsx +1 -1
- package/src/ui/f/fields/SelectInput/styles.scss +1 -1
|
@@ -38,9 +38,7 @@ const XMLEditor = _ref => {
|
|
|
38
38
|
gutterWidth,
|
|
39
39
|
config,
|
|
40
40
|
onChange,
|
|
41
|
-
onBlur
|
|
42
|
-
stopAllPropagation,
|
|
43
|
-
stopPropagationKeys
|
|
41
|
+
onBlur
|
|
44
42
|
} = _ref;
|
|
45
43
|
const editorRef = (0, _react.useRef)();
|
|
46
44
|
(0, _react.useEffect)(() => {
|
|
@@ -55,9 +53,7 @@ const XMLEditor = _ref => {
|
|
|
55
53
|
}
|
|
56
54
|
}), _view.EditorView.domEventHandlers({
|
|
57
55
|
keydown(e) {
|
|
58
|
-
|
|
59
|
-
e.stopPropagation();
|
|
60
|
-
}
|
|
56
|
+
e.stopPropagation();
|
|
61
57
|
}
|
|
62
58
|
})]
|
|
63
59
|
});
|
|
@@ -113,18 +109,10 @@ XMLEditor.propTypes = {
|
|
|
113
109
|
* The width of the gutter.
|
|
114
110
|
*/
|
|
115
111
|
gutterWidth: _propTypes.default.string,
|
|
116
|
-
/**
|
|
117
|
-
* The keys to stop propagation on.
|
|
118
|
-
*/
|
|
119
|
-
stopPropagationKeys: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
120
112
|
/**
|
|
121
113
|
* The callback for when the editor loses focus.
|
|
122
114
|
*/
|
|
123
|
-
onBlur: _propTypes.default.func
|
|
124
|
-
/**
|
|
125
|
-
* Whether to stop all propagation of keys to keep focus on the editor.
|
|
126
|
-
*/
|
|
127
|
-
stopAllPropagation: _propTypes.default.bool
|
|
115
|
+
onBlur: _propTypes.default.func
|
|
128
116
|
};
|
|
129
117
|
XMLEditor.defaultProps = {
|
|
130
118
|
config: `<View>
|
|
@@ -59,7 +59,6 @@ const EditorInput = _ref2 => {
|
|
|
59
59
|
style,
|
|
60
60
|
name,
|
|
61
61
|
label,
|
|
62
|
-
// validate,
|
|
63
62
|
resize,
|
|
64
63
|
color,
|
|
65
64
|
rows,
|
|
@@ -68,7 +67,6 @@ const EditorInput = _ref2 => {
|
|
|
68
67
|
description,
|
|
69
68
|
disabled,
|
|
70
69
|
showDebugger,
|
|
71
|
-
stopPropagationKeys,
|
|
72
70
|
setEditorState
|
|
73
71
|
// ...otherProps
|
|
74
72
|
} = _ref2;
|
|
@@ -156,9 +154,7 @@ const EditorInput = _ref2 => {
|
|
|
156
154
|
onChange: onChange
|
|
157
155
|
}), /*#__PURE__*/React.createElement(_LexicalLinkPlugin.LinkPlugin, null), /*#__PURE__*/React.createElement(_LexicalClickableLinkPlugin.default, null), /*#__PURE__*/React.createElement(_LexicalTabIndentationPlugin.TabIndentationPlugin, null), setEditorState && /*#__PURE__*/React.createElement(ExposeEditorStatePlugin, {
|
|
158
156
|
setEditorState: setEditorState
|
|
159
|
-
}), /*#__PURE__*/React.createElement(_LexicalHistoryPlugin.HistoryPlugin, null),
|
|
160
|
-
stopPropagationKeys: stopPropagationKeys
|
|
161
|
-
}), /*#__PURE__*/React.createElement(_common.FormDescription, {
|
|
157
|
+
}), /*#__PURE__*/React.createElement(_LexicalHistoryPlugin.HistoryPlugin, null), /*#__PURE__*/React.createElement(_common2.StopPropagationPlugin, null), /*#__PURE__*/React.createElement(_common.FormDescription, {
|
|
162
158
|
className: "s-1",
|
|
163
159
|
description: description,
|
|
164
160
|
name: name
|
|
@@ -185,11 +181,6 @@ EditorInput.propTypes = {
|
|
|
185
181
|
* The input label
|
|
186
182
|
*/
|
|
187
183
|
label: _propTypes.default.string.isRequired,
|
|
188
|
-
/**
|
|
189
|
-
* The input value validator function
|
|
190
|
-
*/
|
|
191
|
-
// validate:PropTypes.func,
|
|
192
|
-
|
|
193
184
|
/**
|
|
194
185
|
* The number of rows int the text area
|
|
195
186
|
*/
|
|
@@ -221,11 +212,7 @@ EditorInput.propTypes = {
|
|
|
221
212
|
/**
|
|
222
213
|
* Whether to show the debugger or not
|
|
223
214
|
*/
|
|
224
|
-
showDebugger: _propTypes.default.bool
|
|
225
|
-
/**
|
|
226
|
-
* Map to stop propagation of the given keys
|
|
227
|
-
*/
|
|
228
|
-
stopPropagationKeys: _propTypes.default.arrayOf(_propTypes.default.string)
|
|
215
|
+
showDebugger: _propTypes.default.bool
|
|
229
216
|
};
|
|
230
217
|
EditorInput.defaultProps = {
|
|
231
218
|
rows: 10,
|
|
@@ -6,16 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
|
|
9
|
-
const StopPropagationPlugin =
|
|
10
|
-
let {
|
|
11
|
-
stopPropagationKeys
|
|
12
|
-
} = _ref;
|
|
9
|
+
const StopPropagationPlugin = () => {
|
|
13
10
|
const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
|
|
14
11
|
(0, _react.useInsertionEffect)(() => {
|
|
15
12
|
const onKeyDown = e => {
|
|
16
|
-
|
|
17
|
-
e.stopPropagation();
|
|
18
|
-
}
|
|
13
|
+
e.stopPropagation();
|
|
19
14
|
};
|
|
20
15
|
return editor.registerRootListener((rootElement, prevRootElement) => {
|
|
21
16
|
if (prevRootElement !== null) {
|
|
@@ -41,7 +41,7 @@ const Menu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
41
41
|
item,
|
|
42
42
|
index
|
|
43
43
|
}), {
|
|
44
|
-
className: ['item', highlightedIndex === index && _exports.default.modifierActive].filter(Boolean).join(' ')
|
|
44
|
+
className: ['item', item.disabled && _exports.default.modifierDisabled, highlightedIndex === index && _exports.default.modifierActive].filter(Boolean).join(' ')
|
|
45
45
|
}), /*#__PURE__*/React.createElement("p", null, item.label))));
|
|
46
46
|
});
|
|
47
47
|
Menu.propTypes = {
|
|
@@ -136,7 +136,7 @@ const Multiple = _ref => {
|
|
|
136
136
|
case _downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
|
|
137
137
|
case _downshift.useCombobox.stateChangeTypes.ItemClick:
|
|
138
138
|
case _downshift.useCombobox.stateChangeTypes.InputBlur:
|
|
139
|
-
if (selectedItem) {
|
|
139
|
+
if (selectedItem && !selectedItem?.disabled) {
|
|
140
140
|
setSearchInputValue('');
|
|
141
141
|
addSelectedItem(selectedItem);
|
|
142
142
|
}
|
|
@@ -27,9 +27,7 @@ const XMLEditor = ({
|
|
|
27
27
|
gutterWidth,
|
|
28
28
|
config,
|
|
29
29
|
onChange,
|
|
30
|
-
onBlur
|
|
31
|
-
stopAllPropagation,
|
|
32
|
-
stopPropagationKeys
|
|
30
|
+
onBlur
|
|
33
31
|
}) => {
|
|
34
32
|
const editorRef = useRef();
|
|
35
33
|
useEffect(() => {
|
|
@@ -44,9 +42,7 @@ const XMLEditor = ({
|
|
|
44
42
|
}
|
|
45
43
|
}), EditorView.domEventHandlers({
|
|
46
44
|
keydown(e) {
|
|
47
|
-
|
|
48
|
-
e.stopPropagation();
|
|
49
|
-
}
|
|
45
|
+
e.stopPropagation();
|
|
50
46
|
}
|
|
51
47
|
})]
|
|
52
48
|
});
|
|
@@ -102,18 +98,10 @@ XMLEditor.propTypes = {
|
|
|
102
98
|
* The width of the gutter.
|
|
103
99
|
*/
|
|
104
100
|
gutterWidth: PropTypes.string,
|
|
105
|
-
/**
|
|
106
|
-
* The keys to stop propagation on.
|
|
107
|
-
*/
|
|
108
|
-
stopPropagationKeys: PropTypes.arrayOf(PropTypes.string),
|
|
109
101
|
/**
|
|
110
102
|
* The callback for when the editor loses focus.
|
|
111
103
|
*/
|
|
112
|
-
onBlur: PropTypes.func
|
|
113
|
-
/**
|
|
114
|
-
* Whether to stop all propagation of keys to keep focus on the editor.
|
|
115
|
-
*/
|
|
116
|
-
stopAllPropagation: PropTypes.bool
|
|
104
|
+
onBlur: PropTypes.func
|
|
117
105
|
};
|
|
118
106
|
XMLEditor.defaultProps = {
|
|
119
107
|
config: `<View>
|
|
@@ -48,7 +48,6 @@ const EditorInput = ({
|
|
|
48
48
|
style,
|
|
49
49
|
name,
|
|
50
50
|
label,
|
|
51
|
-
// validate,
|
|
52
51
|
resize,
|
|
53
52
|
color,
|
|
54
53
|
rows,
|
|
@@ -57,7 +56,6 @@ const EditorInput = ({
|
|
|
57
56
|
description,
|
|
58
57
|
disabled,
|
|
59
58
|
showDebugger,
|
|
60
|
-
stopPropagationKeys,
|
|
61
59
|
setEditorState
|
|
62
60
|
// ...otherProps
|
|
63
61
|
}) => {
|
|
@@ -145,9 +143,7 @@ const EditorInput = ({
|
|
|
145
143
|
onChange: onChange
|
|
146
144
|
}), /*#__PURE__*/React.createElement(LinkPlugin, null), /*#__PURE__*/React.createElement(LexicalClickableLinkPlugin, null), /*#__PURE__*/React.createElement(TabIndentationPlugin, null), setEditorState && /*#__PURE__*/React.createElement(ExposeEditorStatePlugin, {
|
|
147
145
|
setEditorState: setEditorState
|
|
148
|
-
}), /*#__PURE__*/React.createElement(HistoryPlugin, null),
|
|
149
|
-
stopPropagationKeys: stopPropagationKeys
|
|
150
|
-
}), /*#__PURE__*/React.createElement(FormDescription, {
|
|
146
|
+
}), /*#__PURE__*/React.createElement(HistoryPlugin, null), /*#__PURE__*/React.createElement(StopPropagationPlugin, null), /*#__PURE__*/React.createElement(FormDescription, {
|
|
151
147
|
className: "s-1",
|
|
152
148
|
description: description,
|
|
153
149
|
name: name
|
|
@@ -174,11 +170,6 @@ EditorInput.propTypes = {
|
|
|
174
170
|
* The input label
|
|
175
171
|
*/
|
|
176
172
|
label: PropTypes.string.isRequired,
|
|
177
|
-
/**
|
|
178
|
-
* The input value validator function
|
|
179
|
-
*/
|
|
180
|
-
// validate:PropTypes.func,
|
|
181
|
-
|
|
182
173
|
/**
|
|
183
174
|
* The number of rows int the text area
|
|
184
175
|
*/
|
|
@@ -210,11 +201,7 @@ EditorInput.propTypes = {
|
|
|
210
201
|
/**
|
|
211
202
|
* Whether to show the debugger or not
|
|
212
203
|
*/
|
|
213
|
-
showDebugger: PropTypes.bool
|
|
214
|
-
/**
|
|
215
|
-
* Map to stop propagation of the given keys
|
|
216
|
-
*/
|
|
217
|
-
stopPropagationKeys: PropTypes.arrayOf(PropTypes.string)
|
|
204
|
+
showDebugger: PropTypes.bool
|
|
218
205
|
};
|
|
219
206
|
EditorInput.defaultProps = {
|
|
220
207
|
rows: 10,
|
|
@@ -1,14 +1,10 @@
|
|
|
1
1
|
import { useInsertionEffect } from 'react';
|
|
2
2
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
3
|
-
const StopPropagationPlugin = ({
|
|
4
|
-
stopPropagationKeys
|
|
5
|
-
}) => {
|
|
3
|
+
const StopPropagationPlugin = () => {
|
|
6
4
|
const [editor] = useLexicalComposerContext();
|
|
7
5
|
useInsertionEffect(() => {
|
|
8
6
|
const onKeyDown = e => {
|
|
9
|
-
|
|
10
|
-
e.stopPropagation();
|
|
11
|
-
}
|
|
7
|
+
e.stopPropagation();
|
|
12
8
|
};
|
|
13
9
|
return editor.registerRootListener((rootElement, prevRootElement) => {
|
|
14
10
|
if (prevRootElement !== null) {
|
|
@@ -32,7 +32,7 @@ const Menu = /*#__PURE__*/React.forwardRef(({
|
|
|
32
32
|
item,
|
|
33
33
|
index
|
|
34
34
|
}), {
|
|
35
|
-
className: ['item', highlightedIndex === index && styleNames.modifierActive].filter(Boolean).join(' ')
|
|
35
|
+
className: ['item', item.disabled && styleNames.modifierDisabled, highlightedIndex === index && styleNames.modifierActive].filter(Boolean).join(' ')
|
|
36
36
|
}), /*#__PURE__*/React.createElement("p", null, item.label)))));
|
|
37
37
|
Menu.propTypes = {
|
|
38
38
|
/**
|
|
@@ -127,7 +127,7 @@ const Multiple = ({
|
|
|
127
127
|
case useCombobox.stateChangeTypes.InputKeyDownEnter:
|
|
128
128
|
case useCombobox.stateChangeTypes.ItemClick:
|
|
129
129
|
case useCombobox.stateChangeTypes.InputBlur:
|
|
130
|
-
if (selectedItem) {
|
|
130
|
+
if (selectedItem && !selectedItem?.disabled) {
|
|
131
131
|
setSearchInputValue('');
|
|
132
132
|
addSelectedItem(selectedItem);
|
|
133
133
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pareto-engineering/design-system",
|
|
3
|
-
"version": "4.2.1
|
|
3
|
+
"version": "4.2.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/es/index.js",
|
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
"@lexical/selection": "0.12.2",
|
|
60
60
|
"@lexical/table": "0.12.2",
|
|
61
61
|
"@lexical/utils": "0.12.2",
|
|
62
|
-
"@pareto-engineering/assets": "^4.2.1
|
|
63
|
-
"@pareto-engineering/bem": "^4.
|
|
62
|
+
"@pareto-engineering/assets": "^4.2.1",
|
|
63
|
+
"@pareto-engineering/bem": "^4.2.1",
|
|
64
64
|
"@pareto-engineering/styles": "^4.2.0",
|
|
65
65
|
"@pareto-engineering/utils": "^4.0.0",
|
|
66
66
|
"codemirror": "^6.0.1",
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"relay-test-utils": "^15.0.0"
|
|
83
83
|
},
|
|
84
84
|
"browserslist": "> 2%",
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "9dc4c06f6e3f8efe94eb0fa4f301ca6f046c5075"
|
|
86
86
|
}
|
|
@@ -58,8 +58,6 @@ const XMLEditor = ({
|
|
|
58
58
|
config,
|
|
59
59
|
onChange,
|
|
60
60
|
onBlur,
|
|
61
|
-
stopAllPropagation,
|
|
62
|
-
stopPropagationKeys,
|
|
63
61
|
}) => {
|
|
64
62
|
const editorRef = useRef()
|
|
65
63
|
|
|
@@ -93,9 +91,7 @@ const XMLEditor = ({
|
|
|
93
91
|
}),
|
|
94
92
|
EditorView.domEventHandlers({
|
|
95
93
|
keydown(e) {
|
|
96
|
-
|
|
97
|
-
e.stopPropagation()
|
|
98
|
-
}
|
|
94
|
+
e.stopPropagation()
|
|
99
95
|
},
|
|
100
96
|
}),
|
|
101
97
|
],
|
|
@@ -172,20 +168,10 @@ XMLEditor.propTypes = {
|
|
|
172
168
|
*/
|
|
173
169
|
gutterWidth:PropTypes.string,
|
|
174
170
|
|
|
175
|
-
/**
|
|
176
|
-
* The keys to stop propagation on.
|
|
177
|
-
*/
|
|
178
|
-
stopPropagationKeys:PropTypes.arrayOf(PropTypes.string),
|
|
179
|
-
|
|
180
171
|
/**
|
|
181
172
|
* The callback for when the editor loses focus.
|
|
182
173
|
*/
|
|
183
174
|
onBlur:PropTypes.func,
|
|
184
|
-
|
|
185
|
-
/**
|
|
186
|
-
* Whether to stop all propagation of keys to keep focus on the editor.
|
|
187
|
-
*/
|
|
188
|
-
stopAllPropagation:PropTypes.bool,
|
|
189
175
|
}
|
|
190
176
|
|
|
191
177
|
XMLEditor.defaultProps = {
|
|
@@ -51,7 +51,6 @@ const EditorInput = ({
|
|
|
51
51
|
style,
|
|
52
52
|
name,
|
|
53
53
|
label,
|
|
54
|
-
// validate,
|
|
55
54
|
resize,
|
|
56
55
|
color,
|
|
57
56
|
rows,
|
|
@@ -60,7 +59,6 @@ const EditorInput = ({
|
|
|
60
59
|
description,
|
|
61
60
|
disabled,
|
|
62
61
|
showDebugger,
|
|
63
|
-
stopPropagationKeys,
|
|
64
62
|
setEditorState,
|
|
65
63
|
// ...otherProps
|
|
66
64
|
}) => {
|
|
@@ -186,9 +184,7 @@ const EditorInput = ({
|
|
|
186
184
|
<TabIndentationPlugin />
|
|
187
185
|
{setEditorState && <ExposeEditorStatePlugin setEditorState={setEditorState} />}
|
|
188
186
|
<HistoryPlugin />
|
|
189
|
-
|
|
190
|
-
<StopPropagationPlugin stopPropagationKeys={stopPropagationKeys} />
|
|
191
|
-
)}
|
|
187
|
+
<StopPropagationPlugin />
|
|
192
188
|
<FormDescription className="s-1" description={description} name={name} />
|
|
193
189
|
{ showDebugger && <TreeViewPlugin /> }
|
|
194
190
|
</div>
|
|
@@ -222,11 +218,6 @@ EditorInput.propTypes = {
|
|
|
222
218
|
*/
|
|
223
219
|
label:PropTypes.string.isRequired,
|
|
224
220
|
|
|
225
|
-
/**
|
|
226
|
-
* The input value validator function
|
|
227
|
-
*/
|
|
228
|
-
// validate:PropTypes.func,
|
|
229
|
-
|
|
230
221
|
/**
|
|
231
222
|
* The number of rows int the text area
|
|
232
223
|
*/
|
|
@@ -266,11 +257,6 @@ EditorInput.propTypes = {
|
|
|
266
257
|
* Whether to show the debugger or not
|
|
267
258
|
*/
|
|
268
259
|
showDebugger:PropTypes.bool,
|
|
269
|
-
|
|
270
|
-
/**
|
|
271
|
-
* Map to stop propagation of the given keys
|
|
272
|
-
*/
|
|
273
|
-
stopPropagationKeys:PropTypes.arrayOf(PropTypes.string),
|
|
274
260
|
}
|
|
275
261
|
|
|
276
262
|
EditorInput.defaultProps = {
|
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
import { useInsertionEffect } from 'react'
|
|
2
2
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
|
3
3
|
|
|
4
|
-
const StopPropagationPlugin = ({
|
|
5
|
-
stopPropagationKeys,
|
|
6
|
-
}) => {
|
|
4
|
+
const StopPropagationPlugin = () => {
|
|
7
5
|
const [editor] = useLexicalComposerContext()
|
|
8
6
|
|
|
9
7
|
useInsertionEffect(() => {
|
|
10
8
|
const onKeyDown = (e) => {
|
|
11
|
-
|
|
12
|
-
e.stopPropagation()
|
|
13
|
-
}
|
|
9
|
+
e.stopPropagation()
|
|
14
10
|
}
|
|
15
11
|
|
|
16
12
|
return editor.registerRootListener(
|
|
@@ -133,7 +133,7 @@ const Multiple = ({
|
|
|
133
133
|
case useCombobox.stateChangeTypes.InputKeyDownEnter:
|
|
134
134
|
case useCombobox.stateChangeTypes.ItemClick:
|
|
135
135
|
case useCombobox.stateChangeTypes.InputBlur:
|
|
136
|
-
if (selectedItem) {
|
|
136
|
+
if (selectedItem && !selectedItem?.disabled) {
|
|
137
137
|
setSearchInputValue('')
|
|
138
138
|
addSelectedItem(selectedItem)
|
|
139
139
|
}
|