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

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: '';
@@ -6952,93 +6975,43 @@
   .ab-Datepicker-Overlay .rdp-focusable {
     cursor: pointer;
   }
-  .ab-Datepicker-Overlay {
-    @keyframes rdp-slide_in_left {
-      0% {
-        transform: translateX(-100%);
-      }
-      100% {
-        transform: translateX(0);
-      }
-    }
-    @keyframes rdp-slide_in_right {
-      0% {
-        transform: translateX(100%);
-      }
-      100% {
-        transform: translateX(0);
-      }
-    }
-    @keyframes rdp-slide_out_left {
-      0% {
-        transform: translateX(0);
-      }
-      100% {
-        transform: translateX(-100%);
-      }
-    }
-    @keyframes rdp-slide_out_right {
-      0% {
-        transform: translateX(0);
-      }
-      100% {
-        transform: translateX(100%);
-      }
-    }
-  }
+  .ab-Datepicker-Overlay {}
   .ab-Datepicker-Overlay .rdp-weeks_before_enter {
-    animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+    animation: ab-rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
   }
   .ab-Datepicker-Overlay .rdp-weeks_before_exit {
-    animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+    animation: ab-rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
   }
   .ab-Datepicker-Overlay .rdp-weeks_after_enter {
-    animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+    animation: ab-rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
   }
   .ab-Datepicker-Overlay .rdp-weeks_after_exit {
-    animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+    animation: ab-rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
   }
   .ab-Datepicker-Overlay .rdp-root[dir="rtl"] .rdp-weeks_after_enter {
-    animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+    animation: ab-rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
   }
   .ab-Datepicker-Overlay .rdp-root[dir="rtl"] .rdp-weeks_before_exit {
-    animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+    animation: ab-rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
   }
   .ab-Datepicker-Overlay .rdp-root[dir="rtl"] .rdp-weeks_before_enter {
-    animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+    animation: ab-rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
   }
   .ab-Datepicker-Overlay .rdp-root[dir="rtl"] .rdp-weeks_after_exit {
-    animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
-  }
-  .ab-Datepicker-Overlay {
-    @keyframes rdp-fade_in {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
-    @keyframes rdp-fade_out {
-      from {
-        opacity: 1;
-      }
-      to {
-        opacity: 0;
-      }
-    }
+    animation: ab-rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
   }
+  .ab-Datepicker-Overlay {}
   .ab-Datepicker-Overlay .rdp-caption_after_enter {
-    animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+    animation: ab-rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
   }
   .ab-Datepicker-Overlay .rdp-caption_after_exit {
-    animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+    animation: ab-rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
   }
   .ab-Datepicker-Overlay .rdp-caption_before_enter {
-    animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+    animation: ab-rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
   }
   .ab-Datepicker-Overlay .rdp-caption_before_exit {
-    animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+    animation: ab-rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
   }
   .ab-Datepicker-Overlay {
     border: var(--ab-cmp-datepicker__border);
@@ -8678,3 +8651,51 @@
     }
   }
 }
+@keyframes ab-rdp-slide_in_left {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes ab-rdp-slide_in_right {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes ab-rdp-slide_out_left {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+@keyframes ab-rdp-slide_out_right {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes ab-rdp-fade_in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes ab-rdp-fade_out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-cjs",
-  "version": "23.0.0-canary.0",
+  "version": "23.0.0-canary.2",
   "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/AdaptableState/LayoutState.d.ts

@@ -44,6 +44,10 @@ export interface LayoutState extends BaseState {
 /**
  * Base object for both Table and Pivot Layouts
  */
+/**
+ * How row groups are displayed in a Layout (maps to AG Grid `groupDisplayType`).
+ */
+export type RowGroupDisplayType = 'single' | 'multi' | 'groupRows';
 export interface LayoutBase extends AdaptableObject {
     /**
      * Name of the Layout as it appears in the Layout toolbar and tool panel
@@ -101,10 +105,7 @@ export interface LayoutBase extends AdaptableObject {
      * Position of the Grand Total Row in the Layout
      */
     GrandTotalRow?: 'top' | 'bottom' | 'pinnedTop' | 'pinnedBottom' | boolean;
-    /**
-     * Display Row Grouped Columns as 'single' or 'multi' column
-     */
-    RowGroupDisplayType?: 'single' | 'multi';
+    RowGroupDisplayType?: RowGroupDisplayType;
 }
 /**
  * Defines a Table-based Layout

package/src/AdaptableState/StyledColumnState.d.ts

@@ -1,6 +1,6 @@
 import { BaseState } from './BaseState';
 import { AdaptablePredicate, AdaptableBooleanQuery, AdaptableIcon } from '../types';
-import { CellBoxStyle, CellFontStyle } from './Common/AdaptableStyle';
+import { AdaptableStyle, CellBoxStyle, CellFontStyle } from './Common/AdaptableStyle';
 import { TypeHint } from './Common/Types';
 import { RowScope } from './Common/RowScope';
 import { AgSparklineOptions } from 'ag-charts-types';
@@ -367,23 +367,14 @@ export type SystemBadgeStylePredicateIds = SystemBadgeStylePredicateId[];
 export interface BadgeStylePredicate extends AdaptablePredicate {
     PredicateId: TypeHint<string, SystemBadgeStylePredicateId>;
 }
+/** Keys copied from legacy `BadgeStyleDefinition.Style` (`AdaptableStyle`) into `PillStyle`. */
+export declare const BADGE_PILL_STYLE_KEYS: readonly ["BackColor", "ForeColor", "BorderColor", "FontWeight", "FontStyle", "TextDecoration"];
 /**
- * Visual styling applied to a single Badge "pill" (subset of `AdaptableStyle`)
+ * Visual styling applied to a single Badge pill — an explicit subset of
+ * {@link AdaptableStyle}. Not used: `BorderRadius` ({@link BadgeShape}),
+ * `Alignment` / `FontSize` / `ClassName` (column-level or unsupported).
  */
-export interface BadgePillStyle {
-    /** Pill background colour. */
-    BackColor?: string;
-    /** Pill text/icon colour. */
-    ForeColor?: string;
-    /** Pill border colour (a subtle 1px border is drawn when set). */
-    BorderColor?: string;
-    /** Whether the pill text is bold. */
-    FontWeight?: 'Normal' | 'Bold';
-    /** Whether the pill text is italic. */
-    FontStyle?: 'Normal' | 'Italic';
-    /** Optional decoration (underline / line-through / overline). */
-    TextDecoration?: 'None' | 'Underline' | 'Overline' | 'LineThrough';
-}
+export type BadgePillStyle = Pick<AdaptableStyle, (typeof BADGE_PILL_STYLE_KEYS)[number]>;
 /**
  * Visual shape of a Badge; convenience shorthand that resolves to a border radius without having to pick a pixel value
  */

package/src/AdaptableState/StyledColumnState.js

@@ -1,2 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.BADGE_PILL_STYLE_KEYS = void 0;
+/** Keys copied from legacy `BadgeStyleDefinition.Style` (`AdaptableStyle`) into `PillStyle`. */
+exports.BADGE_PILL_STYLE_KEYS = [
+    'BackColor',
+    'ForeColor',
+    'BorderColor',
+    'FontWeight',
+    'FontStyle',
+    'TextDecoration',
+];

package/src/Strategy/ExportModule.js

@@ -182,7 +182,19 @@ class ExportModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                     render: ExportSchedulesTab_1.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_1.ReportListItem],
             getDeleteAction: ExportRedux.ReportDelete,
             getDeleteConfirmationMsg: (abObject) => {

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

@@ -88,7 +88,7 @@ const AlertNotificationWizardSection = (props) => {
             },
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { "data-name": "display-options", className: "twa:mt-2 twa:mb-3", autoFocus: false, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Notification Options" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start", className: isScheduled ? 'twa:gap-2' : undefined, children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: isScheduled ? 'twa:my-0' : undefined, checked: data.AlertProperties?.DisplayNotification, onChange: (DisplayNotification) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { "data-name": "display-options", className: "twa:mt-2 twa:mb-3", autoFocus: false, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Notification Options" }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", alignItems: "flex-start", className: isScheduled ? 'twa:gap-4' : undefined, children: [(0, jsx_runtime_1.jsx)(CheckBox_1.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

@@ -15,7 +15,7 @@ const Flex_1 = require("../../../components/Flex");
 const getRuleStepDescription = (alertType) => {
     switch (alertType) {
         case 'DataChange':
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Build the Rule ", (0, jsx_runtime_1.jsx)("b", { children: "when" }), " the Alert should trigger (using a Predicate or a Query)"] }));
+            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Build the Rule for when the Alert should trigger (using a Predicate or a Query)" }));
         case 'RowChange':
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Specify which type of Row Change will trigger the Alert" });
         case 'Validation':

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

@@ -85,7 +85,7 @@ const AlertWizard = (props) => {
             {
                 title: 'Name & Type',
                 isValid: AlertTypeWizardSection_1.isSettingsValid,
-                details: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Enter Name and select ", (0, jsx_runtime_1.jsx)("b", { children: "what" }), " type of change in AdapTable will cause the Alert to fire"] })),
+                details: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Enter Name and select and select an Alert Type" })),
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(AlertTypeWizardSection_1.AlertTypeWizardSection, { alertType: alertType, onAlertTypeChange: handleAlertTypeChange, onChange: setAlertDefinition }) })),
                 renderSummary: () => (0, AlertTypeWizardSection_1.renderAlertTypeSummary)(alertType),
             },
@@ -99,7 +99,7 @@ const AlertWizard = (props) => {
             {
                 title: 'Trigger',
                 isVisible: () => alertType === getAlertType_1.AlertType.DataChange || alertType == getAlertType_1.AlertType.Validation,
-                details: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Specify ", (0, jsx_runtime_1.jsx)("b", { children: "where" }), " data changes should trigger the Alert"] })),
+                details: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Specify which columns should trigger the Alert" })),
                 isValid: (data) => (0, ScheduledAlertHelper_1.isRuleBasedAlertDefinition)(data) ? (0, NewScopeComponent_1.isScopeValid)(data) : true,
                 render: () => ((0, jsx_runtime_1.jsx)(AlertScopeWizardSection_1.AlertScopeWizardSection, { alertType: alertType, onChange: setAlertDefinition })),
                 renderSummary: BaseAlertScopeWizardSection_1.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

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableColumnFilter = exports.useColumnFilterLocation = exports.ColumnFilterLocationProvider = void 0;
+exports.AdaptableColumnFilter = exports.useColumnFilterLocation = exports.ColumnFilterLocationProvider = exports.isEmbeddedColumnFilterLocation = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const ColumnFilter_1 = require("./ColumnFilter");
 const useAdaptableFilterWrapper_1 = require("./useAdaptableFilterWrapper");
+const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+var columnFilterLocation_1 = require("./columnFilterLocation");
+Object.defineProperty(exports, "isEmbeddedColumnFilterLocation", { enumerable: true, get: function () { return columnFilterLocation_1.isEmbeddedColumnFilterLocation; } });
 const ColumnFilterLocationContext = React.createContext(null);
 exports.ColumnFilterLocationProvider = ColumnFilterLocationContext.Provider;
 const useColumnFilterLocation = () => {
@@ -18,8 +21,12 @@ exports.useColumnFilterLocation = useColumnFilterLocation;
  */
 const AdaptableColumnFilter = (props) => {
     const { qlPredicate, qlPredicateDefs, columnFilter, handlePredicateChange } = (0, useAdaptableFilterWrapper_1.useAdaptableFilterWrapper)(props.columnId, 'FilterForm');
-    return ((0, jsx_runtime_1.jsx)(exports.ColumnFilterLocationProvider, { value: props.location, children: (0, jsx_runtime_1.jsx)(ColumnFilter_1.ColumnFilterComponent, { location: props.location, wrapperProps: props.wrapperProps, columnId: props.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: React.useCallback((predicate) => {
+    const filterContent = ((0, jsx_runtime_1.jsx)(exports.ColumnFilterLocationProvider, { value: props.location, children: (0, jsx_runtime_1.jsx)(ColumnFilter_1.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 ((0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:mb-2", bodyProps: { className: 'twa:p-0' }, children: filterContent }));
+    }
+    return filterContent;
 };
 exports.AdaptableColumnFilter = AdaptableColumnFilter;

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

@@ -14,6 +14,7 @@ const Flex_1 = require("../../../components/Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const twMerge_1 = require("../../../twMerge");
 const NewSelect_1 = require("../../../components/NewSelect");
+const columnFilterLocation_1 = require("./columnFilterLocation");
 const ColumnFilterPredicateDropdown = (props) => {
     const predicateDef = (0, hooks_1.usePredicateDef)(props.predicate?.operator, props.predicateDefs);
     const options = props.predicateDefs.map((predicateDef) => {
@@ -133,10 +134,10 @@ const ColumnFilterComponent = (props) => {
             .some((adaptablePredicate) => adaptable.api.predicateApi.isValidPredicate(adaptablePredicate));
     };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: (0, clsx_1.default)({
-                    'twa:bg-primarylight': true,
                     'twa:pb-2': !props.hideActionButtons,
-                    'twa:mb-2': props.location === 'filterForm',
+                    'twa:mb-2': (0, columnFilterLocation_1.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: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:m-2", children: (0, jsx_runtime_1.jsx)(AndOrInput, { onChange: onCombineChange, operator: currentPredicate.operator }) }), !props.hideActionButtons && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-ColumnFilter-actions twa:ml-2 twa:mr-2", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-ColumnFilter-action-clearall", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "aria-label": 'Clear All Filters', onClick: () => clearAllFilters(), children: "Clear All" }) }), manuallyApplyColumnFilter ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1", "data-name": "spacer" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-ColumnFilter-action-reset twa:mr-2", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "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,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isEmbeddedColumnFilterLocation = void 0;
+const isEmbeddedColumnFilterLocation = (location) => location === 'filterForm' || location === 'filtersToolPanel';
+exports.isEmbeddedColumnFilterLocation = isEmbeddedColumnFilterLocation;

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

@@ -12,6 +12,7 @@ const TreeDropdown_1 = require("../../../components/Tree/TreeDropdown");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const react_1 = require("react");
 const Combobox_1 = require("../../../components/Combobox");
+const columnFilterLocation_1 = require("../ColumnFilter/columnFilterLocation");
 const AdaptableColumnFilter_1 = require("../ColumnFilter/AdaptableColumnFilter");
 const TreeDropdown_2 = require("../../../components/Tree/TreeDropdown");
 const baseClassName = 'ab-ListBoxFilterForm';
@@ -165,7 +166,7 @@ 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' })) : ((0, jsx_runtime_1.jsx)(Combobox_1.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: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) })) : ((0, jsx_runtime_1.jsx)(Combobox_1.GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) }, "select"));
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, join_1.default)(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

@@ -4,8 +4,17 @@ exports.ExportPopupWizardRouter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const NewReportWizard_1 = require("./NewReportWizard");
 const ScheduledReportWizard_1 = require("./ScheduledReportWizard");
-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';
+};
+const ExportPopupWizardRouter = (props) => {
+    if (isScheduledReportWizard(props)) {
         const scheduleProps = props;
         return (0, jsx_runtime_1.jsx)(ScheduledReportWizard_1.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

@@ -23,7 +23,14 @@ const ScheduledReportSettings = (props) => {
         label: destination,
         value: destination,
     }));
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "scheduled-report-settings", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.reportSchedule?.Name ?? '' }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Format", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[300px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.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 ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "scheduled-report-settings", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [props.allReportNames && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Report", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[300px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.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,
+                                        }) }) }) })), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "schedule-name", className: "twa:w-[300px]", onChange: handleNameChange, placeholder: "Enter Schedule Name", type: "string", value: props.reportSchedule?.Name ?? '' }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Format", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[300px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.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,
                                         }) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Destination", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[300px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.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

@@ -28,10 +28,11 @@ const ScheduledReportWizard = (props) => {
     });
     const dispatch = (0, react_redux_1.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);
@@ -76,5 +77,9 @@ const ScheduledReportSettingsSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const allFormats = api.exportApi.getAvailableSystemFormats();
     const allDestinations = api.exportApi.getAllExportDestinations();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.reportName && ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Report: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: props.reportName })] })), (0, jsx_runtime_1.jsx)(ScheduledReportSettings_1.ScheduledReportSettings, { reportSchedule: data, onChange: props.onChange, allFormats: allFormats ?? [], allDestinations: allDestinations ?? [] })] }));
+    const fixedReportName = props.reportName;
+    const allReportNames = fixedReportName
+        ? undefined
+        : api.exportApi.internalApi.getAllAvailableReportNames();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [fixedReportName && ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Report: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: fixedReportName })] })), (0, jsx_runtime_1.jsx)(ScheduledReportSettings_1.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

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