playbook_ui 14.24.0.pre.rc.4 → 14.24.0.pre.rc.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed2461155aa66a644f7a93d39c951a13bc8f68b6f0cea260f6d8aaa67560c0e7
-  data.tar.gz: 574038a31726578b7a54288368071644fc82ded35c9fde86a6443a11d9a945cf
+  metadata.gz: b2fc8bc4c28ba98e8b419b039faa4ba89ad98109b642e173d06bca803e72309c
+  data.tar.gz: cb961caa0145db83c0c4a7ab1362e87988f3a2dcc03a3378f621d7a1225d9d53
 SHA512:
-  metadata.gz: dadb9e8af26eae3269379bcadd58b6928f13704a0ec8434e3749c6969fe3941a29c6c83408217db7e6d9b513d3f372e9cbe6900793f7906cbcd0cbada688d0bb
-  data.tar.gz: d2549c2319c161bae64558cc646da904ac81c615848b077f3e488ce81f6cb81584491d01e6140d8fbdb9e158cd31af5951df3bdc0828e2e30463e09354aed111
+  metadata.gz: fc3cb75f59e0c721cf4f8be86efe8032e5dfa5b7d3ac5d8a6604a14cd1caf95fd607d6c726d9c8595d5861001710bdb09e2ebb5cbbf946d545fd31d27f81846b
+  data.tar.gz: 7608b048945f5a4fd328e986e563f9d0914a3301ff84cefcd26d5db9c52b489f1d25b583b5dfa34584d46a7438f37e350401dd5a952032c9993a24fe2455b6e7

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

@@ -4,49 +4,48 @@ import { Header } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 
 import Icon from "../../pb_icon/_icon"
-import { getAllIcons } from "../../utilities/icons/allicons"
 
 import { displayIcon } from "../Utilities/IconHelpers"
 
 type SortIconButtonProps = {
   header: Header<GenericObject, unknown>
   sortIcon?: string | string[]
+  enableSortingRemoval?: boolean
 }
 
-export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
-
-const firstIcon = displayIcon(sortIcon)[0] 
-const secondIcon = displayIcon(sortIcon)[1] 
-const upIcon = getAllIcons()["arrowUpShortWide"].icon as unknown as { [key: string]: SVGElement }
-const downIcon = getAllIcons()["arrowDownShortWide"].icon as unknown as { [key: string]: SVGElement }
+export const SortIconButton = ({ header, sortIcon, enableSortingRemoval }: SortIconButtonProps) => {
+  const firstIcon = displayIcon(sortIcon)[0]
+  const secondIcon = displayIcon(sortIcon)[1]
 
   return (
     <>
-      {header.column.getIsSorted() === "desc" ? (
-        <div className="sort-button-icon" 
+      {header.column.getIsSorted() === "desc" && (
+        <div
+            className="sort-button-icon"
             key={firstIcon}
+            style={{ paddingLeft: `${header?.index === 0 ? "2px" : "4px"}` }}
         >
-        { firstIcon === "arrow-up-short-wide" ? (
-          <Icon 
-              className="svg-inline--fa"
-              customIcon={upIcon}
-          /> ) : (
           <Icon icon={firstIcon} />
-        )}
         </div>
-      ) : (
-        <div className="sort-button-icon" 
+      )}
+      {header.column.getIsSorted() === "asc" && (
+        <div
+            className="sort-button-icon"
             key={secondIcon}
+            style={{ paddingLeft: `${header?.index === 0 ? "2px" : "4px"}` }}
         >
-        { secondIcon === "arrow-down-short-wide" ? (
-          <Icon 
-              className="svg-inline--fa"
-              customIcon={downIcon}
-          /> ) : (
           <Icon icon={secondIcon} />
-        )}
+        </div>
+      )}
+      {header.column.getIsSorted() === false && (
+        <div
+            className="sort-button-icon"
+            key={enableSortingRemoval ? "arrow-up-arrow-down" : secondIcon}
+            style={{ paddingLeft: `${header?.index === 0 ? "2px" : "4px"}` }}
+        >
+          <Icon icon={enableSortingRemoval ? "arrow-up-arrow-down" : secondIcon} />
         </div>
       )}
     </>
-  )
-}
+  );
+};

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

@@ -50,6 +50,7 @@ export const TableHeaderCell = ({
     expanded,
     setExpanded,
     expandByDepth,
+    enableSortingRemoval,
     onExpandByDepthClick,
     toggleExpansionIcon,
     sortControl,
@@ -64,6 +65,7 @@ export const TableHeaderCell = ({
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
   
+  
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
       const sortIsDesc = header?.column.getIsSorted() === "desc"
@@ -110,7 +112,8 @@ export const TableHeaderCell = ({
     const visibleSiblings = parent.columns.filter(columnHasVisibleLeaf);
     return visibleSiblings.at(-1) === header.column;
   })();
- 
+
+
 const cellClassName = classnames(
   "table-header-cells",
   `${showActionsBar && isActionBarVisible && "header-cells-with-actions"}`,
@@ -256,12 +259,9 @@ const isToggleExpansionEnabled =
             )}
 
           <Flex
-              className={`${header?.index === 0 &&
-                enableSorting &&
-                "header-sort-button pb_th_link"}`}
-              cursor={header?.index === 0 && enableSorting ? "pointer" : "default"}
-              {...(header?.index === 0 &&
-                enableSorting && {
+              className={`${header?.index === 0 && enableSorting && "header-sort-button pb_th_link"} ${header?.index !== 0 && header?.column.getCanSort() && "header-sort-secondary-columns"}`}
+              cursor={((header?.index !== 0 && header?.column.getCanSort()) || (header?.index === 0 && enableSorting) ? "pointer" : "default")}
+              {...(((header?.index !== 0 && header?.column.getCanSort()) || (header?.index === 0 && enableSorting)) && {
                   htmlOptions: {
                     onClick: (event: React.MouseEvent) => toggleSortButton(event),
                     onKeyDown: (event: React.KeyboardEvent) => {
@@ -279,13 +279,13 @@ const isToggleExpansionEnabled =
               {flexRender(header?.column.columnDef.header, header?.getContext())}
             </div>
 
-            {header?.index === 0 &&
-              header.column.getCanSort() &&
-              enableSorting &&
+            {((header?.index !== 0 && header?.column.getCanSort()) || (header?.index === 0 && enableSorting)) &&
               (loading ? (
                 <div className="loading-toggle-icon" />
               ) : (
-                <SortIconButton header={header} 
+                <SortIconButton 
+                    enableSortingRemoval={enableSortingRemoval}
+                    header={header} 
                     sortIcon={sortIcon} 
                 />
               ))}

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

@@ -16,8 +16,10 @@ import { createCellFunction } from "../Utilities/CellRendererUtils";
 interface UseTableStateProps {
   tableData: GenericObject[];
   columnDefinitions: GenericObject[];
+  enableSortingRemoval?: boolean;
   expandedControl?: GenericObject;
   sortControl?: GenericObject;
+  firstColumnSort?: boolean;
   onRowToggleClick?: (arg: Row<GenericObject>) => void;
   selectableRows?: boolean;
   initialLoadingRowsCount?: number;
@@ -38,6 +40,7 @@ interface UseTableStateProps {
 export function useTableState({
   tableData,
   columnDefinitions,
+  enableSortingRemoval,
   expandedControl,
   sortControl,
   onRowToggleClick,
@@ -91,11 +94,11 @@ export function useTableState({
           columns: buildColumns(column.columns, false),
         };
       }
-
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
           header: column.header ?? column.label ?? "",
+          enableSorting: isFirstColumn || column.enableSort === true,
         }),
       };
 
@@ -166,7 +169,7 @@ export function useTableState({
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    enableSortingRemoval: false,
+    enableSortingRemoval: enableSortingRemoval,
     sortDescFirst: true,
     onRowSelectionChange: setRowSelection,
     onRowPinningChange,

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

@@ -28,7 +28,7 @@ export const TableHeader = ({
   dark = false,
   enableSorting = false,
   id,
-  sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
+  sortIcon = ["arrow-up-wide-short", "arrow-down-short-wide"],
   ...props
 }: TableHeaderProps) => {
   const {

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

@@ -422,6 +422,15 @@
     padding: 2px;
   }
 
+  .header-sort-secondary-columns {
+    color: $primary !important;
+
+    &:hover {
+      background-color: rgba($primary, 0.03);
+      border-radius: $border_radius_md;
+    }
+  }
+
   .toggle-all-icon {
     @extend .button-icon;
     @extend %primary-color-pseudo;
@@ -967,4 +976,19 @@
 // Outside of the pb_advanced_table class for popover
 .pb-advanced-table-popover-option:hover {
   background-color: $bg_light;
-}
+}
+// Removes borders when Wrapped inside the Card Kit
+[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_body .last-cell,
+[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
+[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
+[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
+    border-right: none !important;
+}
+
+//  Removes borders when Wrapped inside the Card Kit
+[class^=pb_card_kit] > .pb_advanced_table tr:last-child, 
+[class^=pb_card_kit] > .pb_advanced_table .last-row-cell {
+  td {
+    border-bottom: none !important; 
+  }
+}

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

@@ -40,6 +40,7 @@ type AdvancedTableProps = {
   dark?: boolean
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
+  enableSortingRemoval?: boolean
   expandedControl?: GenericObject
   expandByDepth?: { [key: string]: string | number }
   onExpandByDepthClick?: (arg: number, arg1: any) => void
@@ -87,6 +88,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     dark = false,
     data = {},
     enableToggleExpansion = "header",
+    enableSortingRemoval = false,
     expandedControl,
     expandByDepth,
     onExpandByDepthClick,
@@ -122,7 +124,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   // Component refs
   const tableWrapperRef = useRef<HTMLDivElement>(null);
 
-  // Initialize table state
   const {
     table,
     expanded,
@@ -137,6 +138,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   } = useTableState({
     tableData,
     columnDefinitions,
+    enableSortingRemoval,
     expandedControl,
     sortControl,
     onRowToggleClick,
@@ -333,6 +335,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}
             customSort={customSort}
+            enableSortingRemoval={enableSortingRemoval}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
             expandByDepth={expandByDepth}

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

@@ -11,7 +11,7 @@
     <% if content.present? %>
       <% content.presence %>
     <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
+      <%= pb_rails("advanced_table/table_header", props: { id: object.id, column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
       <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
     <% end %>
   <% end %>

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

@@ -124,6 +124,23 @@ const columnDefinitions = [
   },
 ]
 
+const columnDefinitionsSort = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+    enableSort: true,
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+];
+
 const columnDefinitionsCustomRenderer = [
   {
     accessor: "year",
@@ -676,3 +693,20 @@ test("rowStyling prop works as expected", () => {
   const row1 = tableBody.querySelector('tr:nth-child(1)') 
   expect(row1).toHaveStyle({backgroundColor: colors.white, color: colors.black})
 })
+
+test("Sort icon renders with enableSort on individual columns", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitionsSort}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const kit = screen.getByTestId(testId);
+  const sortIcon = kit.querySelector(".sort-button-icon");
+  expect(sortIcon).toBeInTheDocument();
+  const sortButton = kit.querySelector(".header-sort-secondary-columns");
+  expect(sortButton).toBeInTheDocument();
+});
+

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

@@ -31,7 +31,7 @@
 ] %>
 
 <%= pb_rails("advanced_table", props: {
-  id: "selectable_rows_with_actions",
+  id: "selectable_rows_with_header_no_action_bar",
   table_data: @table_data_no_subrows,
   column_definitions: column_definitions,
   selectable_rows: true,

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

@@ -34,6 +34,6 @@
 %>
 
 <%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_header", props: { id: "selectable_rows", column_definitions: column_definitions, selectable_rows: true }) %>
   <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
 <% end %>

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

@@ -0,0 +1,55 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableSortPerColumn = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      enableSort: true,
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      enableSort: true,
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableSortingRemoval
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableSortPerColumn;

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

@@ -0,0 +1,6 @@
+Sorting can now be enabled on any of the columns. To do this, add `enableSort:true` to the columnDefinition of the column you want sorting enabled on. Once enabled, clicking on the header will toggle sort between ascending and descending.
+
+The optional `enableSortingRemoval` prop can also be used in conjunction with sorting functionality. This prop is set to 'false' by default but if set to 'true' sorting order will circle like: 'none' -> 'desc' -> 'asc' -> 'none' -> ...
+It is recommended that `enableSortingRemoval` be set to 'true' when sort is enabled on mutiple columns so that sorting direction is always clear via the sort icon. 
+
+__NOTE:__ For sort on the first column, continue to use the separate `enableSorting` prop on AdvancedTable.Header as [shown here](https://playbook.powerapp.cloud/kits/advanced_table/sorting/react#enable-sorting).

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

@@ -0,0 +1,80 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableSortPerColumnForMultiColumn = (props) => {
+const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+              enableSort: true,
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+              enableSort: true,
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableSortingRemoval
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableSortPerColumnForMultiColumn;

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

@@ -0,0 +1 @@
+Sorting on columns can also be applied to columns when using the multi-header variant, however in this case sorting can only be set on leaf columns NOT on parent columns. 

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

@@ -29,6 +29,8 @@ examples:
   - advanced_table_default: Default (Required Props)
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
+  - advanced_table_sort_per_column: Enable Sort By Column
+  - advanced_table_sort_per_column_for_multi_column: Enable Sort By Column (Multi-Column)
   - advanced_table_custom_sort: Custom Sort
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth

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

@@ -40,4 +40,6 @@ export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_
 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'
-export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
+export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced_table_with_custom_header_multi_header.jsx'
+export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
+export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'

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

@@ -2,7 +2,6 @@ import PbEnhancedElement from "../pb_enhanced_element";
 import { updateSelectionActionBar } from "./advanced_table_action_bar";
 
 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() {
@@ -37,9 +36,12 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
       }
     };
 
+    const selectAllId = this.element.getAttribute('data-pb-checkbox-indeterminate-parent')
+    const selectAllSelector = `#${selectAllId} input[type='checkbox']`
+
     table.addEventListener("change", (e) => {
       const rowCb = e.target.closest(FLAT_SELECTOR + " input[type='checkbox']");
-      const allCb = e.target.closest(SELECT_ALL_SELECTOR);
+      const allCb = e.target.closest(selectAllSelector);
       if (!rowCb && !allCb) return;
 
       if (rowCb) {
@@ -50,15 +52,6 @@ export default class PbFlatAdvancedTable extends PbEnhancedElement {
         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 (allCb) {