[pull] latest from ag-grid:latest

community-modules/styles/src/internal/base/parts/_calculated-columns.scss

@@ -1,3 +1,5 @@
+@use 'ag';
+
 @mixin output {
     .ag-calculated-column-panel .ag-panel-content-wrapper {
         padding: var(--ag-grid-size) var(--ag-cell-horizontal-padding);
@@ -41,9 +43,15 @@
     .ag-calculated-column-expression-tools {
         display: flex;
 
-        .ag-group-container {
-            flex: 1 1 auto;
-            justify-content: end;
+        .ag-label {
+            @include ag.unthemed-rtl(
+                (
+                    text-align: right,
+                )
+            );
+        }
+
+        .ag-field-set-wrapper {
             gap: var(--ag-grid-size);
             flex-wrap: nowrap;
             align-items: center;

community-modules/styles/src/internal/base/parts/_common-structural.scss

@@ -1963,6 +1963,23 @@
         align-items: flex-end;
     }
 
+    .ag-field-set {
+        display: flex;
+        align-items: center;
+    }
+
+    .ag-field-set-wrapper {
+        display: flex;
+    }
+
+    .ag-field-set-wrapper-horizontal {
+        flex-direction: row;
+    }
+
+    .ag-field-set-wrapper-vertical {
+        flex-direction: column;
+    }
+
     .ag-toggle-button-icon {
         transition: right 0.3s;
         position: absolute;

packages/ag-grid-community/src/agWidgets/agFieldSet.css

@@ -0,0 +1,16 @@
+.ag-field-set {
+    display: flex;
+    align-items: center;
+}
+
+.ag-field-set-wrapper {
+    display: flex;
+}
+
+.ag-field-set-wrapper-horizontal {
+    flex-direction: row;
+}
+
+.ag-field-set-wrapper-vertical {
+    flex-direction: column;
+}

packages/ag-grid-community/src/agWidgets/agFieldSet.ts

@@ -0,0 +1,89 @@
+import type {
+    AgBaseComponent,
+    AgComponentSelector,
+    AgCoreBeanCollection,
+    AgElementParams,
+    BaseEvents,
+    BaseProperties,
+    IPropertiesService,
+} from 'ag-stack';
+import { RefPlaceholder, _isComponent } from 'ag-stack';
+
+import { AgAbstractLabel } from './agAbstractLabel';
+import type { AgLabelParams } from './agFieldParams';
+import agFieldSetCSS from './agFieldSet.css';
+import type { AgWidgetSelectorType } from './agWidgetSelectorType';
+
+type AgFieldSetItem<TBeanCollection> = AgBaseComponent<TBeanCollection> | HTMLElement;
+type AgFieldSetDirection = 'horizontal' | 'vertical';
+
+const AgFieldSetElement: AgElementParams<any> = {
+    tag: 'div',
+    cls: 'ag-field-set',
+    role: 'group',
+    children: [
+        { tag: 'div', ref: 'eLabel' },
+        { tag: 'div', ref: 'eWrapper', cls: 'ag-wrapper ag-field-set-wrapper ag-field-set-wrapper-horizontal' },
+    ],
+};
+
+/** @internal AG_GRID_INTERNAL - Not for public use. Can change / be removed at any time. */
+export class AgFieldSet<
+    TBeanCollection extends AgCoreBeanCollection<TProperties, TGlobalEvents, TCommon, TPropertiesService>,
+    TProperties extends BaseProperties,
+    TGlobalEvents extends BaseEvents,
+    TCommon,
+    TPropertiesService extends IPropertiesService<TProperties, TCommon>,
+    TComponentSelectorType extends string,
+    TConfig extends AgLabelParams = AgLabelParams,
+> extends AgAbstractLabel<
+    TBeanCollection,
+    TProperties,
+    TGlobalEvents,
+    TCommon,
+    TPropertiesService,
+    TComponentSelectorType,
+    TConfig
+> {
+    protected readonly eLabel: HTMLElement = RefPlaceholder;
+    private readonly eWrapper: HTMLElement = RefPlaceholder;
+
+    constructor(config?: TConfig) {
+        super(config, AgFieldSetElement as AgElementParams<TComponentSelectorType>);
+        this.registerCSS(agFieldSetCSS);
+    }
+
+    public override postConstruct(): void {
+        super.postConstruct();
+
+        this.addCss('ag-field-set');
+        this.getGui().setAttribute('aria-labelledby', this.getLabelId());
+    }
+
+    public addItems(items: AgFieldSetItem<TBeanCollection>[]): void {
+        for (const item of items) {
+            this.addItem(item);
+        }
+    }
+
+    public addItem(item: AgFieldSetItem<TBeanCollection>): void {
+        const el = _isComponent(item) ? item.getGui() : item;
+
+        this.eWrapper.appendChild(el);
+    }
+
+    public setDirection(direction: AgFieldSetDirection): this {
+        const eWrapper = this.eWrapper;
+
+        eWrapper.classList.toggle('ag-field-set-wrapper-horizontal', direction === 'horizontal');
+        eWrapper.classList.toggle('ag-field-set-wrapper-vertical', direction === 'vertical');
+
+        return this;
+    }
+}
+
+/** @internal AG_GRID_INTERNAL - Not for public use. Can change / be removed at any time. */
+export const AgFieldSetSelector: AgComponentSelector<AgWidgetSelectorType> = {
+    selector: 'AG-FIELD-SET',
+    component: AgFieldSet,
+};

packages/ag-grid-community/src/agWidgets/agWidgetSelectorType.ts

@@ -3,6 +3,7 @@ export type AgWidgetSelectorType =
     | 'AG-CHECKBOX'
     | 'AG-COLOR-INPUT'
     | 'AG-COLOR-PICKER'
+    | 'AG-FIELD-SET'
     | 'AG-GROUP-COMPONENT'
     | 'AG-INPUT-DATE-FIELD'
     | 'AG-INPUT-NUMBER-FIELD'

packages/ag-grid-community/src/main-internal.ts

@@ -394,6 +394,7 @@ export { AgAbstractInputField } from './agWidgets/agAbstractInputField';
 export { AgAbstractLabel } from './agWidgets/agAbstractLabel';
 export { AgCheckbox, AgCheckboxSelector } from './agWidgets/agCheckbox';
 export { AgContentEditableField, AgContentEditableFieldSelector } from './agWidgets/agContentEditableField';
+export { AgFieldSet, AgFieldSetSelector } from './agWidgets/agFieldSet';
 export type {
     AgCheckboxParams,
     AgFieldParams,

packages/ag-grid-community/src/widgets/gridWidgetTypes.ts

@@ -1,5 +1,6 @@
 import type { AgCheckbox } from '../agWidgets/agCheckbox';
 import type { AgCheckboxParams } from '../agWidgets/agFieldParams';
+import type { AgFieldSet } from '../agWidgets/agFieldSet';
 import type { AgInputDateField } from '../agWidgets/agInputDateField';
 import type { AgInputNumberField } from '../agWidgets/agInputNumberField';
 import type { AgInputTextArea } from '../agWidgets/agInputTextArea';
@@ -102,3 +103,13 @@ export type GridSelect<TValue = string | null> = AgSelect<
     AgComponentSelectorType,
     TValue
 >;
+
+/** @internal AG_GRID_INTERNAL - Not for public use. Can change / be removed at any time. */
+export type GridFieldSet = AgFieldSet<
+    BeanCollection,
+    GridOptionsWithDefaults,
+    AgEventTypeParams,
+    AgGridCommon<any, any>,
+    GridOptionsService,
+    AgComponentSelectorType
+>;

packages/ag-grid-enterprise/src/calculatedColumns/calculatedColumnForm.ts

@@ -3,13 +3,15 @@ import { RefPlaceholder, _getDocument, _setDisplayed } from 'ag-stack';
 import type {
     CalculatedColumnExpressionPicker,
     ElementParams,
+    GridFieldSet,
     GridInputTextArea,
     GridInputTextField,
     GridSelect,
     ITooltipCtrl,
     TooltipFeature,
 } from 'ag-grid-community';
 import {
+    AgFieldSetSelector,
     AgInputTextAreaSelector,
     AgInputTextFieldSelector,
     AgSelectSelector,
@@ -19,8 +21,6 @@ import {
 
 import { AgAutocompleteList } from '../advancedFilter/autocomplete/agAutocompleteList';
 import type { AutocompleteEntry } from '../advancedFilter/autocomplete/autocompleteParams';
-import { AgGroupComponentSelector } from '../agStack/agGroupComponent';
-import type { GroupComponent } from '../widgets/gridEnterpriseWidgetTypes';
 import { CalculatedColumnAutocompleteRow } from './calculatedColumnAutocompleteRow';
 import type {
     CalculatedColumnDataTypeOption,
@@ -68,7 +68,7 @@ const CalculatedColumnFormElement: ElementParams = {
             children: [
                 { tag: 'ag-input-text-area', ref: 'eExpression' },
                 {
-                    tag: 'ag-group-component',
+                    tag: 'ag-field-set',
                     cls: 'ag-calculated-column-expression-tools',
                     ref: 'eExpressionTools',
                     children: [
@@ -117,7 +117,7 @@ export class CalculatedColumnForm extends Component {
     private readonly eApply: HTMLButtonElement = RefPlaceholder;
     private readonly eCancel: HTMLButtonElement = RefPlaceholder;
     private readonly eActions: HTMLElement = RefPlaceholder;
-    private readonly eExpressionTools: GroupComponent = RefPlaceholder;
+    private readonly eExpressionTools: GridFieldSet = RefPlaceholder;
 
     private activeReplacement: { start: number; end: number } | null = null;
     private suggestionSource: HTMLElement | null = null;
@@ -150,7 +150,7 @@ export class CalculatedColumnForm extends Component {
             AgInputTextFieldSelector,
             AgSelectSelector,
             AgInputTextAreaSelector,
-            AgGroupComponentSelector,
+            AgFieldSetSelector,
         ]);
         this.expressionPickers = new Set(expressionPickers);
     }
@@ -202,8 +202,9 @@ export class CalculatedColumnForm extends Component {
 
         this.eExpressionTools
             .setDirection('horizontal')
-            .setTitle(translate('calculatedColumnExpressionToolsLabel', 'Insert'))
-            .hideOpenCloseIcons(true);
+            .setLabelWidth('flex')
+            .setLabel(translate('calculatedColumnExpressionToolsLabel', 'Insert'))
+            .setLabelSeparator(':');
     }
 
     private setupActionButtons(): void {

packages/ag-grid-enterprise/src/calculatedColumns/calculatedColumns.css

@@ -44,8 +44,11 @@
 .ag-calculated-column-expression-tools {
     display: flex;
 
-    :where(.ag-group-container) {
-        flex: 1 1 auto;
+    :where(.ag-label) {
+        text-align: right;
+    }
+
+    :where(.ag-field-set-wrapper) {
         justify-content: end;
         gap: var(--ag-spacing);
         flex-wrap: nowrap;