@pareto-engineering/design-system 4.0.0-alpha.88 → 4.0.0-alpha.89

package/dist/cjs/a/XMLEditor/XMLEditor.js

@@ -39,13 +39,14 @@ const XMLEditor = _ref => {
     config,
     onChange,
     onBlur,
+    stopAllPropagation,
     stopPropagationKeys
   } = _ref;
   const editorRef = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
     const startState = _state.EditorState.create({
       doc: config,
-      extensions: [_view.keymap.of(_commands.defaultKeymap), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
+      extensions: [_view.keymap.of([_commands.defaultKeymap, _commands.indentWithTab]), (0, _language.indentOnInput)(), (0, _view.lineNumbers)(), (0, _language.bracketMatching)(), (0, _language.foldGutter)(), (0, _view.drawSelection)(), (0, _view.highlightActiveLine)(), (0, _view.highlightActiveLineGutter)(), (0, _view.highlightSpecialChars)(), (0, _view.dropCursor)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _langXml.xml)(), _common.theme, _state.EditorState.readOnly.of(readOnly), _view.EditorView.updateListener.of(view => {
         onChange(view);
         // view.state.doc.toString() to receive the current content in the editor.
       }), _view.EditorView.focusChangeEffect.of((state, focused) => {
@@ -54,7 +55,7 @@ const XMLEditor = _ref => {
         }
       }), _view.EditorView.domEventHandlers({
         keydown(e) {
-          if (stopPropagationKeys?.includes(e.key)) {
+          if (stopPropagationKeys?.includes(e.key) || stopAllPropagation) {
             e.stopPropagation();
           }
         }
@@ -115,7 +116,15 @@ XMLEditor.propTypes = {
   /**
    * The keys to stop propagation on.
    */
-  stopPropagationKeys: _propTypes.default.arrayOf(_propTypes.default.string)
+  stopPropagationKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+  /**
+   * The callback for when the editor loses focus.
+   */
+  onBlur: _propTypes.default.func,
+  /**
+   * Whether to stop all propagation of keys to keep focus on the editor.
+   */
+  stopAllPropagation: _propTypes.default.bool
 };
 XMLEditor.defaultProps = {
   config: `<View>

package/dist/cjs/a/XMLEditor/styles.scss

@@ -4,6 +4,7 @@
   border-radius: 1em;
   height: var(--height);
   overflow: auto;
+  resize: both;
 
   > .cm-editor {
     height: 100%;

package/dist/es/a/XMLEditor/XMLEditor.js

@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { EditorState } from '@codemirror/state';
 import { EditorView, keymap, lineNumbers, drawSelection, dropCursor, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, crosshairCursor, rectangularSelection } from '@codemirror/view';
-import { defaultKeymap } from '@codemirror/commands';
+import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 import { indentOnInput, bracketMatching, foldGutter } from '@codemirror/language';
 import { xml } from '@codemirror/lang-xml';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -28,13 +28,14 @@ const XMLEditor = ({
   config,
   onChange,
   onBlur,
+  stopAllPropagation,
   stopPropagationKeys
 }) => {
   const editorRef = useRef();
   useEffect(() => {
     const startState = EditorState.create({
       doc: config,
-      extensions: [keymap.of(defaultKeymap), indentOnInput(), lineNumbers(), bracketMatching(), foldGutter(), drawSelection(), highlightActiveLine(), highlightActiveLineGutter(), highlightSpecialChars(), dropCursor(), rectangularSelection(), crosshairCursor(), xml(), theme, EditorState.readOnly.of(readOnly), EditorView.updateListener.of(view => {
+      extensions: [keymap.of([defaultKeymap, indentWithTab]), indentOnInput(), lineNumbers(), bracketMatching(), foldGutter(), drawSelection(), highlightActiveLine(), highlightActiveLineGutter(), highlightSpecialChars(), dropCursor(), rectangularSelection(), crosshairCursor(), xml(), theme, EditorState.readOnly.of(readOnly), EditorView.updateListener.of(view => {
         onChange(view);
         // view.state.doc.toString() to receive the current content in the editor.
       }), EditorView.focusChangeEffect.of((state, focused) => {
@@ -43,7 +44,7 @@ const XMLEditor = ({
         }
       }), EditorView.domEventHandlers({
         keydown(e) {
-          if (stopPropagationKeys?.includes(e.key)) {
+          if (stopPropagationKeys?.includes(e.key) || stopAllPropagation) {
             e.stopPropagation();
           }
         }
@@ -104,7 +105,15 @@ XMLEditor.propTypes = {
   /**
    * The keys to stop propagation on.
    */
-  stopPropagationKeys: PropTypes.arrayOf(PropTypes.string)
+  stopPropagationKeys: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * The callback for when the editor loses focus.
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Whether to stop all propagation of keys to keep focus on the editor.
+   */
+  stopAllPropagation: PropTypes.bool
 };
 XMLEditor.defaultProps = {
   config: `<View>

package/dist/es/a/XMLEditor/styles.scss

@@ -4,6 +4,7 @@
   border-radius: 1em;
   height: var(--height);
   overflow: auto;
+  resize: both;
 
   > .cm-editor {
     height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.88",
+  "version": "4.0.0-alpha.89",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -82,5 +82,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "2e7b0a8eb0b49234aa54e29bda5bfb9feca51ec8"
+  "gitHead": "579aab967ee9db911c6c88b04f874542abb60d59"
 }

package/src/ui/a/XMLEditor/XMLEditor.jsx

@@ -22,6 +22,7 @@ import {
 
 import {
   defaultKeymap,
+  indentWithTab,
 } from '@codemirror/commands'
 
 import {
@@ -57,6 +58,7 @@ const XMLEditor = ({
   config,
   onChange,
   onBlur,
+  stopAllPropagation,
   stopPropagationKeys,
 }) => {
   const editorRef = useRef()
@@ -65,7 +67,7 @@ const XMLEditor = ({
     const startState = EditorState.create({
       doc       :config,
       extensions:[
-        keymap.of(defaultKeymap),
+        keymap.of([defaultKeymap, indentWithTab]),
         indentOnInput(),
         lineNumbers(),
         bracketMatching(),
@@ -91,7 +93,7 @@ const XMLEditor = ({
         }),
         EditorView.domEventHandlers({
           keydown(e) {
-            if (stopPropagationKeys?.includes(e.key)) {
+            if (stopPropagationKeys?.includes(e.key) || stopAllPropagation) {
               e.stopPropagation()
             }
           },
@@ -174,6 +176,16 @@ XMLEditor.propTypes = {
    * The keys to stop propagation on.
    */
   stopPropagationKeys:PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * The callback for when the editor loses focus.
+   */
+  onBlur:PropTypes.func,
+
+  /**
+   * Whether to stop all propagation of keys to keep focus on the editor.
+   */
+  stopAllPropagation:PropTypes.bool,
 }
 
 XMLEditor.defaultProps = {

package/src/ui/a/XMLEditor/styles.scss

@@ -4,6 +4,7 @@
   border-radius: 1em;
   height: var(--height);
   overflow: auto;
+  resize: both;
 
   > .cm-editor {
     height: 100%;

package/tests/__snapshots__/Storyshots.test.js.snap

@@ -11567,7 +11567,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  over 1 year ago
+  almost 2 years ago
 </p>
 `;