@adaptabletools/adaptable 20.0.0-canary.16 → 20.0.0-canary.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "20.0.0-canary.16",
+  "version": "20.0.0-canary.17",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@finos/fdc3": "2.1.0",
     "@infinite-table/infinite-react": "6.2.5",
-    "date-fns": "^2.28.0",
+    "date-fns": "^4.1.0",
     "lodash": "^4.17.15",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.6.2",

package/src/PredefinedConfig/Common/AdaptablePredicate.js

@@ -1,16 +1,16 @@
-import isAfter from 'date-fns/isAfter';
-import isBefore from 'date-fns/isBefore';
-import isEqual from 'date-fns/isEqual';
-import isFuture from 'date-fns/isFuture';
-import isPast from 'date-fns/isPast';
-import isSameDay from 'date-fns/isSameDay';
-import isThisMonth from 'date-fns/isThisMonth';
-import isThisQuarter from 'date-fns/isThisQuarter';
-import isThisWeek from 'date-fns/isThisWeek';
-import isThisYear from 'date-fns/isThisYear';
-import isToday from 'date-fns/isToday';
-import isTomorrow from 'date-fns/isTomorrow';
-import isYesterday from 'date-fns/isYesterday';
+import { isAfter } from 'date-fns';
+import { isBefore } from 'date-fns';
+import { isEqual } from 'date-fns';
+import { isFuture } from 'date-fns';
+import { isPast } from 'date-fns';
+import { isSameDay } from 'date-fns';
+import { isThisMonth } from 'date-fns';
+import { isThisQuarter } from 'date-fns';
+import { isThisWeek } from 'date-fns';
+import { isThisYear } from 'date-fns';
+import { isToday } from 'date-fns';
+import { isTomorrow } from 'date-fns';
+import { isYesterday } from 'date-fns';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { parseDateValue } from '../../Utilities/Helpers/DateHelper';
 import Helper from '../../Utilities/Helpers/Helper';

package/src/Redux/Store/AdaptableStore.js

@@ -1,7 +1,7 @@
 import * as Redux from 'redux';
 import * as PluginsRedux from '../ActionsReducers/PluginsRedux';
 import * as PopupRedux from '../ActionsReducers/PopupRedux';
-import { PROGRESS_INDICATOR_HIDE, PROGRESS_INDICATOR_SHOW, } from '../ActionsReducers/PopupRedux';
+import { PROGRESS_INDICATOR_HIDE, PROGRESS_INDICATOR_SHOW } from '../ActionsReducers/PopupRedux';
 import { createEngine as createEngineLocal } from './AdaptableReduxLocalStorageEngine';
 import { mergeReducer } from './AdaptableReduxMerger';
 import { isAdaptableCellChangedAlert, isAdaptableRowChangedAlert, } from '../../PredefinedConfig/Common/AdaptableAlert';

package/src/Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions.js

@@ -2,7 +2,7 @@ import { ExpressionEvaluationError } from '../../parser/src/ExpressionEvaluation
 import { SumArray } from '../Extensions/ArrayExtensions';
 import { getTypedKeys } from '../Extensions/TypeExtensions';
 import { extractColumnParameter, extractColumnParameters, extractParameter, getNumericValue, handleColumnFunction, validateColumnType, } from './expressionFunctionUtils';
-import isAfter from 'date-fns/isAfter';
+import { isAfter } from 'date-fns';
 import { parseDateValue } from '../Helpers/DateHelper';
 export const aggregatedExpressionFunctions = [
     'SUM',

package/src/Utilities/ExpressionFunctions/booleanExpressionFunctions.js

@@ -1,6 +1,6 @@
-import isAfter from 'date-fns/isAfter';
-import isBefore from 'date-fns/isBefore';
-import isEqual from 'date-fns/isEqual';
+import { isAfter } from 'date-fns';
+import { isBefore } from 'date-fns';
+import { isEqual } from 'date-fns';
 import { ExpressionEvaluationError } from '../../parser/src/ExpressionEvaluationError';
 import { getStringValue, getStringValues } from './expressionFunctionUtils';
 import { getTypedKeys } from '../Extensions/TypeExtensions';

package/src/Utilities/ExpressionFunctions/scalarExpressionFunctions.js

@@ -1,17 +1,17 @@
 import { ExpressionEvaluationError } from '../../parser/src/ExpressionEvaluationError';
-import parseISO from 'date-fns/parseISO';
-import startOfDay from 'date-fns/startOfDay';
-import startOfWeek from 'date-fns/startOfWeek';
-import startOfMonth from 'date-fns/startOfMonth';
-import startOfYear from 'date-fns/startOfYear';
-import addDays from 'date-fns/addDays';
-import addWeeks from 'date-fns/addWeeks';
-import addMonths from 'date-fns/addMonths';
-import addYears from 'date-fns/addYears';
-import differenceInDays from 'date-fns/differenceInDays';
-import differenceInWeeks from 'date-fns/differenceInWeeks';
-import differenceInMonths from 'date-fns/differenceInMonths';
-import differenceInYears from 'date-fns/differenceInYears';
+import { parseISO } from 'date-fns';
+import { startOfDay } from 'date-fns';
+import { startOfWeek } from 'date-fns';
+import { startOfMonth } from 'date-fns';
+import { startOfYear } from 'date-fns';
+import { addDays } from 'date-fns';
+import { addWeeks } from 'date-fns';
+import { addMonths } from 'date-fns';
+import { addYears } from 'date-fns';
+import { differenceInDays } from 'date-fns';
+import { differenceInWeeks } from 'date-fns';
+import { differenceInMonths } from 'date-fns';
+import { differenceInYears } from 'date-fns';
 import { evaluateExpressionNode, getNumericValue, isTextSearchCaseInsensitive, } from './expressionFunctionUtils';
 import { normalizeDateParams } from './dateUtils';
 import StringExtensions from '../Extensions/StringExtensions';

package/src/Utilities/Helpers/DateHelper.js

@@ -1,5 +1,4 @@
-import parseISO from 'date-fns/parseISO';
-import parse from 'date-fns/parse';
+import { parseISO, parse } from 'date-fns';
 import { DateFormatter } from './FormatHelper';
 import { AdaptableLogger } from '../../agGrid/AdaptableLogger';
 export const isValidDate = (date) => {

package/src/Utilities/Helpers/FormatHelper.js

@@ -1,6 +1,5 @@
 // TODO inspect why the following is erroring on angular build
-// import dateFnsFormat from 'date-fns/format';
-import dateFnsFormat from 'date-fns/format';
+import { format as dateFnsFormat } from 'date-fns';
 import { sentenceCase } from 'sentence-case';
 import { DEFAULT_DATE_FORMAT_PATTERN } from '../Constants/GeneralConstants';
 import Helper from './Helper';

package/src/View/Comments/CommentsEditor.js

@@ -8,7 +8,7 @@ import * as CommentsRedux from '../../Redux/ActionsReducers/CommentsRedux';
 import { CommentsAndNotesSelector } from '../../Redux/ActionsReducers/InternalRedux';
 import { useAdaptable } from '../AdaptableContext';
 import AdaptableInput from '../Components/AdaptableInput';
-import dateFnsFormat from 'date-fns/format';
+import FormatHelper from '../../Utilities/Helpers/FormatHelper';
 // Edit Mode
 // [author] [edit, delete]
 // [text-editor] * this is different
@@ -48,6 +48,9 @@ export const CommentsEditor = (props) => {
     if (!commentThread) {
         return null;
     }
+    const formatDate = (date, format) => {
+        return FormatHelper.DateFormatter(date, { Pattern: format });
+    };
     return (React.createElement(Panel, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), minWidth: 250, className: "ab-CommentPopup", onKeyDown: (event) => {
             if (event.key === 'Escape') {
                 api.commentApi.hideCommentsPopup();
@@ -75,7 +78,7 @@ export const CommentsEditor = (props) => {
                     React.createElement(Flex, { mb: 2, alignItems: "center" },
                         React.createElement(Box, null,
                             React.createElement(Box, { "data-name": "comment-username", fontSize: 3, fontWeight: "bold" }, comment?.Author?.UserName),
-                            comment.Timestamp && (React.createElement(Box, { "data-name": "comment-timestamp", fontSize: 2 }, dateFnsFormat(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat())))),
+                            comment.Timestamp && (React.createElement(Box, { "data-name": "comment-timestamp", fontSize: 2 }, formatDate(comment.Timestamp, api.commentApi.internalApi.getCommentsDateFormat())))),
                         React.createElement(Box, { flex: 1 }),
                         React.createElement(SimpleButton, { variant: "text", icon: "edit", disabled: !isOwnComment || isReadOnlyModule, onClick: () => setActiveEditingComment(comment.Uuid) }),
                         React.createElement(SimpleButton, { variant: "text", icon: "delete", disabled: !isOwnComment || isReadOnlyModule, onClick: () => {

package/src/View/Comments/CommentsPopup.js

@@ -3,10 +3,10 @@ import { useSelector } from 'react-redux';
 import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
 import Panel from '../../components/Panel';
 import { Box, Flex } from 'rebass';
-import dateFnsFormat from 'date-fns/format';
 import { useAdaptable } from '../AdaptableContext';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
+import FormatHelper from '../../Utilities/Helpers/FormatHelper';
 const tableDOMProps = {
     style: {
         minHeight: 160,
@@ -16,6 +16,9 @@ const tableDOMProps = {
 const CellComments = (props) => {
     const adaptable = useAdaptable();
     const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
+    const formatDate = (date, format) => {
+        return FormatHelper.DateFormatter(date, { Pattern: format });
+    };
     const columnsMap = React.useMemo(() => {
         const columns = {
             author: {
@@ -27,7 +30,7 @@ const CellComments = (props) => {
                 field: 'Timestamp',
                 maxWidth: 150,
                 valueGetter: (params) => {
-                    return dateFnsFormat(params.data.Timestamp, adaptable.api.commentApi.internalApi.getCommentsDateFormat());
+                    return formatDate(params.data.Timestamp, adaptable.api.commentApi.internalApi.getCommentsDateFormat());
                 },
             },
             text: {

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

@@ -67,7 +67,7 @@ export const qlPredicateToString = (qlPredicate, predicateDefs) => {
     return str;
 };
 export const isPredicateEmpty = (predicate, predicateDef) => {
-    if (!predicateDef.inputs || predicateDef.inputs.length === 0) {
+    if (!predicateDef?.inputs || predicateDef.inputs.length === 0) {
         return false;
     }
     return (!predicate ||

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
-import isDatesEqual from 'date-fns/isEqual';
+import { isEqual } from 'date-fns';
 import { parseDateValue } from '../../../Utilities/Helpers/DateHelper';
 import join from '../../../components/utils/join';
 import { Select } from '../../../components/Select';
@@ -13,7 +13,7 @@ export const ColumnValuesSelect = (props) => {
         let isActive = selectedColumnValues.indexOf(distinctValue.value) >= 0;
         // special case for date objects, need to check against string values
         if (!isActive && distinctValue.value && distinctValue.value instanceof Date) {
-            isActive = selectedColumnValues.some((dateStr) => isDatesEqual(parseDateValue(dateStr), parseDateValue(distinctValue.value)));
+            isActive = selectedColumnValues.some((dateStr) => isEqual(parseDateValue(dateStr), parseDateValue(distinctValue.value)));
         }
         const columnLabel = distinctValue.label;
         if (StringExtensions.IsNullOrEmpty(columnLabel)) {

package/src/View/Note/NotePopup.js

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
 import { GetAllNotesSelector } from '../../Redux/ActionsReducers/NoteRedux';
-import dateFnsFormat from 'date-fns/format';
 import { useAdaptable } from '../AdaptableContext';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
+import FormatHelper from '../../Utilities/Helpers/FormatHelper';
 const tableDOMProps = {
     style: {
         height: '100%',
@@ -21,6 +21,9 @@ export const NotePopup = (props) => {
         : StringExtensions.Humanize(adaptable.adaptableOptions.primaryKey);
     const allNotes = useSelector((state) => GetAllNotesSelector(state.Note));
     const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Note') === 'ReadOnly';
+    const formatDate = (date, format) => {
+        return FormatHelper.DateFormatter(date, { Pattern: format });
+    };
     const columnsMap = React.useMemo(() => {
         const columns = {
             primaryKey: {
@@ -43,7 +46,7 @@ export const NotePopup = (props) => {
             timestamp: {
                 field: 'Timestamp',
                 valueGetter: (params) => {
-                    return dateFnsFormat(params.data.Timestamp, adaptable.api.noteApi.internalApi.getNotesDateFormat());
+                    return formatDate(params.data.Timestamp, adaptable.api.noteApi.internalApi.getNotesDateFormat());
                 },
             },
             delete: {

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -333,5 +333,6 @@ export declare class AdaptableAgGrid implements IAdaptable {
     refreshLayout(): void;
     private isRowGroupDifferentInLayout;
     private onLayoutChange;
+    private validateColumnDefTypes;
 }
 export {};

package/src/agGrid/AdaptableAgGrid.js

@@ -96,6 +96,7 @@ import { isPivotLayoutModel } from '../layout-manager/src/isPivotLayoutModel';
 import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, } from '../PredefinedConfig/Common/AdaptableColumn';
 import { agGridDataTypeDefinitions } from './agGridDataTypeDefinitions';
 import { AgGridThemeAdapter } from './AgGridThemeAdapter';
+import { mapOldTypeToDataType } from '../migration/VersionUpgrade20';
 const LocalEventService_Prototype = LocalEventService.prototype;
 const LocalEventService_dispatchEvent = LocalEventService_Prototype.dispatchEvent;
 LocalEventService_Prototype.dispatchEvent = function (event) {
@@ -356,6 +357,7 @@ export class AdaptableAgGrid {
         // AG Grid evaluates early on the floatingFilter params, so we need to "suppres" the floating filter temporarily
         // we will reset it once Adaptable is ready
         this.agGridColumnAdapter.setupColumnFloatingFilterTemporarily(gridOptions);
+        this.validateColumnDefTypes(gridOptions.columnDefs);
         const agGridApi = await this.initializeAgGrid(gridOptions, config.modules, config.renderAgGridFrameworkComponent);
         if (agGridApi === false) {
             this.midwayDestroy();
@@ -3288,4 +3290,24 @@ You need to define at least one Layout!`);
         this.__prevLayoutForOnChange = layout;
         this.api.layoutApi.createOrUpdateLayout(layout);
     }
+    validateColumnDefTypes(columnDefs) {
+        // in Adaptable version 20 we switched from colDef.type to colDef.cellDataType
+        // although we documented this change and try to infer the correct cellDataTypes, it's best to also check if the client dev forgot to adjust his colDefs
+        columnDefs.forEach((colDef) => {
+            if (colDef.children?.length) {
+                this.validateColumnDefTypes(colDef.children);
+            }
+            const columnDefinition = colDef;
+            const colDefType = columnDefinition.type;
+            const colDefTypes = typeof colDefType === 'string' ? [colDefType] : colDefType || [];
+            colDefTypes
+                .filter((colType) => colType.startsWith('abColDef'))
+                .forEach((colType) => {
+                const newValidCellDataType = mapOldTypeToDataType(colType);
+                if (newValidCellDataType) {
+                    this.logger.consoleWarn(`Column ${columnDefinition.colId ?? columnDefinition.field} has a type of ${colType} which is no longer in use${newValidCellDataType !== 'unknown' ? `. Please use 'colDef.cellDataType' instead: ${newValidCellDataType}` : ''}`);
+                }
+            });
+        });
+    }
 }

package/src/agGrid/editors/AdaptableDateEditor/InternalAdaptableDateEditor.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import parseISO from 'date-fns/parseISO';
+import { parseISO } from 'date-fns';
 import useProperty from '../../../components/utils/useProperty';
 import AdaptableInput from '../../../View/Components/AdaptableInput';
 import { DatepickerContext } from '../../../components/Datepicker/DatepickerContext';

package/src/components/Datepicker/DatepickerContext.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Locale } from 'date-fns';
 export declare const DatepickerContext: React.Context<{
     onHide?: (keyboardEventKey?: string) => void;
     onShow?: VoidFunction;

package/src/components/Datepicker/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { BoxProps } from 'rebass';
 import { DatepickerButton } from '../../AdaptableOptions/DateInputOptions';
+import { Locale } from 'date-fns';
 export type DatepickerProps = Omit<BoxProps, 'value' | 'onChange' | 'defaultValue'> & {
     value: Date | undefined;
     defaultValue?: Date | undefined;

package/src/components/Datepicker/index.js

@@ -9,7 +9,7 @@ import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
 import { useDatepickerContext } from './DatepickerContext';
 import { DayPicker } from 'react-day-picker';
 import { AdaptableDateInlineInput } from '../../View/Components/AdaptableInput/AdaptableDateInlineInput';
-import { isValid, addYears, endOfYear, startOfYear, addDays, addBusinessDays } from 'date-fns';
+import { isValid, addYears, endOfYear, startOfYear, addDays, addBusinessDays, } from 'date-fns';
 const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
     const domRef = React.useRef(null);
     return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {

package/src/components/Select/Select.js

@@ -35,7 +35,7 @@ const INFINITE_COLUMNS_WITH_CHECKBOX = {
         renderHeader: (headerParams) => {
             return (React.createElement(React.Fragment, null,
                 headerParams.renderBag.selectionCheckBox,
-                headerParams.allRowsSelected ? 'Deselect All' : 'Select All'));
+                headerParams.allRowsSelected ? '(Deselect All)' : '(Select All)'));
         },
         renderMenuIcon: false,
     },

package/src/env.js

@@ -1,5 +1,5 @@
 export 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: 1741870286789 || Date.now(),
-    VERSION: "20.0.0-canary.16" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1741946418887 || Date.now(),
+    VERSION: "20.0.0-canary.17" || '--current-version--',
 };

package/src/migration/VersionUpgrade20.d.ts

@@ -1,5 +1,7 @@
 import { VersionUpgrade } from './VersionUpgrade';
 import { AdaptableState } from '../PredefinedConfig/AdaptableState';
+import { AdaptableColumnDataType } from '../PredefinedConfig/Common/AdaptableColumn';
+export declare function mapOldTypeToDataType(previousType: string): AdaptableColumnDataType;
 export declare class VersionUpgrade20 extends VersionUpgrade {
     migrateState(state: AdaptableState): AdaptableState;
     private migrateLayoutState;

package/src/migration/VersionUpgrade20.js

@@ -2,7 +2,7 @@ import { VersionUpgrade } from './VersionUpgrade';
 import { ALL_ADAPTABLE_DATA_TYPES } from '../agGrid/agGridDataTypeDefinitions';
 function transition_pre_20(layout) {
     const l = layout;
-    if (l.Columns) {
+    if (l.Columns && !l.EnablePivot) {
         layout.TableColumns = l.Columns;
         delete l.Columns;
         delete layout.PivotColumns;
@@ -21,6 +21,7 @@ function transition_pre_20(layout) {
     }
     if (l.EnablePivot) {
         layout.PivotColumns = l.PivotColumns || [];
+        delete l.Columns;
         delete layout.TableColumns;
         delete l.EnablePivot;
         if (l.AggregationColumns) {
@@ -95,7 +96,7 @@ function transition_pre_20(layout) {
 function hasUpToDateDataType(dataType) {
     return ALL_ADAPTABLE_DATA_TYPES.includes(dataType);
 }
-function mapOldTypeToDataType(previousType) {
+export function mapOldTypeToDataType(previousType) {
     if (ALL_ADAPTABLE_DATA_TYPES.includes(previousType)) {
         return previousType;
     }