@adaptabletools/adaptable 17.0.5 → 18.0.0-canary.0

package/src/View/Components/Popups/AdaptablePopup/useMenuItems.js

@@ -1,28 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMenuItems = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const DefaultSettingsPanel_1 = require("../../../../Utilities/Defaults/DefaultSettingsPanel");
-const AdaptableContext_1 = require("../../../AdaptableContext");
-const PopupRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReducers/PopupRedux"));
-const useMenuItems = () => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { STANDALONE_MODULE_POPUPS, DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS, } from '../../../../Utilities/Defaults/DefaultSettingsPanel';
+import { useAdaptable } from '../../../AdaptableContext';
+import * as PopupRedux from '../../../../Redux/ActionsReducers/PopupRedux';
+export const useMenuItems = () => {
+    const adaptable = useAdaptable();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
-    const allMenuItems = (0, react_redux_1.useSelector)((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.Grid) === null || _a === void 0 ? void 0 : _a.SettingPanelModuleMenuItems; });
+    const allMenuItems = useSelector((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.Grid) === null || _a === void 0 ? void 0 : _a.SettingPanelModuleMenuItems; });
     return React.useMemo(() => {
         var _a;
         let navigationItems = (_a = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.navigation) === null || _a === void 0 ? void 0 : _a.items;
         if (!navigationItems) {
-            navigationItems = [...DefaultSettingsPanel_1.DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS];
+            navigationItems = [...DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS];
             if (settingsPanelOptions.customSettingsPanels) {
                 navigationItems.push(...settingsPanelOptions.customSettingsPanels.map((panel) => panel.name));
             }
         }
         const visibleItems = allMenuItems.filter((item) => item.module !== 'General' &&
             item.module !== 'CustomSettingsPanel' &&
-            !DefaultSettingsPanel_1.STANDALONE_MODULE_POPUPS.includes(item.module) &&
+            !STANDALONE_MODULE_POPUPS.includes(item.module) &&
             item.isVisible);
         return navigationItems
             .map((moduleName) => {
@@ -46,4 +42,3 @@ const useMenuItems = () => {
             .filter(Boolean);
     }, [allMenuItems]);
 };
-exports.useMenuItems = useMenuItems;

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

@@ -1,32 +1,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptablePopupAlert = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const PanelWithImage_1 = require("../Panels/PanelWithImage");
-const UIHelper_1 = require("../../UIHelper");
-const rebass_1 = require("rebass");
-const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const AdaptableFormComponent_1 = require("../../../components/AdaptableFormComponent");
-const react_1 = require("react");
-const AdaptableContext_1 = require("../../AdaptableContext");
-const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
-const AdaptablePopupAlert = (props) => {
+import * as React from 'react';
+import { PanelWithImage } from '../Panels/PanelWithImage';
+import { UIHelper } from '../../UIHelper';
+import { Flex, Text, Box } from 'rebass';
+import Dialog from '../../../components/Dialog';
+import { AdaptableFormComponent } from '../../../components/AdaptableFormComponent';
+import { useState } from 'react';
+import { useAdaptable } from '../../AdaptableContext';
+import { AdaptableIconComponent } from '../AdaptableIconComponent';
+export const AdaptablePopupAlert = (props) => {
     var _a;
     const messageType = props.adaptableAlert.alertDefinition.MessageType || 'Error';
     const msg = (_a = props.adaptableAlert.message) !== null && _a !== void 0 ? _a : '';
-    const headerColor = UIHelper_1.UIHelper.getColorByMessageType(messageType);
+    const headerColor = UIHelper.getColorByMessageType(messageType);
     let header = messageType;
-    const { api, adaptableOptions } = (0, AdaptableContext_1.useAdaptable)();
+    const { api, adaptableOptions } = useAdaptable();
     if (props.adaptableAlert.header) {
         header = `${header}: ${props.adaptableAlert.header}`;
     }
-    let glyph = UIHelper_1.UIHelper.getGlyphByMessageType(messageType);
+    let glyph = UIHelper.getGlyphByMessageType(messageType);
     // we still need the defauld
     const defaultForm = React.useMemo(() => {
         return api.alertApi.internalApi.getDefaultAlertNotificationForm();
     }, []);
-    const [formData, setFormData] = (0, react_1.useState)({});
+    const [formData, setFormData] = useState({});
     const context = React.useMemo(() => {
         return {
             alert: props.adaptableAlert,
@@ -46,24 +42,24 @@ const AdaptablePopupAlert = (props) => {
         if (!icon) {
             return null;
         }
-        return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignSelf: "end", alignItems: "right" },
+        return (React.createElement(Flex, { flexDirection: "column", alignSelf: "end", alignItems: "right" },
             ' ',
-            React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: icon, iconClassName: 'alert-popup__application-icon' })));
+            React.createElement(AdaptableIconComponent, { icon: icon, iconClassName: 'alert-popup__application-icon' })));
     };
-    const content = (React.createElement(PanelWithImage_1.PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { padding: 2 } },
+    const content = (React.createElement(PanelWithImage, { header: header, headerColor: headerColor, glyphicon: glyph, bodyProps: { padding: 2 } },
         React.createElement("div", null,
-            React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "flex-start" },
+            React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start" },
                 renderApplicationIcon(adaptableOptions.notificationsOptions.showApplicationIcon &&
                     adaptableOptions.userInterfaceOptions.applicationIcon),
                 typeof msg === 'string'
                     ? msg.split('\n').map(function (item, index) {
-                        return (React.createElement(rebass_1.Flex, { flexDirection: "row", key: index },
-                            React.createElement(rebass_1.Text, { key: index, margin: 2 },
+                        return (React.createElement(Flex, { flexDirection: "row", key: index },
+                            React.createElement(Text, { key: index, margin: 2 },
                                 item,
                                 React.createElement("br", null))));
                     })
                     : msg),
-            React.createElement(rebass_1.Box, { margin: 2 }, adaptableForm ? (React.createElement(AdaptableFormComponent_1.AdaptableFormComponent, { focusFirstButton: props.focusFirstButton, data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: api, context: context, onButtonClick: (button) => {
+            React.createElement(Box, { margin: 2 }, adaptableForm ? (React.createElement(AdaptableFormComponent, { focusFirstButton: props.focusFirstButton, data: formData, formDef: adaptableForm, displayTitle: true, onChange: setFormData, api: api, context: context, onButtonClick: (button) => {
                     props.onClose();
                     // we want to give the current popup time to close
                     // and we reopen with a delay in case this button action causes another popup
@@ -72,10 +68,9 @@ const AdaptablePopupAlert = (props) => {
                         (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, context);
                     }, 20);
                 } })) : null))));
-    return props.headless ? (content) : (React.createElement(Dialog_1.default, { "data-name": `alert-popup alert-popup-${messageType.toLowerCase()}`, showCloseButton: false, isOpen: true, onDismiss: props.onClose, style: {
+    return props.headless ? (content) : (React.createElement(Dialog, { "data-name": `alert-popup alert-popup-${messageType.toLowerCase()}`, showCloseButton: false, isOpen: true, onDismiss: props.onClose, style: {
             minHeight: 'auto',
             minWidth: '20vw',
             maxWidth: '70vw',
         } }, content));
 };
-exports.AdaptablePopupAlert = AdaptablePopupAlert;

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

@@ -1,24 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptablePopupConfirmation = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const UIHelper_1 = require("../../UIHelper");
-const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
-const PanelWithImage_1 = require("../Panels/PanelWithImage");
-const rebass_1 = require("rebass");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const CheckBox_1 = require("../../../components/CheckBox");
-const SystemRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/SystemRedux"));
-const react_redux_1 = require("react-redux");
-const AdaptablePopupConfirmation = (props) => {
-    const dispatch = (0, react_redux_1.useDispatch)();
+import * as React from 'react';
+import { UIHelper } from '../../UIHelper';
+import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
+import { PanelWithImage } from '../Panels/PanelWithImage';
+import { Flex, Box, Text } from 'rebass';
+import SimpleButton from '../../../components/SimpleButton';
+import Input from '../../../components/Input';
+import Dialog from '../../../components/Dialog';
+import { CheckBox } from '../../../components/CheckBox';
+import * as SystemRedux from '../../../Redux/ActionsReducers/SystemRedux';
+import { useDispatch } from 'react-redux';
+export const AdaptablePopupConfirmation = (props) => {
+    const dispatch = useDispatch();
     const [disableDeleteConfirmation, setDisableDeleteConfirmation] = React.useState(false);
     const [promptText, setPromptText] = React.useState('');
     const header = props.header;
-    const glyph = UIHelper_1.UIHelper.getGlyphByMessageType(props.messageType);
+    const glyph = UIHelper.getGlyphByMessageType(props.messageType);
     function onCancelForm() {
         setPromptText('');
         props.onCancel();
@@ -35,31 +31,30 @@ const AdaptablePopupConfirmation = (props) => {
     }
     function canConfirm() {
         if (props.showInputBox) {
-            return StringExtensions_1.StringExtensions.IsNotNullOrEmpty(promptText);
+            return StringExtensions.IsNotNullOrEmpty(promptText);
         }
         return true;
     }
     if (!props.showPopup) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(Dialog_1.default, { modal: true, "data-name": `confirmation-popup confirmation-popup--${props.messageType.toLowerCase()}`, isOpen: props.showPopup, onDismiss: props.onCancel, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
-        React.createElement(PanelWithImage_1.PanelWithImage, { header: header, icon: glyph, variant: "primary" },
+    return (React.createElement(Dialog, { modal: true, "data-name": `confirmation-popup confirmation-popup--${props.messageType.toLowerCase()}`, isOpen: props.showPopup, onDismiss: props.onCancel, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
+        React.createElement(PanelWithImage, { header: header, icon: glyph, variant: "primary" },
             React.createElement("div", null,
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, props.messsage.split('\n').map(function (item, index) {
-                    return (React.createElement(rebass_1.Text, { key: index, margin: 2 },
+                    return (React.createElement(Text, { key: index, margin: 2 },
                         item,
                         React.createElement("br", null)));
                 })),
-                React.createElement(rebass_1.Box, { pl: 2 },
-                    React.createElement(CheckBox_1.CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
+                React.createElement(Box, { pl: 2 },
+                    React.createElement(CheckBox, { checked: disableDeleteConfirmation, onChange: () => {
                             setDisableDeleteConfirmation(!disableDeleteConfirmation);
                         } }, "Do not show this again")),
-                props.showInputBox && (React.createElement(rebass_1.Box, { padding: 2, "data-name": "body" },
+                props.showInputBox && (React.createElement(Box, { padding: 2, "data-name": "body" },
                     React.createElement("p", null, "Please enter a comment to confirm"),
-                    React.createElement(Input_1.default, { marginTop: 2, width: '100%', value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
-                React.createElement(rebass_1.Flex, { marginTop: 3, padding: 2, "data-name": "footer" },
-                    React.createElement(SimpleButton_1.default, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm() }, props.confirmButtonText),
+                    React.createElement(Input, { marginTop: 2, width: '100%', value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }))),
+                React.createElement(Flex, { marginTop: 3, padding: 2, "data-name": "footer" },
+                    React.createElement(SimpleButton, { tone: "error", "data-name": "delete", variant: "raised", disabled: !canConfirm(), onClick: () => onConfirmmForm() }, props.confirmButtonText),
                     React.createElement("div", { style: { flex: 1 } }),
-                    React.createElement(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText))))));
+                    React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onCancelForm() }, props.cancelButtonText))))));
 };
-exports.AdaptablePopupConfirmation = AdaptablePopupConfirmation;

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

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptablePopupPrompt = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
-const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const rebass_1 = require("rebass");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const react_redux_1 = require("react-redux");
-const AdaptablePopupPrompt = (props) => {
+import * as React from 'react';
+import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
+import Dialog from '../../../components/Dialog';
+import { Flex, Box } from 'rebass';
+import SimpleButton from '../../../components/SimpleButton';
+import Input from '../../../components/Input';
+import { useDispatch } from 'react-redux';
+export const AdaptablePopupPrompt = (props) => {
     var _a;
-    const dispatch = (0, react_redux_1.useDispatch)();
+    const dispatch = useDispatch();
     const [promptText, setPromptText] = React.useState((_a = props.defaultValue) !== null && _a !== void 0 ? _a : '');
     const onCloseForm = () => {
         setPromptText('');
@@ -29,21 +25,20 @@ const AdaptablePopupPrompt = (props) => {
     const changeContent = (e) => {
         setPromptText(e.target.value);
     };
-    return (React.createElement(Dialog_1.default, { modal: true, "data-name": `prompt-popup`, isOpen: true, onDismiss: props.onClose, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
-        React.createElement(rebass_1.Flex, { flexDirection: "column" },
-            React.createElement(rebass_1.Box, { marginTop: 3, mx: 2 }, props.header),
-            StringExtensions_1.StringExtensions.IsNotNullOrEmpty(props.message) && (React.createElement(rebass_1.Box, { marginTop: 3, mx: 2 },
+    return (React.createElement(Dialog, { modal: true, "data-name": `prompt-popup`, isOpen: true, onDismiss: props.onClose, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
+        React.createElement(Flex, { flexDirection: "column" },
+            React.createElement(Box, { marginTop: 3, mx: 2 }, props.header),
+            StringExtensions.IsNotNullOrEmpty(props.message) && (React.createElement(Box, { marginTop: 3, mx: 2 },
                 ' ',
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center' } }, props.message.split('\n').map(function (item, index) {
                     return (React.createElement("span", { key: index },
                         item,
                         React.createElement("br", null)));
                 })))),
-            React.createElement(Input_1.default, { autoFocus: true, marginTop: 3, mx: 3, value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }),
-            React.createElement(rebass_1.Box, { marginTop: 3 },
-                React.createElement(rebass_1.Flex, { padding: 2 },
-                    React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(promptText), onClick: () => onConfirmForm() }, "OK"),
+            React.createElement(Input, { autoFocus: true, marginTop: 3, mx: 3, value: promptText, type: "string", placeholder: "Enter text", onChange: (e) => changeContent(e) }),
+            React.createElement(Box, { marginTop: 3 },
+                React.createElement(Flex, { padding: 2 },
+                    React.createElement(SimpleButton, { tone: "accent", "data-name": "ok", variant: "raised", disabled: StringExtensions.IsNullOrEmpty(promptText), onClick: () => onConfirmForm() }, "OK"),
                     React.createElement("div", { style: { flex: 1 } }),
-                    React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "raised", onClick: () => onCloseForm(), "data-name": "cancel" }, "Cancel"))))));
+                    React.createElement(SimpleButton, { tone: "neutral", variant: "raised", onClick: () => onCloseForm(), "data-name": "cancel" }, "Cancel"))))));
 };
-exports.AdaptablePopupPrompt = AdaptablePopupPrompt;

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

@@ -1,27 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptablePopupTeamSharing = void 0;
-const tslib_1 = require("tslib");
-const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const rebass_1 = require("rebass");
-const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const react_1 = require("react");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const React = tslib_1.__importStar(require("react"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const AdaptablePopupTeamSharing = (props) => {
+import Dialog from '../../../components/Dialog';
+import { Box, Flex } from 'rebass';
+import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
+import Input from '../../../components/Input';
+import { useState } from 'react';
+import SimpleButton from '../../../components/SimpleButton';
+import * as React from 'react';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import HelpBlock from '../../../components/HelpBlock';
+import Radio from '../../../components/Radio';
+export const AdaptablePopupTeamSharing = (props) => {
     const { showPopup, onClose, onConfirm, header } = props;
-    const [config, setConfig] = (0, react_1.useState)({
+    const [config, setConfig] = useState({
         description: '',
         type: 'Snapshot',
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(Dialog_1.default, { modal: true, "data-name": "teamsharing-popup", isOpen: showPopup, onDismiss: onClose, autoFocus: false, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
-            React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                React.createElement(HelpBlock_1.default, { "data-name": "teamsharing-popup-description", margin: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
+        React.createElement(Dialog, { modal: true, "data-name": "teamsharing-popup", isOpen: showPopup, onDismiss: onClose, autoFocus: false, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
+            React.createElement(Flex, { flexDirection: "column" },
+                React.createElement(HelpBlock, { "data-name": "teamsharing-popup-description", margin: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
                     "Create a ",
                     header,
                     " which may be either:",
@@ -32,19 +28,18 @@ const AdaptablePopupTeamSharing = (props) => {
                         React.createElement("li", null,
                             React.createElement("strong", null, "Active"),
                             ": a \"live\" share that is automatically updated with every local change"))),
-                React.createElement(FormLayout_1.default, { padding: 2 },
-                    React.createElement(FormLayout_1.FormRow, { label: "Name: " },
-                        React.createElement(Input_1.default, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig(Object.assign(Object.assign({}, config), { description: e.target.value })) })),
-                    React.createElement(FormLayout_1.FormRow, { label: "Share: " },
-                        React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                            React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Snapshot' })) }, "Snapshot"),
+                React.createElement(FormLayout, { padding: 2 },
+                    React.createElement(FormRow, { label: "Name: " },
+                        React.createElement(Input, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig(Object.assign(Object.assign({}, config), { description: e.target.value })) })),
+                    React.createElement(FormRow, { label: "Share: " },
+                        React.createElement(Flex, { flexDirection: "row" },
+                            React.createElement(Radio, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Snapshot' })) }, "Snapshot"),
                             ' ',
-                            React.createElement(Radio_1.default, { "data-name": "teamsharing-entity-type-active", marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Active' })) }, "Active"),
+                            React.createElement(Radio, { "data-name": "teamsharing-entity-type-active", marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Active' })) }, "Active"),
                             ' '))),
-                React.createElement(rebass_1.Box, { marginTop: 3 },
-                    React.createElement(rebass_1.Flex, { padding: 2 },
-                        React.createElement(SimpleButton_1.default, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onClose() }, "Cancel"),
+                React.createElement(Box, { marginTop: 3 },
+                    React.createElement(Flex, { padding: 2 },
+                        React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onClose() }, "Cancel"),
                         React.createElement("div", { style: { flex: 1 } }),
-                        React.createElement(SimpleButton_1.default, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
+                        React.createElement(SimpleButton, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
 };
-exports.AdaptablePopupTeamSharing = AdaptablePopupTeamSharing;

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

@@ -1,21 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.showToast = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
-const AdaptablePopupAlert_1 = require("./AdaptablePopupAlert");
-const Toastify_1 = require("../../../components/Toastify");
-const showToast = (props) => {
+import * as React from 'react';
+import ObjectFactory from '../../../Utilities/ObjectFactory';
+import { AdaptablePopupAlert } from './AdaptablePopupAlert';
+import { toast } from '../../../components/Toastify';
+export const showToast = (props) => {
     // we're doing this hack and not simply using props.api in order not to have a memory
     // leak where the api is still kept around in memory by the toaster
     let api = props.api;
     const off = api.eventApi.on('AdaptableDestroy', () => {
-        Toastify_1.toast.dismiss();
+        toast.dismiss();
         api = null;
     });
     const adaptableOptions = props.api.optionsApi.getAdaptableOptions();
-    const toastProps = ObjectFactory_1.default.CreateToastOptions(adaptableOptions.notificationsOptions, {
+    const toastProps = ObjectFactory.CreateToastOptions(adaptableOptions.notificationsOptions, {
         containerId: adaptableOptions.adaptableId,
         onClose: () => {
             off();
@@ -23,23 +19,22 @@ const showToast = (props) => {
     }, {
         duration: props.adaptableAlert.alertDefinition.AlertProperties.NotificationDuration,
     });
-    const content = (React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {
-            Toastify_1.toast.dismiss(toastId);
+    const content = (React.createElement(AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {
+            toast.dismiss(toastId);
         } }));
     let toastId;
     switch (props.adaptableAlert.alertDefinition.MessageType) {
         case 'Info':
-            toastId = Toastify_1.toast.info(content, toastProps);
+            toastId = toast.info(content, toastProps);
             break;
         case 'Error':
-            toastId = Toastify_1.toast.error(content, toastProps);
+            toastId = toast.error(content, toastProps);
             break;
         case 'Success':
-            toastId = Toastify_1.toast.success(content, toastProps);
+            toastId = toast.success(content, toastProps);
             break;
         case 'Warning':
-            toastId = Toastify_1.toast.warn(content, toastProps);
+            toastId = toast.warn(content, toastProps);
             break;
     }
 };
-exports.showToast = showToast;

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

@@ -1,39 +1,33 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormPopups = exports.FormDialog = 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 AdaptableFormComponent_1 = require("../../../../components/AdaptableFormComponent");
-const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
-const AdaptableForm_1 = require("../../../../PredefinedConfig/Common/AdaptableForm");
-const PopupRedux_1 = require("../../../../Redux/ActionsReducers/PopupRedux");
-const AdaptableContext_1 = require("../../../AdaptableContext");
-const FormDialog = ({ id, formProps, form, prepareContext, }) => {
-    const dispatch = (0, react_redux_1.useDispatch)();
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Flex } from 'rebass';
+import { AdaptableFormComponent } from '../../../../components/AdaptableFormComponent';
+import Dialog from '../../../../components/Dialog';
+import { getDefaultAdaptableFormData } from '../../../../PredefinedConfig/Common/AdaptableForm';
+import { PopupHideForm } from '../../../../Redux/ActionsReducers/PopupRedux';
+import { useAdaptable } from '../../../AdaptableContext';
+export const FormDialog = ({ id, formProps, form, prepareContext, }) => {
+    const dispatch = useDispatch();
+    const adaptable = useAdaptable();
     const [data, setData] = React.useState(() => {
-        return (0, AdaptableForm_1.getDefaultAdaptableFormData)(form);
+        return getDefaultAdaptableFormData(form);
     });
     const handleDismiss = () => {
-        dispatch((0, PopupRedux_1.PopupHideForm)(id));
+        dispatch(PopupHideForm(id));
     };
     const context = Object.assign({ adaptableApi: adaptable.api, formData: data }, formProps);
-    return (React.createElement(Dialog_1.default, { isOpen: true, showCloseButton: false, style: { minHeight: 'auto', minWidth: 400, maxHeight: '80vh' }, onDismiss: handleDismiss },
-        React.createElement(rebass_1.Flex, { flexDirection: 'column', "data-name": "form-dialog", padding: 4, height: '100%' },
-            React.createElement(AdaptableFormComponent_1.AdaptableFormComponent, { formDef: form, data: data, context: context, onChange: setData, api: adaptable.api, displayTitle: true, onButtonClick: async (button) => {
+    return (React.createElement(Dialog, { isOpen: true, showCloseButton: false, style: { minHeight: 'auto', minWidth: 400, maxHeight: '80vh' }, onDismiss: handleDismiss },
+        React.createElement(Flex, { flexDirection: 'column', "data-name": "form-dialog", padding: 4, height: '100%' },
+            React.createElement(AdaptableFormComponent, { formDef: form, data: data, context: context, onChange: setData, api: adaptable.api, displayTitle: true, onButtonClick: async (button) => {
                     var _a;
                     handleDismiss();
                     const preparedContext = typeof prepareContext === 'function' ? await prepareContext(context) : context;
                     (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, preparedContext);
                 } }))));
 };
-exports.FormDialog = FormDialog;
-const FormPopups = () => {
-    const forms = (0, react_redux_1.useSelector)((state) => state.Popup.FormPopup.FormList);
+export const FormPopups = () => {
+    const forms = useSelector((state) => state.Popup.FormPopup.FormList);
     return (React.createElement(React.Fragment, null, forms.map((form) => {
-        return (React.createElement(exports.FormDialog, { key: form.Id, prepareContext: form.prepareContext, id: form.Id, formProps: form.FormProps, form: form.Form }));
+        return (React.createElement(FormDialog, { key: form.Id, prepareContext: form.prepareContext, id: form.Id, formProps: form.FormProps, form: form.Form }));
     })));
 };
-exports.FormPopups = FormPopups;

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,62 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { Flex } from 'rebass';
+import { GetNotesSelector } from '../../../../Redux/ActionsReducers/NotesRedux';
+import { SystemCommentsAndNotesEditModeSelector, SystemCommentsAndNotesFocusedEntitySelector, SystemCommentsAndNotesSelector, } from '../../../../Redux/ActionsReducers/SystemRedux';
+import { useAdaptable } from '../../../AdaptableContext';
+import { CommentsEditor } from '../../../Comments/CommentsEditor';
+import { NoteEditor } from '../../../Notes/NoteEditor';
+import { CellPopup } from '../../CellPopup';
+const ConnectedNoteEditor = ({ enableEditMode }) => {
+    const { api } = useAdaptable();
+    const isReadonly = api.entitlementApi.isModuleReadOnlyEntitlement('Notes');
+    const editMode = useSelector((state) => SystemCommentsAndNotesEditModeSelector(state.System));
+    const cellPopupService = api.internalApi.getCellPopupService();
+    const cellAddress = useSelector((state) => SystemCommentsAndNotesSelector(state.System));
+    const [
+    // Only handle first note for now
+    // Later we can handle multiple notes
+    note,] = useSelector((state) => {
+        return cellAddress ? GetNotesSelector(state.Notes, cellAddress) : [];
+    });
+    const handleNoteChange = React.useCallback((value) => {
+        api.notesApi.updateNoteText(value, note);
+    }, [note]);
+    return (React.createElement(Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotesPopup" },
+        React.createElement(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) })));
+};
+export const GridCellPopup = (props) => {
+    const { api } = useAdaptable();
+    const cellPopupRef = React.useRef(null);
+    const editMode = useSelector((state) => SystemCommentsAndNotesEditModeSelector(state.System));
+    const focusedEntity = useSelector((state) => SystemCommentsAndNotesFocusedEntitySelector(state.System));
+    const cellAddress = useSelector((state) => 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, { 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, { 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));
+        }
+    })()));
+};

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 @@
+export { GridCellPopup } from './GridCellPopup';

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

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getWindowPopupSize = exports.getSettingsPanelSize = exports.getActionPanelSize = exports.getMiddlePosition = void 0;
-const Helper_1 = require("../../../Utilities/Helpers/Helper");
-const getMiddlePosition = (size) => {
+import { clamp } from '../../../Utilities/Helpers/Helper';
+export const getMiddlePosition = (size) => {
     const height = window.innerHeight;
     const width = window.innerWidth;
     return {
@@ -10,26 +7,22 @@ const getMiddlePosition = (size) => {
         y: height / 2 - size.height / 2,
     };
 };
-exports.getMiddlePosition = getMiddlePosition;
-const getActionPanelSize = () => {
+export const getActionPanelSize = () => {
     const height = window.innerHeight;
     const width = window.innerWidth;
     return {
-        height: (0, Helper_1.clamp)(600, 0, height * 0.9),
-        width: (0, Helper_1.clamp)(800, 0, width * 0.9),
+        height: clamp(600, 0, height * 0.9),
+        width: clamp(800, 0, width * 0.9),
     };
 };
-exports.getActionPanelSize = getActionPanelSize;
-const getSettingsPanelSize = () => {
+export const getSettingsPanelSize = () => {
     const height = window.innerHeight;
     const width = window.innerWidth;
     return {
-        height: (0, Helper_1.clamp)(height * 0.9, 0, 800),
-        width: (0, Helper_1.clamp)(width * 0.9, 0, 800),
+        height: clamp(height * 0.9, 0, 800),
+        width: clamp(width * 0.9, 0, 800),
     };
 };
-exports.getSettingsPanelSize = getSettingsPanelSize;
-const getWindowPopupSize = () => {
-    return (0, exports.getSettingsPanelSize)();
+export const getWindowPopupSize = () => {
+    return getSettingsPanelSize();
 };
-exports.getWindowPopupSize = getWindowPopupSize;