@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.
@@ -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
- if (stopPropagationKeys?.includes(e.key) || stopAllPropagation) {
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), stopPropagationKeys && /*#__PURE__*/React.createElement(_common2.StopPropagationPlugin, {
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 = _ref => {
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
- if (stopPropagationKeys?.includes(e.key)) {
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
  }
@@ -122,7 +122,7 @@ $default-gap: var(--gap);
122
122
  margin: 0;
123
123
  }
124
124
 
125
- &.#{bem.$modifier-active} {
125
+ &.#{bem.$modifier-active}:not(.disabled) {
126
126
  background-color: var(--y);
127
127
 
128
128
  > p {
@@ -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
- if (stopPropagationKeys?.includes(e.key) || stopAllPropagation) {
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), stopPropagationKeys && /*#__PURE__*/React.createElement(StopPropagationPlugin, {
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
- if (stopPropagationKeys?.includes(e.key)) {
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
  }
@@ -122,7 +122,7 @@ $default-gap: var(--gap);
122
122
  margin: 0;
123
123
  }
124
124
 
125
- &.#{bem.$modifier-active} {
125
+ &.#{bem.$modifier-active}:not(.disabled) {
126
126
  background-color: var(--y);
127
127
 
128
128
  > p {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pareto-engineering/design-system",
3
- "version": "4.2.1-alpha.0",
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-alpha.0",
63
- "@pareto-engineering/bem": "^4.0.0",
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": "959e968b733eab6cfef5dca5f8239084afbe2652"
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
- if (stopPropagationKeys?.includes(e.key) || stopAllPropagation) {
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
- { stopPropagationKeys && (
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
- if (stopPropagationKeys?.includes(e.key)) {
12
- e.stopPropagation()
13
- }
9
+ e.stopPropagation()
14
10
  }
15
11
 
16
12
  return editor.registerRootListener(
@@ -45,6 +45,7 @@ const Menu = React.forwardRef(({
45
45
  {...getItemProps({ item, index })}
46
46
  className={[
47
47
  'item',
48
+ item.disabled && styleNames.modifierDisabled,
48
49
  highlightedIndex === index && styleNames.modifierActive,
49
50
  ].filter(Boolean)
50
51
  .join(' ')}
@@ -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
  }
@@ -122,7 +122,7 @@ $default-gap: var(--gap);
122
122
  margin: 0;
123
123
  }
124
124
 
125
- &.#{bem.$modifier-active} {
125
+ &.#{bem.$modifier-active}:not(.disabled) {
126
126
  background-color: var(--y);
127
127
 
128
128
  > p {