@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.0

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 DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
-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 DropdownButton from '../../components/DropdownButton';
+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, _b;
-    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;
@@ -70,7 +66,7 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
             },
         }))
         : [];
-    if ((0, ChartingState_1.isAgChartDefinition)(selectedChart)) {
+    if (isAgChartDefinition(selectedChart)) {
         containerOptions.unshift({
             label: chartingOptions.agGridContainerName,
             onClick: () => {
@@ -85,11 +81,11 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
         style.fontSize = 'small';
         iconSize = 15;
     }
-    const chartSelector = (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], className: `ab-${elementType}__Chart__select`, items: options, disabled: !hasCharts }, selectedChartValue));
-    const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], items: containerOptions, disabled: !isSelectedChart }, (_b = selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name) !== null && _b !== void 0 ? _b : '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 chartSelector = (React.createElement(DropdownButton, { style: style, width: "100%", columns: ['label'], className: `ab-${elementType}__Chart__select`, items: options, disabled: !hasCharts }, selectedChartValue));
+    const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(DropdownButton, { style: style, width: "100%", columns: ['label'], items: containerOptions, disabled: !isSelectedChart }, (_b = selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name) !== null && _b !== void 0 ? _b : 'Select Container'));
+    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,
@@ -99,4 +95,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,19 +1,15 @@
-"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 Enums_1 = require("../../PredefinedConfig/Common/Enums");
-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 { SelectionMode } from '../../PredefinedConfig/Common/Enums';
+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
@@ -23,7 +19,7 @@ const MODULES_WITH_COLUMN = [
     'Alert',
     'CalculatedColumn',
     'CustomSort',
-    'Filter',
+    'ColumnFilter',
     'FormatColumn',
     'FlashingCell',
     'PlusMinus',
@@ -38,8 +34,8 @@ const MODULES_WITH_SCOPE = [
     'StyledColumn',
 ];
 // These modules are shown only if they have objects defiend
-const MODULES_WITH_VIEW_ONLY = ['CalculatedColumn', 'Filter'];
-const MODULES_WITHOUT_NEW = ['CalculatedColumn', 'Filter'];
+const MODULES_WITH_VIEW_ONLY = ['CalculatedColumn', 'ColumnFilter'];
+const MODULES_WITHOUT_NEW = ['CalculatedColumn', 'ColumnFilter'];
 const ColumnDefPreview = (props) => {
     const keyValuePairs = [
         {
@@ -110,8 +106,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%',
@@ -120,7 +116,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.isModuleAvailable()) {
         return null;
@@ -151,35 +147,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, { SelectedColumnIds: [selectedColumnId], ColumnList: adaptable.api.columnApi.getColumns(), onColumnChange: (columns) => { var _a, _b; return setSelectedColumnId((_b = (_a = columns === null || columns === void 0 ? void 0 : columns[0]) === null || _a === void 0 ? void 0 : _a.columnId) !== null && _b !== void 0 ? _b : undefined); }, SelectionMode: Enums_1.SelectionMode.Single })))),
-        selectedColumnId && (React.createElement(Tabs_1.Tabs, { mb: 3 },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Config"),
-            React.createElement(Tabs_1.Tabs.Tab, null, "Info"),
-            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, { SelectedColumnIds: [selectedColumnId], ColumnList: adaptable.api.columnApi.getColumns(), onColumnChange: (columns) => { var _a, _b; return setSelectedColumnId((_b = (_a = columns === null || columns === void 0 ? void 0 : columns[0]) === null || _a === void 0 ? void 0 : _a.columnId) !== null && _b !== void 0 ? _b : undefined); }, SelectionMode: SelectionMode.Single })))),
+        selectedColumnId && (React.createElement(Tabs, { mb: 3 },
+            React.createElement(Tabs.Tab, null, "Config"),
+            React.createElement(Tabs.Tab, null, "Info"),
+            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/Components/AdaptableButton/index.js

@@ -1,18 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableButtonComponent = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Icon_1 = require("../../../components/Icon");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const AdaptableContext_1 = require("../../AdaptableContext");
+import * as React from 'react';
+import { isAdaptableSystemIcon } from '../../../components/Icon';
+import SimpleButton from '../../../components/SimpleButton';
+import { useAdaptable } from '../../AdaptableContext';
 // This component is connected to adaptable and know about custom icons
-const AdaptableButtonComponent = (props) => {
+export const AdaptableButtonComponent = (props) => {
     let icon = props.icon;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    if ((0, Icon_1.isAdaptableSystemIcon)(icon)) {
+    const adaptable = useAdaptable();
+    if (isAdaptableSystemIcon(icon)) {
         icon = adaptable.api.userInterfaceApi.internalApi.prepareAdaptableIconDef(icon);
     }
-    return React.createElement(SimpleButton_1.default, Object.assign({}, props, { icon: icon }));
+    return React.createElement(SimpleButton, Object.assign({}, props, { icon: icon }));
 };
-exports.AdaptableButtonComponent = AdaptableButtonComponent;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { AdaptableInputProps } from '../AdaptableInput';
 export declare type AdaptableDateInputProps = AdaptableInputProps;
-declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "start" | "open" | "name" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "color" | "content" | "display" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "textAlign" | "translate" | "verticalAlign" | "value" | "hidden" | "cite" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "m" | "wrap" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bg" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "variant" | "tx" | "sx" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
+declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "type" | "key" | "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "opacity" | "step" | "value" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
 export default AdaptableDateInput;

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

@@ -1,15 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Datepicker_1 = require("../../../components/Datepicker");
-const AdaptableContext_1 = require("../../AdaptableContext");
-const useProperty_1 = tslib_1.__importDefault(require("../../../components/utils/useProperty"));
-const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
+import { __rest } from "tslib";
+import * as React from 'react';
+import { Datepicker } from '../../../components/Datepicker';
+import { useAdaptable } from '../../AdaptableContext';
+import useProperty from '../../../components/utils/useProperty';
+import { dateToISO, parseDateValue } from '../../../Utilities/Helpers/DateHelper';
 const AdaptableDateInput = React.forwardRef((props, ref) => {
-    const dateInputOptions = (0, AdaptableContext_1.useAdaptable)().adaptableOptions.userInterfaceOptions.dateInputOptions;
-    const { value: _, defaultValue: __, onChange, required, disabled } = props, inputProps = tslib_1.__rest(props, ["value", "defaultValue", "onChange", "required", "disabled"]);
-    const [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {
+    const dateInputOptions = useAdaptable().adaptableOptions.userInterfaceOptions.dateInputOptions;
+    const { value: _, defaultValue: __, onChange, required, disabled } = props, inputProps = __rest(props, ["value", "defaultValue", "onChange", "required", "disabled"]);
+    const [value, setValue] = useProperty(props, 'value', undefined, {
         onChange: (dateString) => {
             var _a;
             // wrap date value in FormEvent in order to keep the external API unchanged
@@ -21,17 +19,17 @@ const AdaptableDateInput = React.forwardRef((props, ref) => {
             });
         },
     });
-    const dateValue = value ? (0, DateHelper_1.parseDateValue)(value) : null;
+    const dateValue = value ? parseDateValue(value) : null;
     const datepickerProps = Object.assign({ 
         // this is OK as long as we do not support range datepicker
         value: dateValue, onChange: (dateValue) => { var _a; 
         // convert to ISO8601 string format
         // see https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats#date_strings
-        return setValue((_a = (0, DateHelper_1.dateToISO)(dateValue)) !== null && _a !== void 0 ? _a : ''); }, required,
+        return setValue((_a = dateToISO(dateValue)) !== null && _a !== void 0 ? _a : ''); }, required,
         disabled, dateProps: {
             format: dateInputOptions.dateFormat,
             locale: dateInputOptions.locale,
         }, showWeekNumber: dateInputOptions.showWeekNumber, showOutsideDays: dateInputOptions.showOutsideDays, datepickerButtons: dateInputOptions.datepickerButtons }, inputProps);
-    return React.createElement(Datepicker_1.Datepicker, Object.assign({ ref: ref }, datepickerProps));
+    return React.createElement(Datepicker, Object.assign({ ref: ref }, datepickerProps));
 });
-exports.default = AdaptableDateInput;
+export default AdaptableDateInput;