@adaptabletools/adaptable-cjs 22.0.0-canary.9 → 22.0.0

package/src/View/StyledColumn/Wizard/{StyledColumnWizardSettingsSection.js → StyledColumnBadgeRowsSection.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardSettingsSection = exports.renderStyledColumnWizardSettingsSummary = void 0;
+exports.StyledColumnBadgeRowsSection = exports.renderStyledColumnBadgeRowsSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../components/CheckBox");
@@ -9,7 +9,7 @@ const Tabs_1 = require("../../../components/Tabs");
 const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
-const renderStyledColumnWizardSettingsSummary = (data) => {
+const renderStyledColumnBadgeRowsSummary = (data) => {
     const badgeStyle = data;
     return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
         React.createElement(Flex_1.Box, { className: "twa:mt-3" },
@@ -26,82 +26,82 @@ const renderStyledColumnWizardSettingsSummary = (data) => {
             "Total Rows ",
             React.createElement(Tag_1.Tag, null, badgeStyle.RowScope?.ExcludeTotalRows ? 'no' : 'yes'))));
 };
-exports.renderStyledColumnWizardSettingsSummary = renderStyledColumnWizardSettingsSummary;
-const StyledColumnWizardSettingsSection = (props) => {
+exports.renderStyledColumnBadgeRowsSummary = renderStyledColumnBadgeRowsSummary;
+const StyledColumnBadgeRowsSection = (props) => {
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const onExcludeDataRowsChanged = (ExcludeDataRows) => {
+    const onExcludeDataRowsChanged = (includeDataRows) => {
         props.onChange({
             ...data,
             BadgeStyle: {
                 ...data.BadgeStyle,
                 RowScope: {
                     ...data.BadgeStyle.RowScope,
-                    ExcludeDataRows,
+                    ExcludeDataRows: !includeDataRows,
                 },
             },
         });
     };
-    const onExcludeGroupedRowsChanged = (ExcludeGroupedRows) => {
+    const onExcludeGroupedRowsChanged = (includeGroupedRows) => {
         props.onChange({
             ...data,
             BadgeStyle: {
                 ...data.BadgeStyle,
                 RowScope: {
                     ...data.BadgeStyle.RowScope,
-                    ExcludeGroupRows: ExcludeGroupedRows,
+                    ExcludeGroupRows: !includeGroupedRows,
                 },
             },
         });
     };
-    const onExcludeSummaryRowsChanged = (ExcludeSummaryRows) => {
+    const onExcludeSummaryRowsChanged = (includeSummaryRows) => {
         props.onChange({
             ...data,
             BadgeStyle: {
                 ...data.BadgeStyle,
                 RowScope: {
                     ...data.BadgeStyle.RowScope,
-                    ExcludeSummaryRows,
+                    ExcludeSummaryRows: !includeSummaryRows,
                 },
             },
         });
     };
-    const onExcludeTotalRowsChanged = (ExcludeTotalRows) => {
+    const onExcludeTotalRowsChanged = (includeTotalRows) => {
         props.onChange({
             ...data,
             BadgeStyle: {
                 ...data.BadgeStyle,
                 RowScope: {
                     ...data.BadgeStyle.RowScope,
-                    ExcludeTotalRows,
+                    ExcludeTotalRows: !includeTotalRows,
                 },
             },
         });
     };
     return (React.createElement(Tabs_1.Tabs, null,
-        React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
+        React.createElement(Tabs_1.Tabs.Tab, null, "Row Types"),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(Flex_1.Flex, { flexDirection: "row" },
                 React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
+                    React.createElement(FormLayout_1.FormRow, { label: "Data (leaf) Rows:" },
                         React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", className: "twa:mr-2", checked: 
                                 // @ts-ignore
-                                data.BadgeStyle.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged }))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Group Rows:" },
+                                !data.BadgeStyle.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged }))),
+                    React.createElement(FormLayout_1.FormRow, { label: "Group Rows:" },
                         React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
                             React.createElement(CheckBox_1.CheckBox, { className: "twa:mr-2", "data-name": "exclude-grouped-rows-checkbox", checked: 
                                 // @ts-ignore
-                                data.BadgeStyle.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged }))),
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
+                                !data.BadgeStyle.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged }))),
+                    React.createElement(FormLayout_1.FormRow, { label: "Summary Rows:" },
                         React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", className: "twa:mr-2", checked: 
                                 // @ts-ignore
-                                data.BadgeStyle.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged }))),
+                                !data.BadgeStyle.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged }))),
                     ' ',
-                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Total Rows:" },
+                    React.createElement(FormLayout_1.FormRow, { label: "Total Rows:" },
                         React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-total-rows-checkbox", className: "twa:mr-2", checked: 
                                 // @ts-ignore
-                                data.BadgeStyle.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged }))))))));
+                                !data.BadgeStyle.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged }))))))));
 };
-exports.StyledColumnWizardSettingsSection = StyledColumnWizardSettingsSection;
+exports.StyledColumnBadgeRowsSection = StyledColumnBadgeRowsSection;

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

@@ -12,7 +12,7 @@ const StyledColumnWizardTypeSection_1 = require("./StyledColumnWizardTypeSection
 const StyledColumnWizardColumnSection_1 = require("./StyledColumnWizardColumnSection");
 const StyledColumnWizardStyleSection_1 = require("./StyledColumnWizardStyleSection");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
-const StyledColumnWizardSettingsSection_1 = require("./StyledColumnWizardSettingsSection");
+const StyledColumnBadgeRowsSection_1 = require("./StyledColumnBadgeRowsSection");
 const StyledColumnSparklineSettingsSection_1 = require("./StyledColumnSparklineSettingsSection");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const StyledColumnBadgeSection_1 = require("./StyledColumnBadgeSection");
@@ -52,15 +52,6 @@ const StyledColumnWizard = (props) => {
         }
         props.onFinishWizard(styledColumn);
     };
-    const AdditionalSettingSection = {
-        details: 'Apply Additional Settings',
-        renderSummary: StyledColumnWizardSettingsSection_1.renderStyledColumnWizardSettingsSummary,
-        render: () => {
-            return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
-                React.createElement(StyledColumnWizardSettingsSection_1.StyledColumnWizardSettingsSection, { onChange: setStyledColumn })));
-        },
-        title: 'Settings',
-    };
     const specificSteps = [];
     if (styledColumn.SparklineStyle) {
         specificSteps.push({
@@ -97,6 +88,15 @@ const StyledColumnWizard = (props) => {
         );
     }
     else if (styledColumn.BadgeStyle) {
+        specificSteps.push({
+            details: 'Select the Rows where the Badge will be applied',
+            renderSummary: StyledColumnBadgeRowsSection_1.renderStyledColumnBadgeRowsSummary,
+            render: () => {
+                return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
+                    React.createElement(StyledColumnBadgeRowsSection_1.StyledColumnBadgeRowsSection, { onChange: setStyledColumn })));
+            },
+            title: 'Rows',
+        });
         specificSteps.push({
             title: 'Badges',
             details: 'Create Badge Styles',
@@ -114,7 +114,6 @@ const StyledColumnWizard = (props) => {
             render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                 React.createElement(StyledColumnBadgeSection_1.StyledColumnBadgeSection, { onChange: setStyledColumn }))),
         });
-        specificSteps.push(AdditionalSettingSection);
     }
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {

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

@@ -9,8 +9,8 @@ declare class SystemStatusViewPanelComponent extends React.Component<SystemStatu
     render(): React.JSX.Element;
 }
 export declare let SystemStatusViewPanel: import("react-redux").ConnectedComponent<typeof SystemStatusViewPanelComponent, {
-    ref?: React.Ref<SystemStatusViewPanelComponent>;
     key?: React.Key | null | undefined;
+    ref?: React.Ref<SystemStatusViewPanelComponent>;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
     store?: import("redux").Store;
 }>;

package/src/View/Theme/ThemeEditor.js

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
-const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
+const throttle_1 = tslib_1.__importDefault(require("../../Utilities/utils/throttle"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const ThemeField_1 = require("./ThemeField");

package/src/View/Theme/ThemeField.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Field = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
+const throttle_1 = tslib_1.__importDefault(require("../../Utilities/utils/throttle"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
 const FormLayout_1 = require("../../components/FormLayout");

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -12,7 +12,7 @@ const AdaptableContext_1 = require("../AdaptableContext");
 const Tabs_1 = require("../../components/Tabs");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
 const OnePageWizards_1 = require("./OnePageWizards");
-const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
+const kebabCase_1 = tslib_1.__importDefault(require("../../Utilities/utils/kebabCase"));
 const Flex_1 = require("../../components/Flex");
 const twMerge_1 = require("../../twMerge");
 const SummaryTag = (props) => (React.createElement(Flex_1.Box, { ...props }));

package/src/View/Wizard/OnePageWizards.js

@@ -164,7 +164,7 @@ const OnePageWizard = (props) => {
                                     } },
                                     React.createElement(KeyHint_1.KeyHint, { className: "twa:mr-2 twa:inline-block twa:text-color-accent-foreground" }, navIndex),
                                     React.createElement("div", { className: "twa:flex-1" }, section.title),
-                                    React.createElement(icons_1.Icon, { name: "error", className: (0, clsx_1.default)('twa:ml-2', validSectionsMap.get(index) !== true ? 'twa:visible' : 'twa:hidden') })));
+                                    React.createElement(icons_1.Icon, { name: "error", className: (0, clsx_1.default)('twa:ml-2', validSectionsMap.get(index) !== true ? 'twa:visible' : 'twa:invisible') })));
                             }),
                             selectedFeedback,
                             React.createElement(Flex_1.Box, { className: "twa:flex-1" }),

package/src/agGrid/AdaptableAgGrid.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableAgGrid = void 0;
 const tslib_1 = require("tslib");
-const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
-const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const throttle_1 = tslib_1.__importDefault(require("../Utilities/utils/throttle"));
+const debounce_1 = tslib_1.__importDefault(require("../Utilities/utils/debounce"));
 const ag_grid_enterprise_1 = require("ag-grid-enterprise");
 const AdaptableLogger_1 = require("./AdaptableLogger");
 const DocumentationLinkConstants_1 = require("../Utilities/Constants/DocumentationLinkConstants");
@@ -91,6 +91,7 @@ const Modal_1 = require("../components/Modal");
 const AdaptableLoadingScreen_1 = require("../View/Components/Popups/AdaptableLoadingScreen");
 const react_1 = require("react");
 const createAgStatusPanelComponent_1 = require("../Utilities/createAgStatusPanelComponent");
+const only_1 = require("../Utilities/only");
 const weightedAverage_1 = require("../Utilities/weightedAverage");
 const RowSummary_1 = require("../AdaptableState/Common/RowSummary");
 const FlashingCellService_1 = require("../Utilities/Services/FlashingCellService");
@@ -1084,6 +1085,9 @@ class AdaptableAgGrid {
          */
         this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'aggFuncs', (original_aggFuncs) => {
             const aggregationFunctions = original_aggFuncs || {};
+            aggregationFunctions[AggregationColumns_1.ONLY_AGG_FN_NAME] = (params) => {
+                return (0, only_1.only)(params, params.column.getColId());
+            };
             aggregationFunctions[AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME] = (params) => {
                 const columnId = params.column.getColId();
                 const adaptableAggFunc = this.getActiveAdaptableAggFuncForCol(columnId);
@@ -1466,6 +1470,18 @@ class AdaptableAgGrid {
                 caseSensitive: !!this.adaptableOptions.quickSearchOptions.isQuickSearchCaseSensitive,
             };
         });
+        /**
+         * suppressOverlays
+         */
+        this.agGridOptionsService.setGridOptionsProperty(gridOptions, 'suppressOverlays', (original_suppressOverlays) => {
+            // we want to suppress the exporting overlay because having it enabled will turn api.exportDataAsExcel() and api.exportDataAsCsv() into async operations,
+            // see #export_data_synchronously
+            let suppressOverlays = original_suppressOverlays || [];
+            if (!suppressOverlays.includes('exporting')) {
+                suppressOverlays.push('exporting');
+            }
+            return suppressOverlays;
+        });
     }
     /**
      * Either initializes the AG Grid instance or delegates it to the framework wrappers (React/Anglar)
@@ -2545,12 +2561,15 @@ class AdaptableAgGrid {
             updatedRows: [],
             removedRows: [],
         };
-        if (!dataRowConfig || !dataRowConfig.dataRows) {
+        if (!dataRowConfig) {
+            return result;
+        }
+        if (!dataRowConfig.addRows || !dataRowConfig.updateRows || !dataRowConfig.deleteRows) {
             return result;
         }
-        const addDataRows = dataRowConfig.dataRows.add;
-        const updateDataRows = dataRowConfig.dataRows.update;
-        const removeDataRows = dataRowConfig.dataRows.delete;
+        const addDataRows = dataRowConfig.addRows;
+        const updateDataRows = dataRowConfig.updateRows;
+        const removeDataRows = dataRowConfig.deleteRows;
         if (this.hasAutogeneratedPrimaryKey) {
             this.addSyntheticPrimaryKeyIfMissing(addDataRows);
         }

package/src/agGrid/AgGridAdapter.js

@@ -475,8 +475,8 @@ class AgGridAdapter {
             ? 'number'
             : this.deriveAdaptableColumnDataType(agGridColumn, false);
         const isTreeColumn = this.isTreeColumn(isGeneratedRowGroupColumn);
-        const alwaysHidden = this.adaptableApi.columnApi.internalApi.isAlwaysHiddenColumn(colDef);
-        const visible = !alwaysHidden || agGridColumn.isVisible();
+        const isUIHiddenColumn = this.adaptableApi.columnApi.internalApi.isColumnUIHidden(colDef);
+        const visible = !isUIHiddenColumn || agGridColumn.isVisible();
         const isGenerated = isGeneratedRowGroupColumn || isGeneratedPivotResultColumn || isGeneratedSelectionColumn;
         const abColumn = {
             Uuid: (0, Uuid_1.createUuid)(),
@@ -486,9 +486,9 @@ class AgGridAdapter {
             resizable: colDef.resizable !== false,
             friendlyName: friendlyName,
             isPrimaryKey: ColumnId === pkColumn,
-            dataType: dataType,
+            dataType,
             visible,
-            alwaysHidden,
+            isUIHiddenColumn,
             readOnly: this.isColumnReadonly(colDef),
             columnGroup: ColumnGroup,
             fieldOnly: isGenerated ? false : this.isColumnFieldonly(colDef),

package/src/agGrid/AgGridColumnAdapter.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AgGridColumnAdapter = void 0;
 exports.getEditorForColumnDataType = getEditorForColumnDataType;
 const tslib_1 = require("tslib");
-const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
-const merge_1 = tslib_1.__importDefault(require("lodash/merge"));
+const kebabCase_1 = tslib_1.__importDefault(require("../Utilities/utils/kebabCase"));
+const merge_1 = tslib_1.__importDefault(require("../Utilities/utils/merge"));
 const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
 const StringExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/StringExtensions"));
 const AdaptableColumn_1 = require("../AdaptableState/Common/AdaptableColumn");
@@ -538,8 +538,15 @@ class AgGridColumnAdapter {
                             returnValue = params.value;
                         }
                         if (textOptions.includes('PercentageValue')) {
-                            const clampedValue = Helper_1.default.clamp(params.value, min, max);
-                            const percentageValue = ((clampedValue - min) / (max - min)) * 100;
+                            let percentageValue;
+                            if (styledColumn.PercentBarStyle.ColumnComparison) {
+                                const absMax = Math.abs(max);
+                                percentageValue = absMax === 0 ? 0 : (Number(params.value) / absMax) * 100;
+                            }
+                            else {
+                                const clampedValue = Helper_1.default.clamp(params.value, min, max);
+                                percentageValue = ((clampedValue - min) / (max - min)) * 100;
+                            }
                             returnValue += ' ' + `(${percentageValue.toFixed(0)}%)`;
                         }
                         return returnValue ? returnValue : params.value;

package/src/agGrid/AgGridExportAdapter.d.ts

@@ -1,8 +1,8 @@
-import { AdaptableAgGrid } from './AdaptableAgGrid';
-import { Report, ReportFormatType } from '../AdaptableState/ExportState';
 import { CsvExportParams, ExcelExportParams, ExcelStyle } from 'ag-grid-enterprise';
 import { CustomExportParams, ExportDestinationType, ExportResultData } from '../AdaptableOptions/ExportOptions';
+import { Report, ReportFormatType } from '../AdaptableState/ExportState';
 import { Layout } from '../AdaptableState/LayoutState';
+import { AdaptableAgGrid } from './AdaptableAgGrid';
 export interface ExportConfig {
     report: Report;
     format: ReportFormatType;

package/src/agGrid/AgGridExportAdapter.js

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AgGridExportAdapter = void 0;
 const tslib_1 = require("tslib");
-const ModuleConstants_1 = require("../Utilities/Constants/ModuleConstants");
-const waitForTimeout_1 = require("../Utilities/waitForTimeout");
-const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
-const FormatHelper_1 = tslib_1.__importStar(require("../Utilities/Helpers/FormatHelper"));
 const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
-const StringExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/StringExtensions"));
-const Uuid_1 = require("../AdaptableState/Uuid");
 const udsv_1 = require("udsv");
+const Uuid_1 = require("../AdaptableState/Uuid");
 const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
+const ModuleConstants_1 = require("../Utilities/Constants/ModuleConstants");
+const StringExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/StringExtensions"));
+const FormatHelper_1 = tslib_1.__importStar(require("../Utilities/Helpers/FormatHelper"));
+const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
+const waitForTimeout_1 = require("../Utilities/waitForTimeout");
 class AgGridExportAdapter {
     _adaptableInstance;
     /**
@@ -91,6 +91,7 @@ class AgGridExportAdapter {
                 this.patchExcelStyles(exportContext);
                 excelStylesWerePatched = true;
             }
+            // see #export_data_synchronously
             // 1. easiest case, we download the file using AG Grid
             // these methods will automatically handle the file download
             if (exportContext.destination === 'Download' && exportContext.isExcelReport) {

package/src/agGrid/cellRenderers/PercentBarRenderer.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPercentBarRendererForColumn = void 0;
 const tslib_1 = require("tslib");
 const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
-const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
+const clamp_1 = tslib_1.__importDefault(require("../../Utilities/utils/clamp"));
 const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
     if (!styledColumn.PercentBarStyle) {
         return;
@@ -25,10 +25,22 @@ const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                 }
                 return;
             }
-            const clampedValue = (0, clamp_1.default)(value, min, max);
-            const percentageValue = ((clampedValue - min) / (max - min)) * 100;
-            let cellBackColor;
             const percentBarStyle = styledColumn.PercentBarStyle;
+            let percentageValue;
+            let barWidthPercent;
+            if (percentBarStyle.ColumnComparison) {
+                // Finance convention: (difference / |base|) * 100 — signed %, use |price| when base is negative
+                const absMax = Math.abs(max);
+                percentageValue = absMax === 0 ? 0 : (Number(value) / absMax) * 100;
+                // Bar width uses |percentage| so 50% and -50% have the same visual width
+                barWidthPercent = Math.min(100, Math.abs(percentageValue));
+            }
+            else {
+                const clampedValue = (0, clamp_1.default)(value, min, max);
+                percentageValue = ((clampedValue - min) / (max - min)) * 100;
+                barWidthPercent = percentageValue;
+            }
+            let cellBackColor;
             if (percentBarStyle.ColumnComparison) {
                 cellBackColor = percentBarStyle.ColumnComparison.Color;
             }
@@ -56,7 +68,7 @@ const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                 barInsideEl.className = 'ab-PercentBar__barInside';
                 barInsideEl.style.background = cellBackColor;
                 barInsideEl.style.height = '100%';
-                barInsideEl.style.width = `${percentageValue.toFixed(0)}%`;
+                barInsideEl.style.width = `${barWidthPercent.toFixed(0)}%`;
                 barEl.append(barInsideEl);
                 this.eGui.append(barEl);
                 if (hasCellText) {

package/src/components/ColorPicker/ColorPicker.js

@@ -4,7 +4,7 @@ exports.ColorPicker = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const debounce_1 = tslib_1.__importDefault(require("../../Utilities/utils/debounce"));
 const Input_1 = tslib_1.__importDefault(require("../Input"));
 const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
 const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));

package/src/components/DropdownButton/renderItem.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const isPlainObject_1 = tslib_1.__importDefault(require("lodash/isPlainObject"));
+const isPlainObject_1 = tslib_1.__importDefault(require("../../Utilities/utils/isPlainObject"));
 exports.default = ({ domProps, item, onItemClick, index, columns, className, idProperty, style, }) => {
     const key = item[idProperty] || index;
     if (!(0, isPlainObject_1.default)(item)) {

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.js

@@ -135,7 +135,7 @@ const PrimitiveValueInput = (props) => {
             } }));
     }
     else if (!['date', 'boolean'].includes(props.inputType)) {
-        editor = (react_1.default.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: props.value, columnId: (0, utils_1.mapColumnExpressionToColumnId)(props.lefthandColumnIdParam), onChange: (value) => {
+        editor = (react_1.default.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, searchable: 'menulist', value: props.value, columnId: (0, utils_1.mapColumnExpressionToColumnId)(props.lefthandColumnIdParam), onChange: (value) => {
                 props.onChange(value);
             } }));
     }

package/src/components/FormLayout/index.js

@@ -4,7 +4,7 @@ exports.FormRow = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const merge_1 = tslib_1.__importDefault(require("lodash/merge"));
+const merge_1 = tslib_1.__importDefault(require("../../Utilities/utils/merge"));
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const Flex_1 = require("../Flex");
 const FormLayoutContext = (0, react_1.createContext)(null);

package/src/components/OverlayTrigger/index.js

@@ -4,7 +4,7 @@ exports.ensurePortalElement = exports.getConstrainRect = exports.getConstrainEle
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const debounce_1 = tslib_1.__importDefault(require("../../Utilities/utils/debounce"));
 const batchUpdate_1 = tslib_1.__importDefault(require("../utils/batchUpdate"));
 const selectParent_1 = tslib_1.__importDefault(require("../utils/selectParent"));
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));

package/src/components/Select/Select.js

@@ -366,6 +366,10 @@ const Select = function (props) {
                     // and then pass the actual values to Resizable
                     minWidth: CSS_VARS_VALUES['--ab-cmp-select-menu__min-width'], maxHeight: CSS_VARS_VALUES['--ab-cmp-select-menu__max-height'], maxWidth: CSS_VARS_VALUES['--ab-cmp-select-menu__max-width'], defaultSize: sizeRef.current, onResizeStop: onResizeStop, onResizeStart: (e) => {
                         e.preventDefault();
+                    }, handleClasses: {
+                        right: 'ab-Select-resize-handle ab-Select-resize-handle--right',
+                        bottom: 'ab-Select-resize-handle ab-Select-resize-handle--bottom',
+                        bottomRight: 'ab-Select-resize-handle ab-Select-resize-handle--bottom-right',
                     } }, theChildren)) : (theChildren))));
         };
     }, [resizable, JSON.stringify(CSS_VARS_VALUES)]);

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1770908616549 || Date.now(),
-    VERSION: "22.0.0-canary.9" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1771927501120 || Date.now(),
+    VERSION: "22.0.0" || '--current-version--',
 };

package/src/layout-manager/src/isLayoutEqual.js

@@ -5,7 +5,7 @@ exports.isTableLayoutEqual = isTableLayoutEqual;
 exports.isPivotLayoutEqual = isPivotLayoutEqual;
 exports.isLayoutEqual = isLayoutEqual;
 const tslib_1 = require("tslib");
-const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
+const isEqual_1 = tslib_1.__importDefault(require("../../Utilities/utils/isEqual"));
 const infinite_react_1 = require("@infinite-table/infinite-react");
 const isPivotLayoutModel_1 = require("./isPivotLayoutModel");
 const normalizeLayoutModel_1 = require("./normalizeLayoutModel");

package/src/metamodel/adaptable.metamodel.d.ts

@@ -329,7 +329,7 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
-    AdaptableColumnType: {
+    AdaptableColumnTypeName: {
         name: string;
         kind: string;
         desc: string;
@@ -3002,6 +3002,17 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
         }[];
     };
+    DataRowConfig: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+        }[];
+    };
     DataSet: {
         name: string;
         kind: string;