playbook_ui 14.9.0.pre.alpha.PLAY1660reactdropzone5020 → 14.9.0.pre.alpha.PLAY1731inputmasking4866

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

@@ -1,106 +1,32 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
-    private stickyLeftColumns: string[] = [];
-    private handleStickyColumnsRef: () => void;
-
-    static get selector(): string {
-      return '.table-responsive-collapse'
-    }
-
-    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])
-          })
-        })
-      });
-
-      // New sticky columns logic
-      this.initStickyColumns();
-    }
-
-    private initStickyColumns(): 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) {
-            this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
-            this.handleStickyColumns();
-            window.addEventListener('resize', this.handleStickyColumnsRef);
-          }
+  static get selector(): string {
+    return '.table-responsive-collapse'
+  }
+
+  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/, ''));
         }
       });
-    }
-
-    private handleStickyColumns(): void {
-      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}"]`);
-
-        if (header) {
-          header.classList.add('sticky');
-          (header as HTMLElement).style.left = `${accumulatedWidth}px`;
-
-          if (!isLastColumn) {
-            header.classList.add('with-border');
-            header.classList.remove('sticky-shadow');
-          } else {
-            header.classList.remove('with-border');
-            header.classList.add('sticky-shadow');
-          }
-
-          accumulatedWidth += (header as HTMLElement).offsetWidth;
-        }
-
-        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');
-            cell.classList.remove('sticky-shadow');
-          } else {
-            cell.classList.remove('with-border');
-            cell.classList.add('sticky-shadow');
-          }
-        });
-      });
-    }
-
-    // Cleanup method to remove event listener
-    disconnect(): void {
-      if (this.handleStickyColumnsRef) {
-        window.removeEventListener('resize', this.handleStickyColumnsRef);
-      }
-    }
-}
+      // 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/app/pb_kits/playbook/pb_table/styles/_all.scss

@@ -21,5 +21,4 @@
 @import "striped";
 @import "outer_padding";
 @import "sticky_columns";
-@import "scroll";
-@import "collapsible";
+@import "scroll";

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -7,21 +7,14 @@ import {
   buildHtmlProps,
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
-import Collapsible from "../../pb_collapsible/_collapsible";
-import useCollapsible from "../../pb_collapsible/useCollapsible";
 
 type TableRowPropTypes = {
   aria?: { [key: string]: string };
   children: React.ReactNode[] | React.ReactNode;
   className: string;
-  collapsible?: boolean;
-  collapsibleContent?: React.ReactNode[] | React.ReactNode;
-  collapsibleSideHighlight?: boolean;
   data?: { [key: string]: string };
-  dark?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
-  toggleCellId?: string;
   sideHighlightColor: string;
   tag?: "table" | "div";
 };
@@ -30,15 +23,10 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,
-    collapsible,
-    collapsibleContent,
-    collapsibleSideHighlight = true,
     className,
     data = {},
-    dark = false,
     htmlOptions = {},
     id,
-    toggleCellId,
     sideHighlightColor = "none",
     tag = "table",
   } = props;
@@ -48,110 +36,17 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   const sideHighlightClass =
     sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
-  
-  const [isCollapsed, setIsCollapsed] = useCollapsible(true);
-
-  const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
   const classes = classnames(
     buildCss("pb_table_row_kit", sideHighlightClass),
     "pb_table_tr",
-    collapsibleRow,
     globalProps(props),
     className
   );
   const isTableTag = tag === "table";
 
-  // const [isCollapsed, setIsCollapsed] = useCollapsible(true);
-
-  const colSpan = React.Children.count(children);
-
-  const handleRowClick = (event: React.MouseEvent) => {
-    if (toggleCellId) {
-      const target = event.target as HTMLElement;
-      const clickedCell = target.closest(`#${toggleCellId}`);
-      const isIconClick =
-      target instanceof SVGElement &&
-      (target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
-
-        if (clickedCell || isIconClick) { 
-      setIsCollapsed(!isCollapsed);
-      }
-    } else {
-      setIsCollapsed(!isCollapsed);
-    }
-  };
-    
   return (
     <>
-      {collapsible ? (
-        isTableTag ? (
-          <>
-            <tr
-                {...ariaProps}
-                {...dataProps}
-                {...htmlProps}
-                className={classes}
-                id={id}
-                onClick={(e)=>handleRowClick(e)}
-                style={{ cursor: toggleCellId ? "default" : "pointer" }}
-            >
-              {children}
-            </tr>
-            <tr>
-              <Collapsible
-                  collapsed={isCollapsed}
-                  dark={dark}
-                  htmlOptions={{ colSpan: colSpan }}
-                  padding="none"
-                  tag="td"
-              >
-                <tr/>
-                <Collapsible.Content 
-                    className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
-                    dark={dark}
-                    margin="none"
-                    padding="none"
-                >
-                 {collapsibleContent}
-                </Collapsible.Content>
-              </Collapsible>
-            </tr>
-          </>
-        ) : (
-          <>
-            <div
-                {...ariaProps}
-                {...dataProps}
-                {...htmlProps}
-                className={classes}
-                id={id}
-                onClick={handleRowClick}
-                style={{ cursor: "pointer" }}
-            >
-              {children}
-            </div>
-            <tr>
-              <Collapsible
-                  collapsed={isCollapsed}
-                  dark={dark}
-                  htmlOptions={{ colSpan: colSpan }}
-                  padding="none"
-                  tag="td"
-              >
-                <tr/>
-                <Collapsible.Content 
-                    className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
-                    dark={dark}
-                    margin="none"
-                    padding="none"
-                >
-                 {collapsibleContent}
-                </Collapsible.Content>
-              </Collapsible>
-            </tr>
-          </>
-        )
-      ) : isTableTag ? (
+      {isTableTag ? (
         <tr
             {...ariaProps}
             {...dataProps}

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

@@ -18,4 +18,4 @@
       <%= content.presence %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -23,8 +23,6 @@ module Playbook
       prop :text
       prop :sticky, type: Playbook::Props::Boolean,
                     default: false
-      prop :sticky_left_column, type: Playbook::Props::Array,
-                                default: []
       prop :vertical_border, type: Playbook::Props::Boolean,
                              default: false
       prop :striped, type: Playbook::Props::Boolean,
@@ -39,8 +37,8 @@ module Playbook
       def classname
         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,
+          disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
+          vertical_border_class, striped_class, outer_padding_class,
           "table-responsive-#{responsive}", separator: " "
         )
       end
@@ -75,19 +73,6 @@ module Playbook
         sticky ? "sticky-header" : nil
       end
 
-      def sticky_left_column_class
-        if sticky_left_column.empty?
-          nil
-        else
-          sticky_col_classname = "sticky-left-column sticky-columns"
-          sticky_left_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_text_input/inputMask.ts

@@ -43,7 +43,7 @@ export const INPUTMASKS: InputMaskDictionary = {
     currency: {
         format: formatCurrency,
         // eslint-disable-next-line no-useless-escape
-        pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
+        pattern: '^\$\d{1,3}(?:,\d{3})*(?:\.\d{2})?$',
         placeholder: '$0.00',
     },
     zipCode: {