playbook_ui 18.3.0.pre.alpha.PLAY3245advancedtablecustomheadertooltipstylerails20919 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 165a24b36fe82b732fa3727e952e810edc9d1d733294130d2575db598c21a5d7
-  data.tar.gz: 7b4a2b5f87fdcb57b973b098727b09bb87d41d83d1728e955890d136475a2ef2
+  metadata.gz: 106354f9d720a7693c85b275f1de67cb17a21e3e28f28f90a758ee9b19942367
+  data.tar.gz: 9a5fbcd069bdaf722663195395f810d351e72e322a527e0157d666609363cc60
 SHA512:
-  metadata.gz: 7d47264d6f7fe1c3960f18752809c9a9330395453a9f178c7a75e036584649d06d6a618847e888fc911da60439fc82a4eb3f1011f37879020ce69948ad4a5d30
-  data.tar.gz: 56358953c5797ca33876dc3231114a1f7c3103d272f1a07c420dba81bd52de2a34b06f3d84df4c41f1ecea27a91334de73c9197086b17cd443e74cb641ec59bf
+  metadata.gz: 8a13eb3272cf0c06bb2defa816ca14a48f2cb2fffd1185516f6ff40556fab6e9c9766d3929929680ea18511efc952ebefa5a1d836e554c99df384a1d9ef88ea4
+  data.tar.gz: d754688073c058e93739e273d4f6d8f54fa26f5a86869c7e764a3dddfb492f6c63efb86b914b6d9d45424f859e0996269f416b8ab38411268a8b89b23b17915c

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

@@ -105,7 +105,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
       }
     };
     return (
-      <>
+      <React.Fragment key={node.id}>
         <Checkbox
             checked={allOn}
             indeterminate={!allOn && someOn}
@@ -120,7 +120,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
             child.children ? renderGroup(child) : renderLeaf(child.id, child.label),
           )}
         </Flex>
-      </>
+      </React.Fragment>
     );
   };
 // ------------ End of column visibility logic --------
@@ -143,6 +143,47 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
   const handleShouldClose = (shouldClose: boolean) =>
     setShowPopover(!shouldClose)
 
+  // Select All only changes columns listed in the popover that can be hidden.
+  // The first column and ids omitted by includeIds stay as they are.
+  // Skip the leaf walk unless the checkbox is enabled.
+  const selectAllRequested = columnVisibilityControl?.showSelectAll === true
+  const availableColumns = selectAllRequested
+    ? tree.flatMap(gatherLeafIds).flatMap((id) => {
+        const column = table.getColumn(id)
+        return column?.getCanHide() ? [column] : []
+      })
+    : []
+  const allAvailableVisible =
+    availableColumns.length > 0 &&
+    availableColumns.every((column) => column.getIsVisible())
+  const someAvailableVisible = availableColumns.some((column) => column.getIsVisible())
+  const showSelectAll = availableColumns.length > 0
+  const selectAllLabel = allAvailableVisible ? "Deselect All" : "Select All"
+
+  // Uses the same updater form as toggleVisibility, so onChange gets the same kind of value.
+  const handleSelectAllChange = () => {
+    const selectAllVisibility = Object.fromEntries(
+      availableColumns.map((column) => [column.id, !allAvailableVisible])
+    )
+    table.setColumnVisibility((previousVisibility: { [id: string]: boolean }) => ({
+      ...previousVisibility,
+      ...selectAllVisibility,
+    }))
+
+    if (columnVisibilityControl?.onColumnVisibilityChange) {
+      const nextVisibility = { ...table.getState().columnVisibility, ...selectAllVisibility }
+      // Same shape as the single toggles: root column ids, groups visible if any leaf is visible
+      const updatedVisibilityState = table.getAllColumns().reduce((
+        acc: { [id: string]: boolean },
+        column: { getLeafColumns: () => { id: string }[]; id: string }
+      ) => {
+        acc[column.id] = column.getLeafColumns().some((leaf) => nextVisibility[leaf.id] ?? true)
+        return acc
+      }, {})
+      columnVisibilityControl.onColumnVisibilityChange(updatedVisibilityState)
+    }
+  }
+
   const popoverReference = (
     <Tooltip
         placement="top"
@@ -197,6 +238,25 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
                   textAlign="center"
               />
               <SectionSeparator paddingBottom="xs" />
+              {showSelectAll && (
+                <>
+                  <Flex
+                      cursor="pointer"
+                      flexDirection="column"
+                      paddingX="xs"
+                  >
+                    <Checkbox
+                        aria={{ label: selectAllLabel }}
+                        checked={allAvailableVisible}
+                        indeterminate={!allAvailableVisible && someAvailableVisible}
+                        onChange={handleSelectAllChange}
+                        paddingBottom="xs"
+                        text={selectAllLabel}
+                    />
+                  </Flex>
+                  <SectionSeparator paddingBottom="xs" />
+                </>
+              )}
               {tree.map((node: VisibilityNode) => (
                 <Flex cursor="pointer"
                     flexDirection="column"

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

@@ -32,6 +32,7 @@ export const TableHeader = ({
   ...props
 }: TableHeaderProps) => {
   const {
+    columnVisibilityControl,
     enableToggleExpansion,
     handleExpandOrCollapse,
     loading,
@@ -63,42 +64,83 @@ export const TableHeader = ({
     `${responsive === "scroll" && "pinned-left"}`,
   );
 
+  // TanStack drops header rows when every leaf in a group is hidden.
+  // Spacer rows keep that height only when Select All can hide a whole group.
+  const showSelectAll = columnVisibilityControl?.showSelectAll === true
+  let hiddenHeaderRowCount = 0
+  let spacerColSpan = 0
+  if (showSelectAll) {
+    const columnHeaderDepth = Math.max(
+      ...table.getAllFlatColumns().map((column: GenericObject) => column.depth + 1)
+    )
+    hiddenHeaderRowCount = columnHeaderDepth - table.getHeaderGroups().length
+    spacerColSpan = table.getVisibleLeafColumns().length + (!hasAnySubRows && selectableRows ? 1 : 0)
+  }
+
+  const renderSpacerRows = (rowClassName?: string) =>
+    Array.from({ length: Math.max(0, hiddenHeaderRowCount) }, (_, index) => (
+      <tr
+          aria-hidden="true"
+          className={classnames("header-spacer-row", rowClassName)}
+          key={`header-spacer-${index}`}
+      >
+        {/* header-spacer-cell stays off .table-header-cells so width measurement and sticky-left styles skip it. */}
+        <th
+            className="header-spacer-cell"
+            colSpan={spacerColSpan}
+        />
+      </tr>
+    ))
+
+  // Empty checkbox-column cell on upper multi-header rows; checkbox only on the lowest row.
+  const renderSelectableHeaderCell = (
+    isLowestHeaderRow: boolean,
+    extraClassName?: string
+  ) => (
+    <th className={classnames(customCellClassnames, "checkbox-cell-header", extraClassName)}>
+      {isLowestHeaderRow ? (
+        <Checkbox
+            checked={table?.getIsAllRowsSelected()}
+            indeterminate={table?.getIsSomeRowsSelected()}
+            onChange={table?.getToggleAllRowsSelectedHandler()}
+        />
+      ) : null}
+    </th>
+  )
+
   const renderRegularTableHeader = () => (
     <thead className={classes}
         id={id}
         ref={headerRef}
     >
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
-        <tr key={`${headerGroup.id}-headerGroup`}>
-          {!hasAnySubRows && selectableRows && (
-            <th className={customCellClassnames}>
-              <Checkbox
-                  checked={table?.getIsAllRowsSelected()}
-                  indeterminate={table?.getIsSomeRowsSelected()}
-                  onChange={table?.getToggleAllRowsSelectedHandler()}
-              />
-            </th>
-          )}
-          {headerGroup.headers.map(header => {
-            const isPinnedLeft = columnPinning.left.includes(header.id)
-            return (
-              <TableHeaderCell
-                  enableSorting={enableSorting}
-                  enableToggleExpansion={enableToggleExpansion}
-                  handleExpandOrCollapse={handleExpandOrCollapse}
-                  header={header}
-                  headerChildren={children}
-                  isPinnedLeft={isPinnedLeft}
-                  key={`${header.id}-header`}
-                  loading={loading}
-                  persistToggleExpansionButton={persistToggleExpansionButton}
-                  sortIcon={sortIcon}
-                  table={table}
-              />
-            )
-          })}
-        </tr>
-      ))}
+      {renderSpacerRows()}
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, headerGroupIndex: number, headerGroups: HeaderGroup<GenericObject>[]) => {
+        const isLowestHeaderRow = headerGroupIndex === headerGroups.length - 1
+
+        return (
+          <tr key={`${headerGroup.id}-headerGroup`}>
+            {!hasAnySubRows && selectableRows && renderSelectableHeaderCell(isLowestHeaderRow)}
+            {headerGroup.headers.map(header => {
+              const isPinnedLeft = columnPinning.left.includes(header.id)
+              return (
+                <TableHeaderCell
+                    enableSorting={enableSorting}
+                    enableToggleExpansion={enableToggleExpansion}
+                    handleExpandOrCollapse={handleExpandOrCollapse}
+                    header={header}
+                    headerChildren={children}
+                    isPinnedLeft={isPinnedLeft}
+                    key={`${header.id}-header`}
+                    loading={loading}
+                    persistToggleExpansionButton={persistToggleExpansionButton}
+                    sortIcon={sortIcon}
+                    table={table}
+                />
+              )
+            })}
+          </tr>
+        )
+      })}
     </thead>
   );
 
@@ -109,41 +151,38 @@ export const TableHeader = ({
         id={id}
         ref={headerRef}
     >
-      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
-        <tr
-            className="virtualized-header-row-header"
-            key={`${headerGroup.id}-headerGroup-virtualized`}
-        >
-          {!hasAnySubRows && selectableRows && (
-            <th className={classnames(customCellClassnames, "virtualized-header-cell")}>
-              <Checkbox
-                  checked={table?.getIsAllRowsSelected()}
-                  indeterminate={table?.getIsSomeRowsSelected()}
-                  onChange={table?.getToggleAllRowsSelectedHandler()}
-              />
-            </th>
-          )}
-          {headerGroup.headers.map(header => {
-            const isPinnedLeft = columnPinning.left.includes(header.id)
-            return (
-              <TableHeaderCell
-                  enableSorting={enableSorting}
-                  enableToggleExpansion={enableToggleExpansion}
-                  handleExpandOrCollapse={handleExpandOrCollapse}
-                  header={header}
-                  headerChildren={children}
-                  isPinnedLeft={isPinnedLeft}
-                  isVirtualized
-                  key={`${header.id}-header-virtualized`}
-                  loading={loading}
-                  persistToggleExpansionButton={persistToggleExpansionButton}
-                  sortIcon={sortIcon}
-                  table={table}
-              />
-            )
-          })}
-        </tr>
-      ))}
+      {renderSpacerRows("virtualized-header-row-header")}
+      {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>, headerGroupIndex: number, headerGroups: HeaderGroup<GenericObject>[]) => {
+        const isLowestHeaderRow = headerGroupIndex === headerGroups.length - 1
+
+        return (
+          <tr
+              className="virtualized-header-row-header"
+              key={`${headerGroup.id}-headerGroup-virtualized`}
+          >
+            {!hasAnySubRows && selectableRows && renderSelectableHeaderCell(isLowestHeaderRow, "virtualized-header-cell")}
+            {headerGroup.headers.map(header => {
+              const isPinnedLeft = columnPinning.left.includes(header.id)
+              return (
+                <TableHeaderCell
+                    enableSorting={enableSorting}
+                    enableToggleExpansion={enableToggleExpansion}
+                    handleExpandOrCollapse={handleExpandOrCollapse}
+                    header={header}
+                    headerChildren={children}
+                    isPinnedLeft={isPinnedLeft}
+                    isVirtualized
+                    key={`${header.id}-header-virtualized`}
+                    loading={loading}
+                    persistToggleExpansionButton={persistToggleExpansionButton}
+                    sortIcon={sortIcon}
+                    table={table}
+                />
+              )
+            })}
+          </tr>
+        )
+      })}
     </thead>
   );
   return (

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

@@ -251,6 +251,10 @@
     th[colspan]:not([colspan="1"]) {
       border-right: 1px solid $border_light !important;
     }
+    // Spacer rows have no text, so give them one line of header height.
+    .header-spacer-cell::before {
+      content: "\00a0";
+    }
     .table-header-cells-custom {
       text-align: center;
       [class^="pb_checkbox_kit"] .pb_checkbox_label {