@adaptabletools/adaptable-cjs 23.0.0-canary.0 → 23.0.0-canary.2

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -24,6 +24,10 @@ const isPivotLayout_1 = require("../../../Utilities/isPivotLayout");
 const PivotRowGroupingSection_1 = require("./sections/PivotRowGroupingSection");
 const PivotAggregationsSection_1 = require("./sections/PivotAggregationsSection");
 const Flex_1 = require("../../../components/Flex");
+const getLayoutWizardTitle = (layout, moduleFriendlyName) => {
+    const layoutName = layout.Name?.trim();
+    return layoutName ? `${moduleFriendlyName} (${layoutName})` : moduleFriendlyName;
+};
 const LayoutWizard = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -77,7 +81,8 @@ const LayoutWizard = (props) => {
         props.onFinishWizard(layout);
     };
     const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
-    return (0, isPivotLayout_1.isPivotLayout)(layout) ? ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    const wizardTitle = getLayoutWizardTitle(layout, props.moduleInfo.FriendlyName);
+    return (0, isPivotLayout_1.isPivotLayout)(layout) ? ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: wizardTitle, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Pivot Layout',
@@ -155,7 +160,7 @@ const LayoutWizard = (props) => {
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) })),
                 title: 'Summary',
             },
-        ] })) : ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+        ] })) : ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: wizardTitle, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Table Layout',

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -194,7 +194,7 @@ const ColumnsSection = (props) => {
         if (layout.RowGroupDisplayType === 'single') {
             allColumns.unshift((0, ColumnApiImpl_1.generateAutoRowGroupSingleColumn)());
         }
-        else {
+        else if (layout.RowGroupDisplayType === 'multi') {
             [...layout.RowGroupedColumns].reverse().forEach((col) => {
                 const groupCol = (0, ColumnApiImpl_1.generateAutoRowGroupColumnForColumn)(adaptable.api.columnApi.getColumnWithColumnId(col));
                 allColumns.unshift(groupCol);

package/src/View/Layout/Wizard/sections/RowGroupingSection.js

@@ -79,10 +79,14 @@ const RowGroupingSection = (props) => {
                                     if (RowGroupDisplayType === 'single') {
                                         newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
                                     }
-                                    else {
+                                    else if (RowGroupDisplayType === 'multi') {
                                         newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId));
                                     }
+                                    else {
+                                        newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId) &&
+                                            !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
+                                    }
                                     onChange(newLayout);
-                                }, children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" })] }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Grouped Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: rowGroupsText }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [option.friendlyName ?? option.columnId, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(exports.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] })] }));
+                                }, children: [(0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" }), (0, jsx_runtime_1.jsx)(TypeRadio_1.TypeRadio, { value: "groupRows", text: "Full Width Group Rows", description: "Row groups display as full-width rows (no group column and no aggregations)" })] }) }) })] }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Row Grouped Columns" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: rowGroupsText }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { showFilterInput: true, filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [option.friendlyName ?? option.columnId, (0, jsx_runtime_1.jsx)(ColumnGroupTag_1.ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(exports.RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] })] }));
 };
 exports.RowGroupingSection = RowGroupingSection;

package/src/View/renderWithAdaptableContext.js

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_redux_1 = require("react-redux");
 const AdaptableContext_1 = tslib_1.__importDefault(require("./AdaptableContext"));
 const AdaptableComputedCSSVarsContext_1 = require("./AdaptableComputedCSSVarsContext");
-const tooltip_1 = require("~/components/ui/tooltip");
+const tooltip_1 = require("../components/ui/tooltip");
 const renderWithAdaptableContext = (children, adaptable) => {
     return ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { delay: 300, children: (0, jsx_runtime_1.jsx)(react_redux_1.Provider, { store: adaptable.adaptableStore.TheStore, children: (0, jsx_runtime_1.jsx)(AdaptableComputedCSSVarsContext_1.WithAdaptableComputedCSSVars, { children: (0, jsx_runtime_1.jsx)(AdaptableContext_1.default.Provider, { value: adaptable, children: children }) }) }) }));
 };

package/src/agGrid/AdaptableAgGrid.js

@@ -100,6 +100,7 @@ const FlashingCellService_1 = require("../Utilities/Services/FlashingCellService
 const AgGridExportAdapter_1 = require("./AgGridExportAdapter");
 const LayoutHelpers_1 = require("../Api/Implementation/LayoutHelpers");
 const src_1 = require("../layout-manager/src");
+const rowGroupDisplayType_1 = require("../layout-manager/src/rowGroupDisplayType");
 const isPivotLayoutModel_1 = require("../layout-manager/src/isPivotLayoutModel");
 const AdaptableColumn_1 = require("../AdaptableState/Common/AdaptableColumn");
 const agGridDataTypeDefinitions_1 = require("./agGridDataTypeDefinitions");
@@ -465,8 +466,7 @@ class AdaptableAgGrid {
             if ((0, isPivotLayoutModel_1.isPivotLayoutModel)(layoutModel)) {
                 gridOptions.pivotDefaultExpanded = layoutModel.PivotExpandLevel;
             }
-            gridOptions.groupDisplayType =
-                layoutModel.RowGroupDisplayType === 'multi' ? 'multipleColumns' : 'singleColumn';
+            gridOptions.groupDisplayType = (0, rowGroupDisplayType_1.rowGroupDisplayTypeToGridOption)(layoutModel.RowGroupDisplayType);
             // fixes issue #3053
             gridOptions.suppressAggFuncInHeader = !!layoutModel.SuppressAggFuncInHeader;
             if (!(0, isPivotLayoutModel_1.isPivotLayoutModel)(layoutModel) &&

package/src/agGrid/AdaptableFrameworkComponent.d.ts

@@ -1,5 +1,5 @@
 import { AdaptableApi } from '../Api/AdaptableApi';
-import { ReactElement } from 'react';
+import { ComponentType, ReactElement } from 'react';
 import { BaseContext } from '../types';
 /**
  * Base Component for Bespoke Components: can be Angular, React or Vue
@@ -21,12 +21,34 @@ export type AngularFrameworkComponent<T = unknown> = {
     }) => Partial<T>;
 };
 /**
- *
- * A function that returns a ReactNode
+ * A function that returns a ReactNode (toolbars, settings panels, tool panels, etc.).
+ * For custom Column / Context menu rows, use `ReactMenuItemFrameworkComponent` instead.
  */
 export type ReactFrameworkComponent = ({ adaptableApi, }: {
     adaptableApi: AdaptableApi;
 }) => ReactElement;
+/** AdapTable extras passed on AG Grid `menuItemParams` for custom menu items. */
+export interface AdaptableMenuItemParams<TMenuContext = unknown> {
+    adaptableApi: AdaptableApi;
+    menuContext: TMenuContext;
+}
+/**
+ * Props AG Grid passes to React custom menu item components, with AdapTable
+ * `menuItemParams` (see `AgGridMenuAdapter.mapCustomMenuItemToAgGridMenuDefinition`).
+ */
+export interface AdaptableReactMenuItemProps<TMenuContext = unknown> {
+    name: string;
+    menuItemParams: AdaptableMenuItemParams<TMenuContext> & Record<string, unknown>;
+}
+/**
+ * React component for custom Column / Context menu rows (AG Grid `menuItem`).
+ * Unlike `ReactFrameworkComponent`, receives `name` and `menuItemParams`, not only `adaptableApi`.
+ */
+export type ReactMenuItemFrameworkComponent<TMenuContext = unknown> = ComponentType<AdaptableReactMenuItemProps<TMenuContext>>;
+/**
+ * Framework component for a custom menu item (Column Menu or Context Menu).
+ */
+export type MenuItemFrameworkComponent<TMenuContext = unknown> = AngularFrameworkComponent | VueFrameworkComponent | ReactMenuItemFrameworkComponent<TMenuContext>;
 /**
  * Creates a Vue Component to be used in AdapTable UI controls
  */

package/src/agGrid/AgGridFilterAdapter.js

@@ -42,10 +42,12 @@ const AgGridFilterAdapterFactory = (adaptable) => {
             const columnId = this.column.getColId();
             let column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
             if (column) {
+                const isFiltersToolPanel = typeof params?.hidePopup !== 'function';
+                const location = isFiltersToolPanel ? 'filtersToolPanel' : 'columnMenu';
                 this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(AdaptableColumnFilter_1.AdaptableColumnFilter, {
                     columnId,
                     wrapperProps: { className: 'twa:p-2' },
-                    location: 'columnMenu',
+                    location,
                 }), adaptable), this.filterContainer);
             }
         }

package/src/components/Combobox/index.js

@@ -4,7 +4,7 @@ exports.GridFilterCombobox = exports.MultiCombobox = exports.SingleCombobox = vo
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const combobox_1 = require("~/components/ui/combobox");
+const combobox_1 = require("../ui/combobox");
 const utils_1 = require("../../lib/utils");
 const lucide_react_1 = require("lucide-react");
 const react_1 = require("react");

package/src/components/Datepicker/index.js

@@ -13,10 +13,10 @@ const DatepickerContext_1 = require("./DatepickerContext");
 const AdaptableDateInlineInput_1 = require("../../View/Components/AdaptableInput/AdaptableDateInlineInput");
 const date_fns_1 = require("date-fns");
 const Flex_1 = require("../Flex");
-const utils_1 = require("~/lib/utils");
-const popover_1 = require("~/components/ui/popover");
-const calendar_1 = require("~/components/ui/calendar");
-const input_group_1 = require("~/components/ui/input-group");
+const utils_1 = require("../../lib/utils");
+const popover_1 = require("../ui/popover");
+const calendar_1 = require("../ui/calendar");
+const input_group_1 = require("../ui/input-group");
 const NewSelect_1 = require("../NewSelect");
 const twUtils_1 = require("../twUtils");
 // ── Caption dropdown components (month/year) ──────────────────────────

package/src/components/NewDropdownButton/index.js

@@ -4,7 +4,7 @@ exports.NewDropdownButton = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const dropdown_menu_1 = require("~/components/ui/dropdown-menu");
+const dropdown_menu_1 = require("../ui/dropdown-menu");
 const NewTooltip_1 = require("../NewTooltip");
 const utils_1 = require("../../lib/utils");
 const lucide_react_1 = require("lucide-react");

package/src/components/NewSelect/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiSelect = exports.SingleSelect = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const select_1 = require("~/components/ui/select");
-const tooltip_1 = require("~/components/ui/tooltip");
+const select_1 = require("../ui/select");
+const tooltip_1 = require("../ui/tooltip");
 const utils_1 = require("../../lib/utils");
 const react_1 = tslib_1.__importDefault(require("react"));
 const getItemTitle = (label, value) => {

package/src/components/NewTooltip/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NewTooltip = NewTooltip;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const tooltip_1 = require("~/components/ui/tooltip");
+const tooltip_1 = require("../ui/tooltip");
 function NewTooltip({ label, children, side, align }) {
     if (!label) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });

package/src/components/ui/button.js

@@ -5,7 +5,7 @@ exports.Button = Button;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const button_1 = require("@base-ui/react/button");
 const class_variance_authority_1 = require("class-variance-authority");
-const utils_1 = require("~/lib/utils");
+const utils_1 = require("../../lib/utils");
 const buttonVariants = (0, class_variance_authority_1.cva)('twa:group/button twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center twa:rounded-button twa:border twa:border-transparent twa:bg-clip-padding twa:text-sm twa:font-medium twa:whitespace-nowrap twa:transition-all twa:outline-none twa:select-none twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:active:translate-y-px twa:disabled:pointer-events-none twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', {
     variants: {
         variant: {

package/src/components/ui/calendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DayPicker } from 'react-day-picker';
-import { Button } from '~/components/ui/button';
+import { Button } from './button';
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>['variant'];
 }): React.JSX.Element;

package/src/components/ui/calendar.js

@@ -5,8 +5,8 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
-const utils_1 = require("~/lib/utils");
-const button_1 = require("~/components/ui/button");
+const utils_1 = require("../../lib/utils");
+const button_1 = require("./button");
 const lucide_react_1 = require("lucide-react");
 const CalendarRoot = ({ className, rootRef, ...props }) => {
     return (0, jsx_runtime_1.jsx)("div", { "data-slot": "calendar", ref: rootRef, className: (0, utils_1.cn)(className), ...props });

package/src/components/ui/combobox.js

@@ -22,9 +22,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("@base-ui/react");
 Object.defineProperty(exports, "ComboboxPrimitive", { enumerable: true, get: function () { return react_1.Combobox; } });
-const utils_1 = require("~/lib/utils");
-const button_1 = require("~/components/ui/button");
-const input_group_1 = require("~/components/ui/input-group");
+const utils_1 = require("../../lib/utils");
+const button_1 = require("./button");
+const input_group_1 = require("./input-group");
 const lucide_react_1 = require("lucide-react");
 const CheckBox_1 = require("../CheckBox");
 const useFilteredItems = react_1.Combobox.useFilteredItems;

package/src/components/ui/dropdown-menu.js

@@ -17,7 +17,7 @@ exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuSubContent = DropdownMenuSubContent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const menu_1 = require("@base-ui/react/menu");
-const utils_1 = require("~/lib/utils");
+const utils_1 = require("../../lib/utils");
 const lucide_react_1 = require("lucide-react");
 function DropdownMenu({ ...props }) {
     return (0, jsx_runtime_1.jsx)(menu_1.Menu.Root, { "data-slot": "dropdown-menu", ...props });

package/src/components/ui/input-group.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-import { Button } from '~/components/ui/button';
+import { Button } from './button';
 declare function InputGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: {
     align?: "inline-end" | "inline-start" | "block-end" | "block-start";

package/src/components/ui/input-group.js

@@ -9,10 +9,10 @@ exports.InputGroupInput = InputGroupInput;
 exports.InputGroupTextarea = InputGroupTextarea;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const class_variance_authority_1 = require("class-variance-authority");
-const utils_1 = require("~/lib/utils");
-const button_1 = require("~/components/ui/button");
-const input_1 = require("~/components/ui/input");
-const textarea_1 = require("~/components/ui/textarea");
+const utils_1 = require("../../lib/utils");
+const button_1 = require("./button");
+const input_1 = require("./input");
+const textarea_1 = require("./textarea");
 function InputGroup({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "input-group", role: "group", className: (0, utils_1.cn)('twa:group/input-group twa:relative twa:flex twa:h-input twa:w-full twa:min-w-0 twa:items-center twa:rounded-input twa:border twa:border-input twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:in-data-[slot=combobox-content]:focus-within:border-inherit twa:in-data-[slot=combobox-content]:focus-within:ring-0 twa:has-[[data-slot=input-group-control]:focus-visible]:border-ring twa:has-[[data-slot=input-group-control]:focus-visible]:ring-3 twa:has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 twa:has-[[data-slot][aria-invalid=true]]:border-destructive twa:has-[[data-slot][aria-invalid=true]]:ring-3 twa:has-[[data-slot][aria-invalid=true]]:ring-destructive/20 twa:has-[>[data-align=block-end]]:h-auto twa:has-[>[data-align=block-end]]:flex-col twa:has-[>[data-align=block-start]]:h-auto twa:has-[>[data-align=block-start]]:flex-col twa:has-[>textarea]:h-auto twa:dark:bg-input/30 twa:dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 twa:has-[>[data-align=block-end]]:[&>input]:pt-3 twa:has-[>[data-align=block-start]]:[&>input]:pb-3 twa:has-[>[data-align=inline-end]]:[&>input]:pr-1.5 twa:has-[>[data-align=inline-start]]:[&>input]:pl-1.5', className), ...props }));
 }

package/src/components/ui/input.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = Input;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const input_1 = require("@base-ui/react/input");
-const utils_1 = require("~/lib/utils");
+const utils_1 = require("../../lib/utils");
 function Input({ className, type, ...props }) {
     return ((0, jsx_runtime_1.jsx)(input_1.Input, { type: type, "data-slot": "input", className: (0, utils_1.cn)("twa:h-9 twa:w-full twa:min-w-0 twa:rounded-md twa:border twa:border-input twa:bg-transparent twa:px-2.5 twa:py-1 twa:text-base twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:file:inline-flex twa:file:h-7 twa:file:border-0 twa:file:bg-transparent twa:file:text-sm twa:file:font-medium twa:file:text-foreground twa:placeholder:text-muted-foreground twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:pointer-events-none twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:md:text-sm twa:dark:bg-input/30 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40", className), ...props }));
 }

package/src/components/ui/popover.js

@@ -8,7 +8,7 @@ exports.PopoverTitle = PopoverTitle;
 exports.PopoverTrigger = PopoverTrigger;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const popover_1 = require("@base-ui/react/popover");
-const utils_1 = require("~/lib/utils");
+const utils_1 = require("../../lib/utils");
 function Popover({ ...props }) {
     return (0, jsx_runtime_1.jsx)(popover_1.Popover.Root, { "data-slot": "popover", ...props });
 }

package/src/components/ui/select.js

@@ -12,7 +12,7 @@ exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const select_1 = require("@base-ui/react/select");
-const utils_1 = require("~/lib/utils");
+const utils_1 = require("../../lib/utils");
 const lucide_react_1 = require("lucide-react");
 const Select = select_1.Select.Root;
 exports.Select = Select;

package/src/components/ui/textarea.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Textarea = Textarea;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("~/lib/utils");
+const utils_1 = require("../../lib/utils");
 function Textarea({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)("textarea", { "data-slot": "textarea", className: (0, utils_1.cn)("twa:flex twa:field-sizing-content twa:min-h-16 twa:w-full twa:rounded-md twa:border twa:border-input twa:bg-transparent twa:px-2.5 twa:py-2 twa:text-base twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:placeholder:text-muted-foreground twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:md:text-sm twa:dark:bg-input/30 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40", className), ...props }));
 }

package/src/components/ui/tooltip.js

@@ -6,7 +6,7 @@ exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const tooltip_1 = require("@base-ui/react/tooltip");
-const utils_1 = require("~/lib/utils");
+const utils_1 = require("../../lib/utils");
 function TooltipProvider({ delay = 0, ...props }) {
     return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props }));
 }

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1780392719013 || Date.now(),
-    VERSION: "23.0.0-canary.0" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1780405607097 || Date.now(),
+    VERSION: "23.0.0-canary.2" || '--current-version--',
 };

package/src/layout-manager/src/LayoutManagerModel.d.ts

@@ -1,4 +1,4 @@
-import { ColumnSizingMap, LayoutRowSelection } from '../../AdaptableState/LayoutState';
+import { ColumnSizingMap, LayoutRowSelection, RowGroupDisplayType } from '../../AdaptableState/LayoutState';
 import { XOR } from '../../Utilities/Extensions/TypeExtensions';
 /**
  * Defines how a Column is sorted
@@ -17,7 +17,7 @@ export interface BaseLayoutModel {
     /**
      * @defaultValue 'single'
      */
-    RowGroupDisplayType?: 'single' | 'multi';
+    RowGroupDisplayType?: RowGroupDisplayType;
     /**
      * Those are not actually used by the LayoutManager,
      * but we need to keep them here so we can give the layout

package/src/layout-manager/src/index.js

@@ -5,6 +5,7 @@ const infinite_react_1 = require("@infinite-table/infinite-react");
 const isPivotLayoutModel_1 = require("./isPivotLayoutModel");
 const LMEmitter_1 = require("./LMEmitter");
 const normalizeLayoutModel_1 = require("./normalizeLayoutModel");
+const rowGroupDisplayType_1 = require("./rowGroupDisplayType");
 const isLayoutEqual_1 = require("./isLayoutEqual");
 const simplifyLayoutModel_1 = require("./simplifyLayoutModel");
 const sortColumnIdsByOrder_1 = require("./sortColumnIdsByOrder");
@@ -555,7 +556,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
                 if (groupDisplayType === 'singleColumn') {
                     colsInLayout.add(normalizeLayoutModel_1.AUTO_GROUP_COLUMN_ID__SINGLE);
                 }
-                else {
+                else if (groupDisplayType === 'multipleColumns') {
                     this.currentLayout.RowGroupedColumns.forEach((colId) => {
                         colsInLayout.add(`${normalizeLayoutModel_1.AUTO_GROUP_COLUMN_ID__MULTI_PREFIX}${colId}`);
                     });
@@ -763,7 +764,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
             ColumnGroupValues,
             GrandTotalRow: this.gridApi.getGridOption('grandTotalRow'),
             SuppressAggFuncInHeader: this.gridApi.getGridOption('suppressAggFuncInHeader'),
-            RowGroupDisplayType: this.gridApi.getGridOption('groupDisplayType') === 'multipleColumns' ? 'multi' : 'single',
+            RowGroupDisplayType: (0, rowGroupDisplayType_1.gridOptionToRowGroupDisplayType)(this.gridApi.getGridOption('groupDisplayType')),
             RowSelection: this.getRowSelectionFromGrid(),
         });
         return layout;
@@ -1317,7 +1318,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
             // this.gridApi.applyColumnState(state);
             const hasGroupedColumns = layout.RowGroupedColumns && layout.RowGroupedColumns.length;
             if (hasGroupedColumns) {
-                const displayTypeFromLayout = layout.RowGroupDisplayType === 'multi' ? 'multipleColumns' : 'singleColumn';
+                const displayTypeFromLayout = (0, rowGroupDisplayType_1.rowGroupDisplayTypeToGridOption)(layout.RowGroupDisplayType);
                 const groupDisplayType = this.gridApi.getGridOption('groupDisplayType');
                 if (groupDisplayType !== displayTypeFromLayout) {
                     this.gridApi.setGridOption('groupDisplayType', displayTypeFromLayout);
@@ -1680,7 +1681,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
             this.applyPivotTotals(layout);
             const hasGroupedColumns = layout.PivotGroupedColumns && !!layout.PivotGroupedColumns.length;
             if (hasGroupedColumns) {
-                const displayTypeFromLayout = layout.RowGroupDisplayType === 'multi' ? 'multipleColumns' : 'singleColumn';
+                const displayTypeFromLayout = (0, rowGroupDisplayType_1.rowGroupDisplayTypeToGridOption)(layout.RowGroupDisplayType);
                 const groupDisplayType = this.gridApi.getGridOption('groupDisplayType');
                 if (groupDisplayType !== displayTypeFromLayout) {
                     this.gridApi.setGridOption('groupDisplayType', displayTypeFromLayout);

package/src/layout-manager/src/normalizeLayoutModel.js

@@ -5,6 +5,7 @@ exports.normalizeTableLayoutModel = normalizeTableLayoutModel;
 exports.normalizePivotLayoutModel = normalizePivotLayoutModel;
 exports.normalizeLayoutModel = normalizeLayoutModel;
 const isPivotLayoutModel_1 = require("./isPivotLayoutModel");
+const rowGroupDisplayType_1 = require("./rowGroupDisplayType");
 exports.AUTO_GROUP_COLUMN_ID__SINGLE = 'ag-Grid-AutoColumn';
 exports.AUTO_GROUP_COLUMN_ID__MULTI_PREFIX = 'ag-Grid-AutoColumn-';
 function normalizeTableLayoutModel(layout, options) {
@@ -66,7 +67,10 @@ function normalizeTableLayoutModel(layout, options) {
             displayType = displayType || 'single';
             layout.RowGroupDisplayType = displayType;
         }
-        if (displayType === 'single') {
+        if (displayType === 'groupRows') {
+            layout.TableColumns = layout.TableColumns.filter((colId) => !(0, rowGroupDisplayType_1.isRowGroupAutoColumnId)(colId));
+        }
+        else if (displayType === 'single') {
             if (!ColumnOrderSet.has(exports.AUTO_GROUP_COLUMN_ID__SINGLE)) {
                 layout.TableColumns = [exports.AUTO_GROUP_COLUMN_ID__SINGLE, ...layout.TableColumns];
             }

package/src/layout-manager/src/rowGroupDisplayType.d.ts

@@ -0,0 +1,6 @@
+import { GridOptions } from 'ag-grid-enterprise';
+import { RowGroupDisplayType } from '../../AdaptableState/LayoutState';
+export type { RowGroupDisplayType };
+export declare function rowGroupDisplayTypeToGridOption(displayType: RowGroupDisplayType | undefined): GridOptions['groupDisplayType'];
+export declare function gridOptionToRowGroupDisplayType(groupDisplayType: GridOptions['groupDisplayType'] | undefined): RowGroupDisplayType;
+export declare function isRowGroupAutoColumnId(colId: string): boolean;

package/src/layout-manager/src/rowGroupDisplayType.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rowGroupDisplayTypeToGridOption = rowGroupDisplayTypeToGridOption;
+exports.gridOptionToRowGroupDisplayType = gridOptionToRowGroupDisplayType;
+exports.isRowGroupAutoColumnId = isRowGroupAutoColumnId;
+const normalizeLayoutModel_1 = require("./normalizeLayoutModel");
+function rowGroupDisplayTypeToGridOption(displayType) {
+    switch (displayType ?? 'single') {
+        case 'multi':
+            return 'multipleColumns';
+        case 'groupRows':
+            return 'groupRows';
+        case 'single':
+        default:
+            return 'singleColumn';
+    }
+}
+function gridOptionToRowGroupDisplayType(groupDisplayType) {
+    if (groupDisplayType === 'multipleColumns') {
+        return 'multi';
+    }
+    if (groupDisplayType === 'groupRows') {
+        return 'groupRows';
+    }
+    return 'single';
+}
+function isRowGroupAutoColumnId(colId) {
+    return colId === normalizeLayoutModel_1.AUTO_GROUP_COLUMN_ID__SINGLE || colId.startsWith(normalizeLayoutModel_1.AUTO_GROUP_COLUMN_ID__MULTI_PREFIX);
+}

package/src/metamodel/adaptable.metamodel.d.ts

@@ -482,6 +482,9 @@ export declare const ADAPTABLE_METAMODEL: {
             r?: undefined;
         })[];
     };
+    AdaptableMenuItemParams: {
+        k: string;
+    };
     AdaptableMessageType: {
         k: string;
     };
@@ -636,6 +639,9 @@ export declare const ADAPTABLE_METAMODEL: {
     AdaptableQuery: {
         k: string;
     };
+    AdaptableReactMenuItemProps: {
+        k: string;
+    };
     AdaptableReadyInfo: {
         k: string;
         p: {
@@ -1132,11 +1138,6 @@ export declare const ADAPTABLE_METAMODEL: {
     };
     BadgePillStyle: {
         k: string;
-        p: {
-            n: string;
-            k: string;
-            o: boolean;
-        }[];
     };
     BadgeShape: {
         k: string;
@@ -3546,25 +3547,6 @@ export declare const ADAPTABLE_METAMODEL: {
     LayoutArray: {
         k: string;
     };
-    LayoutBase: {
-        k: string;
-        p: ({
-            n: string;
-            k: string;
-            o: boolean;
-            r?: undefined;
-        } | {
-            n: string;
-            k: string;
-            o: boolean;
-            r: string;
-        } | {
-            n: string;
-            k: string;
-            o?: undefined;
-            r?: undefined;
-        })[];
-    };
     LayoutChangedAction: {
         k: string;
     };
@@ -3727,6 +3709,9 @@ export declare const ADAPTABLE_METAMODEL: {
     MenuCategory: {
         k: string;
     };
+    MenuItemFrameworkComponent: {
+        k: string;
+    };
     MenuSeparator: {
         k: string;
     };
@@ -4249,6 +4234,9 @@ export declare const ADAPTABLE_METAMODEL: {
     ReactFrameworkComponent: {
         k: string;
     };
+    ReactMenuItemFrameworkComponent: {
+        k: string;
+    };
     Report: {
         k: string;
         p: ({