@genesislcap/grid-pro 15.13.1 → 15.14.0-FUI-2601.2

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

@@ -11,17 +11,19 @@ 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 { 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,
@@ -91,6 +93,30 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
             this.gridApi.setGridOption('rowData', rowData);
         }
     }
+    /**
+     * The slot ref binds asynchronously, and the queued `initGrid` skips any run that beats it. FAST
+     * calls this the moment the ref lands, so a grid whose options were set BEFORE the view bound
+     * still initialises rather than staying blank — closing the one gap that skip would leave.
+     *
+     * Guarded on `agGridOptions` as well: without options there is nothing to build, and AG Grid
+     * would only log "no gridOptions provided to the grid". Those arrive via a grid-options change,
+     * which re-runs `initGrid` on its own.
+     */
+    gridSlotChanged() {
+        if (this.gridSlot && !this.initialised && this.agGridOptions) {
+            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) {
@@ -154,6 +180,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 = [];
@@ -355,6 +390,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
@@ -666,6 +702,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);
     }
@@ -998,6 +1035,7 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
                 this.restoreColumnState();
                 this.restoreCachedFilterConfig();
                 this.debouncedColumnAutosize();
+                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.
@@ -1048,6 +1086,40 @@ 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);
+        }
+    }
+    applyCommunitySideBarOptions() {
+        if (!this.agGridOptions) {
+            return;
+        }
+        const toolPanels = resolveAgSideBarToolPanels(this.resolvedSideBarTools);
+        this.agGridOptions.sideBar = toolPanels.length
+            ? {
+                toolPanels,
+                hiddenByDefault: true,
+                hideButtons: true,
+            }
+            : undefined;
+        if (this.gridApi && typeof this.gridApi.setGridOption === 'function') {
+            this.gridApi.setGridOption('sideBar', this.agGridOptions.sideBar);
+        }
+    }
+    /**
+     * 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.
@@ -1062,7 +1134,12 @@ export class GridProBeta extends LifecycleMixin(FoundationElement) {
     }
     initGrid() {
         DOM.queueUpdate(() => {
-            if (this.disposed || !this.isConnected) {
+            // `gridSlot` is a template ref, so it is undefined until the view binds, and this task runs
+            // on the shared update queue — an options change can queue it ahead of that binding. Reading
+            // `.firstChild` off it unguarded then throws from INSIDE a queued task, which the runner can
+            // only report against whichever test is running. Same guard as `grid-pro.ts`; both callers
+            // re-run on the next grid-options change, so skipping strands nothing.
+            if (this.disposed || !this.isConnected || !this.gridSlot) {
                 return;
             }
             if (this.initialised) {
@@ -1360,6 +1437,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.js

@@ -59,6 +59,20 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
         this.classNames = classNames(agThemeTokenMapClassname(newValue), newValue);
         this.insertFontFace(newValue);
     }
+    /**
+     * The slot ref binds asynchronously, and the queued `initGrid` skips any run that beats it. FAST
+     * calls this the moment the ref lands, so a grid whose options were set BEFORE the view bound
+     * still initialises rather than staying blank — closing the one gap that skip would leave.
+     *
+     * Guarded on `agGridOptions` as well: without options there is nothing to build, and AG Grid
+     * would only log "no gridOptions provided to the grid". Those arrive via a grid-options change,
+     * which re-runs `initGrid` on its own.
+     */
+    gridSlotChanged() {
+        if (this.gridSlot && !this.initialised && this.agGridOptions) {
+            this.initGrid();
+        }
+    }
     getfilterModel() {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.persistFilterModelKey) {
@@ -1092,7 +1106,16 @@ export class GridPro extends LifecycleMixin(FoundationElement) {
     }
     initGrid() {
         DOM.queueUpdate(() => {
-            if (this.disposed || !this.isConnected) {
+            // `gridSlot` belongs in this readiness check, not just `disposed`/`isConnected`: it is a
+            // template ref, so it is undefined until the view binds, and this task runs on the shared
+            // update queue — an options change can queue it ahead of the binding that fills the ref.
+            // Every other reader in this file already guards it; these two lines did not, so that
+            // ordering threw `Cannot read properties of undefined (reading 'firstChild')` from INSIDE a
+            // queued task. Such a throw is not attributable to whatever caused it: web-test-runner
+            // reports it as an uncaught page exception against whichever test happens to be running,
+            // which is how it surfaced — as an unrelated datasource test failing only under CI load.
+            // Skipping is safe because both callers re-run on the next grid-options change.
+            if (this.disposed || !this.isConnected || !this.gridSlot) {
                 return;
             }
             if (this.initialised) {

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

@@ -1,6 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { errorHandlerDialogStyles } from './datasource/error-handler.dialog';
+import { columnsToolPanelStyles } from './columns-tool-panel/columns-tool-panel.styles';
 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
@@ -39,6 +41,8 @@ export const foundationGridProStyles = css `
   ${agExternalStockStyles}
   ${errorHandlerDialogStyles}
   ${agDragGhostShadowDomStyles}
+  ${gridProSideBarHostStyles}
+  ${columnsToolPanelStyles}
   :host {
     --datasource-error-background-color: var(--neutral-layer-4);
     --datasource-error-background-opacity: 0.5;

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,25 @@ 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}"
+        ></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';
@@ -12,6 +13,7 @@ export * from './grid-pro.types';
 export * from './grid-pro';
 export * from './grid-pro-genesis-datasource';
 export * from './multicolumn-dropdown';
+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';

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

@@ -0,0 +1,166 @@
+import { __decorate } from "tslib";
+import { insertDocumentCSSRule, LifecycleMixin } from '@genesislcap/foundation-utils';
+import { attr, customElement, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { agGridAlpineFontFace } from '../external/fonts';
+import { agThemeFontsId } from '../grid-pro.types';
+import { gridProSideBarChromeStyles } from './side-bar.styles';
+import { getGridProSideBarTemplate } from './side-bar.template';
+import { GRID_PRO_DEFAULT_SIDE_BAR_TOOLS } from './side-bar.tools';
+import { GridProSideBarTool, initLocalSideBarPanel, } from './side-bar.types';
+/**
+ * The Grid Pro Side Bar element.
+ * @remarks No shadow root — chrome stays in Grid Pro's tree so host CSS still applies.
+ * @public
+ * @remarks
+ * HTML Element: \<grid-pro-side-bar\>
+ */
+let GridProSideBar = class GridProSideBar extends LifecycleMixin(FoundationElement) {
+    constructor() {
+        super(...arguments);
+        this.prefix = 'foundation';
+        this.tools = GRID_PRO_DEFAULT_SIDE_BAR_TOOLS;
+        this.open = false;
+        this.activeTool = GridProSideBarTool.columns;
+        this.mountedPanels = new Map();
+    }
+    prefixChanged() {
+        if (this.$fastController) {
+            this.$fastController.template = getGridProSideBarTemplate(this.prefix || 'foundation');
+        }
+    }
+    toolsChanged() {
+        var _a, _b, _c, _d;
+        if (!((_a = this.tools) === null || _a === void 0 ? void 0 : _a.some((t) => t.id === this.activeTool))) {
+            this.activeTool = (_d = (_c = (_b = this.tools) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : GridProSideBarTool.columns;
+        }
+        this.mountActiveTool();
+    }
+    gridApiChanged() {
+        this.mountActiveTool();
+    }
+    panelHostChanged() {
+        this.mountActiveTool();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        insertDocumentCSSRule(agGridAlpineFontFace, agThemeFontsId('alpine'));
+    }
+    disconnectedCallback() {
+        this.destroyTools();
+        super.disconnectedCallback();
+    }
+    /**
+     * Selects a tool. Clicking the active open tool collapses the panel.
+     * @public
+     */
+    selectTool(tool) {
+        var _a;
+        if (!((_a = this.tools) === null || _a === void 0 ? void 0 : _a.some((t) => t.id === tool))) {
+            return;
+        }
+        if (this.activeTool === tool && this.open) {
+            this.open = false;
+            this.closeAgToolPanel();
+            return;
+        }
+        this.activeTool = tool;
+        this.open = true;
+        this.mountActiveTool();
+    }
+    /**
+     * @internal
+     */
+    handleToolClick(id) {
+        this.selectTool(id);
+    }
+    /**
+     * @public
+     */
+    mountActiveTool() {
+        var _a, _b, _c, _d, _e;
+        if (!this.gridApi || !this.panelHost) {
+            return;
+        }
+        if (!this.open) {
+            this.closeAgToolPanel();
+            return;
+        }
+        const def = (_a = this.tools) === null || _a === void 0 ? void 0 : _a.find((t) => t.id === this.activeTool);
+        if (!def) {
+            this.panelHost.replaceChildren();
+            return;
+        }
+        if (def.createPanel) {
+            this.closeAgToolPanel();
+            let mounted = this.mountedPanels.get(def.id);
+            if (!mounted) {
+                const panel = initLocalSideBarPanel(def.createPanel(), Object.assign({ api: this.gridApi }, ((_b = def.toolPanelParams) !== null && _b !== void 0 ? _b : {})));
+                mounted = { defId: def.id, panel };
+                this.mountedPanels.set(def.id, mounted);
+            }
+            const gui = mounted.panel.getGui();
+            if (gui instanceof HTMLElement &&
+                gui.tagName.toLowerCase() === 'grid-pro-columns-tool-panel') {
+                gui.setAttribute('prefix', this.prefix || 'foundation');
+            }
+            this.panelHost.replaceChildren(gui);
+            (_d = (_c = mounted.panel).refresh) === null || _d === void 0 ? void 0 : _d.call(_c, Object.assign({ api: this.gridApi }, ((_e = def.toolPanelParams) !== null && _e !== void 0 ? _e : {})));
+            return;
+        }
+        if (def.toolPanel != null) {
+            this.panelHost.replaceChildren();
+            if (typeof this.gridApi.openToolPanel === 'function') {
+                this.gridApi.openToolPanel(def.id, this.panelHost);
+            }
+            return;
+        }
+        this.panelHost.replaceChildren();
+    }
+    /**
+     * @public
+     */
+    destroyTools() {
+        var _a, _b, _c, _d;
+        this.closeAgToolPanel();
+        for (const mounted of this.mountedPanels.values()) {
+            (_a = mounted.destroy) === null || _a === void 0 ? void 0 : _a.call(mounted);
+            (_c = (_b = mounted.panel).destroy) === null || _c === void 0 ? void 0 : _c.call(_b);
+        }
+        this.mountedPanels.clear();
+        (_d = this.panelHost) === null || _d === void 0 ? void 0 : _d.replaceChildren();
+    }
+    closeAgToolPanel() {
+        var _a;
+        if (typeof ((_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.closeToolPanel) === 'function') {
+            this.gridApi.closeToolPanel();
+        }
+    }
+};
+__decorate([
+    attr
+], GridProSideBar.prototype, "prefix", void 0);
+__decorate([
+    observable
+], GridProSideBar.prototype, "tools", void 0);
+__decorate([
+    observable
+], GridProSideBar.prototype, "gridApi", void 0);
+__decorate([
+    observable
+], GridProSideBar.prototype, "open", void 0);
+__decorate([
+    observable
+], GridProSideBar.prototype, "activeTool", void 0);
+__decorate([
+    observable
+], GridProSideBar.prototype, "panelHost", void 0);
+GridProSideBar = __decorate([
+    customElement({
+        name: 'grid-pro-side-bar',
+        template: getGridProSideBarTemplate(),
+        styles: gridProSideBarChromeStyles,
+        shadowOptions: null,
+    })
+], GridProSideBar);
+export { GridProSideBar };

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

@@ -0,0 +1,154 @@
+import { css } from '@microsoft/fast-element';
+/**
+ * Layout on the Grid Pro host when `with-side-bar` is set.
+ * @public
+ */
+export const gridProSideBarHostStyles = css `
+  :host([with-side-bar]) {
+    display: flex;
+    flex-direction: row;
+    min-height: 0;
+  }
+
+  :host([with-side-bar]) [part='grid'] {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+  }
+`;
+/**
+ * Chrome for {@link GridProSideBar}. Uses class selectors (no `:host`) because the
+ * element has no shadow — styles land on Grid Pro's shadow root.
+ * @public
+ */
+export const gridProSideBarChromeStyles = css `
+  .grid-pro-side-bar {
+    --ag-icon-font-family: agGridAlpine;
+    --ag-icon-size: 16px;
+    display: flex;
+    flex-direction: row-reverse;
+    flex: 0 0 auto;
+    min-height: 0;
+    height: 100%;
+    z-index: 1;
+    border-left: 1px solid var(--neutral-stroke-divider-rest, var(--ag-border-color));
+    background: var(--neutral-layer-2, var(--ag-control-panel-background-color));
+    color: var(--neutral-foreground-rest, var(--ag-foreground-color));
+  }
+
+  .grid-pro-side-bar-buttons {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 auto;
+    border-left: 1px solid var(--neutral-stroke-divider-rest, var(--ag-border-color));
+  }
+
+  .grid-pro-side-bar-button {
+    margin: 0;
+    height: auto !important;
+    min-height: 0;
+    border-bottom: 1px solid var(--neutral-stroke-divider-rest, var(--ag-border-color));
+  }
+
+  .grid-pro-side-bar-button::part(control) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 8px;
+    border: 0;
+    border-radius: 0;
+    min-width: 0;
+    min-height: 0;
+    height: auto;
+    white-space: nowrap;
+  }
+
+  .grid-pro-side-bar-button::part(content) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .grid-pro-side-bar-button-icon {
+    display: block;
+    font-family: 'agGridAlpine';
+    font-size: var(--ag-icon-size, 16px);
+    line-height: var(--ag-icon-size, 16px);
+    font-style: normal;
+    font-weight: normal;
+    speak: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .grid-pro-side-bar-button-icon::before {
+    font-family: 'agGridAlpine';
+    background-color: transparent;
+  }
+
+  .grid-pro-side-bar-button-icon.ag-icon-columns::before {
+    content: '\\f10a';
+  }
+
+  .grid-pro-side-bar-button-icon.ag-icon-filter::before {
+    content: '\\f114';
+  }
+
+  .grid-pro-side-bar-button-icon[hidden] {
+    display: none;
+  }
+
+  .grid-pro-side-bar-button-label {
+    writing-mode: vertical-rl;
+  }
+
+  .grid-pro-side-bar-button:hover::part(control),
+  .grid-pro-side-bar-button[aria-selected='true']::part(control) {
+    background: var(--neutral-fill-hover, rgba(255, 255, 255, 0.06));
+  }
+
+  .grid-pro-side-bar-button:hover::part(content)::before {
+    background: transparent;
+  }
+
+  .grid-pro-side-bar-panel {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 auto;
+    width: 260px;
+    max-width: 40vw;
+    min-height: 0;
+  }
+
+  .grid-pro-side-bar-panel[hidden] {
+    display: none;
+  }
+
+  .grid-pro-side-bar-panel-host {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .grid-pro-side-bar-panel-host .ag-filter-toolpanel,
+  .grid-pro-side-bar-panel-host .ag-tool-panel-wrapper {
+    height: 100%;
+    width: 100%;
+  }
+
+  .grid-pro-columns-checkbox {
+    margin: 0;
+
+    --design-unit: 3;
+  }
+`;
+/**
+ * Host + chrome. Prefer {@link gridProSideBarHostStyles} on Grid Pro and
+ * {@link gridProSideBarChromeStyles} on the side-bar element.
+ * @public
+ */
+export const gridProSideBarStyles = css `
+  ${gridProSideBarHostStyles}
+  ${gridProSideBarChromeStyles}
+`;

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

@@ -0,0 +1,48 @@
+import { html, ref, repeat } from '@microsoft/fast-element';
+/**
+ * Community side bar chrome. Prefix selects DS buttons (`rapid-button`, `zero-button`).
+ * @public
+ */
+export const getGridProSideBarTemplate = (prefix = 'foundation') => {
+    const buttonTag = `${prefix}-button`;
+    return html `
+    <template>
+      <div class="grid-pro-side-bar-buttons" role="tablist" aria-label="Grid tools">
+        ${repeat((x) => x.tools, html `
+            <${buttonTag}
+              appearance="lightweight"
+              role="tab"
+              class="grid-pro-side-bar-button"
+              data-test-id="${(x) => `grid-pro-side-bar-tool-${x.id}`}"
+              aria-selected="${(x, c) => c.parent.open &&
+        c.parent.activeTool === x.id}"
+              @click="${(x, c) => c.parent.handleToolClick(x.id)}"
+            >
+              <span
+                class="ag-icon grid-pro-side-bar-button-icon ${(x) => x.iconKey ? `ag-icon-${x.iconKey}` : ''}"
+                aria-hidden="true"
+                ?hidden="${(x) => !x.iconKey}"
+              ></span>
+              <span class="grid-pro-side-bar-button-label">${(x) => x.label}</span>
+            </${buttonTag}>
+          `)}
+      </div>
+      <div
+        class="grid-pro-side-bar-panel"
+        part="side-bar-panel"
+        data-test-id="grid-pro-side-bar-panel"
+        ?hidden="${(x) => !x.open}"
+      >
+        <div
+          class="grid-pro-side-bar-panel-host"
+          data-test-id="grid-pro-side-bar-panel-host"
+          ${ref('panelHost')}
+        ></div>
+      </div>
+    </template>
+  `;
+};
+/**
+ * @public
+ */
+export const gridProSideBarTemplate = getGridProSideBarTemplate();

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

@@ -0,0 +1,19 @@
+import { ColumnsToolPanel } from '../columns-tool-panel';
+import { GridProSideBarTool } from './side-bar.types';
+/**
+ * Built-in Columns picker (Community, no AG SideBarModule).
+ * @public
+ */
+export const gridProSideBarColumnsTool = {
+    id: GridProSideBarTool.columns,
+    label: 'Columns',
+    iconKey: 'columns',
+    createPanel: () => new ColumnsToolPanel(),
+};
+/**
+ * Default tools when `with-side-bar` is set and `sideBarTools` is not provided.
+ * @public
+ */
+export const GRID_PRO_DEFAULT_SIDE_BAR_TOOLS = [
+    gridProSideBarColumnsTool,
+];