@homebound/beam 4.40.0 → 4.41.0

package/dist/index.d.cts

@@ -9533,6 +9533,8 @@ type GridTableLayoutProps<F extends Record<string, unknown>, R extends Kinded, X
     /** Shows "N Rows Selected · Clear" before the columns selector; Clear deselects every row. */
     selectionSummary?: boolean;
     hideEditColumns?: boolean;
+    /** When set, columns that share a name use one Edit Columns switch. */
+    shareColumnVisibility?: boolean;
     totalCount?: number;
     /** When true, shows a view toggle button and renders the table with `as="card"` when in card view. */
     withCardView?: boolean;
@@ -11030,6 +11032,8 @@ interface TriggerNoticeProps extends Omit<SnackbarNoticeProps, "id" | "onClose">
 type EditColumnsButtonProps<R extends Kinded> = {
     columns: GridColumn<R>[];
     api: GridTableApi<R>;
+    /** When set, columns that share a name use one Edit Columns switch. */
+    shareColumnVisibility?: boolean;
     defaultOpen?: boolean;
 } & Pick<OverlayTriggerProps, "placement" | "disabled" | "tooltip">;
 declare function EditColumnsButton<R extends Kinded>(props: EditColumnsButtonProps<R>): React$1.JSX.Element;

package/dist/index.d.ts

@@ -9533,6 +9533,8 @@ type GridTableLayoutProps<F extends Record<string, unknown>, R extends Kinded, X
     /** Shows "N Rows Selected · Clear" before the columns selector; Clear deselects every row. */
     selectionSummary?: boolean;
     hideEditColumns?: boolean;
+    /** When set, columns that share a name use one Edit Columns switch. */
+    shareColumnVisibility?: boolean;
     totalCount?: number;
     /** When true, shows a view toggle button and renders the table with `as="card"` when in card view. */
     withCardView?: boolean;
@@ -11030,6 +11032,8 @@ interface TriggerNoticeProps extends Omit<SnackbarNoticeProps, "id" | "onClose">
 type EditColumnsButtonProps<R extends Kinded> = {
     columns: GridColumn<R>[];
     api: GridTableApi<R>;
+    /** When set, columns that share a name use one Edit Columns switch. */
+    shareColumnVisibility?: boolean;
     defaultOpen?: boolean;
 } & Pick<OverlayTriggerProps, "placement" | "disabled" | "tooltip">;
 declare function EditColumnsButton<R extends Kinded>(props: EditColumnsButtonProps<R>): React$1.JSX.Element;

package/dist/index.js

@@ -6283,7 +6283,7 @@ var ColumnState = class {
   constructor(states, storage, column2) {
     this.states = states;
     this.column = column2;
-    this.visible = storage.wasVisible(column2.id) ?? (column2.canHide ? !(column2.initHidden ?? true) : true);
+    this.visible = !column2.canHide || (storage.wasVisible(column2.id) ?? !(column2.initHidden ?? true));
     if (this.visible && (storage.wasExpanded(column2.id) ?? column2.initExpanded)) {
       this.expanded = true;
       this.doExpand();
@@ -6294,10 +6294,17 @@ var ColumnState = class {
   children = void 0;
   visible = true;
   expanded = false;
+  /**
+   * Whether this column is shown. We check `canHide` here too b/c when `props.columns` changes,
+   * `addColumn` can replace a hidden column's definition with one that can't be hidden.
+   */
+  get isVisible() {
+    return this.visible || !this.column.canHide;
+  }
   setVisible(visible) {
-    const wasVisible = this.visible;
-    this.visible = visible;
-    if (!wasVisible && visible && this.column.initExpanded && this.children === void 0) {
+    const wasVisible = this.isVisible;
+    this.visible = visible || !this.column.canHide;
+    if (!wasVisible && this.visible && this.column.initExpanded && this.children === void 0) {
       this.expanded = true;
       this.doExpand();
     }
@@ -6321,9 +6328,13 @@ var ColumnState = class {
       this.children = expandColumns.map((ec) => this.states.addColumn(ec));
     }
   }
+  /** Returns this column and all of its loaded children, whether visible and expanded or not. */
+  get selfAndChildren() {
+    return [this, ...(this.children ?? []).flatMap((c) => c.selfAndChildren)];
+  }
   /** Returns this column, if visible, and its children, if expanded. */
   get maybeSelfAndChildren() {
-    if (!this.visible) {
+    if (!this.isVisible) {
       return [];
     } else if (this.expanded && this.children) {
       return [this, ...this.children.flatMap((c) => c.maybeSelfAndChildren)];
@@ -7573,9 +7584,13 @@ var ColumnStates = class {
   allVisibleColumns(showIn) {
     return this.columns.flatMap((cs) => cs.maybeSelfAndChildren).filter((cs) => !cs.column.showIn || cs.column.showIn === showIn).filter((cs) => showIn === "csv" ? isContentColumn(cs.column) : true);
   }
+  /**
+   * Shows the current columns in `ids` and hides the others. Columns that can't be hidden, like layout gutters, stay shown.
+   * Columns not currently in the table keep their visibility, so a column that's temporarily removed comes back as it was.
+   */
   setVisibleColumns(ids) {
-    for (const cs of this.map.values()) {
-      cs.setVisible(cs.column.isLayoutGutter ? true : ids.includes(cs.column.id));
+    for (const cs of this.columns.flatMap((c) => c.selfAndChildren)) {
+      cs.setVisible(ids.includes(cs.column.id));
     }
   }
   loadExpanded(storageKey) {
@@ -25124,7 +25139,8 @@ function EditColumnsButton(props) {
     defaultOpen,
     disabled,
     columns,
-    api
+    api,
+    shareColumnVisibility = false
   } = props;
   const state = useMenuTriggerState4({
     defaultOpen
@@ -25139,26 +25155,13 @@ function EditColumnsButton(props) {
   const {
     sm
   } = useBreakpoint();
-  const options = useMemo42(() => columns.filter((column2) => column2.canHide).filter((column2) => {
-    if (!column2.name || column2.name.length === 0 || !column2.id || column2.id.length === 0) {
-      console.warn("Column is missing 'name' and/or 'id' property required by the Edit Columns button", column2);
-      return false;
-    }
-    return true;
-  }).map((column2) => ({
-    label: column2.name,
-    value: column2.id,
-    tooltip: column2.tooltip
-  })), [columns]);
+  const options = useMemo42(() => buildColumnOptions(columns, shareColumnVisibility), [columns, shareColumnVisibility]);
   const selectedValues = useComputed(() => api.getVisibleColumnIds(), [api]);
   const setSelectedValues = useCallback27((ids) => {
     api.resetColumnWidths();
     api.setVisibleColumns(columns.filter((column2) => column2.canHide ? ids.includes(column2.id) : true).map((c) => c.id));
   }, [columns, api]);
-  const hasHiddenColumn = useMemo42(() => {
-    const selectableOptionValues = options.map((option) => option.value);
-    return selectableOptionValues.some((option) => !selectedValues.includes(option));
-  }, [options, selectedValues]);
+  const hasHiddenColumn = useMemo42(() => options.some((option) => option.ids.some((id) => !selectedValues.includes(id))), [options, selectedValues]);
   return /* @__PURE__ */ jsx179(OverlayTrigger, { ...props, trigger: sm ? {
     icon: hasHiddenColumn ? "columnsBadged" : "columns",
     variant: "outline"
@@ -25186,7 +25189,7 @@ function EditColumnsButton(props) {
         /* @__PURE__ */ jsx179("span", { className: "fw4 fz_14px lh_20px mw0", children: option.label }),
         option.tooltip ? /* @__PURE__ */ jsx179(ColumnTooltipIcon, { ...tid[`tooltip_${option.value}`], tooltip: closeMenuOnClickTooltip(option.tooltip, state.close), color: "--b-text-link-default" /* TextLinkDefault */, label: option.label }) : null
       ] }),
-      /* @__PURE__ */ jsx179(Switch, { compact: true, selected: selectedValues.includes(option.value), onChange: (value) => setSelectedValues(value ? [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value)), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
+      /* @__PURE__ */ jsx179(Switch, { compact: true, selected: option.ids.every((id) => selectedValues.includes(id)), onChange: (value) => setSelectedValues(value ? [...selectedValues, ...option.ids] : selectedValues.filter((id) => !option.ids.includes(id))), labelStyle: "hidden", label: option.label, ...tid[`option${option.value}`] })
     ] }, option.value)) }),
     /* @__PURE__ */ jsx179("div", { ...trussProps105({
       display: "df",
@@ -25203,6 +25206,54 @@ function EditColumnsButton(props) {
     }), children: /* @__PURE__ */ jsx179(Button, { variant: "tertiary", label: "Reset Column Widths", onClick: () => api.resetColumnWidths() }) })
   ] }) });
 }
+function buildColumnOptions(columns, shareColumnVisibility) {
+  const hideable = columns.filter((column2) => {
+    if (!column2.canHide) return false;
+    if (!column2.name || column2.name.length === 0 || !column2.id || column2.id.length === 0) {
+      console.warn("Column is missing 'name' and/or 'id' property required by the Edit Columns button", column2);
+      return false;
+    }
+    return true;
+  });
+  if (!shareColumnVisibility) {
+    return hideable.map((column2) => ({
+      label: column2.name,
+      value: column2.id,
+      ids: [column2.id],
+      tooltip: column2.tooltip
+    }));
+  }
+  const byLabel = /* @__PURE__ */ new Map();
+  const warnedLabels = /* @__PURE__ */ new Set();
+  for (const column2 of hideable) {
+    const label = leafColumnName(column2);
+    const existing = byLabel.get(label);
+    if (!existing) {
+      byLabel.set(label, {
+        label,
+        value: column2.id,
+        ids: [column2.id],
+        tooltip: column2.tooltip
+      });
+      continue;
+    }
+    existing.ids.push(column2.id);
+    if (existing.tooltip !== column2.tooltip && !warnedLabels.has(label)) {
+      warnedLabels.add(label);
+      console.warn(`Edit Columns columns labeled "${label}" have different tooltips. Using the first.`);
+    }
+  }
+  return [...byLabel.values()];
+}
+function leafColumnName(column2) {
+  const {
+    name,
+    groupLabel
+  } = column2;
+  const prefix = groupLabel ? `${groupLabel}: ` : void 0;
+  if (name && prefix && name.startsWith(prefix)) return name.slice(prefix.length);
+  return name;
+}
 function closeMenuOnClickTooltip(tooltip, closeMenu) {
   if (typeof tooltip !== "function") return tooltip;
   return () => {
@@ -25427,6 +25478,7 @@ function GridTableLayoutActionsComponent(props) {
     searchProps,
     hasHideableColumns,
     columns,
+    shareColumnVisibility,
     api,
     withCardView,
     view,
@@ -25520,7 +25572,7 @@ function GridTableLayoutActionsComponent(props) {
       ] }),
       (hasHideableColumns || withCardView || !!actions?.length || selectionSummary) && /* @__PURE__ */ jsxs96("div", { className: "df aic g_12px", children: [
         selectionSummary && api && /* @__PURE__ */ jsx184(SelectionSummaryAction, { api, numberOnly: sm }),
-        hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ jsx184(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
+        hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ jsx184(EditColumnsButton, { columns, api, shareColumnVisibility, tooltip: "Display columns" }),
         withCardView && view !== void 0 && setView && /* @__PURE__ */ jsx184(ViewToggleButton, { view, onChange: setView }),
         !!actions?.length && /* @__PURE__ */ jsx184(HeaderActions, { actions, ...testId.actions })
       ] })
@@ -26399,6 +26451,7 @@ function GridTableLayoutComponent(props) {
     actions,
     selectionSummary = false,
     hideEditColumns = false,
+    shareColumnVisibility = false,
     withCardView,
     defaultView = "list",
     emptyFallback: layoutEmptyFallback,
@@ -26453,6 +26506,7 @@ function GridTableLayoutComponent(props) {
       searchProps: filterSearchProps,
       hasHideableColumns,
       columns,
+      shareColumnVisibility,
       api,
       withCardView,
       view,