playbook_ui 14.17.0.pre.alpha.PLAY20267223 → 14.17.0.pre.alpha.alphaforaudiences7167

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a84667fe2c80d67890e145f5b8841ff6c207eb717b1319029b6ae249c8248ec
-  data.tar.gz: 8b9b31e2525c5cf403f73dbc4a3b1adf23b2ad469edb62b9aac96cb30250c077
+  metadata.gz: 2d4e1505953fc9d8679af10f4517e1db1910b806f2540bcba412afbaca8eb912
+  data.tar.gz: e1ec597e443b273d2037e5e0a572a9ca8f52ce25fb3754ccbc24edebd969377b
 SHA512:
-  metadata.gz: 467e9b001b9069d97c5f39e257ba810f980351c93772a54474ec829b4a227017a8a11ec5dfd01f32b0acef10402766f8d8f8d1e342866d5edf0acf6ff513aec4
-  data.tar.gz: 6eff90636fd9b005857d8b221b5db06dd4840a94b788bccf6eae6e3869e1be5a6454d7f4c1f18f3fdba9923549fe8a3f0b814b118e60acebc7f478cc79312584
+  metadata.gz: c5e5f58405349fa05f6942b377efee9d7c845c74dfbbe1009fe28e9c50459871f1dcc0e23f9a4bc2e190493ef648fce14e3b06bd0e697fa8a07114c95068c219
+  data.tar.gz: 84723e76ae32724c3926bf9ac0a7b9b048ae640635f982ca9126ae99fdbd97528215d7c7dd563e739d9a3718787a98f31ce31729a725080466de72ffb50cbf61

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react"
+import React, { useContext } from "react"
 import classnames from "classnames"
 import { flexRender, Row, Cell } from "@tanstack/react-table"
 
@@ -32,21 +32,9 @@ export const RegularTableView = ({
     table,
     selectableRows,
     hasAnySubRows,
-    stickyLeftColumn
+    isPinnedLeft = false,
   } = useContext(AdvancedTableContext)
 
-
-  useEffect(() => {
-    if (stickyLeftColumn && Array.isArray(stickyLeftColumn)) {
-      stickyLeftColumn.forEach((columnId) => {
-        const column = table.getColumn(columnId);
-        if (column && column.getCanPin()) {
-          column.pin('left');
-        }
-      });
-    }
-  },[stickyLeftColumn, table]);
-
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
 
@@ -94,7 +82,7 @@ export const RegularTableView = ({
               {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
                 const isPinnedLeft = columnPinning.left.includes(cell.column.id);
                 const isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
-                const { column } = cell;
+
                 return (
                   <td
                       align="right"
@@ -102,17 +90,9 @@ export const RegularTableView = ({
                         `${cell.id}-cell position_relative`,
                         isChrome() ? "chrome-styles" : "",
                         isPinnedLeft && 'pinned-left',
-                        stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
                         isLastCell && 'last-cell',
                       )}
                       key={`${cell.id}-data`}
-                      style={{
-                        left: isPinnedLeft
-                          ? i === 1 //Accounting for set min-width for first column
-                            ? '180px'
-                            : `${column.getStart("left")}px`
-                          : undefined,
-                      }}
                   >
                     {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
                     <span id={`${cell.id}-span`}>

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -45,7 +45,6 @@ export const TableHeaderCell = ({
     selectableRows,
     hasAnySubRows,
     showActionsBar,
-    stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
   } = useContext(AdvancedTableContext);
@@ -77,9 +76,7 @@ const cellClassName = classnames(
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },
-   isLastHeaderCell ? "last-header-cell" : "",
-  stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft ? 'sticky-left' : "",
-
+   isLastHeaderCell ? "last-header-cell" : ""
 ); 
 
 const cellId = `${loading ? 
@@ -114,13 +111,6 @@ const isToggleExpansionEnabled =
         colSpan={header?.colSpan}
         id={cellId}
         key={`${header?.id}-header`}
-        style={{
-          left: isPinnedLeft
-            ? header?.index === 1 //Accounting for set min-width for first column
-              ? '180px'
-              : `${header?.column.getStart("left")}px`
-            : undefined,
-        }}
     >
       {header?.isPlaceholder ? null : headerChildren && header?.index === 0 ? (
         <Flex alignItems="center">

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -8,7 +8,6 @@
 @import "../tokens/screen_sizes";
 @import "../tokens/shadows";
 @import "../tokens/positioning";
-@import "./scss_partials/advanced_table_sticky_mixin";
 
 .pb_advanced_table {
   $border-color: 1px solid $border_light;
@@ -94,8 +93,8 @@
       border-right: 1px solid $border_light !important;
     }
     .table-header-cells-custom {
-      text-align: center;
-      [class^="pb_checkbox_kit"] .pb_checkbox_label {
+      text-align:center;
+      [class^=pb_checkbox_kit] .pb_checkbox_label {
         padding-left: 0px;
       }
     }
@@ -105,7 +104,7 @@
     }
     // Right align header content of first data column in selectable row no subrow setup
     &.selectable-rows-enabled {
-      tr {
+      tr { 
         th:nth-child(2),
         .pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none.gap_none {
           justify-content: flex-end;
@@ -123,7 +122,7 @@
       }
 
       // Set fixed width for checkbox column
-      &.table-header-cells-custom,
+      &.table-header-cells-custom, 
       &.checkbox-cell.checkbox-cell-header {
         width: 40px !important;
         min-width: 40px !important;
@@ -146,7 +145,7 @@
     .checkbox-cell {
       display: flex;
       justify-content: center;
-      [class^="pb_checkbox_kit"] .pb_checkbox_label {
+      [class^=pb_checkbox_kit] .pb_checkbox_label {
         padding-left: 0px;
       }
     }
@@ -174,7 +173,7 @@
       }
     }
     td {
-      [class^="pb_text_input_kit"] .text_input_wrapper input {
+      [class^=pb_text_input_kit] .text_input_wrapper input {
         padding: 0 $space_xxs;
         font-size: 14px;
         text-align: right;
@@ -231,12 +230,12 @@
     max-height: 1920px;
     overflow-y: auto;
   }
-
+  
   // Fullscreen
   &.advanced-table-allow-fullscreen {
     transition: all 0.3s ease;
   }
-
+  
   &.advanced-table-fullscreen {
     background-color: $bg_light;
     box-sizing: border-box;
@@ -249,10 +248,7 @@
     z-index: $z_10;
 
     .pb_table {
-      th,
-      td,
-      div,
-      button {
+      th, td, div, button {
         font-size: calc(100%);
       }
       box-sizing: border-box;
@@ -270,7 +266,7 @@
       }
     }
   }
-
+  
   .advanced-table-fullscreen-header {
     background-color: $white;
     height: 44px;
@@ -376,32 +372,78 @@
     width: 2px;
   }
 
-  // Sticky Left Columns Styling
-  &[class*="advanced-table-sticky-left-columns"] {
-    overflow-x: scroll;
-    .sticky-left {
-      position: sticky !important;
-      z-index: 2;
-      background-color: $white;
-      box-shadow: $shadow_deep;
-    }
-    @include advanced-table-sticky-mixin(
-      $border_light,
-      $white,
-      lighten($silver, $opacity_7)
-    );
-  }
-
   // Responsive Styles
   @media only screen and (max-width: $screen-xl-min) {
     &[class*="advanced-table-responsive-scroll"] {
+      border-radius: 4px;
+      box-shadow: 1px 0 0 0px $border_light,
+                  -1px 0 0 0px $border_light;
+      display: block;
       overflow-x: auto;
       width: 100%;
-      @include advanced-table-sticky-mixin(
-        $border_light,
-        $white,
-        lighten($silver, $opacity_7)
-      );
+      [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 !important;
+      }
+      [class^=pb_table].table-sm.table-card thead tr th:last-child,
+      [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
+        border-right-width: 0px;
+      }
+      [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
+      [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
+          border-radius: 0 0 0 0;
+        }
+      .table-header-cells:first-child,
+      td:first-child,
+      .pb_table_td:first-child,
+      .checkbox-cell.checkbox-cell-header:first-child,
+      [class*="pinned-left"] {
+          background-color: $white;
+          box-shadow: $shadow_deep !important;
+          position: sticky !important;
+          left: 0;
+          z-index: 2;
+      }
+      .bg-silver td:first-child {
+        background-color: lighten($silver, $opacity_7);
+      }
+      .bg-white td:first-child {
+          background-color: $white;
+      }
+
+      .virtualized-table-row {
+        &.bg-silver td:first-child {
+          background-color: lighten($silver, $opacity_7);
+        }
+        &.bg-white td:first-child {
+          background-color: $white;
+        }
+        &.bg-row-selection td:first-child {
+          background-color: $info_subtle;
+        }
+      }
+
+      .row-selection-actions-card {
+        border-right-width: 0px;
+        border-left-width: 0px;
+        position: sticky;
+        top: 0;
+        left: 0;
+        border-radius: unset;
+      }
+      .checkbox-cell {
+        display: table-cell !important;
+      }
+      .sticky-header {
+        thead {
+          th:first-child {
+            box-shadow: 1px 0 10px -2px $border_light !important;
+          }
+        }
+        .pb_advanced_table_header {
+          box-shadow: none !important;
+        }
+      }
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
@@ -438,9 +480,7 @@
       }
     }
 
-    .table-header-cells:first-child,
-    td:first-child,
-    .pb_table_td:first-child {
+    .table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
       box-shadow: 1px 0px 0px 0px $border_dark !important;
     }
 
@@ -448,14 +488,12 @@
       background-color: $border_dark !important;
     }
 
-    .sort-button-icon,
-    .header-sort-button > div,
-    .pb_th_link {
+    .sort-button-icon, .header-sort-button > div, .pb_th_link {
       color: $white !important;
     }
 
     .gray-icon {
-      color: $text_dk_light !important;
+      color:  $text_dk_light !important;
     }
 
     .sticky-header {
@@ -498,33 +536,63 @@
       z-index: $z_10;
     }
 
-    &[class*="advanced-table-sticky-left-columns"] {
-      .sticky-left {
-        background-color: $bg_dark;
-      }
-      @include advanced-table-sticky-mixin(
-        $border_dark,
-        $bg_dark_card,
-        $bg_dark
-      );
-    }
-
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
       &[class*="advanced-table-responsive-scroll"] {
+        border-radius: 4px;
+        box-shadow: 1px 0 0 0px $border_dark,
+                    -1px 0 0 0px $border_dark;
+        display: block;
+        overflow-x: scroll;
+        width: 100%;
+        [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;
+        }
+        [class^=pb_table].table-sm.table-card thead tr th:last-child,
+        [class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
+          border-right-width: 0px;
+        }
+        [class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
+        [class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
+            border-radius: 0 0 0 0;
+        }
+        .table-header-cells:first-child,
+        td:first-child,
+        .pb_table_td:first-child,
+        .checkbox-cell.checkbox-cell-header:first-child,
+        [class*="pinned-left"] {
+          background: $bg_dark_card;
+          border-right: $border_dark;
+          box-shadow: $shadow_deep !important;
+          position: sticky !important;
+        }
+        .bg-silver td:first-child {
+          background-color: $bg_dark;
+        }
+        .bg-white td:first-child {
+          background-color: $bg_dark_card;
+        }
+
+        // Dark mode virtualized rows
+        .virtualized-table-row {
+          &.bg-silver td:first-child {
+            background-color: $bg_dark;
+          }
+          &.bg-white td:first-child {
+            background-color: $bg_dark_card;
+          }
+        }
+
         .sticky-header {
           thead {
             th:first-child {
-              background: $bg_dark_card;
+              background: $bg_dark;
+              box-shadow: 1px 0 10px -2px $border_dark !important;
             }
           }
         }
-        @include advanced-table-sticky-mixin(
-          $border_dark,
-          $bg_dark_card,
-          $bg_dark
-        );
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -87,7 +87,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     showActionsBar = true,
     selectableRows,
     sortControl,
-    stickyLeftColumn,
     tableData,
     tableOptions,
     tableProps,
@@ -234,7 +233,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       'advanced-table-fullscreen': isFullscreen,
       'advanced-table-allow-fullscreen': allowFullScreen
     },
-    {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     globalProps(props),
     className
   );
@@ -293,7 +291,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             setExpanded={setExpanded}
             showActionsBar={showActionsBar}
             sortControl={sortControl}
-            stickyLeftColumn={stickyLeftColumn}
             subRowHeaders={tableOptions?.subRowHeaders}
             table={table}
             tableContainerRef={tableWrapperRef}

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

@@ -25,7 +25,6 @@ examples:
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
-  - advanced_table_sticky_columns: Sticky Columns
   - advanced_table_table_props_sticky_header: Table Props Sticky Header
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables

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

@@ -22,5 +22,4 @@ export { default as AdvancedTableSelectableRowsActions } from './_advanced_table
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
-export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
-export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
+export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -1,6 +1,5 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
-@import "../tokens/border_radius";
 
 .pb_draggable_container {
   .pb_draggable_item {
@@ -35,7 +34,7 @@
           width: 100%;
           height: 100%;
           border: 2px dashed $neutral;
-          border-radius: $border_radius_sm;
+          border-radius: $border-radius-sm;
           box-sizing: border-box;
           z-index: 10;
           pointer-events: none;
@@ -65,7 +64,7 @@
           width: 100%;
           height: 100%;
           background-color: rgba($neutral, $opacity_5);
-          border-radius: $border_radius_sm;
+          border-radius: $border-radius-sm;
           z-index: 10;
           pointer-events: none;
         }
@@ -74,70 +73,48 @@
         &.drop_zone_color_primary::before { background-color: rgba($primary, $opacity_5); }
         &.drop_zone_color_purple::before { background-color: rgba($purple, $opacity_5); }
       }
-    }
-  }
-  // Line default - Vertical orientation (horizontal line for draggable items in vertical layout)
-  &.line_vertical {
-    .pb_draggable_item {
-      position: relative;
+
+      // Line variant
       &.drop_zone_line {
-        // Hide the original content to show the line only (held draggable item should not take up space in drop zone)
-        position: relative;
-        z-index: 2;
+        // Hide the original content to show the line
         & > * {
           opacity: 0;
         }
-        height: 4px;
+
         // Style for horizontal line (default)
         &::before {
           content: '';
           position: absolute;
           left: 0;
           top: 0;
-          width: 100%;
-          height: 4px;
+          width: 4px;
+          height: 100%;
           background-color: $neutral;
-          border-radius: $border_radius_rounded;
+          border-radius: 1000px;
           z-index: 10;
           pointer-events: none;
-          transform: translateY(-50%);
         }
-        // Apply color variants to the ::before element
+
+        // Apply color variants
         &.drop_zone_color_primary::before { background-color: $primary; }
         &.drop_zone_color_purple::before { background-color: $purple; }
       }
     }
   }
-  // Line variant - Horizontal orientation (vertical line for draggable items in horizontal layout)
-  &.line_horizontal {
-    .pb_draggable_item {
-      position: relative;
+}
+
+// Support for vertical layouts (horizontal line)
+.pb_draggable_container.vertical {
+  .pb_draggable_item {
+    &.is_dragging {
+      // Line variant for vertical layouts (horizontal line)
       &.drop_zone_line {
-        position: relative;
-        z-index: 2;
-        & > * {
-          opacity: 0;
-        }
-        width: 4px;
-        height: auto;
-        // Style for vertical line
         &::before {
-          content: '';
-          position: absolute;
+          width: 100%;
+          height: 4px;
           left: 0;
           top: 0;
-          width: 4px;
-          height: 100%;
-          background-color: $neutral;
-          border-radius: $border_radius_rounded;
-          z-index: 10;
-          pointer-events: none;          
-          transform: translateX(-50%);
         }
-
-        // Apply color variants to the ::before element
-        &.drop_zone_color_primary::before { background-color: $primary; }
-        &.drop_zone_color_purple::before { background-color: $purple; }
       }
     }
   }