@adaptabletools/adaptable-cjs 20.0.0-canary.8 → 20.0.0

package/src/View/Alert/Wizard/AlertButtonsEditor.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { AlertButton } from '../../../PredefinedConfig/AlertState';
-import { AdaptableAlert } from '../../../PredefinedConfig/Common/AdaptableAlert';
+import { AlertButton } from '../../../AdaptableState/AlertState';
+import { AdaptableAlert } from '../../../AdaptableState/Common/AdaptableAlert';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { AlertFormContext } from '../../../types';
 import { AlertType } from '../Utilities/getAlertType';

package/src/View/Alert/Wizard/AlertMessageWizardSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AlertType } from '../Utilities/getAlertType';
 export declare const renderAlertMessageSummary: () => React.JSX.Element;
 type AlertDisplayWizardSectionProps = {

package/src/View/Alert/Wizard/AlertNotificationWizardSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AdaptableApi } from '../../../types';
 import { BoxProps } from 'rebass';
 import { AlertType } from '../Utilities/getAlertType';

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

@@ -86,9 +86,11 @@ const AlertNotificationWizardSection = (props) => {
                                 api.alertApi.internalApi.getDefaultAlertNotificationForm();
                         }
                         // make sure we have at least one button
-                        if (typeof newAlertDefinition.AlertForm === 'object' && (!newAlertDefinition.AlertForm?.Buttons || newAlertDefinition.AlertForm?.Buttons?.length === 0)) {
+                        if (typeof newAlertDefinition.AlertForm === 'object' &&
+                            (!newAlertDefinition.AlertForm?.Buttons ||
+                                newAlertDefinition.AlertForm?.Buttons?.length === 0)) {
                             newAlertDefinition.AlertForm.Buttons = [
-                                api.alertApi.internalApi.getDefaultButton()
+                                api.alertApi.internalApi.getDefaultButton(),
                             ];
                         }
                         props.onChange(newAlertDefinition);

package/src/View/Alert/Wizard/AlertRulesWizardSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AlertType } from '../Utilities/getAlertType';
 export declare const getRuleStepDescription: (alertType: AlertType) => "" | React.JSX.Element;
 export declare const renderAlertRulesSummary: (alertDefinition: AlertDefinition) => React.JSX.Element;

package/src/View/Alert/Wizard/AlertScopeWizardSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { AlertType } from '../Utilities/getAlertType';
 type AlertScopeWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;

package/src/View/Alert/Wizard/AlertSelectQueryWizard.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableWizardStep, AdaptableWizardStepProps } from '../../Wizard/Interface/IAdaptableWizard';
-import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AlertDefinition } from '../../../AdaptableState/AlertState';
 export interface AlertSelectQueryWizardProps extends AdaptableWizardStepProps<AlertDefinition> {
 }
 export interface AlertSelectQueryWizardState {

package/src/View/Alert/Wizard/BaseAlertScopeWizardSection.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
+import { AlertDefinition } from '../../../AdaptableState/AlertState';
 import { FlashingCellDefinition } from '../../../../types';
 export declare const renderScopeSummary: (data: AlertDefinition | FlashingCellDefinition) => React.JSX.Element;

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BulkUpdateViewPanelControl = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const Enums_1 = require("../../PredefinedConfig/Common/Enums");
+const Enums_1 = require("../../AdaptableState/Common/Enums");
 const PreviewResultsPanel_1 = require("../Components/PreviewResultsPanel");
 const rebass_1 = require("rebass");
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));

package/src/View/CalculatedColumn/CalculatedColumnSummary.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ModuleSummaryProps } from '../Components/SharedProps/ModuleSummaryProps';
 import { EditableConfigEntityState } from '../Components/SharedProps/EditableConfigEntityState';
-import { CalculatedColumn } from '../../PredefinedConfig/CalculatedColumnState';
+import { CalculatedColumn } from '../../AdaptableState/CalculatedColumnState';
 import type { Action } from 'redux';
 export interface CalculatedColumnSummaryProps extends ModuleSummaryProps<CalculatedColumnSummaryComponent> {
     CalculatedColumns: CalculatedColumn[];

package/src/View/CalculatedColumn/Wizard/CalculatedColumnDefinitionWizardSection.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-import { CalculatedColumn } from '../../../PredefinedConfig/CalculatedColumnState';
+import { CalculatedColumn } from '../../../AdaptableState/CalculatedColumnState';
 export type CalculatedColumnDefinitionWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
     isEdit: boolean;

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CalculatedColumn } from '../../../PredefinedConfig/CalculatedColumnState';
+import { CalculatedColumn } from '../../../AdaptableState/CalculatedColumnState';
 export type CalculatedColumnSettingsWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
     isEdit: boolean;

package/src/View/CellSummary/CellSummaryDetails.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CellSummmaryInfo } from '../../PredefinedConfig/Common/CellSummary';
+import { CellSummmaryInfo } from '../../AdaptableState/Common/CellSummary';
 interface CellSummaryDetailsProps extends React.ClassAttributes<CellSummaryDetails> {
     CellSummary: CellSummmaryInfo;
 }

package/src/View/CellSummary/CellSummaryPopover.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CellSummmaryInfo } from '../../PredefinedConfig/Common/CellSummary';
+import { CellSummmaryInfo } from '../../AdaptableState/Common/CellSummary';
 export interface CellSummaryPopoverProps {
     CellSummary: CellSummmaryInfo;
 }

package/src/View/CellSummary/CellSummaryPopup.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
 import { EditableConfigEntityState } from '../Components/SharedProps/EditableConfigEntityState';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
-import { CellSummmaryInfo } from '../../PredefinedConfig/Common/CellSummary';
+import { CellSummmaryInfo } from '../../AdaptableState/Common/CellSummary';
 interface CellSummaryPopupProps extends ModuleViewPopupProps<CellSummaryPopupComponent> {
     CellSummary: CellSummmaryInfo;
     onCreateCellSummary: () => InternalRedux.CreateCellSummaryInfoAction;

package/src/View/CellSummary/CellSummaryViewPanel.d.ts

@@ -1,9 +1,9 @@
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 import * as React from 'react';
-import { SummaryOperation } from '../../PredefinedConfig/Common/Enums';
-import { CellSummmaryInfo } from '../../PredefinedConfig/Common/CellSummary';
+import { SummaryOperation } from '../../AdaptableState/Common/Enums';
+import { CellSummmaryInfo } from '../../AdaptableState/Common/CellSummary';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
-import { SelectedCellInfo } from '../../PredefinedConfig/Selection/SelectedCellInfo';
+import { SelectedCellInfo } from '../../AdaptableState/Selection/SelectedCellInfo';
 export interface CellSummaryViewPanelComponentProps extends ViewPanelProps {
     SelectedCellInfo: SelectedCellInfo;
     CellSummaryOperation: SummaryOperation | string;

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -4,7 +4,7 @@ exports.CellSummaryViewPanelControl = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
-const Enums_1 = require("../../PredefinedConfig/Common/Enums");
+const Enums_1 = require("../../AdaptableState/Common/Enums");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const CellSummaryPopover_1 = require("./CellSummaryPopover");
 const rebass_1 = require("rebass");

package/src/View/Charting/ChartingStatusBarPopover.js

@@ -9,8 +9,7 @@ const useChartingElements_1 = require("./useChartingElements");
 const rebass_1 = require("rebass");
 const ChartingStatusBarPopover = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const accessLevel = adaptable.api.entitlementApi
-        .getEntitlementAccessLevelForModule(ModuleConstants.ChartingModuleId);
+    const accessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(ModuleConstants.ChartingModuleId);
     const { chartSelector, containerSelector, chartButton, deleteButton, editButton } = (0, useChartingElements_1.useChartingElements)({
         elementType: 'Statusbar',
         accessLevel: accessLevel,

package/src/View/Charting/ChartingWizard/ChartingWizard.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { ExternalChartDefinition } from '../../../PredefinedConfig/ChartingState';
+import { ExternalChartDefinition } from '../../../AdaptableState/ChartingState';
 import { ChartDefinition } from '../../../types';
 import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
 export interface AgChargingWizardProps extends AdaptableOnePageWizardProps<ChartDefinition | ExternalChartDefinition> {

package/src/View/Charting/ChartingWizard/ChartingWizard.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartingWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const ChartingState_1 = require("../../../PredefinedConfig/ChartingState");
+const ChartingState_1 = require("../../../AdaptableState/ChartingState");
 const AgChargingWizard_1 = require("./AgChargingWizard");
 const ExternalChartingWizard_1 = require("./ExternalChartingWizard");
 const ChartingWizard = (props) => {

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/ExternalChartingWizard.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ExternalChartDefinition } from '../../../../PredefinedConfig/ChartingState';
+import { ExternalChartDefinition } from '../../../../AdaptableState/ChartingState';
 import { AdaptableOnePageWizardProps } from '../../../Wizard/Interface/IAdaptableWizard';
 export interface ExternalChartingWizardProps extends AdaptableOnePageWizardProps<ExternalChartDefinition> {
 }

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/SettingsSection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ExternalChartDefinition } from '../../../../PredefinedConfig/ChartingState';
+import { ExternalChartDefinition } from '../../../../AdaptableState/ChartingState';
 import { AdaptableApi } from '../../../../types';
 export declare const isSettingsValid: (chartDefinition: ExternalChartDefinition, api: AdaptableApi) => true | string;
 export interface SettingsSectionProps {

package/src/View/Charting/DeleteChartButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AccessLevel, ChartDefinition } from '../../types';
-import { ExternalChartDefinition } from '../../PredefinedConfig/ChartingState';
+import { ExternalChartDefinition } from '../../AdaptableState/ChartingState';
 export interface ButtonDeleteProps {
     chart: ChartDefinition | ExternalChartDefinition;
     accessLevel: AccessLevel;

package/src/View/Charting/DeleteChartButton.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
 const ChartingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ChartingRedux"));
-const ChartingState_1 = require("../../PredefinedConfig/ChartingState");
+const ChartingState_1 = require("../../AdaptableState/ChartingState");
 const DeleteChartButton = (props) => {
     return (React.createElement(ButtonDelete_1.ButtonDelete, { iconSize: props.iconSize, disabled: !props.chart, ConfirmAction: (0, ChartingState_1.isAgChartDefinition)(props.chart)
             ? ChartingRedux.ChartingDeleteChart(props.chart)

package/src/View/Charting/EditChartButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AccessLevel, ChartDefinition } from '../../types';
-import { ExternalChartDefinition } from '../../PredefinedConfig/ChartingState';
+import { ExternalChartDefinition } from '../../AdaptableState/ChartingState';
 export interface EditChartButtonProps {
     chart: ChartDefinition | ExternalChartDefinition;
     accessLevel: AccessLevel;

package/src/View/Charting/ShowChartButton.js

@@ -7,7 +7,7 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleB
 const AdaptableContext_1 = require("../AdaptableContext");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
-const ChartingState_1 = require("../../PredefinedConfig/ChartingState");
+const ChartingState_1 = require("../../AdaptableState/ChartingState");
 const useAgChartState_1 = require("./useAgChartState");
 const useExternalChartState_1 = require("./useExternalChartState");
 const BaseShowChartButton = (props) => {

package/src/View/Charting/useChartingElements.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ExternalChartDefinition } from '../../PredefinedConfig/ChartingState';
+import { ExternalChartDefinition } from '../../AdaptableState/ChartingState';
 import { AccessLevel, ChartDefinition } from '../../types';
 export declare const useChartingElements: ({ elementType, accessLevel, size, }: {
     elementType: string;

package/src/View/Charting/useChartingElements.js

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const Select_1 = require("../../components/Select");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const ChartingState_1 = require("../../PredefinedConfig/ChartingState");
+const ChartingState_1 = require("../../AdaptableState/ChartingState");
 const ChartingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ChartingRedux"));
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
 const AdaptableContext_1 = require("../AdaptableContext");

package/src/View/Charting/useExternalChartState.d.ts

@@ -1,4 +1,4 @@
-import { ExternalChartDefinition } from '../../PredefinedConfig/ChartingState';
+import { ExternalChartDefinition } from '../../AdaptableState/ChartingState';
 import { ChartContainer } from '../../types';
 export declare const useExternalChartState: (chartDefinition?: ExternalChartDefinition) => {
     showChart: (container?: ChartContainer) => void;

package/src/View/ColumnInfo/ColumnInfo.js

@@ -209,7 +209,6 @@ const ModuleView = (props) => {
             }, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
 };
 const ColumnInfo = (props) => {
-    //  const state = useSelector((state: AdaptableState) => state);
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [selectedColumnId, setSelectedColumnId] = React.useState(props.selectedColumnId);
     const column = adaptable.api.columnApi.getColumnWithColumnId(selectedColumnId);
@@ -219,7 +218,7 @@ const ColumnInfo = (props) => {
                 React.createElement(FormLayout_1.FormRow, { label: "Select Column" },
                     React.createElement(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => !column.alwaysHidden, value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) })))),
         selectedColumnId && (React.createElement(Tabs_1.Tabs, { mb: 3 },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Config"),
+            React.createElement(Tabs_1.Tabs.Tab, null, "State"),
             React.createElement(Tabs_1.Tabs.Tab, null, "Column Summary"),
             React.createElement(Tabs_1.Tabs.Content, null, selectedColumnId && (React.createElement(rebass_1.Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
                 return (React.createElement(ModuleView, { key: moduleName, moduleName: moduleName, selectedColumnId: selectedColumnId }));

package/src/View/Comments/CommentsEditor.js

@@ -12,7 +12,7 @@ const CommentsRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/
 const InternalRedux_1 = require("../../Redux/ActionsReducers/InternalRedux");
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
-const format_1 = tslib_1.__importDefault(require("date-fns/format"));
+const FormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/FormatHelper"));
 // Edit Mode
 // [author] [edit, delete]
 // [text-editor] * this is different
@@ -52,6 +52,9 @@ const CommentsEditor = (props) => {
     if (!commentThread) {
         return null;
     }
+    const formatDate = (date, format) => {
+        return FormatHelper_1.default.DateFormatter(date, { Pattern: format });
+    };
     return (React.createElement(Panel_1.default, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), minWidth: 250, className: "ab-CommentPopup", onKeyDown: (event) => {
             if (event.key === 'Escape') {
                 api.commentApi.hideCommentsPopup();
@@ -79,7 +82,7 @@ const CommentsEditor = (props) => {
                     React.createElement(rebass_1.Flex, { mb: 2, alignItems: "center" },
                         React.createElement(rebass_1.Box, null,
                             React.createElement(rebass_1.Box, { "data-name": "comment-username", fontSize: 3, fontWeight: "bold" }, comment?.Author?.UserName),
-                            comment.Timestamp && (React.createElement(rebass_1.Box, { "data-name": "comment-timestamp", fontSize: 2 }, (0, format_1.default)(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat())))),
+                            comment.Timestamp && (React.createElement(rebass_1.Box, { "data-name": "comment-timestamp", fontSize: 2 }, formatDate(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat())))),
                         React.createElement(rebass_1.Box, { flex: 1 }),
                         React.createElement(SimpleButton_1.default, { variant: "text", icon: "edit", disabled: !isOwnComment || isReadOnlyModule, onClick: () => setActiveEditingComment(comment.Uuid) }),
                         React.createElement(SimpleButton_1.default, { variant: "text", icon: "delete", disabled: !isOwnComment || isReadOnlyModule, onClick: () => {

package/src/View/Comments/CommentsPopup.js

@@ -7,10 +7,10 @@ const react_redux_1 = require("react-redux");
 const InfiniteTable_1 = require("../../components/InfiniteTable");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const rebass_1 = require("rebass");
-const format_1 = tslib_1.__importDefault(require("date-fns/format"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const AdaptableButton_1 = require("../Components/AdaptableButton");
+const FormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/FormatHelper"));
 const tableDOMProps = {
     style: {
         minHeight: 160,
@@ -20,6 +20,9 @@ const tableDOMProps = {
 const CellComments = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
+    const formatDate = (date, format) => {
+        return FormatHelper_1.default.DateFormatter(date, { Pattern: format });
+    };
     const columnsMap = React.useMemo(() => {
         const columns = {
             author: {
@@ -31,7 +34,7 @@ const CellComments = (props) => {
                 field: 'Timestamp',
                 maxWidth: 150,
                 valueGetter: (params) => {
-                    return (0, format_1.default)(params.data.Timestamp, adaptable.api.commentApi.internalApi.getCommentsDateFormat());
+                    return formatDate(params.data.Timestamp, adaptable.api.commentApi.internalApi.getCommentsDateFormat());
                 },
             },
             text: {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Action } from 'redux';
-import { AdaptableObject } from '../../../PredefinedConfig/Common/AdaptableObject';
+import { AdaptableObject } from '../../../AdaptableState/Common/AdaptableObject';
 import { AdaptableObjectItemView, AdaptableObjectView, IModule } from '../../../Strategy/Interface/IModule';
 import { AccessLevel, AdaptableSharedEntityConfig } from '../../../types';
 export declare const AdaptableObjectListItemView: React.FunctionComponent<{

package/src/View/Components/Buttons/ButtonBase/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonProps as BtnProps } from 'rebass';
-import { AccessLevel } from '../../../../PredefinedConfig/Common/Entitlement';
+import { AccessLevel } from '../../../../AdaptableState/Common/Entitlement';
 export interface ButtonBaseProps extends BtnProps {
     overrideDisableButton?: boolean;
     transformGlyph?: boolean;

package/src/View/Components/Buttons/ButtonShare.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SimpleButtonProps } from '../../../components/SimpleButton';
-import { AdaptableSharedEntityConfig } from '../../../PredefinedConfig/TeamSharingState';
+import { AdaptableSharedEntityConfig } from '../../../AdaptableState/TeamSharingState';
 interface ButtonShareProps extends SimpleButtonProps {
     onShare: (config: AdaptableSharedEntityConfig) => void;
     Header: string;

package/src/View/Components/Buttons/EntityListActionButtons.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import * as Redux from 'redux';
-import { AccessLevel } from '../../../PredefinedConfig/Common/Entitlement';
-import { AdaptableSharedEntityConfig } from '../../../PredefinedConfig/TeamSharingState';
-import { AdaptableObject } from '../../../PredefinedConfig/Common/AdaptableObject';
-import { SuspendableObject } from '../../../PredefinedConfig/Common/SuspendableObject';
+import { AccessLevel } from '../../../AdaptableState/Common/Entitlement';
+import { AdaptableSharedEntityConfig } from '../../../AdaptableState/TeamSharingState';
+import { AdaptableObject } from '../../../AdaptableState/Common/AdaptableObject';
+import { SuspendableObject } from '../../../AdaptableState/Common/SuspendableObject';
 export interface EntityListActionButtonsProps extends React.ClassAttributes<EntityListActionButtons> {
     editClick?: () => void;
     cloneClick?: () => void;

package/src/View/Components/Buttons/SuspendToggleButton/SuspendToggleButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { AdaptableObject } from '../../../../PredefinedConfig/Common/AdaptableObject';
-import { AccessLevel } from '../../../../PredefinedConfig/Common/Entitlement';
-import { SuspendableObject } from '../../../../PredefinedConfig/Common/SuspendableObject';
+import { AdaptableObject } from '../../../../AdaptableState/Common/AdaptableObject';
+import { AccessLevel } from '../../../../AdaptableState/Common/Entitlement';
+import { SuspendableObject } from '../../../../AdaptableState/Common/SuspendableObject';
 interface EntityListSuspendButtonProps {
     onSuspend: (adaptableObject: AdaptableObject) => void;
     onUnSuspend: (adaptableObject: AdaptableObject) => void;

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

@@ -4,6 +4,7 @@ export interface AdaptableColumnFilterProps {
     columnId: string;
     padding?: BoxProps['p'];
     wrapperProps?: BoxProps;
+    onChange?: () => void;
 }
 /**
  * This wrapper knows about predicates.

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

@@ -11,6 +11,9 @@ const useAdaptableFilterWrapper_1 = require("./useAdaptableFilterWrapper");
  */
 const AdaptableColumnFilter = (props) => {
     const { qlPredicate, qlPredicateDefs, columnFilter, handlePredicateChange } = (0, useAdaptableFilterWrapper_1.useAdaptableFilterWrapper)(props.columnId);
-    return (React.createElement(ColumnFilter_1.ColumnFilterComponent, { wrapperProps: props.wrapperProps, columnId: props.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: handlePredicateChange }));
+    return (React.createElement(ColumnFilter_1.ColumnFilterComponent, { wrapperProps: props.wrapperProps, columnId: props.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: React.useCallback((predicate) => {
+            handlePredicateChange(predicate);
+            props.onChange?.();
+        }, [handlePredicateChange, props.onChange]) }));
 };
 exports.AdaptableColumnFilter = AdaptableColumnFilter;

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { ColumnFilterProps } from '../../../Utilities/Interface/ColumnFilterProps';
 export interface AdaptableColumnFilterProps extends ColumnFilterProps {
+    onClear?: () => void;
+    onChange?: () => void;
 }
 /**
  * This wrapper knows about predicates.

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

@@ -13,6 +13,14 @@ const useAdaptableFilterWrapper_1 = require("./useAdaptableFilterWrapper");
 const AdaptableFloatingFilter = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { qlPredicate, qlPredicateDefs, columnFilter, column, handlePredicateChange, handleOnChange, handleClear, } = (0, useAdaptableFilterWrapper_1.useAdaptableFilterWrapper)(props.Column.columnId);
+    const onClear = React.useCallback(() => {
+        handleClear();
+        props.onClear?.();
+    }, [handleClear, props.onClear]);
+    const onPredicateChange = React.useCallback((newPredicate) => {
+        handlePredicateChange(newPredicate);
+        props.onChange?.();
+    }, [handlePredicateChange, props.onChange]);
     if (!column) {
         return null;
     }
@@ -28,9 +36,8 @@ const AdaptableFloatingFilter = (props) => {
                         Inputs: [],
                     },
                 ]);
+                props.onChange?.();
             }
-        }, onClear: handleClear, columnId: props.Column.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: (newPredicate) => {
-            handlePredicateChange(newPredicate);
-        } }));
+        }, onClear: onClear, columnId: props.Column.columnId, predicate: qlPredicate, predicateDefs: qlPredicateDefs, disabled: columnFilter?.IsSuspended, onPredicateChange: onPredicateChange }));
 };
 exports.AdaptableFloatingFilter = AdaptableFloatingFilter;

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

@@ -6,7 +6,7 @@ interface ColumnFilterComponentProps {
     disabled?: boolean;
     predicate?: QlPredicate;
     predicateDefs: QlPredicateDef[];
-    onPredicateChange: (predicate: QlPredicate) => void;
+    onPredicateChange: (predicate: QlPredicate | null) => void;
     wrapperProps?: BoxProps;
 }
 export declare const ColumnFilterComponent: React.FunctionComponent<ColumnFilterComponentProps>;

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

@@ -73,7 +73,9 @@ const ColumnFilterComponent = (props) => {
         setPredicateNotYetApplied(undefined);
     };
     const onPredicateChange = (predicate) => {
-        if (autoApplyColumnFilter) {
+        // even if autoApplyColumnFilter is false, when we explicitly clear the filter
+        // we want to apply the filter immediately
+        if (autoApplyColumnFilter || !predicate) {
             props.onPredicateChange(predicate);
         }
         else {
@@ -116,7 +118,7 @@ const ColumnFilterComponent = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(rebass_1.Flex, { m: 2 },
             React.createElement(AndOrInput, { onChange: onCombineChange, operator: currentPredicate.operator }),
-            React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => onPredicateChange({ operator: 'AND', args: [] }) }, "Clear All")),
+            React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => onPredicateChange(null) }, "Clear All")),
         React.createElement(rebass_1.Flex, { flexDirection: "column", className: "ab-ColumnFilter", flex: 1, minHeight: 0, ...props.wrapperProps },
             React.createElement(rebass_1.Box, { flex: 1, style: { overflow: 'auto' } },
                 currentPredicate.args.map((predicate, index) => {

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

@@ -35,7 +35,7 @@ const FloatingFilter = (props) => {
         label = '';
     }
     const showQuickFilterDropdown = adaptable.api.filterApi.columnFilterApi.internalApi.showQuickFilterDropdown(props.columnId);
-    const handleClear = () => props.onClear();
+    const handleClear = () => props.onClear?.();
     const showEvent = 'click';
     const hideEvent = 'blur';
     let filterDropdown = null;
@@ -82,7 +82,7 @@ const FloatingFilter = (props) => {
                 } }))),
         isInlineEditable && (React.createElement(SimpleButton_1.default, { px: 0, onClick: () => {
                 adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId);
-            }, icon: "expand", variant: "text" })),
+            }, "data-name": "expand-filter", icon: "expand", variant: "text" })),
         (isMultiple ||
             !(0, utils_1.isPredicateEmpty)(props.predicate.args[0], singleFilterPredicateDef)) && (React.createElement(SimpleButton_1.default, { "data-name": "clear-filter", p: 0, variant: "text", onClick: handleClear, icon: "close" }))));
 };

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

@@ -21,7 +21,7 @@ const LayoutColumnFilter = (props) => {
             ...props.columnFilter,
             ColumnId: props.columnFilter.ColumnId,
             Predicates: newAdaptablePredicates,
-            PredicatesLogic: newPredicate.operator,
+            PredicatesOperator: newPredicate.operator,
         };
         props.onColumnFilterChange(newFilter);
     };

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

@@ -16,7 +16,7 @@ type ColumnFilterEditorChangeProps = {
     value: string;
     onChange: (value: string) => void;
 };
-export declare const ColumnFilterInput: ({ type, value, onChange: onChangeProp, onClear, disabled, onKeyDown, filterType, usePrimitiveInputs, columnId, }: {
+export declare const ColumnFilterInput: ({ type, value, onChange: onChangeProp, onClear: onClearProp, disabled, onKeyDown, filterType, usePrimitiveInputs, columnId, }: {
     disabled: boolean;
     onClear: () => void;
     onKeyDown?: (event: React.KeyboardEventHandler<HTMLInputElement>) => void;

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

@@ -13,7 +13,7 @@ const react_1 = require("react");
 function debounceOrImmediate(fn, time) {
     return time && time > 0 ? (0, debounce_1.default)(fn, time) : fn;
 }
-const ColumnFilterInput = ({ type, value, onChange: onChangeProp, onClear, disabled, onKeyDown, filterType, usePrimitiveInputs = true, columnId, }) => {
+const ColumnFilterInput = ({ type, value, onChange: onChangeProp, onClear: onClearProp, disabled, onKeyDown, filterType, usePrimitiveInputs = true, columnId, }) => {
     const [liveValue, setLiveValue] = React.useState(value);
     const [hasFocus, setHasFocus] = React.useState(false);
     const onFocus = (0, react_1.useCallback)(() => {
@@ -43,6 +43,12 @@ const ColumnFilterInput = ({ type, value, onChange: onChangeProp, onClear, disab
             onChangeProp(value);
         }, debounceTime);
     }, [onChangeProp, debounceTime]);
+    // the onClear needs to have the same debounce time as the onChange
+    const onClear = React.useMemo(() => {
+        return debounceOrImmediate(() => {
+            onClearProp();
+        }, debounceTime);
+    }, [onClearProp, debounceTime]);
     if (type === 'boolean') {
         return (React.createElement(CheckBox_1.CheckBox, { disabled: disabled, onFocus: onFocus, onBlur: onBlur, checked: value === 'checked'
                 ? true

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

@@ -6,7 +6,7 @@ export declare const useAdaptableFilterWrapper: (columnId: string, handleOnChang
     qlPredicateDefs: import("@adaptabletools/adaptable/src/parser/src/predicate/types").QlPredicateDef[];
     columnFilter: ColumnFilter;
     handleClear: () => LayoutRedux.LayoutColumnFilterClearAction;
-    handlePredicateChange: (newPredicate: QlPredicate) => void;
+    handlePredicateChange: (newPredicate: QlPredicate | null) => void;
     handleOnChange: (adaptablePredicate: AdaptablePredicate[], logic?: QlLogicalOperator) => void;
     column: import("../../../types").AdaptableColumn<any>;
 };

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

@@ -35,7 +35,7 @@ const useAdaptableFilterWrapper = (columnId, handleOnChangeOverride) => {
             ...columnFilter,
             ColumnId: columnId,
             Predicates: adaptablePredicate,
-            PredicatesLogic: logic,
+            PredicatesOperator: logic,
         };
         if (handleOnChangeOverride) {
             handleOnChangeOverride(newFilter);
@@ -46,11 +46,15 @@ const useAdaptableFilterWrapper = (columnId, handleOnChangeOverride) => {
                 : LayoutRedux.LayoutColumnFilterAdd(newFilter));
         }
     };
-    const handleClear = () => dispatch(LayoutRedux.LayoutColumnFilterClear(columnFilter));
+    const handleClear = React.useCallback(() => dispatch(LayoutRedux.LayoutColumnFilterClear(columnId)), [columnId]);
     /**
      * Converts a QlPredicate to an AdaptablePredicate and dispatches the change.
      */
     const handlePredicateChange = React.useCallback((newPredicate) => {
+        if (!newPredicate) {
+            handleClear();
+            return;
+        }
         const newAdaptablePredicates = newPredicate.args.map(utils_1.mapQlPredicateToAdaptablePredicate);
         handleOnChange(newAdaptablePredicates, newPredicate.operator);
     }, [columnId]);