@adaptabletools/adaptable 23.0.0-canary.0 → 23.0.0-canary.1

package/index.css

@@ -1443,6 +1443,14 @@
       border-bottom-color: color-mix(in oklab, var(--ab-color-foreground) 20%, transparent);
     }
   }
+  .twa\:border-b-text-on-defaultbackground\/20 {
+    border-bottom-color: var(--ab-color-text-on-defaultbackground);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .twa\:border-b-text-on-defaultbackground\/20 {
+      border-bottom-color: color-mix(in oklab, var(--ab-color-text-on-defaultbackground) 20%, transparent);
+    }
+  }
   .twa\:bg-\(--ab-cmp-input--disabled__background\) {
     background-color: var(--ab-cmp-input--disabled__background);
   }
@@ -1509,7 +1517,7 @@
     background-color: currentcolor;
   }
   .twa\:bg-defaultbackground {
-    background-color: var(--ab-color-background);
+    background-color: var(--ab-color-defaultbackground);
   }
   .twa\:bg-destructive\/10 {
     background-color: var(--ab-color-destructive);
@@ -5497,8 +5505,8 @@
     --ab-focus__outline: none;
     --ab-color-background: var(--ab-color-defaultbackground, oklch(1 0 0));
     --ab-color-foreground: var(--ab-color-text-on-defaultbackground);
-    --ab-color-popover: var(--ab-color-background);
-    --ab-color-popover-foreground: var(--ab-color-foreground);
+    --ab-color-popover: var(--ab-color-defaultbackground);
+    --ab-color-popover-foreground: var(--ab-color-text-on-defaultbackground);
     --ab-color-secondary: oklch(0.97 0 0);
     --ab-color-secondary-foreground: oklch(0.205 0 0);
     --ab-color-muted: var(--ab-color-primarylight);
@@ -5704,6 +5712,10 @@
     --ab-cmp-tabs__padding: calc(var(--ab-base-space) * 2);
     --ab-cmp-tabs-strip__background: var(--ab-color-defaultbackground);
     --ab-cmp-tabs-active__background: var(--ab-color-primarylight);
+    --ab-cmp-tabs__font-weight: 400;
+    --ab-cmp-tabs__color: inherit;
+    --ab-cmp-tabs-inactive__opacity: 0.72;
+    --ab-cmp-tabs-inactive-separator__color: var(--ab-color-primarydark);
   }
   :root {
     --ab-cmp-panel_header__background: var(--ab-color-primary);
@@ -6392,18 +6404,29 @@
     z-index: 10;
     overflow: visible;
   }
+  .ab-Tabs__Tab {
+    font-weight: var(--ab-cmp-tabs__font-weight);
+    color: var(--ab-cmp-tabs__color);
+  }
   .ab-Tabs__Tab:focus:after {
     box-shadow: var(--ab-focus__box-shadow);
   }
   .ab-Tabs__Tab:focus {
     outline: none;
   }
+  .ab-Tabs__Tab:not(.ab-Tabs__Tab--active) {
+    opacity: var(--ab-cmp-tabs-inactive__opacity);
+  }
+  .ab-Tabs__Tab:not(.ab-Tabs__Tab--active) + .ab-Tabs__Tab:not(.ab-Tabs__Tab--active) {
+    box-shadow: inset 1px 0 0 var(--ab-cmp-tabs-inactive-separator__color);
+  }
   .ab-Tabs__Tab--active + .ab-Tabs__Filler, .ab-Tabs__Tab--active + .ab-Tabs__Tab {
     border-bottom-left-radius: var(--ab-border-radius);
   }
   .ab-Tabs__Tab--active {
     position: relative;
     z-index: 30;
+    opacity: 1;
   }
   .ab-Tabs__Tab--active:after {
     content: '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "23.0.0-canary.0",
+  "version": "23.0.0-canary.1",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/AdaptableOptions/ColumnMenuOptions.d.ts

@@ -1,6 +1,6 @@
 import { AdaptableColumnMenuItemName, AdaptableMenuItem, AgGridMenuItem, ColumnMenuContext, MenuSeparator } from '../AdaptableState/Common/Menu';
 import { AdaptableIcon } from '../types';
-import { AdaptableFrameworkComponent } from '../agGrid/AdaptableFrameworkComponent';
+import { MenuItemFrameworkComponent } from '../agGrid/AdaptableFrameworkComponent';
 /**
  * Options for managing menus in AdapTable – provided using 2 collections
  */
@@ -115,12 +115,12 @@ export interface UserColumnMenuItem {
      * The `onSetup` callback on `AngularFrameworkComponent` is NOT honoured
      * for menu items because AG Grid owns the component lifecycle.
      */
-    frameworkComponent?: AdaptableFrameworkComponent;
+    frameworkComponent?: MenuItemFrameworkComponent<ColumnMenuContext>;
     /**
      * Extra parameters passed through to the Framework Component (alongside
      * `adaptableApi` and `menuContext`).
      */
-    menuItemParams?: any;
+    menuItemParams?: Record<string, unknown>;
 }
 /**
  * Defines AG Grid Column Menu Items

package/src/AdaptableOptions/ContextMenuOptions.d.ts

@@ -1,7 +1,7 @@
 import { MenuSeparator } from '@infinite-table/infinite-react';
 import { AdaptableContextMenuItemName, AdaptableMenuItem, AgGridMenuItem, ContextMenuContext } from '../AdaptableState/Common/Menu';
 import { AdaptableIcon } from '../types';
-import { AdaptableFrameworkComponent } from '../agGrid/AdaptableFrameworkComponent';
+import { MenuItemFrameworkComponent } from '../agGrid/AdaptableFrameworkComponent';
 /**
  * Options for managing menus in AdapTable – provided using 2 collections
  */
@@ -110,12 +110,12 @@ export interface UserContextMenuItem {
      * The `onSetup` callback on `AngularFrameworkComponent` is NOT honoured
      * for menu items because AG Grid owns the component lifecycle.
      */
-    frameworkComponent?: AdaptableFrameworkComponent;
+    frameworkComponent?: MenuItemFrameworkComponent<ContextMenuContext>;
     /**
      * Extra parameters passed through to the Framework Component (alongside
      * `adaptableApi` and `menuContext`).
      */
-    menuItemParams?: any;
+    menuItemParams?: Record<string, unknown>;
 }
 /**
  * Defines AG Grid Context Menu Items

package/src/Strategy/ExportModule.js

@@ -178,7 +178,19 @@ export class ExportModule extends AdaptableModuleBase {
                     render: ExportSchedulesTab,
                 },
             ],
-            newTooltipText: 'Create New Report',
+            abObjectTypes: [
+                {
+                    name: 'Report',
+                    label: 'New Report',
+                    accessLevel: this.AccessLevel,
+                },
+                {
+                    name: 'Schedule',
+                    label: 'New Schedule',
+                    accessLevel: this.AccessLevel,
+                },
+            ],
+            newTooltipText: 'Create new Export item',
             actions: [ReportListItem],
             getDeleteAction: ExportRedux.ReportDelete,
             getDeleteConfirmationMsg: (abObject) => {

package/src/View/Alert/Wizard/AlertNotificationWizardSection.js

@@ -82,7 +82,7 @@ export const AlertNotificationWizardSection = (props) => {
             },
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { "data-name": "display-options", className: "twa:mt-2 twa:mb-3", autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Notification Options" }), _jsxs(Tabs.Content, { children: [_jsxs(Flex, { flexDirection: "column", alignItems: "flex-start", className: isScheduled ? 'twa:gap-2' : undefined, children: [_jsx(CheckBox, { className: isScheduled ? 'twa:my-0' : undefined, checked: data.AlertProperties?.DisplayNotification, onChange: (DisplayNotification) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { "data-name": "display-options", className: "twa:mt-2 twa:mb-3", autoFocus: false, children: [_jsx(Tabs.Tab, { children: "Notification Options" }), _jsxs(Tabs.Content, { children: [_jsxs(Flex, { flexDirection: "column", alignItems: "flex-start", className: isScheduled ? 'twa:gap-4' : undefined, children: [_jsx(CheckBox, { className: isScheduled ? 'twa:my-0' : undefined, checked: data.AlertProperties?.DisplayNotification, onChange: (DisplayNotification) => {
                                             if (isScheduled && scheduledData) {
                                                 updateScheduledProperties({ DisplayNotification });
                                                 return;

package/src/View/Alert/Wizard/AlertRulesWizardSection.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isRuleBasedAlertDefinition } from '../../../Utilities/Helpers/ScheduledAlertHelper';
 import { EntityRulesEditor, EntityRulesSummary } from '../../Components/EntityRulesEditor';
 import { Tag } from '../../../components/Tag';
@@ -11,7 +11,7 @@ import { Box } from '../../../components/Flex';
 export const getRuleStepDescription = (alertType) => {
     switch (alertType) {
         case 'DataChange':
-            return (_jsxs(_Fragment, { children: ["Build the Rule ", _jsx("b", { children: "when" }), " the Alert should trigger (using a Predicate or a Query)"] }));
+            return (_jsx(_Fragment, { children: "Build the Rule for when the Alert should trigger (using a Predicate or a Query)" }));
         case 'RowChange':
             return _jsx(_Fragment, { children: "Specify which type of Row Change will trigger the Alert" });
         case 'Validation':

package/src/View/Alert/Wizard/AlertWizard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
@@ -81,7 +81,7 @@ export const AlertWizard = (props) => {
             {
                 title: 'Name & Type',
                 isValid: isSettingsValid,
-                details: (_jsxs(_Fragment, { children: ["Enter Name and select ", _jsx("b", { children: "what" }), " type of change in AdapTable will cause the Alert to fire"] })),
+                details: (_jsx(_Fragment, { children: "Enter Name and select and select an Alert Type" })),
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange, onChange: setAlertDefinition }) })),
                 renderSummary: () => renderAlertTypeSummary(alertType),
             },
@@ -95,7 +95,7 @@ export const AlertWizard = (props) => {
             {
                 title: 'Trigger',
                 isVisible: () => alertType === AlertType.DataChange || alertType == AlertType.Validation,
-                details: (_jsxs(_Fragment, { children: ["Specify ", _jsx("b", { children: "where" }), " data changes should trigger the Alert"] })),
+                details: (_jsx(_Fragment, { children: "Specify which columns should trigger the Alert" })),
                 isValid: (data) => isRuleBasedAlertDefinition(data) ? isScopeValid(data) : true,
                 render: () => (_jsx(AlertScopeWizardSection, { alertType: alertType, onChange: setAlertDefinition })),
                 renderSummary: renderScopeSummary,

package/src/View/Components/ColumnFilter/AdaptableColumnFilter.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
-export type ColumnFilterLocation = 'columnMenu' | 'filterForm';
+import { ColumnFilterLocation } from './columnFilterLocation';
+export type { ColumnFilterLocation } from './columnFilterLocation';
+export { isEmbeddedColumnFilterLocation } from './columnFilterLocation';
 export declare const ColumnFilterLocationProvider: React.Provider<ColumnFilterLocation>;
 export declare const useColumnFilterLocation: () => ColumnFilterLocation;
 export interface AdaptableColumnFilterProps {

package/src/View/Components/ColumnFilter/AdaptableColumnFilter.js

@@ -2,6 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { ColumnFilterComponent } from './ColumnFilter';
 import { useAdaptableFilterWrapper } from './useAdaptableFilterWrapper';
+import Panel from '../../../components/Panel';
+export { isEmbeddedColumnFilterLocation } from './columnFilterLocation';
 const ColumnFilterLocationContext = React.createContext(null);
 export const ColumnFilterLocationProvider = ColumnFilterLocationContext.Provider;
 export const useColumnFilterLocation = () => {
@@ -13,7 +15,11 @@ export const useColumnFilterLocation = () => {
  */
 export const AdaptableColumnFilter = (props) => {
     const { qlPredicate, qlPredicateDefs, columnFilter, handlePredicateChange } = useAdaptableFilterWrapper(props.columnId, 'FilterForm');
-    return (_jsx(ColumnFilterLocationProvider, { value: props.location, children: _jsx(ColumnFilterComponent, { location: props.location, wrapperProps: props.wrapperProps, columnId: props.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: React.useCallback((predicate) => {
+    const filterContent = (_jsx(ColumnFilterLocationProvider, { value: props.location, children: _jsx(ColumnFilterComponent, { location: props.location, wrapperProps: props.wrapperProps, columnId: props.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: React.useCallback((predicate) => {
                 handlePredicateChange(predicate);
             }, [handlePredicateChange]) }) }));
+    if (props.location === 'filtersToolPanel') {
+        return (_jsx(Panel, { className: "twa:mb-2", bodyProps: { className: 'twa:p-0' }, children: filterContent }));
+    }
+    return filterContent;
 };

package/src/View/Components/ColumnFilter/ColumnFilter.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { QlPredicate, QlPredicateDef } from '../../../parser/src/predicate';
+import { ColumnFilterLocation } from './columnFilterLocation';
 interface ColumnFilterComponentProps {
-    location: 'columnMenu' | 'filterForm';
+    location: ColumnFilterLocation;
     hideActionButtons?: boolean;
     columnId: string;
     disabled?: boolean;

package/src/View/Components/ColumnFilter/ColumnFilter.js

@@ -10,6 +10,7 @@ import { Box, Flex } from '../../../components/Flex';
 import clsx from 'clsx';
 import { twMerge } from '../../../twMerge';
 import { SingleSelect } from '../../../components/NewSelect';
+import { isEmbeddedColumnFilterLocation } from './columnFilterLocation';
 const ColumnFilterPredicateDropdown = (props) => {
     const predicateDef = usePredicateDef(props.predicate?.operator, props.predicateDefs);
     const options = props.predicateDefs.map((predicateDef) => {
@@ -129,10 +130,10 @@ export const ColumnFilterComponent = (props) => {
             .some((adaptablePredicate) => adaptable.api.predicateApi.isValidPredicate(adaptablePredicate));
     };
     return (_jsxs(_Fragment, { children: [_jsxs(Flex, { flexDirection: "column", className: clsx({
-                    'twa:bg-primarylight': true,
                     'twa:pb-2': !props.hideActionButtons,
-                    'twa:mb-2': props.location === 'filterForm',
+                    'twa:mb-2': isEmbeddedColumnFilterLocation(props.location),
                     'twa:mt-2 twa:ml-2 twa:mr-2': props.location === 'columnMenu',
+                    'twa:mx-2': props.location === 'filtersToolPanel',
                     'twa:rounded-standard': true,
                 }), children: [_jsx(Flex, { className: "twa:m-2", children: _jsx(AndOrInput, { onChange: onCombineChange, operator: currentPredicate.operator }) }), !props.hideActionButtons && (_jsxs(Flex, { className: "ab-ColumnFilter-actions twa:ml-2 twa:mr-2", justifyContent: "space-between", children: [_jsx(Box, { className: "ab-ColumnFilter-action-clearall", children: _jsx(SimpleButton, { "aria-label": 'Clear All Filters', onClick: () => clearAllFilters(), children: "Clear All" }) }), manuallyApplyColumnFilter ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:flex-1", "data-name": "spacer" }), _jsx(Box, { className: "ab-ColumnFilter-action-reset twa:mr-2", children: _jsx(SimpleButton, { "aria-label": 'Reset All', tone: "neutral", variant: "raised", onClick: () => {
                                                 setPredicateNotYetApplied(props.predicate);

package/src/View/Components/ColumnFilter/columnFilterLocation.d.ts

@@ -0,0 +1,2 @@
+export type ColumnFilterLocation = 'columnMenu' | 'filterForm' | 'filtersToolPanel';
+export declare const isEmbeddedColumnFilterLocation: (location: ColumnFilterLocation) => boolean;

package/src/View/Components/ColumnFilter/columnFilterLocation.js

@@ -0,0 +1 @@
+export const isEmbeddedColumnFilterLocation = (location) => location === 'filterForm' || location === 'filtersToolPanel';

package/src/View/Components/FilterForm/ListBoxFilterForm.js

@@ -8,6 +8,7 @@ import { toDisplayValueDefault, toDisplayValueFromOptionTree, } from '../../../c
 import { AG_GRID_GROUPED_COLUMN } from '../../../Utilities/Constants/GeneralConstants';
 import { useMemo } from 'react';
 import { GridFilterCombobox } from '../../../components/Combobox';
+import { isEmbeddedColumnFilterLocation } from '../ColumnFilter/columnFilterLocation';
 import { useColumnFilterLocation } from '../ColumnFilter/AdaptableColumnFilter';
 import { GridFilterTreeDropdown } from '../../../components/Tree/TreeDropdown';
 const baseClassName = 'ab-ListBoxFilterForm';
@@ -161,7 +162,7 @@ export const ColumnValuesSelect = (props) => {
             : props.onChange, items: options, 
         // for dates, the treeDateOptions have ids that are numbers
         // so we have to add the `toDateValue` function to convert the values to the correct format
-        value: selectedColumnValues, primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: location === 'filterForm' })) : (_jsx(GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: location === 'filterForm' }, "select"));
+        value: selectedColumnValues, primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: isEmbeddedColumnFilterLocation(location) })) : (_jsx(GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: isEmbeddedColumnFilterLocation(location) }, "select"));
     return (_jsx("div", { className: join(baseClassName, 'twa:relative', props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
             if (e.key === 'Tab') {
                 // Prevent AG Grid from hijacking Tab; keep browser default focus navigation.

package/src/View/Export/Wizard/ExportPopupWizardRouter.js

@@ -1,8 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { NewReportWizard } from './NewReportWizard';
 import { ScheduledReportWizard } from './ScheduledReportWizard';
-export const ExportPopupWizardRouter = (props) => {
+const isScheduledReportWizard = (props) => {
     if (props.popupParams?.action === 'NewSchedule') {
+        return true;
+    }
+    if (props.data != null && 'Schedule' in props.data) {
+        return true;
+    }
+    return props.abObjectType?.name === 'Schedule';
+};
+export const ExportPopupWizardRouter = (props) => {
+    if (isScheduledReportWizard(props)) {
         const scheduleProps = props;
         return _jsx(ScheduledReportWizard, { ...scheduleProps });
     }

package/src/View/Export/Wizard/ScheduledReportSettings.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { ExportDestinationType } from '../../../AdaptableOptions/ExportOptions';
-import { ReportFormatType, ReportSchedule } from '../../../AdaptableState/ExportState';
+import { ReportFormatType, ReportNameType, ReportSchedule } from '../../../AdaptableState/ExportState';
 interface ScheduledReportSettingsProps {
     reportSchedule: ReportSchedule;
     onChange: (reportSchedule: ReportSchedule) => void;
     allFormats: ReportFormatType[];
     allDestinations: ExportDestinationType[];
+    /** When set, the user picks which report this schedule exports (Export popup → New Schedule). */
+    allReportNames?: ReportNameType[];
 }
 export declare const ScheduledReportSettings: React.FunctionComponent<ScheduledReportSettingsProps>;
 export {};

package/src/View/Export/Wizard/ScheduledReportSettings.js

@@ -19,7 +19,14 @@ export const ScheduledReportSettings = (props) => {
         label: destination,
         value: destination,
     }));
-    return (_jsx(Box, { "data-name": "scheduled-report-settings", children: _jsxs(Tabs, { autoFocus: false, className: "twa:mb-3", children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Name", children: _jsx(Input, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.reportSchedule?.Name ?? '' }) }), _jsx(FormRow, { label: "Format", children: _jsx(Box, { className: "twa:max-w-[300px]", children: _jsx(SingleSelect, { className: "twa:w-full", "data-name": "select-format", items: formatOptions, value: props.reportSchedule?.ReportFormat, placeholder: "Select Format", onValueChange: (value) => props.onChange({
+    const reportOptions = (props.allReportNames ?? []).map((reportName) => ({
+        label: reportName,
+        value: reportName,
+    }));
+    return (_jsx(Box, { "data-name": "scheduled-report-settings", children: _jsxs(Tabs, { autoFocus: false, className: "twa:mb-3", children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsxs(FormLayout, { children: [props.allReportNames && (_jsx(FormRow, { label: "Report", children: _jsx(Box, { className: "twa:max-w-[300px]", children: _jsx(SingleSelect, { className: "twa:w-full", "data-name": "select-report", items: reportOptions, value: props.reportSchedule?.ReportName || undefined, placeholder: "Select Report", onValueChange: (value) => props.onChange({
+                                            ...props.reportSchedule,
+                                            ReportName: value,
+                                        }) }) }) })), _jsx(FormRow, { label: "Name", children: _jsx(Input, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.reportSchedule?.Name ?? '' }) }), _jsx(FormRow, { label: "Format", children: _jsx(Box, { className: "twa:max-w-[300px]", children: _jsx(SingleSelect, { className: "twa:w-full", "data-name": "select-format", items: formatOptions, value: props.reportSchedule?.ReportFormat, placeholder: "Select Format", onValueChange: (value) => props.onChange({
                                             ...props.reportSchedule,
                                             ReportFormat: value,
                                         }) }) }) }), _jsx(FormRow, { label: "Destination", children: _jsx(Box, { className: "twa:max-w-[300px]", children: _jsx(SingleSelect, { className: "twa:w-full", "data-name": "select-destination", items: destinationOptions, value: props.reportSchedule?.ExportDestination, placeholder: "Select Destination", onValueChange: (value) => props.onChange({

package/src/View/Export/Wizard/ScheduledReportWizard.js

@@ -24,10 +24,11 @@ export const ScheduledReportWizard = (props) => {
     });
     const dispatch = useDispatch();
     const handleFinish = () => {
-        if (!reportName) {
+        const resolvedReportName = reportName ?? reportSchedule.ReportName;
+        if (!resolvedReportName?.trim()) {
             return;
         }
-        const scheduleToSave = { ...reportSchedule, ReportName: reportName };
+        const scheduleToSave = { ...reportSchedule, ReportName: resolvedReportName };
         const action = isNew
             ? ExportRedux.ScheduledReportAdd(scheduleToSave)
             : ExportRedux.ScheduledReportEdit(scheduleToSave);
@@ -71,5 +72,9 @@ const ScheduledReportSettingsSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const allFormats = api.exportApi.getAvailableSystemFormats();
     const allDestinations = api.exportApi.getAllExportDestinations();
-    return (_jsxs(_Fragment, { children: [props.reportName && (_jsxs(SummaryText, { children: ["Report: ", _jsx(Tag, { children: props.reportName })] })), _jsx(ScheduledReportSettings, { reportSchedule: data, onChange: props.onChange, allFormats: allFormats ?? [], allDestinations: allDestinations ?? [] })] }));
+    const fixedReportName = props.reportName;
+    const allReportNames = fixedReportName
+        ? undefined
+        : api.exportApi.internalApi.getAllAvailableReportNames();
+    return (_jsxs(_Fragment, { children: [fixedReportName && (_jsxs(SummaryText, { children: ["Report: ", _jsx(Tag, { children: fixedReportName })] })), _jsx(ScheduledReportSettings, { reportSchedule: data, onChange: props.onChange, allFormats: allFormats ?? [], allDestinations: allDestinations ?? [], allReportNames: allReportNames })] }));
 };

package/src/View/Export/Wizard/isReportScheduledSettingsValid.d.ts

@@ -1,3 +1,3 @@
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { ReportSchedule } from '../../../AdaptableState/ExportState';
-export declare const isReportScheduleSettingsValid: (reportSchedule: ReportSchedule, api: AdaptableApi) => true | "A name is required." | "A scheduled export with this name already exists." | "Please select a report format.";
+export declare const isReportScheduleSettingsValid: (reportSchedule: ReportSchedule, api: AdaptableApi) => true | "A name is required." | "A scheduled export with this name already exists." | "Please select a report." | "Please select a report format.";

package/src/View/Export/Wizard/isReportScheduledSettingsValid.js

@@ -8,6 +8,9 @@ export const isReportScheduleSettingsValid = (reportSchedule, api) => {
     if (isDuplicateName) {
         return 'A scheduled export with this name already exists.';
     }
+    if (StringExtensions.IsNullOrEmpty(reportSchedule?.ReportName?.trim())) {
+        return 'Please select a report.';
+    }
     if (StringExtensions.IsNullOrEmpty(reportSchedule?.ReportFormat)) {
         return 'Please select a report format.';
     }

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

@@ -20,6 +20,10 @@ import { isPivotLayout } from '../../../Utilities/isPivotLayout';
 import { PivotRowGroupingSection, PivotRowGroupingSectionSummary, } from './sections/PivotRowGroupingSection';
 import { isPivotAggregationsSectionValid, PivotAggregationsSection, PivotAggregationsSectionSummary, } from './sections/PivotAggregationsSection';
 import { Box } from '../../../components/Flex';
+const getLayoutWizardTitle = (layout, moduleFriendlyName) => {
+    const layoutName = layout.Name?.trim();
+    return layoutName ? `${moduleFriendlyName} (${layoutName})` : moduleFriendlyName;
+};
 export const LayoutWizard = (props) => {
     const dispatch = useDispatch();
     const adaptable = useAdaptable();
@@ -73,7 +77,8 @@ export const LayoutWizard = (props) => {
         props.onFinishWizard(layout);
     };
     const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
-    return isPivotLayout(layout) ? (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    const wizardTitle = getLayoutWizardTitle(layout, props.moduleInfo.FriendlyName);
+    return isPivotLayout(layout) ? (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: wizardTitle, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
                 details: 'Configure Pivot Layout',
@@ -151,7 +156,7 @@ export const LayoutWizard = (props) => {
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) })),
                 title: 'Summary',
             },
-        ] })) : (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+        ] })) : (_jsx(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/renderWithAdaptableContext.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Provider } from 'react-redux';
 import AdaptableContext from './AdaptableContext';
 import { WithAdaptableComputedCSSVars } from './AdaptableComputedCSSVarsContext';
-import { TooltipProvider } from '~/components/ui/tooltip';
+import { TooltipProvider } from "../components/ui/tooltip";
 export const renderWithAdaptableContext = (children, adaptable) => {
     return (_jsx(TooltipProvider, { delay: 300, children: _jsx(Provider, { store: adaptable.adaptableStore.TheStore, children: _jsx(WithAdaptableComputedCSSVars, { children: _jsx(AdaptableContext.Provider, { value: adaptable, children: children }) }) }) }));
 };

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

@@ -38,10 +38,12 @@ export 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(renderWithAdaptableContext(React.createElement(AdaptableColumnFilter, {
                     columnId,
                     wrapperProps: { className: 'twa:p-2' },
-                    location: 'columnMenu',
+                    location,
                 }), adaptable), this.filterContainer);
             }
         }

package/src/components/Combobox/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitive, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, RESIZABLE_VIRTUALIZED_LIST_CLASS, } from '~/components/ui/combobox';
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitive, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, RESIZABLE_VIRTUALIZED_LIST_CLASS, } from "../ui/combobox";
 import { cn } from '../../lib/utils';
 import { ChevronDownIcon, Loader2Icon, PlusIcon } from 'lucide-react';
 import { useMemo } from 'react';

package/src/components/Datepicker/index.js

@@ -9,10 +9,10 @@ import { useDatepickerContext } from './DatepickerContext';
 import { AdaptableDateInlineInput } from '../../View/Components/AdaptableInput/AdaptableDateInlineInput';
 import { isValid, addYears, endOfYear, startOfYear, addDays, addBusinessDays, } from 'date-fns';
 import { Flex } from '../Flex';
-import { cn } from '~/lib/utils';
-import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover';
-import { Calendar } from '~/components/ui/calendar';
-import { InputGroup, InputGroupAddon } from '~/components/ui/input-group';
+import { cn } from "../../lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Calendar } from "../ui/calendar";
+import { InputGroup, InputGroupAddon } from "../ui/input-group";
 import { SingleSelect } from '../NewSelect';
 import { targetOwn } from '../twUtils';
 // ── Caption dropdown components (month/year) ──────────────────────────

package/src/components/NewDropdownButton/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '~/components/ui/dropdown-menu';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "../ui/dropdown-menu";
 import { NewTooltip } from '../NewTooltip';
 import { cn } from '../../lib/utils';
 import { ChevronDownIcon } from 'lucide-react';

package/src/components/NewSelect/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from '~/components/ui/select';
-import { Tooltip, TooltipContent, TooltipTrigger } from '~/components/ui/tooltip';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from "../ui/select";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { cn } from '../../lib/utils';
 import React from 'react';
 const getItemTitle = (label, value) => {

package/src/components/NewTooltip/index.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/tooltip';
+import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip";
 export function NewTooltip({ label, children, side, align }) {
     if (!label) {
         return _jsx(_Fragment, { children: children });

package/src/components/ui/button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { cva } from 'class-variance-authority';
-import { cn } from '~/lib/utils';
+import { cn } from "../../lib/utils";
 const buttonVariants = 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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { DayPicker, getDefaultClassNames, useDayPicker, } from 'react-day-picker';
-import { cn } from '~/lib/utils';
-import { Button, buttonVariants } from '~/components/ui/button';
+import { cn } from "../../lib/utils";
+import { Button, buttonVariants } from "./button";
 import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
 const CalendarRoot = ({ className, rootRef, ...props }) => {
     return _jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props });

package/src/components/ui/combobox.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
-import { cn, POPUP_Z_INDEX } from '~/lib/utils';
-import { Button } from '~/components/ui/button';
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from '~/components/ui/input-group';
+import { cn, POPUP_Z_INDEX } from "../../lib/utils";
+import { Button } from "./button";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "./input-group";
 import { CheckIcon, ChevronDownIcon, XIcon, Loader2Icon } from 'lucide-react';
 import { CheckBox } from '../CheckBox';
 const useFilteredItems = ComboboxPrimitive.useFilteredItems;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Menu as MenuPrimitive } from '@base-ui/react/menu';
-import { cn, POPUP_Z_INDEX } from '~/lib/utils';
+import { cn, POPUP_Z_INDEX } from "../../lib/utils";
 import { ChevronRightIcon, CheckIcon } from 'lucide-react';
 function DropdownMenu({ ...props }) {
     return _jsx(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });