@adaptabletools/adaptable 22.0.0-canary.11 → 22.0.0-canary.13

package/src/Utilities/utils/words.js

@@ -0,0 +1,10 @@
+/**
+ * Split a string into words: handles camelCase, PascalCase, UPPER_CASE,
+ * UPPER_SNAKE_CASE, snake_case, kebab-case, spaces, and dot.notation.
+ *
+ * Shared helper used by kebabCase, startCase, and sentenceCase.
+ */
+export default function words(str) {
+    const matches = str.match(/[A-Z]?[a-z]+|[A-Z]+(?=[A-Z][a-z]|\d|$|[^a-zA-Z0-9])|[A-Z]|[0-9]+/g);
+    return matches || [];
+}

package/src/Utilities/weightedAverage.js

@@ -1,4 +1,4 @@
-import toNumber from 'lodash/toNumber';
+import toNumber from './utils/toNumber';
 export const getNumericValue = (input) => {
     if (typeof input === 'number') {
         return input;

package/src/View/AdaptableComputedCSSVarsContext.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CSSNumericVariableWatch } from '../components/Select/CSSNumericVariableWatch';
-import debounce from 'lodash/debounce';
+import debounce from '../Utilities/utils/debounce';
 import { useMemo } from 'react';
 const computedCSSVarNames = [
     '--ab-cmp-select-menu__max-width',

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.js

@@ -8,7 +8,7 @@ import { useRef, useState } from 'react';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { DataSource, InfiniteTableGrid, } from '../../../components/InfiniteTable';
 import { Box, Flex } from '../../../components/Flex';
-import throttle from 'lodash/throttle';
+import throttle from '../../../Utilities/utils/throttle';
 import { twMerge } from '../../../twMerge';
 const dataTypes = [
     {

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

@@ -8,7 +8,7 @@ import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
 import { Select } from '../../../components/Select';
 import { Box, Flex } from '../../../components/Flex';
-import { sentenceCase } from 'sentence-case';
+import sentenceCase from '../../../Utilities/utils/sentenceCase';
 function renderCommand(command) {
     switch (command) {
         case 'highlight-cell':

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import isEqual from 'lodash/isEqual';
+import isEqual from '../../../../Utilities/utils/isEqual';
 import * as InternalRedux from '../../../../Redux/ActionsReducers/InternalRedux';
 import { useAdaptable } from '../../../AdaptableContext';
 export const PreviewChartSection = (props) => {

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

@@ -4,7 +4,7 @@ import AdaptableInput from '../../AdaptableInput';
 import { AdaptableDateInlineInput } from '../../AdaptableInput/AdaptableDateInlineInput';
 import { PermittedValuesSelector } from '../../Selectors/PermittedValuesSelector';
 import { useAdaptable } from '../../../AdaptableContext';
-import debounce from 'lodash/debounce';
+import debounce from '../../../../Utilities/utils/debounce';
 import { useCallback } from 'react';
 function debounceOrImmediate(fn, time) {
     return time && time > 0 ? debounce(fn, time) : fn;

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

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash';
+import debounce from '../../../../Utilities/utils/debounce';
 import * as React from 'react';
 import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
 import Panel from '../../../../components/Panel';

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

@@ -1,4 +1,4 @@
-import { debounce } from 'lodash';
+import debounce from '../../../../Utilities/utils/debounce';
 import * as React from 'react';
 import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../../Utilities/adaptableQlUtils';

package/src/View/Components/RangesComponent.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ColorPicker } from '../../components/ColorPicker';
-import clamp from 'lodash/clamp';
+import clamp from '../../Utilities/utils/clamp';
 import { CheckBox } from '../../components/CheckBox';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import { NumberInput } from '../../components/Input/NumberInput';

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import kebabCase from 'lodash/kebabCase';
+import kebabCase from '../../../Utilities/utils/kebabCase';
 import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
 import { connect } from 'react-redux';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';

package/src/View/Components/ToolPanel/CustomToolPanelContent.js

@@ -3,7 +3,7 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import { useAdaptable } from '../../AdaptableContext';
 import { createUuid } from '../../../components/utils/uuid';
 import SimpleButton from '../../../components/SimpleButton';
-import kebabCase from 'lodash/kebabCase';
+import kebabCase from '../../../Utilities/utils/kebabCase';
 export const CustomToolPanelContent = (props) => {
     const { customToolPanel } = props;
     const { api } = useAdaptable();

package/src/View/Components/ValueSelector/index.js

@@ -159,7 +159,12 @@ export const renderSelectionSection = (props) => {
     const { value, options, disabled, singleSelect, toLabel, toIdentifier, } = props;
     const selectionBox = (React.createElement(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:py-2" },
         React.createElement(Box, { className: clsx('twa:flex twa:flex-row', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
-            React.createElement(CheckBox, { className: "twa:ml-0.5 twa:font-bold", checked: !value.length ? false : value.length === options.length ? true : null, onChange: (checked) => {
+            singleSelect ? (React.createElement(Box, { className: "twa:flex twa:flex-row twa:text-3 twa:font-normal" },
+                "(",
+                value.length,
+                " of ",
+                options.length,
+                " selected)")) : (React.createElement(CheckBox, { className: "twa:ml-0.5 twa:font-bold", checked: !value.length ? false : value.length === options.length ? true : null, onChange: (checked) => {
                     if (checked) {
                         props.onSelectAll();
                     }
@@ -174,7 +179,7 @@ export const renderSelectionSection = (props) => {
                         value.length,
                         " of ",
                         options.length,
-                        " selected)"))),
+                        " selected)")))),
             React.createElement("div", { className: "twa:flex-1" }),
             React.createElement(Box, { className: "twa:mr-2 twa:text-2 twa:font-normal" }, props.showOnlySelectedCheckbox))));
     return React.createElement(Box, { className: clsx(`${baseClassName}__header `) }, selectionBox);

package/src/View/Dashboard/CustomDashboardButton.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import SimpleButton from '../../components/SimpleButton';
-import kebabCase from 'lodash/kebabCase';
+import kebabCase from '../../Utilities/utils/kebabCase';
 export const CustomDashboardButton = (props) => {
     const { button } = props;
     const [componentRevision, setComponentRevision] = useState(1);

package/src/View/Dashboard/Dashboard.js

@@ -1,4 +1,4 @@
-import kebabCase from 'lodash/kebabCase';
+import kebabCase from '../../Utilities/utils/kebabCase';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dashboard as DashboardUI, DashboardTab as DashboardTabUI, } from '../../components/Dashboard';

package/src/View/DataImport/DataImportWizard/sections/DataPreview.js

@@ -1,4 +1,4 @@
-import flatten from 'lodash/flatten';
+import flatten from '../../../../Utilities/utils/flatten';
 import * as React from 'react';
 import HelpBlock from '../../../../components/HelpBlock';
 import { Icon } from '../../../../components/icons';

package/src/View/DataSet/DataSetViewPanel.d.ts

@@ -16,8 +16,8 @@ declare class DataSetViewPanelComponent extends React.Component<DataSetViewPanel
     onSelectedDataSetChanged(dataSetName: string): void;
 }
 export declare let DataSetViewPanelControl: import("react-redux").ConnectedComponent<typeof DataSetViewPanelComponent, {
-    ref?: React.Ref<DataSetViewPanelComponent>;
     key?: React.Key | null | undefined;
+    ref?: React.Ref<DataSetViewPanelComponent>;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
     store?: import("redux").Store;
 }>;

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

@@ -35,6 +35,14 @@ export const NewReportWizard = (props) => {
         props.onFinishWizard(report);
     };
     return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: report, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                title: 'Name',
+                details: 'Enter the name of the Report',
+                isValid: isValidReportName,
+                renderSummary: renderReportNameSummary,
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
+                    React.createElement(ReportNameWizardSection, { onChange: setReport }))),
+            },
             {
                 title: 'Columns',
                 details: 'Choose the Columns you want to include in the Report',
@@ -48,14 +56,6 @@ export const NewReportWizard = (props) => {
                 renderSummary: renderReportRowsSummary,
                 render: () => React.createElement(ReportRowsWizardSection, { onChange: setReport }),
             },
-            {
-                title: 'Name',
-                details: 'Enter the name of the Report',
-                isValid: isValidReportName,
-                renderSummary: renderReportNameSummary,
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ReportNameWizardSection, { onChange: setReport }))),
-            },
             {
                 details: 'Select Report Tags',
                 title: 'Tags',

package/src/View/Filter/FilterViewPanel.d.ts

@@ -18,8 +18,8 @@ declare class FilterViewPanelComponent extends React.Component<FilterViewPanelCo
     private onClearFilters;
 }
 export declare const FilterViewPanelControl: import("react-redux").ConnectedComponent<typeof FilterViewPanelComponent, {
-    ref?: React.Ref<FilterViewPanelComponent>;
     key?: React.Key | null | undefined;
+    ref?: React.Ref<FilterViewPanelComponent>;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
     store?: import("redux").Store;
 }>;

package/src/View/FlashingCell/Wizard/FlashingCellSettingsWizardSection.js

@@ -80,15 +80,12 @@ export const FlashingAlertSettingsWizardSection = (props) => {
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Name" },
-                        React.createElement(Input, { "data-name": "flashing-cell-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' })),
-                    React.createElement(FormRow, { label: "Flash Target" },
-                        React.createElement(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
-                                flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1 }, "Cell"),
-                        React.createElement(CheckBox, { "data-name": "flashing-target-row", className: "twa:mr-3", onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
-                                flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1 }, "Row"),
-                        React.createElement(CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
-                                flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")),
-                    React.createElement(FormRow, { label: "Duration" },
+                        React.createElement(Input, { "data-name": "flashing-cell-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' }))))),
+        React.createElement(Tabs, { autoFocus: false, className: "twa:p-2" },
+            React.createElement(Tabs.Tab, null, "Flash Duration"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "" },
                         React.createElement(Flex, { alignItems: "center" },
                             React.createElement(CheckBox, { "data-name": "duration-always", checked: duration === 'always', onChange: (checked) => handleTypeChange(checked ? 'always' : 'number'), className: "twa:mr-4", tabIndex: -1 }, "Always"),
                             duration !== 'always' && (React.createElement(React.Fragment, null,
@@ -96,5 +93,17 @@ export const FlashingAlertSettingsWizardSection = (props) => {
                                         const value = event.target.value;
                                         setDuration(isNaN(Number(value)) ? 500 : Number(value));
                                     } }),
-                                React.createElement(Box, { className: "twa:text-2" }, "ms"))))))))));
+                                React.createElement(Box, { className: "twa:text-2" }, "ms")))))))),
+        ' ',
+        React.createElement(Tabs, { autoFocus: false, className: "twa:p-2" },
+            React.createElement(Tabs.Tab, null, "Flash Target"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "" },
+                        React.createElement(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
+                                flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1 }, "Cell"),
+                        React.createElement(CheckBox, { "data-name": "flashing-target-row", className: "twa:mr-3", onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
+                                flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1 }, "Row"),
+                        React.createElement(CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
+                                flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")))))));
 };

package/src/View/FlashingCell/Wizard/FlashingCellWizard.js

@@ -73,7 +73,7 @@ export const FlashingCellWizard = (props) => {
                 isValid: isScopeValid,
                 render: () => React.createElement(FlashingAlertScopeWizardSection, { onChange: setFlashingCell }),
                 renderSummary: renderScopeSummary,
-                title: 'Scope',
+                title: 'Columns',
             },
             {
                 details: 'Build the Rules for when Cells should Flash',

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import uniq from 'lodash/uniq';
-import clamp from 'lodash/clamp';
+import uniq from '../../../Utilities/utils/uniq';
+import clamp from '../../../Utilities/utils/clamp';
 import HelpBlock from '../../../components/HelpBlock';
 import Input from '../../../components/Input';
 import SimpleButton from '../../../components/SimpleButton';

package/src/View/FormatColumn/Wizard/FormatColumnRowScopeWizardSection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FormatColumn } from '../../../AdaptableState/FormatColumnState';
+type FormatColumnRowScopeWizardSectionProps = {
+    onChange: (data: FormatColumn) => void;
+};
+export declare const renderFormatColumnRowScopeSummary: (data: FormatColumn) => React.JSX.Element;
+export declare const FormatColumnRowScopeWizardSection: (props: FormatColumnRowScopeWizardSectionProps) => React.JSX.Element;
+export {};

package/src/View/FormatColumn/Wizard/FormatColumnRowScopeWizardSection.js

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { CheckBox } from '../../../components/CheckBox';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Tag } from '../../../components/Tag';
+import { Box, Flex } from '../../../components/Flex';
+import { Tabs } from '../../../components/Tabs';
+export const renderFormatColumnRowScopeSummary = (data) => {
+    return (React.createElement(Box, { className: "twa:p-2" },
+        React.createElement(Box, { className: "twa:mt-3" },
+            "Data Rows ",
+            React.createElement(Tag, null, data.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
+        ' ',
+        React.createElement(Box, { className: "twa:mt-3" },
+            "Group Rows ",
+            React.createElement(Tag, null, data.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
+        React.createElement(Box, { className: "twa:mt-3" },
+            "Summary Rows ",
+            React.createElement(Tag, null, data.RowScope?.ExcludeSummaryRows ? 'no' : 'yes')),
+        React.createElement(Box, { className: "twa:mt-3" },
+            "Total Rows ",
+            React.createElement(Tag, null, data.RowScope?.ExcludeTotalRows ? 'no' : 'yes'))));
+};
+export const FormatColumnRowScopeWizardSection = (props) => {
+    const { data } = useOnePageAdaptableWizardContext();
+    const onExcludeDataRowsChanged = (includeDataRows) => {
+        props.onChange({
+            ...data,
+            RowScope: {
+                ...data.RowScope,
+                ExcludeDataRows: !includeDataRows,
+            },
+        });
+    };
+    const onExcludeGroupedRowsChanged = (includeGroupedRows) => {
+        props.onChange({
+            ...data,
+            RowScope: {
+                ...data.RowScope,
+                ExcludeGroupRows: !includeGroupedRows,
+            },
+        });
+    };
+    const onExcludeSummaryRowsChanged = (includeSummaryRows) => {
+        props.onChange({
+            ...data,
+            RowScope: {
+                ...data.RowScope,
+                ExcludeSummaryRows: !includeSummaryRows,
+            },
+        });
+    };
+    const onExcludeTotalRowsChanged = (includeTotalRows) => {
+        props.onChange({
+            ...data,
+            RowScope: {
+                ...data.RowScope,
+                ExcludeTotalRows: !includeTotalRows,
+            },
+        });
+    };
+    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' } },
+        React.createElement(Tabs, { className: "twa:mb-3" },
+            React.createElement(Tabs.Tab, null, "Row Types"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout, null, data.Target === 'cell' && (React.createElement(React.Fragment, null,
+                        React.createElement(FormRow, { label: "Data (leaf) Rows:" },
+                            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                                React.createElement(CheckBox, { "data-name": "include-data-rows-checkbox", checked: !data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, className: "twa:mr-2" }))),
+                        React.createElement(FormRow, { label: "Group Rows:" },
+                            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                                React.createElement(CheckBox, { "data-name": "include-grouped-rows-checkbox", checked: !data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, className: "twa:mr-2" }))),
+                        React.createElement(FormRow, { label: "Summary Rows:" },
+                            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                                React.createElement(CheckBox, { "data-name": "include-summary-rows-checkbox", checked: !data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, className: "twa:mr-2" }))),
+                        React.createElement(FormRow, { label: "Total Rows:" },
+                            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                                React.createElement(CheckBox, { "data-name": "include-total-rows-checkbox", checked: !data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, className: "twa:mr-2" })))))))))));
+};

package/src/View/FormatColumn/Wizard/FormatColumnSettingsWizardSection.js

@@ -1,30 +1,22 @@
 import * as React from 'react';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
-import { CheckBox } from '../../../components/CheckBox';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Tag } from '../../../components/Tag';
 import Radio, { RadioGroup } from '../../../components/Radio';
 import { Box, Flex } from '../../../components/Flex';
 import { Tabs } from '../../../components/Tabs';
 import Input from '../../../components/Input';
+import { TypeRadio } from '../../Wizard/TypeRadio';
 export const renderFormatColumnSettingsSummary = (data) => {
     return (React.createElement(Box, { className: "twa:p-2" },
         React.createElement(Box, { className: "twa:mt-3" },
             "Name ",
             React.createElement(Tag, null, data.Name)),
         React.createElement(Box, { className: "twa:mt-3" },
-            "Data Rows ",
-            React.createElement(Tag, null, data.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
+            "Target",
+            ' ',
+            React.createElement(Tag, null, !data.Target || data.Target === 'cell' ? 'Column Cells' : 'Column Header')),
         ' ',
-        React.createElement(Box, { className: "twa:mt-3" },
-            "Group Rows ",
-            React.createElement(Tag, null, data.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
-        React.createElement(Box, { className: "twa:mt-3" },
-            "Summary Rows ",
-            React.createElement(Tag, null, data.RowScope?.ExcludeSummaryRows ? 'no' : 'yes')),
-        React.createElement(Box, { className: "twa:mt-3" },
-            "Total Rows ",
-            React.createElement(Tag, null, data.RowScope?.ExcludeTotalRows ? 'no' : 'yes')),
         React.createElement(Box, { className: "twa:mt-3" },
             "Apply on Column Groups:",
             ' ',
@@ -33,49 +25,22 @@ export const renderFormatColumnSettingsSummary = (data) => {
                 : data.ColumnGroupScope))));
 };
 export const FormatColumnSettingsWizardSection = (props) => {
-    const { data } = useOnePageAdaptableWizardContext();
-    const onNameChange = (event) => {
-        props.onChange({
-            ...data,
-            Name: event.target.value,
-        });
-    };
-    const onExcludeDataRowsChanged = (ExcludeDataRows) => {
-        props.onChange({
-            ...data,
-            RowScope: {
-                ...data.RowScope,
-                ExcludeDataRows,
-            },
-        });
-    };
-    const onExcludeGroupedRowsChanged = (ExcludeGroupedRows) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
+    const currentTarget = data.Target ? data.Target : 'cell';
+    const handleTargetChange = (target) => {
+        // Update the formatColumn object
         props.onChange({
             ...data,
-            RowScope: {
-                ...data.RowScope,
-                ExcludeGroupRows: ExcludeGroupedRows,
-            },
+            Target: target,
         });
     };
-    const onExcludeSummaryRowsChanged = (ExcludeSummaryRows) => {
-        props.onChange({
-            ...data,
-            RowScope: {
-                ...data.RowScope,
-                ExcludeSummaryRows,
-            },
-        });
-    };
-    const onExcludeTotalRowsChanged = (ExcludeTotalRows) => {
+    const onNameChange = (event) => {
         props.onChange({
             ...data,
-            RowScope: {
-                ...data.RowScope,
-                ExcludeTotalRows,
-            },
+            Name: event.target.value,
         });
     };
+    const behaviourSpellingVariant = api.internalApi.getCorrectEnglishVariant('Behaviour');
     return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' } },
         React.createElement(Tabs, { className: "twa:mb-3" },
             React.createElement(Tabs.Tab, null, "Settings"),
@@ -84,24 +49,20 @@ export const FormatColumnSettingsWizardSection = (props) => {
                     React.createElement(FormLayout, { className: "twa:max-w-[300px] twa:w-full" },
                         React.createElement(FormRow, { label: "Name" },
                             React.createElement(Input, { className: "twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
+        React.createElement(Tabs, { className: "twa:mb-3" },
+            React.createElement(Tabs.Tab, null, "Target"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "column" },
+                    React.createElement(TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "Column Cells are styled and formatted", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }),
+                    React.createElement(TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "The Column Header is styled (Note: Conditions are not available for Column Headers)", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') })))),
         React.createElement(Tabs, null,
-            React.createElement(Tabs.Tab, null, "Configuration"),
+            React.createElement(Tabs.Tab, null,
+                "Column Group ",
+                behaviourSpellingVariant,
+                " "),
             React.createElement(Tabs.Content, null,
                 React.createElement(Flex, { flexDirection: "row" },
                     React.createElement(FormLayout, null,
-                        data.Target === 'cell' && (React.createElement(React.Fragment, null,
-                            React.createElement(FormRow, { label: "Exclude Data Rows:" },
-                                React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-                                    React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, className: "twa:mr-2" }))),
-                            React.createElement(FormRow, { label: "Exclude Group Rows:" },
-                                React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-                                    React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, className: "twa:mr-2" }))),
-                            React.createElement(FormRow, { label: "Exclude Row Summaries:" },
-                                React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-                                    React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, className: "twa:mr-2" }))),
-                            React.createElement(FormRow, { label: "Exclude Total Rows:" },
-                                React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
-                                    React.createElement(CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, className: "twa:mr-2" }))))),
                         React.createElement(FormRow, { label: "Apply on Column Group:" },
                             React.createElement(RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
                                     props.onChange({

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -2,7 +2,10 @@ import * as React from 'react';
 import { useState } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
-import { FormatColumnScopeWizardSection, renderFormatColumnScopeSummary, } from './FormatColumnScopeWizardSection';
+import { FormatColumnScopeWizardSection, renderFormatColumnScopeSummary, } from './FormatColumnColumnScopeWizardSection';
+import { FormatColumnRowScopeWizardSection, renderFormatColumnRowScopeSummary,
+// renderFormatColumnRowScopeSummary,
+ } from './FormatColumnRowScopeWizardSection';
 import { FormatColumnStyleWizardSection, isFormatColumnStyleValid, renderFormatColumnStyleWizardSummary, } from './FormatColumnStyleWizardSection';
 import { FormatColumnFormatWizardSection, getFormatDisplayTypeForScope, renderFormatColumnFormatSummary, } from './FormatColumnFormatWizardSection';
 import { useAdaptable } from '../../AdaptableContext';
@@ -17,11 +20,22 @@ import { isAdaptableRuleValid } from '../../Components/EntityRulesEditor/Utiliti
 import { FormatColumnRuleWizardSection } from './FormatColumnRuleWizardSection';
 import { DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN } from './constants';
 import { isObjectEmpty } from '../../../Utilities/Extensions/ObjectExtensions';
-import { FormatColumnTargetWizardSection, renderFormatColumnTargetSummary, } from './FormatColumnTargetWizardSection';
 import { Box, Flex } from '../../../components/Flex';
 const adjustDisplayFormat = (fc, api) => {
     const formatColumn = { ...fc };
     let formatDataType = getFormatDisplayTypeForScope(formatColumn.Scope, api);
+    // Add RowScope and Target defaults for Format Columns that have been created in Initial State
+    if (!formatColumn.RowScope) {
+        formatColumn.RowScope = {
+            ExcludeDataRows: false,
+            ExcludeGroupRows: false,
+            ExcludeSummaryRows: false,
+            ExcludeTotalRows: false,
+        };
+    }
+    if (!formatColumn.Target) {
+        formatColumn.Target = 'cell';
+    }
     if (formatColumn.Target === 'columnHeader') {
         // Column Headers are always text
         formatDataType = 'text';
@@ -96,7 +110,7 @@ export function FormatColumnWizard(props) {
     return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Settings',
-                details: 'Enter Name and set Additional Properties',
+                details: 'Enter Name and other Properties',
                 isValid: (formatColumnData) => {
                     if (!formatColumnData.Name) {
                         return 'Format Column Name cannot be blank';
@@ -113,7 +127,7 @@ export function FormatColumnWizard(props) {
                 },
             },
             {
-                title: 'Scope',
+                title: 'Columns',
                 details: 'Select which Columns will be formatted',
                 isValid: isScopeValid,
                 renderSummary: renderFormatColumnScopeSummary,
@@ -123,12 +137,12 @@ export function FormatColumnWizard(props) {
                 },
             },
             {
-                title: 'Target',
-                details: 'Select which Columns Elements will be formatted',
-                renderSummary: renderFormatColumnTargetSummary,
+                title: 'Rows',
+                details: 'Select which Rows will be formatted',
+                renderSummary: renderFormatColumnRowScopeSummary,
                 render: () => {
                     return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
-                        React.createElement(FormatColumnTargetWizardSection, { onChange: setFormatColumn })));
+                        React.createElement(FormatColumnRowScopeWizardSection, { onChange: setFormatColumn })));
                 },
             },
             {

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -21,14 +21,14 @@ const QueryViewPanelComponent = (props) => {
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
     const buttonExpand = (React.createElement(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
     const renderExpressionLabel = () => {
-        const baseClasses = 'twa:font-mono twa:text-xs twa:py-1.5 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-white twa:rounded twa:cursor-pointer twa:h-7 twa:leading-4';
+        const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-defaultbackground twa:text-text-on-defaultbackground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
         const placeholderClasses = 'twa:text-gray-400 twa:italic';
         const labelClassName = clsx(baseClasses, {
             [placeholderClasses]: !expression,
         });
         const expressionLabel = (React.createElement(Tooltip, { label: expression || 'Click to edit Grid Filter' },
-            React.createElement(Box, { className: clsx('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand }, expression || 'Grid Filter')));
-        return (React.createElement(FieldWrap, { className: "twa:flex-1 twa:min-w-0 twa:overflow-visible" },
+            React.createElement(Box, { className: clsx('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand }, expression || 'Grid Filter...')));
+        return (React.createElement(FieldWrap, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible" },
             buttonExpand,
             expressionLabel,
             gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))));

package/src/View/Layout/LayoutViewPanel.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import { connect } from 'react-redux';
-import isEqual from 'lodash/isEqual';
+import isEqual from '../../Utilities/utils/isEqual';
 import { Select } from '../../components/Select';
 import join from '../../components/utils/join';
 import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';

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

@@ -365,7 +365,7 @@ export const ColumnsSection = (props) => {
     const visibleIds = layout.TableColumns.filter((colId) => {
         return (layout.ColumnVisibility?.[colId] !== false &&
             adaptable.api.columnApi.isSelectionColumn(colId) === false &&
-            !adaptable.api.columnApi.internalApi.isAlwaysHiddenColumn(colId));
+            !adaptable.api.columnApi.internalApi.isColumnUIHidden(colId));
     });
     const currentlyDisplayedColumnIds = searchInputValue
         ? currentOrder

package/src/View/Note/NoteEditor.js

@@ -1,4 +1,4 @@
-import throttle from 'lodash/throttle';
+import throttle from '../../Utilities/utils/throttle';
 import * as React from 'react';
 import Textarea from '../../components/Textarea';
 import SimpleButton from '../../components/SimpleButton';