polaris_view_components 3.1.0 → 3.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ca5d44863ed4e92c96355b43938b83e3d6c35faf836f21ec8d30cfbe4bf955a3
-  data.tar.gz: 569be82094984c0afb8ebaa30950aef78f11e5365ebcdebeb3d1bde5da03311e
+  metadata.gz: 57a3ea0bb6344a5372061ca2a5b455b9f2d1e854ceb2c0cbeaed82c636d37513
+  data.tar.gz: 7365621125e7e887ddf61125746d64486755ad7801b1ce86320125485a88c8f5
 SHA512:
-  metadata.gz: f9cac7d32e9bce452bdd695c371fe9a91cd6ce79be8579abdf01b6d73deecda3f347370931343ee932c79e7ab093eb5989006c6e02014f80a9e35b403d66a605
-  data.tar.gz: 4350c590a31131ec013cfe3982c397005d05e52bee58b996bb6cfa48553605765bcbd97dcd183c9b6dea8475f2bc6a8f49eee95d86053ee9e1717caf31875d4c
+  metadata.gz: e0b9cfa42b552868991e68b4c629290fe603d013272ab81238e95a2327c1988c0501e71032b5d6f9bca2cae9cc15c4df10d1b6f4cdc543da6e890a188fca4e90
+  data.tar.gz: f35113d1df4ac772859cb297182172796533786c08511e8d26c57173e1d2f36c709bb5654c751ce1b92e4c19ad0dd22f00a130172ba9229d6639203dff0078b2

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/app/helpers/polaris/form_builder.rb

@@ -58,7 +58,7 @@ module Polaris
     def polaris_select(method, **options, &block)
       apply_error_options(options, method)
 
-      value = object&.public_send(method)
+      value = object.public_send(method) if object.respond_to?(method)
       if value.present?
         options[:selected] = value
       end
@@ -86,7 +86,7 @@ module Polaris
     def polaris_collection_check_boxes(method, collection, value_method, text_method, **options, &block)
       apply_error_options(options, method)
 
-      value = object&.public_send(method)
+      value = object.public_send(method) if object.respond_to?(method)
       if value.present?
         options[:selected] = value.map { |el| el.public_send(value_method) }
       end

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "3.1.0"
+    VERSION = "3.1.2"
   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.2
 platform: ruby
 authors:
 - Dan Gamble