@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.0

package/src/View/Components/ListBox/DualListBoxEditor.js

@@ -1,19 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DualListBoxEditor = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
-const ListBoxFilterSortComponent_1 = require("./ListBoxFilterSortComponent");
-const ArrayExtensions_1 = require("../../../Utilities/Extensions/ArrayExtensions");
-const ListGroupItem_1 = tslib_1.__importDefault(require("../../../components/List/ListGroupItem"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const rebass_1 = require("rebass");
-const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
-const ListGroup_1 = tslib_1.__importDefault(require("../../../components/List/ListGroup"));
-const SelectableList_1 = tslib_1.__importDefault(require("../../../components/SelectableList"));
-const useLatest_1 = require("../../../components/utils/useLatest");
+import * as React from 'react';
+import { useState, useRef, useEffect } from 'react';
+import { SortOrder } from '../../../PredefinedConfig/Common/Enums';
+import { ListBoxFilterSortComponent } from './ListBoxFilterSortComponent';
+import { ArrayExtensions } from '../../../Utilities/Extensions/ArrayExtensions';
+import ListGroupItem from '../../../components/List/ListGroupItem';
+import SimpleButton from '../../../components/SimpleButton';
+import { Flex } from 'rebass';
+import Panel from '../../../components/Panel';
+import ListGroup from '../../../components/List/ListGroup';
+import SelectableList from '../../../components/SelectableList';
+import { useLatest } from '../../../components/utils/useLatest';
 const listGroupStyle = {
     overflowY: 'auto',
     marginBottom: '0px',
@@ -22,23 +18,23 @@ const listGroupItemStyle = {
     fontSize: 'small',
     padding: 'var(--ab-space-1)',
 };
-const ButtonDirection = (props) => (React.createElement(SimpleButton_1.default, Object.assign({}, props, { style: Object.assign({ whiteSpace: 'nowrap', justifyContent: 'center' }, props.style) })));
-const DualListBoxEditor = (props) => {
-    const [placeholder] = (0, react_1.useState)(() => {
+const ButtonDirection = (props) => (React.createElement(SimpleButton, Object.assign({}, props, { style: Object.assign({ whiteSpace: 'nowrap', justifyContent: 'center' }, props.style) })));
+export const DualListBoxEditor = (props) => {
+    const [placeholder] = useState(() => {
         let placeholder = document.createElement('button');
         placeholder.className = 'placeholder';
         placeholder.classList.add('list-group-item');
         placeholder.type = 'button';
         return placeholder;
     });
-    const refDraggedHTMLElement = (0, react_1.useRef)(null);
-    const refDraggedElement = (0, react_1.useRef)();
-    const refOverHTMLElement = (0, react_1.useRef)(null);
-    const refFirstSelected = (0, react_1.useRef)(null);
+    const refDraggedHTMLElement = useRef(null);
+    const refDraggedElement = useRef();
+    const refOverHTMLElement = useRef(null);
+    const refFirstSelected = useRef(null);
     const createAvailableValuesList = (availableValues, sortOrder) => {
-        return ArrayExtensions_1.ArrayExtensions.sortArray(availableValues, sortOrder);
+        return ArrayExtensions.sortArray(availableValues, sortOrder);
     };
-    const [state, updateState] = (0, react_1.useState)(() => {
+    const [state, updateState] = useState(() => {
         let availableValues = new Array();
         props.AvailableValues.forEach((x) => {
             if (props.SelectedValues.indexOf(x) < 0) {
@@ -47,18 +43,18 @@ const DualListBoxEditor = (props) => {
         });
         return {
             SelectedValues: props.SelectedValues,
-            AvailableValues: createAvailableValuesList(availableValues, Enums_1.SortOrder.Asc),
+            AvailableValues: createAvailableValuesList(availableValues, SortOrder.Asc),
             UiSelectedSelectedValues: [],
             UiSelectedAvailableValues: [],
             FilterValue: '',
             SelectedValuesFilterValue: '',
-            SortOrder: Enums_1.SortOrder.Asc,
-            SelectedValuesSortOrder: Enums_1.SortOrder.Asc,
+            SortOrder: SortOrder.Asc,
+            SelectedValuesSortOrder: SortOrder.Asc,
             AllValues: props.AvailableValues,
         };
     });
-    const callbackRefs = (0, react_1.useRef)([]);
-    const getProps = (0, useLatest_1.useLatest)(props);
+    const callbackRefs = useRef([]);
+    const getProps = useLatest(props);
     const setState = (newState, callback) => {
         updateState(Object.assign(Object.assign({}, state), newState));
         if (newState.SelectedValues && props.SelectedValues !== newState.SelectedValues) {
@@ -68,12 +64,12 @@ const DualListBoxEditor = (props) => {
             callbackRefs.current.push(callback);
         }
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const callbacks = [...callbackRefs.current];
         callbacks.forEach((fn) => fn());
         callbackRefs.current = [];
     });
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         const availableValues = [];
         props.AvailableValues.forEach((x) => {
             if (props.SelectedValues.indexOf(x) < 0) {
@@ -115,7 +111,7 @@ const DualListBoxEditor = (props) => {
         let newSelectedValues = [...state.SelectedValues];
         for (let selElement of state.UiSelectedSelectedValues) {
             let index = newSelectedValues.indexOf(selElement);
-            ArrayExtensions_1.ArrayExtensions.moveArray(newSelectedValues, index, index - 1);
+            ArrayExtensions.moveArray(newSelectedValues, index, index - 1);
         }
         setState({
             SelectedValues: newSelectedValues,
@@ -136,7 +132,7 @@ const DualListBoxEditor = (props) => {
         let newSelectedValues = [...state.SelectedValues];
         for (var index = state.UiSelectedSelectedValues.length - 1; index >= 0; index--) {
             let indexglob = newSelectedValues.indexOf(state.UiSelectedSelectedValues[index]);
-            ArrayExtensions_1.ArrayExtensions.moveArray(newSelectedValues, indexglob, indexglob + 1);
+            ArrayExtensions.moveArray(newSelectedValues, indexglob, indexglob + 1);
         }
         setState({
             SelectedValues: newSelectedValues,
@@ -405,30 +401,30 @@ const DualListBoxEditor = (props) => {
         });
     };
     const sortColumnValues = () => {
-        if (state.SortOrder == Enums_1.SortOrder.Asc) {
+        if (state.SortOrder == SortOrder.Asc) {
             setState({
-                AvailableValues: ArrayExtensions_1.ArrayExtensions.sortArray(state.AvailableValues, Enums_1.SortOrder.Desc),
-                SortOrder: Enums_1.SortOrder.Desc,
+                AvailableValues: ArrayExtensions.sortArray(state.AvailableValues, SortOrder.Desc),
+                SortOrder: SortOrder.Desc,
             });
         }
         else {
             setState({
-                AvailableValues: ArrayExtensions_1.ArrayExtensions.sortArray(state.AvailableValues, Enums_1.SortOrder.Asc),
-                SortOrder: Enums_1.SortOrder.Asc,
+                AvailableValues: ArrayExtensions.sortArray(state.AvailableValues, SortOrder.Asc),
+                SortOrder: SortOrder.Asc,
             });
         }
     };
     const sortSelectedColumnValues = () => {
-        if (state.SelectedValuesSortOrder == Enums_1.SortOrder.Asc) {
+        if (state.SelectedValuesSortOrder == SortOrder.Asc) {
             setState({
-                SelectedValues: ArrayExtensions_1.ArrayExtensions.sortArray(state.SelectedValues, Enums_1.SortOrder.Desc),
-                SelectedValuesSortOrder: Enums_1.SortOrder.Desc,
+                SelectedValues: ArrayExtensions.sortArray(state.SelectedValues, SortOrder.Desc),
+                SelectedValuesSortOrder: SortOrder.Desc,
             });
         }
         else {
             setState({
-                SelectedValues: ArrayExtensions_1.ArrayExtensions.sortArray(state.SelectedValues, Enums_1.SortOrder.Asc),
-                SelectedValuesSortOrder: Enums_1.SortOrder.Asc,
+                SelectedValues: ArrayExtensions.sortArray(state.SelectedValues, SortOrder.Asc),
+                SelectedValuesSortOrder: SortOrder.Asc,
             });
         }
     };
@@ -476,7 +472,7 @@ const DualListBoxEditor = (props) => {
         if (isValueFilteredOut(x, state.SelectedValuesFilterValue)) {
             return null;
         }
-        const result = (React.createElement(ListGroupItem_1.default, { key: `${x}-1`, index: index, className: "Selected", draggable: true, style: listGroupItemStyle, active: isActive, ref: isActive && setRefFirstSelectedSelected ? refFirstSelected : null, onDragStart: (event) => DragSelectedStart(event, x), onDragEnd: () => DragSelectedEnd(), value: x }, x));
+        const result = (React.createElement(ListGroupItem, { key: `${x}-1`, index: index, className: "Selected", draggable: true, style: listGroupItemStyle, active: isActive, ref: isActive && setRefFirstSelectedSelected ? refFirstSelected : null, onDragStart: (event) => DragSelectedStart(event, x), onDragEnd: () => DragSelectedEnd(), value: x }, x));
         if (isActive && setRefFirstSelectedSelected) {
             setRefFirstSelectedSelected = false;
         }
@@ -490,31 +486,30 @@ const DualListBoxEditor = (props) => {
             return null;
         }
         else {
-            return (React.createElement(ListGroupItem_1.default, { className: "Available", style: listGroupItemStyle, active: isActive, index: index, draggable: true, key: `${value}-item`, onDragStart: (event) => DragAvailableStart(event, x), onDragEnd: () => DragAvailableEnd(), value: value }, x));
+            return (React.createElement(ListGroupItem, { className: "Available", style: listGroupItemStyle, active: isActive, index: index, draggable: true, key: `${value}-item`, onDragStart: (event) => DragAvailableStart(event, x), onDragEnd: () => DragAvailableEnd(), value: value }, x));
         }
     });
-    const headerFirstListBox = (React.createElement(ListBoxFilterSortComponent_1.ListBoxFilterSortComponent, { FilterValue: state.FilterValue, sortColumnValues: sortColumnValues, SortOrder: state.SortOrder, handleChangeFilterValue: handleChangeFilterValue }));
-    const headerSecondListBox = (React.createElement(ListBoxFilterSortComponent_1.ListBoxFilterSortComponent, { FilterValue: state.SelectedValuesFilterValue, sortColumnValues: sortSelectedColumnValues, SortOrder: state.SelectedValuesSortOrder, handleChangeFilterValue: handleChangeSelectedValuesFilterValue }));
-    return (React.createElement(rebass_1.Flex, { alignItems: "stretch", flexDirection: "row", className: "ab-DualListBoxEditor", style: Object.assign(Object.assign({}, props.style), { maxHeight: '100%', width: '100%' }) },
-        React.createElement(Panel_1.default, { header: props.HeaderAvailable, className: "ab-DualListBoxEditor__source", bodyProps: { padding: 0 }, marginRight: 2, style: { flex: '4 0 0%' }, bodyScroll: true },
+    const headerFirstListBox = (React.createElement(ListBoxFilterSortComponent, { FilterValue: state.FilterValue, sortColumnValues: sortColumnValues, SortOrder: state.SortOrder, handleChangeFilterValue: handleChangeFilterValue }));
+    const headerSecondListBox = (React.createElement(ListBoxFilterSortComponent, { FilterValue: state.SelectedValuesFilterValue, sortColumnValues: sortSelectedColumnValues, SortOrder: state.SelectedValuesSortOrder, handleChangeFilterValue: handleChangeSelectedValuesFilterValue }));
+    return (React.createElement(Flex, { alignItems: "stretch", flexDirection: "row", className: "ab-DualListBoxEditor", style: Object.assign(Object.assign({}, props.style), { maxHeight: '100%', width: '100%' }) },
+        React.createElement(Panel, { header: props.HeaderAvailable, className: "ab-DualListBoxEditor__source", bodyProps: { padding: 0 }, marginRight: 2, style: { flex: '4 0 0%' }, bodyScroll: true },
             headerFirstListBox,
-            React.createElement(SelectableList_1.default, { getItemId: getAvailableItemId, onSelectedChange: onAvailableListSelectionChange },
-                React.createElement(ListGroup_1.default, { className: "ab-AvailableDropZone", style: listGroupStyle, onDragEnter: (event) => DragEnterAvailable(event), onDragOver: (event) => DragOverAvailable(event), onDragLeave: (event) => DragLeaveAvailable(event) }, availableElements))),
-        React.createElement(rebass_1.Flex, { flexDirection: "column", justifyContent: "center", className: "ab-DualListBoxEditor__action-buttons" },
+            React.createElement(SelectableList, { getItemId: getAvailableItemId, onSelectedChange: onAvailableListSelectionChange },
+                React.createElement(ListGroup, { className: "ab-AvailableDropZone", style: listGroupStyle, onDragEnter: (event) => DragEnterAvailable(event), onDragOver: (event) => DragOverAvailable(event), onDragLeave: (event) => DragLeaveAvailable(event) }, availableElements))),
+        React.createElement(Flex, { flexDirection: "column", justifyContent: "center", className: "ab-DualListBoxEditor__action-buttons" },
             React.createElement(ButtonDirection, { "data-name": "add-all", marginBottom: 2, icon: "fast-forward", iconPosition: "end", disabled: state.AvailableValues.length == 0, onClick: () => AddAll() }, "Add All"),
             React.createElement(ButtonDirection, { "data-name": "add", iconPosition: "end", icon: 'arrow-right', marginBottom: 3, disabled: state.UiSelectedAvailableValues.length == 0, onClick: () => Add() }, "Add"),
             React.createElement(ButtonDirection, { "data-name": "remove", icon: 'arrow-left', marginBottom: 2, iconPosition: "start", disabled: state.UiSelectedSelectedValues.length == 0, onClick: () => Remove() }, "Remove"),
             React.createElement(ButtonDirection, { "data-name": "remove-all", marginBottom: 2, icon: "fast-backward", iconPosition: "start", disabled: state.SelectedValues.length == 0, onClick: () => RemoveAll() }, "Remove All")),
-        React.createElement(Panel_1.default, { header: props.HeaderSelected, className: "ab-DualListBoxEditor__destination", bodyScroll: true, bodyProps: {
+        React.createElement(Panel, { header: props.HeaderSelected, className: "ab-DualListBoxEditor__destination", bodyScroll: true, bodyProps: {
                 padding: 0,
             }, style: { flex: '4 0 0%' }, marginLeft: 2, marginRight: 2 },
             headerSecondListBox,
-            React.createElement(SelectableList_1.default, { getItemId: getSelectedItemId, onSelectedChange: onSelectedListSelectionChange },
-                React.createElement(ListGroup_1.default, { style: listGroupStyle, className: "ab-SelectedDropZone", onDragEnter: (event) => DragEnterSelected(event), onDragOver: (event) => DragOverSelected(event), onDragLeave: (event) => DragLeaveSelected(event) }, selectedElements))),
-        React.createElement(rebass_1.Flex, { flexDirection: "column", justifyContent: "center", className: "ab-DualListBoxEditor__order-buttons" },
+            React.createElement(SelectableList, { getItemId: getSelectedItemId, onSelectedChange: onSelectedListSelectionChange },
+                React.createElement(ListGroup, { style: listGroupStyle, className: "ab-SelectedDropZone", onDragEnter: (event) => DragEnterSelected(event), onDragOver: (event) => DragOverSelected(event), onDragLeave: (event) => DragLeaveSelected(event) }, selectedElements))),
+        React.createElement(Flex, { flexDirection: "column", justifyContent: "center", className: "ab-DualListBoxEditor__order-buttons" },
             React.createElement(ButtonDirection, { "data-name": "top", marginBottom: 2, iconPosition: "start", icon: "triangle-up", disabled: !canGoTopOrUp(), onClick: () => Top() }, "Top"),
             React.createElement(ButtonDirection, { "data-name": "up", marginBottom: 2, iconPosition: "start", icon: "arrow-up", disabled: !canGoTopOrUp(), onClick: () => Up() }, "Up"),
             React.createElement(ButtonDirection, { "data-name": "down", marginBottom: 2, icon: "arrow-down", iconPosition: "start", disabled: !canGoDownOrBottom(), onClick: () => Down() }, "Down"),
             React.createElement(ButtonDirection, { "data-name": "bottom", marginBottom: 2, icon: "triangle-down", iconPosition: "start", disabled: !canGoDownOrBottom(), onClick: () => Bottom() }, "Bottom"))));
 };
-exports.DualListBoxEditor = DualListBoxEditor;

package/src/View/Components/ListBox/ListBoxFilterSortComponent.js

@@ -1,24 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListBoxFilterSortComponent = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Enums_1 = require("../../../PredefinedConfig/Common/Enums");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
-class ListBoxFilterSortComponent extends React.Component {
+import * as React from 'react';
+import { SortOrder } from '../../../PredefinedConfig/Common/Enums';
+import SimpleButton from '../../../components/SimpleButton';
+import Input from '../../../components/Input';
+import FieldWrap from '../../../components/FieldWrap';
+export class ListBoxFilterSortComponent extends React.Component {
     render() {
-        return (React.createElement(FieldWrap_1.default, { className: "ab-SingleListBoxFilter", style: {
+        return (React.createElement(FieldWrap, { className: "ab-SingleListBoxFilter", style: {
                 borderTop: 0,
                 borderRight: 0,
                 borderLeft: 0,
                 borderRadius: 0,
                 padding: 2 /* here just for the focus box-shadow to be visible*/,
             } },
-            React.createElement(Input_1.default, { value: this.props.FilterValue, placeholder: "Search", onChange: (e) => this.handleChangeFilterValue(e), style: { width: 0 } }),
-            React.createElement(SimpleButton_1.default, { disabled: !this.props.FilterValue, onClick: () => this.clearFilter(), icon: "close", variant: "text" }),
-            this.props.SortOrder == Enums_1.SortOrder.Asc ? (React.createElement(SimpleButton_1.default, { onClick: () => this.props.sortColumnValues(), icon: "sort-asc", variant: "text" })) : (React.createElement(SimpleButton_1.default, { onClick: () => this.props.sortColumnValues(), icon: "sort-desc", variant: "text" }))));
+            React.createElement(Input, { value: this.props.FilterValue, placeholder: "Search", onChange: (e) => this.handleChangeFilterValue(e), style: { width: 0 } }),
+            React.createElement(SimpleButton, { disabled: !this.props.FilterValue, onClick: () => this.clearFilter(), icon: "close", variant: "text" }),
+            this.props.SortOrder == SortOrder.Asc ? (React.createElement(SimpleButton, { onClick: () => this.props.sortColumnValues(), icon: "sort-asc", variant: "text" })) : (React.createElement(SimpleButton, { onClick: () => this.props.sortColumnValues(), icon: "sort-desc", variant: "text" }))));
     }
     handleChangeFilterValue(x) {
         let e = x.target;
@@ -28,4 +24,3 @@ class ListBoxFilterSortComponent extends React.Component {
         this.props.handleChangeFilterValue('');
     }
 }
-exports.ListBoxFilterSortComponent = ListBoxFilterSortComponent;

package/src/View/Components/ModuleProfile.js

@@ -1,18 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModuleProfile = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+import * as React from 'react';
 /// <reference path="../../typings/.d.ts" />
-const icons_1 = require("../../components/icons");
-class ModuleProfile extends React.Component {
+import { Icon } from '../../components/icons';
+export class ModuleProfile extends React.Component {
     render() {
         return (React.createElement("div", null,
-            React.createElement(icons_1.Icon, { name: this.props.moduleInfo.Glyph, style: {
+            React.createElement(Icon, { name: this.props.moduleInfo.Glyph, style: {
                     fill: 'var(--ab-color-text-on-primary)',
                 } }),
             ' ',
             this.props.moduleInfo.FriendlyName));
     }
 }
-exports.ModuleProfile = ModuleProfile;

package/src/View/Components/ModuleSummary/ModuleDetail.js

@@ -1,19 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModuleDetail = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const EntityListActionButtons_1 = require("../Buttons/EntityListActionButtons");
-const SummaryRowItem_1 = require("./SummaryRowItem");
-class ModuleDetail extends React.Component {
+import * as React from 'react';
+import { EntityListActionButtons } from '../Buttons/EntityListActionButtons';
+import { SummaryRowItem } from './SummaryRowItem';
+export class ModuleDetail extends React.Component {
     render() {
         let summaryItems = [];
         this.props.showBold
             ? summaryItems.push(React.createElement("b", null, this.props.item1))
             : summaryItems.push(React.createElement("i", null, this.props.item1));
         summaryItems.push(React.createElement("i", null, this.props.item2));
-        summaryItems.push(React.createElement(EntityListActionButtons_1.EntityListActionButtons, { justifyContent: "start", confirmDeleteAction: this.props.onDelete, showEdit: this.props.showEdit, editClick: () => this.props.onEdit(), shareClick: (config) => this.props.onShare(config), showShare: this.props.showShare, entityType: this.props.moduleInfo.FriendlyName, accessLevel: this.props.accessLevel }));
-        return React.createElement(SummaryRowItem_1.SummaryRowItem, { SummaryItems: summaryItems });
+        summaryItems.push(React.createElement(EntityListActionButtons, { justifyContent: "start", confirmDeleteAction: this.props.onDelete, showEdit: this.props.showEdit, editClick: () => this.props.onEdit(), shareClick: (config) => this.props.onShare(config), showShare: this.props.showShare, entityType: this.props.moduleInfo.FriendlyName, accessLevel: this.props.accessLevel }));
+        return React.createElement(SummaryRowItem, { SummaryItems: summaryItems });
     }
 }
-exports.ModuleDetail = ModuleDetail;

package/src/View/Components/ModuleSummary/ModuleHeader.js

@@ -1,20 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModuleHeader = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+import * as React from 'react';
 /// <reference path="../../typings/.d.ts" />
-const ButtonNew_1 = require("../Buttons/ButtonNew");
-const SummaryRowItem_1 = require("./SummaryRowItem");
-const ModuleProfile_1 = require("../ModuleProfile");
-class ModuleHeader extends React.Component {
+import { ButtonNew } from '../Buttons/ButtonNew';
+import { SummaryRowItem } from './SummaryRowItem';
+import { ModuleProfile } from '../ModuleProfile';
+export class ModuleHeader extends React.Component {
     render() {
         let summaryItems = [];
-        let newButton = this.props.newButtonDisabled ? null : (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => this.props.onNew(), tooltip: 'Create ' + this.props.newButtonTooltip, accessLevel: this.props.accessLevel }));
-        summaryItems.push(React.createElement("b", null, React.createElement(ModuleProfile_1.ModuleProfile, { moduleInfo: this.props.moduleInfo })));
+        let newButton = this.props.newButtonDisabled ? null : (React.createElement(ButtonNew, { onClick: () => this.props.onNew(), tooltip: 'Create ' + this.props.newButtonTooltip, accessLevel: this.props.accessLevel }));
+        summaryItems.push(React.createElement("b", null, React.createElement(ModuleProfile, { moduleInfo: this.props.moduleInfo })));
         summaryItems.push(this.props.moduleSummary);
         summaryItems.push(newButton);
-        return React.createElement(SummaryRowItem_1.SummaryRowItem, { SummaryItems: summaryItems });
+        return React.createElement(SummaryRowItem, { SummaryItems: summaryItems });
     }
 }
-exports.ModuleHeader = ModuleHeader;

package/src/View/Components/ModuleSummary/SummaryRowItem.js

@@ -1,17 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SummaryRowItem = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+import * as React from 'react';
 /// <reference path="../../typings/.d.ts" />
-const AdaptableObjectRow_1 = require("../AdaptableObjectRow");
-class SummaryRowItem extends React.Component {
+import { AdaptableObjectRow } from '../AdaptableObjectRow';
+export class SummaryRowItem extends React.Component {
     render() {
         let colItems = [];
         colItems.push({ Size: 3, Content: this.props.SummaryItems[0] });
         colItems.push({ Size: 7, Content: this.props.SummaryItems[1] });
         colItems.push({ Size: 2, Content: this.props.SummaryItems[2] });
-        return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: colItems });
+        return React.createElement(AdaptableObjectRow, { colItems: colItems });
     }
 }
-exports.SummaryRowItem = SummaryRowItem;

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

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModuleValueSelector = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const ValueSelector_1 = require("../ValueSelector");
-const AdaptableContext_1 = require("../../AdaptableContext");
-const react_1 = require("react");
-const sortWithOrder_1 = require("../../../Utilities/sortWithOrder");
-const ModuleValueSelector = (props) => {
-    const { options, value, onChange, selectionBoxPosition = 'top' } = props, valueSelectorProps = tslib_1.__rest(props, ["options", "value", "onChange", "selectionBoxPosition"]);
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
-    const selectedModulesMap = (0, react_1.useMemo)(() => {
+import { __rest } from "tslib";
+import * as React from 'react';
+import { ValueSelector } from '../ValueSelector';
+import { useAdaptable } from '../../AdaptableContext';
+import { useMemo, useCallback } from 'react';
+import { sortWithOrderArray } from '../../../Utilities/sortWithOrder';
+export const ModuleValueSelector = (props) => {
+    const { options, value, onChange, selectionBoxPosition = 'top' } = props, valueSelectorProps = __rest(props, ["options", "value", "onChange", "selectionBoxPosition"]);
+    const { api } = useAdaptable();
+    const selectedModulesMap = useMemo(() => {
         if (!value || !value.length) {
             return new Map();
         }
@@ -19,17 +16,16 @@ const ModuleValueSelector = (props) => {
             return acc;
         }, new Map());
     }, [value]);
-    const allowReorder = (0, react_1.useCallback)((option) => {
+    const allowReorder = useCallback((option) => {
         return selectedModulesMap.has(option);
     }, [selectedModulesMap]);
-    const moduleLabelMap = (0, react_1.useMemo)(() => {
+    const moduleLabelMap = useMemo(() => {
         const labelMap = new Map();
         options.forEach((module) => { var _a; return labelMap.set(module, (_a = api.internalApi.getModuleFriendlyName(module)) !== null && _a !== void 0 ? _a : module); });
         return labelMap;
     }, [options]);
-    const sortedOptions = (0, react_1.useMemo)(() => {
-        return (0, sortWithOrder_1.sortWithOrderArray)(options, value, { sortUnorderedItems: true });
+    const sortedOptions = useMemo(() => {
+        return sortWithOrderArray(options, value, { sortUnorderedItems: true });
     }, [allowReorder, options, value]);
-    return (React.createElement(ValueSelector_1.ValueSelector, Object.assign({}, valueSelectorProps, { options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isOptionDisabled: props.isOptionDisabled, disabled: props.disabled })));
+    return (React.createElement(ValueSelector, Object.assign({}, valueSelectorProps, { options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isOptionDisabled: props.isOptionDisabled, disabled: props.disabled })));
 };
-exports.ModuleValueSelector = ModuleValueSelector;

package/src/View/Components/NewScopeComponent.js

@@ -1,19 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewScopeComponent = exports.renderScopeSummary = exports.isScopeValid = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const rebass_1 = require("rebass");
-const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
-const CheckBox_1 = require("../../components/CheckBox");
-const Tabs_1 = require("../../components/Tabs");
-const OnePageAdaptableWizard_1 = require("../Wizard/OnePageAdaptableWizard");
-const ColumnSelector_1 = require("./ColumnSelector");
-const AdaptableFormControlTextClear_1 = require("./Forms/AdaptableFormControlTextClear");
-const AdaptableContext_1 = require("../AdaptableContext");
-const ValueSelector_1 = require("./ValueSelector");
-const isScopeValid = ({ Scope }) => {
+import * as React from 'react';
+import { useState } from 'react';
+import { Box, Flex, Text } from 'rebass';
+import Radio from '../../components/Radio';
+import { CheckBox } from '../../components/CheckBox';
+import { Tabs } from '../../components/Tabs';
+import { SummaryText } from '../Wizard/OnePageAdaptableWizard';
+import { NewColumnSelector } from './ColumnSelector';
+import { AdaptableFormControlTextClear } from './Forms/AdaptableFormControlTextClear';
+import { useAdaptable } from '../AdaptableContext';
+import { ValueOptionsTags } from './ValueSelector';
+export const isScopeValid = ({ Scope }) => {
     const result = [];
     if (!Scope) {
         return 'No scope specified or scope is empty';
@@ -26,7 +22,6 @@ const isScopeValid = ({ Scope }) => {
     }
     return result.length ? result.join(', ') : true;
 };
-exports.isScopeValid = isScopeValid;
 const DATA_TYPES_MAP = {
     Date: {
         label: 'Date',
@@ -45,26 +40,25 @@ const DATA_TYPES_MAP = {
         value: 'Boolean',
     },
 };
-const renderScopeSummary = (scope, labels) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+export const renderScopeSummary = (scope, labels) => {
+    const adaptable = useAdaptable();
     const scopeApi = adaptable.api.scopeApi;
     const columnsInScope = scopeApi.getColumnsForScope(scope);
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Box, null,
-            React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: 0 }, scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null)),
-        React.createElement(rebass_1.Box, { style: { overflow: 'hidden' } }, 'ColumnIds' in scope ? (React.createElement(React.Fragment, null,
-            React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: columnsInScope.length ? 2 : 0 }, labels.scopeColumns),
-            columnsInScope.length ? (React.createElement(ValueSelector_1.ValueOptionsTags, { options: columnsInScope, value: columnsInScope.map((c) => c.columnId), toLabel: (c) => c.friendlyName, allowWrap: true, readOnly: true, renderLabel: (c) => React.createElement(OnePageAdaptableWizard_1.SummaryText, { mb: 0 }, c), toIdentifier: (c) => c.columnId })) : null)) : null),
-        React.createElement(rebass_1.Box, null, 'DataTypes' in scope ? (React.createElement(React.Fragment, null,
-            React.createElement(rebass_1.Text, { fontSize: 2, mb: 2 }, labels.scopeDataTypes),
-            React.createElement(ValueSelector_1.ValueOptionsTags, { readOnly: true, options: scope.DataTypes, value: scope.DataTypes, toLabel: (c) => c, allowWrap: true, renderLabel: (c) => React.createElement(rebass_1.Text, { fontSize: 2 }, `DataType: ${c}`), toIdentifier: (c) => c }))) : null)));
+        React.createElement(Box, null,
+            React.createElement(SummaryText, { mb: 0 }, scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null)),
+        React.createElement(Box, { style: { overflow: 'hidden' } }, 'ColumnIds' in scope ? (React.createElement(React.Fragment, null,
+            React.createElement(SummaryText, { mb: columnsInScope.length ? 2 : 0 }, labels.scopeColumns),
+            columnsInScope.length ? (React.createElement(ValueOptionsTags, { options: columnsInScope, value: columnsInScope.map((c) => c.columnId), toLabel: (c) => c.friendlyName, allowWrap: true, readOnly: true, renderLabel: (c) => React.createElement(SummaryText, { mb: 0 }, c), toIdentifier: (c) => c.columnId })) : null)) : null),
+        React.createElement(Box, null, 'DataTypes' in scope ? (React.createElement(React.Fragment, null,
+            React.createElement(Text, { fontSize: 2, mb: 2 }, labels.scopeDataTypes),
+            React.createElement(ValueOptionsTags, { readOnly: true, options: scope.DataTypes, value: scope.DataTypes, toLabel: (c) => c, allowWrap: true, renderLabel: (c) => React.createElement(Text, { fontSize: 2 }, `DataType: ${c}`), toIdentifier: (c) => c }))) : null)));
 };
-exports.renderScopeSummary = renderScopeSummary;
 const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
-const NewScopeComponent = (props) => {
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
+export const NewScopeComponent = (props) => {
+    const { api } = useAdaptable();
     const { scopeApi, columnApi } = api;
-    const [columnsSearchText, setColumnsSearchText] = (0, react_1.useState)('');
+    const [columnsSearchText, setColumnsSearchText] = useState('');
     const scopeColumns = React.useMemo(() => {
         const allColumns = props.scopeColumns || columnApi.getColumns();
         if (typeof props.isColumnAvailable === 'function') {
@@ -134,25 +128,24 @@ const NewScopeComponent = (props) => {
     if (Array.isArray(props.availableDataTypes)) {
         dataTypeOptions = props.availableDataTypes.map((dataType) => DATA_TYPES_MAP[dataType]);
     }
-    return (React.createElement(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
-        props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Tab, { value: "Row" },
-            React.createElement(Radio_1.default, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
-        !props.disableColumns && (React.createElement(Tabs_1.Tabs.Tab, { value: "Column" },
-            React.createElement(Radio_1.default, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns"))),
-        !props.disableDataTypes && (React.createElement(Tabs_1.Tabs.Tab, { value: "DataType" },
-            React.createElement(Radio_1.default, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types"))),
-        props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
-            React.createElement(rebass_1.Text, { padding: 2, pl: 0, fontSize: 2 }, props.descriptions.rowScope))),
-        !props.disableColumns && (React.createElement(Tabs_1.Tabs.Content, { value: "Column", style: { flex: 1, overflow: 'auto' }, "data-name": "column-scope", padding: 0 },
-            React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", padding: 2 },
-                React.createElement(rebass_1.Text, { fontSize: 2 }, props.descriptions.columnScope),
-                React.createElement(rebass_1.Flex, { flex: 3 }),
-                React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
-            React.createElement(rebass_1.Flex, { paddingLeft: 2, flex: 1, style: { overflow: 'hidden' } },
-                React.createElement(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope), onChange: onColumnsSelectedChanged })))),
-        !props.disableDataTypes && (React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" },
-            React.createElement(rebass_1.Box, null,
-                props.descriptions.dataTypeScope && (React.createElement(rebass_1.Text, { p: 2, pl: 0, mb: 2, fontSize: 2 }, props.descriptions.dataTypeScope)),
-                React.createElement(rebass_1.Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label)))))))));
+    return (React.createElement(Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: Object.assign({ height: '100%' }, props.style), onValueChange: onScopeSelectChanged },
+        props.hideWholeRow ? null : (React.createElement(Tabs.Tab, { value: "Row" },
+            React.createElement(Radio, { margin: 0, checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
+        !props.disableColumns && (React.createElement(Tabs.Tab, { value: "Column" },
+            React.createElement(Radio, { margin: 0, value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns"))),
+        !props.disableDataTypes && (React.createElement(Tabs.Tab, { value: "DataType" },
+            React.createElement(Radio, { margin: 0, value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types"))),
+        props.hideWholeRow ? null : (React.createElement(Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
+            React.createElement(Text, { padding: 2, pl: 0, fontSize: 2 }, props.descriptions.rowScope))),
+        !props.disableColumns && (React.createElement(Tabs.Content, { value: "Column", style: { flex: 1, overflow: 'auto' }, "data-name": "column-scope", padding: 0 },
+            React.createElement(Flex, { flexDirection: "row", alignItems: "center", padding: 2 },
+                React.createElement(Text, { fontSize: 2 }, props.descriptions.columnScope),
+                React.createElement(Flex, { flex: 3 }),
+                React.createElement(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
+            React.createElement(Flex, { paddingLeft: 2, flex: 1, style: { overflow: 'hidden' } },
+                React.createElement(NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope), onChange: onColumnsSelectedChanged })))),
+        !props.disableDataTypes && (React.createElement(Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" },
+            React.createElement(Box, null,
+                props.descriptions.dataTypeScope && (React.createElement(Text, { p: 2, pl: 0, mb: 2, fontSize: 2 }, props.descriptions.dataTypeScope)),
+                React.createElement(Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label)))))))));
 };
-exports.NewScopeComponent = NewScopeComponent;

package/src/View/Components/Panels/FilterFormPanel.d.ts

@@ -7,7 +7,7 @@ export interface FilterFormPanelProps extends PanelProps {
     closeButton?: React.ReactElement<any>;
     ColumnMenuTab: ColumnMenuTab;
     ColumnMenuTabChanged: (e: any) => void;
-    onFilterApplied: () => void;
+    onColumnFilterApplied: () => void;
     IsAlwaysFilter: boolean;
     showCloseButton: boolean;
     useAgGridStyle: boolean;