@genesislcap/grid-pro 15.62.0 → 15.64.0

package/dist/esm/column-selection/column-selection.styles.js

@@ -38,7 +38,9 @@ export const columnSelectionStyles = css `
     background: var(--neutral-layer-floating, var(--neutral-layer-2, #fff));
     box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
     padding: 0;
+    /* stylelint-disable-next-line property-no-unknown -- CSS anchor positioning */
     position-area: block-end span-inline-start;
+    /* stylelint-disable-next-line property-no-unknown -- CSS anchor positioning */
     position-try-fallbacks: flip-block, flip-inline;
     margin-block-start: calc(var(--design-unit, 4) * 1px);
     min-width: 200px;
@@ -47,6 +49,7 @@ export const columnSelectionStyles = css `
     font-size: var(--ag-data-font-size, var(--type-ramp-minus-1-font-size));
   }
 
+  /* stylelint-disable-next-line selector-pseudo-class-no-unknown -- Popover API */
   .column-selection-panel:popover-open {
     display: flex;
     flex-direction: column;
@@ -129,6 +132,12 @@ export const columnSelectionStyles = css `
     min-height: 250px;
     max-height: 400px;
     padding: 8px;
+    scrollbar-color: var(--ag-scrollbar-handle, var(--neutral-layer-1))
+      var(--ag-scrollbar-background, var(--neutral-layer-4));
+  }
+
+  .grid-pro-columns-list:hover {
+    scrollbar-color: var(--neutral-fill-rest) var(--ag-scrollbar-background, var(--neutral-layer-4));
   }
 
   .grid-pro-columns-section {
@@ -202,33 +211,231 @@ export const columnSelectionStyles = css `
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  :host([docked]) {
+    --column-selection-tab-width: calc(var(--ag-icon-size, 16px) + var(--ag-grid-size, 4px) * 2);
+
+    position: relative;
+    display: flex;
+    align-self: stretch;
+    overflow: visible;
+    width: var(--column-selection-tab-width);
+    height: 100%;
+    min-height: 0;
+    background: var(
+      --ag-control-panel-background-color,
+      var(--ag-header-background-color, var(--neutral-layer-2))
+    );
+    border-inline-start: 1px solid
+      var(--ag-border-color, var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest)));
+  }
+
+  :host([docked]) .column-selection {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-start;
+    overflow: visible;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    padding-top: calc(var(--ag-grid-size, 4px) * 4);
+  }
+
+  :host([docked]) .column-selection-button {
+    align-self: flex-start;
+    width: var(--column-selection-tab-width);
+    min-width: var(--column-selection-tab-width);
+    height: auto;
+    min-height: 0;
+    background: transparent;
+    border: none;
+    color: var(--ag-foreground-color, var(--neutral-foreground-rest));
+    font-size: var(--ag-font-size, 12px);
+    font-weight: 400;
+  }
+
+  :host([docked]) .column-selection-button::part(control) {
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 7px;
+    width: 100%;
+    height: auto;
+    min-height: calc(var(--ag-grid-size, 4px) * 18);
+    border: none;
+    border-radius: 0;
+    padding: calc(var(--ag-grid-size, 4px) * 2) 0;
+    background: transparent;
+    box-shadow: none;
+    color: inherit;
+    font: inherit;
+  }
+
+  :host([docked]) .column-selection-button::part(start) {
+    align-self: center;
+    margin: 0;
+  }
+
+  :host([docked]) .column-selection-button > [slot='start'] {
+    width: var(--ag-icon-size, 16px);
+    height: var(--ag-icon-size, 16px);
+  }
+
+  :host([docked]) .column-selection-button[aria-expanded='true']::part(control) {
+    background: var(
+      --ag-side-button-selected-background-color,
+      var(--ag-background-color, var(--neutral-layer-1))
+    );
+    box-shadow: none;
+  }
+
+  :host([docked]) .column-selection-button-label {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    clip: auto;
+    border: 0;
+    writing-mode: vertical-lr;
+    white-space: nowrap;
+    line-height: 1;
+    letter-spacing: 0;
+  }
+
+  .column-selection-panel-window {
+    display: contents;
+  }
+
+  :host([docked]) .column-selection-panel-window {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    inset-block: 0 auto;
+    inset-inline-end: 100%;
+    width: var(--ag-side-bar-panel-width, 250px);
+    height: auto;
+    min-height: 40%;
+    max-height: calc(100% - var(--grid-pro-column-panel-status-offset, 0px));
+    overflow: hidden;
+    z-index: 2;
+    pointer-events: none;
+    filter: drop-shadow(-8px 0 16px rgb(0 0 0 / 16%));
+  }
+
+  :host([docked]) .column-selection-panel {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    inset: auto;
+    width: 100%;
+    max-width: none;
+    max-height: 100%;
+    height: auto;
+    min-height: 0;
+    flex: 1 1 auto;
+    margin: 0;
+    overflow: hidden;
+    border-radius: 0;
+    border: 1px solid
+      var(--ag-border-color, var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest)));
+    background: var(
+      --ag-control-panel-background-color,
+      var(--ag-header-background-color, var(--neutral-layer-1, #1b2836))
+    );
+    box-shadow: none;
+    transform: translateX(100%);
+    visibility: hidden;
+    pointer-events: none;
+    transition:
+      transform 200ms ease,
+      visibility 200ms;
+  }
+
+  :host([docked]:dir(rtl)) .column-selection-panel {
+    transform: translateX(-100%);
+  }
+
+  :host([docked].column-selection-open) .column-selection-panel {
+    transform: translateX(0);
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([docked]) .column-selection-panel {
+      transition: none;
+    }
+  }
+
+  :host([docked]) .grid-pro-columns-list {
+    flex: 1 1 auto;
+    min-height: 0;
+    max-height: none;
+    overflow: auto;
+    padding-bottom: 0;
+  }
+
+  :host([docked]) .grid-pro-columns-list-end {
+    flex: none;
+    height: 40px;
+  }
+
+  :host([docked]) .grid-pro-columns-toolbar {
+    flex: none;
+  }
 `;
 /**
  * Host layout when the Grid Pro column-selection toolbar is shown.
  * @public
  */
 export const gridProColumnSelectionHostStyles = css `
-  :host(.has-column-selection) {
+  /* AG's own status bar sits inside the grid area, under the docked panel. */
+  :host([with-status-bar].has-column-selection:not(.has-status-bar)) {
+    --grid-pro-column-panel-status-offset: var(--ag-status-bar-height, 32.5px);
+  }
+
+  :host(.has-column-selection),
+  :host(.has-status-bar) {
     display: flex;
     flex-direction: column;
     min-height: 0;
+    min-width: 0;
   }
 
-  :host(.has-column-selection) [part='grid'] {
+  .grid-pro-main {
+    display: contents;
+  }
+
+  :host(.has-column-selection) .grid-pro-main,
+  :host(.has-status-bar) .grid-pro-main {
+    display: flex;
+    flex-direction: row;
     flex: 1 1 auto;
+    min-width: 0;
     min-height: 0;
   }
 
-  .grid-pro-column-selection-toolbar {
+  :host(.has-column-selection) [part='grid'],
+  :host(.has-status-bar) [part='grid'] {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .grid-pro-side-bar {
     display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: calc(var(--design-unit, 4) * 2px);
+    position: relative;
+    z-index: 2;
+    flex: 0 0 auto;
+    align-self: stretch;
+    overflow: visible;
+    min-height: 0;
+  }
+
+  .grid-pro-status-bar {
+    flex: 0 0 auto;
     width: 100%;
-    box-sizing: border-box;
-    flex-shrink: 0;
-    padding: calc(var(--design-unit, 4) * 2px);
-    border-bottom: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
-    background: var(--neutral-layer-1, transparent);
   }
 `;

package/dist/esm/column-selection/column-selection.template.js

@@ -47,18 +47,22 @@ export const getColumnSelectionTemplate = (prefix = 'foundation') => {
         class="column-selection-button"
         appearance="neutral"
         data-state="${(x) => (x.open ? 'hover' : undefined)}"
-        aria-pressed="${(x) => (x.open ? 'true' : 'false')}"
+        aria-label="${(x) => x.label}"
+        aria-expanded="${(x) => (x.open ? 'true' : 'false')}"
+        aria-controls="column-selection-panel"
         @click=${(x) => x.toggle()}
       >
         <${prefix}-icon size="lg" name="columns" slot="start"></${prefix}-icon>
-        ${(x) => x.label}
+        <span class="column-selection-button-label">${(x) => x.label}</span>
       </${prefix}-button>
+      <div class="column-selection-panel-window">
       <div
         ${ref('panelEl')}
+        id="column-selection-panel"
         class="column-selection-panel"
         part="column-selection-panel"
         data-test-id="column-selection-panel"
-        popover="manual"
+        popover="${(x) => (x.docked ? null : 'manual')}"
       >
         <div class="grid-pro-columns-toolbar" data-test-id="grid-pro-columns-toolbar">
           <${checkbox}
@@ -84,8 +88,10 @@ export const getColumnSelectionTemplate = (prefix = 'foundation') => {
           <div class="grid-pro-columns-section" data-test-id="grid-pro-columns-unselected">
             ${repeat((x) => x.unselectedItems, columnRow, { recycle: false })}
           </div>
+          <div class="grid-pro-columns-list-end"></div>
         </div>
       </div>
+      </div>
     </div>
   `;
 };

package/dist/esm/datasource/base.datasource.js

@@ -811,15 +811,15 @@ export class GridProBaseDatasource extends GenesisGridDatasourceElement {
     /**
      * Gets datasource-specific status bar component configurations.
      * This method should be called by the grid to get status bar panels specific to this datasource.
+     * @param suppressLoadMore - Leaves out the Load More panel, for row models that fetch on scroll.
      * @public
      */
-    getDatasourceStatusBarPanels(isServerSide, statusBarConfig) {
+    getDatasourceStatusBarPanels(suppressLoadMore, statusBarConfig) {
         var _a, _b, _c, _d, _e, _f;
         const additionalPanels = [];
         // Extract loadMore configuration
         const loadMoreConfig = this.getStatusBarActionConfig(statusBarConfig === null || statusBarConfig === void 0 ? void 0 : statusBarConfig.loadMore);
-        // Add load more button if enabled and not server-side
-        if (loadMoreConfig.enabled && !isServerSide) {
+        if (loadMoreConfig.enabled && !suppressLoadMore) {
             const loadMoreParams = {};
             // Use custom callback if provided, otherwise leave undefined for default behavior
             if ((_a = loadMoreConfig.config) === null || _a === void 0 ? void 0 : _a.onLoadMore) {

package/dist/esm/grid-components.js

@@ -3,6 +3,7 @@ import { foundationGridProActionRenderer, foundationGridProActionsMenuRenderer,
 import { foundationColumnSelection } from './column-selection';
 import { foundationGridPro } from './grid-pro';
 import { foundationMulticolumnDropdown } from './multicolumn-dropdown';
+import { foundationGridProStatusBar } from './status-bar';
 /**
  * The Grid Pro Components.
  * @remarks Contains all available components, from Grid Pro itself to the cell renderers.
@@ -27,6 +28,7 @@ export const foundationGridComponents = {
     StatusPillRenderer,
     foundationGridPro,
     foundationColumnSelection,
+    foundationGridProStatusBar,
     register(container, ...rest) {
         if (!container) {
             // preserve backward compatibility with code that loops through