playbook_ui 14.22.0.pre.alpha.PLAY2256stickydataidreact8523 → 14.22.0.pre.alpha.PLAY2281atcustomheaderrails8968

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d78eb539bff4c09f8f56e54833e4930e9bc85402c1a3a50e2739a3defc103623
-  data.tar.gz: f2e756e717c11b93d51dc929ec90a8ba6b889e2835eff61a0918fc62a92b36b7
+  metadata.gz: ddcfecfbe5c6d6dc4bbf934394560b00a8a2a12d3a4c8c6265f8631cf67f91b9
+  data.tar.gz: a1ae8ef97c98ce81a2ee2f79c3cb7778b680a6fd26a943081db510cb2537eb83
 SHA512:
-  metadata.gz: 92c48871d8d522eff9429550e9326503fd89e417b60cfc8c8273c5e44eb87c81500dc9bd8333939ff2dad29ed9ad80dca16255d4b105f24ea5c17da7a07e52d1
-  data.tar.gz: 883f732d8b305027e5ae8a3d952b26bcee861285895d2a974ff724e1be57e9db4c4927b94ffcf6577cd1f1475c4bb11332c3e67b9dcccb3eb1f9669f3db10669
+  metadata.gz: 3e144374508f511c0b8dd6d4f131290491e37db99754b0567ac9780ed747195714975406ae7980439ff42ce818de7a5fd4ead198c34a1440cc475dbc8f03afde
+  data.tar.gz: bc83e8baca7f39fd42afd83c3aa27a6cee79bda3ddc2e2098df15ca4330c18acebd116264dccd2234d3aa977f66278b61cf042530eeb11bcf617ab82d865a21d

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

@@ -20,7 +20,7 @@ interface CustomCellProps {
   customRenderer?: (row: Row<GenericObject>, value: string | undefined) => React.ReactNode
   selectableRows?: boolean
   customStyle?: GenericObject
-} 
+}
 
 export const CustomCell = ({
   getValue,
@@ -35,7 +35,7 @@ export const CustomCell = ({
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-    
+
     if (!expandedControl) {
       setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
     }
@@ -46,8 +46,8 @@ export const CustomCell = ({
 
   return (
     <div style={{ paddingLeft: `${row.depth * 1.25}em`}}>
-      <Flex 
-          alignItems="center" 
+      <Flex
+          alignItems="center"
           columnGap="xs"
           justify="start"
           orientation="row"
@@ -71,12 +71,11 @@ export const CustomCell = ({
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"
-                  icon="circle-play"
-                  rotation={90}
+                  icon="circle-play-down"
               />
             ) : (
               <Icon cursor="pointer"
-                  icon="circle-play"    
+                  icon="circle-play"
                />
             )}
           </button>

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

@@ -7,6 +7,7 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
 import Caption from "../../pb_caption/_caption"
+import Icon from "../../pb_icon/_icon"
 
 import { ToggleIconButton } from "./ToggleIconButton"
 import { renderCollapsibleTrail } from "./CollapsibleTrail"
@@ -32,17 +33,19 @@ export const SubRowHeaderRow = ({
   subRowHeaders,
   table,
 }: SubRowHeaderRowProps & GlobalProps) => {
-  const { inlineRowLoading } = useContext(AdvancedTableContext)
+  const { inlineRowLoading, customSort, onCustomSortClick } = useContext(AdvancedTableContext)
 
   const numberOfColumns = table.getAllFlatColumns().length
   const rowHasChildren = row.original.children ? true : false
   const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
+  const hasSubrowsToSort = row.getParentRow()?.subRows
+
 
   return (
     <tr className="custom-row bg-silver">
       <td
           className={`custom-row-first-column ${
-          isChrome() ? "chrome-styles" : ""
+            isChrome() ? "chrome-styles" : ""
           }`}
           colSpan={1}
       >
@@ -50,21 +53,39 @@ export const SubRowHeaderRow = ({
         <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
           <Flex align="center" 
               columnGap="xs"
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              //@ts-ignore
+              justifyContent={customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 ? "between" : undefined}
           >
-            {enableToggleExpansion === "all" && canExpand ? (
-              <ToggleIconButton onClick={onClick} 
-                  row={row}
+            <Flex columnGap="xs">
+              {enableToggleExpansion === "all" && canExpand ? (
+                <ToggleIconButton onClick={onClick} 
+                    row={row} 
+                />
+              ) : null}
+              <Caption
+                  marginLeft={canExpand ? "none" : "xs"}
+                  text={subRowHeaders[row.depth - 1]}
               />
-            ) : null}
-            <Caption
-                marginLeft={canExpand ? "none" : "xs"}
-                text={subRowHeaders[row.depth - 1]}
-            />
+            </Flex>
+            {customSort && hasSubrowsToSort && hasSubrowsToSort.length > 1 && (
+              <button
+                  aria-label="Sort this group"
+                  className="sort-button-icon gray-icon"
+                  onClick={() => { onCustomSortClick && onCustomSortClick(row.getParentRow()?.subRows)}}
+              >
+                <Icon 
+                    cursor="pointer" 
+                    fixedWidth 
+                    icon="sort" 
+                />
+              </button>
+            )}
           </Flex>
         </div>
       </td>
 
       <td colSpan={numberOfColumns - 1} />
     </tr>
-  )
+  );
 }

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

@@ -87,7 +87,7 @@ export function useTableState({
       // Handle grouped columns
       if (column.columns && column.columns.length > 0) {
         return {
-          header: column.label || "",
+          header: column.header || column.label || "",
           columns: buildColumns(column.columns, false),
         };
       }
@@ -95,7 +95,7 @@ export function useTableState({
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
-          header: column.label || "",
+          header: column.header ?? column.label ?? "",
         }),
       };
 

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

@@ -189,6 +189,11 @@
         box-sizing: border-box !important;
       }
     }
+    // Fixes for tooltip picking up th styling from Table kit
+    .pb_tooltip_kit {
+      font-weight: unset;
+      text-transform: unset;
+    }
   }
 
   .pb_advanced_table_body {

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

@@ -36,6 +36,7 @@ type AdvancedTableProps = {
   columnDefinitions: GenericObject[]
   columnGroupBorderColor?: "text_lt_default" | "text_lt_light" | "text_lt_lighter" | "text_dk_default" | "text_dk_light" | "text_dk_lighter"
   columnVisibilityControl?: GenericObject
+  customSort?:boolean;
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
@@ -67,6 +68,7 @@ type AdvancedTableProps = {
   tableProps?: GenericObject
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
+  onCustomSortClick?: (arg: GenericObject[]) => void
   virtualizedRows?: boolean
   allowFullScreen?: boolean
   fullScreenControl?: (controls: FullscreenControls) => void
@@ -81,6 +83,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     columnDefinitions,
     columnGroupBorderColor,
     columnVisibilityControl,
+    customSort,
     dark = false,
     data = {},
     enableToggleExpansion = "header",
@@ -95,6 +98,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     maxHeight,
     onRowToggleClick,
     onToggleExpansionClick,
+    onCustomSortClick,
     pagination = false,
     paginationProps,
     pinnedRows,
@@ -325,6 +329,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}
+            customSort={customSort}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}
@@ -336,6 +341,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             isActionBarVisible={isActionBarVisible}
             isFullscreen={isFullscreen}
             loading={loading}
+            onCustomSortClick={onCustomSortClick}
             onExpandByDepthClick={onExpandByDepthClick}
             pinnedRows={pinnedRows}
             responsive={responsive}

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

@@ -0,0 +1,65 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableCustomSort = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      id: "year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      id: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      id: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      id: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      id: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      id: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      id: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+//Render the subRow header rows
+const subRowHeaders = ["Quarter", "Month", "Day"]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          customSort
+          enableToggleExpansion="all"
+          onCustomSortClick={(subrows)=>{console.log("Custom sort clicked", subrows)}}
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders} />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableCustomSort

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

@@ -0,0 +1,5 @@
+The optional `customSort` prop can be used to add a sort button within a subrow header. The button will only appear if that subrowheader has more than one subrow nested within it. This button comes with a callback function called `onCustomSortClick`.
+
+The `onCustomSortClick` provides as an argument an array of all the subrows nested within that level of the table. 
+
+__NOTE__: `customSort` must be used in conjunction with the `subRowHeaders` prop. The `customSort` DOES NOT handle the sort logic, this must be handled on the frontend using the callback provided. 

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

@@ -0,0 +1,69 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Icon from "../../pb_icon/_icon"
+import Flex from "../../pb_flex/_flex"
+import Caption from "../../pb_caption/_caption"
+import Tooltip from "../../pb_tooltip/_tooltip"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableWithCustomHeader = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      header: () => (
+        <Flex alignItems="center" 
+            justifyContent="center"
+        >
+          <Caption marginRight="xs">New Enrollments</Caption>
+          <Tooltip placement="top" 
+              text="Whoa. I'm a Tooltip" 
+              zIndex={10}
+          >
+            <Icon cursor="pointer" 
+                icon="info"
+                size="xs" 
+            />
+          </Tooltip>
+        </Flex>
+      ),
+    },
+    {
+      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",
+    },
+  ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableWithCustomHeader

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

@@ -0,0 +1 @@
+The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.

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

@@ -0,0 +1,51 @@
+<%
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      custom_header_renderer: ->(cell, label) {
+        capture do
+          pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
+            pb_rails("caption", props: { margin_right: "xs", text: "New Enrollments" }) +
+            pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs" }) +
+            pb_rails("tooltip", props: {
+              trigger_element_id: "tooltip-interact",
+              tooltip_id: "example-custom-tooltip",
+              position: "top",
+              z_index: "10"
+            }) do
+              "Whoa. I'm a Tooltip"
+            end
+          end
+        end
+      }
+    },
+    {
+      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",
+    }
+  ]
+%>
+
+<%= pb_rails("advanced_table", props: { id: "custom_header_table", table_data: @table_data, column_definitions: column_definitions }) %>

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

@@ -0,0 +1 @@
+The optional `custom_header_renderer` item can be used within `column_definitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.

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

@@ -10,23 +10,25 @@ examples:
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
+  - advanced_table_with_custom_header_rails: Custom Header Cell
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  - advanced_table_column_border_color_rails: Column Group Border Color
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  # - advanced_table_column_styling_rails: Column Styling
-  # - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
+  - advanced_table_column_styling_rails: Column Styling
+  - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
+  - advanced_table_column_border_color_rails: Column Group Border Color
+
 
   react:
   - advanced_table_default: Default (Required Props)
-  - advanced_table_loading: Loading State
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
+  - advanced_table_custom_sort: Custom Sort
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
@@ -37,29 +39,31 @@ examples:
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
   - advanced_table_sticky_columns: Sticky Columns
   - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
-  - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
+  - advanced_table_with_custom_header: Custom Header Cell
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
+  - advanced_table_loading: Loading State
+  - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
-  - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_no_subrows: Table with No Subrows or Expansion
+  - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing
-  - advanced_table_fullscreen: Fullscreen
   - advanced_table_column_visibility: Column Visibility Control
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
   - 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_column_border_color: Column Group Border Color
+  - advanced_table_fullscreen: Fullscreen
   - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -38,3 +38,5 @@ export { default as AdvancedTableRowStyling } from './_advanced_table_row_stylin
 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'
+export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
+export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'

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

@@ -26,7 +26,11 @@
                 <% end %>
               <% end %>
             <% end %>
-            <%= cell[:label] %>
+            <% if object.has_custom_header_renderer?(cell) %>
+              <%= raw(object.render_custom_header(cell)) %>
+            <% else %>
+              <%= cell[:label] %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>

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

@@ -76,6 +76,30 @@ module Playbook
         end
       end
 
+      # Get original column definition for custom rendering
+      def find_original_column_def(accessor)
+        find_column_def_by_accessor(column_definitions, accessor)
+      end
+
+      # Check if a header cell has a custom renderer
+      def has_custom_header_renderer?(cell)
+        return false unless cell[:accessor].present?
+
+        original_def = find_original_column_def(cell[:accessor])
+        original_def && original_def[:custom_header_renderer].present?
+      end
+
+      # Render custom header content
+      def render_custom_header(cell)
+        return cell[:label] unless has_custom_header_renderer?(cell)
+
+        original_def = find_original_column_def(cell[:accessor])
+        custom_renderer = original_def[:custom_header_renderer]
+
+        # Call the custom renderer with the cell data and label
+        custom_renderer.call(cell, cell[:label])
+      end
+
     private
 
       def compute_max_depth(columns)
@@ -148,6 +172,18 @@ module Playbook
         end
         wrapped
       end
+
+      def find_column_def_by_accessor(defs, target_accessor)
+        defs.each do |col|
+          return col if col[:accessor] == target_accessor
+
+          if col[:columns].is_a?(Array)
+            found = find_column_def_by_accessor(col[:columns], target_accessor)
+            return found if found
+          end
+        end
+        nil
+      end
     end
   end
 end

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

@@ -30,11 +30,11 @@
                                     class="gray-icon expand-toggle-icon"
                                     data-advanced-table="true">
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play-down", cursor: "pointer" }) %>
                                 </button>
                             <% end %>
                         <% end %>
-                        <%= pb_rails("flex/flex_item") do %>       
+                        <%= pb_rails("flex/flex_item") do %>
                             <% if column[:custom_renderer].present? %>
                                 <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
                             <% elsif index.zero? %>

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -5,7 +5,7 @@
 @import "../tokens/typography";
 
 [class^=pb_badge_kit] {
-  $pb_badge_height: 18px;
+  $pb_badge_height_rounded: 16px;
 
   display: inline-flex;
   align-items: center;
@@ -13,7 +13,6 @@
   border-radius: $border_rad_light;
   padding: 0 $space_xs/2;
   border-width: 1px;
-  border-style: solid;
   border-color: $card_light;
   white-space: nowrap;
 
@@ -31,10 +30,10 @@
   }
 
   &[class*=_rounded] {
-    height: $pb_badge_height;
-    min-height: $pb_badge_height;
-    min-width: $pb_badge_height;
-    border-radius: $pb_badge_height / 2;
+    height: $pb_badge_height_rounded;
+    min-height: $pb_badge_height_rounded;
+    min-width: $pb_badge_height_rounded;
+    border-radius: $pb_badge_height_rounded / 2;
   }
 
   &[class*=_notification] {