playbook_ui 14.11.1.pre.alpha.PBNTR440enableglobalpropspbformwith5624 → 14.11.1.pre.alpha.PBNTR573datepickerinvestigation5355

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

@@ -1,207 +1,108 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
-const TABLE_WRAPPER_SELECTOR = "[data-pb-table-wrapper]";
-const TABLE_COLLAPSIBLE_WRAPPER_SELECTOR = "[data-pb-table-collapsible-wrapper]";
-
 export default class PbTable extends PbEnhancedElement {
-  stickyLeftColumns: string[] = [];
-  stickyRightColumns: string[] = [];
-  stickyRightColumnsReversed: string[] = [];
-
-  static get selector(): string {
-    return TABLE_WRAPPER_SELECTOR;
-  }
-
-  connect() {
-    if (this.element.classList.contains('table-responsive-collapse')) {
-      const headers: string[] = [];
-
-      [].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/, ''));
-        }
-      });
-
-      [].forEach.call(this.element.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
-        [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
-          cell.setAttribute('data-title', headers[headerIndex])
-        })
-      })
-    }
+    private stickyLeftColumns: string[] = [];
+    private handleStickyLeftColumnsRef: () => void;
 
-    this.initStickyLeftColumns();
-    this.initStickyRightColumns();
-    this.handleCollapsibleClick();
-    this.handleCollapsibleRow();
-  }
-
-  initStickyLeftColumns() {
-    const table = this.element.querySelector('.sticky-left-column');
-
-    if (table) {
-      const classList = Array.from(table.classList);
-      const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-left-columns-ids-'));
-
-      if (stickyColumnClass) {
-        this.stickyLeftColumns = stickyColumnClass
-          .replace('sticky-left-columns-ids-', '')
-          .split('-');
-
-        if (this.stickyLeftColumns.length > 0) {
-          setTimeout(() => {
-            this.handleStickyLeftColumns();
-            window.addEventListener('resize', () => this.handleStickyLeftColumns());
-          }, 10);
-        }
-      }
+    static get selector(): string {
+      return '.table-responsive-collapse'
     }
-  }
-
-  handleStickyLeftColumns() {
-    let accumulatedWidth = 0;
-
-    this.stickyLeftColumns.forEach((colId, index) => {
-      const isLastColumn = index === this.stickyLeftColumns.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.left = `${accumulatedWidth}px`;
-
-        if (!isLastColumn) {
-          header.classList.add('with-border-right');
-          header.classList.remove('sticky-left-shadow');
-        } else {
-          header.classList.remove('with-border-right');
-          header.classList.add('sticky-left-shadow');
-        }
 
-        accumulatedWidth += (header as HTMLElement).offsetWidth;
-      }
+    connect(): void {
+      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])
+          })
+        })
+      });
 
-      cells.forEach((cell) => {
-        cell.classList.add('sticky');
-        (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+      // New sticky columns logic
+      this.initStickyLeftColumns();
+    }
 
-        if (!isLastColumn) {
-          cell.classList.add('with-border-right');
-          cell.classList.remove('sticky-left-shadow');
-        } else {
-          cell.classList.remove('with-border-right');
-          cell.classList.add('sticky-left-shadow');
+    private initStickyLeftColumns(): void {
+      // Find tables with sticky-left-column class
+      const tables = document.querySelectorAll('.sticky-left-column');
+
+      tables.forEach((table) => {
+        // Extract sticky left column IDs by looking at the component's class
+        const classList = Array.from(table.classList);
+
+        // 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('-');
+
+          if (this.stickyLeftColumns.length > 0) {
+            setTimeout(() => {
+              this.handleStickyLeftColumnsRef = this.handleStickyLeftColumns.bind(this);
+              this.handleStickyLeftColumns();
+              window.addEventListener('resize', this.handleStickyLeftColumnsRef);
+            }, 10);
+          }
         }
       });
-    });
-  }
-
-  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;
-      }
+    private handleStickyLeftColumns(): void {
+      let accumulatedWidth = 0;
 
-      cells.forEach((cell) => {
-        cell.classList.add('sticky');
-        (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+      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}"]`);
 
-        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');
-        }
-      });
-    });
-  }
-
-  handleCollapsibleClick() {
-    const collapsibleElements = this.element.querySelectorAll(TABLE_COLLAPSIBLE_WRAPPER_SELECTOR);
-    collapsibleElements.forEach((collapsibleElement) => {
-      collapsibleElement.addEventListener('click', (event) => {
-        document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
-
-        const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
-        toggleElements.forEach(element => {
-          element.classList.toggle('no-border');
-          element.classList.toggle('border-active');
-        });
-      })
-    })
-  }
-
-  handleCollapsibleRow() {
-    const collapsibleRows = this.element.querySelectorAll('.pb_table_collapsible_row');
-    if (collapsibleRows.length > 0) {
-      collapsibleRows.forEach((row) => {
-        const previousRow = row.previousElementSibling;
-
-        if (
-          previousRow &&
-          previousRow.tagName === 'TR'
-        ) {
-          const tdCount = previousRow.querySelectorAll('td').length;
-          const collapsibleTd = row.querySelector('td');
-          if (collapsibleTd) {
-            collapsibleTd.colSpan = tdCount;
+        if (header) {
+          header.classList.add('sticky');
+          (header as HTMLElement).style.left = `${accumulatedWidth}px`;
+
+          if (!isLastColumn) {
+            header.classList.add('with-border-right');
+            header.classList.remove('sticky-left-shadow');
+          } else {
+            header.classList.remove('with-border-right');
+            header.classList.add('sticky-left-shadow');
           }
-        } else {
-          return
+
+          accumulatedWidth += (header as HTMLElement).offsetWidth;
         }
-      });
-    }
-  }
 
-  // Cleanup method to remove event listener
-  disconnect() {
-    if (this.stickyLeftColumns.length > 0) {
-      window.removeEventListener('resize', () => this.handleStickyLeftColumns());
+        cells.forEach((cell) => {
+          cell.classList.add('sticky');
+          (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+
+          if (!isLastColumn) {
+            cell.classList.add('with-border-right');
+            cell.classList.remove('sticky-left-shadow');
+          } else {
+            cell.classList.remove('with-border-right');
+            cell.classList.add('sticky-left-shadow');
+          }
+        });
+      });
     }
 
-    if (this.stickyRightColumns.length > 0) {
-      window.removeEventListener('resize', () => this.handleStickyRightColumns());
+    // Cleanup method to remove event listener
+    disconnect(): void {
+      if (this.handleStickyLeftColumnsRef) {
+        window.removeEventListener('resize', this.handleStickyLeftColumnsRef);
+      }
     }
-  }
-}
+}

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss

@@ -32,16 +32,4 @@
       }
     }
   }
-
-  .collapsible-tr {
-    cursor: pointer;
-  }
-
-  .no-border {
-    border-bottom: none !important;
-  }
-  
-  .border-active {
-    border-bottom: 1px;
-  }
 }

data/app/pb_kits/playbook/pb_table/styles/_scroll.scss

@@ -1,7 +1,7 @@
 @import "../../tokens/screen_sizes";
-@import "../../tokens/border_radius";
 
 .table-responsive-scroll {
+    display: block;
     overflow-x: scroll;
 
     // hides duplicate scroll bar for those that see two (byproduct of repeated table-responsive-scroll class
@@ -27,12 +27,11 @@
     // Responsive Styles
     @media (max-width: 1600px) {
         &[class*="table-responsive-scroll"] {
-                &:has(> table.table-card) {
-                    border-radius: $border_rad_light;
-                    box-shadow: 1px 0 0 0px $border_light,
+            border-radius: 4px;
+            box-shadow: 1px 0 0 0px $border_light,
                         -1px 0 0 0px $border_light
-                }
-            }
+        }
+
         &[class^=pb_table].table-sm.table-card thead tr th:first-child,
         &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
             border-left-width: 0px;

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

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

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

@@ -25,8 +25,6 @@ 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,
@@ -42,7 +40,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,
-          sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
+          collapse_class, vertical_border_class, striped_class, outer_padding_class,
           "table-responsive-#{responsive}", separator: " "
         )
       end
@@ -85,7 +83,7 @@ module Playbook
         if sticky_left_column.empty?
           nil
         else
-          sticky_col_classname = "sticky-left-column sticky-left-columns-ids"
+          sticky_col_classname = "sticky-left-column sticky-columns"
           sticky_left_column.each do |id|
             sticky_col_classname += "-#{id}"
           end
@@ -94,19 +92,6 @@ 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/table_row.html.erb

@@ -1,23 +1,4 @@
-<% if object.collapsible && object.tag == "table" %>
-    <%= content_tag(:tr,
-    aria: object.aria,
-    class: object.classname + " collapsible-tr",
-    data: object.data.merge(id: object.id),  
-    id: object.id,
-    'data-pb-table-collapsible-wrapper' => true,
-    **combined_html_options) do %>
-    <%= content.presence %>
-  <% end %>
-
-  <tr class="pb_table_collapsible_row">
-    <%= pb_rails("collapsible", props: { classname: "collapsible_border_toggle#{object.id}" + " no-border", name: "default-example", tag: "td", padding: "none" }) do %>
-       <%= pb_rails("flex", props: { data: { "collapsible-main": "true"} }) %>
-       <%= pb_rails("collapsible/collapsible_content", props: { classname: object.collapsible_side_highlight ? "table_collapsible_side_highlight" : "", padding: "none", margin: "none", id: "collapsed-toggle#{object.id}" }) do %>
-          <%= object.collapsible_content %>
-      <% end %>
-    <% end %>  
-  </tr>
-<% elsif object.tag == "table" %>
+<% if object.tag == "table" %>
     <%= content_tag(:tr,
       aria: object.aria,
       class: object.classname,

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

@@ -8,11 +8,6 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
-      prop :collapsible, type: Playbook::Props::Boolean,
-                         default: false
-      prop :collapsible_content
-      prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
-                                        default: false
 
       def classname
         generate_classname("pb_table_row_kit", side_highlight_class) + tag_class

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

@@ -8,7 +8,6 @@ examples:
   - text_input_inline: Inline
   - text_input_no_label: No Label
   - text_input_options: Input Options
-  - text_input_mask: Mask
   react:
   - text_input_default: Default
   - text_input_error: With Error
@@ -24,4 +23,4 @@ examples:
     - text_input_error_swift: With Error
     - text_input_disabled_swift: Disabled
     - text_input_add_on_swift: Add On
-    - text_input_props_swift: ""
+    - text_input_props_swift: ""

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -13,13 +13,9 @@
       <%= pb_rails("text_input/add_on", props: object.add_on_props) do %>
         <%= input_tag %>
       <% end %>
-    <% elsif mask.present? %>
-      <%= input_tag %>
-      <%= tag(:input, data: "sanitized-pb-input", id: sanitized_id, name: object.name, style: "display: none;") %>
     <% else %>
       <%= input_tag %>
     <% end %>
     <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
   <% end %>
 <% end %>
-

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -4,15 +4,6 @@
 module Playbook
   module PbTextInput
     class TextInput < Playbook::KitBase
-      VALID_MASKS = %w[currency zipCode postalCode ssn].freeze
-
-      MASK_PATTERNS = {
-        "currency" => '^\$\d{1,3}(?:,\d{3})*(?:\.\d{2})?$',
-        "zip_code" => '\d{5}',
-        "postal_code" => '\d{5}-\d{4}',
-        "ssn" => '\d{3}-\d{2}-\d{4}',
-      }.freeze
-
       prop :autocomplete, type: Playbook::Props::Boolean,
                           default: true
       prop :disabled, type: Playbook::Props::Boolean,
@@ -34,9 +25,6 @@ module Playbook
       prop :add_on, type: Playbook::Props::NestedProps,
                     nested_kit: Playbook::PbTextInput::AddOn
 
-      prop :mask, type: Playbook::Props::String,
-                  default: nil
-
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
         generate_classname("pb_text_input_kit") + default_margin_bottom + error_class + inline_class
@@ -58,10 +46,6 @@ module Playbook
         { dark: dark }.merge(add_on || {})
       end
 
-      def sanitized_id
-        "#{object.id}-sanitized" if id.present?
-      end
-
     private
 
       def all_input_options
@@ -71,13 +55,12 @@ module Playbook
           data: validation_data,
           disabled: disabled,
           id: input_options.dig(:id) || id,
-          name: mask.present? ? "" : name,
-          pattern: validation_pattern || mask_pattern,
+          name: name,
+          pattern: validation_pattern,
           placeholder: placeholder,
           required: required,
           type: type,
           value: value,
-          mask: mask,
         }.merge(input_options)
       end
 
@@ -92,7 +75,7 @@ module Playbook
       def validation_data
         fields = input_options.dig(:data) || {}
         fields[:message] = validation_message unless validation_message.blank?
-        mask ? fields.merge(pb_input_mask: true) : fields
+        fields
       end
 
       def error_class
@@ -102,19 +85,6 @@ module Playbook
       def inline_class
         inline ? " inline" : ""
       end
-
-      def mask_data
-        return {} unless mask
-        raise ArgumentError, "mask must be one of: #{VALID_MASKS.join(', ')}" unless VALID_MASKS.include?(mask)
-
-        { mask: mask }
-      end
-
-      def mask_pattern
-        return nil unless mask
-
-        MASK_PATTERNS[mask]
-      end
     end
   end
 end