polaris_view_components 3.1.0 → 3.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ca5d44863ed4e92c96355b43938b83e3d6c35faf836f21ec8d30cfbe4bf955a3
-  data.tar.gz: 569be82094984c0afb8ebaa30950aef78f11e5365ebcdebeb3d1bde5da03311e
+  metadata.gz: 1d930e9979e26f2a16e58a86aaf5477360eb518602900671407fbad50476058a
+  data.tar.gz: c65e3755b6d86787d6a6582c646ed8e81c17fbb33e6ba95fb6e975f240411840
 SHA512:
-  metadata.gz: f9cac7d32e9bce452bdd695c371fe9a91cd6ce79be8579abdf01b6d73deecda3f347370931343ee932c79e7ab093eb5989006c6e02014f80a9e35b403d66a605
-  data.tar.gz: 4350c590a31131ec013cfe3982c397005d05e52bee58b996bb6cfa48553605765bcbd97dcd183c9b6dea8475f2bc6a8f49eee95d86053ee9e1717caf31875d4c
+  metadata.gz: 4b74b88c543352ce30e6db7b6478b61aeba71a7688f578335bab15464aa041e1f806f0200fadbfc8015586c18b99f543d1a8633d250e46eed03f984b3543889e
+  data.tar.gz: 04f4ad64a553706075a8fe6a7632707e4334f3a805f717f8dfb40c1e4b47c6db314a05b9684cc923f4dfd2359aafd10b61c53ec0bc47a11b1ee683a6fc54ae24

data/app/assets/javascripts/polaris_view_components/data_table_controller.js

@@ -1,33 +1,44 @@
 import { Controller } from "@hotwired/stimulus"
+import { debounce } from "./utils"
 
 export default class extends Controller {
-  static targets = ["row"]
-
   connect() {
-    this.rowTargets.forEach(row => {
-      row.addEventListener("mouseover", () => this.handleHover(row))
-      row.addEventListener("mouseout", () => this.handleLeave(row))
-    })
+    this.handleMouseOver = debounce(this.handleMouseOver.bind(this), 50)
+    this.handleMouseOut = debounce(this.handleMouseOut.bind(this), 50)
+
+    this.element.addEventListener("mouseover", this.handleMouseOver)
+    this.element.addEventListener("mouseout", this.handleMouseOut)
   }
 
   disconnect() {
-    this.rowTargets.forEach(row => {
-      row.removeEventListener("mouseover", () => this.handleHover(row))
-      row.removeEventListener("mouseout", () => this.handleLeave(row))
-    })
+    this.element.removeEventListener("mouseover", this.handleMouseOver)
+    this.element.removeEventListener("mouseout", this.handleMouseOut)
+  }
+
+  handleMouseOver(event) {
+    const row = event.target.closest(".Polaris-DataTable--hoverable")
+    if (row && row !== this.hoveredRow) {
+      this.clearHoveredRow()
+      this.hoveredRow = row
+      row.querySelectorAll(".Polaris-DataTable__Cell").forEach(cell => {
+        cell.classList.add("Polaris-DataTable__Cell--hovered")
+      })
+    }
   }
 
-  handleHover(row) {
-    const cells = row.querySelectorAll(".Polaris-DataTable__Cell")
-    cells.forEach(cell => {
-      cell.classList.add("Polaris-DataTable__Cell--hovered")
-    })
+  handleMouseOut(event) {
+    const row = event.target.closest(".Polaris-DataTable--hoverable")
+    if (row && !row.contains(event.relatedTarget)) {
+      this.clearHoveredRow()
+    }
   }
 
-  handleLeave(row) {
-    const cells = row.querySelectorAll(".Polaris-DataTable__Cell")
-    cells.forEach(cell => {
-      cell.classList.remove("Polaris-DataTable__Cell--hovered")
-    })
+  clearHoveredRow() {
+    if (this.hoveredRow) {
+      this.hoveredRow.querySelectorAll(".Polaris-DataTable__Cell").forEach(cell => {
+        cell.classList.remove("Polaris-DataTable__Cell--hovered")
+      })
+      this.hoveredRow = null
+    }
   }
 }

data/app/assets/javascripts/polaris_view_components.js

@@ -357,30 +357,39 @@ class Collapsible extends Controller {
 }
 
 class DataTable extends Controller {
-  static targets=[ "row" ];
   connect() {
-    this.rowTargets.forEach((row => {
-      row.addEventListener("mouseover", (() => this.handleHover(row)));
-      row.addEventListener("mouseout", (() => this.handleLeave(row)));
-    }));
+    this.handleMouseOver = debounce(this.handleMouseOver.bind(this), 50);
+    this.handleMouseOut = debounce(this.handleMouseOut.bind(this), 50);
+    this.element.addEventListener("mouseover", this.handleMouseOver);
+    this.element.addEventListener("mouseout", this.handleMouseOut);
   }
   disconnect() {
-    this.rowTargets.forEach((row => {
-      row.removeEventListener("mouseover", (() => this.handleHover(row)));
-      row.removeEventListener("mouseout", (() => this.handleLeave(row)));
-    }));
+    this.element.removeEventListener("mouseover", this.handleMouseOver);
+    this.element.removeEventListener("mouseout", this.handleMouseOut);
+  }
+  handleMouseOver(event) {
+    const row = event.target.closest(".Polaris-DataTable--hoverable");
+    if (row && row !== this.hoveredRow) {
+      this.clearHoveredRow();
+      this.hoveredRow = row;
+      row.querySelectorAll(".Polaris-DataTable__Cell").forEach((cell => {
+        cell.classList.add("Polaris-DataTable__Cell--hovered");
+      }));
+    }
   }
-  handleHover(row) {
-    const cells = row.querySelectorAll(".Polaris-DataTable__Cell");
-    cells.forEach((cell => {
-      cell.classList.add("Polaris-DataTable__Cell--hovered");
-    }));
+  handleMouseOut(event) {
+    const row = event.target.closest(".Polaris-DataTable--hoverable");
+    if (row && !row.contains(event.relatedTarget)) {
+      this.clearHoveredRow();
+    }
   }
-  handleLeave(row) {
-    const cells = row.querySelectorAll(".Polaris-DataTable__Cell");
-    cells.forEach((cell => {
-      cell.classList.remove("Polaris-DataTable__Cell--hovered");
-    }));
+  clearHoveredRow() {
+    if (this.hoveredRow) {
+      this.hoveredRow.querySelectorAll(".Polaris-DataTable__Cell").forEach((cell => {
+        cell.classList.remove("Polaris-DataTable__Cell--hovered");
+      }));
+      this.hoveredRow = null;
+    }
   }
 }
 

data/app/assets/stylesheets/polaris_view_components/data_table.pcss

@@ -1,12 +1,19 @@
 html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable {
-
+  .Polaris-DataTable__TableRow {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 250px;
+  }
   .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--flush):first-child,
-  .Polaris-DataTable__Heading:not(.Polaris-DataTable__Heading--flush):first-child {
+  .Polaris-DataTable__Heading:not(
+      .Polaris-DataTable__Heading--flush
+    ):first-child {
     padding-left: var(--p-space-400);
   }
 
   .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--flush):last-child,
-  .Polaris-DataTable__Heading:not(.Polaris-DataTable__Heading--flush):last-child {
+  .Polaris-DataTable__Heading:not(
+      .Polaris-DataTable__Heading--flush
+    ):last-child {
     padding-right: var(--p-space-400);
   }
 }

data/app/assets/stylesheets/polaris_view_components.css

@@ -537,11 +537,18 @@
     width: 100%;
   }/* Select *//* Fix for Safari bug: https://github.com/baoagency/polaris_view_components/issues/454 */select.Polaris-Select__Input {
   font-weight: 400;
-}html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--flush):first-child,
-  html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Heading:not(.Polaris-DataTable__Heading--flush):first-child {
+}html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__TableRow {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 250px;
+  }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--flush):first-child,
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Heading:not(
+      .Polaris-DataTable__Heading--flush
+    ):first-child {
     padding-left: var(--p-space-400);
   }html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Cell:not(.Polaris-DataTable__Cell--flush):last-child,
-  html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Heading:not(.Polaris-DataTable__Heading--flush):last-child {
+  html[class~="Polaris-Summer-Editions-2023"] .Polaris-DataTable .Polaris-DataTable__Heading:not(
+      .Polaris-DataTable__Heading--flush
+    ):last-child {
     padding-right: var(--p-space-400);
   }html[class~="Polaris-Summer-Editions-2023"] .Polaris-FooterHelp .Polaris-FooterHelp__Text {
     font-size: var(--p-font-size-325);

data/app/components/polaris/data_table_component.rb

@@ -56,7 +56,6 @@ module Polaris
         )
         args[:id] = dom_id(row) if row.respond_to?(:to_key)
         args[:data] ||= {}
-        args[:data][:polaris_data_table_target] = "row"
       end
     end
 

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "3.1.0"
+    VERSION = "3.1.1"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 3.1.0
+  version: 3.1.1
 platform: ruby
 authors:
 - Dan Gamble