@operato/data-grist 8.0.0-alpha.29 → 8.0.0-alpha.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/data-grist",
-  "version": "8.0.0-alpha.29",
+  "version": "8.0.0-alpha.30",
   "description": "User interface for grid (desktop) and list (mobile)",
   "author": "heartyoh",
   "main": "dist/index.js",
@@ -63,7 +63,7 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@operato/headroom": "^8.0.0-alpha.0",
-    "@operato/input": "^8.0.0-alpha.29",
+    "@operato/input": "^8.0.0-alpha.30",
     "@operato/p13n": "^8.0.0-alpha.29",
     "@operato/popup": "^8.0.0-alpha.29",
     "@operato/pull-to-refresh": "^8.0.0-alpha.0",
@@ -108,5 +108,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "f2f91b0c9ba7b29d7eeaca566f8e5875fa554331"
+  "gitHead": "7024870c9c802e70e81e58e894c4ab4854ab5563"
 }

package/src/data-grid/data-grid-body.ts

@@ -61,6 +61,9 @@ export class DataGridBody extends LitElement {
     css`
       :host {
         font-variation-settings: 'FILL' 1;
+
+        overscroll-behavior: none;
+        user-select: none;
       }
 
       [select-block] {
@@ -72,6 +75,7 @@ export class DataGridBody extends LitElement {
         border: var(--grid-record-focused-cell-border);
         background-image: var(--focused-background-image);
         pointer-events: none;
+
         z-index: 5;
       }
 
@@ -289,14 +293,16 @@ export class DataGridBody extends LitElement {
       )
     })
 
-    this.renderRoot.addEventListener('pointerdown', (event: Event) => {
-      const e = event as MouseEvent
+    this.renderRoot.addEventListener('pointerdown', (e: Event) => {
       this.setSelectBlock()
 
-      if (e.buttons !== 1) {
+      if ('buttons' in e && e.buttons !== 1) {
         return
       }
 
+      e.preventDefault()
+      e.stopPropagation()
+
       this._draggable = true
 
       var target = (e.target as Element).closest('ox-grid-field') as DataGridField
@@ -320,10 +326,13 @@ export class DataGridBody extends LitElement {
 
     this.renderRoot.addEventListener('pointermove', (event: Event) => {
       const e = event as MouseEvent
-      if (e.buttons !== 1 || !this._draggable) {
+      if (('buttons' in e && e.buttons !== 1) || !this._draggable) {
         return
       }
 
+      e.preventDefault()
+      e.stopPropagation()
+
       const field = e.target as DataGridField
       if (!this._selectBlock) {
         this.setSelectBlock(this.focusedField || field, this.focusedField || field)
@@ -341,6 +350,9 @@ export class DataGridBody extends LitElement {
     })
 
     this.renderRoot.addEventListener('pointerup', (event: Event) => {
+      event.preventDefault()
+      event.stopPropagation()
+
       this._draggable = false
     })
 

package/src/data-grid/data-grid-footer.ts

@@ -21,6 +21,8 @@ export class DataGridFooter extends LitElement {
         background-color: var(--grid-footer-background-color);
         font-size: var(--grid-footer-font-size);
         align-items: center;
+
+        user-select: none;
       }
 
       :host * {

package/src/data-grid/data-grid-header.ts

@@ -28,6 +28,8 @@ export class DataGridHeader extends LitElement {
         overflow: hidden;
 
         font-variation-settings: 'FILL' 1;
+
+        user-select: none;
       }
 
       :host([raised]) [fixed] {