playbook_ui 18.2.0.pre.rc.2 → 18.2.0

data/app/pb_kits/playbook/pb_stat_value/kit.schema.json

@@ -32,6 +32,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { StatValue } from 'playbook-ui'",

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, globalInlineProps } from '../utilities/globalProps'
@@ -10,6 +10,10 @@ import {
     TableCell,
 } from "./subcomponents";
 import { addDataTitle } from './utilities/addDataTitle'
+import {
+    applyStickyColumns,
+    scheduleStickyColumns,
+} from './utilities/stickyColumns'
 import Card from '../pb_card/_card'
 import Flex from '../pb_flex/_flex'
 import Title from '../pb_title/_title'
@@ -102,7 +106,13 @@ const Table = (props: TableProps): React.ReactElement => {
     const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
     const isTableTag = tag === 'table'
     const dynamicInlineProps = globalInlineProps(props)
-    const stickyRightColumnReversed = stickyRightColumn.reverse()
+    const [tableNode, setTableNode] = useState<HTMLElement | null>(null)
+    const setTableRef = useCallback(
+        (node: HTMLTableElement | HTMLDivElement | null) => {
+            setTableNode((current) => (current === node ? current : node))
+        },
+        []
+    )
 
     const isFilterVariant = variant === 'withFilter'
     const effectiveContainer = isFilterVariant ? false : container
@@ -132,224 +142,87 @@ const Table = (props: TableProps): React.ReactElement => {
     )
 
     useEffect(() => {
-        const handleStickyLeftColumns = () => {
-            if (!stickyLeftColumn.length) return;
-            let accumulatedWidth = 0;
-
-            stickyLeftColumn.forEach((colId, index) => {
-                const isLastColumn = index === stickyLeftColumn.length - 1;
-                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[data-sticky-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');
-                    }
-
-                    const headerWidth = (header as HTMLElement).offsetWidth;
-                    accumulatedWidth += headerWidth;
-
-                    cells.forEach((cell) => {
-                        cell.classList.add('sticky');
-                        (cell as HTMLElement).style.left = `${accumulatedWidth - headerWidth}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');
-                        }
-                    });
-                }
-            });
-        };
-
-        setTimeout(() => {
-            handleStickyLeftColumns();
-        }, 10);
-
-        window.addEventListener('resize', handleStickyLeftColumns);
-
-        return () => {
-            window.removeEventListener('resize', handleStickyLeftColumns);
-        };
-    }, [stickyLeftColumn]);
-
-    useEffect(() => {
-        const handleStickyRightColumns = () => {
-            if (!stickyRightColumn.length) return;
-            let accumulatedWidth = 0;
-
-            stickyRightColumnReversed.forEach((colId, index) => {
-                const isLastColumn = index === stickyRightColumn.length - 1;
-                const header = document.querySelector(`th[data-sticky-id="${colId}"]`);
-                const cells = document.querySelectorAll(`td[data-sticky-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-left');
-                        header.classList.add('sticky-right-shadow');
-                    }
-
-                    const headerWidth = (header as HTMLElement).offsetWidth;
-                    accumulatedWidth += headerWidth;
-
-                    cells.forEach((cell) => {
-                        cell.classList.add('sticky');
-                        (cell as HTMLElement).style.right = `${accumulatedWidth - headerWidth}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');
-                        }
-                    });
-                }
-            });
-        };
+        if (!tableNode) return
+        if (!stickyLeftColumn.length && !stickyRightColumn.length) return
+
+        const applyStickyOffsets = () => {
+            if (stickyLeftColumn.length) {
+                applyStickyColumns(tableNode, stickyLeftColumn, 'left')
+            }
+            if (stickyRightColumn.length) {
+                applyStickyColumns(tableNode, stickyRightColumn, 'right')
+            }
+        }
 
-        setTimeout(() => {
-            handleStickyRightColumns();
-        }, 10);
+        const cancelSchedule = scheduleStickyColumns(applyStickyOffsets)
+        window.addEventListener('resize', applyStickyOffsets)
 
-        window.addEventListener('resize', handleStickyRightColumns);
+        let resizeObserver: ResizeObserver | undefined
+        if (typeof ResizeObserver !== 'undefined') {
+            resizeObserver = new ResizeObserver(applyStickyOffsets)
+            resizeObserver.observe(tableNode)
+        }
 
         return () => {
-            window.removeEventListener('resize', handleStickyRightColumns);
-        };
-    }, [stickyRightColumn]);
+            cancelSchedule()
+            window.removeEventListener('resize', applyStickyOffsets)
+            resizeObserver?.disconnect()
+        }
+    }, [tableNode, stickyLeftColumn, stickyRightColumn])
 
     useEffect(() => {
         addDataTitle()
     }, [])
 
+    const tableElementProps = {
+        ...ariaProps,
+        ...dataProps,
+        ...htmlProps,
+        className: classNames,
+        id,
+        style: dynamicInlineProps,
+    }
+
+    const renderTableElement = () => (
+        isTableTag ? (
+            <table
+                {...tableElementProps}
+                ref={setTableRef}
+            >
+                {children}
+            </table>
+        ) : (
+            <div
+                {...tableElementProps}
+                ref={setTableRef}
+            >
+                {children}
+            </div>
+        )
+    )
+
 // ------------ Default Table (non-filter variant rendering) ------------
     const renderTable = () => {
-        const tableElement = responsive === 'scroll' ? (
-            <div className='table-responsive-scroll'>
-                {isTableTag ? (
-                    <table
-                        {...ariaProps}
-                        {...dataProps}
-                        {...htmlProps}
-                        className={classNames}
-                        id={id}
-                        style={dynamicInlineProps}
-                    >
-                        {children}
-                    </table>
-                ) : (
-                    <div
-                        {...ariaProps}
-                        {...dataProps}
-                        {...htmlProps}
-                        className={classNames}
-                        id={id}
-                        style={dynamicInlineProps}
-                    >
-                        {children}
-                    </div>
-                )}
-            </div>
-        ) : (
-            isTableTag ? (
-                <table
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                    style={dynamicInlineProps}
-                >
-                    {children}
-                </table>
-            ) : (
-                <div
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                    style={dynamicInlineProps}
-                >
-                    {children}
+        if (responsive === 'scroll') {
+            return (
+                <div className='table-responsive-scroll'>
+                    {renderTableElement()}
                 </div>
             )
-        )
+        }
 
-        return tableElement
+        return renderTableElement()
     }
 // ------------ End Default Table (non-filter variant rendering) ------------
 
 // ------------ variant = 'withFilter' rendering  ------------
     const renderCardVariant = () => {
-        // Render table element
         const tableElement = responsive === 'scroll' ? (
             <div className='table-responsive-scroll'>
-                {isTableTag ? (
-                    <table
-                        {...ariaProps}
-                        {...dataProps}
-                        {...htmlProps}
-                        className={classNames}
-                        id={id}
-                        style={dynamicInlineProps}
-                    >
-                        {children}
-                    </table>
-                ) : (
-                    <div
-                        {...ariaProps}
-                        {...dataProps}
-                        {...htmlProps}
-                        className={classNames}
-                        id={id}
-                        style={dynamicInlineProps}
-                    >
-                        {children}
-                    </div>
-                )}
+                {renderTableElement()}
             </div>
         ) : (
-            isTableTag ? (
-                <table
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                    style={dynamicInlineProps}
-                >
-                    {children}
-                </table>
-            ) : (
-                <div
-                    {...ariaProps}
-                    {...dataProps}
-                    {...htmlProps}
-                    className={classNames}
-                    id={id}
-                    style={dynamicInlineProps}
-                >
-                    {children}
-                </div>
-            )
+            renderTableElement()
         )
 
         // Default filter props that CAN be overridden (All props from Filter kit CAN be used, but these are the ones we set as defaults)

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

@@ -1,4 +1,8 @@
 import PbEnhancedElement from '../pb_enhanced_element'
+import {
+  applyStickyColumns,
+  scheduleStickyColumns,
+} from './utilities/stickyColumns'
 
 const TABLE_WRAPPER_SELECTOR = "[data-pb-table-wrapper]";
 const TABLE_COLLAPSIBLE_WRAPPER_SELECTOR = "[data-pb-table-collapsible-wrapper]";
@@ -7,7 +11,10 @@ const TABLE_COLLAPSIBLE_CELL_SELECTOR = "[data-pb-table-collapsible-cell-id]";
 export default class PbTable extends PbEnhancedElement {
   stickyLeftColumns: string[] = [];
   stickyRightColumns: string[] = [];
-  stickyRightColumnsReversed: string[] = [];
+  private stickyTable: Element | null = null;
+  private cancelStickySchedule: (() => void) | null = null;
+  private stickyResizeObserver: ResizeObserver | null = null;
+  private boundApplyStickyOffsets = () => this.applyStickyOffsets();
 
   static get selector(): string {
     return TABLE_WRAPPER_SELECTOR;
@@ -31,133 +38,59 @@ export default class PbTable extends PbEnhancedElement {
       })
     }
 
-    this.initStickyLeftColumns();
-    this.initStickyRightColumns();
+    this.initStickyColumns();
     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);
-        }
-      }
+  initStickyColumns() {
+    const table =
+      this.element.querySelector('.sticky-left-column, .sticky-right-column') ||
+      (this.element.classList.contains('sticky-left-column') ||
+      this.element.classList.contains('sticky-right-column')
+        ? this.element
+        : null);
+
+    if (!table) return;
+
+    this.stickyTable = table;
+    const classList = Array.from(table.classList);
+    const stickyLeftClass = classList.find(cls => cls.startsWith('sticky-left-columns-ids-'));
+    const stickyRightClass = classList.find(cls => cls.startsWith('sticky-right-columns-ids-'));
+
+    if (stickyLeftClass) {
+      this.stickyLeftColumns = stickyLeftClass
+        .replace('sticky-left-columns-ids-', '')
+        .split('-');
     }
-  }
-
-  handleStickyLeftColumns() {
-    let accumulatedWidth = 0;
-
-    this.stickyLeftColumns.forEach((colId, index) => {
-      const isLastColumn = index === this.stickyLeftColumns.length - 1;
-      const header = this.element.querySelector(`th[data-sticky-id="${colId}"]`);
-      const cells = this.element.querySelectorAll(`td[data-sticky-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');
-        }
-
-        const headerWidth = (header as HTMLElement).offsetWidth;
-        accumulatedWidth += headerWidth;
-
-        cells.forEach((cell) => {
-          cell.classList.add('sticky');
-          (cell as HTMLElement).style.left = `${accumulatedWidth - headerWidth}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');
-          }
-        });
-      }
-    });
-  }
 
-  initStickyRightColumns() {
-    const table = this.element.querySelector('.sticky-right-column');
+    if (stickyRightClass) {
+      this.stickyRightColumns = stickyRightClass
+        .replace('sticky-right-columns-ids-', '')
+        .split('-');
+    }
 
-    if (table) {
-      const classList = Array.from(table.classList);
-      const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-right-columns-ids-'));
+    if (!this.stickyLeftColumns.length && !this.stickyRightColumns.length) return;
 
-      if (stickyColumnClass) {
-        this.stickyRightColumns = stickyColumnClass
-          .replace('sticky-right-columns-ids-', '')
-          .split('-');
-        this.stickyRightColumnsReversed = this.stickyRightColumns.reverse();
+    this.cancelStickySchedule = scheduleStickyColumns(this.boundApplyStickyOffsets);
+    window.addEventListener('resize', this.boundApplyStickyOffsets);
 
-        if (this.stickyRightColumns.length > 0) {
-          setTimeout(() => {
-            this.handleStickyRightColumns();
-            window.addEventListener('resize', () => this.handleStickyRightColumns());
-          }, 10);
-        }
-      }
+    if (typeof ResizeObserver !== 'undefined') {
+      this.stickyResizeObserver = new ResizeObserver(this.boundApplyStickyOffsets);
+      this.stickyResizeObserver.observe(table);
     }
   }
 
-  handleStickyRightColumns() {
-    let accumulatedWidth = 0;
-
-    this.stickyRightColumnsReversed.forEach((colId, index) => {
-      const isLastColumn = index === this.stickyRightColumns.length - 1;
-      const header = this.element.querySelector(`th[data-sticky-id="${colId}"]`);
-      const cells = this.element.querySelectorAll(`td[data-sticky-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');
-        }
-
-        const headerWidth = (header as HTMLElement).offsetWidth;
-        accumulatedWidth += headerWidth;
+  applyStickyOffsets() {
+    if (!this.stickyTable) return;
 
-        cells.forEach((cell) => {
-          cell.classList.add('sticky');
-          (cell as HTMLElement).style.right = `${accumulatedWidth - headerWidth}px`;
+    if (this.stickyLeftColumns.length) {
+      applyStickyColumns(this.stickyTable, this.stickyLeftColumns, 'left');
+    }
 
-          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');
-          }
-        });
-      }
-    });
+    if (this.stickyRightColumns.length) {
+      applyStickyColumns(this.stickyTable, this.stickyRightColumns, 'right');
+    }
   }
 
   handleCollapsibleClick() {
@@ -228,14 +161,12 @@ export default class PbTable extends PbEnhancedElement {
     }
   }
 
-  // Cleanup method to remove event listener
   disconnect() {
-    if (this.stickyLeftColumns.length > 0) {
-      window.removeEventListener('resize', () => this.handleStickyLeftColumns());
-    }
-
-    if (this.stickyRightColumns.length > 0) {
-      window.removeEventListener('resize', () => this.handleStickyRightColumns());
-    }
+    this.cancelStickySchedule?.();
+    this.cancelStickySchedule = null;
+    window.removeEventListener('resize', this.boundApplyStickyOffsets);
+    this.stickyResizeObserver?.disconnect();
+    this.stickyResizeObserver = null;
+    this.stickyTable = null;
   }
 }

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

@@ -1,13 +1,38 @@
 @import "../../tokens/colors";
 
 [class^="pb_table"] {
+    // Collapsed borders + sticky columns leave subpixel seams at some zoom/sizes.
+    // Separate borders keep sticky offsets aligned with painted cell edges.
+    &.table-sm,
+    &.table-md,
+    &.table-lg {
+        &.sticky-left-column,
+        &.sticky-right-column {
+            border-collapse: separate;
+            border-spacing: 0;
+        }
+    }
+
     .sticky {
         position: sticky !important;
         z-index: 1;
         background-color: white;
+        background-clip: padding-box;
+    }
+
+    // Corner cells (sticky header + sticky column) must sit above scrolling
+    // header siblings in multi-row theads.
+    &.sticky-header {
+        thead .sticky,
+        .pb_table_thead .sticky {
+            z-index: 2;
+        }
     }
 
-    // For use with sticky left columns
+    // For use with sticky left columns.
+    // Default left/right keep single sticky edge (and Nitro colspan corner cells
+    // that use these classes without data-sticky-id) pinned. Multi-column JS
+    // offsets override via inline style.
     .sticky-left-shadow {
         box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
         left: 0;
@@ -15,7 +40,6 @@
 
     .with-border-right {
         border-right: 1px solid var(--table-border-color, #{$border_light}) !important;
-        left: 0;
     }
 
     // For use with sticky right columns
@@ -26,6 +50,5 @@
 
     .with-border-left {
         border-left: 1px solid var(--table-border-color, #{$border_light}) !important;
-        right: 0;
     }
 }