@homebound/beam 2.186.6 → 2.187.0

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

@@ -2,8 +2,9 @@ import { Dispatch, SetStateAction } from "react";
 import { OverlayTriggerProps } from "../internal/OverlayTrigger";
 import { GridColumn, Kinded } from "./GridTable";
 interface EditColumnsButtonProps<R extends Kinded, S> extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip"> {
-    columns: GridColumn<R, S>[];
-    setColumns: Dispatch<SetStateAction<GridColumn<R, S>[]>>;
+    allColumns: GridColumn<R, S>[];
+    selectedColumns: GridColumn<R, S>[];
+    setSelectedColumns: Dispatch<SetStateAction<GridColumn<R, S>[]>>;
     title?: string;
     defaultOpen?: boolean;
 }

package/dist/components/Table/EditColumnsButton.js

@@ -11,13 +11,13 @@ const utils_1 = require("../../utils");
 const Button_1 = require("../Button");
 const OverlayTrigger_1 = require("../internal/OverlayTrigger");
 function EditColumnsButton(props) {
-    const { defaultOpen, disabled, columns, setColumns, trigger, title } = props;
+    const { defaultOpen, disabled, allColumns, setSelectedColumns, trigger, title, selectedColumns } = props;
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
     const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
-    const { options, selectedColumns } = (0, react_1.useMemo)(() => {
-        return columns.reduce((acc, column) => {
+    const { options } = (0, react_1.useMemo)(() => {
+        return allColumns.reduce((acc, column) => {
             // Only include options that can be hidden and have the `name` property defined.
             if (!column.canHide)
                 return acc;
@@ -25,18 +25,14 @@ function EditColumnsButton(props) {
                 console.warn("Column is missing 'name' property required by the Edit Columns button", column);
                 return acc;
             }
-            // If currently visible, then add to selectedColumns
-            if (column.canHide && column.visible) {
-                acc.selectedColumns.push(column.name);
-            }
             // Add current column as an option
             return { ...acc, options: acc.options.concat({ label: column.name, value: column.name }) };
-        }, { options: [], selectedColumns: [] });
-    }, [columns]);
-    const [selectedValues, setSelectedValues] = (0, react_1.useState)(selectedColumns);
-    (0, react_1.useEffect)(() => {
-        setColumns(columns.filter((column) => (column.canHide ? selectedValues.includes(column.name) : true)));
-    }, [selectedValues]);
+        }, { options: [] });
+    }, [allColumns]);
+    const selectedValues = selectedColumns.map((column) => column.name);
+    const setSelectedValues = (0, react_1.useCallback)((values) => {
+        setSelectedColumns(allColumns.filter((column) => (column.canHide ? values.includes(column.name) : true)));
+    }, [allColumns, setSelectedColumns]);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
                 ...Css_1.Css.bgWhite.py5.px3.maxwPx(380).bshBasic.$,
                 "&:hover": Css_1.Css.bshHover.$,

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

@@ -244,8 +244,8 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     name?: string;
     /** Flag that will allow to know which columns are hide-able */
     canHide?: boolean;
-    /** Flag that will allow to know which hide-able columns are visible */
-    visible?: boolean;
+    /** Flag that will allow to know which hide-able columns are visible on initial load */
+    initVisible?: boolean;
 };
 export declare const nonKindGridColumnKeys: string[];
 /** Allows rendering a specific cell. */

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

@@ -1,3 +1,3 @@
 import { Dispatch, SetStateAction } from "react";
 import { GridColumn, Kinded } from "./GridTable";
-export declare function useColumns<R extends Kinded, S = {}>(tableColumns: GridColumn<R, S>[]): [GridColumn<R, S>[], Dispatch<SetStateAction<GridColumn<R, S>[]>>];
+export declare function useColumns<R extends Kinded, S = {}>(tableColumns: GridColumn<R, S>[], maybeStorageKey?: string): [GridColumn<R, S>[], Dispatch<SetStateAction<GridColumn<R, S>[]>>];

package/dist/components/Table/useColumns.js

@@ -1,9 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useColumns = void 0;
+const change_case_1 = require("change-case");
 const react_1 = require("react");
-function useColumns(tableColumns) {
-    const [columns, setColumns] = (0, react_1.useState)(tableColumns.filter((column) => (column.canHide ? column.visible : true)));
+const useSessionStorage_1 = require("../../hooks/useSessionStorage");
+function useColumns(tableColumns, maybeStorageKey) {
+    const { selectedColumns, hideColumns } = tableColumns.reduce((acc, column) => {
+        // Only include options that can be hidden and have the `name` property defined.
+        if (!column.name || column.name.length === 0) {
+            console.warn("Column is missing 'name' property required by the Edit Columns button", column);
+            return acc;
+        }
+        // Add hide-able columns
+        if (column.canHide) {
+            acc.hideColumns.push(column.name);
+        }
+        // Add selected columns
+        if (!column.canHide || (column.canHide && column.initVisible)) {
+            acc.selectedColumns.push(column.name);
+        }
+        return { ...acc };
+    }, { selectedColumns: [], hideColumns: [] });
+    const storageKey = maybeStorageKey !== null && maybeStorageKey !== void 0 ? maybeStorageKey : (0, change_case_1.camelCase)(hideColumns.map((c) => c).join(""));
+    const [storageNames, setStorageNames] = (0, useSessionStorage_1.useSessionStorage)(storageKey, selectedColumns);
+    const storageColumns = storageNames && storageNames.map((sc) => tableColumns.find((column) => column.name === sc));
+    const [columns, setColumns] = (0, react_1.useState)(storageColumns);
+    (0, react_1.useEffect)(() => {
+        setStorageNames(columns.map((column) => column.name));
+    }, [columns]);
     return [columns, setColumns];
 }
 exports.useColumns = useColumns;

package/package.json

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