playbook_ui 18.4.0.pre.rc.3 → 18.4.0.pre.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8f8c562cdf4d8c2e781047b89b39658c8e2dd4bc998db9fc6df6ac4807e67f1c
-  data.tar.gz: 07a7adf138d0e6d7b525e651bddb4b96ce28ca6cf70e2e3c7e0fe8352aa2e65d
+  metadata.gz: 1df28cd47b46eb68946cd5c67fcef11fe973280a276bdd99aba59edb92d0184c
+  data.tar.gz: c4ddd1d22951372fb5d19551130a59d7afcc4db65137c38b304759e0e163eb22
 SHA512:
-  metadata.gz: 31174cf9f1a631297db0872325864fc0cb3cee389bb13b1730285ad3ca8961685f6f837ab1b335458fcdafd4356661b7c19bf3198d33418775ad56ac385ce0a2
-  data.tar.gz: da82cc4cea55a44dba8f725c8ed3b8548ba549e90048b5a09c5f61110449be4c71a2127eca6b1cefd3db05237b8a75357e10d88e4b3f5e058fb871e20dc9c9e4
+  metadata.gz: 94368c60f1dc816e476d40b035cb568beac72aad355eba4c9442deaa15cec42555d4f128f81490e971b8b100747aebc07dc35e7c84651e04a0c533743cd1c5a7
+  data.tar.gz: 3dd28c6b45033189fd6923b9318fe8aa468cb3616009b6b96c346e7b3826cdba4298a094c25d844eaf336cfa7b54d89331fd1a0cba7d693327a988c2504889b1

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,11 +64,40 @@ 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>
+    ))
+
   const renderRegularTableHeader = () => (
     <thead className={classes}
         id={id}
         ref={headerRef}
     >
+      {renderSpacerRows()}
       {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
         <tr key={`${headerGroup.id}-headerGroup`}>
           {!hasAnySubRows && selectableRows && (
@@ -109,6 +139,7 @@ export const TableHeader = ({
         id={id}
         ref={headerRef}
     >
+      {renderSpacerRows("virtualized-header-row-header")}
       {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
         <tr
             className="virtualized-header-row-header"

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 {
@@ -292,6 +296,13 @@
     .pb_tooltip_kit {
       font-weight: unset;
       text-transform: unset;
+
+      .tooltip_tooltip {
+        font-size: initial;
+        font-weight: normal;
+        letter-spacing: normal;
+        text-transform: none;
+      }
     }
   }