playbook_ui 14.15.0.pre.alpha.play1917lodashremoval2of36615 → 14.15.0.pre.rc.0

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

@@ -1,23 +1,38 @@
-import React, { useRef, useEffect } from "react";
-import classnames from "classnames";
+import React, { useState, useEffect, useCallback, useRef } from "react"
+import classnames from "classnames"
 
-import { GenericObject } from "../types";
-import { Row, RowSelectionState } from "@tanstack/react-table";
+import { GenericObject } from "../types"
 
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps, GlobalProps } from "../utilities/globalProps";
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  Row,
+  useReactTable,
+  Getter,
+  RowSelectionState
+} from "@tanstack/react-table"
 
-import Table from "../pb_table/_table";
-import { AdvancedTableProvider } from "./Context/AdvancedTableContext";
-import { getVirtualizedContainerStyles } from "./Utilities/TableContainerStyles";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
+import { globalProps, GlobalProps } from "../utilities/globalProps"
 
-import { TableHeader } from "./SubKits/TableHeader";
-import { TableBody } from "./SubKits/TableBody";
-import TablePagination from "./Components/TablePagination";
-import TableActionBar from "./Components/TableActionBar";
+import Table from "../pb_table/_table"
+import Card from "../pb_card/_card"
+import Caption from "../pb_caption/_caption"
+import Flex from "../pb_flex/_flex"
+import FlexItem from "../pb_flex/_flex_item"
 
-import { useTableState } from "./Hooks/useTableState";
-import { useTableActions } from "./Hooks/useTableActions";
+import AdvancedTableContext from "./Context/AdvancedTableContext"
+
+import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
+import { showActionBar, hideActionBar } from "./Utilities/ActionBarAnimationHelper"
+
+import { CustomCell } from "./Components/CustomCell"
+import { TableHeader } from "./SubKits/TableHeader"
+import { TableBody } from "./SubKits/TableBody"
+import Pagination from "../pb_pagination/_pagination"
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
@@ -48,8 +63,7 @@ type AdvancedTableProps = {
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
-  virtualizedRows?: boolean
-} & GlobalProps;
+} & GlobalProps
 
 const AdvancedTable = (props: AdvancedTableProps) => {
   const {
@@ -81,149 +95,282 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     tableProps,
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
-    virtualizedRows = false,
-  } = props;
+  } = props
 
-  // Component refs
-  const tableWrapperRef = useRef<HTMLDivElement>(null);
+  const [loadingStateRowCount, setLoadingStateRowCount] = useState(
+    initialLoadingRowsCount
+  )
 
-  // Initialize table state
-  const {
-    table,
-    expanded,
-    setExpanded,
-    hasAnySubRows,
-    selectedRowsLength,
-    fetchNextPage,
-    updateLoadingStateRowCount,
-    fullData,
-    totalFetched,
-    isFetching
-  } = useTableState({
-    tableData,
-    columnDefinitions,
-    expandedControl,
-    sortControl,
-    onRowToggleClick,
-    selectableRows,
-    initialLoadingRowsCount,
-    loading,
-    pagination,
-    paginationProps,
-    virtualizedRows,
-    tableOptions,
-    onRowSelectionChange
-  });
+  // Create a local state for expanded and setExpanded if expandedControl not used
+  const [localExpanded, setLocalExpanded] = useState({})
 
-  // Initialize table actions
-  const {
-    handleExpandOrCollapse,
-    onPageChange,
-    fetchMoreOnBottomReached
-  } = useTableActions({
-    table,
-    expanded,
-    setExpanded,
-    onToggleExpansionClick,
-    onRowSelectionChange
-  });
+  // Determine whether to use the prop or the local state
+  const expanded = expandedControl ? expandedControl.value : localExpanded
+  const setExpanded = expandedControl
+    ? expandedControl.onChange
+    : setLocalExpanded
+
+  const columnHelper = createColumnHelper()
+
+  //Row Selection
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  //Create cells for columns, with customization for first column
+  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, isFirstColumn?: boolean) => {
+    const columnCells = ({
+      row,
+      getValue,
+    }: {
+      row: Row<GenericObject>
+      getValue: Getter<string>
+    }) => {
+      const rowData = row.original
+
+    if (isFirstColumn) {
+      switch (row.depth) {
+        case 0: {
+          return (
+                <CustomCell
+                    customRenderer={customRenderer}
+                    getValue={getValue}
+                    onRowToggleClick={onRowToggleClick}
+                    row={row}
+                    selectableRows={selectableRows}
+                />
+          )
+        }
+        default: {
+          // Handle other depths based on cellAccessors
+          const depthAccessor = cellAccessors[row.depth - 1] // Adjust index for depth
+          const accessorValue = rowData[depthAccessor]
+          return accessorValue ? (
+            <CustomCell
+                customRenderer={customRenderer}
+                onRowToggleClick={onRowToggleClick}
+                row={row} 
+                selectableRows={selectableRows}
+                value={accessorValue} 
+            />
+          ) : (
+            "N/A"
+          )
+        }
+      }
+    }
+    return customRenderer
+    ? customRenderer(row, getValue())
+    : getValue()
+    }
+    return columnCells
+  }
+
+  const buildColumns = (columnDefinitions: GenericObject[], isRoot= true): any => {
+    return (
+      columnDefinitions &&
+      columnDefinitions.map((column, index) => {
+        const isFirstColumn = isRoot && index === 0; 
+        //Checking to see if grouped column or not
+        if (column.columns && column.columns.length > 0) {
+          return {
+            header: column.label || "",
+            columns: buildColumns(column.columns, false),
+          };
+        } else {
+          // Define the base column structure
+          const columnStructure = {
+            ...columnHelper.accessor(column.accessor, {
+              header: column.label || "",
+            }),
+          };
+
+          if (column.cellAccessors || column.customRenderer) {
+            columnStructure.cell = createCellFunction(
+              column.cellAccessors,
+              column.customRenderer,
+              isFirstColumn
+            );
+          }
+
+          return columnStructure;
+        }
+      })
+    );
+  };
+
+  //Create column array in format needed by Tanstack
+  const columns = buildColumns(columnDefinitions);
+
+  //Syntax for sorting Array if we want to manage state ourselves
+  const sorting = [
+    {
+      id: columnDefinitions[0].accessor,
+      desc:
+        sortControl && sortControl.value !== null
+          ? !sortControl.value.desc
+          : false,
+    },
+  ]
+
+  const customState = () => {
+    if (sortControl && selectableRows) {
+      return { state: { expanded, sorting, rowSelection } }
+    } else if (sortControl) {
+      return { state: { expanded, sorting } }
+    } else if (selectableRows) {
+      return { state: { expanded, rowSelection } }
+    } else {
+      return { state: { expanded } }
+    }
+  }
+
+  const paginationInitializer = pagination ? {
+    getPaginationRowModel: getPaginationRowModel(),
+    paginateExpandedRows: false,
+    initialState: {
+        pagination: {
+            pageIndex: paginationProps?.pageIndex ?? 0,
+            pageSize: paginationProps?.pageSize ??  20,
+        },
+    },
+} : {}
+
+//initialize table
+  const table = useReactTable({
+    data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
+    columns,
+    onExpandedChange: setExpanded,
+    getSubRows: (row: GenericObject) => row.children,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableSortingRemoval: false,
+    sortDescFirst: true,
+    onRowSelectionChange: setRowSelection,
+    getRowId: selectableRows ? row => row.id : undefined,
+    ...customState(),
+    ...paginationInitializer,
+    ...tableOptions,
+  })
+
+  const tableRows = table.getRowModel()
+
+  const hasAnySubRows = tableRows.rows.some(row => row.subRows && row.subRows.length > 0);
+  const selectedRowsLength = Object.keys(table.getState().rowSelection).length
+
+  useEffect(() => {
+    if (onRowSelectionChange) {
+      onRowSelectionChange(table.getState().rowSelection)
+    }
+  } , [table.getState().rowSelection, onRowSelectionChange])
 
   // Set table row count for loading state
+  const updateLoadingStateRowCount = useCallback(() => {
+    const rowsCount = table.getRowModel().rows.length
+    if (rowsCount !== loadingStateRowCount && rowsCount !== 0) {
+      setLoadingStateRowCount(rowsCount)
+    }
+  }, [tableData, loadingStateRowCount])
+
   useEffect(() => {
     if (!loading) {
-      updateLoadingStateRowCount();
+      updateLoadingStateRowCount()
     }
-  }, [loading, updateLoadingStateRowCount]);
+  }, [loading, updateLoadingStateRowCount])
 
-  // Check for infinite scroll
-  useEffect(() => {
-    fetchMoreOnBottomReached(
-      tableWrapperRef.current,
-      fetchNextPage,
-      isFetching,
-      totalFetched,
-      fullData.length
-    );
-  }, [fetchMoreOnBottomReached, fetchNextPage, isFetching, totalFetched, fullData.length]);
+  const handleExpandOrCollapse = async (row: Row<GenericObject>) => {
+    onToggleExpansionClick && onToggleExpansionClick(row)
+  
+    const expandedState = expanded;
+    const targetParent = row?.parentId;
+    const updatedRows = await updateExpandAndCollapseState(tableRows, expandedState, targetParent)
+    setExpanded(updatedRows)
+  }
 
-  // Build CSS classes and props
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
-    maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
+    maxHeight ? `advanced-table-max-height-${maxHeight}` : '', // max height as kit prop not global prop to control overflow-y
     globalProps(props),
     className
-  );
+  )
 
-  // Table wrapper styling with virtualization support
-  const tableWrapperStyle = virtualizedRows
-    ? getVirtualizedContainerStyles(maxHeight)
-    : {};
+  const onPageChange = (page: number) => {
+    table.setPageIndex(page - 1)
+  }
+//When to show the actions bar as a whole
+  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0
 
-  // Visibility flag for action bar
-  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
+  //Ref and useEffect for animating the actions bar
+  const cardRef = useRef(null);
+  useEffect(() => {
+    if (cardRef.current) {
+      if (isActionBarVisible) {
+        showActionBar(cardRef.current);
+      } else {
+        hideActionBar(cardRef.current);
+      }
+    }
+  }, [isActionBarVisible]);
 
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
+    <div {...ariaProps} 
+        {...dataProps} 
         {...htmlProps}
-        className={classes}
+        className={classes} 
         id={id}
-        onScroll={virtualizedRows ? e => fetchMoreOnBottomReached(
-          e.currentTarget,
-          fetchNextPage,
-          isFetching,
-          totalFetched,
-          fullData.length
-        ) : undefined}
-        ref={tableWrapperRef}
-        style={tableWrapperStyle as React.CSSProperties}
     >
-      <AdvancedTableProvider
-          columnDefinitions={columnDefinitions}
-          enableToggleExpansion={enableToggleExpansion}
-          enableVirtualization={virtualizedRows}
-          expanded={expanded}
-          expandedControl={expandedControl}
-          handleExpandOrCollapse={handleExpandOrCollapse}
-          hasAnySubRows={hasAnySubRows}
-          inlineRowLoading={inlineRowLoading}
-          isActionBarVisible={isActionBarVisible}
-          loading={loading}
-          responsive={responsive}
-          selectableRows={selectableRows}
-          setExpanded={setExpanded}
-          showActionsBar={showActionsBar}
-          sortControl={sortControl}
-          subRowHeaders={tableOptions?.subRowHeaders}
-          table={table}
-          tableContainerRef={tableWrapperRef}
-          toggleExpansionIcon={toggleExpansionIcon}
-          virtualizedRows={virtualizedRows}
+      <AdvancedTableContext.Provider
+          value={{
+            columnDefinitions,
+            enableToggleExpansion,
+            expanded,
+            expandedControl,
+            handleExpandOrCollapse,
+            inlineRowLoading,
+            isActionBarVisible,
+            loading,
+            responsive,
+            setExpanded,
+            sortControl,
+            table,
+            toggleExpansionIcon,
+            showActionsBar,
+            selectableRows,
+            hasAnySubRows
+          }}
       >
-        <React.Fragment>
-          {/* Top Pagination */}
-          {pagination && (
-            <TablePagination
-                onChange={onPageChange}
-                position="top"
-                range={paginationProps?.range}
-                table={table}
-            />
-          )}
-
-          {/* Selection Action Bar */}
-          <TableActionBar
-              actions={actions}
-              isVisible={isActionBarVisible}
-              selectedCount={selectedRowsLength}
-          />
-
-          {/* Main Table */}
+        <>
+          {pagination &&
+              <Pagination
+                  current={table.getState().pagination.pageIndex + 1}
+                  key={`pagination-top-${table.getState().pagination.pageIndex + 1}`}
+                  marginBottom="xs"
+                  onChange={onPageChange}
+                  range={paginationProps?.range ? paginationProps?.range : 5}
+                  total={table.getPageCount()}
+                  />
+          }
+          <Card
+              borderNone={!isActionBarVisible}
+              className={`${isActionBarVisible && "show-action-card row-selection-actions-card"}`}
+              htmlOptions={{ ref: cardRef as any }}
+              padding={`${isActionBarVisible ? "xs" : "none"}`}
+          >
+            <Flex alignItems="center" 
+                justify="between"
+            >
+              <Caption color="light" 
+                  paddingLeft="xs" 
+                  size="xs"
+              >
+                {selectedRowsLength} Selected
+              </Caption>
+              <FlexItem>{actions}</FlexItem>
+            </Flex>
+          </Card>
           <Table
               className={`${loading ? "content-loading" : ""}`}
               dark={dark}
@@ -241,24 +388,23 @@ const AdvancedTable = (props: AdvancedTableProps) => {
               </>
             )}
           </Table>
-
-          {/* Bottom Pagination */}
-          {pagination && (
-            <TablePagination
+          {pagination &&
+            <Pagination
+                current={table.getState().pagination.pageIndex + 1}
+                key={`pagination-bottom-${table.getState().pagination.pageIndex + 1}`}
+                marginTop="xs"
                 onChange={onPageChange}
-                position="bottom"
-                range={paginationProps?.range}
-                table={table}
+                range={paginationProps?.range ? paginationProps?.range : 5}
+                total={table.getPageCount()}
             />
-          )}
-        </React.Fragment>
-      </AdvancedTableProvider>
+          }
+        </>
+      </AdvancedTableContext.Provider>
     </div>
-  );
-};
+  )
+}
 
-// Re-export sub-components
-AdvancedTable.Header = TableHeader;
-AdvancedTable.Body = TableBody;
+AdvancedTable.Header = TableHeader
+AdvancedTable.Body = TableBody
 
-export default AdvancedTable;
+export default AdvancedTable

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -7,7 +7,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from '../utilities/object' 
+import { merge } from 'lodash'
 
 import classnames from "classnames";
 

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 
 import React from 'react'
-import { get } from '../utilities/object'
-
+import { get } from 'lodash'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { merge } from '../utilities/object' 
+import { merge } from 'lodash'
 
 type CircleChartProps = {
   align?: "left" | "right" | "center";

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -1,8 +1,5 @@
 <%= pb_content_tag(:div,
-    class: object.classname + object.error_class,
-    'data-pb-date-picker' => true,
-    'data-validation-message' => object.validation_message,
-      ) do %>
+    class: object.classname + object.error_class) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -75,8 +75,6 @@ module Playbook
                         default: [1900, 2100]
       prop :custom_event_type, type: Playbook::Props::String,
                                default: ""
-      prop :validation_message, type: Playbook::Props::String,
-                                default: ""
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -1,8 +1,4 @@
-<div
-    class="pb_dialog_wrapper_rails <%= object.full_height_style %>"
-    data-pb-dialog-wrapper="true"
-    data-overlay-click= <%= object.overlay_close %>
->
+<div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
     <%= pb_content_tag(:dialog) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
@@ -37,3 +33,8 @@
             <%= content %>
     <% end %>
 </div>
+
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => dialogHelper())
+    window.addEventListener("turbo:frame-load", () => dialogHelper())
+<% end %>

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -1,5 +1,3 @@
-// Three places in Nitro depend on this function inside the window scope.
-// We will keep this file until we remove this dependency from Nitro.
 const dialogHelper = () => {
   const openTrigger = document.querySelectorAll("[data-open-dialog]");
   const closeTrigger = document.querySelectorAll("[data-close-dialog]");

data/app/pb_kits/playbook/pb_drawer/_drawer.scss

@@ -134,11 +134,11 @@ body.PBDrawer__Body--close {
   transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
 }
 
-.pb_drawer_lg_left .pb_drawer {
+.pb_drawer_lg_left.pb_drawer {
   transform: translateX(-100%);
 }
 
-.pb_drawer_lg_right .pb_drawer {
+.pb_drawer_lg_right.pb_drawer {
   transform: translateX(100%);
 }
 
@@ -157,34 +157,6 @@ body.PBDrawer__Body--close {
   animation-duration: $animation-duration;
   outline: none;
 
- &.pb_drawer_within_element_rails {
-    position: relative;
-    width: 100%;
-    display: block;
-    background-color: $white;
-    overflow: hidden;
-
-    // Use max-height for a smooth accordion-like animation
-    max-height: 0;
-    transition: max-height $animation-duration ease-in-out;
-    z-index: 1;
-
-    &.open {
-      max-height: 1000px;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: inherit;
-      z-index: -1;
-    }
-  }
-
   &.pb_drawer_within_element {
     position: relative;
     width: 100%;
@@ -325,6 +297,7 @@ body.PBDrawer__Body--close {
     display: flex;
     background-color: rgba($bg_dark, $opacity_4);
     z-index: $z-index;
+    opacity: 0;
     animation: overlayFade $animation-duration ease-in-out forwards;
     
     &[class*="_left"]{
@@ -352,23 +325,10 @@ body.PBDrawer__Body--close {
     left: 0;
     right: 0;
     bottom: 0;
-    display: flex;
     z-index: $z-index;
     opacity: 1;
     pointer-events: none;
 
-    &[class*="_right"]{
-      justify-content: flex-end;
-    }
-
-    &[class*="_left"]{
-      justify-content: flex-start;
-    }
-
-    &[class*="_center"]{
-      justify-content: center;
-    }
-
     &_before_close {
       height: 0;
     }