playbook_ui 14.21.2.pre.alpha.PLAY22358326 → 14.21.2.pre.alpha.PLAY22558410

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 775191059b582c0fb74cc6d654e3b563226fbe855b9b9f267fa4cd982955fa2f
-  data.tar.gz: fca502f3f539f439b6471b266cc211b46bb0fcba13d00189e89ce0893df0a9be
+  metadata.gz: e74ebcaf8b226f04a617fc63083c59c61951a3f792409c906b7556ef4976f6c0
+  data.tar.gz: 755270c0eee4c986ca9d0534ffd31bec09383994a038ab4a6da7e43740537e10
 SHA512:
-  metadata.gz: 61fc896c9d0a0a65db99048f13c0ac4fe70a1bd3a036a807759a699bbdf7a10589898f04760eed3b77fab43f664d798bf9a7731dd20f761255d9f86be68317f5
-  data.tar.gz: 923bafc7292dbf1cd30e529e20add0175ca391d4e1630c9cacb1a4f26f2696209f80acc8aca8ba96e344c60eb7ef73e211778204a9aaab0b5159403a92bad7d5
+  metadata.gz: f7329823f5e763a4aa9712a78d7467fde07db90542cb2d6416ade72983d3984651f03fb3bb847f92582293623569a9c24a8756b051eec84a524b525a2164b9ce
+  data.tar.gz: 5fab13b2c33b5ee332beb81aed83254723ed0808a7d0b85cc68acadde24d79f8cdf773c7b97e73025e1a6ed00e118304533fab5581ce7bcfd46db7c7b98a843d

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

@@ -19,6 +19,7 @@ interface CustomCellProps {
   value?: string
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
   selectableRows?: boolean
+  customStyle?: GenericObject
 } 
 
 export const CustomCell = ({
@@ -28,6 +29,7 @@ export const CustomCell = ({
   value,
   customRenderer,
   selectableRows,
+  customStyle = {},
 }: CustomCellProps & GlobalProps) => {
   const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
 
@@ -43,7 +45,7 @@ export const CustomCell = ({
   const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
 
   return (
-    <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
+    <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
       <Flex 
           alignItems="center" 
           columnGap="xs"
@@ -65,6 +67,7 @@ export const CustomCell = ({
           <button
               className="gray-icon expand-toggle-icon"
               onClick={() => handleOnExpand(row)}
+              style={{ color: customStyle?.expandButtonColor }}
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"

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

@@ -27,6 +27,7 @@ const TableCellRenderer = ({
   loading = false,
   stickyLeftColumn,
   columnPinning,
+  customRowStyle,
   columnDefinitions,
 }: {
   row: Row<GenericObject>
@@ -34,6 +35,7 @@ const TableCellRenderer = ({
   loading?: boolean | string
   stickyLeftColumn?: string[]
   columnPinning: { left: string[] }
+  customRowStyle?: GenericObject
   columnDefinitions?: {[key:string]:any}[]
 }) => {
   return (
@@ -74,6 +76,8 @@ const TableCellRenderer = ({
                     ? '180px'
                     : `${column.getStart("left")}px`
                   : undefined,
+                  backgroundColor: i === 0 && customRowStyle?.backgroundColor,
+                  color: customRowStyle?.fontColor,
             }}
           >
             {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
@@ -107,6 +111,7 @@ export const RegularTableView = ({
     pinnedRows,
     headerHeight,
     rowHeight,
+    rowStyling = [],
     sampleRowRef,
   } = useContext(AdvancedTableContext)
 
@@ -171,6 +176,7 @@ export const RegularTableView = ({
         const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
         const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
+        const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
 
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -189,6 +195,7 @@ export const RegularTableView = ({
                 className={`${rowColor} ${row.depth > 0 ? `depth-sub-row-${row.depth}` : ""}`}
                 id={`${row.index}-${row.id}-${row.depth}-row`}
                 ref={isFirstRegularRow ? sampleRowRef : null}
+                style={{backgroundColor: customRowStyle?.backgroundColor, color: customRowStyle?.fontColor}}
             >
               {/* Render custom checkbox column when we want selectableRows for non-expanding tables */}
               {selectableRows && !hasAnySubRows && (
@@ -206,6 +213,7 @@ export const RegularTableView = ({
                   collapsibleTrail={collapsibleTrail}
                   columnDefinitions={columnDefinitions}
                   columnPinning={columnPinning}
+                  customRowStyle={customRowStyle}
                   loading={loading}
                   row={row}
                   stickyLeftColumn={stickyLeftColumn}

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

@@ -32,6 +32,7 @@ interface UseTableStateProps {
   tableOptions?: GenericObject;
   onRowSelectionChange?: (arg: RowSelectionState) => void;
   columnVisibilityControl?: GenericObject;
+  rowStyling?: GenericObject;
 }
 
 export function useTableState({
@@ -49,6 +50,7 @@ export function useTableState({
   tableOptions,
   columnVisibilityControl,
   pinnedRows,
+  rowStyling
 }: UseTableStateProps) {
 
   // Create a local state for expanded and setExpanded if expandedControl not used
@@ -103,7 +105,8 @@ export function useTableState({
           column.customRenderer,
           isFirstColumn,
           onRowToggleClick,
-          selectableRows
+          selectableRows,
+          rowStyling
         );
       }
 
@@ -167,7 +170,7 @@ export function useTableState({
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
     onRowPinningChange,
-    getRowId: (selectableRows || pinnedRows) ? row => row.id : undefined,
+    getRowId: (selectableRows || pinnedRows || rowStyling) ? row => row.id : undefined,
     onColumnVisibilityChange: setColumnVisibility,
     meta: {
       columnDefinitions

data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx

@@ -17,7 +17,8 @@ export const createCellFunction = (
   customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element,
   isFirstColumn?: boolean,
   onRowToggleClick?: (row: Row<GenericObject>) => void,
-  selectableRows?: boolean
+  selectableRows?: boolean,
+  rowStyling?: GenericObject
 ) => {
   // Add display name to the returned function
   const cellRenderer = ({
@@ -28,6 +29,7 @@ export const createCellFunction = (
     getValue: Getter<string>
   }) => {
     const rowData = row.original;
+    const customStyle = rowStyling?.length > 0 && rowStyling?.find((s:GenericObject) => s?.rowId === row.id);
 
     if (isFirstColumn) {
       switch (row.depth) {
@@ -35,6 +37,7 @@ export const createCellFunction = (
           return (
             <CustomCell
                 customRenderer={customRenderer}
+                customStyle={customStyle}
                 getValue={getValue}
                 onRowToggleClick={onRowToggleClick}
                 row={row}

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

@@ -57,6 +57,7 @@ type AdvancedTableProps = {
     onChange?: (value: RowPinningState) => void;
   };
   responsive?: "scroll" | "none",
+  rowStyling?: GenericObject[],
   scrollBarNone?: boolean,
   selectableRows?: boolean,
   showActionsBar?: boolean,
@@ -98,6 +99,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     paginationProps,
     pinnedRows,
     responsive = "scroll",
+    rowStyling,
     scrollBarNone= false,
     showActionsBar = true,
     selectableRows,
@@ -144,6 +146,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     columnVisibilityControl,
     pinnedRows,
+    rowStyling
   });
 
   // Initialize table actions
@@ -336,6 +339,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             onExpandByDepthClick={onExpandByDepthClick}
             pinnedRows={pinnedRows}
             responsive={responsive}
+            rowStyling={rowStyling}
             selectableRows={selectableRows}
             setExpanded={setExpanded}
             showActionsBar={showActionsBar}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from "react"
 import { render, screen, waitFor } from "../utilities/test-utils"
 
-import { AdvancedTable, Pill } from "playbook-ui"
+import { AdvancedTable, Pill, colors } from "playbook-ui"
 
 global.ResizeObserver = class {
   observe() {}
@@ -652,3 +652,27 @@ test("renders virtualized table rows and header", () => {
   const virtualizedRows = kit.querySelectorAll('.virtualized-table-row')
   expect(virtualizedRows.length).toBeLessThan(MOCK_DATA_WITH_ID.length)
 })
+
+test("rowStyling prop works as expected", () => {
+  const rowStyling = [
+  {
+    rowId: "1",
+    backgroundColor: colors.white,
+    fontColor: colors.black
+  },
+];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        rowStyling={rowStyling}
+        tableData={MOCK_DATA_WITH_ID}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const tableBody = kit.querySelector('tbody')
+  const row1 = tableBody.querySelector('tr:nth-child(1)') 
+  expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
+})

data/app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js

@@ -0,0 +1,36 @@
+function showActionBar(actionBar, selectedCount) {
+  // Show action bar directly
+  actionBar.style.height = "auto";
+  actionBar.style.overflow = "visible";
+  actionBar.style.opacity = "1";
+  actionBar.style.transitionProperty = "all";
+  actionBar.style.transitionTimingFunction = "ease-in-out";
+  actionBar.classList.remove("p_none");
+  actionBar.classList.add("p_xs", "is-visible", "show-action-card");
+
+  // Update the count
+  const countElement = actionBar.querySelector(".selected-count");
+  if (countElement) {
+    countElement.textContent = `${selectedCount} Selected`;
+  }
+}
+
+function hideActionBar(actionBar) {
+  // Hide action bar directly
+  actionBar.style.height = "0px";
+  actionBar.style.overflow = "hidden";
+  actionBar.style.opacity = "0";
+  actionBar.classList.add("p_none");
+  actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
+}
+
+export function updateSelectionActionBar(table, selectedCount) {
+  const actionBar = table.querySelector(".row-selection-actions-card");
+  if (!actionBar) return;
+
+  if (selectedCount > 0) {
+    showActionBar(actionBar, selectedCount);
+  } else {
+    hideActionBar(actionBar);
+  }
+}

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx

@@ -0,0 +1,64 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
+import { colors } from "playbook-ui"
+
+const AdvancedTableRowStyling = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+const rowStyling = [
+  {
+    rowId: "1",
+    backgroundColor: colors.warning,
+  },
+  {
+    rowId: "8",
+    backgroundColor: colors.category_1,
+    fontColor: colors.white,
+    expandButtonColor: colors.white,
+  },
+];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          rowStyling={rowStyling}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableRowStyling

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.md

@@ -0,0 +1,7 @@
+The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `rowStyling` gives you 3 optional controls:
+
+- `backgroundColor` : use this to control the background color of the row
+- `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.
+- `expandButtonColor`: use this to control the color of the expand icon if needed, for example if using a darker background color.
+
+**NOTE:** Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function.

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

@@ -59,6 +59,7 @@ examples:
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
+  - advanced_table_row_styling: Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -34,6 +34,7 @@ export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table
 export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
 export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
+export { default as AdvancedTableRowStyling } from './_advanced_table_row_styling.jsx'
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
 export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'

data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js

@@ -1,106 +1,82 @@
 import PbEnhancedElement from "../pb_enhanced_element";
+import { updateSelectionActionBar } from "./advanced_table_action_bar";
 
-const FLAT_ADVANCED_TABLE_SELECTOR = "[data-flat-advanced-table-select]";
+const FLAT_SELECTOR = "[data-flat-advanced-table-select='true']";
+const SELECT_ALL_SELECTOR = "#select-all-rows input[type='checkbox']";
 
 export default class PbFlatAdvancedTable extends PbEnhancedElement {
   static get selector() {
-    return FLAT_ADVANCED_TABLE_SELECTOR;
+    return FLAT_SELECTOR;
   }
 
-  get target() {
-    const table = this.element.closest("table");
-    return table.querySelectorAll(
-      `"label[data-flat-advanced-table-select='true']"`
-    );
+  constructor(...args) {
+    super(...args);
+    // keep track of selected IDs per-table-instance
+    this.selectedRows = new Set();
   }
 
-  static selectedRows = new Set();
-
   connect() {
     const table = this.element.closest("table");
-    if (!table) return;
+    if (!table || table.dataset.flatAdvancedInit) return;
+    table.dataset.flatAdvancedInit = "true";
+
+    // Reference to outer container for action bar
     const mainTable = this.element.closest(".pb_advanced_table");
-    // Prevent double-init
-    if (table.dataset.flatAdvancedTableInitialized) return;
-    table.dataset.flatAdvancedTableInitialized = "true";
+    // This so it is hidden on first render
+    if (mainTable) {
+      updateSelectionActionBar(mainTable, 0);
+    }
 
-    const checkboxLabels = table.querySelectorAll(
-      "label[data-flat-advanced-table-select='true']"
-    );
-    checkboxLabels.forEach((label) => {
-      const checkbox = label.querySelector("input[type='checkbox']");
-      if (!checkbox) return;
-      checkbox.addEventListener("change", () => {
-        const rowId = checkbox.id;
-        const isChecked = checkbox.checked;
-      
-        if (isChecked) {
-          PbFlatAdvancedTable.selectedRows.add(rowId);
-        } else {
-          PbFlatAdvancedTable.selectedRows.delete(rowId);
-        }
-      
-        // Update row background color based on checkbox state
-        const rowEl = checkbox.closest("tr");
-        if (rowEl) {
-          if (isChecked) {
-            rowEl.classList.add("bg-row-selection");
-            rowEl.classList.remove("bg-white");
-          } else {
-            rowEl.classList.remove("bg-row-selection");
-            rowEl.classList.add("bg-white");
-          }
-        }
-        const allCheckboxes = table.querySelectorAll(
-          "label[data-flat-advanced-table-select='true'] input[type='checkbox']"
-        );
-      
-        const selectAllInput = table.querySelector(
-          "#select-all-rows input[type='checkbox']"
-        );
-      
-        if (selectAllInput) {
-          const allChecked = Array.from(allCheckboxes).every(cb => cb.checked);
-          selectAllInput.checked = allChecked;
-        }
-      
+    const updateCheckboxState = () => {
+      // Sync dataset on main table
+      if (mainTable) {
         mainTable.dataset.selectedRows = JSON.stringify(
-          Array.from(PbFlatAdvancedTable.selectedRows)
+          Array.from(this.selectedRows)
         );
-      });
-      
-    });
+        updateSelectionActionBar(mainTable, this.selectedRows.size);
+      }
+    };
+
+    table.addEventListener("change", (e) => {
+      const rowCb = e.target.closest(FLAT_SELECTOR + " input[type='checkbox']");
+      const allCb = e.target.closest(SELECT_ALL_SELECTOR);
+      if (!rowCb && !allCb) return;
 
-    // Handle select-all checkbox
-    const selectAllWrapper = table.querySelector("#select-all-rows");
-    if (selectAllWrapper) {
-      const selectAllInput = selectAllWrapper.querySelector(
-        'input[type="checkbox"]'
-      );
-      selectAllInput.addEventListener("change", () => {
-        const checkAll = selectAllInput.checked;
+      if (rowCb) {
+        const id = rowCb.id;
+        if (rowCb.checked) this.selectedRows.add(id);
+        else this.selectedRows.delete(id);
 
-        checkboxLabels.forEach((label) => {
-          const cb = label.querySelector("input[type='checkbox']");
-          cb.checked = checkAll;
-          const rowId = cb.id;
-          const rowEl = cb.closest("tr");
+        const tr = rowCb.closest("tr");
+        tr?.classList.toggle("bg-row-selection", rowCb.checked);
+        tr?.classList.toggle("bg-white", !rowCb.checked);
+
+        // Sync header checkbox
+        const header = table.querySelector(SELECT_ALL_SELECTOR);
+        if (header) {
+          const all = Array.from(
+            table.querySelectorAll(FLAT_SELECTOR + " input[type='checkbox']")
+          ).every((cb) => cb.checked);
+          header.checked = all;
+        }
+      }
 
-          if (checkAll) {
-            PbFlatAdvancedTable.selectedRows.add(rowId);
-            rowEl?.classList.add("bg-row-selection");
-            rowEl?.classList.remove("bg-white");
-          } else {
-            PbFlatAdvancedTable.selectedRows.delete(rowId);
-            rowEl?.classList.remove("bg-row-selection");
-            rowEl?.classList.add("bg-white");
-          }
+      if (allCb) {
+        const checked = allCb.checked;
+        Array.from(
+          table.querySelectorAll(FLAT_SELECTOR + " input[type='checkbox']")
+        ).forEach((cb) => {
+          cb.checked = checked;
+          const tr = cb.closest("tr");
+          tr?.classList.toggle("bg-row-selection", checked);
+          tr?.classList.toggle("bg-white", !checked);
+          const id = cb.id;
+          if (checked) this.selectedRows.add(id);
+          else this.selectedRows.delete(id);
         });
+      }
 
-        mainTable.dataset.selectedRows = JSON.stringify(
-          Array.from(PbFlatAdvancedTable.selectedRows)
-        );
-      });
-    }
+      updateCheckboxState();
+    });
   }
 }