playbook_ui 14.18.0.pre.alpha.PLAY20397473 → 14.18.0.pre.alpha.PLAY20787400

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4bc5779960ba7f571c7cd87d5773540c2139d9f4adb94457165e52930535f6a7
-  data.tar.gz: 93680de6573f7806d777b9c6c6ecbf3b10c276fe3fa0a11681ccda102bb6cdd8
+  metadata.gz: eaa89f27b581b891e8f2e308b3c2878cae2b2073485c731ab1f2143ce5201c43
+  data.tar.gz: 43c6a430f135f407da1de984fc6eb79d4aad2c5ca6e3228e22648c7a5df640b5
 SHA512:
-  metadata.gz: 4b1c508735d4e090a002f75f5f71db00737a43faaff866ec9db3681d76954b47bc1f2b2450b71f527f95e1eb6e3657859c02386146f14197dab03e06da994f99
-  data.tar.gz: 68c25d0f783989cf56a643fc9e88fe2b13d71901b9615858c9cae894dcf6dd3fa796603ef1ae40267e440c0342d4b26a9452f368458812a9c70e810ba0c87f79
+  metadata.gz: 03ec5e9d380203c29d2ec6335961b6bbdc600b5f52186145a4dfc8a57bbb470d12bccb0b720a56620418236b945a488ad04b3421d865d4039e656ac88e2a8e45
+  data.tar.gz: 40f77a4576409998dff40d9ef56b172aa09b891ec42db213cf14f11ce31659cd1ec89135e2ed8b803f52318ba7c9556846e16aa9d10bde2569c78a7ee3bf13f7

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md

@@ -1,3 +1,9 @@
+**BETA VERSION**
+This kit's Rails version is currently under development. Some features may not work as expected, and breaking changes may still occur; use with caution.
+<br />
+<br />
+<br />
+
 The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
 
 ### table_data

data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows_react.jsx → _advanced_table_selectable_rows_no_subrows.jsx}

@@ -2,7 +2,7 @@ import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
-const AdvancedTableSelectableRowsNoSubrowsReact = (props) => {
+const AdvancedTableSelectableRowsNoSubrows = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
@@ -49,4 +49,4 @@ const AdvancedTableSelectableRowsNoSubrowsReact = (props) => {
   )
 }
 
-export default AdvancedTableSelectableRowsNoSubrowsReact
+export default AdvancedTableSelectableRowsNoSubrows

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md

@@ -1,5 +1 @@
-`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.
-
-The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection. 
-
-__NOTE__: Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function. 
+`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md

@@ -2,6 +2,5 @@
 
 When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
 
-The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection. 
-
-__NOTE__: Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function. 
+__ALERT TO DEVS__: UPDATE THIS PARAGRAPH IN THE FOLLOW UP STORY WHEN CHECKBOX FUNCTIONALITY IS SET PLEASE
+The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function. 

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -12,8 +12,8 @@ examples:
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  - advanced_table_selectable_rows_rails: Selectable Rows
-  - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
+  # - advanced_table_selectable_rows: Selectable Rows
+  # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
 
 
   react:
@@ -41,7 +41,7 @@ examples:
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
   # - advanced_table_no_subrows: Table with No Subrows
   - advanced_table_selectable_rows: Selectable Rows
-  - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
+  - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -15,7 +15,7 @@ export { default as AdvancedTablePaginationWithProps } from './_advanced_table_p
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
 export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
 export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'
-export { default as AdvancedTableSelectableRowsNoSubrowsReact } from './_advanced_table_selectable_rows_no_subrows_react.jsx'
+export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_table_selectable_rows_no_subrows.jsx'
 export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -9,182 +9,12 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     return ADVANCED_TABLE_SELECTOR;
   }
 
-  updateTableSelectedRowsAttribute() {
-    const mainTable = this.element.closest(".pb_advanced_table");
-    mainTable.dataset.selectedRows = JSON.stringify(Array.from(PbAdvancedTable.selectedRows));
-  }
-
-  // Check if the row is expanded or collapsed
-  // This is used to determine the background color of the row
-  // when the checkbox is checked or unchecked
-  isRowExpanded(rowEl) {
-    const closeIcon = rowEl.querySelector(UP_ARROW_SELECTOR);
-    return closeIcon?.style.display === "none" || !closeIcon;
-  }
-
-  updateParentCheckboxes(checkbox) {
-    const rowEl = checkbox.closest("tr");
-    if (!rowEl) return;
-
-    const table = rowEl.closest("table");
-    if (!table) return;
-
-    const contentTrail = rowEl.dataset.advancedTableContent;
-    if (!contentTrail) return;
-
-    const ancestorIds = contentTrail.split("-").slice(0, -1);
-
-    ancestorIds.reverse();
-    ancestorIds.forEach((ancestorId) => {
-      const parentRowSelector = `[data-advanced-table-content$="${ancestorId}"]`;
-      const parentRow = table.querySelector(parentRowSelector);
-      if (!parentRow) return;
-
-      const parentLabel = parentRow.querySelector("label[data-row-id]");
-      if (!parentLabel) return;
-
-      const parentCheckbox = parentLabel.querySelector(
-        "input[type='checkbox']"
-      );
-      if (!parentCheckbox) return;
-
-      // Find all immediate children of parent linked to ancestor Id, filter our subrow headers
-      const children = Array.from(
-        table.querySelectorAll(`tr[data-row-parent$="_${ancestorId}"]`)
-      ).filter((child) => {
-        const content = child.dataset.advancedTableContent;
-        return !(content && content.endsWith("sr"));
-      });
-
-      const allChildrenChecked = Array.from(children).every((child) => {
-        const childLabel = child.querySelector("label[data-row-id]");
-        if (!childLabel) return false;
-        const childCheckbox = childLabel.querySelector(
-          "input[type='checkbox']"
-        );
-        if (!childCheckbox) return false;
-        return childCheckbox.checked;
-      });
-
-      // Update parent checkbox
-      parentCheckbox.checked = allChildrenChecked;
-
-      const parentCheckboxId = parentCheckbox.id;
-      if (allChildrenChecked) {
-        PbAdvancedTable.selectedRows.add(parentCheckboxId);
-        parentRow.classList.add("bg-row-selection");
-        parentRow.classList.remove("bg-white", "bg-silver");
-      } else {
-        PbAdvancedTable.selectedRows.delete(parentCheckboxId);
-      }
-      if (!allChildrenChecked) {
-        parentRow.classList.remove("bg-row-selection");
-  
-        if (this.isRowExpanded(parentRow)) {
-          parentRow.classList.remove("bg-silver");
-          parentRow.classList.add("bg-white");
-        } else {
-          parentRow.classList.remove("bg-white");
-          parentRow.classList.add("bg-silver");
-        }
-      }
-    });
-  }
-
-  handleCheckboxClick(event) {
-    const checkbox = event.currentTarget;
-    const rowId = checkbox.id;
-    const isChecked = checkbox.checked;
-    const rowEl = checkbox.closest("tr");
-
-    if (isChecked) {
-      PbAdvancedTable.selectedRows.add(rowId);
-      rowEl.classList.add("bg-row-selection");
-      rowEl.classList.remove("bg-white", "bg-silver");
-    } else {
-      PbAdvancedTable.selectedRows.delete(rowId);
-    }
-     // Update background color on row
-    if (!isChecked) {
-      rowEl.classList.remove("bg-row-selection");
-
-      if (this.isRowExpanded(rowEl)) {
-        rowEl.classList.remove("bg-silver");
-        rowEl.classList.add("bg-white");
-      } else {
-        rowEl.classList.remove("bg-white");
-        rowEl.classList.add("bg-silver");
-      }
-    }
-    if (rowEl) {
-      const table = rowEl.closest("table");
-      const rowContent = rowEl.dataset.advancedTableContent;
-
-      if (rowContent) {
-        const childRows = table.querySelectorAll(
-          `[data-advanced-table-content^="${rowContent}-"]`
-        );
-
-        childRows.forEach((childRow) => {
-          const label = childRow.querySelector("label[data-row-id]");
-          if (!label) return;
-
-          const childCheckbox = label.querySelector("input[type='checkbox']");
-          if (!childCheckbox) return;
-
-          childCheckbox.checked = isChecked;
-
-          const childRowId = childCheckbox.id;
-          const childRowEl = childCheckbox.closest("tr");
-          if (isChecked) {
-            PbAdvancedTable.selectedRows.add(childRowId);
-            childRowEl?.classList.add("bg-row-selection");
-            childRowEl?.classList.remove("bg-white", "bg-silver");
-          } else {
-            PbAdvancedTable.selectedRows.delete(childRowId);
-          }
-          if (!isChecked) {
-            childRowEl?.classList.remove("bg-row-selection");
-
-            if (this.isRowExpanded(childRowEl)) {
-              childRowEl?.classList.remove("bg-silver");
-              childRowEl?.classList.add("bg-white");
-            } else {
-              childRowEl?.classList.remove("bg-white");
-              childRowEl?.classList.add("bg-silver");
-            }
-          }
-        });
-      }
-    }
-
-    this.updateParentCheckboxes(checkbox);
-
-    this.updateTableSelectedRowsAttribute();
-
-    const table = checkbox.closest("table");
-    const selectAllCheckbox = table.querySelector("#select-all-rows");
-
-    if (selectAllCheckbox) {
-      const allCheckboxes = table.querySelectorAll(
-        "label[data-row-id] input[type='checkbox']"
-      );
-      const allChecked = Array.from(allCheckboxes).every((cb) => cb.checked);
-
-      const selectAllInput = selectAllCheckbox.querySelector(
-        'input[type="checkbox"]'
-      );
-      selectAllInput.checked = allChecked;
-    }
-  }
-
   get target() {
     const table = this.element.closest("table");
     return table.querySelectorAll(`[data-row-parent="${this.element.id}"]`);
   }
 
   static expandedRows = new Set();
-  static selectedRows = new Set();
   static isCollapsing = false;
 
   connect() {
@@ -201,31 +31,17 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         this.toggleElement(this.target);
       }
     });
-  
-    this.hideCloseIcon();
-  
-    const table = this.element.closest("table");
-  
-    // Prevent duplicate initialization
-    if (table.dataset.pbAdvancedTableInitialized) return;
-    table.dataset.pbAdvancedTableInitialized = "true";
-  
-    // Bind checkbox change handlers for all row checkboxes
-    const checkboxLabels = table.querySelectorAll("label[data-row-id]");
-    checkboxLabels.forEach((label) => {
-      const checkbox = label.querySelector("input[type='checkbox']");
-      if (!checkbox) return;
-      checkbox.addEventListener("change", (event) => {
-        this.handleCheckboxClick(event);
-      });
-    });
-  
-    // Bind nested row expansion logic
-    const nestedButtons = table.querySelectorAll("[data-advanced-table]");
+    
+    this.hideCloseIcon()
+
+    const nestedButtons = this.element
+      .closest("table")
+      .querySelectorAll("[data-advanced-table]");
     nestedButtons.forEach((button) => {
       button.addEventListener("click", () => {
         const isExpanded =
-          button.querySelector(UP_ARROW_SELECTOR).style.display === "inline-block";
+          button.querySelector(UP_ARROW_SELECTOR).style.display ===
+          "inline-block";
         if (isExpanded) {
           PbAdvancedTable.expandedRows.add(button.id);
         } else {
@@ -233,46 +49,12 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         }
       });
     });
-  
-    // Bind select-all logic for this table
-    const selectAllCheckbox = table.querySelector("#select-all-rows");
-    if (selectAllCheckbox) {
-      selectAllCheckbox.addEventListener("change", () => {
-        const checkboxInput = selectAllCheckbox.querySelector('input[type="checkbox"]');
-        const checkAll = checkboxInput.checked;
-  
-        const checkboxes = Array.from(
-          table.querySelectorAll("label[data-row-id] input[type='checkbox']")
-        );
-  
-        checkboxes.forEach((cb) => {
-          cb.checked = checkAll;
-          const rowId = cb.id;
-          const rowEl = cb.closest("tr");
-
-          if (checkAll) {
-            PbAdvancedTable.selectedRows.add(rowId);
-            rowEl?.classList.add("bg-row-selection");
-            rowEl?.classList.remove("bg-white", "bg-silver");
-          } else {
-            PbAdvancedTable.selectedRows.delete(rowId);
-            rowEl?.classList.remove("bg-row-selection");
-            rowEl?.classList.add("bg-white");
-          }
-        });
-  
-        checkboxes.forEach((cb) => this.updateParentCheckboxes(cb));
-  
-        this.updateTableSelectedRowsAttribute();
-      });
-    }
   }
-  
 
   hideCloseIcon() {
     const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
     closeIcon.style.display = "none";
-  }
+}
 
   showElement(elements) {
     elements.forEach((elem) => {
@@ -369,6 +151,7 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     }
   }
 
+
   displayDownArrow() {
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
       "inline-block";
@@ -455,4 +238,4 @@ window.expandAllRows = (element) => {
 
 window.expandAllSubRows = (element, rowDepth) => {
   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
-};
+};

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -55,15 +55,7 @@ module Playbook
         # Subrow header if applicable
         output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: leaf_columns, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail, classname: "toggle-content", responsive: responsive, subrow_data_attributes: subrow_data_attributes }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
-        current_data_attributes = if current_depth.zero?
-                                    {
-                                      row_depth: 0,
-                                      advanced_table_content: row.object_id.to_s,
-                                      row_parent: nil,
-                                    }
-                                  else
-                                    table_data_attributes
-                                  end
+        current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
         # Additional class and data attributes needed for toggle logic
         output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion })

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -54,6 +54,9 @@ module Playbook
             pb_rails("checkbox", props: {
                        id: "select-all-rows",
                        name: "select-all-rows",
+                       data: {
+                         action: "click->pb-advanced-table#toggleAllRowSelection",
+                       },
                      })
           end
         end

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -60,7 +60,7 @@ module Playbook
                        name: "select-row-#{row_id || row.object_id}",
                        data: {
                          row_id: row_id || row.object_id.to_s,
-                         flat_advanced_table_select: true,
+                         action: "click->pb-advanced-table#toggleRowSelection",
                        },
                      })
           end
@@ -75,6 +75,7 @@ module Playbook
                      name: "select-row-#{row_id || row.object_id}",
                      data: {
                        row_id: row_id || row.object_id.to_s,
+                       action: "click->pb-advanced-table#toggleRowSelection",
                      },
                    })
         end

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx

@@ -1,14 +1,11 @@
 import React from 'react'
 
 import DatePicker from '../_date_picker'
-import Icon from '../../pb_icon/_icon'
 
 const DatePickerError = (props) => (
   <div>
     <DatePicker
-        error={<>
-          <Icon icon="warning" /> Invalid date. Please pick a valid date.
-        </>}
+        error="Invalid date. Please pick a valid date."
         pickerId="date-picker-error"
         {...props}
     />

data/app/pb_kits/playbook/pb_draggable/docs/example.yml

@@ -17,6 +17,5 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_drop_zones: Draggable Drop Zones
-  - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_event_listeners: Draggable Event Listeners
+

data/app/pb_kits/playbook/pb_draggable/draggable.rb

@@ -5,17 +5,9 @@ module Playbook
     class Draggable < ::Playbook::KitBase
       prop :initial_items, type: Playbook::Props::Array,
                            default: []
-      prop :drop_zone_type, type: Playbook::Props::Enum,
-                            values: %w[ghost shadow outline line],
-                            default: "ghost"
-      prop :drop_zone_color, type: Playbook::Props::Enum,
-                             values: %w[neutral primary purple],
-                             default: "neutral"
 
       def data
-        Hash(prop(:data)).merge(pb_draggable: true,
-                                drop_zone_type: drop_zone_type,
-                                drop_zone_color: drop_zone_color)
+        Hash(prop(:data)).merge(pb_draggable: true)
       end
 
       def classname