@genesislcap/grid-pro 15.17.0 → 15.18.0-FUI-2601.3

package/dist/esm/columns-tool-panel/columns-tool-panel.template.js

@@ -0,0 +1,70 @@
+import { html, repeat } from '@microsoft/fast-element';
+/**
+ * Columns tool panel template with Design System prefix (`rapid-text-field`, etc.).
+ * @public
+ */
+export const getColumnsToolPanelTemplate = (prefix = 'foundation') => {
+    const textField = `${prefix}-text-field`;
+    const checkbox = `${prefix}-checkbox`;
+    const columnRow = html `
+    <div
+      class="${(x) => `grid-pro-columns-item${x.visible ? '' : ' grid-pro-columns-item--unselected'}`}"
+      data-col-id="${(x) => x.colId}"
+      data-test-id="${(x) => `grid-pro-columns-item-${x.colId}`}"
+    >
+      <${checkbox}
+        class="grid-pro-columns-checkbox"
+        data-test-id="${(x) => `grid-pro-columns-check-${x.colId}`}"
+        ?checked="${(x) => x.visible}"
+        ?disabled="${(x) => x.lockVisible}"
+        @click="${(x, c) => c.parent.onCheckboxClick(x, c.event)}"
+      ></${checkbox}>
+      <span
+        class="grid-pro-columns-handle"
+        data-test-id="${(x) => `grid-pro-columns-handle-${x.colId}`}"
+        aria-hidden="${(x, c) => {
+        const panel = c.parent;
+        return String(!(panel.canDrag && (x.visible || panel.canDragToGrid(x))));
+    }}"
+      >
+        ⋮⋮
+      </span>
+      <span class="grid-pro-columns-label">${(x) => x.headerName}</span>
+    </div>
+  `;
+    return html `
+    <template>
+      <div class="grid-pro-columns-toolbar" data-test-id="grid-pro-columns-toolbar">
+        <${checkbox}
+          class="grid-pro-columns-select-all"
+          data-test-id="grid-pro-columns-select-all"
+          ?checked="${(x) => x.selectAllChecked}"
+          :indeterminate="${(x) => x.selectAllIndeterminate}"
+          @click="${(x, c) => x.onSelectAllClick(c.event)}"
+        ></${checkbox}>
+        <${textField}
+          class="grid-pro-columns-search"
+          placeholder="Search"
+          data-test-id="grid-pro-columns-search"
+          :value="${(x) => x.search}"
+          @input="${(x, c) => x.onSearchInput(c.event.target.value)}"
+        ></${textField}>
+      </div>
+      <div class="grid-pro-columns-list" data-test-id="grid-pro-columns-list">
+        <div class="grid-pro-columns-section" data-test-id="grid-pro-columns-selected">
+          ${repeat((x) => x.selectedItems, columnRow, { recycle: false })}
+        </div>
+        <div class="grid-pro-columns-section" data-test-id="grid-pro-columns-unselected">
+          ${repeat((x) => x.unselectedItems, columnRow, { recycle: false })}
+        </div>
+      </div>
+    </template>
+  `;
+};
+/**
+ * Default columns tool panel template (`foundation-*` components).
+ * @public
+ */
+export const columnsToolPanelTemplate = html `
+  ${(x) => getColumnsToolPanelTemplate(x.prefix || 'foundation')}
+`;

package/dist/esm/columns-tool-panel/columns-tool-panel.utils.js

@@ -0,0 +1,185 @@
+import { GridProToolPanelTypes } from '../grid-pro.types';
+export const GRID_PRO_COLUMNS_TOOL_PANEL_SORT_DEFAULT = 'selected-first';
+export function resolveColumnsToolPanelSort(sort) {
+    return sort === 'ag-grid' ? 'ag-grid' : GRID_PRO_COLUMNS_TOOL_PANEL_SORT_DEFAULT;
+}
+export const gridProColumnsToolPanelDef = {
+    id: 'columns',
+    labelDefault: 'Columns',
+    labelKey: 'columns',
+    iconKey: 'columns',
+    toolPanel: GridProToolPanelTypes.columns,
+};
+const filtersToolPanelDef = {
+    id: 'filters',
+    labelDefault: 'Filters',
+    labelKey: 'filters',
+    iconKey: 'filter',
+    toolPanel: 'agFiltersToolPanel',
+};
+export function toPickerItem(col) {
+    const colDef = col.getColDef();
+    if (colDef.suppressColumnsToolPanel) {
+        return null;
+    }
+    if (typeof col.isPrimary === 'function' && !col.isPrimary()) {
+        return null;
+    }
+    const colId = col.getColId();
+    const headerName = String(colDef.headerName || colDef.field || colId || '');
+    return {
+        colId,
+        headerName,
+        visible: col.isVisible(),
+        lockVisible: Boolean(colDef.lockVisible),
+    };
+}
+export function getPickerItems(columns) {
+    return columns.map(toPickerItem).filter((item) => item != null);
+}
+/**
+ * Column order for the picker list.
+ *
+ * - `selected-first` (default): displayed columns first (current grid visual order), then
+ *   any non-displayed columns in `getColumns()` order (caller alphabetizes hidden via
+ *   {@link partitionPickerItems}).
+ * - `ag-grid`: current column-state order (`getColumnState`), visible and hidden interleaved —
+ *   same live order AG's columns tool panel reflects after moves. Falls back to `getColumns()`
+ *   when state is empty.
+ */
+export function orderColumnsForPicker(displayed, all, sort = GRID_PRO_COLUMNS_TOOL_PANEL_SORT_DEFAULT, columnState) {
+    if (sort === 'ag-grid') {
+        if (!(columnState === null || columnState === void 0 ? void 0 : columnState.length)) {
+            return all;
+        }
+        const byId = new Map(all.map((column) => [column.getColId(), column]));
+        const ordered = [];
+        const seen = new Set();
+        for (const state of columnState) {
+            const colId = state.colId;
+            if (colId == null || seen.has(colId)) {
+                continue;
+            }
+            const column = byId.get(colId);
+            if (column) {
+                ordered.push(column);
+                seen.add(colId);
+            }
+        }
+        for (const column of all) {
+            const colId = column.getColId();
+            if (!seen.has(colId)) {
+                ordered.push(column);
+                seen.add(colId);
+            }
+        }
+        return ordered;
+    }
+    const displayedIds = new Set(displayed.map((column) => column.getColId()));
+    return [...displayed, ...all.filter((column) => !displayedIds.has(column.getColId()))];
+}
+/**
+ * Splits / filters picker items for the template sections.
+ *
+ * - `selected-first`: visible rows in input order; hidden rows A–Z by header.
+ * - `ag-grid`: one flat list in input order (AG column-model order) in `selected`;
+ *   `unselected` is empty so the template does not re-group.
+ */
+export function partitionPickerItems(items, search, sort = GRID_PRO_COLUMNS_TOOL_PANEL_SORT_DEFAULT) {
+    const query = search.trim().toLowerCase();
+    const matches = (item) => !query || item.headerName.toLowerCase().includes(query);
+    const filtered = items.filter(matches);
+    if (sort === 'ag-grid') {
+        return { selected: filtered, unselected: [] };
+    }
+    return {
+        selected: filtered.filter((item) => item.visible),
+        unselected: filtered
+            .filter((item) => !item.visible)
+            .sort((a, b) => a.headerName.localeCompare(b.headerName, undefined, { sensitivity: 'base' })),
+    };
+}
+export function reorderVisibleIds(allVisibleIds, shownIds, fromId, toId) {
+    const shown = [...shownIds];
+    const fromIndex = shown.indexOf(fromId);
+    const toIndex = shown.indexOf(toId);
+    if (fromIndex < 0 || toIndex < 0 || fromId === toId) {
+        return null;
+    }
+    shown.splice(fromIndex, 1);
+    shown.splice(toIndex, 0, fromId);
+    let index = 0;
+    return allVisibleIds.map((id) => {
+        if (!shownIds.includes(id)) {
+            return id;
+        }
+        const nextId = shown[index];
+        index += 1;
+        return nextId;
+    });
+}
+export function applyVisibleOrder(columnState, visibleOrder) {
+    const byId = new Map(columnState.map((state) => [state.colId, state]));
+    let index = 0;
+    return columnState.map((state) => {
+        if (state.hide) {
+            return state;
+        }
+        const nextId = visibleOrder[index];
+        index += 1;
+        return (nextId && byId.get(nextId)) || state;
+    });
+}
+function isColumnsToolPanel(panel) {
+    if (panel === 'columns' || panel === 'agColumnsToolPanel') {
+        return true;
+    }
+    if (typeof panel === 'string') {
+        return false;
+    }
+    return (panel.toolPanel === 'agColumnsToolPanel' ||
+        panel.toolPanel === GridProToolPanelTypes.columns ||
+        panel.id === 'columns');
+}
+function toColumnsToolPanel(panel) {
+    if (typeof panel === 'string') {
+        return Object.assign({}, gridProColumnsToolPanelDef);
+    }
+    return Object.assign(Object.assign(Object.assign({}, gridProColumnsToolPanelDef), panel), { toolPanel: GridProToolPanelTypes.columns });
+}
+/**
+ * Rewrites `sideBar: ['columns']` / `agColumnsToolPanel` to the custom Grid Pro picker.
+ */
+export function resolveGridProSideBar(sideBar) {
+    var _a;
+    if (!sideBar) {
+        return sideBar;
+    }
+    if (sideBar === true || sideBar === 'true') {
+        return {
+            toolPanels: [gridProColumnsToolPanelDef, filtersToolPanelDef],
+            defaultToolPanel: 'filters',
+        };
+    }
+    if (sideBar === 'columns' || sideBar === 'agColumnsToolPanel') {
+        return { toolPanels: [gridProColumnsToolPanelDef] };
+    }
+    if (typeof sideBar === 'string') {
+        return sideBar;
+    }
+    if (Array.isArray(sideBar)) {
+        if (!sideBar.some(isColumnsToolPanel)) {
+            return sideBar;
+        }
+        return {
+            toolPanels: sideBar.map((panel) => isColumnsToolPanel(panel) ? toColumnsToolPanel(panel) : panel),
+        };
+    }
+    if (!((_a = sideBar.toolPanels) === null || _a === void 0 ? void 0 : _a.length)) {
+        return sideBar;
+    }
+    if (!sideBar.toolPanels.some(isColumnsToolPanel)) {
+        return sideBar;
+    }
+    return Object.assign(Object.assign({}, sideBar), { toolPanels: sideBar.toolPanels.map((panel) => isColumnsToolPanel(panel) ? toColumnsToolPanel(panel) : panel) });
+}

package/dist/esm/columns-tool-panel/grid-pro-column-drag-bridge.js

@@ -0,0 +1,57 @@
+import { _ColumnMoveModule as ColumnMoveModule, } from 'ag-grid-community';
+/** Context key on `gridOptions.context` for AG column drag integration. */
+export const GRID_PRO_COLUMN_DRAG_BRIDGE_CONTEXT_KEY = 'gridProColumnDragBridge';
+/** @internal Writes DnD beans onto the shared bridge object in grid context. */
+export function syncColumnDragBridge(beans) {
+    var _a, _b;
+    if (!(beans === null || beans === void 0 ? void 0 : beans.dragAndDrop) || !beans.gos) {
+        return false;
+    }
+    const context = (_a = beans.gos.get('context')) !== null && _a !== void 0 ? _a : (_b = beans.gridOptions) === null || _b === void 0 ? void 0 : _b.context;
+    const bridge = context === null || context === void 0 ? void 0 : context[GRID_PRO_COLUMN_DRAG_BRIDGE_CONTEXT_KEY];
+    if (!bridge) {
+        return false;
+    }
+    bridge.dragAndDrop = beans.dragAndDrop;
+    bridge.gos = beans.gos;
+    return true;
+}
+/** @internal Populates {@link GridProColumnDragBridge} once core DnD beans exist. */
+class GridProColumnDragBridgeInit {
+    constructor() {
+        this.beanName = 'gridProColumnDragBridgeInit';
+        this.beans = null;
+    }
+    wireBeans(beans) {
+        this.beans = beans;
+    }
+    postConstruct() {
+        syncColumnDragBridge(this.beans);
+        queueMicrotask(() => syncColumnDragBridge(this.beans));
+    }
+}
+/**
+ * Registers drag-and-drop beans on `gridOptions.context` so custom tool panels
+ * can call `dragAndDrop.addDragSource` (same contract as Enterprise Columns panel).
+ * @internal
+ */
+export const gridProColumnDragBridgeModule = {
+    moduleName: 'GridProColumnDragBridge',
+    version: '1',
+    beans: [GridProColumnDragBridgeInit],
+    dependsOn: [ColumnMoveModule],
+};
+export function resolveColumnDragBridge(context) {
+    const bridge = context === null || context === void 0 ? void 0 : context[GRID_PRO_COLUMN_DRAG_BRIDGE_CONTEXT_KEY];
+    return resolveColumnDragBridgeDirect(bridge);
+}
+export function resolveColumnDragBridgeDirect(bridge) {
+    if (!(bridge === null || bridge === void 0 ? void 0 : bridge.dragAndDrop) || !(bridge === null || bridge === void 0 ? void 0 : bridge.gos)) {
+        return null;
+    }
+    return bridge;
+}
+export function resolveColumnDragBridgeFromApi(api) {
+    var _a;
+    return resolveColumnDragBridge((_a = api === null || api === void 0 ? void 0 : api.getGridOption) === null || _a === void 0 ? void 0 : _a.call(api, 'context'));
+}

package/dist/esm/columns-tool-panel/index.js

@@ -0,0 +1,4 @@
+export * from './columns-tool-panel';
+export * from './columns-tool-panel.styles';
+export * from './columns-tool-panel.template';
+export * from './columns-tool-panel.utils';

package/dist/esm/grid-pro-beta.js

@@ -4,24 +4,27 @@ import { avoidTreeShaking, LifecycleMixin, respondToVisibility, } from '@genesis
 import { baseLayerLuminance, StandardLuminance } from '@microsoft/fast-components';
 import { attr, DOM, observable } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
-import { CellStyleModule, CheckboxEditorModule, ClientSideRowModelApiModule, ClientSideRowModelModule, ColumnApiModule, ColumnAutoSizeModule, createGrid, CsvExportModule, CustomEditorModule, DateEditorModule, DateFilterModule, EventApiModule, HighlightChangesModule, ModuleRegistry, NumberEditorModule, NumberFilterModule, PaginationModule, RenderApiModule, RowApiModule, RowSelectionModule, RowStyleModule, SelectEditorModule, TextEditorModule, TextFilterModule, TooltipModule, } from 'ag-grid-community';
+import { CellStyleModule, CheckboxEditorModule, ClientSideRowModelApiModule, ClientSideRowModelModule, ColumnApiModule, ColumnAutoSizeModule, DragAndDropModule, createGrid, CsvExportModule, CustomEditorModule, DateEditorModule, DateFilterModule, EventApiModule, HighlightChangesModule, ModuleRegistry, NumberEditorModule, NumberFilterModule, PaginationModule, RenderApiModule, RowApiModule, RowSelectionModule, RowStyleModule, SelectEditorModule, TextEditorModule, TextFilterModule, TooltipModule, _ColumnMoveModule as ColumnMoveModule, } from 'ag-grid-community';
 import * as changeCase from 'change-case';
 import debounce from 'lodash.debounce';
 import { GridProCell } from './cell';
 import { DateEditor, MultiselectEditor, NumberEditor, SelectEditor, StringEditor, } from './cell-editors';
 import { ActionRenderer, ActionsMenuRenderer, BooleanRenderer, EditableRenderer, IconRenderer, SelectRenderer, StatusPillRenderer, } from './cell-renderers';
 import { GridProColumn, resolveVisibleColumnFields } from './column';
+import { ColumnsToolPanel, resolveGridProSideBar } from './columns-tool-panel';
+import { GRID_PRO_COLUMN_DRAG_BRIDGE_CONTEXT_KEY, gridProColumnDragBridgeModule, } from './columns-tool-panel/grid-pro-column-drag-bridge';
 import { GridProClientSideDatasource, GridProServerSideDatasource } from './datasource';
 import { baseDatasourceEventNames } from './datasource/base.types';
 import { GridProGenesisDatasource, gridProGenesisDatasourceEventNames, } from './grid-pro-genesis-datasource';
 import { datasourceEventNames, } from './grid-pro-genesis-datasource/datasource-events.types';
 import { AG_PROPERTIES, copyAttributesToGridOptions, DEBOUNCED_RESIZE_TIME, gridProErrorNames, gridProEventNames, } from './grid-pro.definitions';
-import { DEFAULT_STATUS_BAR_CONFIG, EDITED_COLUMN_FIELD, ERROR_COLUMN_FIELD, GRID_READY_EVENT, GridOptionsConfig, GridProRendererTypes, GridProStatusBarTypes, } from './grid-pro.types';
+import { DEFAULT_STATUS_BAR_CONFIG, EDITED_COLUMN_FIELD, ERROR_COLUMN_FIELD, GRID_READY_EVENT, GridOptionsConfig, GridProRendererTypes, GridProStatusBarTypes, GridProToolPanelTypes, } from './grid-pro.types';
+import { GRID_PRO_DEFAULT_SIDE_BAR_TOOLS, GridProSideBar, resolveAgSideBarToolPanels, } from './side-bar';
 import { StatePersistence } from './state-persistence';
 import { LabelValueStatusBarComponent, LoadMoreStatusBarComponent, ReloadStatusBarComponent, RowCountStatusBarComponent, } from './status-bar-components';
 import { ErrorTooltip } from './tooltips';
 import { convertToKebabCase, logger, mergeAndDedupColDefWithColumnState, sanitizeColumnState, } from './utils';
-avoidTreeShaking(GridProGenesisDatasource, GridProClientSideDatasource, GridProServerSideDatasource, GridProCell, GridProColumn);
+avoidTreeShaking(GridProGenesisDatasource, GridProClientSideDatasource, GridProServerSideDatasource, GridProCell, GridProColumn, GridProSideBar);
 ModuleRegistry.registerModules([
     CsvExportModule,
     ClientSideRowModelModule,
@@ -46,6 +49,9 @@ ModuleRegistry.registerModules([
     DateEditorModule,
     SelectEditorModule,
     CheckboxEditorModule,
+    DragAndDropModule,
+    ColumnMoveModule,
+    gridProColumnDragBridgeModule,
     // ValidationModule,
 ]);
 const DEBOUNCE_TIME = 400;
@@ -82,6 +88,10 @@ function findDeclaredAccessor(target, key) {
  * @remarks Re-emits AG Grid public API events when listeners are registered via `addEventListener` (event names match AG Grid public event strings). The same AG Grid events are also dispatched as native `Event`s with lowercased `type` and payload on `agGridDetails` (for example `addEventListener('columnresized', ...)`).
  */
 export class GridProBeta extends LifecycleMixin(FoundationElement) {
+    /** @internal Shared AG column-drag bridge for custom tool panels. */
+    getColumnDragBridge() {
+        return this.columnDragBridge;
+    }
     rowDataChanged(_, rowData) {
         // `initialised` flips true right after createGrid(), but `gridApi` is only assigned in the
         // async onGridReady callback — so a binding push in that window would crash on an undefined
@@ -105,6 +115,16 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
             this.initGrid();
         }
     }
+    sideBarToolsChanged() {
+        if (this.withSideBar && this.initialised && this.gridApi) {
+            this.applyCommunitySideBarOptions();
+        }
+    }
+    /** Resolved tools list used by the template. */
+    get resolvedSideBarTools() {
+        var _a;
+        return ((_a = this.sideBarTools) === null || _a === void 0 ? void 0 : _a.length) ? this.sideBarTools : GRID_PRO_DEFAULT_SIDE_BAR_TOOLS;
+    }
     getfilterModel() {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.persistFilterModelKey) {
@@ -132,6 +152,8 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
         // Coalesces bursts of column-visibility events (e.g. a "hide all" tool-panel toggle fires one
         // per column) into a single datasource notification + reload.
         this.debouncedNotifyDatasourceVisibleColumns = debounce(this.notifyDatasourceVisibleColumns.bind(this), DEBOUNCE_TIME);
+        /** Wired to `gridOptions.context` for columns picker → grid drag (see bridge module). */
+        this.columnDragBridge = {};
         // Genesis-specific attrs
         this.autoCellRendererByType = false;
         this.onlyTemplateColDefs = false;
@@ -168,6 +190,15 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
          * This requires AG Grid Enterprise module to be available for the status bar to be displayed when enabled.
          */
         this.withStatusBar = false;
+        /**
+         * Community side bar shell (no AG side-bar chrome). Tools come from `sideBarTools`.
+         */
+        this.withSideBar = false;
+        /**
+         * Dynamic side-bar tools (Columns, AG Filters, custom `IToolPanelComp`, etc.).
+         * Defaults to {@link GRID_PRO_DEFAULT_SIDE_BAR_TOOLS} (Columns only).
+         */
+        this.sideBarTools = null;
         this.applyingDatasourceGridOptions = false;
         this.rehydrationAttempted = false;
         this.rootEventsListeners = [];
@@ -369,6 +400,7 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
         }
         this.initialised = false;
         this.resetGridOptionsState();
+        this.destroySideBarTools();
         this.destroyGridInstance();
         // Only remove datasource listeners on a real teardown. A blocked (reflow) disconnect must
         // leave them in place, or a grid that survives the reflow stops reacting to datasource
@@ -680,6 +712,7 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
             [GridProStatusBarTypes.loadMore]: LoadMoreStatusBarComponent,
             [GridProStatusBarTypes.reload]: ReloadStatusBarComponent,
             [GridProStatusBarTypes.rowCount]: RowCountStatusBarComponent,
+            [GridProToolPanelTypes.columns]: ColumnsToolPanel,
         };
         return Object.assign(Object.assign(Object.assign({}, defaultFoundationAgComponents), gridOptionsComponents), this.gridComponents);
     }
@@ -903,6 +936,7 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
     get gridParams() {
         return {
             globalListener: this.boundGlobalEventListener,
+            modules: [gridProColumnDragBridgeModule, ColumnMoveModule, DragAndDropModule],
         };
     }
     /**
@@ -1012,6 +1046,10 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
                 this.restoreColumnState();
                 this.restoreCachedFilterConfig();
                 this.debouncedColumnAutosize();
+                if (this.withSideBar && this.sideBar) {
+                    this.sideBar.columnDragBridge = this.columnDragBridge;
+                }
+                DOM.queueUpdate(() => { var _a; return (_a = this.sideBar) === null || _a === void 0 ? void 0 : _a.mountActiveTool(); });
             }), onFirstDataRendered: (event) => {
                 // Safety net: by now the grid columns are populated, so (re)seed the datasource's visible
                 // columns in case the initial grid-ready seed ran before columns were available.
@@ -1062,6 +1100,49 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
     setLocalGridOptions(derivedOptions) {
         // Merge options with reflected AG properties from attributes
         this.agGridOptions = Object.assign(Object.assign({}, this.agGridOptions), copyAttributesToGridOptions(derivedOptions, this.agAttributes));
+        if (this.withSideBar) {
+            this.applyCommunitySideBarOptions();
+        }
+        else {
+            this.agGridOptions.sideBar = resolveGridProSideBar(this.agGridOptions.sideBar);
+        }
+        this.agGridOptions.context = Object.assign(Object.assign({}, this.agGridOptions.context), { [GRID_PRO_COLUMN_DRAG_BRIDGE_CONTEXT_KEY]: this.columnDragBridge });
+    }
+    applyCommunitySideBarOptions() {
+        if (!this.agGridOptions) {
+            return;
+        }
+        const toolPanels = resolveAgSideBarToolPanels(this.resolvedSideBarTools);
+        this.agGridOptions.sideBar = toolPanels.length
+            ? {
+                toolPanels,
+                hiddenByDefault: true,
+                hideButtons: true,
+            }
+            : undefined;
+        this.agGridOptions.context = Object.assign(Object.assign({}, this.agGridOptions.context), { [GRID_PRO_COLUMN_DRAG_BRIDGE_CONTEXT_KEY]: this.columnDragBridge });
+        if (this.agGridOptions.allowDragFromColumnsToolPanel == null) {
+            this.agGridOptions.allowDragFromColumnsToolPanel = true;
+        }
+        if (this.gridApi && typeof this.gridApi.setGridOption === 'function') {
+            this.gridApi.setGridOption('sideBar', this.agGridOptions.sideBar);
+            this.gridApi.setGridOption('context', this.agGridOptions.context);
+            if (this.agGridOptions.allowDragFromColumnsToolPanel) {
+                this.gridApi.setGridOption('allowDragFromColumnsToolPanel', true);
+            }
+        }
+    }
+    /**
+     * Selects a Community side-bar tool. Clicking the active open tool collapses the panel.
+     * @public
+     */
+    selectSideBarTool(tool) {
+        var _a;
+        (_a = this.sideBar) === null || _a === void 0 ? void 0 : _a.selectTool(tool);
+    }
+    destroySideBarTools() {
+        var _a;
+        (_a = this.sideBar) === null || _a === void 0 ? void 0 : _a.destroyTools();
     }
     /**
      * Clears the local grid options, this is used to clear the grid options when the grid is restarted.
@@ -1379,6 +1460,15 @@ __decorate([
 __decorate([
     attr({ mode: 'boolean', attribute: 'with-status-bar' })
 ], GridProBeta.prototype, "withStatusBar", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'with-side-bar' })
+], GridProBeta.prototype, "withSideBar", void 0);
+__decorate([
+    observable
+], GridProBeta.prototype, "sideBarTools", void 0);
+__decorate([
+    observable
+], GridProBeta.prototype, "sideBar", void 0);
 __decorate([
     observable
 ], GridProBeta.prototype, "customErrorHandlerTemplate", void 0);

package/dist/esm/grid-pro.styles.js

@@ -1,8 +1,10 @@
 import { alertFlashPhaseProperty } from '@genesislcap/foundation-ui';
 import { css } from '@microsoft/fast-element';
+import { columnsToolPanelStyles } from './columns-tool-panel/columns-tool-panel.styles';
 import { errorHandlerDialogStyles } from './datasource/error-handler.dialog';
 import { ROW_MATCH_ALERT_CELL_CLASS, ROW_MATCH_ALERT_CLASS } from './datasource/row-match.classes';
 import { agExternalStockStyles } from './external';
+import { gridProSideBarHostStyles } from './side-bar/side-bar.styles';
 /**
  * Workaround for an AG Grid (v36, still present in v36.1.0) drag-ghost positioning bug in
  * shadow DOM. The row-drag "N rows" ghost is appended to the grid's containing shadow root
@@ -86,6 +88,8 @@ export const foundationGridProStyles = css `
   ${agExternalStockStyles}
   ${errorHandlerDialogStyles}
   ${agDragGhostShadowDomStyles}
+  ${gridProSideBarHostStyles}
+  ${columnsToolPanelStyles}
   ${rowMatchAlertStyles}
   :host {
     --datasource-error-background-color: var(--neutral-layer-4);

package/dist/esm/grid-pro.template.js

@@ -1,4 +1,5 @@
-import { html, ref } from '@microsoft/fast-element';
+import { html, ref, when } from '@microsoft/fast-element';
+import { classNames } from '@microsoft/fast-web-utilities';
 import { getErrorHandlerDialogTemplate } from './datasource/error-handler.dialog';
 /**
  * Get a Design System prefixed The Grid Pro template.
@@ -8,10 +9,26 @@ import { getErrorHandlerDialogTemplate } from './datasource/error-handler.dialog
  */
 export const getGridProTemplate = (prefix = 'foundation') => html `
   <template>
-    <span part="grid" data-ag-theme-mode=${(x) => x.themeMode} class="${(x) => x.classNames}">
+    <span
+      part="grid"
+      data-ag-theme-mode=${(x) => x.themeMode}
+      class="${(x) => classNames(x.classNames, ['with-side-bar', !!x.withSideBar])}"
+    >
       <slot name="grid" ${ref('gridSlot')}></slot>
       <slot></slot>
     </span>
+    ${when((x) => !!x.withSideBar, html `
+        <grid-pro-side-bar
+          class="grid-pro-side-bar"
+          part="side-bar"
+          data-test-id="grid-pro-side-bar"
+          prefix="${() => prefix}"
+          ${ref('sideBar')}
+          :tools="${(x) => x.resolvedSideBarTools}"
+          :gridApi="${(x) => x.gridApi}"
+          :columnDragBridge="${(x) => x.getColumnDragBridge()}"
+        ></grid-pro-side-bar>
+      `)}
     ${(x) => x.customErrorHandlerTemplate
     ? x.customErrorHandlerTemplate(prefix, x.gridErrorItems.filter(({ type }) => type === 'datasource'))
     : getErrorHandlerDialogTemplate(prefix, x.gridErrorItems.filter(({ type }) => type === 'datasource'))}

package/dist/esm/grid-pro.types.js

@@ -152,6 +152,17 @@ export var GridProStatusBarTypes;
     GridProStatusBarTypes["reload"] = "reload";
     GridProStatusBarTypes["rowCount"] = "rowCount";
 })(GridProStatusBarTypes || (GridProStatusBarTypes = {}));
+/**
+ * Custom Grid Pro tool panel component names.
+ * @public
+ * @remarks
+ * Registered for AG `sideBar` hosts (`SideBarModule` still required for that path).
+ * Prefer `with-side-bar` on {@link GridProBeta} for a Community-only columns UI.
+ */
+export var GridProToolPanelTypes;
+(function (GridProToolPanelTypes) {
+    GridProToolPanelTypes["columns"] = "gridProColumnsToolPanel";
+})(GridProToolPanelTypes || (GridProToolPanelTypes = {}));
 /**
  * Event fired when grid is ready
  * @public

package/dist/esm/index.js

@@ -2,6 +2,7 @@ export * from './cell';
 export * from './cell-renderers';
 export * from './cell-editors';
 export * from './column';
+export * from './columns-tool-panel';
 export * from './datasource';
 export * from './external';
 export * from './grid-components';
@@ -13,6 +14,7 @@ export * from './grid-pro';
 export * from './grid-pro-genesis-datasource';
 export * from './multicolumn-dropdown';
 export * from './row-alert';
+export * from './side-bar';
 export * from './state-persistence';
 export * from './status-bar-components';
 export * from './style';

package/dist/esm/side-bar/index.js

@@ -0,0 +1,5 @@
+export * from './side-bar.types';
+export * from './side-bar.tools';
+export * from './side-bar.styles';
+export * from './side-bar.template';
+export * from './side-bar';