@adaptabletools/adaptable-cjs 18.0.0-canary.2 → 18.0.0-canary.21

package/src/Utilities/adaptableQlUtils.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapColumnDataTypeToExpressionFunctionType = void 0;
+const mapColumnDataTypeToExpressionFunctionType = (dataType) => {
+    if (dataType === 'Number') {
+        return 'number';
+    }
+    if (dataType === 'Boolean') {
+        return 'boolean';
+    }
+    if (dataType === 'String') {
+        return 'text';
+    }
+    if (dataType === 'Date') {
+        return 'date';
+    }
+};
+exports.mapColumnDataTypeToExpressionFunctionType = mapColumnDataTypeToExpressionFunctionType;

package/src/Utilities/license/decode.js

@@ -1,70 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.decode = exports.fieldsToLicenseDetails = exports.GENERIC_APP_NAME = void 0;
-const hashing_1 = require("./hashing");
-const getGenericError = () => new Error('Invalid License');
-exports.GENERIC_APP_NAME = 'GenericAdaptableApp';
-const fieldsToLicenseDetails = (fields) => {
-    var _a;
-    const fieldsMap = fields.reduce((acc, field) => {
-        acc.set(field.name, field.value);
-        return acc;
-    }, new Map());
-    const details = {
-        start: new Date(fieldsMap.get('StartDate')),
-        end: new Date(fieldsMap.get('EndDate')),
-        owner: fieldsMap.get('Owner'),
-        appName: fieldsMap.get('AppName') || exports.GENERIC_APP_NAME,
-        timestamp: fieldsMap.get('TS') ? Number(fieldsMap.get('TS')) : 0,
-        trial: fieldsMap.get('Trial') === 'true' ? true : false,
-        ref: (_a = fieldsMap.get('Ref')) !== null && _a !== void 0 ? _a : '',
-    };
-    if (!details.start ||
-        !details.end ||
-        !details.owner ||
-        typeof details.trial !== 'boolean' ||
-        !details.ref) {
-        throw getGenericError();
-    }
-    return details;
-};
-exports.fieldsToLicenseDetails = fieldsToLicenseDetails;
-const decode = (licenseKey) => {
-    let crc = '';
-    let fields = licenseKey.split('|').map((part) => {
-        let [name, value] = part.split('=');
-        if (name === 'C') {
-            crc = value;
-        }
-        return {
-            name,
-            value,
-        };
-    });
-    if (!crc) {
-        throw getGenericError();
-    }
-    const crcParts = crc.split(',').reverse();
-    const overallCrc = crcParts.pop();
-    crcParts.forEach((fieldCrc, index) => {
-        const field = fields[index];
-        if ((0, hashing_1.compute_string)(field.value) !== fieldCrc) {
-            throw getGenericError();
-        }
-    });
-    const fieldsWithoutC = [...fields];
-    fieldsWithoutC.pop();
-    const fieldsWithoutCString = fieldsWithoutC
-        .map((field) => {
-        return `${field.name}=${field.value}`;
-    })
-        .join('|');
-    if ((0, hashing_1.compute_string)(fieldsWithoutCString) !== overallCrc) {
-        throw getGenericError();
-    }
-    fields = fields.map((f) => {
-        return Object.assign(Object.assign({}, f), { value: decodeURI(f.value) });
-    });
-    return (0, exports.fieldsToLicenseDetails)(fields);
-};
-exports.decode = decode;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.decode=exports.fieldsToLicenseDetails=exports.GENERIC_APP_NAME=void 0;const e=require("./hashing"),t=()=>new Error("Invalid License");exports.GENERIC_APP_NAME="GenericAdaptableApp";const r=e=>{var r;const s=e.reduce(((e,t)=>(e.set(t.name,t.value),e)),new Map),o={start:new Date(s.get("StartDate")),end:new Date(s.get("EndDate")),owner:s.get("Owner"),appName:s.get("AppName")||exports.GENERIC_APP_NAME,timestamp:s.get("TS")?Number(s.get("TS")):0,trial:"true"===s.get("Trial"),ref:null!==(r=s.get("Ref"))&&void 0!==r?r:""};if(!(o.start&&o.end&&o.owner&&"boolean"==typeof o.trial&&o.ref))throw t();return o};exports.fieldsToLicenseDetails=r;const s=r=>{let s="",o=r.split("|").map((e=>{let[t,r]=e.split("=");return"C"===t&&(s=r),{name:t,value:r}}));if(!s)throw t();const a=s.split(",").reverse(),n=a.pop();a.forEach(((r,s)=>{const a=o[s];if((0,e.compute_string)(a.value)!==r)throw t()}));const i=[...o];i.pop();const p=i.map((e=>`${e.name}=${e.value}`)).join("|");if((0,e.compute_string)(p)!==n)throw t();return o=o.map((e=>Object.assign(Object.assign({},e),{value:decodeURI(e.value)}))),(0,exports.fieldsToLicenseDetails)(o)};exports.decode=s;

package/src/Utilities/license/hashing.js

@@ -1,47 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.compute_string = void 0;
-const DEFAULT_ReversedPolynomial = 0xedb88320;
-/*
- * CRC-32 implementation
- */
-function generate(reversedPolynomial = DEFAULT_ReversedPolynomial) {
-    var table = new Array();
-    var i, j, n;
-    for (i = 0; i < 256; i++) {
-        n = i;
-        for (j = 8; j > 0; j--) {
-            if ((n & 1) == 1) {
-                n = (n >>> 1) ^ reversedPolynomial;
-            }
-            else {
-                n = n >>> 1;
-            }
-        }
-        table[i] = n;
-    }
-    return table;
-}
-function crc32_initial() {
-    return 0xffffffff;
-}
-function crc32_add_byte(table, crc, byte) {
-    crc = (crc >>> 8) ^ table[byte ^ (crc & 0x000000ff)];
-    return crc;
-}
-function crc32_final(crc) {
-    crc = ~crc;
-    crc = crc < 0 ? 0xffffffff + crc + 1 : crc;
-    return crc;
-}
-function compute_string(str, reversedPolynomial = DEFAULT_ReversedPolynomial) {
-    var table = generate(reversedPolynomial);
-    var crc = 0;
-    var i;
-    crc = crc32_initial();
-    for (i = 0; i < str.length; i++)
-        crc = crc32_add_byte(table, crc, str.charCodeAt(i));
-    crc = crc32_final(crc);
-    return `${crc}`;
-}
-exports.compute_string = compute_string;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.compute_string=void 0;const r=3988292384;function t(t=r){var e,n,o,u=new Array;for(e=0;e<256;e++){for(o=e,n=8;n>0;n--)1&~o?o>>>=1:o=o>>>1^t;u[e]=o}return u}function e(){return 4294967295}function n(r,t,e){return t=t>>>8^r[e^255&t]}function o(r){return r=(r=~r)<0?4294967295+r+1:r}function u(u,c=r){var i,f=t(c),s=0;for(s=e(),i=0;i<u.length;i++)s=n(f,s,u.charCodeAt(i));return`${s=o(s)}`}exports.compute_string=u;

package/src/View/AdaptableView.js

@@ -7,7 +7,6 @@ const react_redux_1 = require("react-redux");
 const ProgressIndicator_1 = require("../components/ProgressIndicator/ProgressIndicator");
 const Toastify_1 = require("../components/Toastify");
 const PopupRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/PopupRedux"));
-const AdaptableLoadingScreen_1 = require("./Components/Popups/AdaptableLoadingScreen");
 const AdaptablePopup_1 = require("./Components/Popups/AdaptablePopup");
 const AdaptablePopupConfirmation_1 = require("./Components/Popups/AdaptablePopupConfirmation");
 const AdaptablePopupPrompt_1 = require("./Components/Popups/AdaptablePopupPrompt");
@@ -27,7 +26,6 @@ class AdaptableView extends React.Component {
             React.createElement(GridCellPopup_1.GridCellPopup, null),
             React.createElement(FloatingQuickSearch_1.QuickSearchDrawer, null),
             this.props.AdaptableApi.internalApi.getModuleService().isModuleAvailable('Dashboard') && (React.createElement(Dashboard_1.Dashboard, { api: this.props.AdaptableApi })),
-            this.props.AdaptableApi.optionsApi.getUserInterfaceOptions().showLoadingScreen && (React.createElement(AdaptableLoadingScreen_1.AdaptableLoadingScreen, { onClose: this.props.onCloseLoadingPopup, showLoadingScreen: this.props.PopupState.LoadingPopup.ShowLoadingPopup })),
             this.props.PopupState.PromptPopup.ShowPromptPopup && (React.createElement(AdaptablePopupPrompt_1.AdaptablePopupPrompt, { message: this.props.PopupState.PromptPopup.Message, header: this.props.PopupState.PromptPopup.Header, onClose: this.props.onClosePromptPopup, onConfirm: this.props.onConfirmPromptPopup, onConfirmActionCreator: this.props.PopupState.PromptPopup.ConfirmActionCreator, defaultValue: this.props.PopupState.PromptPopup.DefaultValue })),
             Boolean(this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup) && (React.createElement(AdaptablePopupConfirmation_1.AdaptablePopupConfirmation, { header: this.props.PopupState.ConfirmationPopup.Header, messsage: this.props.PopupState.ConfirmationPopup.Msg, showPopup: this.props.PopupState.ConfirmationPopup.ShowConfirmationPopup, cancelButtonText: this.props.PopupState.ConfirmationPopup.CancelButtonText, confirmButtonText: this.props.PopupState.ConfirmationPopup.ConfirmButtonText, onCancel: this.props.onCancelConfirmationPopup, onConfirm: this.props.onConfirmConfirmationPopup, showInputBox: this.props.PopupState.ConfirmationPopup.ShowInputBox, messageType: this.props.PopupState.ConfirmationPopup.MessageType, api: this.props.AdaptableApi })),
             Boolean(this.props.PopupState.ScreenPopup.ShowScreenPopup) && (React.createElement(AdaptablePopup_1.AdaptablePopup, { componentName: this.props.PopupState.ScreenPopup.ComponentName, componentModule: this.props.PopupState.ScreenPopup.ComponentModule, onHide: this.props.onCloseScreenPopup, api: this.props.AdaptableApi, onClearParams: () => this.props.onClearPopupParams(), moduleParams: this.props.PopupState.ScreenPopup.Params, moduleProps: this.props.PopupState.ScreenPopup.PopupProps })),
@@ -37,7 +35,7 @@ class AdaptableView extends React.Component {
             , { 
                 // we NEEEEED!!!! this containerId, otherwise, toastify will have memory leaks when the adaptable
                 // instance is destroyed and re-created many times
-                containerId: adaptableOptions.adaptableId, limit: adaptableOptions.notificationsOptions.maxNotifications, closeButton: false, icon: false, theme: "colored" }),
+                containerId: `Toastify-${adaptableOptions.adaptableId}`, limit: adaptableOptions.notificationsOptions.maxNotifications, closeButton: false, icon: false, theme: "colored" }),
             (watermark === null || watermark === void 0 ? void 0 : watermark.show) && React.createElement(License_1.LicenseWatermark, null, watermark === null || watermark === void 0 ? void 0 : watermark.text),
             React.createElement(WindowPopups_1.WindowPopups, null),
             React.createElement(FormPopups_1.FormPopups, null),

package/src/View/AdaptableViewFactory.js

@@ -33,7 +33,7 @@ const StatusBarPopup_1 = require("./StatusBar/StatusBarPopup");
 const ChartingViewPanel_1 = require("./Charting/ChartingViewPanel");
 const GridFilterPopup_1 = require("./GridFilter/GridFilterPopup");
 const ColumnInfoPopup_1 = require("./ColumnInfo/ColumnInfoPopup");
-const NotesPopup_1 = require("./Notes/NotesPopup");
+const NotePopup_1 = require("./Note/NotePopup");
 const CommentsPopup_1 = require("./Comments/CommentsPopup");
 const DataImportPopup_1 = require("./DataImport/DataImportPopup");
 exports.AdaptableViewFactory = {
@@ -50,7 +50,7 @@ exports.AdaptableViewFactory = {
     ToolPanelPopup: ToolPanelPopup_1.ToolPanelPopup,
     SystemStatusPopup: SystemStatusPopup_1.SystemStatusPopup,
     DataChangeHistoryPopup: DataChangeHistoryPopup_1.DataChangeHistoryPopup,
-    NotesPopup: NotesPopup_1.NotesPopup,
+    NotePopup: NotePopup_1.NotePopup,
     CommentsPopup: CommentsPopup_1.CommentsPopup,
     DataImportPopup: DataImportPopup_1.DataImportPopup,
     GridFilterPopup: GridFilterPopup_1.GridFilterPopup,

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

@@ -11,7 +11,7 @@ const GridOptionsForm_1 = tslib_1.__importDefault(require("./GridOptionsForm"));
 const EntitlementsForm_1 = tslib_1.__importDefault(require("./EntitlementsForm"));
 const UiOptionsForm_1 = require("./UIOptions/UiOptionsForm");
 const AdaptableOptionsForm_1 = require("./AdaptableOptionsForm");
-const AdaptableHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/AdaptableHelper"));
+const defaultAdaptableOptions_1 = require("../../../agGrid/defaultAdaptableOptions");
 const ConfigurationWizard = (props) => {
     const [isPrimaryKeySelected, setIsValid] = React.useState(true);
     const [adaptableConfig, setAdaptableConfig] = (0, react_1.useState)(() => {
@@ -21,7 +21,7 @@ const ConfigurationWizard = (props) => {
             },
         };
         const gridOptions = Object.assign(Object.assign({}, gridOptionDefaults), props.adaptableConfig.gridOptions);
-        const adaptableOptions = AdaptableHelper_1.default.assignAdaptableOptions(props.adaptableConfig.adaptableOptions);
+        const adaptableOptions = (0, defaultAdaptableOptions_1.applyDefaultAdaptableOptions)(props.adaptableConfig.adaptableOptions);
         return { gridOptions, adaptableOptions };
     });
     const [selectedColumns, setSelectedColumns] = (0, react_1.useState)(() => {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.js

@@ -87,7 +87,7 @@ const UIOptionsStatusbarForm = (props) => {
                 React.createElement(rebass_1.Box, { as: "b" }, "Create Adaptable Statusbar Panel"),
                 React.createElement(FormLayout_1.default, { mt: 2 },
                     React.createElement(FormLayout_1.FormRow, { label: "Panel Name" },
-                        React.createElement(Input_1.default, { value: adaptablePanelTitle, placehoder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) })),
+                        React.createElement(Input_1.default, { value: adaptablePanelTitle, placeholder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) })),
                     React.createElement(FormLayout_1.FormRow, { label: "Align" },
                         React.createElement(DropdownButton_1.default, { columns: ['label'], items: alignOptions }, (_d = alignOptions.find((option) => option.value === adaptablePanelAlign)) === null || _d === void 0 ? void 0 : _d.label)),
                     React.createElement(FormLayout_1.FormRow, { label: "" },

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -55,7 +55,7 @@ class BulkUpdatePopupComponent extends React.Component {
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                             this.onApplyClick();
                         }, variant: "raised", tone: "accent" }, "Apply to Grid")))) : (React.createElement(React.Fragment, null,
-                React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, "Select an existing column value from the dropdown, or enter a new value"),
+                React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, "Select an existing Column value from the dropdown, or enter a new value"),
                 React.createElement(rebass_1.Flex, { marginTop: 2, flexDirection: "row", alignItems: "center" },
                     React.createElement(rebass_1.Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 },
                         React.createElement(ColumnValueSelector_1.ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns), style: { width: '100%', maxWidth: 'inherit' } })),

package/src/View/CalculatedColumn/Wizard/CalculatedColumnWizard.js

@@ -37,10 +37,10 @@ const CalculatedColumnWizard = (props) => {
         if ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column) {
             const calculatedColumn = allCalculatedColumns.find((calculatedColumn) => calculatedColumn.ColumnId === props.popupParams.column.columnId);
             if (calculatedColumn) {
-                return calculatedColumn;
+                return (0, Helper_1.cloneObject)(calculatedColumn);
             }
         }
-        return ObjectFactory_1.default.CreateEmptyCalculatedColumn();
+        return ObjectFactory_1.default.CreateEmptyCalculatedColumn(adaptable.api.gridApi.internalApi.deriveSpecialColumnSettingsFromAgGridDefaultColDef());
     });
     const dispatch = (0, react_redux_1.useDispatch)();
     const isEdit = Boolean(props.data) || ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Edit';
@@ -55,7 +55,7 @@ const CalculatedColumnWizard = (props) => {
     };
     const [expressionType, setExpressionType] = (0, react_1.useState)(() => {
         var _a;
-        return (_a = (0, utils_1.getExpressionType)(props.data, adaptable.api)) !== null && _a !== void 0 ? _a : 'ScalarExpression';
+        return (_a = (0, utils_1.getExpressionType)(calculatedColumn, adaptable.api)) !== null && _a !== void 0 ? _a : 'ScalarExpression';
     });
     const handleExpressionTypeChange = (type) => {
         setExpressionType(type);

package/src/View/CalculatedColumn/utils.d.ts

@@ -1,2 +1,2 @@
 import { AdaptableApi, CalculatedColumn } from '../../types';
-export declare const getExpressionType: (calculatedColumn: CalculatedColumn, api: AdaptableApi) => "ScalarExpression" | "AggregatedScalarExpression" | "CumulativeAggregatedExpression" | "QuantileAggregatedExpression";
+export declare const getExpressionType: (calculatedColumn: CalculatedColumn, api: AdaptableApi) => "AggregatedScalarExpression" | "ScalarExpression" | "CumulativeAggregatedExpression" | "QuantileAggregatedExpression";

package/src/View/CellSummary/CellSummaryPopup.js

@@ -15,7 +15,7 @@ class CellSummaryPopupComponent extends React.Component {
             // afterwards, we will go on with the cell summary logic, as that will evaluate the current(column) cell selection
             this.props.api.columnApi.selectColumn((_c = this.props.popupParams) === null || _c === void 0 ? void 0 : _c.column.columnId);
             // we also need to update the internal state of the selected cells
-            this.props.api.internalApi.getAdaptableInstance().setSelectedCells();
+            this.props.api.internalApi.getAdaptableInstance().refreshSelectedCellsState();
         }
         this.props.onCreateCellSummary();
     }

package/src/View/Comments/CommentsEditor.js

@@ -28,6 +28,7 @@ const CommentsEditor = (props) => {
         return adaptable.api.optionsApi.getUserName();
     }, []);
     const commentThread = (0, react_redux_1.useSelector)((state) => CommentsRedux.GetCellCommentSelector(state.Comment, cellAddress));
+    const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
     const [activeEditingComment, setActiveEditingComment] = React.useState(() => {
         /**
          * When opening the popup and there is only one comment, we want to open it in edit mode.
@@ -39,12 +40,23 @@ const CommentsEditor = (props) => {
         return null;
     });
     const [newCommentText, setNewCommentText] = React.useState('');
+    const commentsWrapperRef = React.useRef(null);
+    const comments = commentThread === null || commentThread === void 0 ? void 0 : commentThread.Comments;
+    const scrollToBottom = () => {
+        var _a, _b;
+        (_a = commentsWrapperRef === null || commentsWrapperRef === void 0 ? void 0 : commentsWrapperRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, (_b = commentsWrapperRef === null || commentsWrapperRef === void 0 ? void 0 : commentsWrapperRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight);
+    };
+    React.useEffect(() => {
+        scrollToBottom();
+    }, []);
     if (!commentThread) {
         return null;
     }
-    const comments = commentThread.Comments;
-    return (React.createElement(Panel_1.default, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), minWidth: 250 },
-        comments &&
+    return (React.createElement(Panel_1.default, { color: "var(--ab-color-text-on-primary)", onClick: () => props.enableEditMode(), minWidth: 250, className: "ab-CommentPopup" },
+        React.createElement(rebass_1.Flex, { style: {
+                overflow: 'auto',
+                maxHeight: 300,
+            }, flexDirection: "column", ref: commentsWrapperRef }, comments &&
             comments.length > 0 &&
             comments.map((comment, index) => {
                 var _a, _b, _c, _d;
@@ -62,22 +74,22 @@ const CommentsEditor = (props) => {
                             React.createElement(rebass_1.Box, { fontSize: 3, fontWeight: "bold" }, (_d = comment === null || comment === void 0 ? void 0 : comment.Author) === null || _d === void 0 ? void 0 : _d.UserName),
                             comment.Timestamp && (React.createElement(rebass_1.Box, { fontSize: 2 }, (0, dateUtils_1.formatDate)(comment.Timestamp, 'MM.DD.YYYY HH:mm')))),
                         React.createElement(rebass_1.Box, { flex: 1 }),
-                        React.createElement(SimpleButton_1.default, { variant: "text", icon: "edit", disabled: !isOwnComment, onClick: () => setActiveEditingComment(comment.Uuid) }),
-                        React.createElement(SimpleButton_1.default, { variant: "text", icon: "delete", disabled: !isOwnComment, onClick: () => {
+                        React.createElement(SimpleButton_1.default, { variant: "text", icon: "edit", disabled: !isOwnComment || isReadOnlyModule, onClick: () => setActiveEditingComment(comment.Uuid) }),
+                        React.createElement(SimpleButton_1.default, { variant: "text", icon: "delete", disabled: !isOwnComment || isReadOnlyModule, onClick: () => {
                                 adaptable.api.commentApi.deleteComment(comment, cellAddress);
                                 requestAnimationFrame(() => {
                                     props.onRefreshContent();
                                 });
                             } })),
-                    React.createElement(rebass_1.Box, { onClick: () => setActiveEditingComment(comment.Uuid) }, comment.Uuid === activeEditingComment ? (React.createElement(AdaptableInput_1.default, { autoFocus: true, width: "100%", defaultValue: comment.Value, onBlur: () => {
+                    React.createElement(rebass_1.Box, { onClick: () => setActiveEditingComment(comment.Uuid) }, comment.Uuid === activeEditingComment ? (React.createElement(AdaptableInput_1.default, { autoFocus: true, width: "100%", defaultValue: comment.Value, disabled: isReadOnlyModule, onBlur: () => {
                             if (comment.Uuid === activeEditingComment) {
                                 setActiveEditingComment(null);
                             }
                         }, onChange: (event) => {
                             adaptable.api.commentApi.editComment(Object.assign(Object.assign({}, comment), { Value: event.target.value }), cellAddress);
                         } })) : (React.createElement(rebass_1.Text, null, comment.Value)))));
-            }),
-        React.createElement(AdaptableInput_1.default, { autoFocus: !comments || comments.length === 0, value: newCommentText, onChange: (event) => {
+            })),
+        React.createElement(AdaptableInput_1.default, { autoFocus: !comments || comments.length === 0, value: newCommentText, disabled: isReadOnlyModule, onChange: (event) => {
                 setNewCommentText(event.target.value);
             }, onKeyDown: (event) => {
                 if (event.key === 'Enter') {
@@ -85,16 +97,17 @@ const CommentsEditor = (props) => {
                     setNewCommentText('');
                     requestAnimationFrame(() => {
                         props.onRefreshContent();
+                        scrollToBottom();
                     });
                 }
-            }, mt: 2, mb: "2", width: "100%", placeholder: "Write new comment" }),
+            }, mt: 2, mb: "2", width: "100%", placeholder: "Write new Comment" }),
         React.createElement(SimpleButton_1.default, { width: "100%", variant: "raised", onClick: () => {
-                adaptable.api.settingsPanelApi.openSettingsPanel('Comments');
+                adaptable.api.settingsPanelApi.openSettingsPanel('Comment');
                 adaptable.api.internalApi.getCellPopupService().hidePopup();
             } },
             React.createElement(rebass_1.Box, { mr: 2 },
                 React.createElement(icons_1.Icon, { name: "folder" })),
             ' ',
-            "Open all comments")));
+            "Open all Comments")));
 };
 exports.CommentsEditor = CommentsEditor;

package/src/View/Comments/CommentsPopup.js

@@ -19,6 +19,7 @@ const tableDOMProps = {
 };
 const CellComments = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
     const columnsMap = React.useMemo(() => {
         const columns = {
             author: {
@@ -33,8 +34,8 @@ const CellComments = (props) => {
                     return (0, dateUtils_1.formatDate)(params.data.Timestamp, 'MM.DD.YYYY HH:mm');
                 },
             },
-            message: {
-                header: 'Message',
+            text: {
+                header: 'Text',
                 field: 'Value',
                 defaultFlex: 3,
             },
@@ -42,17 +43,25 @@ const CellComments = (props) => {
         return columns;
     }, []);
     const cellValue = adaptable.api.gridApi.getCellDisplayValue(props.commentThread.PrimaryKeyValue, props.commentThread.ColumnId);
+    const primaryKeyHeader = React.useMemo(() => {
+        const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
+        return adaptable.api.columnApi.getFriendlyNameForColumnId(primaryKey);
+    }, []);
     const columnFriendlyName = adaptable.api.columnApi.getFriendlyNameForColumnId(props.commentThread.ColumnId);
     return (React.createElement(Panel_1.default, { mb: 2, header: React.createElement(rebass_1.Flex, { width: "100%", alignItems: "center" },
             React.createElement(rebass_1.Box, { mr: 2 },
-                "Cell Value: ",
+                React.createElement("b", null, "Cell Value:"),
+                " ",
                 cellValue),
             React.createElement(rebass_1.Box, { mr: 2 },
-                "Primary Key: [",
-                props.commentThread.PrimaryKeyValue,
-                "]"),
+                React.createElement("b", null,
+                    primaryKeyHeader,
+                    ":"),
+                " ",
+                props.commentThread.PrimaryKeyValue),
             React.createElement(rebass_1.Box, null,
-                "Column: ",
+                React.createElement("b", null, "Column:"),
+                " ",
                 columnFriendlyName),
             React.createElement(rebass_1.Box, { flex: 1 }),
             React.createElement(AdaptableButton_1.AdaptableButtonComponent, { mr: 1, variant: "text", icon: "visibility-on", onClick: () => {
@@ -61,7 +70,7 @@ const CellComments = (props) => {
                         PrimaryKeyValue: props.commentThread.PrimaryKeyValue,
                     }, true);
                 } }),
-            React.createElement(AdaptableButton_1.AdaptableButtonComponent, { icon: "delete", variant: "text", onClick: () => {
+            React.createElement(AdaptableButton_1.AdaptableButtonComponent, { icon: "delete", disabled: isReadOnlyModule, variant: "text", onClick: () => {
                     adaptable.api.commentApi.deleteCommentThread(props.commentThread);
                 } })) },
         React.createElement(InfiniteTable_1.DataSource, { data: props.commentThread.Comments, primaryKey: "Uuid" },
@@ -76,12 +85,12 @@ const CellComments = (props) => {
                 }, rowHeight: 30, columnHeaderHeight: 30, domProps: tableDOMProps, columns: columnsMap }))));
 };
 const CommentsPopup = (props) => {
-    const cellComments = (0, react_redux_1.useSelector)((state) => {
+    const commentThreads = (0, react_redux_1.useSelector)((state) => {
         return state.Comment.CommentThreads;
     });
-    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (cellComments !== null && cellComments !== void 0 ? cellComments : []).map((cellComments, index) => {
+    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Comments', glyphicon: 'comments', infoLink: props.moduleInfo.HelpPage }, (commentThreads !== null && commentThreads !== void 0 ? commentThreads : []).map((commentThread, index) => {
         var _a;
-        return React.createElement(CellComments, { key: (_a = cellComments === null || cellComments === void 0 ? void 0 : cellComments.Uuid) !== null && _a !== void 0 ? _a : index, commentThread: cellComments });
+        return React.createElement(CellComments, { key: (_a = commentThread === null || commentThread === void 0 ? void 0 : commentThread.Uuid) !== null && _a !== void 0 ? _a : index, commentThread: commentThread });
     })));
 };
 exports.CommentsPopup = CommentsPopup;

package/src/View/Components/AdaptableDateInput/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { AdaptableInputProps } from '../AdaptableInput';
 export type AdaptableDateInputProps = AdaptableInputProps;
-declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").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" | "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" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
+declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").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 AdaptableDateInput;

package/src/View/Components/AdaptableInput/AdaptableDateInlineInput.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare const AdaptableDateInlineInput: React.ForwardRefExoticComponent<Pick<Omit<import("../../../components/Input").InputProps, "onChange" | "value"> & {
+    onChange: (value: string) => void;
+    value: string;
+}, "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>>;

package/src/View/Components/AdaptableInput/AdaptableDateInlineInput.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptableDateInlineInput = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const date_fns_1 = require("date-fns");
+const react_1 = require("react");
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const AdaptableContext_1 = require("../../AdaptableContext");
+exports.AdaptableDateInlineInput = React.forwardRef((props, ref) => {
+    var _a;
+    const [hasFocus, setHasFocus] = (0, react_1.useState)(false);
+    const dateInputOptions = (0, AdaptableContext_1.useAdaptable)().adaptableOptions.userInterfaceOptions.dateInputOptions;
+    const dateProps = {
+        format: dateInputOptions.dateFormat,
+        locale: dateInputOptions.locale,
+    };
+    const [inputValue, setInputValue] = (0, react_1.useState)(() => {
+        return props.value;
+    });
+    React.useEffect(() => {
+        if (hasFocus) {
+            return;
+        }
+        setInputValue(props.value);
+    }, [props.value]);
+    const handleInputChange = (e) => {
+        setInputValue(e.currentTarget.value);
+        const date = (0, date_fns_1.parse)(e.currentTarget.value, dateProps.format, new Date());
+        if ((0, date_fns_1.isValid)(date)) {
+            props.onChange(e.currentTarget.value);
+        }
+        else {
+            props.onChange(undefined);
+        }
+    };
+    return (React.createElement(Input_1.default, Object.assign({}, props, { onFocus: (event) => {
+            var _a;
+            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            setHasFocus(true);
+        }, onBlur: (event) => {
+            var _a;
+            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            setHasFocus(false);
+        }, ref: ref, value: inputValue, onChange: (e) => handleInputChange(e), placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : dateProps.format, style: props.style, disabled: props.disabled })));
+});

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -43,7 +43,7 @@ const AdaptableObjectListItemView = (props) => {
             var _a;
             let labelEl = tag.label;
             if (typeof tag.label === 'function') {
-                labelEl = React.createElement(tag.label, { data: props.abObject });
+                labelEl = React.createElement(tag.label, { key: index, data: props.abObject });
             }
             labelEl = labelEl !== null && labelEl !== void 0 ? labelEl : tag.name;
             return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: `${index}-${tag.name}`, mb: 2, className: `${baseClassName}__row` },
@@ -135,6 +135,9 @@ const AdaptableObjectListItem = (props) => {
 exports.AdaptableObjectListItem = AdaptableObjectListItem;
 const AdaptableObjectList = (props) => {
     var _a;
-    return (React.createElement("ul", { className: LIST_BASE_CLASS_NAME }, (_a = props === null || props === void 0 ? void 0 : props.items) === null || _a === void 0 ? void 0 : _a.map((item) => (React.createElement(exports.AdaptableObjectListItem, Object.assign({ key: item.abObject.Uuid, data: item, module: props.module }, props.itemProps))))));
+    return (React.createElement("ul", { className: LIST_BASE_CLASS_NAME }, (_a = props === null || props === void 0 ? void 0 : props.items) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
+        var _a;
+        return (React.createElement(exports.AdaptableObjectListItem, Object.assign({ key: (_a = item.abObject.Uuid) !== null && _a !== void 0 ? _a : index, data: item, module: props.module }, props.itemProps)));
+    })));
 };
 exports.AdaptableObjectList = AdaptableObjectList;

package/src/View/Components/CellPopup/index.d.ts

@@ -3,6 +3,7 @@ export interface CellPopupProps {
     isOpen: boolean;
     columnId: string;
     primaryKeyValue: number | string;
+    className?: string;
 }
 export type CellPopupHandle = {
     refreshContent: () => void;

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

@@ -8,7 +8,7 @@ const utils_1 = require("../../../components/OverlayTrigger/utils");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const UIHelper_1 = require("../../UIHelper");
 let portalElement;
-const ensurePortalElement = () => {
+const ensurePortalElement = (className) => {
     if (!(0, UIHelper_1.isBrowserDocumentAvailable)()) {
         return;
     }
@@ -20,10 +20,13 @@ const ensurePortalElement = () => {
     portalElement.style.zIndex = '999';
     portalElement.style.top = '0px';
     portalElement.style.left = '0px';
+    if (className) {
+        portalElement.className = className;
+    }
     document.body.appendChild(portalElement);
 };
 exports.CellPopup = React.forwardRef((props, ref) => {
-    ensurePortalElement();
+    ensurePortalElement(props.className);
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const { showOverlay, clearAll: clearAllOverlays, hideOverlay, portal, } = (0, InfiniteTable_1.useOverlay)({
         portalContainer: portalElement,