@adaptabletools/adaptable 19.2.4 → 20.0.0-canary.1

package/src/View/StyledColumn/Wizard/StyledColumnWizardSettingsSection.js

@@ -6,31 +6,56 @@ import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 export const renderStyledColumnWizardSettingsSummary = (data) => {
-    var _a, _b, _c;
     const badgeStyle = data;
     return (React.createElement(Box, { padding: 2 },
         React.createElement(Text, { mt: 3 },
             "Data Rows ",
-            React.createElement(Tag, null, ((_a = badgeStyle.RowScope) === null || _a === void 0 ? void 0 : _a.ExcludeDataRows) ? 'no' : 'yes')),
+            React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
         ' ',
         React.createElement(Text, { mt: 3 },
             "Group Rows ",
-            React.createElement(Tag, null, ((_b = badgeStyle.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeGroupRows) ? 'no' : 'yes')),
+            React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
         React.createElement(Text, { mt: 3 },
             "Summary Rows ",
-            React.createElement(Tag, null, ((_c = badgeStyle.RowScope) === null || _c === void 0 ? void 0 : _c.ExcludeSummaryRows) ? 'no' : 'yes'))));
+            React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeSummaryRows ? 'no' : 'yes'))));
 };
 export const StyledColumnWizardSettingsSection = (props) => {
-    var _a, _b, _c;
     const { data } = useOnePageAdaptableWizardContext();
     const onExcludeDataRowsChanged = (ExcludeDataRows) => {
-        props.onChange(Object.assign(Object.assign({}, data), { BadgeStyle: Object.assign(Object.assign({}, data.BadgeStyle), { RowScope: Object.assign(Object.assign({}, data.BadgeStyle.RowScope), { ExcludeDataRows }) }) }));
+        props.onChange({
+            ...data,
+            BadgeStyle: {
+                ...data.BadgeStyle,
+                RowScope: {
+                    ...data.BadgeStyle.RowScope,
+                    ExcludeDataRows,
+                },
+            },
+        });
     };
     const onExcludeGroupedRowsChanged = (ExcludeGroupedRows) => {
-        props.onChange(Object.assign(Object.assign({}, data), { BadgeStyle: Object.assign(Object.assign({}, data.BadgeStyle), { RowScope: Object.assign(Object.assign({}, data.BadgeStyle.RowScope), { ExcludeGroupRows: ExcludeGroupedRows }) }) }));
+        props.onChange({
+            ...data,
+            BadgeStyle: {
+                ...data.BadgeStyle,
+                RowScope: {
+                    ...data.BadgeStyle.RowScope,
+                    ExcludeGroupRows: ExcludeGroupedRows,
+                },
+            },
+        });
     };
     const onExcludeSummaryRowsChanged = (ExcludeSummaryRows) => {
-        props.onChange(Object.assign(Object.assign({}, data), { BadgeStyle: Object.assign(Object.assign({}, data.BadgeStyle), { RowScope: Object.assign(Object.assign({}, data.BadgeStyle.RowScope), { ExcludeSummaryRows }) }) }));
+        props.onChange({
+            ...data,
+            BadgeStyle: {
+                ...data.BadgeStyle,
+                RowScope: {
+                    ...data.BadgeStyle.RowScope,
+                    ExcludeSummaryRows,
+                },
+            },
+        });
     };
     return (React.createElement(Tabs, null,
         React.createElement(Tabs.Tab, null, "Settings"),
@@ -41,16 +66,16 @@ export const StyledColumnWizardSettingsSection = (props) => {
                         React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
                             React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: 
                                 // @ts-ignore
-                                (_a = data.BadgeStyle.RowScope) === null || _a === void 0 ? void 0 : _a.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
+                                data.BadgeStyle.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
                     React.createElement(FormRow, { label: "Exclude Group Rows:" },
                         React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
                             React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: 
                                 // @ts-ignore
-                                (_b = data.BadgeStyle.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
+                                data.BadgeStyle.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
                     React.createElement(FormRow, { label: "Exclude Row Summaries:" },
                         React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
                             React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: 
                                 // @ts-ignore
-                                (_c = data.BadgeStyle.RowScope) === null || _c === void 0 ? void 0 : _c.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
+                                data.BadgeStyle.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
                     ' ')))));
 };

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview.js

@@ -10,15 +10,19 @@ export const StyledColumnBadgePreview = ({ data }) => {
     if (!badgeStyle || badgeStyle.Badges.length === 0) {
         return React.createElement("div", null, "No Badges Defined");
     }
-    const value = adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId) === 'Number'
+    const value = adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId) === 'number'
         ? DEFAULT_INTEGER_DISPLAY_VALUE
         : DEFAULT_STRING_DISPLAY_VALUE;
     return (React.createElement(Flex, { flexDirection: "column" }, badgeStyle.Badges.map((badge, index) => {
-        const predicateStr = badge.Predicate
-            ? adaptable.api.predicateApi.predicateToString(badge.Predicate)
-            : 'No Predicate';
+        let ruleString = 'No Rule';
+        if (badge.Predicate) {
+            ruleString = adaptable.api.predicateApi.predicateToString(badge.Predicate);
+        }
+        if (badge.Expression) {
+            ruleString = badge.Expression.BooleanExpression;
+        }
         return (React.createElement(Box, { mb: 1, key: index },
             React.createElement(Badge, { icon: badge.Icon, adaptableStyle: badge.Style, iconPosition: badge.IconPosition }, value),
-            React.createElement(Tag, { ml: 2 }, predicateStr)));
+            React.createElement(Tag, { ml: 2 }, ruleString)));
     })));
 };

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../../PredefinedConfig/StyledColumnState';
 import { AdaptableApi } from '../../../../types';
-export declare const renderFormatColumnStyleWizardSummary: (data: StyledColumn) => JSX.Element;
-export declare const renderStyledColumnStyleSummary: (data: StyledColumn, api: AdaptableApi) => JSX.Element;
+export declare const renderFormatColumnStyleWizardSummary: (data: StyledColumn) => React.JSX.Element;
+export declare const renderStyledColumnStyleSummary: (data: StyledColumn, api: AdaptableApi) => React.JSX.Element;
 export interface StyledColumnWizardStyleSectionProps {
     onChange: (styledColumn: StyledColumn) => void;
 }

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection.js

@@ -79,7 +79,6 @@ export const renderStyledColumnStyleSummary = (data, api) => {
     return React.createElement(Tag, null, "No Styling Defined");
 };
 export const StyledColumnWizardStyleSection = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     const { data, api } = useOnePageAdaptableWizardContext();
     const minMaxRangeValues = React.useMemo(() => {
         const columnId = data.ColumnId;
@@ -95,28 +94,37 @@ export const StyledColumnWizardStyleSection = (props) => {
     const scope = { ColumnIds: [data.ColumnId] }; // TODO: remove scope when format column columnStyle is removed
     // gradient
     const onUpdateGradientStyleRanges = (ranges) => {
-        const gradientStyle = Object.assign(Object.assign({}, data.GradientStyle), { CellRanges: ranges });
+        const gradientStyle = {
+            ...data.GradientStyle,
+            CellRanges: ranges,
+        };
         // delete gradientStyle.ColumnComparison in case we are switching from ColumnComparison to CellRanges
         delete gradientStyle.ColumnComparison;
-        props.onChange(Object.assign(Object.assign({}, data), { GradientStyle: gradientStyle }));
+        props.onChange({ ...data, GradientStyle: gradientStyle });
     };
     const onUpdateGradientStyleColumnComparison = (columnComparison) => {
         const GradientStyle = {
             ColumnComparison: columnComparison,
         };
-        props.onChange(Object.assign(Object.assign({}, data), { GradientStyle }));
+        props.onChange({ ...data, GradientStyle });
     };
     // percentbar
     const onUpdatePercentBarStyleColumnComparison = (columnComparison) => {
-        const PercentBarStyle = Object.assign(Object.assign({}, data.PercentBarStyle), { ColumnComparison: columnComparison });
-        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle }));
+        const PercentBarStyle = {
+            ...data.PercentBarStyle,
+            ColumnComparison: columnComparison,
+        };
+        props.onChange({ ...data, PercentBarStyle });
     };
     const onUpdatePercentBarStyleRanges = (ranges) => {
-        const PercentBarStyle = Object.assign(Object.assign({}, data.PercentBarStyle), { CellRanges: ranges });
-        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle }));
+        const PercentBarStyle = {
+            ...data.PercentBarStyle,
+            CellRanges: ranges,
+        };
+        props.onChange({ ...data, PercentBarStyle });
     };
     const onPercentBarCellTextCellValueChanged = (checked) => {
-        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        let percentBarStyle = data?.PercentBarStyle;
         if (checked) {
             if (!percentBarStyle.CellText) {
                 percentBarStyle.CellText = ['CellValue'];
@@ -133,10 +141,13 @@ export const StyledColumnWizardStyleSection = (props) => {
                 percentBarStyle.CellText = [];
             }
         }
-        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+        props.onChange({
+            ...data,
+            PercentBarStyle: percentBarStyle,
+        });
     };
     const onPercentBarCellTextPercentValueChanged = (checked) => {
-        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        let percentBarStyle = data?.PercentBarStyle;
         if (checked) {
             if (!percentBarStyle.CellText) {
                 percentBarStyle.CellText = ['PercentageValue'];
@@ -153,13 +164,22 @@ export const StyledColumnWizardStyleSection = (props) => {
                 percentBarStyle.CellText = [];
             }
         }
-        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+        props.onChange({
+            ...data,
+            PercentBarStyle: percentBarStyle,
+        });
     };
     const handlePercentBarCellTextPositionChange = (percentBarPosition) => {
-        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: Object.assign(Object.assign({}, data.PercentBarStyle), { CellTextPosition: percentBarPosition }) }));
+        props.onChange({
+            ...data,
+            PercentBarStyle: {
+                ...data.PercentBarStyle,
+                CellTextPosition: percentBarPosition,
+            },
+        });
     };
     const onPercentBarToolTipTextCellValueChanged = (checked) => {
-        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        let percentBarStyle = data?.PercentBarStyle;
         if (checked) {
             if (!percentBarStyle.ToolTipText) {
                 percentBarStyle.ToolTipText = ['CellValue'];
@@ -176,7 +196,10 @@ export const StyledColumnWizardStyleSection = (props) => {
                 percentBarStyle.ToolTipText = [];
             }
         }
-        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+        props.onChange({
+            ...data,
+            PercentBarStyle: percentBarStyle,
+        });
     };
     const onPercentBarToolTipTextPercentValueChanged = (checked) => {
         let percentBarStyle = data.PercentBarStyle;
@@ -196,17 +219,26 @@ export const StyledColumnWizardStyleSection = (props) => {
                 percentBarStyle.ToolTipText = [];
             }
         }
-        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+        props.onChange({
+            ...data,
+            PercentBarStyle: percentBarStyle,
+        });
     };
     const onUsePercentStyleColorCheckChanged = (checked) => {
-        let percentBarStyle = data === null || data === void 0 ? void 0 : data.PercentBarStyle;
+        let percentBarStyle = data?.PercentBarStyle;
         percentBarStyle.BackColor = checked ? getHexForName(GRAY) : null;
-        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+        props.onChange({
+            ...data,
+            PercentBarStyle: percentBarStyle,
+        });
     };
     const onForeColorSelectChange = (color) => {
         let percentBarStyle = data.PercentBarStyle;
         percentBarStyle.BackColor = color;
-        props.onChange(Object.assign(Object.assign({}, data), { PercentBarStyle: percentBarStyle }));
+        props.onChange({
+            ...data,
+            PercentBarStyle: percentBarStyle,
+        });
     };
     const handleRangeValueTypeChange = React.useCallback((rangeValueType) => {
         const ranges = rangeValueType === 'Number'
@@ -224,23 +256,35 @@ export const StyledColumnWizardStyleSection = (props) => {
             RangeValueType: rangeValueType,
         };
         if ('GradientStyle' in newStyledColumn) {
-            newStyledColumn = Object.assign(Object.assign({}, newStyledColumn), { GradientStyle: Object.assign(Object.assign({}, newStyledColumn.GradientStyle), commonStyle) });
+            newStyledColumn = {
+                ...newStyledColumn,
+                GradientStyle: {
+                    ...newStyledColumn.GradientStyle,
+                    ...commonStyle,
+                },
+            };
         }
         else {
-            newStyledColumn = Object.assign(Object.assign({}, newStyledColumn), { PercentBarStyle: Object.assign(Object.assign({}, newStyledColumn.PercentBarStyle), commonStyle) });
+            newStyledColumn = {
+                ...newStyledColumn,
+                PercentBarStyle: {
+                    ...newStyledColumn.PercentBarStyle,
+                    ...commonStyle,
+                },
+            };
         }
         props.onChange(newStyledColumn);
     }, [data]);
     const disabled = !data.ColumnId;
     return (React.createElement(Box, null,
-        (data === null || data === void 0 ? void 0 : data.GradientStyle) && (React.createElement(RangesComponent, { disabled: !data.ColumnId, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: true, ranges: (_a = data.GradientStyle) === null || _a === void 0 ? void 0 : _a.CellRanges, rangeValueType: (_b = data.GradientStyle) === null || _b === void 0 ? void 0 : _b.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: (_c = data === null || data === void 0 ? void 0 : data.GradientStyle) === null || _c === void 0 ? void 0 : _c.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
+        data?.GradientStyle && (React.createElement(RangesComponent, { disabled: !data.ColumnId, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: true, ranges: data.GradientStyle?.CellRanges, rangeValueType: data.GradientStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.GradientStyle?.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
         data.PercentBarStyle && (React.createElement(React.Fragment, null,
-            React.createElement(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: false, ranges: (_d = data.PercentBarStyle) === null || _d === void 0 ? void 0 : _d.CellRanges, rangeValueType: (_e = data.PercentBarStyle) === null || _e === void 0 ? void 0 : _e.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: (_f = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _f === void 0 ? void 0 : _f.ColumnComparison, updateRanges: (ranges) => onUpdatePercentBarStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdatePercentBarStyleColumnComparison(columnComparison) }),
+            React.createElement(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: false, ranges: data.PercentBarStyle?.CellRanges, rangeValueType: data.PercentBarStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.PercentBarStyle?.ColumnComparison, updateRanges: (ranges) => onUpdatePercentBarStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdatePercentBarStyleColumnComparison(columnComparison) }),
             React.createElement(FormLayout, { marginLeft: 2, marginTop: 2 },
                 React.createElement(FormRow, { label: "Cell Display:" },
-                    React.createElement(CheckBox, { disabled: disabled, marginLeft: 2, checked: (_h = (_g = data.PercentBarStyle) === null || _g === void 0 ? void 0 : _g.CellText) === null || _h === void 0 ? void 0 : _h.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
+                    React.createElement(CheckBox, { disabled: disabled, marginLeft: 2, checked: data.PercentBarStyle?.CellText?.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
                     ' ',
-                    React.createElement(CheckBox, { disabled: disabled, marginLeft: 3, checked: (_k = (_j = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _j === void 0 ? void 0 : _j.CellText) === null || _k === void 0 ? void 0 : _k.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
+                    React.createElement(CheckBox, { disabled: disabled, marginLeft: 3, checked: data?.PercentBarStyle?.CellText?.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
                         "Percent Value",
                         ' '),
                     ' '),
@@ -258,17 +302,17 @@ export const StyledColumnWizardStyleSection = (props) => {
                                 label: 'Merged',
                                 onClick: () => handlePercentBarCellTextPositionChange('Merged'),
                             },
-                        ] }, (_m = (_l = data.PercentBarStyle) === null || _l === void 0 ? void 0 : _l.CellTextPosition) !== null && _m !== void 0 ? _m : 'Below')),
+                        ] }, data.PercentBarStyle?.CellTextPosition ?? 'Below')),
                 React.createElement(FormRow, { label: "ToolTip Display:" },
-                    React.createElement(CheckBox, { disabled: disabled, marginLeft: 2, checked: (_p = (_o = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _o === void 0 ? void 0 : _o.ToolTipText) === null || _p === void 0 ? void 0 : _p.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
+                    React.createElement(CheckBox, { disabled: disabled, marginLeft: 2, checked: data?.PercentBarStyle?.ToolTipText?.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
                     ' ',
-                    React.createElement(CheckBox, { disabled: disabled, marginLeft: 3, checked: (_r = (_q = data === null || data === void 0 ? void 0 : data.PercentBarStyle) === null || _q === void 0 ? void 0 : _q.ToolTipText) === null || _r === void 0 ? void 0 : _r.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
+                    React.createElement(CheckBox, { disabled: disabled, marginLeft: 3, checked: data?.PercentBarStyle?.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
                         "Percent Value",
                         ' '),
                     ' '),
                 React.createElement(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}` },
                     React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                        React.createElement(CheckBox, { disabled: disabled, checked: !!((_s = data.PercentBarStyle) === null || _s === void 0 ? void 0 : _s.BackColor), onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
-                        ((_t = data.PercentBarStyle) === null || _t === void 0 ? void 0 : _t.BackColor) !== undefined && (React.createElement(ColorPicker, { disabled: disabled, api: api, value: (_u = data.PercentBarStyle) === null || _u === void 0 ? void 0 : _u.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))))),
+                        React.createElement(CheckBox, { disabled: disabled, checked: !!data.PercentBarStyle?.BackColor, onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
+                        data.PercentBarStyle?.BackColor !== undefined && (React.createElement(ColorPicker, { disabled: disabled, api: api, value: data.PercentBarStyle?.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))))),
         !data.ColumnId && React.createElement(ErrorBox, { mt: 2 }, "You need to select a column before styling.")));
 };

package/src/View/StyledColumn/Wizard/StyledColumnWizardTypeSection.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../PredefinedConfig/StyledColumnState';
-export declare const renderStyledColumnTypeSummary: (data: StyledColumn) => JSX.Element;
+export declare const renderStyledColumnTypeSummary: (data: StyledColumn) => React.JSX.Element;
 export interface StyledColumnWizardTypeSectionProps {
     onChange: (styledColumn: StyledColumn) => void;
 }

package/src/View/StyledColumn/Wizard/StyledColumnWizardTypeSection.js

@@ -28,7 +28,9 @@ export const StyledColumnWizardTypeSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
     const adaptable = useAdaptable();
     const handleTypeChange = (type) => {
-        const newStyledColumn = Object.assign({}, data);
+        const newStyledColumn = {
+            ...data,
+        };
         delete newStyledColumn.GradientStyle;
         delete newStyledColumn.PercentBarStyle;
         delete newStyledColumn.SparkLineStyle;

package/src/View/SystemStatus/SystemStatusEntityRow.js

@@ -6,10 +6,9 @@ import { cloneObject } from '../../Utilities/Helpers/Helper';
 import join from '../../components/utils/join';
 export class SystemStatusEntityRow extends React.Component {
     render() {
-        var _a;
         let systemStatus = this.props
             .adaptableObject;
-        let messageTypeColor = UIHelper.getColorByMessageType((_a = systemStatus === null || systemStatus === void 0 ? void 0 : systemStatus.statusType) !== null && _a !== void 0 ? _a : 'Success');
+        let messageTypeColor = UIHelper.getColorByMessageType(systemStatus?.statusType ?? 'Success');
         let colItems = cloneObject(this.props.colItems);
         colItems[0].Content = systemStatus ? (React.createElement("details", null,
             React.createElement(Flex, { title: systemStatus.statusFurtherInformation ? 'Click to see more' : '', className: join('ab-DashboardToolbar__SystemStatus__text', systemStatus.statusFurtherInformation &&

package/src/View/SystemStatus/SystemStatusPopup.d.ts

@@ -1,18 +1,20 @@
 import * as React from 'react';
-import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
+import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
 import { SystemStatusMessageInfo } from '../../types';
 interface SystemStatusPopupProps extends ModuleViewPopupProps<SystemStatusPopupComponent> {
     SystemStatusMessageInfos: SystemStatusMessageInfo[];
     SystemStatusMessages: SystemStatusMessageInfo[];
-    onSystemStatusMessageInfoDeleteAll: () => SystemRedux.SystemStatusMessageInfoDeleteAllAction;
+    onSystemStatusMessageInfoDeleteAll: () => InternalRedux.SystemStatusMessageInfoDeleteAllAction;
 }
 interface SystemStatusPopupState {
 }
 declare class SystemStatusPopupComponent extends React.Component<SystemStatusPopupProps, SystemStatusPopupState> {
     constructor(props: SystemStatusPopupProps);
     onSystemStatusMessageInfoDeleteAll(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
-export declare let SystemStatusPopup: import("react-redux").ConnectedComponent<typeof SystemStatusPopupComponent, any>;
+export declare let SystemStatusPopup: import("react-redux").ConnectedComponent<typeof SystemStatusPopupComponent, {
+    [x: string]: any;
+}>;
 export {};

package/src/View/SystemStatus/SystemStatusPopup.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
+import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import { Box } from 'rebass';
 import SimpleButton from '../../components/SimpleButton';
 import { AdaptableObjectCollection } from '../Components/AdaptableObjectCollection';
@@ -33,13 +33,13 @@ class SystemStatusPopupComponent extends React.Component {
 }
 function mapStateToProps(state, ownProps) {
     return {
-        SystemStatusMessageInfos: state.System.SystemStatusMessages,
-        SystemStatusMessages: state.System.SystemStatusMessages,
+        SystemStatusMessageInfos: state.Internal.SystemStatusMessages,
+        SystemStatusMessages: state.Internal.SystemStatusMessages,
     };
 }
 function mapDispatchToProps(dispatch) {
     return {
-        onSystemStatusMessageInfoDeleteAll: () => dispatch(SystemRedux.SystemStatusMessageInfoDeleteAll()),
+        onSystemStatusMessageInfoDeleteAll: () => dispatch(InternalRedux.SystemStatusMessageInfoDeleteAll()),
     };
 }
 export let SystemStatusPopup = connect(mapStateToProps, mapDispatchToProps)(SystemStatusPopupComponent);

package/src/View/SystemStatus/SystemStatusStatusBarContent.js

@@ -6,6 +6,6 @@ export const SystemStatusStatusBarContent = () => {
     const adaptable = useAdaptable();
     const currentSystemStatusMessageInfo = adaptable.api.systemStatusApi.getCurrentSystemStatusMessageInfo();
     const { color, background } = getStatusItemStyle(currentSystemStatusMessageInfo);
-    const message = currentSystemStatusMessageInfo === null || currentSystemStatusMessageInfo === void 0 ? void 0 : currentSystemStatusMessageInfo.statusMessage;
+    const message = currentSystemStatusMessageInfo?.statusMessage;
     return (React.createElement(Box, { style: { borderRadius: 'var(--ab__border-radius)' }, padding: 1, color: message && color, backgroundColor: message && background }, message || '0 Messages'));
 };

package/src/View/SystemStatus/SystemStatusViewPanel.d.ts

@@ -6,7 +6,12 @@ export interface SystemStatusViewPanelComponentProps extends ViewPanelProps {
 }
 declare class SystemStatusViewPanelComponent extends React.Component<SystemStatusViewPanelComponentProps, {}> {
     constructor(props: SystemStatusViewPanelComponentProps);
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
-export declare let SystemStatusViewPanel: import("react-redux").ConnectedComponent<typeof SystemStatusViewPanelComponent, import("react-redux").Omit<JSX.LibraryManagedAttributes<C, import("react-redux").GetProps<C>>, keyof SystemStatusViewPanelComponentProps>>;
+export declare let SystemStatusViewPanel: import("react-redux").ConnectedComponent<typeof SystemStatusViewPanelComponent, {
+    ref?: React.Ref<SystemStatusViewPanelComponent>;
+    key?: React.Key;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
+    store?: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+}>;
 export {};

package/src/View/SystemStatus/SystemStatusViewPanel.js

@@ -9,7 +9,7 @@ class SystemStatusViewPanelComponent extends React.Component {
     render() {
         const currentSystemStatusMessageInfo = this.props.api.systemStatusApi.getCurrentSystemStatusMessageInfo();
         const { color, background } = getStatusItemStyle(currentSystemStatusMessageInfo);
-        const message = currentSystemStatusMessageInfo === null || currentSystemStatusMessageInfo === void 0 ? void 0 : currentSystemStatusMessageInfo.statusMessage;
+        const message = currentSystemStatusMessageInfo?.statusMessage;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(Flex, { alignItems: "stretch", className: `ab-${elementType}__SystemStatus__wrap` },
             React.createElement(Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__SystemStatus__text`, marginRight: 2, padding: 2, color: color, backgroundColor: message ? background : '', fontSize: 'var( --ab-font-size-2)', alignItems: "center", "data-name": "system-status-message" }, message || '0 Messages')));
@@ -17,7 +17,7 @@ class SystemStatusViewPanelComponent extends React.Component {
 }
 function mapStateToProps(state) {
     return {
-        SystemStatusMessageInfos: state.System.SystemStatusMessages,
+        SystemStatusMessageInfos: state.Internal.SystemStatusMessages,
     };
 }
 function mapDispatchToProps(dispatch) {

package/src/View/SystemStatus/Utilities/getStatusItemStyle.js

@@ -1,7 +1,6 @@
 import UIHelper from '../../UIHelper';
 export const getStatusItemStyle = (systemStatusMessageInfo) => {
-    var _a;
-    const background = UIHelper.getColorByMessageType((_a = systemStatusMessageInfo === null || systemStatusMessageInfo === void 0 ? void 0 : systemStatusMessageInfo.statusType) !== null && _a !== void 0 ? _a : 'Success');
+    const background = UIHelper.getColorByMessageType(systemStatusMessageInfo?.statusType ?? 'Success');
     const color = systemStatusMessageInfo
         ? UIHelper.getButtonTextColourForMessageType(systemStatusMessageInfo.statusType)
         : 'var(--ab-color-text-on-primary)';

package/src/View/TeamSharing/SharedEntityDependencies.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box } from 'rebass';
+import { Box, Flex } from 'rebass';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
 import { AdaptableObjectListItem } from '../Components/AdaptableObjectList/AdaptableObjectList';
@@ -16,6 +16,8 @@ export const Dependencies = (props) => {
 export const SharedEntityDependencies = (props) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Box, { mb: 3, mt: 2 }, isExpanded ? (React.createElement(SimpleButton, { onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton, { onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand"))),
+        React.createElement(Flex, null,
+            React.createElement(Box, { mr: 3, className: 'ab-Adaptable-Object-List__Item__label' }, "Dependencies"),
+            React.createElement(Box, { mb: 2, mt: 2 }, isExpanded ? (React.createElement(SimpleButton, { onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton, { onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand")))),
         isExpanded && React.createElement(Dependencies, { sharedEntity: props.data })));
 };

package/src/View/TeamSharing/SharedEntityObjectView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import * as React from 'react';
 import { AdaptableSharedEntity } from '../../../types';
 import { IModule } from '../../Strategy/Interface/IModule';
@@ -8,5 +7,5 @@ export declare const SharedEntityTypeItemView: React.FunctionComponent<{
 export declare const getSharedEntityActiveStatusObjectView: (isDependency: boolean) => (props: {
     data: AdaptableSharedEntity;
     module?: IModule;
-}) => JSX.Element;
-export declare const getSharedEntityStaleDepsItemView: (staleDependencies: AdaptableSharedEntity[]) => () => JSX.Element;
+}) => React.JSX.Element;
+export declare const getSharedEntityStaleDepsItemView: (staleDependencies: AdaptableSharedEntity[]) => () => React.JSX.Element;

package/src/View/TeamSharing/SharedEntityObjectView.js

@@ -10,7 +10,7 @@ export const SharedEntityTypeItemView = (props) => {
     const moduleName = props.data.Module;
     const module = adaptable.ModuleService.getModuleById(moduleName);
     const sharedObject = props.data.Entity;
-    const item = module === null || module === void 0 ? void 0 : module.toView(sharedObject);
+    const item = module?.toView(sharedObject);
     return (React.createElement(React.Fragment, null,
         React.createElement(Flex, { mb: 2, mt: 2 },
             React.createElement(Flex, { mr: 2, alignItems: "center" },
@@ -20,7 +20,6 @@ export const SharedEntityTypeItemView = (props) => {
             React.createElement(AdaptableObjectListItem, { hideControls: true, data: item, module: module })))));
 };
 export const getSharedEntityActiveStatusObjectView = (isDependency) => (props) => {
-    var _a, _b;
     const adaptable = useAdaptable();
     const activeEntries = adaptable.api.internalApi.getState().TeamSharing.ActiveSharedEntityMap;
     const sharedEntity = props.data;
@@ -30,14 +29,14 @@ export const getSharedEntityActiveStatusObjectView = (isDependency) => (props) =
         .isAdaptableObjectPresentInLocalState(sharedEntity);
     const isUpToDateAndActive = isAdaptableObjectPresentInLocalState &&
         sharedEntity.Type === 'Active' &&
-        ((_a = activeEntries[sharedEntity.Entity.Uuid]) === null || _a === void 0 ? void 0 : _a.Revision) === sharedEntity.Revision;
+        activeEntries[sharedEntity.Entity.Uuid]?.Revision === sharedEntity.Revision;
     const staleActiveEntities = adaptable.api.internalApi
         .getTeamSharingService()
         .getStaleActiveSharedEntities();
     const isStaleAndActive = isAdaptableObjectPresentInLocalState && !!staleActiveEntities[sharedEntity.Uuid];
     let activeInfo = null;
     if (isAdaptableObjectPresentInLocalState) {
-        const activeRevision = (_b = activeEntries === null || activeEntries === void 0 ? void 0 : activeEntries[sharedEntity.Entity.Uuid]) === null || _b === void 0 ? void 0 : _b.Revision;
+        const activeRevision = activeEntries?.[sharedEntity.Entity.Uuid]?.Revision;
         if (sharedEntity.Type === 'Active') {
             const newRevision = sharedEntity.Revision;
             let statusInfo = null;
@@ -66,7 +65,7 @@ export const getSharedEntityActiveStatusObjectView = (isDependency) => (props) =
 };
 export const getSharedEntityStaleDepsItemView = (staleDependencies) => () => {
     let staleDepsString = 'Shared entity has';
-    if ((staleDependencies === null || staleDependencies === void 0 ? void 0 : staleDependencies.length) === 1) {
+    if (staleDependencies?.length === 1) {
         staleDepsString += ` one (${staleDependencies[0].Module}) stale dependency`;
     }
     else {