playbook_ui 14.14.0.pre.alpha.PBNTR866finalizecssendlessscroll6486 → 14.14.0.pre.alpha.PBNTR888selectvaliditymessage6348

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_drawer/_drawer.scss

@@ -134,6 +134,14 @@ body.PBDrawer__Body--close {
   transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
 }
 
+.pb_drawer_lg_left.pb_drawer {
+  transform: translateX(-100%);
+}
+
+.pb_drawer_lg_right.pb_drawer {
+  transform: translateX(100%);
+}
+
 .pb_drawer.pb_drawer_after_open {
   pointer-events: auto;
   transform: translate3d(0, 0, 0);
@@ -149,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%;
@@ -349,10 +329,6 @@ body.PBDrawer__Body--close {
     opacity: 1;
     pointer-events: none;
 
-    & .pb_drawer {
-      pointer-events: auto;
-    }
-
     &_before_close {
       height: 0;
     }

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb

@@ -1,20 +1 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-1", 
-    }) do  %>
-        Test me (Left Drawer)
-    <% end %>
-    
-    
-    <%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-2", 
-        placement: "right"
-    }) do  %>
-        Test me (Right Drawer)
-    <% end %>
-<% end %>
-
+<%= pb_rails("drawer") %>

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

@@ -2,11 +2,6 @@ examples:
   
   rails:
   - drawer_default: Default
-  - drawer_behavior: Push Behavior
-  - drawer_menu: Within Element
-  - drawer_sizes: Sizes
-  - drawer_overlay: Overlay
-  - drawer_borders: Borders 
   
   
   react:

data/app/pb_kits/playbook/pb_drawer/drawer.html.erb

@@ -1,20 +1,12 @@
-<% if within_element %>
-    <%= pb_content_tag(:div, data: {breakpoint: object.breakpoint} ) do %>
-        <%= content %>
-    <% end %>
-<% else %>
-    <div class="pb_drawer_wrapper"
-        id="drawer-wrapper-<%= object.id %>"
-        style="display:none;"
-        data-behavior="<%= object.behavior %>"
-        data-size="<%= object.size %>"
-        data-placement="<%= object.placement %>"
-        data-breakpoint="<%= object.breakpoint %>"
-        >
-        <div class="<%= overlay_classes %>" style="display:none;" id="drawer-overlay-<%= object.id %>"> 
-            <%= pb_content_tag do %>
-                <%= content %>
-            <% end %>
-        </div>
-    </div>
-<% end %>
+<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
+<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
+<%= pb_content_tag(
+    # :div,
+    # aria: object.aria,
+    # class: object.classname,
+    # data: object.data,
+    # id: object.id,
+    # **combined_html_options
+) do %>
+  <span>DRAWER CONTENT</span>
+<% end %>