@homebound/beam 2.95.0 → 2.95.1

package/dist/components/Table/CollapseToggle.js

@@ -7,9 +7,14 @@ const components_1 = require("..");
 function CollapseToggle(props) {
     const { row } = props;
     const { isCollapsed, toggleCollapsed } = (0, react_1.useContext)(components_1.GridCollapseContext);
-    const toggleOnClick = (0, react_1.useCallback)(() => toggleCollapsed(row.id), [row.id, toggleCollapsed]);
-    const iconKey = isCollapsed(row.id) ? "chevronRight" : "chevronDown";
-    const headerIconKey = isCollapsed(row.id) ? "chevronsRight" : "chevronsDown";
+    const [, setTick] = (0, react_1.useState)(0);
+    const currentlyCollapsed = isCollapsed(row.id);
+    const toggleOnClick = (0, react_1.useCallback)(() => {
+        toggleCollapsed(row.id);
+        setTick(Date.now());
+    }, [row.id, currentlyCollapsed, toggleCollapsed]);
+    const iconKey = currentlyCollapsed ? "chevronRight" : "chevronDown";
+    const headerIconKey = currentlyCollapsed ? "chevronsRight" : "chevronsDown";
     const isHeader = row.kind === "header";
     if (!isHeader && (!props.row.children || props.row.children.length === 0)) {
         return null;

package/dist/components/Table/GridTable.d.ts

@@ -302,13 +302,17 @@ export declare type GridDataRow<R extends Kinded> = {
 /** Return the content for a given column def applied to a given row. */
 export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row: GridDataRow<R>): ReactNode | GridCellContent;
 /**
- * Provides each row access to its `collapsed` current state and toggle.
+ * Provides each row access to a method to check if it is collapsed and toggle it's collapsed state.
  *
  * Calling `toggleCollapse` will keep the row itself showing, but will hide any
  * children rows (specifically those that have this row's `id` in their `parentIds`
  * prop).
+ *
+ * headerCollapsed is used to trigger rows at the root level to rerender their chevron when all are
+ * collapsed/expanded.
  */
 declare type GridCollapseContextProps = {
+    headerCollapsed: boolean;
     isCollapsed: (id: string) => boolean;
     toggleCollapsed(id: string): void;
 };

package/dist/components/Table/GridTable.js

@@ -257,9 +257,9 @@ function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessa
  */
 function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef) {
     var _a;
-    const { paddingBottom } = (_a = style.rootCss) !== null && _a !== void 0 ? _a : {};
+    const { paddingBottom, ...otherRootStyles } = (_a = style.rootCss) !== null && _a !== void 0 ? _a : {};
     return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, components: {
-            List: VirtualRoot(style, columns, id, firstLastColumnWidth, xss),
+            List: VirtualRoot({ ...style, rootCss: otherRootStyles }, columns, id, firstLastColumnWidth, xss),
             Footer: () => (0, jsx_runtime_1.jsx)("div", { css: { paddingBottom } }, void 0),
         }, 
         // Pin/sticky both the header row(s) + firstRowMessage to the top
@@ -544,6 +544,7 @@ const defaultRenderFn = (as) => (key, css, content) => {
     return ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: content }), key));
 };
 exports.GridCollapseContext = react_1.default.createContext({
+    headerCollapsed: false,
     isCollapsed: (id) => false,
     toggleCollapsed: (id) => { },
 });
@@ -687,7 +688,7 @@ function useToggleIds(rows, persistCollapse) {
             // Trigger a re-render
             setTick(collapsedIds.join(","));
         };
-        return { isCollapsed, toggleCollapsed: toggleAll };
+        return { headerCollapsed: isCollapsed("header"), isCollapsed, toggleCollapsed: toggleAll };
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [rows]);
@@ -709,10 +710,10 @@ function useToggleIds(rows, persistCollapse) {
             // Trigger a re-render
             setTick(collapsedIds.join(","));
         };
-        return { isCollapsed, toggleCollapsed: toggleRow };
+        return { headerCollapsed: isCollapsed("header"), isCollapsed, toggleCollapsed: toggleRow };
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
+    [collapseAllContext.isCollapsed("header")]);
     // Return a copy of the list, b/c we want external useMemos that do explicitly use the
     // entire list as a dep to re-render whenever the list is changed (which they need to
     // see as new list identity).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.95.0",
+  "version": "2.95.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",