@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.1

package/src/View/Charting/DeleteChartButton.js

@@ -1,14 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DeleteChartButton = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
-const ChartingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ChartingRedux"));
-const ChartingState_1 = require("../../PredefinedConfig/ChartingState");
-const DeleteChartButton = (props) => {
-    return (React.createElement(ButtonDelete_1.ButtonDelete, { iconSize: props.iconSize, disabled: !props.chart, ConfirmAction: (0, ChartingState_1.isAgChartDefinition)(props.chart)
+import * as React from 'react';
+import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
+import * as ChartingRedux from '../../Redux/ActionsReducers/ChartingRedux';
+import { isAgChartDefinition } from '../../PredefinedConfig/ChartingState';
+export const DeleteChartButton = (props) => {
+    return (React.createElement(ButtonDelete, { iconSize: props.iconSize, disabled: !props.chart, ConfirmAction: isAgChartDefinition(props.chart)
             ? ChartingRedux.ChartingDeleteChart(props.chart)
             : ChartingRedux.ChartingDeleteExternalChart(props.chart), ConfirmationMsg: `Are you sure you want to delete this Charts?`, ConfirmationTitle: 'Delete Charts', accessLevel: props.accessLevel, tooltip: "Delete Chart" }));
 };
-exports.DeleteChartButton = DeleteChartButton;

package/src/View/Charting/EditChartButton.js

@@ -1,15 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditChartButton = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
-const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
-const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
-const react_redux_1 = require("react-redux");
-const EditChartButton = (props) => {
-    const dispatch = (0, react_redux_1.useDispatch)();
-    return (React.createElement(ButtonEdit_1.ButtonEdit, { iconSize: props.iconSize, tooltip: "Edit Chart", 
+import * as React from 'react';
+import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
+import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
+import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
+import { useDispatch } from 'react-redux';
+export const EditChartButton = (props) => {
+    const dispatch = useDispatch();
+    return (React.createElement(ButtonEdit, { iconSize: props.iconSize, tooltip: "Edit Chart", 
         // It gets complicated when a chart is both open and opened in edit wizard
         // There an be conflicts between the two open charts (preview and main) and the changes to the active chart may not be syncronized correctly.
         disabled: !props.chart || props.isOpen, accessLevel: props.accessLevel, onClick: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.ChartingModuleId, 'Chart', {
@@ -18,4 +14,3 @@ const EditChartButton = (props) => {
             source: 'Toolbar',
         })) }));
 };
-exports.EditChartButton = EditChartButton;

package/src/View/Charting/ShowChartButton.js

@@ -1,37 +1,33 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShowChartButton = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const AdaptableContext_1 = require("../AdaptableContext");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
-const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
-const ChartingState_1 = require("../../PredefinedConfig/ChartingState");
-const useAgChartState_1 = require("./useAgChartState");
-const useExternalChartState_1 = require("./useExternalChartState");
+import * as React from 'react';
+import SimpleButton from '../../components/SimpleButton';
+import { useAdaptable } from '../AdaptableContext';
+import DropdownButton from '../../components/DropdownButton';
+import { AG_GRID_CHART_WINDOW } from '../../Utilities/Constants/GeneralConstants';
+import { isAgChartDefinition, isExternalChartDefinition, } from '../../PredefinedConfig/ChartingState';
+import { useAgChartState } from './useAgChartState';
+import { useExternalChartState } from './useExternalChartState';
 const BaseShowChartButton = (props) => {
     var _a;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const chartingOptions = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.chartingOptions;
     const chartContainers = chartingOptions === null || chartingOptions === void 0 ? void 0 : chartingOptions.chartContainers;
     if (props.chartOpened) {
-        return (React.createElement(SimpleButton_1.default, { "data-name": "close-chart-button", onClick: props.onCloseChart, variant: "text", tone: "error", icon: "visibility-off", tooltip: "Hide Chart" }));
+        return (React.createElement(SimpleButton, { "data-name": "close-chart-button", onClick: props.onCloseChart, variant: "text", tone: "error", icon: "visibility-off", tooltip: "Hide Chart" }));
     }
     if (!(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length)) {
-        return (React.createElement(SimpleButton_1.default, { "data-name": "show-chart-button", onClick: () => props.onShowChart(), variant: "text", tone: "success", icon: "visibility-on", tooltip: "Show Chart" }));
+        return (React.createElement(SimpleButton, { "data-name": "show-chart-button", onClick: () => props.onShowChart(), variant: "text", tone: "success", icon: "visibility-on", tooltip: "Show Chart" }));
     }
-    return (React.createElement(DropdownButton_1.default, { "data-name": "show-chart-dropdown", variant: "text", columns: ['label'], items: props.containerOptions },
-        React.createElement(SimpleButton_1.default, { variant: "raised", tone: "success" }, "Open")));
+    return (React.createElement(DropdownButton, { "data-name": "show-chart-dropdown", variant: "text", columns: ['label'], items: props.containerOptions },
+        React.createElement(SimpleButton, { variant: "raised", tone: "success" }, "Open")));
 };
 const ShowAgChartButton = (props) => {
     var _a, _b;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const chartingOptions = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.chartingOptions;
     const chartContainers = chartingOptions === null || chartingOptions === void 0 ? void 0 : chartingOptions.chartContainers;
-    const { isOpen, showChart, closeChart } = (0, useAgChartState_1.useAgChartState)(props.chartDefinition);
+    const { isOpen, showChart, closeChart } = useAgChartState(props.chartDefinition);
     const containerOptions = [
-        Object.assign({ label: (_b = chartingOptions.agGridContainerName) !== null && _b !== void 0 ? _b : GeneralConstants_1.AG_GRID_CHART_WINDOW, onClick: () => {
+        Object.assign({ label: (_b = chartingOptions.agGridContainerName) !== null && _b !== void 0 ? _b : AG_GRID_CHART_WINDOW, onClick: () => {
                 showChart(null);
             } }, (chartContainers
             ? chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.map((contianerDef) => ({
@@ -44,13 +40,13 @@ const ShowAgChartButton = (props) => {
 };
 const ShowExternalChartButton = (props) => {
     var _a;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const chartingOptions = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.chartingOptions;
     const chartContainers = chartingOptions === null || chartingOptions === void 0 ? void 0 : chartingOptions.chartContainers;
     /**
      * Need to refresh after the chart is closed/opened
      */
-    const { isOpen, showChart: onShow, hideChart: onHide, } = (0, useExternalChartState_1.useExternalChartState)(props.chartDefinition);
+    const { isOpen, showChart: onShow, hideChart: onHide, } = useExternalChartState(props.chartDefinition);
     const containerOptions = chartContainers
         ? chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.map((contianerDef) => ({
             label: contianerDef.name,
@@ -59,13 +55,12 @@ const ShowExternalChartButton = (props) => {
         : [];
     return (React.createElement(BaseShowChartButton, { chartOpened: isOpen, onShowChart: onShow, onCloseChart: onHide, containerOptions: containerOptions }));
 };
-const ShowChartButton = (props) => {
-    if ((0, ChartingState_1.isAgChartDefinition)(props.data)) {
+export const ShowChartButton = (props) => {
+    if (isAgChartDefinition(props.data)) {
         return React.createElement(ShowAgChartButton, { chartDefinition: props.data });
     }
-    if ((0, ChartingState_1.isExternalChartDefinition)(props.data)) {
+    if (isExternalChartDefinition(props.data)) {
         return React.createElement(ShowExternalChartButton, { chartDefinition: props.data });
     }
     return React.createElement(React.Fragment, null);
 };
-exports.ShowChartButton = ShowChartButton;

package/src/View/Charting/useAgChartState.js

@@ -1,15 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAgChartState = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const AdaptableContext_1 = require("../AdaptableContext");
-const SystemRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/SystemRedux"));
-const useAgChartState = (chartDefinition) => {
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { useAdaptable } from '../AdaptableContext';
+import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
+export const useAgChartState = (chartDefinition) => {
     const [chartRef, setChartRef] = React.useState(null);
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const currentChartModels = (0, react_redux_1.useSelector)((state) => SystemRedux.SystemChartingCurrentChartModelsSelector(state.System));
+    const adaptable = useAdaptable();
+    const currentChartModels = useSelector((state) => SystemRedux.SystemChartingCurrentChartModelsSelector(state.System));
     React.useEffect(() => {
         var _a, _b;
         if (!chartDefinition) {
@@ -72,4 +68,3 @@ const useAgChartState = (chartDefinition) => {
         closeChart,
     };
 };
-exports.useAgChartState = useAgChartState;

package/src/View/Charting/useChartingElements.js

@@ -1,24 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useChartingElements = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const Select_1 = require("../../components/Select");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const ChartingState_1 = require("../../PredefinedConfig/ChartingState");
-const ChartingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ChartingRedux"));
-const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
-const AdaptableContext_1 = require("../AdaptableContext");
-const DeleteChartButton_1 = require("./DeleteChartButton");
-const EditChartButton_1 = require("./EditChartButton");
-const useAgChartState_1 = require("./useAgChartState");
-const useExternalChartState_1 = require("./useExternalChartState");
-const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { Select } from '../../components/Select';
+import SimpleButton from '../../components/SimpleButton';
+import { isAgChartDefinition } from '../../PredefinedConfig/ChartingState';
+import * as ChartingRedux from '../../Redux/ActionsReducers/ChartingRedux';
+import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
+import { useAdaptable } from '../AdaptableContext';
+import { DeleteChartButton } from './DeleteChartButton';
+import { EditChartButton } from './EditChartButton';
+import { useAgChartState } from './useAgChartState';
+import { useExternalChartState } from './useExternalChartState';
+export const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
     var _a;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const chartDefinitions = (0, react_redux_1.useSelector)(ChartingRedux.ChartingGetChartModels);
-    const extenralChartDefinitions = (0, react_redux_1.useSelector)(ChartingRedux.ChartingGetExternalChartDefinitions);
+    const adaptable = useAdaptable();
+    const chartDefinitions = useSelector(ChartingRedux.ChartingGetChartModels);
+    const extenralChartDefinitions = useSelector(ChartingRedux.ChartingGetExternalChartDefinitions);
     const allChartDefinitions = [...chartDefinitions, ...extenralChartDefinitions];
     const chartingOptions = (_a = adaptable.adaptableOptions) === null || _a === void 0 ? void 0 : _a.chartingOptions;
     const chartContainers = chartingOptions === null || chartingOptions === void 0 ? void 0 : chartingOptions.chartContainers;
@@ -27,13 +23,13 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
         return allChartDefinitions.length > 0 ? allChartDefinitions[0].Uuid : null;
     });
     const selectedChart = allChartDefinitions.find((chart) => chart.Uuid === selectedChartId);
-    const isAgChart = (0, ChartingState_1.isAgChartDefinition)(selectedChart);
-    const chartAccessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(selectedChart, accessLevel);
+    const isAgChart = isAgChartDefinition(selectedChart);
+    const chartAccessLevel = AdaptableHelper.getAppropriateAccessLevel(selectedChart, accessLevel);
     const [selectedContainer, setSelectedContainer] = React.useState(null);
     // Need to always call as they the rule for hooks
-    const { isOpen: isAgChartOpen, showChart: showAgChart, closeChart: hideAgChart, } = (0, useAgChartState_1.useAgChartState)(isAgChart ? selectedChart : undefined);
+    const { isOpen: isAgChartOpen, showChart: showAgChart, closeChart: hideAgChart, } = useAgChartState(isAgChart ? selectedChart : undefined);
     // Need to always call as they the rule for hooks
-    const { isOpen: isExternalChartOpened, showChart: showExternalChart, hideChart: hideExternalChart, } = (0, useExternalChartState_1.useExternalChartState)(!isAgChart ? selectedChart : undefined);
+    const { isOpen: isExternalChartOpened, showChart: showExternalChart, hideChart: hideExternalChart, } = useExternalChartState(!isAgChart ? selectedChart : undefined);
     const isOpen = isAgChart ? isAgChartOpen : isExternalChartOpened;
     const showChart = isAgChart ? showAgChart : showExternalChart;
     const hideChart = isAgChart ? hideAgChart : hideExternalChart;
@@ -68,7 +64,7 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
             value: contianerDef.name,
         }))
         : [];
-    if ((0, ChartingState_1.isAgChartDefinition)(selectedChart)) {
+    if (isAgChartDefinition(selectedChart)) {
         containerOptions.unshift({
             label: chartingOptions.agGridContainerName,
             value: chartingOptions.agGridContainerName,
@@ -81,8 +77,8 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
         style.fontSize = 'small';
         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 ? chartingOptions.agGridContainerName : selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name, size: size, onChange: (containerName) => {
+    const chartSelector = (React.createElement(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, { value: selectedContainer === null ? chartingOptions.agGridContainerName : selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name, size: size, onChange: (containerName) => {
             if (containerName === chartingOptions.agGridContainerName) {
                 setSelectedContainer(null);
             }
@@ -90,9 +86,9 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
                 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 }));
-    const editButton = (React.createElement(EditChartButton_1.EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
+    const chartButton = (React.createElement(SimpleButton, { 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, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
+    const editButton = (React.createElement(EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
     return {
         chartSelector,
         containerSelector,
@@ -102,4 +98,3 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
         selectedChart,
     };
 };
-exports.useChartingElements = useChartingElements;

package/src/View/Charting/useExternalChartState.js

@@ -1,16 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useExternalChartState = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const AdaptableContext_1 = require("../AdaptableContext");
+import React from 'react';
+import { useAdaptable } from '../AdaptableContext';
 // need to trigger other show-chart buttons to close/hide
 const buttonChangeSubscribers = [];
-const useExternalChartState = (chartDefinition) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+export const useExternalChartState = (chartDefinition) => {
+    const adaptable = useAdaptable();
     // needs to update when ever a chart is:
     // - opened, hidden
-    const [isOpen, setIsOpen] = react_1.default.useState(() => {
+    const [isOpen, setIsOpen] = React.useState(() => {
         return (chartDefinition &&
             adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition));
     });
@@ -18,11 +14,11 @@ const useExternalChartState = (chartDefinition) => {
     if (liveChartState !== isOpen) {
         setIsOpen(liveChartState);
     }
-    const updateIsOpen = react_1.default.useCallback(() => {
+    const updateIsOpen = React.useCallback(() => {
         setIsOpen(chartDefinition &&
             adaptable.api.chartingApi.internalApi.isExternalChartOpened(chartDefinition));
     }, [chartDefinition]);
-    react_1.default.useEffect(() => {
+    React.useEffect(() => {
         const subscriber = () => {
             updateIsOpen();
         };
@@ -53,4 +49,3 @@ const useExternalChartState = (chartDefinition) => {
         isOpen,
     };
 };
-exports.useExternalChartState = useExternalChartState;

package/src/View/ColumnInfo/ColumnInfo.js

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColumnInfo = 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 FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
-const InfiniteTable_1 = require("../../components/InfiniteTable");
-const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const Tabs_1 = require("../../components/Tabs");
-const AdaptableContext_1 = require("../AdaptableContext");
-const AdaptableObjectList_1 = require("../Components/AdaptableObjectList");
-const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
-const ColumnSelector_1 = require("../Components/Selectors/ColumnSelector");
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { Box, Flex } from 'rebass';
+import FormLayout, { FormRow } from '../../components/FormLayout';
+import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
+import Panel from '../../components/Panel';
+import { Tabs } from '../../components/Tabs';
+import { useAdaptable } from '../AdaptableContext';
+import { AdaptableObjectList } from '../Components/AdaptableObjectList';
+import { ButtonNew } from '../Components/Buttons/ButtonNew';
+import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
 const BASE_CLASS_NAME = 'ab-AdaptableColumns';
 // TODOS:
 // - use column from props as initial value
@@ -109,8 +105,8 @@ const ColumnDefPreview = (props) => {
         Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
         Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
     };
-    return (React.createElement(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key" },
-        React.createElement(InfiniteTable_1.InfiniteTable, { domProps: {
+    return (React.createElement(DataSource, { data: keyValuePairs, primaryKey: "Key" },
+        React.createElement(InfiniteTable, { domProps: {
                 style: {
                     height: '460px',
                     width: '100%',
@@ -119,7 +115,7 @@ const ColumnDefPreview = (props) => {
 };
 const ModuleView = (props) => {
     var _a, _b, _c, _d;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const module = adaptable.ModuleService.getModuleById(props.moduleName);
     if (!module || !module.isModuleAvailable()) {
         return null;
@@ -150,35 +146,34 @@ const ModuleView = (props) => {
         setIsWizardOpen(false);
     }, []);
     // filter out items with scope
-    return (React.createElement(rebass_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list`, key: module.moduleInfo.ModuleName, mb: 4 },
-        React.createElement(rebass_1.Flex, null,
+    return (React.createElement(Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list`, key: module.moduleInfo.ModuleName, mb: 4 },
+        React.createElement(Flex, null,
             React.createElement("b", { className: `${BASE_CLASS_NAME}__header` }, module.moduleInfo.FriendlyName),
-            React.createElement(rebass_1.Box, { flex: 1 }),
-            !MODULES_WITHOUT_NEW.includes(props.moduleName) && (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => setIsWizardOpen(true) }, "New"))),
-        (itemsInScope === null || itemsInScope === void 0 ? void 0 : itemsInScope.length) ? React.createElement(AdaptableObjectList_1.AdaptableObjectList, { items: itemsInScope, module: module }) : null,
+            React.createElement(Box, { flex: 1 }),
+            !MODULES_WITHOUT_NEW.includes(props.moduleName) && (React.createElement(ButtonNew, { onClick: () => setIsWizardOpen(true) }, "New"))),
+        (itemsInScope === null || itemsInScope === void 0 ? void 0 : itemsInScope.length) ? React.createElement(AdaptableObjectList, { items: itemsInScope, module: module }) : null,
         isWizardOpen && EditWizard && (React.createElement(EditWizard, { popupParams: {
                 column,
                 action: 'New',
                 source: 'ModuleButton',
             }, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
 };
-const ColumnInfo = (props) => {
-    const state = (0, react_redux_1.useSelector)((state) => state);
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+export const ColumnInfo = (props) => {
+    const state = useSelector((state) => state);
+    const adaptable = useAdaptable();
     const [selectedColumnId, setSelectedColumnId] = React.useState(props.selectedColumnId);
     const column = adaptable.api.columnApi.getColumnWithColumnId(selectedColumnId);
-    return (React.createElement(Panel_1.default, { flex: 1 },
-        React.createElement(rebass_1.Box, { mb: 3 },
-            React.createElement(FormLayout_1.default, null,
-                React.createElement(FormLayout_1.FormRow, { label: "Select Column" },
-                    React.createElement(ColumnSelector_1.ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) })))),
-        selectedColumnId && (React.createElement(Tabs_1.Tabs, { mb: 3 },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Config"),
-            React.createElement(Tabs_1.Tabs.Tab, null, "Column Summary"),
-            React.createElement(Tabs_1.Tabs.Content, null, selectedColumnId && (React.createElement(rebass_1.Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
+    return (React.createElement(Panel, { flex: 1 },
+        React.createElement(Box, { mb: 3 },
+            React.createElement(FormLayout, null,
+                React.createElement(FormRow, { label: "Select Column" },
+                    React.createElement(ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) })))),
+        selectedColumnId && (React.createElement(Tabs, { mb: 3 },
+            React.createElement(Tabs.Tab, null, "Config"),
+            React.createElement(Tabs.Tab, null, "Column Summary"),
+            React.createElement(Tabs.Content, null, selectedColumnId && (React.createElement(Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
                 return (React.createElement(ModuleView, { key: moduleName, moduleName: moduleName, selectedColumnId: selectedColumnId }));
             })))),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flex: 1 }, selectedColumnId && React.createElement(ColumnDefPreview, { column: column })))))));
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flex: 1 }, selectedColumnId && React.createElement(ColumnDefPreview, { column: column })))))));
 };
-exports.ColumnInfo = ColumnInfo;

package/src/View/ColumnInfo/ColumnInfoPopup.js

@@ -1,15 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColumnInfoPopup = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const ColumnInfo_1 = require("./ColumnInfo");
-const ColumnInfoPopup = (props) => {
+import * as React from 'react';
+import { Flex } from 'rebass';
+import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
+import { ColumnInfo } from './ColumnInfo';
+export const ColumnInfoPopup = (props) => {
     var _a, _b;
-    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Column Info', glyphicon: 'info' },
-        React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, height: "100%" },
-            React.createElement(ColumnInfo_1.ColumnInfo, { selectedColumnId: (_b = (_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column) === null || _b === void 0 ? void 0 : _b.columnId }))));
+    return (React.createElement(PopupPanel, { headerText: 'Column Info', glyphicon: 'info' },
+        React.createElement(Flex, { flexDirection: "column", flex: 1, height: "100%" },
+            React.createElement(ColumnInfo, { selectedColumnId: (_b = (_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column) === null || _b === void 0 ? void 0 : _b.columnId }))));
 };
-exports.ColumnInfoPopup = ColumnInfoPopup;

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,95 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { Box, Flex, Text } from 'rebass';
+import { Icon } from '../../components/icons';
+import Panel from '../../components/Panel';
+import SimpleButton from '../../components/SimpleButton';
+import * as CommentsRedux from '../../Redux/ActionsReducers/CommentsRedux';
+import { SystemCommentsAndNotesSelector } from '../../Redux/ActionsReducers/SystemRedux';
+import { formatDate } from '../../Utilities/ExpressionFunctions/dateUtils';
+import { useAdaptable } from '../AdaptableContext';
+import AdaptableInput from '../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]
+export const CommentsEditor = (props) => {
+    const adaptable = useAdaptable();
+    const cellAddress = useSelector((state) => SystemCommentsAndNotesSelector(state.System));
+    const userId = React.useMemo(() => {
+        return adaptable.api.optionsApi.getUserName();
+    }, []);
+    const commentThread = 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, { 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(Box, { p: 2, key: (_c = comment.Uuid) !== null && _c !== void 0 ? _c : index, style: {
+                        borderBottom: '1px solid var(--ab-color-primarydark)',
+                    } },
+                    React.createElement(Flex, { mb: 2, alignItems: "center" },
+                        React.createElement(Box, null,
+                            React.createElement(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(Box, { fontSize: 2 }, formatDate(comment.Timestamp, 'MM.DD.YYYY HH:mm')))),
+                        React.createElement(Box, { flex: 1 }),
+                        React.createElement(SimpleButton, { variant: "text", icon: "edit", disabled: !isOwnComment, onClick: () => setActiveEditingComment(comment.Uuid) }),
+                        React.createElement(SimpleButton, { variant: "text", icon: "delete", disabled: !isOwnComment, onClick: () => {
+                                adaptable.api.commentApi.deleteComment(comment, cellAddress);
+                                requestAnimationFrame(() => {
+                                    props.onRefreshContent();
+                                });
+                            } })),
+                    React.createElement(Box, { onClick: () => setActiveEditingComment(comment.Uuid) }, comment.Uuid === activeEditingComment ? (React.createElement(AdaptableInput, { 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(Text, null, comment.Value)))));
+            }),
+        React.createElement(AdaptableInput, { 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, { width: "100%", variant: "raised", onClick: () => {
+                adaptable.api.settingsPanelApi.openSettingsPanel('Comments');
+                adaptable.api.internalApi.getCellPopupService().hidePopup();
+            } },
+            React.createElement(Box, { mr: 2 },
+                React.createElement(Icon, { name: "folder" })),
+            ' ',
+            "Open all comments")));
+};

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

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