playbook_ui 14.12.0.pre.rc.6 → 14.12.0.pre.rc.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c209d4ff36d749f527f44e280e1324f50a89162f0a18052be0c30e80470b0b67
-  data.tar.gz: 827cfdc6eb69f7a72d77de5f3c68860d48d9e8cfc2193d66dd873b3dcfe17a07
+  metadata.gz: dde2f316d84b4ddc9cc0377b283b36fd9c59cca4d76e16392696c5daf0b91b74
+  data.tar.gz: f91a51386632b5cd58edc7e946d582bf49c9fe22c58a932a01d3b82b7c21a0f9
 SHA512:
-  metadata.gz: ba3643c54c7484e92c81b95ae4d49c7b4760926bd7248d727166a7b249fbfb71b051b70ff2b2ee53add4111a9825df2034bc9c42bd220b432f88bbe28facf000
-  data.tar.gz: a245498faf9f989c0d007886cb4d620811e0d20129f4c8233495b54cce83be44a30aa3cd15012ac1812bcdc024e4bb1c0da36594311c3a0d13507991e7215ce2
+  metadata.gz: 44737f2c553969cbfc368ccc5d781ce4f08eca1f39d4a61c30bb185b6ca2836d63ee389005fa44e0dde65b39d62835ec2c1d7f216f322fbe05f54b28c8206ca8
+  data.tar.gz: 163371a4bf7d5c68446346237baf84ea638c173fe841091ec13190dac3e422dce14ea3564a08c78e69b6d4a036fa50de986a27108ffadcb3c4a2cd9f2f8465d7

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -2,4 +2,4 @@ The `defaultDate`/`default_date` prop has a null or empty string value by defaul
 
 If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
 
-
+You can leverage the `defaultDate`/`default_date` prop with custom logic in your filter or controller files where the determination of the default value changes based on user interaction. The page can load with an initial default date picker value or placeholder text, then after filter submission save the submitted values as the "new default" (via state or params).

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb

@@ -6,14 +6,8 @@
 
 ] %>
 
-<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
-  <%= pb_rails("draggable/draggable_container") do %>
-    <%= pb_rails("list", props: {ordered: false}) do %>
-        <% initial_items.each do |item| %>
-            <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-                <%= pb_rails("list/item") do %><%= item[:name] %><% end %>
-            <% end %>
-        <% end %>
-    <% end %>
+<%= pb_rails("list", props: { enable_drag: true, items: initial_items }) do %>
+  <% initial_items.each do |item| %>
+    <%= pb_rails("list/item", props:{drag_id: item[:id]}) do %><%= item[:name] %><% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md

@@ -0,0 +1,5 @@
+For a simplified version of the Draggable API for the List kit, you can do the following:
+
+The List kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on List kit with an array of the included items AND `drag_id` prop on ListItems. You will also need to include the `items` prop containing your array of listed items for the Draggable API.
+
+An additional optional boolean prop (set to true by default) of `drag_handle` is also available on ListItem kit to show the drag handle icon.

data/app/pb_kits/playbook/pb_list/item.html.erb

@@ -1,10 +1,32 @@
-<%= content_tag(:li,
-                aria: object.aria,
-                class: object.classname,
-                data: object.data,
-                id: object.id,
-                tabindex: object.tabindex,
-                **combined_html_options
-  ) do %>
+<% if object.draggable? %>
+  <%= pb_rails("draggable/draggable_item", props:{drag_id: object.drag_id}) do %>
+    <%= content_tag(:li,
+                    aria: object.aria,
+                    class: object.classname,
+                    data: object.data,
+                    id: object.id,
+                    tabindex: object.tabindex,
+                    **combined_html_options
+      ) do %>
+      <% if object.drag_handle %>
+        <span style="vertical-align: middle;">
+          <%= pb_rails("body") do %>
+            <svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
+          <% end %>
+        </span>
+      <% end %>
+      <%= content.presence %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= content_tag(:li,
+                  aria: object.aria,
+                  class: object.classname,
+                  data: object.data,
+                  id: object.id,
+                  tabindex: object.tabindex,
+                  **combined_html_options
+    ) do %>
     <%= content.presence %>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/item.rb

@@ -3,11 +3,18 @@
 module Playbook
   module PbList
     class Item < Playbook::KitBase
+      prop :drag_handle, type: Playbook::Props::Boolean,
+                         default: true
+      prop :drag_id, type: Playbook::Props::String
       prop :tabindex
 
       def classname
         generate_classname("pb_item_kit")
       end
+
+      def draggable?
+        drag_id.present?
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_list/list.html.erb

@@ -1,13 +1,33 @@
-<%= content_tag(:div, class: object.list_classname) do %>
-  <%= content_tag(:"#{object.ordered_class}",
-                  aria: object.aria,
-                  class: object.classname,
-                  data: object.data,
-                  id: object.id,
-                  role: object.role,
-                  tabindex: object.tabindex,
-                  **combined_html_options
-    ) do %>
-      <%= content.presence %>
+<% if object.enable_drag %>
+  <%= pb_rails("draggable", props: {initial_items: object.items}) do %>
+    <%= pb_rails("draggable/draggable_container") do %>
+      <%= content_tag(:div, class: object.list_classname) do %>
+        <%= content_tag(:"#{object.ordered_class}",
+                        aria: object.aria,
+                        class: object.classname,
+                        data: object.data,
+                        id: object.id,
+                        role: object.role,
+                        tabindex: object.tabindex,
+                        **combined_html_options
+          ) do %>
+            <%= content.presence %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= content_tag(:div, class: object.list_classname) do %>
+    <%= content_tag(:"#{object.ordered_class}",
+                    aria: object.aria,
+                    class: object.classname,
+                    data: object.data,
+                    id: object.id,
+                    role: object.role,
+                    tabindex: object.tabindex,
+                    **combined_html_options
+      ) do %>
+        <%= content.presence %>
+    <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_list/list.rb

@@ -7,6 +7,10 @@ module Playbook
                         default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
+      prop :enable_drag, type: Playbook::Props::Boolean,
+                         default: false
+      prop :items, type: Playbook::Props::Array,
+                   default: []
       prop :layout, type: Playbook::Props::Enum,
                     values: ["left", "right", ""],
                     default: ""

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, globalInlineProps } from '../utilities/globalProps'
-import PbTable from '.'
 import {
     TableHead,
     TableHeader,
@@ -10,6 +9,7 @@ import {
     TableRow,
     TableCell,
 } from "./subcomponents";
+import { addDataTitle } from './utilities/addDataTitle'
 
 type TableProps = {
     aria?: { [key: string]: string },
@@ -196,8 +196,7 @@ const Table = (props: TableProps): React.ReactElement => {
     }, [stickyRightColumn]);
 
     useEffect(() => {
-        const instance = new PbTable()
-        instance.connect()
+        addDataTitle()
     }, [])
 
     return (

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb

@@ -0,0 +1,74 @@
+<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["a"], sticky_right_column: ["b"] }) do %>
+  <thead>
+    <tr>
+      <th id="a">Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+      <th>Column 6</th>
+      <th>Column 7</th>
+      <th>Column 8</th>
+      <th>Column 9</th>
+      <th>Column 10</th>
+      <th>Column 11</th>
+      <th>Column 12</th>
+      <th>Column 13</th>
+      <th>Column 14</th>
+      <th id="b">Column 15</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td id="a">Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td id="b">Value 15</td>
+    </tr>
+    <tr>
+      <td id="a">Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td id="b">Value 15</td>
+    </tr>
+    <tr>
+      <td id="a">Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td>Value 13</td>
+      <td>Value 14</td>
+      <td id="b">Value 15</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md

@@ -0,0 +1,3 @@
+The `sticky_left_column` and `sticky_right_column` props can be used together on the same table as needed.
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md

@@ -1,3 +1,3 @@
-The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+The `sticky_left_column` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
 
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `sticky_left_column`.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb

@@ -0,0 +1,74 @@
+<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_right_column: ["13", "14", "15"] }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+      <th>Column 6</th>
+      <th>Column 7</th>
+      <th>Column 8</th>
+      <th>Column 9</th>
+      <th>Column 10</th>
+      <th>Column 11</th>
+      <th>Column 12</th>
+      <th id="13">Column 13</th>
+      <th id="14">Column 14</th>
+      <th id="15">Column 15</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td id="13">Value 13</td>
+      <td id="14">Value 14</td>
+      <td id="15">Value 15</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td id="13">Value 13</td>
+      <td id="14">Value 14</td>
+      <td id="15">Value 15</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Value 6</td>
+      <td>Value 7</td>
+      <td>Value 8</td>
+      <td>Value 9</td>
+      <td>Value 10</td>
+      <td>Value 11</td>
+      <td>Value 12</td>
+      <td id="13">Value 13</td>
+      <td id="14">Value 14</td>
+      <td id="15">Value 15</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md

@@ -0,0 +1,3 @@
+The `sticky_right_column` prop works in the same way as the above `sticky_left_column` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+
+Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `sticky_right_column` prop.

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

@@ -5,6 +5,8 @@ examples:
     - table_lg: Large
     - table_sticky: Sticky Header
     - table_sticky_left_columns: Sticky Left Column
+    - table_sticky_right_columns: Sticky Right Column
+    - table_sticky_columns: Sticky Left and Right Columns
     - table_header: Table Header
     - table_alignment_row_rails: Row Alignment
     - table_alignment_column_rails: Cell Alignment

data/app/pb_kits/playbook/pb_table/index.ts

@@ -1,73 +1,67 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
+const TABLE_WRAPPER_SELECTOR = "[data-pb-table-wrapper]";
+
 export default class PbTable extends PbEnhancedElement {
-    private stickyLeftColumns: string[] = [];
-    private handleStickyLeftColumnsRef: () => void;
+    stickyLeftColumns: string[] = [];
+    stickyRightColumns: string[] = [];
+    stickyRightColumnsReversed: string[] = [];
 
     static get selector(): string {
-      return '.table-responsive-collapse'
+      return TABLE_WRAPPER_SELECTOR;
     }
 
-    connect(): void {
-      const tables = document.querySelectorAll('.table-responsive-collapse');
-      // Each Table
-      [].forEach.call(tables, (table: HTMLTableElement) => {
-        // Header Titles
+    connect() {
+      if (this.element.classList.contains('table-responsive-collapse')) {
         const headers: string[] = [];
-        [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+
+        [].forEach.call(this.element.querySelectorAll('th'), (header: HTMLTableCellElement) => {
             const colSpan = header.colSpan
             for (let i = 0; i < colSpan; i++) {
               headers.push(header.textContent.replace(/\r?\n|\r/, ''));
             }
         });
-        // for each row in tbody
-        [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
-          // for each cell
+  
+        [].forEach.call(this.element.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
           [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
-            // apply the attribute
             cell.setAttribute('data-title', headers[headerIndex])
           })
         })
-      });
+      }
 
-      // New sticky columns logic
       this.initStickyLeftColumns();
+      this.initStickyRightColumns();
     }
 
-    private initStickyLeftColumns(): void {
-      // Find tables with sticky-left-column class
-      const tables = document.querySelectorAll('.sticky-left-column');
+    initStickyLeftColumns() {
+      const table = this.element.querySelector('.sticky-left-column');
 
-      tables.forEach((table) => {
-        // Extract sticky left column IDs by looking at the component's class
+      if (table) {
         const classList = Array.from(table.classList);
+        const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-left-columns-ids-'));
 
-        // Look for classes in the format sticky-left-column-{ids}
-        const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-columns-'));
         if (stickyColumnClass) {
-          // Extract the IDs from the class name
           this.stickyLeftColumns = stickyColumnClass
-              .replace('sticky-columns-', '')
-              .split('-');
+            .replace('sticky-left-columns-ids-', '')
+            .split('-');
 
           if (this.stickyLeftColumns.length > 0) {
             setTimeout(() => {
-              this.handleStickyLeftColumnsRef = this.handleStickyLeftColumns.bind(this);
               this.handleStickyLeftColumns();
-              window.addEventListener('resize', this.handleStickyLeftColumnsRef);
+              window.addEventListener('resize', () => this.handleStickyLeftColumns());
             }, 10);
           }
         }
-      });
+      }
     }
 
-    private handleStickyLeftColumns(): void {
+    handleStickyLeftColumns() {
       let accumulatedWidth = 0;
 
       this.stickyLeftColumns.forEach((colId, index) => {
         const isLastColumn = index === this.stickyLeftColumns.length - 1;
-        const header = document.querySelector(`th[id="${colId}"]`);
-        const cells = document.querySelectorAll(`td[id="${colId}"]`);
+        const header = this.element.querySelector(`th[id="${colId}"]`);
+        const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
 
         if (header) {
           header.classList.add('sticky');
@@ -99,10 +93,75 @@ export default class PbTable extends PbEnhancedElement {
       });
     }
 
+    initStickyRightColumns() {
+      const table = this.element.querySelector('.sticky-right-column');
+
+      if (table) {
+        const classList = Array.from(table.classList);
+        const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-right-columns-ids-'));
+
+        if (stickyColumnClass) {
+          this.stickyRightColumns = stickyColumnClass
+            .replace('sticky-right-columns-ids-', '')
+            .split('-');
+          this.stickyRightColumnsReversed = this.stickyRightColumns.reverse();
+
+          if (this.stickyRightColumns.length > 0) {
+            setTimeout(() => {
+              this.handleStickyRightColumns();
+              window.addEventListener('resize', () => this.handleStickyRightColumns());
+            }, 10);
+          }
+        }
+      }
+    }
+
+    handleStickyRightColumns() {
+      let accumulatedWidth = 0;
+
+      this.stickyRightColumnsReversed.forEach((colId, index) => {
+        const isLastColumn = index === this.stickyRightColumns.length - 1;
+        const header = this.element.querySelector(`th[id="${colId}"]`);
+        const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
+
+        if (header) {
+          header.classList.add('sticky');
+          (header as HTMLElement).style.right = `${accumulatedWidth}px`;
+
+          if (!isLastColumn) {
+            header.classList.add('with-border-left');
+            header.classList.remove('sticky-right-shadow');
+          } else {
+            header.classList.remove('with-border-right');
+            header.classList.add('sticky-right-shadow');
+          }
+
+          accumulatedWidth += (header as HTMLElement).offsetWidth;
+        }
+
+        cells.forEach((cell) => {
+          cell.classList.add('sticky');
+          (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+
+          if (!isLastColumn) {
+            cell.classList.add('with-border-left');
+            cell.classList.remove('sticky-right-shadow');
+          } else {
+            cell.classList.remove('with-border-left');
+            cell.classList.add('sticky-right-shadow');
+          }
+        });
+      });
+    }
+
     // Cleanup method to remove event listener
-    disconnect(): void {
-      if (this.handleStickyLeftColumnsRef) {
-        window.removeEventListener('resize', this.handleStickyLeftColumnsRef);
+    disconnect() {
+      if (this.stickyLeftColumns.length > 0) {
+        window.removeEventListener('resize', () => this.handleStickyLeftColumns());
+      }
+
+      if (this.stickyRightColumns.length > 0) {
+        window.removeEventListener('resize', () => this.handleStickyRightColumns());
       }
     }
 }

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -4,7 +4,7 @@
   <% responsive_class = nil %>
 <% end %>
 
-<%= content_tag(:div, class: responsive_class) do %>
+<%= content_tag(:div, class: responsive_class, 'data-pb-table-wrapper' => true) do %>
   <% if object.tag == "table" %>
     <%= content_tag(:table,
       aria: object.aria,

data/app/pb_kits/playbook/pb_table/table.rb

@@ -25,6 +25,8 @@ module Playbook
                     default: false
       prop :sticky_left_column, type: Playbook::Props::Array,
                                 default: []
+      prop :sticky_right_column, type: Playbook::Props::Array,
+                                 default: []
       prop :vertical_border, type: Playbook::Props::Boolean,
                              default: false
       prop :striped, type: Playbook::Props::Boolean,
@@ -40,7 +42,7 @@ module Playbook
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
           disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
-          collapse_class, vertical_border_class, striped_class, outer_padding_class,
+          sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
           "table-responsive-#{responsive}", separator: " "
         )
       end
@@ -83,7 +85,7 @@ module Playbook
         if sticky_left_column.empty?
           nil
         else
-          sticky_col_classname = "sticky-left-column sticky-columns"
+          sticky_col_classname = "sticky-left-column sticky-left-columns-ids"
           sticky_left_column.each do |id|
             sticky_col_classname += "-#{id}"
           end
@@ -92,6 +94,19 @@ module Playbook
         end
       end
 
+      def sticky_right_column_class
+        if sticky_right_column.empty?
+          nil
+        else
+          sticky_col_classname = "sticky-right-column sticky-right-columns-ids"
+          sticky_right_column.each do |id|
+            sticky_col_classname += "-#{id}"
+          end
+
+          sticky_col_classname
+        end
+      end
+
       def striped_class
         striped ? "striped" : nil
       end

data/app/pb_kits/playbook/pb_table/utilities/addDataTitle.ts

@@ -0,0 +1,22 @@
+export const addDataTitle = () => {
+    const tables = document.querySelectorAll('.table-responsive-collapse');
+    // Each Table
+    [].forEach.call(tables, (table: HTMLTableElement) => {
+        // Header Titles
+        const headers: string[] = [];
+        [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+            const colSpan = header.colSpan
+            for (let i = 0; i < colSpan; i++) {
+                headers.push(header.textContent.replace(/\r?\n|\r/, ''));
+            }
+        });
+        // for each row in tbody
+        [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
+            // for each cell
+            [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
+                // apply the attribute
+                cell.setAttribute('data-title', headers[headerIndex])
+            })
+        })
+    });
+}

data/dist/chunks/{_typeahead-BNULwihE.js → _typeahead-DCD3NrAk.js}

@@ -1,4 +1,4 @@
-import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,j as getAllIcons,z as get,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-B7sgJtGS.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
+import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,j as getAllIcons,z as get,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-OFT985dg.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see