@adaptabletools/adaptable-cjs 17.0.0-canary.4 → 18.0.0-canary.1

package/src/Utilities/Services/Interface/IThemeService.d.ts

@@ -1,3 +1,11 @@
+import { AdaptableTheme } from '../../../types';
 import { IAdaptableService } from './IAdaptableService';
 export interface IThemeService extends IAdaptableService {
+    getDOMPrefferedColorScheme(): 'dark' | 'light';
+    /**
+     * Maps the theme to the correct theme object or string
+     * This is used to apply the correct theme when the theme is OS
+     * @param theme
+     */
+    mapOsTheme(theme: AdaptableTheme | string): AdaptableTheme | string;
 }

package/src/Utilities/Services/ModuleService.js

@@ -106,7 +106,7 @@ class ModuleService {
             case 'ColumnFilter':
                 return learnUrl + 'handbook-column-filter';
             case 'GridFilter':
-                return learnUrl + 'handbook-column-filter';
+                return learnUrl + 'handbook-grid-filter';
             case 'FlashingCell':
                 return learnUrl + 'handbook-flashing-cell';
             case 'FormatColumn':
@@ -141,8 +141,6 @@ class ModuleService {
                 return learnUrl + 'handbook-theming';
             case 'ToolPanel':
                 return learnUrl + 'ui-tool-panel';
-            case 'Glue42':
-                return learnUrl + 'integrations-glue42';
             case 'IPushPull':
                 return learnUrl + 'integrations-ipushpull';
             case 'OpenFin':

package/src/Utilities/Services/ReportService.d.ts

@@ -29,7 +29,7 @@ export declare class ReportService implements IReportService {
     getReportDataAsArray(report: Report, includePrimaryKey?: boolean): any[][];
     convertReportDataToArray(reportData: ReportData): any[][];
     getRowObjectForColumnIds(rowNode: IRowNode, columnIds: string[]): Record<string, any>;
-    PublishLiveLiveDataChangedEvent(reportDestination: 'ipushpull' | 'Glue42', liveDataTrigger: 'Connected' | 'Disconnected' | 'LiveDataStarted' | 'LiveDataStopped' | 'LiveDataUpdated', liveReport?: any): void;
+    PublishLiveLiveDataChangedEvent(reportDestination: 'ipushpull', liveDataTrigger: 'Connected' | 'Disconnected' | 'LiveDataStarted' | 'LiveDataStopped' | 'LiveDataUpdated', liveReport?: any): void;
     getCellExportValueFromRowNode(rowNode: IRowNode, columnId: string): any;
     getCellExportValueFromRawValue(rowNode: IRowNode, cellRawValue: any, columnId: string): any;
     getReportFileName(reportName: string, destination: SystemExportDestination | CustomDestination): string;

package/src/Utilities/Services/ThemeService.d.ts

@@ -10,4 +10,7 @@ export declare class ThemeService implements IThemeService {
     applyNewThemeVariables(theme: AdaptableTheme): void;
     destroy(): void;
     showMissingThemeFiles(theme: AdaptableTheme): void;
+    getDOMPrefferedColorScheme(): 'dark' | 'light';
+    mapOsTheme(theme: AdaptableTheme | string): AdaptableTheme;
+    attachPrefferedColorSchemeListener(): () => void;
 }

package/src/Utilities/Services/ThemeService.js

@@ -6,7 +6,8 @@ class ThemeService {
         var _a;
         this.unsubscribe = () => { };
         this.onThemeChanged = () => {
-            const currentTheme = this.api.themeApi.getCurrentThemeObject();
+            let currentTheme = this.api.themeApi.getCurrentThemeObject();
+            currentTheme = this.mapOsTheme(currentTheme);
             this.applyNewThemeVariables(currentTheme);
             // this needs to be called after variables are set
             // as it may show the warning for a custom/runtime theme
@@ -26,9 +27,11 @@ class ThemeService {
     subscribe() {
         const themeChangedUnsubscribe = this.api.eventApi.on('ThemeChanged', this.onThemeChanged);
         const themeEditedUnsubscribe = this.api.eventApi.on('ThemeEdited', this.onThemeChanged);
+        const prefferedColorSchemeUnsubscribe = this.attachPrefferedColorSchemeListener();
         this.unsubscribe = () => {
             themeChangedUnsubscribe();
             themeEditedUnsubscribe();
+            prefferedColorSchemeUnsubscribe();
         };
     }
     applyNewThemeVariables(theme) {
@@ -82,5 +85,34 @@ If it's a default theme, try
 import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         }
     }
+    // prefers-color-scheme
+    getDOMPrefferedColorScheme() {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    mapOsTheme(theme) {
+        theme = typeof theme === 'string' ? this.api.themeApi.getThemeByName(theme) : theme;
+        if ((typeof theme === 'string' && theme === 'os') ||
+            (typeof theme === 'object' && theme.Name === 'os')) {
+            return this.api.themeApi.getThemeByName(this.getDOMPrefferedColorScheme());
+        }
+        return theme;
+    }
+    attachPrefferedColorSchemeListener() {
+        const handlePrefferedColorSchemeChange = () => {
+            // we need to reapply the theme
+            const currentTheme = this.api.themeApi.getCurrentThemeObject();
+            if (currentTheme.Name === 'os') {
+                this.api.themeApi.applyCurrentTheme();
+            }
+        };
+        window
+            .matchMedia('(prefers-color-scheme: dark)')
+            .addEventListener('change', handlePrefferedColorSchemeChange);
+        return () => {
+            window
+                .matchMedia('(prefers-color-scheme: dark)')
+                .removeEventListener('change', handlePrefferedColorSchemeChange);
+        };
+    }
 }
 exports.ThemeService = ThemeService;

package/src/Utilities/Services/ValidationService.js

@@ -99,29 +99,29 @@ class ValidationService {
                 .validateOnServer(serverValidationContext)
                 .then((validationResult) => {
                 var _a, _b;
-                if (validationResult.NewValue === undefined) {
-                    validationResult.NewValue = cellDataChangedInfo.newValue;
+                if (validationResult.newCellValue === undefined) {
+                    validationResult.newCellValue = cellDataChangedInfo.newValue;
                 }
                 // If they have changed the return value then we should update the grid, log the function change
                 // otherwise the value will persist
-                if (validationResult.NewValue !== cellDataChangedInfo.newValue) {
-                    cellDataChangedInfo.newValue = validationResult.NewValue;
+                if (validationResult.newCellValue !== cellDataChangedInfo.newValue) {
+                    cellDataChangedInfo.newValue = validationResult.newCellValue;
                     // this.adaptable.setValue(cellDataChangedInfo, false);
                     const row = (_a = cellDataChangedInfo.rowNode) === null || _a === void 0 ? void 0 : _a.data;
                     if (!row) {
                         return;
                     }
-                    row[(_b = this.adaptableApi.columnApi.internalApi.getAgGridColumnFieldForAdaptableColumn(cellDataChangedInfo.column.columnId)) !== null && _b !== void 0 ? _b : cellDataChangedInfo.column.columnId] = validationResult.NewValue;
+                    row[(_b = this.adaptableApi.columnApi.internalApi.getAgGridColumnFieldForAdaptableColumn(cellDataChangedInfo.column.columnId)) !== null && _b !== void 0 ? _b : cellDataChangedInfo.column.columnId] = validationResult.newCellValue;
                     this.adaptableApi.gridApi.updateGridData([row]);
-                    if (StringExtensions_1.default.IsNotNullOrEmpty(validationResult.ValidationMessage) &&
+                    if (StringExtensions_1.default.IsNotNullOrEmpty(validationResult.validationMessage) &&
                         this.adaptableApi.optionsApi.getEditOptions().displayServerValidationMessages) {
-                        const validationHeader = validationResult.ValidationHeader
-                            ? validationResult.ValidationHeader
+                        const validationHeader = validationResult.validationHeader
+                            ? validationResult.validationHeader
                             : GeneralConstants_1.SERVER_VALIDATION_HEADER;
-                        const messageType = validationResult.MessageType
-                            ? validationResult.MessageType
+                        const messageType = validationResult.messageType
+                            ? validationResult.messageType
                             : GeneralConstants_1.SERVER_VALIDATION_MESSAGE_TYPE;
-                        this.adaptableApi.alertApi.showAlert(validationHeader, validationResult.ValidationMessage, messageType);
+                        this.adaptableApi.alertApi.showAlert(validationHeader, validationResult.validationMessage, messageType);
                     }
                 }
                 config.onServerValidationCompleted();

package/src/View/AdaptableView.js

@@ -12,10 +12,10 @@ const AdaptablePopup_1 = require("./Components/Popups/AdaptablePopup");
 const AdaptablePopupConfirmation_1 = require("./Components/Popups/AdaptablePopupConfirmation");
 const AdaptablePopupPrompt_1 = require("./Components/Popups/AdaptablePopupPrompt");
 const FormPopups_1 = require("./Components/Popups/FormPopups/FormPopups");
+const GridCellPopup_1 = require("./Components/Popups/GridCellPopup");
 const WindowPopups_1 = require("./Components/Popups/WindowPopups/WindowPopups");
 const Dashboard_1 = require("./Dashboard/Dashboard");
 const License_1 = require("./License");
-const NotesPopup_1 = require("./Notes/NotesPopup");
 const FloatingQuickSearch_1 = require("./QuickSearch/FloatingQuickSearch/FloatingQuickSearch");
 const renderWithAdaptableContext_1 = require("./renderWithAdaptableContext");
 class AdaptableView extends React.Component {
@@ -24,7 +24,7 @@ class AdaptableView extends React.Component {
         const watermark = (_d = (_c = (_b = (_a = this.props.AdaptableApi) === null || _a === void 0 ? void 0 : _a.internalApi) === null || _b === void 0 ? void 0 : _b.getSystemState()) === null || _c === void 0 ? void 0 : _c.License) === null || _d === void 0 ? void 0 : _d.watermark;
         const adaptableOptions = this.props.AdaptableApi.optionsApi.getAdaptableOptions();
         return (React.createElement("div", null,
-            React.createElement(NotesPopup_1.NotePopup, null),
+            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 })),
@@ -37,7 +37,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, enableMultiContainer: true, limit: adaptableOptions.notificationsOptions.maxNotifications, closeButton: false, icon: false, theme: "colored" }),
+                containerId: 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,8 @@ 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 NotesListing_1 = require("./Notes/NotesListing");
+const NotesPopup_1 = require("./Notes/NotesPopup");
+const CommentsPopup_1 = require("./Comments/CommentsPopup");
 const DataImportPopup_1 = require("./DataImport/DataImportPopup");
 exports.AdaptableViewFactory = {
     BulkUpdatePopup: BulkUpdatePopup_1.BulkUpdatePopup,
@@ -49,7 +50,8 @@ exports.AdaptableViewFactory = {
     ToolPanelPopup: ToolPanelPopup_1.ToolPanelPopup,
     SystemStatusPopup: SystemStatusPopup_1.SystemStatusPopup,
     DataChangeHistoryPopup: DataChangeHistoryPopup_1.DataChangeHistoryPopup,
-    NotesPopup: NotesListing_1.NotesListing,
+    NotesPopup: NotesPopup_1.NotesPopup,
+    CommentsPopup: CommentsPopup_1.CommentsPopup,
     DataImportPopup: DataImportPopup_1.DataImportPopup,
     GridFilterPopup: GridFilterPopup_1.GridFilterPopup,
 };

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

@@ -172,7 +172,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
         pk: {
             header: () => React.createElement(HeaderCellWrapper, null, "Primary Key"),
             maxWidth: 80,
-            sortable: false,
+            defaultSortable: false,
             renderMenuIcon: false,
             render: (params) => {
                 const { data } = params;
@@ -331,7 +331,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                     default: {
                         defaultFlex: 1,
                         align: 'center',
-                        sortable: false,
+                        defaultSortable: false,
                     },
                 }, headerOptions: {
                     alwaysReserveSpaceForSortIcon: false,

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

@@ -98,7 +98,7 @@ const EntitlementsListForm = (props) => {
                     default: {
                         defaultFlex: 1,
                         align: 'center',
-                        sortable: false,
+                        defaultSortable: false,
                     },
                 }, headerOptions: {
                     alwaysReserveSpaceForSortIcon: false,

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

@@ -630,4 +630,4 @@ export const FinanceForm: React.FunctionComponent<React.PropsWithChildren<Financ
 };
 
 
-*/ 
+*/

package/src/View/Alert/Wizard/AlertButtonsEditor.js

@@ -154,7 +154,7 @@ const AlertButtonsEditor = (props) => {
                                             label: StringExtensions_1.default.CapitaliseFirstLetter(variant),
                                             value: variant,
                                         };
-                                    }), rederSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant, onChange: (value) => {
+                                    }), renderSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant, onChange: (value) => {
                                         setVariant(value);
                                     } })),
                             React.createElement(Select_1.Select, { options: [
@@ -168,7 +168,7 @@ const AlertButtonsEditor = (props) => {
                                             value: tone,
                                         };
                                     }),
-                                ], rederSingleValue: (option) => `Tone: ${option.label}`, onChange: (value) => {
+                                ], renderSingleValue: (option) => `Tone: ${option.label}`, onChange: (value) => {
                                     if (value === 'text') {
                                         setTone(null);
                                     }

package/src/View/Alert/Wizard/AlertRulesWizardSection.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
 import { AlertType } from '../Utilities/getAlertType';
-export declare const getRuleStepDescription: (alertType: AlertType) => JSX.Element | "";
+export declare const getRuleStepDescription: (alertType: AlertType) => "" | JSX.Element;
 export declare const renderAlertRulesSummary: (alertDefinition: AlertDefinition) => JSX.Element;
 export interface AlertRulesWizardSectionProps {
     onChange: (data: AlertDefinition) => void;

package/src/View/Alert/Wizard/AlertRulesWizardSection.js

@@ -20,7 +20,7 @@ const getRuleStepDescription = (alertType) => {
         case 'RowChange':
             return React.createElement(React.Fragment, null, "Specify which type of Row Change will trigger the Alert");
         case 'Validation':
-            return React.createElement(React.Fragment, null, "Create the Validation Rule which will trigger the Alert (using a Predicate or a Query)");
+            return (React.createElement(React.Fragment, null, "Create the Validation Rule which will trigger the Alert (using a Predicate or a Query)"));
         case 'Aggregation':
             return React.createElement(React.Fragment, null, "Build an Aggregation Boolean Rule to specify when the Alert should trigger");
         case 'Observable':
@@ -62,9 +62,10 @@ const AlertRulesWizardSection = (props) => {
     const showObservable = props.alertType === 'Observable';
     const showAggregation = props.alertType === 'Aggregation';
     const showBoolean = props.alertType === 'DataChange' || props.alertType == 'Validation';
-    const showPredicate = props.alertType === 'DataChange' || props.alertType == 'Validation' || props.alertType === 'RowChange';
+    const showPredicate = props.alertType === 'DataChange' ||
+        props.alertType == 'Validation' ||
+        props.alertType === 'RowChange';
     const enablePredicateColumnId = props.alertType === 'DataChange' || props.alertType == 'Validation';
-    ;
     if (props.alertType === 'RowChange') {
         return React.createElement(RowChangeEditor, { alert: data, onChange: props.onChange });
     }

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

@@ -50,7 +50,7 @@ const CalculatedColumnExpressionWizardSection = (props) => {
                 return 'quantileAggregatedScalar';
         }
     };
-    return (React.createElement(Tabs_1.Tabs, { autoFocus: false },
+    return (React.createElement(Tabs_1.Tabs, { autoFocus: false, height: "100%" },
         React.createElement(Tabs_1.Tabs.Tab, null, (0, StringExtensions_1.Humanize)(props.expressionType)),
         React.createElement(Tabs_1.Tabs.Content, null, (() => {
             switch (props.expressionType) {

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

@@ -100,7 +100,7 @@ const CalculatedColumnWizard = (props) => {
                 isValid: CalculatedColumnExpressionWizardSection_1.isValidCalculatedColumnExpression,
                 renderSummary: CalculatedColumnExpressionWizardSection_1.renderCalculatedColumnExpressionSummary,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { p: 2 },
+                    return (React.createElement(rebass_1.Box, { height: "100%", p: 2 },
                         React.createElement(CalculatedColumnExpressionWizardSection_1.CalculatedColumnExpressionWizardSection, { expressionType: expressionType, onChange: setCalculatedColumn })));
                 },
             },

package/src/View/Charting/useChartingElements.js

@@ -71,7 +71,7 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
     if ((0, ChartingState_1.isAgChartDefinition)(selectedChart)) {
         containerOptions.unshift({
             label: chartingOptions.agGridContainerName,
-            value: null,
+            value: chartingOptions.agGridContainerName,
         });
     }
     const style = {};
@@ -82,8 +82,13 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
         iconSize = 15;
     }
     const chartSelector = (React.createElement(Select_1.Select, { className: `ab-${elementType}__Chart__select`, size: size, value: selectedChartId, options: options, placeholder: 'Select Chart', disabled: !hasCharts, onChange: (chartUuid) => setSelectedChartId(chartUuid) }));
-    const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(Select_1.Select, { value: selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name, size: size, onChange: (containerName) => {
-            setSelectedContainer(chartContainers.find((containerOption) => containerOption.name === containerName));
+    const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(Select_1.Select, { value: selectedContainer === null ? chartingOptions.agGridContainerName : selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name, size: size, onChange: (containerName) => {
+            if (containerName === chartingOptions.agGridContainerName) {
+                setSelectedContainer(null);
+            }
+            else {
+                setSelectedContainer(chartContainers.find((containerOption) => containerOption.name === containerName));
+            }
         }, options: containerOptions, placeholder: "Select Container" }));
     const chartButton = (React.createElement(SimpleButton_1.default, { style: style, mr: 1, onClick: () => (isOpen ? hideChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
     const deleteButton = (React.createElement(DeleteChartButton_1.DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));

package/src/View/Comments/CommentsEditor.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface CommentsEditorProps {
+    enableEditMode(): void;
+    onRefreshContent(): void;
+}
+export declare const CommentsEditor: React.FunctionComponent<CommentsEditorProps>;
+export {};

package/src/View/Comments/CommentsEditor.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentsEditor = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const icons_1 = require("../../components/icons");
+const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const CommentsRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/CommentsRedux"));
+const SystemRedux_1 = require("../../Redux/ActionsReducers/SystemRedux");
+const dateUtils_1 = require("../../Utilities/ExpressionFunctions/dateUtils");
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
+// Edit Mode
+// [author] [edit, delete]
+// [text-editor] * this is different
+// [show-all-comments-button]
+// View Mode
+// [author] [edit, delete]
+// [text]
+// [show-all-comments-button]
+const CommentsEditor = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const cellAddress = (0, react_redux_1.useSelector)((state) => (0, SystemRedux_1.SystemCommentsAndNotesSelector)(state.System));
+    const userId = React.useMemo(() => {
+        return adaptable.api.optionsApi.getUserName();
+    }, []);
+    const commentThread = (0, react_redux_1.useSelector)((state) => CommentsRedux.GetCellCommentSelector(state.Comment, cellAddress));
+    const [activeEditingComment, setActiveEditingComment] = React.useState(() => {
+        /**
+         * When opening the popup and there is only one comment, we want to open it in edit mode.
+         * This happens usualy when a new comment is added via cell menu.
+         */
+        // if (cellComments?.Comments?.length === 1 && cellComments?.Comments[0].Value === '') {
+        //   return cellComments?.Comments[0].Uuid;
+        // }
+        return null;
+    });
+    const [newCommentText, setNewCommentText] = React.useState('');
+    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 &&
+            comments.length > 0 &&
+            comments.map((comment, index) => {
+                var _a, _b, _c, _d;
+                if (!comment) {
+                    return null;
+                }
+                const isOwnComment = ((_a = comment === null || comment === void 0 ? void 0 : comment.Author) === null || _a === void 0 ? void 0 : _a.UserName)
+                    ? ((_b = comment === null || comment === void 0 ? void 0 : comment.Author) === null || _b === void 0 ? void 0 : _b.UserName) === userId
+                    : true; // no owner means it's the current user
+                return (React.createElement(rebass_1.Box, { p: 2, key: (_c = comment.Uuid) !== null && _c !== void 0 ? _c : index, style: {
+                        borderBottom: '1px solid var(--ab-color-primarydark)',
+                    } },
+                    React.createElement(rebass_1.Flex, { mb: 2, alignItems: "center" },
+                        React.createElement(rebass_1.Box, null,
+                            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: () => {
+                                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: () => {
+                            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) => {
+                setNewCommentText(event.target.value);
+            }, onKeyDown: (event) => {
+                if (event.key === 'Enter') {
+                    adaptable.api.commentApi.addComment(newCommentText, cellAddress);
+                    setNewCommentText('');
+                    requestAnimationFrame(() => {
+                        props.onRefreshContent();
+                    });
+                }
+            }, 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.internalApi.getCellPopupService().hidePopup();
+            } },
+            React.createElement(rebass_1.Box, { mr: 2 },
+                React.createElement(icons_1.Icon, { name: "folder" })),
+            ' ',
+            "Open all comments")));
+};
+exports.CommentsEditor = CommentsEditor;

package/src/View/Comments/CommentsPopup.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const CommentsPopup: React.FunctionComponent;

package/src/View/Comments/CommentsPopup.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentsPopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const InfiniteTable_1 = require("../../components/InfiniteTable");
+const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+const rebass_1 = require("rebass");
+const dateUtils_1 = require("../../Utilities/ExpressionFunctions/dateUtils");
+const AdaptableContext_1 = require("../AdaptableContext");
+const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
+const AdaptableButton_1 = require("../Components/AdaptableButton");
+const tableDOMProps = {
+    style: {
+        minHeight: 160,
+        minWidth: '10rem',
+    },
+};
+const CellComments = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const columnsMap = React.useMemo(() => {
+        const columns = {
+            author: {
+                field: 'Author',
+                maxWidth: 100,
+                valueGetter: (params) => params.data.Author.UserName,
+            },
+            timestamp: {
+                field: 'Timestamp',
+                maxWidth: 150,
+                valueGetter: (params) => {
+                    return (0, dateUtils_1.formatDate)(params.data.Timestamp, 'MM.DD.YYYY HH:mm');
+                },
+            },
+            message: {
+                header: 'Message',
+                field: 'Value',
+                defaultFlex: 3,
+            },
+        };
+        return columns;
+    }, []);
+    const cellValue = adaptable.api.gridApi.getCellDisplayValue(props.commentThread.PrimaryKeyValue, props.commentThread.ColumnId);
+    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: ",
+                cellValue),
+            React.createElement(rebass_1.Box, { mr: 2 },
+                "Primary Key: [",
+                props.commentThread.PrimaryKeyValue,
+                "]"),
+            React.createElement(rebass_1.Box, null,
+                "Column: ",
+                columnFriendlyName),
+            React.createElement(rebass_1.Box, { flex: 1 }),
+            React.createElement(AdaptableButton_1.AdaptableButtonComponent, { mr: 1, variant: "text", icon: "visibility-on", onClick: () => {
+                    adaptable.api.internalApi.getCellPopupService().showPopup({
+                        ColumnId: props.commentThread.ColumnId,
+                        PrimaryKeyValue: props.commentThread.PrimaryKeyValue,
+                    }, true);
+                } }),
+            React.createElement(AdaptableButton_1.AdaptableButtonComponent, { icon: "delete", variant: "text", onClick: () => {
+                    adaptable.api.commentApi.deleteCommentThread(props.commentThread);
+                } })) },
+        React.createElement(InfiniteTable_1.DataSource, { data: props.commentThread.Comments, primaryKey: "Uuid" },
+            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
+                    default: {
+                        align: 'start',
+                        defaultFlex: 1,
+                        defaultSortable: false,
+                    },
+                }, headerOptions: {
+                    alwaysReserveSpaceForSortIcon: false,
+                }, rowHeight: 30, columnHeaderHeight: 30, domProps: tableDOMProps, columns: columnsMap }))));
+};
+const CommentsPopup = (props) => {
+    const cellComments = (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) => {
+        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 });
+    })));
+};
+exports.CommentsPopup = CommentsPopup;

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

@@ -126,7 +126,8 @@ const AdaptableObjectListItem = (props) => {
     const showEditButton = Boolean(EditWizard);
     const adaptableOpttions = adaptable.api.optionsApi.getAdaptableOptions();
     const disableDeleteConfirmationState = (0, react_redux_1.useSelector)((adaptableState) => SystemRedux.SystemDisableDeleteConfirmationSelector(adaptableState.System));
-    const disableDeleteConfirmation = disableDeleteConfirmationState || ((_h = adaptableOpttions === null || adaptableOpttions === void 0 ? void 0 : adaptableOpttions.userInterfaceOptions) === null || _h === void 0 ? void 0 : _h.disableDeleteConfirmation);
+    const disableDeleteConfirmation = disableDeleteConfirmationState ||
+        ((_h = adaptableOpttions === null || adaptableOpttions === void 0 ? void 0 : adaptableOpttions.userInterfaceOptions) === null || _h === void 0 ? void 0 : _h.disableDeleteConfirmation);
     return (React.createElement(React.Fragment, null,
         React.createElement(exports.AdaptableObjectListItemView, { module: props.module, disableDeleteConfirmation: disableDeleteConfirmation, abObject: props.data.abObject, accessLevel: accessLevel, actions: actions, className: itemClassName, handleOnEdit: handleOnEdit, items: props.data.items, showActions: showActions, showEditButton: showEditButton, style: props.data.style, teamSharingActivated: teamSharingActivated, onShare: (config) => adaptable.api.teamSharingApi.shareAdaptableEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config), entityType: entityType, deleteAction: deleteAction, deleteDisabled: props.deleteDisabled, deleteTooltip: props.deleteTooltip, editDisabled: isEditDisabled, suspendedEnabled: hasSuspend, onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)) }),
         isEditWizardVisible && EditWizard && (React.createElement(EditWizard, { defaultCurrentSectionName: wizardStepName, moduleInfo: props.module.moduleInfo, data: props.data.abObject, configEntities: null, onCloseWizard: handleCloseWizard, onFinishWizard: handleCloseWizard }))));

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

@@ -17,7 +17,7 @@ const ensurePortalElement = () => {
     }
     portalElement = document.createElement('div');
     portalElement.style.position = 'absolute';
-    portalElement.style.zIndex = '999999';
+    portalElement.style.zIndex = '999';
     portalElement.style.top = '0px';
     portalElement.style.left = '0px';
     document.body.appendChild(portalElement);

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

@@ -110,7 +110,8 @@ class FilterFormComponent extends React.Component {
         }
     }
     async loadPermittedValues(filter = '') {
-        const { values: distinctColumnValues, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.optionsApi.getColumnFilterOptions().valuesFilterOptions.showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+        const { values: distinctColumnValues, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.optionsApi.getColumnFilterOptions().valuesFilterOptions
+            .showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
         if (this._isMounted) {
             this.setState({
                 distinctColumnValues,
@@ -178,7 +179,12 @@ class FilterFormComponent extends React.Component {
                     } })));
         }
         return (_a = predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => (React.createElement(rebass_1.Flex, { key: index, flexDirection: "row" },
-            React.createElement(AdaptableInput_1.default, { disabled: this.isFilterDisabled(), type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), mb: 1, flex: 1, fontSize: 2 }))));
+            React.createElement(AdaptableInput_1.default, { onMouseDown: (event) => {
+                    if (predicateInput.type === 'date') {
+                        // This prevents the ag-grid dropdown closing when a date is selected
+                        event.stopPropagation();
+                    }
+                }, disabled: this.isFilterDisabled(), type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), mb: 1, flex: 1, fontSize: 2 }))));
     }
     isFilterDisabled() {
         var _a;

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

@@ -78,9 +78,7 @@ const ListBoxFilterForm = (props) => {
     const textClear = (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { autoFocus: true, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
             paddingTop: 'var(--ab-space-1)',
             paddingBottom: 'var(--ab-space-1)',
-            paddingLeft: 'var(--ab-space-1)',
-            borderRadius: 'var(--ab__border-radius)',
-        }, OnTextChange: handleFilterValueChange }));
+        }, inputStyle: { padding: 'var(--ab-space-1)' }, OnTextChange: handleFilterValueChange }));
     const baseClassName = 'ab-ListBoxFilterForm';
     return (React.createElement("div", { className: (0, join_1.default)(baseClassName, props.useAgGridStyle ? `${baseClassName}--aggrid-style` : null, props.isLoading && `${baseClassName}--loading`) },
         React.createElement(rebass_1.Box, { px: 2 },