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

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

@@ -0,0 +1,500 @@
+import { __decorate } from "tslib";
+import { DOM, attr, customElement, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { bindAgColumnPickerDrag, } from './columns-tool-panel-ag-drag';
+import { columnsToolPanelStyles as styles } from './columns-tool-panel.styles';
+import { columnsToolPanelTemplate } from './columns-tool-panel.template';
+import { applyVisibleOrder, getPickerItems, GRID_PRO_COLUMNS_TOOL_PANEL_SORT_DEFAULT, orderColumnsForPicker, partitionPickerItems, reorderVisibleIds, resolveColumnsToolPanelSort, } from './columns-tool-panel.utils';
+import { resolveColumnDragBridgeDirect, resolveColumnDragBridgeFromApi, } from './grid-pro-column-drag-bridge';
+/** Max animation-frame retries while waiting for AG column-drag bridge beans. */
+const DRAG_BRIDGE_RETRY_MAX_ATTEMPTS = 30;
+/**
+ * Custom columns tool panel. Replaces AG Grid Enterprise `agColumnsToolPanel`.
+ *
+ * @public
+ * @remarks
+ * Registered as `gridProColumnsToolPanel` (`GridProToolPanelTypes.columns`).
+ * `resolveGridProSideBar` rewrites `sideBar: ['columns']` / `agColumnsToolPanel` to this
+ * component when using AG's Enterprise `SideBarModule`.
+ *
+ * Prefer mounting via `with-side-bar` on {@link GridProBeta} for a Community-only UI
+ * that does not register any AG Enterprise modules.
+ *
+ * Layout: select-all + search → column list. Ordering via `toolPanelParams.sort`
+ * (`selected-first` default, or `ag-grid`). Checkboxes toggle visibility via
+ * `api.setColumnsVisible`; drag handles on hidden rows use AG native DnD onto the grid
+ * (`allowDragFromColumnsToolPanel`); visible rows reorder inside the picker via HTML5 drag.
+ *
+ * HTML Element: \<grid-pro-columns-tool-panel\>
+ */
+let ColumnsToolPanel = class ColumnsToolPanel extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.prefix = 'foundation';
+        /** From `toolPanelParams.sort`; default `selected-first`. */
+        this.sort = GRID_PRO_COLUMNS_TOOL_PANEL_SORT_DEFAULT;
+        /** Source colId while a visible-row drag is in progress. */
+        this.dragColId = null;
+        /** Row currently showing drag-over highlight (avoid observable updates mid-drag). */
+        this.dragOverElement = null;
+        /** Cancels row drag listeners when the selected list re-renders. */
+        this.dragBindingAbort = null;
+        /** AG ToolPanel drag sources registered on hidden-row handles (grid drop). */
+        this.agDragBindings = [];
+        /** Shared DnD bridge from Grid Pro (`toolPanelParams` / context). */
+        this.columnDragBridge = null;
+        /** Retries `bindRowDrag` until the DnD bridge is populated. */
+        this.dragBridgeRetryId = 0;
+        /** Optimistic visibility while the grid applies setColumnsVisible. */
+        this.pendingVisibility = new Map();
+        this.search = '';
+        this.selectedItems = [];
+        this.unselectedItems = [];
+        /** Master checkbox checked when every toggleable column is visible. */
+        this.selectAllChecked = false;
+        /** Master checkbox mixed when some (but not all) toggleable columns are visible. */
+        this.selectAllIndeterminate = false;
+        /** Stable listener refs so `destroy` can remove the same functions `init` added. */
+        this.boundRefresh = () => this.refresh();
+    }
+    /** Drag reorder / grid drop disabled while search filter is active. */
+    get canDrag() {
+        return !this.search.trim();
+    }
+    /** Handle is draggable onto the grid (hidden columns, or all when using ag-grid sort). */
+    canDragToGrid(item) {
+        if (!this.canDrag || item.lockVisible) {
+            return false;
+        }
+        if (this.sort === 'ag-grid') {
+            return true;
+        }
+        return !item.visible;
+    }
+    /** Columns in the current (search-filtered) picker lists that can be toggled. */
+    get toggleableItems() {
+        return [...this.selectedItems, ...this.unselectedItems].filter((item) => !item.lockVisible);
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        const sideBarPrefix = (_a = this.closest('grid-pro-side-bar')) === null || _a === void 0 ? void 0 : _a.getAttribute('prefix');
+        if (sideBarPrefix && sideBarPrefix !== this.prefix) {
+            this.prefix = sideBarPrefix;
+        }
+        this.classList.add('grid-pro-columns-tool-panel');
+        this.setAttribute('data-test-id', 'grid-pro-columns-tool-panel');
+        this.refresh();
+    }
+    /**
+     * AG Grid `IToolPanelComp` entry. Subscribes to column events so the picker
+     * stays in sync with header menu / API visibility changes.
+     */
+    init(params) {
+        var _a;
+        this.params = params;
+        this.api = params.api;
+        this.sort = resolveColumnsToolPanelSort(params.sort);
+        this.columnDragBridge = (_a = params.columnDragBridge) !== null && _a !== void 0 ? _a : null;
+        this.api.addEventListener('columnVisible', this.boundRefresh);
+        this.api.addEventListener('columnMoved', this.boundRefresh);
+        this.api.addEventListener('newColumnsLoaded', this.boundRefresh);
+        this.api.addEventListener('displayedColumnsChanged', this.boundRefresh);
+        this.refresh();
+    }
+    /**
+     * Rebuilds picker lists from current grid column state.
+     * Ordering follows `toolPanelParams.sort` (`selected-first` | `ag-grid`).
+     */
+    refresh(params) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if ((params === null || params === void 0 ? void 0 : params.sort) != null) {
+            this.sort = resolveColumnsToolPanelSort(params.sort);
+        }
+        if ((params === null || params === void 0 ? void 0 : params.columnDragBridge) != null) {
+            this.columnDragBridge = params.columnDragBridge;
+        }
+        if (!this.api) {
+            return;
+        }
+        const activeElement = document.activeElement;
+        const activeTestId = activeElement && this.contains(activeElement)
+            ? activeElement.getAttribute('data-test-id')
+            : null;
+        const displayed = (_c = (_b = (_a = this.api).getAllDisplayedColumns) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : [];
+        const all = (_f = (_e = (_d = this.api).getColumns) === null || _e === void 0 ? void 0 : _e.call(_d)) !== null && _f !== void 0 ? _f : [];
+        const columnState = (_j = (_h = (_g = this.api).getColumnState) === null || _h === void 0 ? void 0 : _h.call(_g)) !== null && _j !== void 0 ? _j : [];
+        const ordered = orderColumnsForPicker(displayed, all, this.sort, columnState);
+        const items = this.applyPendingVisibility(getPickerItems(ordered));
+        const { selected, unselected } = partitionPickerItems(items, this.search, this.sort);
+        this.selectedItems = selected;
+        this.unselectedItems = unselected;
+        this.syncSelectAllState();
+        if (activeTestId) {
+            DOM.queueUpdate(() => {
+                var _a;
+                (_a = this.querySelector(`[data-test-id="${activeTestId}"]`)) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        DOM.queueUpdate(() => {
+            this.syncAgHeaderHeightVar();
+            this.applySelectAllCheckboxState();
+            this.bindRowDrag();
+        });
+    }
+    /**
+     * AG Columns uses `height: var(--ag-header-height)` on `.ag-column-select-header` /
+     * `.ag-pivot-mode-panel`. That var lives on the grid root (sibling of our side bar),
+     * so copy it onto this panel for the same alignment without measuring DOM height.
+     */
+    syncAgHeaderHeightVar() {
+        var _a, _b;
+        const gridHost = this.closest('rapid-grid-pro, zero-grid-pro, foundation-grid-pro, grid-pro');
+        const root = (_b = (_a = gridHost === null || gridHost === void 0 ? void 0 : gridHost.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part="grid"] .ag-root-wrapper, [part="grid"] .ag-root, [part="grid"]')) !== null && _b !== void 0 ? _b : null;
+        if (!root) {
+            return;
+        }
+        const style = getComputedStyle(root);
+        for (const name of [
+            '--ag-header-height',
+            '--ag-grid-size',
+            '--ag-widget-container-horizontal-padding',
+        ]) {
+            const value = style.getPropertyValue(name).trim();
+            if (value) {
+                this.style.setProperty(name, value);
+            }
+        }
+    }
+    syncSelectAllState() {
+        const items = this.toggleableItems;
+        const visibleCount = items.filter((item) => item.visible).length;
+        this.selectAllChecked = items.length > 0 && visibleCount === items.length;
+        this.selectAllIndeterminate = visibleCount > 0 && visibleCount < items.length;
+    }
+    /**
+     * FAST checkbox `indeterminate` is an observable property (not a boolean attr), and its
+     * click handler clears it — re-apply after render so mixed state stays visible.
+     */
+    applySelectAllCheckboxState() {
+        const selectAll = this.querySelector('[data-test-id="grid-pro-columns-select-all"]');
+        if (!selectAll) {
+            return;
+        }
+        selectAll.checked = this.selectAllChecked;
+        selectAll.indeterminate = this.selectAllIndeterminate;
+        selectAll.setAttribute('aria-checked', this.selectAllIndeterminate ? 'mixed' : this.selectAllChecked ? 'true' : 'false');
+    }
+    applyPendingVisibility(items) {
+        if (!this.pendingVisibility.size) {
+            return items;
+        }
+        return items.map((item) => {
+            const pending = this.pendingVisibility.get(item.colId);
+            if (pending === undefined) {
+                return item;
+            }
+            if (item.visible === pending) {
+                this.pendingVisibility.delete(item.colId);
+            }
+            return Object.assign(Object.assign({}, item), { visible: pending });
+        });
+    }
+    resolveDragBridge() {
+        var _a;
+        return ((_a = resolveColumnDragBridgeDirect(this.columnDragBridge)) !== null && _a !== void 0 ? _a : resolveColumnDragBridgeFromApi(this.api));
+    }
+    /**
+     * Visible rows: HTML5 reorder inside the picker.
+     * Hidden rows (or all rows when `sort=ag-grid`): AG ToolPanel drag onto the grid header.
+     */
+    bindRowDrag() {
+        var _a;
+        (_a = this.dragBindingAbort) === null || _a === void 0 ? void 0 : _a.abort();
+        this.dragBindingAbort = null;
+        for (const binding of this.agDragBindings) {
+            binding.remove();
+        }
+        this.agDragBindings = [];
+        if (!this.canDrag || !this.api) {
+            return;
+        }
+        const bridge = this.resolveDragBridge();
+        const rows = this.querySelectorAll('.grid-pro-columns-item');
+        if (!rows.length) {
+            return;
+        }
+        const abort = new AbortController();
+        this.dragBindingAbort = abort;
+        const { signal } = abort;
+        let needsBridgeRetry = false;
+        let boundGridDrag = false;
+        rows.forEach((row) => {
+            const colId = row.dataset.colId;
+            const handle = row.querySelector('.grid-pro-columns-handle');
+            if (!colId || !handle) {
+                return;
+            }
+            handle.classList.remove('grid-pro-columns-handle--grid-drag', 'grid-pro-columns-handle--panel-drag');
+            handle.removeAttribute('draggable');
+            const item = [...this.selectedItems, ...this.unselectedItems].find((i) => i.colId === colId);
+            if (!item) {
+                return;
+            }
+            const dragToGrid = this.canDragToGrid(item);
+            const reorderInPanel = this.sort === 'selected-first' &&
+                item.visible &&
+                !row.classList.contains('grid-pro-columns-item--unselected');
+            if (dragToGrid) {
+                if (bridge) {
+                    const binding = bindAgColumnPickerDrag(bridge, this.api, handle, colId, item.headerName);
+                    if (binding) {
+                        boundGridDrag = true;
+                        this.agDragBindings.push(binding);
+                        handle.classList.add('grid-pro-columns-handle--grid-drag');
+                        if (!reorderInPanel) {
+                            return;
+                        }
+                    }
+                }
+                else {
+                    needsBridgeRetry = true;
+                }
+            }
+            if (!reorderInPanel) {
+                return;
+            }
+            handle.draggable = true;
+            handle.classList.add('grid-pro-columns-handle--panel-drag');
+            handle.addEventListener('dragstart', (event) => {
+                this.onDragStart(event, colId, row);
+            }, { signal });
+            handle.addEventListener('dragend', () => this.onDragEnd(), { signal });
+            row.addEventListener('dragover', (event) => {
+                this.onDragOver(event, row);
+            }, { signal });
+            row.addEventListener('dragleave', (event) => {
+                this.onDragLeave(event, row);
+            }, { signal });
+            row.addEventListener('drop', (event) => {
+                this.onDrop(event, colId);
+            }, { signal });
+        });
+        if (needsBridgeRetry && !boundGridDrag) {
+            this.scheduleDragBridgeRetry();
+        }
+    }
+    scheduleDragBridgeRetry(attempt = 0) {
+        if (attempt > DRAG_BRIDGE_RETRY_MAX_ATTEMPTS || !this.api || !this.canDrag) {
+            return;
+        }
+        this.dragBridgeRetryId += 1;
+        const retryId = this.dragBridgeRetryId;
+        requestAnimationFrame(() => {
+            if (retryId !== this.dragBridgeRetryId || !this.isConnected) {
+                return;
+            }
+            if (this.resolveDragBridge()) {
+                this.bindRowDrag();
+                return;
+            }
+            this.scheduleDragBridgeRetry(attempt + 1);
+        });
+    }
+    /** Root element AG Grid mounts into the sidebar. */
+    getGui() {
+        return this;
+    }
+    destroy() {
+        var _a;
+        this.dragBridgeRetryId += 1;
+        (_a = this.dragBindingAbort) === null || _a === void 0 ? void 0 : _a.abort();
+        this.dragBindingAbort = null;
+        for (const binding of this.agDragBindings) {
+            binding.remove();
+        }
+        this.agDragBindings = [];
+        this.pendingVisibility.clear();
+        if (this.api) {
+            this.api.removeEventListener('columnVisible', this.boundRefresh);
+            this.api.removeEventListener('columnMoved', this.boundRefresh);
+            this.api.removeEventListener('newColumnsLoaded', this.boundRefresh);
+            this.api.removeEventListener('displayedColumnsChanged', this.boundRefresh);
+        }
+        this.api = null;
+    }
+    /**
+     * @internal
+     */
+    onSearchInput(value) {
+        this.search = value;
+        this.refresh();
+    }
+    /**
+     * @internal
+     */
+    onSelectAllClick(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        if (!this.api) {
+            return;
+        }
+        const items = this.toggleableItems;
+        if (!items.length) {
+            return;
+        }
+        const makeVisible = !this.selectAllChecked;
+        const ids = items.filter((item) => item.visible !== makeVisible).map((item) => item.colId);
+        if (!ids.length) {
+            return;
+        }
+        for (const id of ids) {
+            this.pendingVisibility.set(id, makeVisible);
+        }
+        this.api.setColumnsVisible(ids, makeVisible);
+        this.refresh();
+    }
+    /**
+     * @internal
+     */
+    onCheckboxClick(item, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.onVisibilityChange(item, !item.visible);
+    }
+    /**
+     * @internal
+     */
+    onVisibilityChange(item, visible) {
+        if (item.lockVisible || !this.api || item.visible === visible) {
+            return;
+        }
+        this.pendingVisibility.set(item.colId, visible);
+        this.api.setColumnsVisible([item.colId], visible);
+        this.refresh();
+    }
+    /**
+     * @internal
+     */
+    onDragStart(event, colId, row) {
+        if (!this.canDrag) {
+            event.preventDefault();
+            return;
+        }
+        this.dragColId = colId;
+        if (event.dataTransfer) {
+            event.dataTransfer.setData('text/plain', colId);
+            event.dataTransfer.effectAllowed = 'move';
+        }
+        (row !== null && row !== void 0 ? row : event.currentTarget).classList.add('dragging');
+    }
+    /**
+     * @internal
+     */
+    onDragEnd() {
+        this.dragColId = null;
+        this.clearDragOverHighlight();
+        this.querySelectorAll('.grid-pro-columns-item.dragging').forEach((row) => {
+            row.classList.remove('dragging');
+        });
+    }
+    /**
+     * @internal
+     */
+    onDragOver(event, row) {
+        var _a;
+        if (!this.canDrag) {
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+        }
+        if (this.dragOverElement !== row) {
+            (_a = this.dragOverElement) === null || _a === void 0 ? void 0 : _a.classList.remove('drag-over');
+            this.dragOverElement = row;
+            row.classList.add('drag-over');
+        }
+    }
+    /**
+     * @internal
+     */
+    onDragLeave(event, row) {
+        if (this.dragOverElement === row && !row.contains(event.relatedTarget)) {
+            row.classList.remove('drag-over');
+            this.dragOverElement = null;
+        }
+    }
+    /**
+     * @internal
+     */
+    onDrop(event, colId) {
+        var _a;
+        event.preventDefault();
+        this.clearDragOverHighlight();
+        const fromId = this.dragColId || ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/plain'));
+        if (fromId) {
+            this.reorderSelected(fromId, colId);
+        }
+    }
+    clearDragOverHighlight() {
+        var _a;
+        (_a = this.dragOverElement) === null || _a === void 0 ? void 0 : _a.classList.remove('drag-over');
+        this.dragOverElement = null;
+    }
+    /**
+     * Applies a new visible-column order via `applyColumnState({ applyOrder: true })`.
+     * Hidden columns keep their relative positions; only the visible slice is permuted.
+     */
+    reorderSelected(fromId, toId) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (!this.api || !this.api.getColumnState || !this.api.applyColumnState) {
+            return;
+        }
+        const displayed = (_c = (_b = (_a = this.api).getAllDisplayedColumns) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : [];
+        const all = (_f = (_e = (_d = this.api).getColumns) === null || _e === void 0 ? void 0 : _e.call(_d)) !== null && _f !== void 0 ? _f : [];
+        const columnState = (_j = (_h = (_g = this.api).getColumnState) === null || _h === void 0 ? void 0 : _h.call(_g)) !== null && _j !== void 0 ? _j : [];
+        const ordered = orderColumnsForPicker(displayed, all, this.sort, columnState);
+        const items = getPickerItems(ordered);
+        const allVisibleIds = items.filter((item) => item.visible).map((item) => item.colId);
+        const { selected } = partitionPickerItems(items, this.search, this.sort);
+        const shownIds = this.sort === 'selected-first'
+            ? selected.map((item) => item.colId)
+            : selected.filter((item) => item.visible).map((item) => item.colId);
+        const nextOrder = reorderVisibleIds(allVisibleIds, shownIds, fromId, toId);
+        if (!nextOrder) {
+            return;
+        }
+        this.api.applyColumnState({
+            state: applyVisibleOrder(columnState, nextOrder),
+            applyOrder: true,
+        });
+    }
+};
+__decorate([
+    attr
+], ColumnsToolPanel.prototype, "prefix", void 0);
+__decorate([
+    observable
+], ColumnsToolPanel.prototype, "search", void 0);
+__decorate([
+    observable
+], ColumnsToolPanel.prototype, "selectedItems", void 0);
+__decorate([
+    observable
+], ColumnsToolPanel.prototype, "unselectedItems", void 0);
+__decorate([
+    observable
+], ColumnsToolPanel.prototype, "selectAllChecked", void 0);
+__decorate([
+    observable
+], ColumnsToolPanel.prototype, "selectAllIndeterminate", void 0);
+ColumnsToolPanel = __decorate([
+    customElement({
+        name: 'grid-pro-columns-tool-panel',
+        template: columnsToolPanelTemplate,
+        styles,
+        shadowOptions: null,
+    })
+], ColumnsToolPanel);
+export { ColumnsToolPanel };

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

@@ -0,0 +1,180 @@
+import { css } from '@microsoft/fast-element';
+/**
+ * Styles for {@link ColumnsToolPanel}.
+ * Class selectors only — the element has no shadow root so styles land on the
+ * parent root (Grid Pro shadow / document); `:host` would target the wrong node.
+ * @public
+ */
+export const columnsToolPanelStyles = css `
+  .grid-pro-columns-tool-panel,
+  .grid-pro-columns-tool-panel *,
+  .grid-pro-columns-tool-panel *::before,
+  .grid-pro-columns-tool-panel *::after {
+    box-sizing: border-box;
+  }
+
+  .grid-pro-columns-tool-panel {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    height: 100%;
+    min-width: 200px;
+    padding: 0;
+    color: var(--ag-foreground-color, var(--neutral-foreground-rest));
+    background: var(--ag-control-panel-background-color, var(--neutral-layer-2));
+    font-family: var(--ag-font-family, var(--body-font));
+    font-size: var(--ag-data-font-size, var(--type-ramp-minus-1-font-size));
+  }
+
+  .grid-pro-columns-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: none;
+    width: 100%;
+    height: var(--ag-header-height, calc(var(--ag-grid-size, 4px) * 8));
+    min-height: var(--ag-header-height, calc(var(--ag-grid-size, 4px) * 8));
+    margin: 0;
+    padding: 0 var(--ag-widget-container-horizontal-padding, 8px);
+    border-bottom: var(--ag-borders-secondary, 1px solid)
+      var(--ag-secondary-border-color, var(--ag-border-color, var(--neutral-stroke-divider-rest)));
+  }
+
+  .grid-pro-columns-toolbar .grid-pro-columns-search {
+    flex: 1 1 auto;
+    min-width: 0;
+    width: auto;
+    display: block;
+
+    --design-unit: 3;
+  }
+
+  .grid-pro-columns-toolbar > .grid-pro-columns-search {
+    flex: 1 1 auto !important;
+    height: auto !important;
+    min-height: 0 !important;
+  }
+
+  .grid-pro-columns-select-all {
+    flex: 0 0 auto;
+    margin: 0;
+
+    --design-unit: 3;
+  }
+
+  /* Prototype: gray fill + white dash (FAST default is accent + square blob). */
+  .grid-pro-columns-select-all.indeterminate::part(control),
+  .grid-pro-columns-select-all[aria-checked='mixed']::part(control) {
+    background: var(--neutral-fill-strong-rest, var(--neutral-stroke-rest, #9aa0a6));
+    border-color: var(--neutral-fill-strong-rest, var(--neutral-stroke-rest, #9aa0a6));
+  }
+
+  .grid-pro-columns-select-all.indeterminate:not([disabled]):hover::part(control),
+  .grid-pro-columns-select-all[aria-checked='mixed']:not([disabled]):hover::part(control) {
+    background: var(--neutral-fill-strong-hover, var(--neutral-stroke-hover, #7d848c));
+    border-color: var(--neutral-fill-strong-hover, var(--neutral-stroke-hover, #7d848c));
+  }
+
+  .grid-pro-columns-select-all.indeterminate::part(checked-indicator),
+  .grid-pro-columns-select-all[aria-checked='mixed']::part(checked-indicator) {
+    opacity: 0%;
+  }
+
+  .grid-pro-columns-select-all.indeterminate::part(indeterminate-indicator),
+  .grid-pro-columns-select-all[aria-checked='mixed']::part(indeterminate-indicator) {
+    width: 10px;
+    height: 2px;
+    border-radius: 1px;
+    background: var(--neutral-fill-input-rest, #fff);
+    opacity: 100%;
+  }
+
+  .grid-pro-columns-select-all.indeterminate:not([disabled]):hover::part(indeterminate-indicator),
+  .grid-pro-columns-select-all[aria-checked='mixed']:not([disabled]):hover::part(
+      indeterminate-indicator
+    ) {
+    background: var(--neutral-fill-input-rest, #fff);
+  }
+
+  .grid-pro-columns-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: auto;
+    padding: 8px;
+  }
+
+  .grid-pro-columns-section {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 0 0 auto;
+  }
+
+  .grid-pro-columns-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 0;
+    border-radius: 4px;
+    cursor: default;
+    user-select: none;
+  }
+
+  .grid-pro-columns-item.dragging {
+    opacity: 50%;
+  }
+
+  .grid-pro-columns-item.drag-over {
+    background: var(--ag-row-hover-color, var(--neutral-fill-hover));
+  }
+
+  .grid-pro-columns-handle {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    min-height: 24px;
+    margin: -4px 0;
+    padding: 4px 6px;
+    box-sizing: border-box;
+    opacity: 45%;
+    letter-spacing: -1px;
+    font-size: 12px;
+    line-height: 1;
+    touch-action: none;
+  }
+
+  .grid-pro-columns-handle[draggable='true'],
+  .grid-pro-columns-handle.grid-pro-columns-handle--grid-drag,
+  .grid-pro-columns-handle.grid-pro-columns-handle--panel-drag {
+    cursor: grab;
+    opacity: 65%;
+  }
+
+  .grid-pro-columns-handle[draggable='true']:active,
+  .grid-pro-columns-handle.grid-pro-columns-handle--grid-drag:active,
+  .grid-pro-columns-handle.grid-pro-columns-handle--panel-drag:active {
+    cursor: grabbing;
+  }
+
+  .grid-pro-columns-checkbox {
+    flex: 0 0 auto;
+    margin: 0;
+
+    --design-unit: 3;
+  }
+
+  .grid-pro-columns-checkbox[aria-checked='true']:not([disabled]):hover::part(checked-indicator) {
+    fill: var(--foreground-on-accent-hover);
+  }
+
+  .grid-pro-columns-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;