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

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 },

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

@@ -57,7 +57,8 @@ class QuickFilterFormComponent extends React.Component {
             hideEvent = 'blur';
         }
         let showQuickFilterDropdown = true;
-        let hideQuickFilterDropdownFunction = this.props.api.optionsApi.getColumnFilterOptions().quickFilterOptions.hideQuickFilterDropdown;
+        let hideQuickFilterDropdownFunction = this.props.api.optionsApi.getColumnFilterOptions().quickFilterOptions
+            .hideQuickFilterDropdown;
         if (hideQuickFilterDropdownFunction) {
             const columnFilterContext = {
                 column: this.props.currentColumn,
@@ -79,7 +80,7 @@ class QuickFilterFormComponent extends React.Component {
             showQuickFilterInput = !hideQuickFilterInputFunction(columnFilterContext);
         }
         return (React.createElement(React.Fragment, null,
-            showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-QuickFilter", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 300, "data-name": "quick-filter-overlay", render: () => (React.createElement(rebass_1.Flex, { className: "ab-QuickFilter__dropdown", flexDirection: "column", "data-name": "quick-filter", fontSize: 2 },
+            showQuickFilterDropdown && (React.createElement(OverlayTrigger_1.default, { className: "ab-QuickFilter", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 50, "data-name": "quick-filter-overlay", render: () => (React.createElement(rebass_1.Flex, { className: "ab-QuickFilter__dropdown", flexDirection: "column", "data-name": "quick-filter", fontSize: 2 },
                     (transientColumnFilter === null || transientColumnFilter === void 0 ? void 0 : transientColumnFilter.Predicate.PredicateId) && (React.createElement(SimpleButton_1.default, { p: 2, variant: "text", onClick: () => this.clearFilter() },
                         React.createElement("span", { style: { width: 20, marginRight: 10 } },
                             React.createElement(icons_1.Icon, { name: "delete" })),
@@ -102,7 +103,7 @@ class QuickFilterFormComponent extends React.Component {
                         api.show();
                         this.shouldOpenValuesDropdown = false;
                     }
-                }, quickFilterValuesTrigger: this.props.quickFilterValuesTrigger }));
+                }, valuesFilterTrigger: this.props.valuesFilterTrigger }));
         }
         return (activePredicateDef &&
             (activePredicateDef === null || activePredicateDef === void 0 ? void 0 : activePredicateDef.inputs) === undefined && (React.createElement(rebass_1.Box, { color: this.isFilterDisabled() ? undefined : 'var(--ab-color-text-on-primary)', disabled: this.isFilterDisabled(), p: 1, alignSelf: "center" }, activePredicateDef.label)));
@@ -252,6 +253,6 @@ function mapDispatchToProps(dispatch) {
 const QuickFilterForm = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(QuickFilterFormComponent);
 const QuickFilterFormReact = (columnFilterProps) => {
     var _a, _b, _c;
-    return (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(QuickFilterForm, { api: columnFilterProps.Adaptable.api, quickFilterTrigger: (_a = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _a === void 0 ? void 0 : _a.quickFilterOptions.quickFilterTrigger, quickFilterValuesTrigger: (_b = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _b === void 0 ? void 0 : _b.quickFilterOptions.quickFilterValuesTrigger, quickFilterDebounce: (_c = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _c === void 0 ? void 0 : _c.quickFilterOptions.quickFilterDebounce, currentColumn: columnFilterProps.Column, teamSharingActivated: false, embedColumnMenu: columnFilterProps.Adaptable.embedColumnMenu }), columnFilterProps.Adaptable);
+    return (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(QuickFilterForm, { api: columnFilterProps.Adaptable.api, quickFilterTrigger: (_a = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _a === void 0 ? void 0 : _a.quickFilterOptions.quickFilterTrigger, valuesFilterTrigger: (_b = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _b === void 0 ? void 0 : _b.valuesFilterOptions.valuesFilterTrigger, quickFilterDebounce: (_c = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _c === void 0 ? void 0 : _c.quickFilterOptions.quickFilterDebounce, currentColumn: columnFilterProps.Column, teamSharingActivated: false, embedColumnMenu: columnFilterProps.Adaptable.embedColumnMenu }), columnFilterProps.Adaptable);
 };
 exports.QuickFilterFormReact = QuickFilterFormReact;

package/src/View/Components/FilterForm/QuickFilterValues.d.ts

@@ -2,7 +2,7 @@
 import { ColumnFilter } from '../../../PredefinedConfig/Common/ColumnFilter';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
-import { QuickFilterOptions } from '../../../types';
+import { ValuesFilterOptions } from '../../../types';
 export interface QuickFilterValuesProps {
     api: AdaptableApi;
     currentColumn: AdaptableColumn;
@@ -14,6 +14,6 @@ export interface QuickFilterValuesProps {
         show: () => any;
         hide: () => any;
     }) => void;
-    quickFilterValuesTrigger?: QuickFilterOptions['quickFilterValuesTrigger'];
+    valuesFilterTrigger?: ValuesFilterOptions['valuesFilterTrigger'];
 }
 export declare const QuickFilterValues: (props: QuickFilterValuesProps) => JSX.Element;

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

@@ -99,7 +99,7 @@ const QuickFilterValues = (props) => {
         }
     };
     let showEvent = 'mouseenter';
-    if (props.quickFilterValuesTrigger === 'click') {
+    if (props.valuesFilterTrigger === 'click') {
         showEvent = 'click';
     }
     let selectedValues = props.columnFilter.Predicate.PredicateId === 'Values' ? 'Select Values' : 'Exclude Values';
@@ -115,7 +115,8 @@ const QuickFilterValues = (props) => {
             return label !== null && label !== void 0 ? label : input;
         }).join(', ');
     }
-    const quickFilterValuesWidth = props.api.optionsApi.getAdaptableOptions().columnFilterOptions.quickFilterOptions.quickFilterValuesWidth;
+    const quickFilterValuesWidth = props.api.optionsApi.getAdaptableOptions().columnFilterOptions.quickFilterOptions
+        .quickFilterValuesWidth;
     const getPopoverWidth = (targetWidth) => {
         if (quickFilterValuesWidth === 'auto') {
             return Math.max(180, targetWidth);
@@ -127,7 +128,7 @@ const QuickFilterValues = (props) => {
     };
     return (React.createElement(OverlayTrigger_1.default, { showEvent: showEvent, 
         // cannot hide on blur, because the form input receives the input when this is opened
-        hideEvent: "mouseleave", hideDelay: 300, ref: (api) => {
+        hideEvent: "mouseleave", hideDelay: 50, ref: (api) => {
             valuesDropdownRef.current = api;
             props.registerValuesDropdownApi(api);
         }, onVisibleChange: (visible) => {

package/src/View/Components/Popups/GridCellPopup/GridCellPopup.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+interface NotesAndCommentsPopupProps {
+}
+export declare const GridCellPopup: React.FunctionComponent<NotesAndCommentsPopupProps>;
+export {};

package/src/View/Components/Popups/GridCellPopup/GridCellPopup.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridCellPopup = 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 NotesRedux_1 = require("../../../../Redux/ActionsReducers/NotesRedux");
+const SystemRedux_1 = require("../../../../Redux/ActionsReducers/SystemRedux");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const CommentsEditor_1 = require("../../../Comments/CommentsEditor");
+const NoteEditor_1 = require("../../../Notes/NoteEditor");
+const CellPopup_1 = require("../../CellPopup");
+const ConnectedNoteEditor = ({ enableEditMode }) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const isReadonly = api.entitlementApi.isModuleReadOnlyEntitlement('Notes');
+    const editMode = (0, react_redux_1.useSelector)((state) => (0, SystemRedux_1.SystemCommentsAndNotesEditModeSelector)(state.System));
+    const cellPopupService = api.internalApi.getCellPopupService();
+    const cellAddress = (0, react_redux_1.useSelector)((state) => (0, SystemRedux_1.SystemCommentsAndNotesSelector)(state.System));
+    const [
+    // Only handle first note for now
+    // Later we can handle multiple notes
+    note,] = (0, react_redux_1.useSelector)((state) => {
+        return cellAddress ? (0, NotesRedux_1.GetNotesSelector)(state.Notes, cellAddress) : [];
+    });
+    const handleNoteChange = React.useCallback((value) => {
+        api.notesApi.updateNoteText(value, note);
+    }, [note]);
+    return (React.createElement(rebass_1.Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotesPopup" },
+        React.createElement(NoteEditor_1.NoteEditor, { isReadonly: isReadonly, editMode: editMode, key: note === null || note === void 0 ? void 0 : note.Uuid, onClose: () => cellPopupService.hidePopup(), note: note === null || note === void 0 ? void 0 : note.Value, onNoteChange: (value) => handleNoteChange(value) })));
+};
+const GridCellPopup = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const cellPopupRef = React.useRef(null);
+    const editMode = (0, react_redux_1.useSelector)((state) => (0, SystemRedux_1.SystemCommentsAndNotesEditModeSelector)(state.System));
+    const focusedEntity = (0, react_redux_1.useSelector)((state) => (0, SystemRedux_1.SystemCommentsAndNotesFocusedEntitySelector)(state.System));
+    const cellAddress = (0, react_redux_1.useSelector)((state) => (0, SystemRedux_1.SystemCommentsAndNotesSelector)(state.System));
+    const enableEditMode = (entity) => {
+        if (!editMode) {
+            const cellPopupService = api.internalApi.getCellPopupService();
+            cellPopupService.showPopup(cellAddress, true);
+            cellPopupService.editFocusedEntity(entity);
+        }
+    };
+    React.useEffect(() => {
+        var _a, _b;
+        (_b = (_a = cellPopupRef === null || cellPopupRef === void 0 ? void 0 : cellPopupRef.current) === null || _a === void 0 ? void 0 : _a.refreshContent) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }, [focusedEntity]);
+    if (!cellAddress) {
+        return React.createElement(React.Fragment, null);
+    }
+    const noteEditor = React.createElement(ConnectedNoteEditor, { enableEditMode: () => enableEditMode('Note') });
+    const commentEditor = (React.createElement(CommentsEditor_1.CommentsEditor, { onRefreshContent: () => { var _a, _b; return (_b = (_a = cellPopupRef === null || cellPopupRef === void 0 ? void 0 : cellPopupRef.current) === null || _a === void 0 ? void 0 : _a.refreshContent) === null || _b === void 0 ? void 0 : _b.call(_a); }, enableEditMode: () => enableEditMode('Comment') }));
+    return (React.createElement(CellPopup_1.CellPopup, { ref: cellPopupRef, key: `${cellAddress.PrimaryKeyValue}-${cellAddress.ColumnId}`, isOpen: true, primaryKeyValue: cellAddress.PrimaryKeyValue, columnId: cellAddress.ColumnId }, (() => {
+        switch (focusedEntity) {
+            case 'Note':
+                return noteEditor;
+            case 'Comment':
+                return commentEditor;
+            default:
+                return (React.createElement(React.Fragment, null,
+                    noteEditor,
+                    commentEditor));
+        }
+    })()));
+};
+exports.GridCellPopup = GridCellPopup;

package/src/View/Components/Popups/GridCellPopup/index.d.ts

@@ -0,0 +1 @@
+export { GridCellPopup } from './GridCellPopup';

package/src/View/Components/Popups/GridCellPopup/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridCellPopup = void 0;
+var GridCellPopup_1 = require("./GridCellPopup");
+Object.defineProperty(exports, "GridCellPopup", { enumerable: true, get: function () { return GridCellPopup_1.GridCellPopup; } });

package/src/View/Components/Selectors/ColumnSelector.d.ts

@@ -9,5 +9,6 @@ export type ColumnSelectorProps<IsMulti extends boolean = false> = {
     filterColumn?: (column: AdaptableColumn) => boolean;
     value?: IsMulti extends true ? string[] : string;
     onChange: (column: IsMulti extends true ? string[] : string) => void;
+    placeholder?: string;
 };
 export declare const ColumnSelector: <IsMulti extends boolean = false>(props: ColumnSelectorProps<IsMulti>) => JSX.Element;

package/src/View/Components/Selectors/ColumnSelector.js

@@ -6,6 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const Select_1 = require("../../../components/Select");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ColumnSelector = function (props) {
+    var _a;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const columns = React.useMemo(() => {
         return api.columnApi.getColumnsOfType(props.type);
@@ -25,7 +26,7 @@ const ColumnSelector = function (props) {
         }
         return true;
     });
-    return (React.createElement(Select_1.Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: "Select Column", onChange: (colId) => {
+    return (React.createElement(Select_1.Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (colId) => {
             props.onChange(colId);
         }, options: options }));
 };

package/src/View/Components/Selectors/PermittedValuesSelector.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="react" />
 export type ValueType = number | string | Date;
-interface PermittedValuesSelectorProps<Value extends ValueType> {
+interface PermittedValuesSelectorProps<Value extends ValueType, IsMulti extends boolean> {
+    isMulti?: IsMulti;
     columnId: string;
-    value: Value;
-    onChange: (value: Value) => void;
+    value: IsMulti extends true ? Value[] : Value;
+    onChange: (value: IsMulti extends true ? Value[] : Value) => void;
     allowNewValues?: boolean;
     className?: string;
     disabled?: boolean;
     placeholder?: string;
 }
-export declare const PermittedValuesSelector: <Value extends ValueType>(props: PermittedValuesSelectorProps<Value>) => JSX.Element;
+export declare const PermittedValuesSelector: <Value extends ValueType, IsMulti extends boolean = false>(props: PermittedValuesSelectorProps<Value, IsMulti>) => JSX.Element;
 export {};