playbook_ui 14.10.0.pre.alpha.play16825301 → 14.10.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bcddb88a9dfb415486e86df29a22c55884190ed39205451c9034a621311c75f8
-  data.tar.gz: 344f303ea394159d8314f69334c59620cc6f1ab1c5781768cb700e7b17ac09e4
+  metadata.gz: 6eeac1641692681cc2b3574b0b29cd8aada02014cef63306160e935b9ad0a395
+  data.tar.gz: 1711db522e35dd4218ec9ecb47d4316d0b58c731e4d4b95cc62a8197cb4034b8
 SHA512:
-  metadata.gz: 40d48f3e79dffff5949ede088d54fbf2042a1b7f9443a84f9222d9aaa640cd4428fe4f8c19342558360c760e011a9457cff979e9d27a980446014b3bdb2db999
-  data.tar.gz: ac66fc8ced8a8332815151154d12cd7628813ddae7ea3b22b84997923228edc5efcf40c4fb2f0d08acbf565b0f4c1c6e84c7d439f3d0e226ebd96eba2b451ea7
+  metadata.gz: 0bacb49cde1c17d2e4afc1f69939dbdd3bd5fe3c40d20b20b26ea43c3171363eb464a54dcd6ddeb6df4a3c1a537374f362c7dfd10b274757934e3e03c300b7e5
+  data.tar.gz: 00e186fdd8852d32e48e104742c3e9e8f76da180b3fead2acd32b24067b4f5d033e8ec4fb65c25fa9ccc858b32a3766b5ae687cf042b8fc6fc5b88e18be15e70

data/app/pb_kits/playbook/_playbook.scss

@@ -128,4 +128,3 @@
 @import 'utilities/truncate';
 @import 'utilities/vertical_align';
 @import 'utilities/height';
-@import 'utilities/gap';

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

@@ -3,13 +3,18 @@ import React from "react"
 //CollapsibleTrail component
 const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
   const style: { [key: string]: string | number } = {
+    position: "absolute",
     left: `${leftOffset}em`,
+    top: 0,
+    bottom: 0,
+    width: "2px",
+    backgroundColor: "#E4E8F0",
   }
 
   return (
     <div 
         className="collapsible-trail" 
-        style={style}
+        style={style} 
     />
   )
 }

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

@@ -40,59 +40,46 @@ export const TableHeaderCell = ({
 
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
-      const sortIsDesc = header?.column.getIsSorted() === "desc"
+      const sortIsDesc = header.column.getIsSorted() === "desc"
       sortIsDesc
         ? sortControl.onChange({ desc: true })
         : sortControl.onChange({ desc: false })
     } else {
-      header?.column.getToggleSortingHandler()(event)
+      header.column.getToggleSortingHandler()(event)
     }
   }
 
-  const isLeafColumn =
-  header?.column.getLeafColumns().length === 1 &&
-  header?.column.getLeafColumns()[0].id === header.column.id
-
-  const isLastHeaderCell =
-    header?.column.parent?.columns.at(-1) === header?.column ||
-    (header?.colSpan > 1 && header?.column.parent !== undefined);
- 
-const cellClassName = classnames(
-  "table-header-cells",
-  `${isChrome() ? "chrome-styles" : ""}`,
+const cellClassName = classnames("table-header-cells", 
+  `${isChrome() ? "chrome-styles" : ""}`, 
   `${enableSorting ? "table-header-cells-active" : ""}`,
-  { "pinned-left": responsive === "scroll" && isPinnedLeft },
-   isLastHeaderCell ? "last-header-cell" : ""
-); 
+  { 'pinned-left': responsive === "scroll" && isPinnedLeft },
+)
 
 const cellId = `${loading ? 
-    `loading-${header?.id}`
-    : `${header?.id}`
+    `loading-${header.id}`
+    : `${header.id}`
 }`
 
 const isToggleExpansionEnabledLoading =
-  header?.index === 0 &&
+  header.index === 0 &&
   loading &&
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
   
 const isToggleExpansionEnabled =
-  header?.index === 0 &&
+  header.index === 0 &&
   !loading &&
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
 
-const justifyHeader = isLeafColumn ? "end" : "center"
-
   return (
     <th
         align="right"
         className={cellClassName}
-        colSpan={header?.colSpan}
         id={cellId}
-        key={`${header?.id}-header`}
+        key={`${header.id}-header`}
     >
-      {header?.isPlaceholder ? null : headerChildren && header?.index === 0 ? (
+      {header.isPlaceholder ? null : headerChildren && header.index === 0 ? (
         <Flex alignItems="center">
           {headerChildren}
           <div>
@@ -102,7 +89,7 @@ const justifyHeader = isLeafColumn ? "end" : "center"
       ) : (
         <Flex
             alignItems="center"
-            justify={header?.index === 0 && enableSorting ? "between" : header?.index === 0 && !enableSorting ? "start" : justifyHeader}
+            justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
         >
           {isToggleExpansionEnabled && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
@@ -113,11 +100,11 @@ const justifyHeader = isLeafColumn ? "end" : "center"
             )}
 
           <Flex
-              className={`${header?.index === 0 &&
+              className={`${header.index === 0 &&
                 enableSorting &&
                 "header-sort-button pb_th_link"}`}
-              cursor={header?.index === 0 && enableSorting ? "pointer" : "default"}
-              {...(header?.index === 0 &&
+              cursor={header.index === 0 && enableSorting ? "pointer" : "default"}
+              {...(header.index === 0 &&
                 enableSorting && {
                   htmlOptions: {
                     onClick: (event: React.MouseEvent) => toggleSortButton(event),
@@ -129,14 +116,14 @@ const justifyHeader = isLeafColumn ? "end" : "center"
                     tabIndex: 0,
                   },
                 })}
-              justify={header?.index === 0 && enableSorting ? "between" : "none"}
+              justify={header.index === 0 && enableSorting ? "between" : "none"}
               paddingLeft={enableSorting ? "xxs" : "xs"}
           >
             <div>
-              {flexRender(header?.column.columnDef.header, header?.getContext())}
+              {flexRender(header.column.columnDef.header, header.getContext())}
             </div>
 
-            {header?.index === 0 &&
+            {header.index === 0 &&
               header.column.getCanSort() &&
               enableSorting &&
               (loading ? (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -86,7 +86,6 @@ export const TableBody = ({
             >
               {row.getVisibleCells().map((cell, i) => {
                 const isPinnedLeft = columnPinning.left.includes(cell.column.id)
-                const isLastCell = cell.column.parent?.columns.at(-1)?.id === cell.column.id
 
                 return (
                   <td
@@ -94,8 +93,7 @@ export const TableBody = ({
                       className={classnames(
                         `${cell.id}-cell position_relative`,
                         isChrome() ? "chrome-styles" : "",
-                        isPinnedLeft && 'pinned-left',
-                        isLastCell && 'last-cell',
+                        isPinnedLeft && 'pinned-left'
                       )}
                       key={`${cell.id}-data`}
                   >

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

@@ -31,37 +31,6 @@
     min-width: 180px;
   }
 
-  .pb_advanced_table_header {
-    > tr:not(:first-child) {
-      .last-header-cell {
-        border-right: 1px solid $border_light !important;
-      }
-      th {
-        border-radius: 0px !important;
-        border-width: 0 0 1px 0 !important;
-      }
-      th:first-child {
-        border-left-width: 1px !important;
-      }
-    }
-    th[colspan]:not([colspan="1"]) {
-      border-right: 1px solid $border_light !important;
-    }
-  }
-
-  .pb_advanced_table_body {
-    .last-cell {
-      border-right: 1px solid $border_light !important;
-    }
-    tr td:first-child {
-      padding-left: 8px !important;
-    }
-    tr .pb_table_td:last-child {
-      padding-right: 8px !important;
-    }
-  }
-
-
   .table-header-cells-active:first-child {
     color: $primary !important;
   }
@@ -128,7 +97,7 @@
   }
 
   .toggle-content {
-    display: none !important;
+    display: none;
     height: 0;
     padding-bottom: 0 !important;
     padding-top: 0 !important;
@@ -137,21 +106,13 @@
   }
 
   .toggle-content.is-visible {
-    display: table-row !important;
+    display: contents;
     height: auto;
   }
 
-  .collapsible-trail {
-    background-color: $border_light;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 2px;
-  }
-
   // Responsive Styles
   @media only screen and (max-width: $screen-xl-min) {  
-    &[class*="advanced-table-responsive-scroll"] {
+    &[class*="table-responsive-scroll"] {
       border-radius: 4px;
       box-shadow: 1px 0 0 0px $border_light,
                   -1px 0 0 0px $border_light;
@@ -160,7 +121,7 @@
       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 !important;
+        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 {
@@ -186,11 +147,10 @@
       .bg-white td:first-child {
           background-color: $white;
       }
-      
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
-    &[class*="advanced-table-responsive-scroll"] {
+    &[class*="table-responsive-scroll"] {
       overflow-x: visible;
     }
   }
@@ -240,7 +200,7 @@
     }
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
-      &[class*="advanced-table-responsive-scroll"] {
+      &[class*="table-responsive-scroll"] {
         border-radius: 4px;
         box-shadow: 1px 0 0 0px $border_dark,
                     -1px 0 0 0px $border_dark;

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

@@ -7,7 +7,6 @@ import {
   createColumnHelper,
   getCoreRowModel,
   getExpandedRowModel,
-  getPaginationRowModel,
   getSortedRowModel,
   Row,
   useReactTable,
@@ -26,7 +25,6 @@ import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelper
 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 }
@@ -44,8 +42,6 @@ type AdvancedTableProps = {
   loading?: boolean | string
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
-  pagination?: boolean,
-  paginationProps?: GenericObject
   responsive?: "scroll" | "none",
   sortControl?: GenericObject
   tableData: GenericObject[]
@@ -71,8 +67,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     loading,
     onRowToggleClick,
     onToggleExpansionClick,
-    pagination = false,
-    paginationProps,
     responsive = "scroll",
     sortControl,
     tableData,
@@ -142,41 +136,27 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }
     return columnCells
   }
-
-  const buildColumns = (columnDefinitions: GenericObject[]): any => {
-    return (
-      columnDefinitions &&
+//Create column array in format needed by Tanstack
+  const columns =
+    columnDefinitions &&
       columnDefinitions.map((column, index) => {
-        //Checking to see if grouped column or not
-        if (column.columns && column.columns.length > 0) {
-          return {
-            header: column.label || "",
-            columns: buildColumns(column.columns),
-          };
-        } 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,
-              index
-            );
-          }
+      // Define the base column structure
+      const columnStructure = {
+        ...columnHelper.accessor(column.accessor, {
+          header: column.label,
+        }),
+      }
 
-          return columnStructure;
-        }
-      })
-    );
-  };
+  if (column.cellAccessors || column.customRenderer) {
+    columnStructure.cell = createCellFunction(
+      column.cellAccessors,
+      column.customRenderer,
+      index
+    )
+  }
 
-  //Create column array in format needed by Tanstack
-  const columns = buildColumns(columnDefinitions);
+  return columnStructure
+})
 
   //Syntax for sorting Array if we want to manage state ourselves
   const sorting = [
@@ -197,17 +177,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }
   }
 
-  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,
@@ -220,7 +189,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     enableSortingRemoval: false,
     sortDescFirst: true,
     ...expandAndSortState(),
-    ... paginationInitializer,
     ...tableOptions,
   })
 
@@ -254,15 +222,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_advanced_table"),
-    `advanced-table-responsive-${responsive}`,
+    `table-responsive-${responsive}`,
     globalProps(props),
     className
   )
 
-  const onPageChange = (page: number) => {
-    table.setPageIndex(page - 1)
-  }
-
   return (
     <div {...ariaProps} 
         {...dataProps} 
@@ -286,45 +250,23 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             toggleExpansionIcon,
           }}
       >
-        <>
-          {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()}
-                  />
-          }
-          <Table
-              className={`${loading ? "content-loading" : ""}`}
-              dark={dark}
-              dataTable
-              numberSpacing="tabular"
-              responsive="none"
-              {...tableProps}
-          >
-            {children ? (
-              children
-            ) : (
-              <>
-                <TableHeader />
-                <TableBody />
-              </>
-            )}
-          </Table>
-          {pagination &&
-            <Pagination
-                current={table.getState().pagination.pageIndex + 1}
-                key={`pagination-bottom-${table.getState().pagination.pageIndex + 1}`}
-                marginTop="xs"
-                onChange={onPageChange}
-                range={paginationProps?.range ? paginationProps?.range : 5}
-                total={table.getPageCount()}
-            />
-          }
-        </>
+        <Table
+            className={`${loading ? "content-loading" : ""}`}
+            dark={dark}
+            dataTable
+            numberSpacing="tabular"
+            responsive="none"
+            {...tableProps}
+        >
+          {children ? (
+            children
+          ) : (
+            <>
+              <TableHeader />
+              <TableBody />
+            </>
+          )}
+        </Table>
       </AdvancedTableContext.Provider>
     </div>
   )

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
+        <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
           <% if content.present? %>
             <% content.presence %>
           <% else %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -10,16 +10,9 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
-      prop :responsive, type: Playbook::Props::Enum,
-                        values: %w[none scroll],
-                        default: "none"
 
       def classname
-        generate_classname("pb_advanced_table", responsive_classname, separator: " ")
-      end
-
-      def responsive_classname
-        responsive == "scroll" ? "advanced-table-responsive-scroll" : "advanced-table-responsive-none"
+        generate_classname("pb_advanced_table")
       end
     end
   end

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

@@ -468,7 +468,7 @@ test("responsive prop functions as expected", () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-scroll")
+  expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll")
 })
 
 test("responsive none prop functions as expected", () => {
@@ -483,7 +483,7 @@ test("responsive none prop functions as expected", () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-none")
+  expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
 })
 
 test("customRenderer prop functions as expected", () => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -49,9 +49,11 @@
       label: "Graduated Students",
     }
   ]
+
+  subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
 <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb

@@ -36,5 +36,5 @@
 
 <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

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

@@ -1,3 +1,3 @@
 `subrow_headers` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
 
-`enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle expansion button will appear in the table header as well as in the subRow headers. If set to "header", the button will only appear in header and NOT in subRow headers. This prop is set to "header" by default.
+`enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.

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

@@ -2,12 +2,8 @@ examples:
   rails:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
-  - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_custom_cell_rails: Custom Components for Cells
-  - advanced_table_column_headers: Multi-Header Columns
-  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -22,7 +18,3 @@ examples:
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
-  - advanced_table_pagination: Pagination
-  - advanced_table_pagination_with_props: Pagination Props
-  - advanced_table_column_headers: Multi-Header Columns
-  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)

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

@@ -10,7 +10,3 @@ export { default as AdvancedTableTableProps } from './_advanced_table_table_prop
 export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
 export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
 export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
-export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
-export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
-export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
-export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'