playbook_ui 14.20.0.pre.alpha.PLAY2178advancedtablerowpinning7978 → 14.20.0.pre.alpha.PLAY2178advancedtablerowpinning7983

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c8e79a2664649f32a2195a4e9199e868f6c1ebac20764479066f12c2dbbd7e9c
-  data.tar.gz: da415e2485131587cc6a32a03c8145152df934616500a008ef06b4e49c6c049a
+  metadata.gz: 5e193bba835e739b1f100fc8f6dd9a6a350d05d107f30920aa4cab96511f8101
+  data.tar.gz: 4bad0ac7db2f0fff41ffe99e0863bce698b55dbf135e69d72da8698d74e3f5ba
 SHA512:
-  metadata.gz: fd7c9331ca4274f9e6e95d186ada4456ddfa8240d1cc48249dd0b899931bf3db83576abfbfed0ebd4105e2159d57cc9efb75a3a16e2d33cc6a37262dede08746
-  data.tar.gz: 9072a56af0c016514dd3a3f3d5b0e20fbdbaea20ca5b25d258f3c31c859fc0d4edc855c58ed297089453525b67df0789c6ff216b9dd500eaa5115664a4bba396
+  metadata.gz: 718a64fef8b65a401ee28133274da854894174d054fcc2afb408d1f9ee01653b11d786225489e0250e041fad112dde64afaadd6fd48c9e7dc70e8e8ec6ad64fc
+  data.tar.gz: 61315558b9260c2e4a407cd06ae21690ff4d9902242b5081238731550f135bf340b20e8f6859f12a7bd7926bf4ce53fd79b99b2badc2e79e97bc206fa9f307a2

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

@@ -19,6 +19,71 @@ type RegularTableViewProps = {
   subRowHeaders?: string[]
 }
 
+// Helper function for Table Rendering
+const TableCellRenderer = ({
+  row,
+  collapsibleTrail = true,
+  loading = false,
+  stickyLeftColumn,
+  columnPinning
+}: {
+  row: Row<GenericObject>
+  collapsibleTrail?: boolean
+  loading?: boolean | string
+  stickyLeftColumn?: string[]
+  columnPinning: { left: string[] }
+}) => {
+  return (
+    <>
+      {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
+        const isPinnedLeft = columnPinning.left.includes(cell.column.id);
+        const isLastCell = (() => {
+          const parent = cell.column.parent;
+          if (!parent) {
+            const last = row.getVisibleCells().at(-1);
+            return last?.column.id === cell.column.id;
+          }
+
+          const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
+          return visibleSiblings.at(-1)?.id === cell.column.id;
+        })();
+
+        const { column } = cell;
+        
+        return (
+          <td
+              align="right"
+              className={classnames(
+                `${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`}>
+              {loading ? (
+                <LoadingCell />
+              ) : (
+                flexRender(cell.column.columnDef.cell, cell.getContext())
+              )}
+            </span>
+          </td>
+        );
+      })}
+    </>
+  )
+}
+
 export const RegularTableView = ({
   collapsibleTrail = true,
   subRowHeaders,
@@ -70,50 +135,13 @@ export const RegularTableView = ({
             zIndex: '3'
           }}
       >
-        {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
-          const isPinnedLeft = columnPinning.left.includes(cell.column.id);
-          const isLastCell = (() => {
-            const parent = cell.column.parent;
-              if (!parent) {
-                const last = row.getVisibleCells().at(-1);
-                return last?.column.id === cell.column.id;
-              }
-
-              const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
-              return visibleSiblings.at(-1)?.id === cell.column.id;
-              })();
-
-          const { column } = cell;
-          return (
-            <td
-                align="right"
-                className={classnames(
-                  `${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`}>
-                {loading ? (
-                  <LoadingCell />
-                ) : (
-                  flexRender(cell.column.columnDef.cell, cell.getContext())
-                )}
-              </span>
-            </td>
-          );
-        })}
+        <TableCellRenderer
+            collapsibleTrail={collapsibleTrail}
+            columnPinning={columnPinning}
+            loading={loading}
+            row={row}
+            stickyLeftColumn={stickyLeftColumn}
+        />
       </tr>
     )
   }
@@ -167,51 +195,13 @@ export const RegularTableView = ({
                   />
                 </td>
               )}
-
-              {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
-                const isPinnedLeft = columnPinning.left.includes(cell.column.id);
-                const isLastCell = (() => {
-                  const parent = cell.column.parent;
-                    if (!parent) {
-                      const last = row.getVisibleCells().at(-1);
-                      return last?.column.id === cell.column.id;
-                    }
-
-                    const visibleSiblings = parent.columns.filter(col => col.getIsVisible());
-                    return visibleSiblings.at(-1)?.id === cell.column.id;
-                   })();
-
-                const { column } = cell;
-                return (
-                  <td
-                      align="right"
-                      className={classnames(
-                        `${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`}>
-                      {loading ? (
-                        <LoadingCell />
-                      ) : (
-                        flexRender(cell.column.columnDef.cell, cell.getContext())
-                      )}
-                    </span>
-                  </td>
-                );
-              })}
+              <TableCellRenderer
+                  collapsibleTrail={collapsibleTrail}
+                  columnPinning={columnPinning}
+                  loading={loading}
+                  row={row}
+                  stickyLeftColumn={stickyLeftColumn}
+              />
             </tr>
 
             {/* Display LoadingInline if Row Data is querying and there are no children already */}

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -24,7 +24,10 @@ interface UseTableStateProps {
   loading?: boolean | string;
   pagination?: boolean;
   paginationProps?: GenericObject;
-  pinnedRows?: any;
+  pinnedRows?: {
+    value?: RowPinningState;
+    onChange?: (value: RowPinningState) => void;
+  };
   virtualizedRows?: boolean;
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;

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

@@ -368,6 +368,10 @@
     box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
+  .pb_table_td:nth-child(2) {
+    box-shadow: inset 1px 0px 0px 0px var(--column-border-color) !important;
+  }
+
   // Color for collapsible trail
   .collapsible-trail {
     background-color: $border_light !important;
@@ -564,6 +568,10 @@
         box-shadow: $shadow_deep !important;
       }
 
+      .pb_table_td:nth-child(2) {
+        box-shadow: 0 0 0 0 !important;
+      }
+
       .pb_advanced_table_header,
       .pb_advanced_table_body {
         th.sticky-left,

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

@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useState, useCallback } from "react";
 import classnames from "classnames";
 
 import { GenericObject } from "../types";
-import { Row, RowSelectionState } from "@tanstack/react-table";
+import { Row, RowSelectionState, RowPinningState } from "@tanstack/react-table";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
@@ -52,7 +52,10 @@ type AdvancedTableProps = {
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
   pagination?: boolean,
   paginationProps?: GenericObject,
-  pinnedRows?: any,
+  pinnedRows?: {
+    value?: RowPinningState;
+    onChange?: (value: RowPinningState) => void;
+  };
   responsive?: "scroll" | "none",
   selectableRows?: boolean,
   showActionsBar?: boolean,

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -115,6 +115,7 @@ export default class PbDropdown extends PbEnhancedElement {
 
   handleSearch(term = "") {
     const lcTerm = term.toLowerCase();
+    let hasMatch = false
     this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
       //make it so that if the option is selected, it will not show up in the search results
       if (this.isMultiSelect && this.selectedOptions.has(opt.dataset.dropdownOptionLabel)) {
@@ -128,9 +129,32 @@ export default class PbDropdown extends PbEnhancedElement {
       // hide or show option
       const match = label.includes(lcTerm);
       opt.style.display = match ? "" : "none";
+      if (match) hasMatch = true
     });
 
     this.adjustDropdownHeight();
+
+    this.removeNoOptionsMessage()
+    if (!hasMatch) {
+      this.showNoOptionsMessage()
+    }
+  }
+
+  showNoOptionsMessage() {
+    if (this.element.querySelector(".dropdown_no_options")) return;
+
+    const noOptionElement = document.createElement("div");
+    noOptionElement.className = "pb_body_kit_light dropdown_no_options pb_item_kit p_xs display_flex justify_content_center";
+    noOptionElement.textContent = "no option";
+
+    this.target.appendChild(noOptionElement);
+  }
+
+  removeNoOptionsMessage() {
+    const existing = this.element.querySelector(".dropdown_no_options");
+    if (existing) {
+      existing.remove();
+    }
   }
 
   handleOptionClick(event) {