@homebound/beam 2.185.0 → 2.186.1

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

@@ -0,0 +1,11 @@
+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>[]>>;
+    title?: string;
+    defaultOpen?: boolean;
+}
+export declare function EditColumnsButton<R extends Kinded, S = {}>(props: EditColumnsButtonProps<R, S>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/EditColumnsButton.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditColumnsButton = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
+const inputs_1 = require("../../inputs");
+const Css_1 = require("../../Css");
+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 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) => {
+            // Only include options that can be hidden and have the `name` property defined.
+            if (!column.canHide)
+                return acc;
+            if (!column.name || column.name.length === 0) {
+                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]);
+    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.$,
+            } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.gray500.xsSb.mb1.ttu.$ }, { children: title || "Select columns to show" }), void 0), (0, jsx_runtime_1.jsx)(inputs_1.CheckboxGroup, { label: title || "Select columns to show", onChange: (values) => setSelectedValues(values), values: selectedValues, options: options, columns: 2, hideLabel: true }, void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mt1.$ }, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "tertiary", label: "Clear selections", onClick: () => setSelectedValues([]) }, void 0) }), void 0)] }), void 0) }), void 0));
+}
+exports.EditColumnsButton = EditColumnsButton;

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

@@ -242,6 +242,10 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     isAction?: true;
     /** Column name that will be used to generate an unique identifier for every row cell */
     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;
 };
 export declare const nonKindGridColumnKeys: string[];
 /** Allows rendering a specific cell. */

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

@@ -1,5 +1,6 @@
 export * from "./CollapseToggle";
 export * from "./columns";
+export { EditColumnsButton } from "./EditColumnsButton";
 export type { GridRowLookup } from "./GridRowLookup";
 export { GridSortContext } from "./GridSortContext";
 export { ASC, DESC, GridTable, setDefaultStyle, setGridTableDefaults } from "./GridTable";
@@ -12,3 +13,4 @@ export { simpleDataRows, simpleHeader } from "./simpleHelpers";
 export type { SimpleHeaderAndData } from "./simpleHelpers";
 export { SortHeader } from "./SortHeader";
 export { cardStyle, condensedStyle, defaultStyle, getTableStyles } from "./styles";
+export { useColumns } from "./useColumns";

package/dist/components/Table/index.js

@@ -10,9 +10,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTableStyles = exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.SortHeader = exports.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.useGridTableApi = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = void 0;
+exports.useColumns = exports.getTableStyles = exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.SortHeader = exports.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.useGridTableApi = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = exports.EditColumnsButton = void 0;
 __exportStar(require("./CollapseToggle"), exports);
 __exportStar(require("./columns"), exports);
+var EditColumnsButton_1 = require("./EditColumnsButton");
+Object.defineProperty(exports, "EditColumnsButton", { enumerable: true, get: function () { return EditColumnsButton_1.EditColumnsButton; } });
 var GridSortContext_1 = require("./GridSortContext");
 Object.defineProperty(exports, "GridSortContext", { enumerable: true, get: function () { return GridSortContext_1.GridSortContext; } });
 var GridTable_1 = require("./GridTable");
@@ -37,3 +39,5 @@ Object.defineProperty(exports, "cardStyle", { enumerable: true, get: function ()
 Object.defineProperty(exports, "condensedStyle", { enumerable: true, get: function () { return styles_1.condensedStyle; } });
 Object.defineProperty(exports, "defaultStyle", { enumerable: true, get: function () { return styles_1.defaultStyle; } });
 Object.defineProperty(exports, "getTableStyles", { enumerable: true, get: function () { return styles_1.getTableStyles; } });
+var useColumns_1 = require("./useColumns");
+Object.defineProperty(exports, "useColumns", { enumerable: true, get: function () { return useColumns_1.useColumns; } });

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

@@ -0,0 +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>[]>>];

package/dist/components/Table/useColumns.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColumns = void 0;
+const react_1 = require("react");
+function useColumns(tableColumns) {
+    const [columns, setColumns] = (0, react_1.useState)(tableColumns.filter((column) => (column.canHide ? column.visible : true)));
+    return [columns, setColumns];
+}
+exports.useColumns = useColumns;

package/dist/components/index.d.ts

@@ -7,6 +7,8 @@ export * from "./Accordion";
 export * from "./AccordionList";
 export * from "./Alert";
 export * from "./AutoSaveIndicator";
+export * from "./Avatar";
+export * from "./AvatarButton";
 export { BeamProvider } from "./BeamContext";
 export * from "./Button";
 export * from "./ButtonDatePicker";

package/dist/components/index.js

@@ -20,6 +20,8 @@ __exportStar(require("./Accordion"), exports);
 __exportStar(require("./AccordionList"), exports);
 __exportStar(require("./Alert"), exports);
 __exportStar(require("./AutoSaveIndicator"), exports);
+__exportStar(require("./Avatar"), exports);
+__exportStar(require("./AvatarButton"), exports);
 var BeamContext_1 = require("./BeamContext");
 Object.defineProperty(exports, "BeamProvider", { enumerable: true, get: function () { return BeamContext_1.BeamProvider; } });
 __exportStar(require("./Button"), exports);

package/dist/inputs/CheckboxGroup.d.ts

@@ -21,5 +21,9 @@ export interface CheckboxGroupProps {
     onBlur?: () => void;
     /** Called when the component is in focus */
     onFocus?: () => void;
+    /** Number of columns to display checkboxes */
+    columns?: number;
+    /** Hide label if it is not needed */
+    hideLabel?: boolean;
 }
 export declare function CheckboxGroup(props: CheckboxGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/CheckboxGroup.js

@@ -12,11 +12,11 @@ const CheckboxBase_1 = require("./CheckboxBase");
 const ErrorMessage_1 = require("./ErrorMessage");
 const utils_1 = require("../utils");
 function CheckboxGroup(props) {
-    const { options, label, values, errorMsg, helperText, onBlur, onFocus } = props;
+    const { options, label, values, errorMsg, helperText, onBlur, onFocus, columns = 1, hideLabel = false } = props;
     const state = (0, react_stately_1.useCheckboxGroupState)({ ...props, value: values });
     const { groupProps, labelProps } = (0, react_aria_1.useCheckboxGroup)(props, state);
     const tid = (0, utils_1.useTestIds)(props);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, groupProps, { onBlur: onBlur, onFocus: onFocus }, tid, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label }, labelProps, tid.label), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.dg.gap2.$ }, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(CheckboxGroupItem, Object.assign({}, option, { groupState: state, selected: state.value.includes(option.value) }), option.value))) }), void 0), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, groupProps, { onBlur: onBlur, onFocus: onFocus }, tid, { children: [!hideLabel && (0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ label: label }, labelProps, tid.label), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.dg.gtc(`repeat(${columns}, auto)`).gap2.$ }, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(CheckboxGroupItem, Object.assign({}, option, { groupState: state, selected: state.value.includes(option.value) }), option.value))) }), void 0), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
 }
 exports.CheckboxGroup = CheckboxGroup;
 function CheckboxGroupItem(props) {

package/package.json

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