@adaptabletools/adaptable 18.0.0-canary.9 → 18.0.0

package/src/agGrid/BadgeRenderer.js

@@ -1,25 +1,38 @@
 import { Badge } from '../View/Components/Badge';
 import { renderWithAdaptableContext } from '../View/renderWithAdaptableContext';
 import * as React from 'react';
-export const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
-    if (!styledColumn.BadgeStyle) {
-        return;
-    }
+export const getBadgeRendererForColumn = (badgeStyle, abColumn, api) => {
     return class BadgetRenderer {
         getAdaptableInstance(params) {
             const adaptable = params.context.__adaptable;
             return adaptable;
         }
         init(params) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e, _f;
             const adaptable = this.getAdaptableInstance(params);
             const adapatableApi = adaptable.api;
             this.eGui = document.createElement('div');
             this.eGui.className = 'ab-Badge__wrapper';
-            const includeGrouped = Boolean(styledColumn.IncludeGroupedRows);
-            const isGrouped = params.node.group;
-            if (includeGrouped === false && isGrouped) {
-                const formattedValue = (_c = (_b = (_a = params.formatValue) === null || _a === void 0 ? void 0 : _a.call(params, params.value)) !== null && _b !== void 0 ? _b : params.value) !== null && _c !== void 0 ? _c : '';
+            const isGroupedRow = params.node.group;
+            const isSummaryRow = adapatableApi.gridApi.isSummaryNode(params.node);
+            let shouldRender = true;
+            if (isGroupedRow) {
+                if ((_a = badgeStyle.RowScope) === null || _a === void 0 ? void 0 : _a.ExcludeGroupRows) {
+                    shouldRender = false;
+                }
+            }
+            else if (isSummaryRow) {
+                if ((_b = badgeStyle.RowScope) === null || _b === void 0 ? void 0 : _b.ExcludeSummaryRows) {
+                    shouldRender = false;
+                }
+            }
+            else {
+                if ((_c = badgeStyle.RowScope) === null || _c === void 0 ? void 0 : _c.ExcludeDataRows) {
+                    shouldRender = false;
+                }
+            }
+            if (!shouldRender) {
+                const formattedValue = (_f = (_e = (_d = params.formatValue) === null || _d === void 0 ? void 0 : _d.call(params, params.value)) !== null && _e !== void 0 ? _e : params.value) !== null && _f !== void 0 ? _f : '';
                 this.eGui.innerHTML = formattedValue;
                 return;
             }
@@ -50,7 +63,7 @@ export const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                     userName: adapatableApi.optionsApi.getUserName(),
                     adaptableId: adapatableApi.optionsApi.getAdaptableId(),
                 };
-                const badge = api.styledColumnApi.internalApi.getApplicableBadge(styledColumn, predicateDefHandlerContext);
+                const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, predicateDefHandlerContext);
                 const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
                 if (!isNullValue && badge) {
                     badgesConfig.push({
@@ -74,7 +87,7 @@ export const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                 userName: adapatableApi.optionsApi.getUserName(),
                 adaptableId: adapatableApi.optionsApi.getAdaptableId(),
             };
-            const badge = api.styledColumnApi.internalApi.getApplicableBadge(styledColumn, predicateDefHandlerContext);
+            const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, predicateDefHandlerContext);
             const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
             if (
             // empty values

package/src/agGrid/PercentBarRenderer.js

@@ -13,7 +13,8 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
             if (Helper.objectNotExists(value)) {
                 value = 0;
             }
-            if (!styledColumn.IncludeGroupedRows && api.gridApi.isGroupRowNode(params.node)) {
+            // We no longer support showing Percent Bar in Group Rows as it only made sense for Min / Max
+            if (api.gridApi.isGroupRowNode(params.node)) {
                 if (params.value) {
                     this.eGui = document.createElement('div');
                     this.eGui.append(params.value);

package/src/agGrid/buildSortedColumnStateForLayout.d.ts

@@ -0,0 +1,7 @@
+import { ColumnState, GridOptions } from '@ag-grid-community/core';
+import { Layout } from '../types';
+export declare function buildSortedColumnStateForLayout(params: {
+    columnState: ColumnState[];
+    layout: Layout;
+    gridOptions: GridOptions;
+}): ColumnState[];

package/src/agGrid/buildSortedColumnStateForLayout.js

@@ -0,0 +1,120 @@
+import { AG_GRID_GROUPED_COLUMN } from '../Utilities/Constants/GeneralConstants';
+import { getAutoRowGroupColumnIdFor } from '../Api/Internal/ColumnInternalApi';
+import { isAutoRowGroupColumn } from '../Api/Implementation/ColumnApiImpl';
+import { sortColumnStateForVisibleColumns } from './sortColumnStateForVisibleColumns';
+export function buildSortedColumnStateForLayout(params) {
+    const { columnState, layout, gridOptions } = params;
+    let visibleColumnList = [...layout.Columns];
+    const multipleGroupColumns = gridOptions.groupDisplayType === 'multipleColumns';
+    const singleGroupColumn = !multipleGroupColumns;
+    const rowGroupedColumnsIndexes = {};
+    let generatedRowGroupColumnsIds = [];
+    // here we make sure the visibleColumnList includes all the generated group columns
+    if (layout.RowGroupedColumns) {
+        layout.RowGroupedColumns.forEach((colId, index) => {
+            rowGroupedColumnsIndexes[colId] = index;
+            rowGroupedColumnsIndexes[getAutoRowGroupColumnIdFor(colId)] = index;
+        });
+        // if the layout does not include the grouped columns,
+        // make sure we add the grouped columns to the visible column list
+        // at the start of the list
+        if (singleGroupColumn) {
+            if (!visibleColumnList.includes(AG_GRID_GROUPED_COLUMN)) {
+                visibleColumnList = [AG_GRID_GROUPED_COLUMN, ...visibleColumnList];
+            }
+            generatedRowGroupColumnsIds.push(AG_GRID_GROUPED_COLUMN);
+        }
+        else {
+            let missingGroupColumns = 0;
+            [...layout.RowGroupedColumns].reverse().forEach((colId) => {
+                const groupColId = getAutoRowGroupColumnIdFor(colId);
+                if (!visibleColumnList.includes(groupColId)) {
+                    visibleColumnList = [groupColId, ...visibleColumnList];
+                    missingGroupColumns++;
+                }
+                generatedRowGroupColumnsIds = [groupColId, ...generatedRowGroupColumnsIds];
+            });
+            // now we need to sort the visibleColumnList to contain the group columns
+            // in the correct order
+            // but we only need to do this if the layout.Columns list missed some of the
+            // group columns, but not all of them. if all were missing, we already
+            // inserted them at the start of the list
+            if (missingGroupColumns && missingGroupColumns < layout.RowGroupedColumns.length) {
+                visibleColumnList.sort((colId1, colId2) => {
+                    const isRowGroup1 = isAutoRowGroupColumn(colId1);
+                    const isRowGroup2 = isAutoRowGroupColumn(colId2);
+                    if (isRowGroup1 && isRowGroup2) {
+                        return rowGroupedColumnsIndexes[colId1] - rowGroupedColumnsIndexes[colId2];
+                    }
+                    return 0;
+                });
+            }
+        }
+    }
+    const visibleColumnsIndexes = visibleColumnList.reduce((acc, colId, index) => {
+        acc[colId] = index;
+        return acc;
+    }, {});
+    const pivotMode = layout.EnablePivot;
+    if (pivotMode) {
+        // in pivot mode, we sort the Visible columns of the layout
+        // to make sure the group cols are at the beginning
+        const groupCols = visibleColumnList.filter(isAutoRowGroupColumn);
+        visibleColumnList = visibleColumnList.filter((colId) => !isAutoRowGroupColumn(colId));
+        visibleColumnList = [...groupCols, ...visibleColumnList];
+    }
+    // we're now ready to go over the columnState
+    // we want as much as possible to keep the order of the columns
+    // as they are in the column state.
+    // if the order is different in the visibleColumns, we only move those columns around
+    // if some columns in the columnState are not in the visibleColumns, we need to return them as hide: true
+    // first step - keep the same order, but filter out old group columns
+    // VERY IMPORTANT to only filter out OLD group columns, that is,
+    // group columns that are not in the layout anymore
+    // since we might have different group columns in the layout
+    let newColumnState = [...columnState].filter((colState) => {
+        const { colId } = colState;
+        if (isAutoRowGroupColumn(colId) && rowGroupedColumnsIndexes[colId] == null) {
+            return false;
+        }
+        return true;
+    });
+    // second step - keep the same order
+    // but make sure the visibility is adjusted to reflect the
+    // visible columns in the layout
+    newColumnState = newColumnState.map((colState) => {
+        const { colId } = colState;
+        const visibleIndex = visibleColumnsIndexes[colId];
+        if (visibleIndex == null) {
+            return Object.assign(Object.assign({}, colState), { hide: true });
+        }
+        return Object.assign(Object.assign({}, colState), { hide: null });
+    });
+    // third step - correctly mark the columns that are grouped
+    newColumnState = newColumnState.map((colState) => {
+        const { colId } = colState;
+        const groupIndex = rowGroupedColumnsIndexes[colId];
+        if (groupIndex != null) {
+            return Object.assign(Object.assign({}, colState), { rowGroup: true, rowGroupIndex: groupIndex });
+        }
+        return Object.assign(Object.assign({}, colState), { rowGroup: false, rowGroupIndex: null });
+    });
+    // fourth step - add the new group columns, if they are missing
+    const columnStateIndexes = newColumnState.reduce((acc, colState, index) => {
+        acc[colState.colId] = index;
+        return acc;
+    }, {});
+    generatedRowGroupColumnsIds.reverse().forEach((rowGroupColId) => {
+        if (columnStateIndexes[rowGroupColId] == null) {
+            newColumnState = [
+                {
+                    colId: rowGroupColId,
+                },
+                ...newColumnState,
+            ];
+        }
+    });
+    // fitfth step - sort the column state to respect the order of the visible columns
+    // we can't simply call sort in this case
+    return sortColumnStateForVisibleColumns(newColumnState, visibleColumnList);
+}

package/src/agGrid/defaultAdaptableOptions.js

@@ -10,7 +10,6 @@ const DefaultAdaptableOptions = {
     adaptableStateKey: undefined,
     primaryKey: '',
     autogeneratePrimaryKey: false,
-    autoMigrateState: true,
     userName: GeneralConstants.USER_NAME,
     predefinedConfig: undefined,
     alertOptions: {
@@ -144,8 +143,6 @@ const DefaultAdaptableOptions = {
     customSortOptions: { customSortComparers: undefined },
     dataSetOptions: { dataSets: EMPTY_ARRAY },
     groupingOptions: {
-        showGroupingTotalsAsHeader: false,
-        balancedGroupsKey: undefined,
         restoreUngroupedColumns: false,
         autoOrderGroupedColumns: true,
     },
@@ -167,16 +164,11 @@ const DefaultAdaptableOptions = {
             autoCheckTagsForLayouts: false,
         },
     },
-    menuOptions: {
+    columnMenuOptions: {
         customColumnMenu: undefined,
+    },
+    contextMenuOptions: {
         customContextMenu: undefined,
-        showAdaptableContextMenu: true,
-        showAdaptableColumnMenu: true,
-        showUngroupColumnMenuItem: true,
-        columnMenuOrder: ['aggrid', 'adaptable', 'user'],
-        contextMenuOrder: ['aggrid', 'adaptable', 'user'],
-        columnMenuItems: undefined,
-        contextMenuItems: undefined,
     },
     columnFilterOptions: {
         quickFilterOptions: {
@@ -220,6 +212,7 @@ const DefaultAdaptableOptions = {
         enableFilterOnSpecialColumns: true,
         showClearFilterButton: false,
         showSuspendFilterButton: false,
+        showDatePicker: true,
     },
     gridFilterOptions: {
         availableFilterEditors: ['ExpressionEditor', 'QueryBuilder'],
@@ -251,6 +244,7 @@ const DefaultAdaptableOptions = {
         loadState: undefined,
         persistState: undefined,
         clearState: undefined,
+        autoMigrateState: true,
     },
     teamSharingOptions: {
         enableTeamSharing: false,
@@ -364,7 +358,8 @@ export function applyDefaultAdaptableOptions(adaptableOptions) {
     adaptableOptsWithDefaults.gridFilterOptions = Object.assign({}, DefaultAdaptableOptions.gridFilterOptions, adaptableOptions.gridFilterOptions);
     adaptableOptsWithDefaults.userInterfaceOptions = Object.assign({}, DefaultAdaptableOptions.userInterfaceOptions, adaptableOptions.userInterfaceOptions);
     adaptableOptsWithDefaults.userInterfaceOptions.dateInputOptions = Object.assign({}, DefaultAdaptableOptions.userInterfaceOptions.dateInputOptions, adaptableOptsWithDefaults.userInterfaceOptions.dateInputOptions);
-    adaptableOptsWithDefaults.menuOptions = Object.assign({}, DefaultAdaptableOptions.menuOptions, adaptableOptions.menuOptions);
+    adaptableOptsWithDefaults.columnMenuOptions = Object.assign({}, DefaultAdaptableOptions.columnMenuOptions, adaptableOptions.columnMenuOptions);
+    adaptableOptsWithDefaults.contextMenuOptions = Object.assign({}, DefaultAdaptableOptions.contextMenuOptions, adaptableOptions.contextMenuOptions);
     adaptableOptsWithDefaults.stateOptions = Object.assign({}, DefaultAdaptableOptions.stateOptions, adaptableOptions.stateOptions);
     adaptableOptsWithDefaults.exportOptions = Object.assign({}, DefaultAdaptableOptions.exportOptions, adaptableOptions.exportOptions);
     adaptableOptsWithDefaults.teamSharingOptions = Object.assign({}, DefaultAdaptableOptions.teamSharingOptions, adaptableOptions.teamSharingOptions);

package/src/agGrid/editors/AdaptableDateEditor/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ICellEditorParams, ICellEditorComp } from '@ag-grid-community/core';
+import { ICellEditorComp, ICellEditorParams } from '@ag-grid-community/core';
 import { IAdaptable } from '../../../AdaptableInterfaces/IAdaptable';
 export declare const ReactAdaptableDateEditor: React.ForwardRefExoticComponent<ICellEditorParams<any, any, any> & {
     showClearButton?: boolean;

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { renderWithAdaptableContext } from '../../../View/renderWithAdaptableContext';
 import { InternalAdaptableDateEditor, } from './InternalAdaptableDateEditor';
 import { KeyCode, } from '@ag-grid-community/core';
-import { DateFormatter } from '../../../Utilities/Helpers/FormatHelper';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { DateFormatter } from '../../../Utilities/Helpers/FormatHelper';
 function shouldClearExistingValue(params) {
     return params.eventKey === KeyCode.BACKSPACE || params.eventKey === KeyCode.DELETE;
 }

package/src/agGrid/editors/AdaptableNumberEditor/index.d.ts

@@ -6,12 +6,12 @@ import { ICellEditorComp, ICellEditorParams } from '@ag-grid-community/core';
 interface AdaptableNumberCellEditorParams extends ICellEditorParams {
     /**
      * Whether to show the clear button. If `true`, it works together with `cellEditorParams.emptyValue`
-     * @default true
+     * @defaultValue true
      */
     showClearButton: boolean;
     /**
      * Value to set for the cell, when the clear button is pressed
-     * @default '' (empty string)
+     * @defaultValue '' (empty string)
      */
     emptyValue: string;
 }

package/src/agGrid/sortColumnStateForVisibleColumns.d.ts

@@ -0,0 +1,12 @@
+type ColState = {
+    colId: string;
+    hide?: boolean | null;
+};
+/**
+ * This method takes a column state and the list of visible columns
+ * and returns a new column state that respects the order of the visible columns
+ * while trying to keep the hidden columns in their original order.
+ *
+ */
+export declare function sortColumnStateForVisibleColumns<T extends ColState>(columnState: T[], visibleColumns: string[]): T[];
+export {};

package/src/agGrid/sortColumnStateForVisibleColumns.js

@@ -0,0 +1,46 @@
+function insertAtCorrectIndex(result, colState, visibleColumnsIndexes, offset = 0, lastVisibleOffset = 0) {
+    const prevColState = result[result.length - 1 - offset];
+    if (!prevColState) {
+        result.splice(result.length - lastVisibleOffset, 0, colState);
+        return;
+    }
+    if (prevColState.hide) {
+        insertAtCorrectIndex(result, colState, visibleColumnsIndexes, offset + 1, 
+        /* do not advance this as, as we've encountered a hidden column*/ lastVisibleOffset);
+        return;
+    }
+    const prevCol_visibilityIndex = visibleColumnsIndexes[prevColState.colId];
+    const currentCol_visibilityIndex = visibleColumnsIndexes[colState.colId];
+    if (currentCol_visibilityIndex < prevCol_visibilityIndex) {
+        insertAtCorrectIndex(result, colState, visibleColumnsIndexes, offset + 1, 
+        /*make sure we sync with the normal offset, as we've hit a visible col*/ offset + 1);
+    }
+    else {
+        result.splice(result.length - lastVisibleOffset, 0, colState);
+    }
+}
+/**
+ * This method takes a column state and the list of visible columns
+ * and returns a new column state that respects the order of the visible columns
+ * while trying to keep the hidden columns in their original order.
+ *
+ */
+export function sortColumnStateForVisibleColumns(columnState, visibleColumns) {
+    const visibleColumnsIndexes = visibleColumns.reduce((acc, colId, index) => {
+        acc[colId] = index;
+        return acc;
+    }, {});
+    const result = [];
+    for (let i = 0, len = columnState.length; i < len; i++) {
+        const colState = columnState[i];
+        const colVisible = visibleColumnsIndexes[colState.colId] != null;
+        if (!colVisible) {
+            // for cols not present in this layout, we keep them
+            // where they are
+            result.push(colState);
+            continue;
+        }
+        insertAtCorrectIndex(result, colState, visibleColumnsIndexes);
+    }
+    return result;
+}

package/src/agGrid/weightedAverage.d.ts

@@ -1,9 +1,7 @@
 import { IAggFuncParams } from '@ag-grid-community/core';
-import { CellSummaryOperationContext } from '../types';
 export declare const getNumericValue: (input: unknown) => number | null;
 export declare const weightedAverage: (params: IAggFuncParams, columnId: string, weightColumnId: string) => {
     [x: string]: number | (() => number | "");
     toString: () => number | "";
     valueOf: () => number;
 };
-export declare const cellSummaryWeightedAverage: ({ numericColumns, selectedCellInfo, adaptableApi, }: CellSummaryOperationContext) => any;

package/src/agGrid/weightedAverage.js

@@ -1,4 +1,3 @@
-import FormatHelper from '../Utilities/Helpers/FormatHelper';
 import toNumber from 'lodash/toNumber';
 export const getNumericValue = (input) => {
     if (typeof input === 'number') {
@@ -46,56 +45,3 @@ export const weightedAverage = (params, columnId, weightColumnId) => {
         [weightColumnId]: weightedColumnValueSum,
     };
 };
-export const cellSummaryWeightedAverage = ({ numericColumns, selectedCellInfo, adaptableApi, }) => {
-    if ((numericColumns === null || numericColumns === void 0 ? void 0 : numericColumns.length) != 1) {
-        return '';
-    }
-    const columnId = numericColumns[0];
-    const currentLayout = adaptableApi.layoutApi.getCurrentLayout();
-    const selectedColumnAgg = currentLayout.AggregationColumns[columnId];
-    if (!selectedColumnAgg ||
-        typeof selectedColumnAgg !== 'object' ||
-        selectedColumnAgg.type !== 'weightedAverage') {
-        return '';
-    }
-    const weightedColumnId = selectedColumnAgg.weightedColumnId;
-    if (weightedColumnId) {
-        let sumWeightedValue = 0;
-        let sumPrimaryValues = 0;
-        let isValid = true;
-        selectedCellInfo.gridCells.forEach((gridCell) => {
-            if (adaptableApi.gridApi.isGroupRowNode(gridCell.rowNode)) {
-                isValid = false;
-            }
-            if (isValid) {
-                const weightedGridCell = adaptableApi.gridApi.getGridCellFromRowNode(gridCell.rowNode, weightedColumnId);
-                sumWeightedValue += weightedGridCell.rawValue;
-                sumPrimaryValues += weightedGridCell.rawValue * gridCell.normalisedValue;
-            }
-        });
-        if (!isValid) {
-            return '';
-        }
-        const abColumn = adaptableApi.columnApi.getColumnWithColumnId(columnId);
-        if (!abColumn) {
-            return '';
-        }
-        const activeFormatColumnsWithDisplayFormat = adaptableApi.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
-        if (activeFormatColumnsWithDisplayFormat.length === 1 &&
-            activeFormatColumnsWithDisplayFormat[0].DisplayFormat.Formatter === 'NumberFormatter') {
-            // there only one FormatColumn on this column, so we will use it to format the aggregated value
-            const [singleActiveFormatColumnsWithDisplayFormat] = activeFormatColumnsWithDisplayFormat;
-            const options = singleActiveFormatColumnsWithDisplayFormat
-                .DisplayFormat.Options;
-            if (options) {
-                return FormatHelper.NumberFormatter(sumPrimaryValues / sumWeightedValue, options);
-            }
-        }
-        else {
-            // there are multiple (possibly conflicting) FormatColumns for this column, we cannot know which to use
-            return FormatHelper.NumberFormatter(sumPrimaryValues / sumWeightedValue, {
-                FractionDigits: 2,
-            });
-        }
-    }
-};

package/src/components/Accordion.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactElement } from 'react';
+interface AccordionProps {
+    title: string | ReactElement;
+    children: ReactElement;
+}
+export declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;

package/src/components/Accordion.js

@@ -0,0 +1,36 @@
+import React, { useState, useEffect, useRef } from 'react';
+import SimpleButton from './SimpleButton';
+import Panel from './Panel';
+export const Accordion = ({ title, children }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [height, setHeight] = useState('0px');
+    const content = useRef(null);
+    const observer = useRef(null);
+    useEffect(() => {
+        setHeight(isOpen && content.current ? `${content.current.scrollHeight}px` : '0px');
+    }, [isOpen, content]);
+    useEffect(() => {
+        if (content.current) {
+            observer.current = new MutationObserver(() => {
+                var _a;
+                setHeight(`${(_a = content.current) === null || _a === void 0 ? void 0 : _a.scrollHeight}px`);
+            });
+            observer.current.observe(content.current, { childList: true, subtree: true });
+        }
+        return () => {
+            var _a;
+            (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        };
+    }, []);
+    const toggleAccordion = () => {
+        setIsOpen(!isOpen);
+    };
+    return (React.createElement(Panel, { className: "ab-Accordion" },
+        React.createElement(SimpleButton, { iconPosition: 'end', icon: isOpen ? 'expand-all' : 'collapse-all', variant: "text", onClick: toggleAccordion, style: { width: '100%', textAlign: 'left' } }, title),
+        React.createElement("div", { ref: content, style: {
+                maxHeight: `${height}`,
+                overflow: 'hidden',
+                transition: 'max-height 0.6s ease',
+            } }, children)));
+};
+export default Accordion;

package/src/components/CheckBox/index.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import * as React from 'react';
-import { useState, useRef } from 'react';
+import { useRef, useState } from 'react';
 import { Box, Flex } from 'rebass';
 import join from '../utils/join';
 const Square = (props) => {

package/src/components/Datepicker/index.js

@@ -1,7 +1,6 @@
 import { __rest } from "tslib";
 import * as React from 'react';
 import OverlayTrigger from '../OverlayTrigger';
-import Input from '../Input';
 import { useState } from 'react';
 import useProperty from '../utils/useProperty';
 import FieldWrap from '../FieldWrap';
@@ -14,6 +13,8 @@ import { useDatepickerContext } from './DatepickerContext';
 import addDays from 'date-fns/addDays';
 import addBusinessDays from 'date-fns/addBusinessDays';
 import { DayPicker, useInput } from 'react-day-picker';
+import { AdaptableDateInlineInput } from '../../View/Components/AdaptableInput/AdaptableDateInlineInput';
+import { isValid } from 'date-fns';
 const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
     const domRef = React.useRef(null);
     React.useEffect(() => {
@@ -99,7 +100,14 @@ export const Datepicker = React.forwardRef((props, ref) => {
                         setVisible(true);
                     }
                 } }),
-                React.createElement(Input, { value: inputValue, placehoder: placeholder !== null && placeholder !== void 0 ? placeholder : dateProps.format, style: style, disabled: disabled, readOnly: true, ref: ref }),
+                React.createElement(AdaptableDateInlineInput, { ref: ref, value: inputValue, 
+                    // We do not want to show the format when the date-picker is visible
+                    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : '', onChange: (value) => {
+                        const date = new Date(value);
+                        if (isValid(date)) {
+                            updateValue(date);
+                        }
+                    }, style: style, disabled: disabled }),
                 !!inputValue ? clearButton : null,
                 calendarButton))));
 });

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Draggable, Droppable } from 'react-beautiful-dnd';
 import { Box, Flex } from 'rebass';
 import { isQlLogicalOperator } from '../../../parser/src/predicate';
+import { mapColumnDataTypeToExpressionFunctionType } from '../../../Utilities/adaptableQlUtils';
 import { booleanExpressionFunctions } from '../../../Utilities/ExpressionFunctions/booleanExpressionFunctions';
 import { useAdaptable } from '../../../View/AdaptableContext';
 import DropdownButton from '../../DropdownButton';
@@ -9,7 +10,7 @@ import ErrorBox from '../../ErrorBox';
 import { Icon } from '../../icons';
 import SimpleButton from '../../SimpleButton';
 import { CombinatorSelector, ExpressionSelector, PrimiteValueInput, PrimitiveColumnSelector, PrimitiveMultiValueInput, } from './QueryBuilderInputs';
-import { getOperatorMatchingInputs as getFunctionMatchingInputTypes, mapColumnDataTypeToExpressionFunctionType, } from './utils';
+import { getOperatorMatchingInputs as getFunctionMatchingInputTypes } from './utils';
 const ITEM_HEIGHT = 40;
 const BASE_CLASS_NAME = 'ab-QueryBuilder-predicate-editor';
 const Handle = (props) => (React.createElement(Flex, Object.assign({ className: `${BASE_CLASS_NAME}__handle`, height: ITEM_HEIGHT, alignItems: "center", mr: 1 }, props),

package/src/components/ExpressionEditor/QueryBuilder/utils.d.ts

@@ -2,7 +2,6 @@ import { QlPredicate, QlPredicateError } from '../../../parser/src/predicate';
 import { ExpressionFunctionInputType } from '../../../parser/src/types';
 import { AdaptableColumnDataType, BooleanFunctionName } from '../../../types';
 export declare const reorder: (predicate: QlPredicate, from: string, to: string) => any;
-export declare const mapColumnDataTypeToExpressionFunctionType: (dataType: AdaptableColumnDataType) => ExpressionFunctionInputType;
 export declare const mapExpressionFunctionTypeToColumnDataType: (type: ExpressionFunctionInputType) => AdaptableColumnDataType;
 export declare const getOperatorMatchingInputs: (columnType: ExpressionFunctionInputType, inputs: ExpressionFunctionInputType[] | Array<ExpressionFunctionInputType>[]) => ExpressionFunctionInputType[];
 export declare const getFunctionsForColumnType: (dataType: AdaptableColumnDataType, availableBooleanFunctions: BooleanFunctionName[]) => BooleanFunctionName[];

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

@@ -1,3 +1,4 @@
+import { mapColumnDataTypeToExpressionFunctionType } from '../../../Utilities/adaptableQlUtils';
 import { isQlLogicalOperator } from '../../../parser/src/predicate';
 import { booleanExpressionFunctions } from '../../../Utilities/ExpressionFunctions/booleanExpressionFunctions';
 import { deepClone } from '../../../Utilities/Extensions/ObjectExtensions';
@@ -26,20 +27,6 @@ export const reorder = (predicate, from, to) => {
     parent.args.splice(parseInt(toPath[toPath.length - 1]), 0, itemToMove);
     return predicateCopy;
 };
-export const mapColumnDataTypeToExpressionFunctionType = (dataType) => {
-    if (dataType === 'Number') {
-        return 'number';
-    }
-    if (dataType === 'Boolean') {
-        return 'boolean';
-    }
-    if (dataType === 'String') {
-        return 'text';
-    }
-    if (dataType === 'Date') {
-        return 'date';
-    }
-};
 export const mapExpressionFunctionTypeToColumnDataType = (type) => {
     if (type === 'number') {
         return 'Number';

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

@@ -3,10 +3,9 @@ import { HTMLProps } from 'react';
 import { BoxProps } from 'rebass';
 export declare const baseClassName = "ab-Input";
 export type InputProps = HTMLProps<HTMLInputElement> & {
-    placehoder?: string;
     type?: string;
     disabled?: boolean;
     list?: any;
 } & BoxProps;
-declare const Input: React.ForwardRefExoticComponent<Pick<InputProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "rows" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "opacity" | "value" | "key" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
+declare const Input: React.ForwardRefExoticComponent<Pick<InputProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "rows" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "opacity" | "value" | "key" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode"> & React.RefAttributes<HTMLInputElement>>;
 export default Input;