@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.1

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

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuickFilterValues = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const date_fns_1 = require("date-fns");
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../components/OverlayTrigger"));
-const rebass_1 = require("rebass");
-const ListBoxFilterForm_1 = require("./ListBoxFilterForm");
-const QuickFilterValues = (props) => {
+import * as React from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
+import SimpleButton from '../../../components/SimpleButton';
+import { isSameDay } from 'date-fns';
+import OverlayTrigger from '../../../components/OverlayTrigger';
+import { Flex } from 'rebass';
+import { ListBoxFilterForm } from './ListBoxFilterForm';
+export const QuickFilterValues = (props) => {
     const { api } = props;
-    const currentOverlayVisible = (0, react_1.useRef)(false);
+    const currentOverlayVisible = useRef(false);
     const valuesDropdownRef = React.useRef(null);
     const [quickFilterValues, setQuickFilterValues] = React.useState({ values: [], suppressClientSideFilter: false, dataLoadIsComplete: false });
     const [isDistinctColumnValuesLoading, setIsDistinctColumnValuesLoading] = React.useState(false);
@@ -42,7 +38,7 @@ const QuickFilterValues = (props) => {
             setTransientColumnFilter(columnFilter);
         }
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (valuesLoadTrigger.counter === 0) {
             // skip the first render
             return;
@@ -63,7 +59,7 @@ const QuickFilterValues = (props) => {
             ignore = true;
         };
     }, [valuesLoadTrigger]);
-    const onVisibleChange = (0, react_1.useCallback)((visible) => {
+    const onVisibleChange = useCallback((visible) => {
         if (visible) {
             setValuesLoadTrigger(Object.assign(Object.assign({}, valuesLoadTrigger), { counter: valuesLoadTrigger.counter + 1 }));
         }
@@ -77,9 +73,9 @@ const QuickFilterValues = (props) => {
         }
     }, [valuesLoadTrigger, quickFilterValues]);
     const loadedDataIsEmpty = quickFilterValues.dataLoadIsComplete &&
-        ArrayExtensions_1.default.IsNullOrEmptyOrContainsSingleEmptyValue(quickFilterValues.values);
+        ArrayExtensions.IsNullOrEmptyOrContainsSingleEmptyValue(quickFilterValues.values);
     const renderNoValuesDropdown = () => {
-        return (React.createElement(SimpleButton_1.default, { disabled: true, style: {
+        return (React.createElement(SimpleButton, { disabled: true, style: {
                 flex: 1,
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
@@ -89,7 +85,7 @@ const QuickFilterValues = (props) => {
                 borderColor: 'var(--ab-color-primarydark)',
             } }, 'No Column Values'));
     };
-    if (ArrayExtensions_1.default.IsNullOrEmpty(props.columnFilter.Predicate.Inputs) && loadedDataIsEmpty) {
+    if (ArrayExtensions.IsNullOrEmpty(props.columnFilter.Predicate.Inputs) && loadedDataIsEmpty) {
         return renderNoValuesDropdown();
     }
     const handleFilterChange = (filterText) => {
@@ -108,7 +104,7 @@ const QuickFilterValues = (props) => {
             var _a, _b;
             const label = (_b = (_a = quickFilterValues.values) === null || _a === void 0 ? void 0 : _a.find((distinctValue) => {
                 if (input instanceof Date) {
-                    return (0, date_fns_1.isSameDay)(input, distinctValue.value);
+                    return isSameDay(input, distinctValue.value);
                 }
                 return distinctValue.value === input;
             })) === null || _b === void 0 ? void 0 : _b.label;
@@ -126,7 +122,7 @@ const QuickFilterValues = (props) => {
         }
         return null;
     };
-    return (React.createElement(OverlayTrigger_1.default, { showEvent: showEvent, 
+    return (React.createElement(OverlayTrigger, { showEvent: showEvent, 
         // cannot hide on blur, because the form input receives the input when this is opened
         hideEvent: "mouseleave", hideDelay: 50, ref: (api) => {
             valuesDropdownRef.current = api;
@@ -139,7 +135,7 @@ const QuickFilterValues = (props) => {
             }
         }, render: ({ targetWidth }) => {
             var _a;
-            return (React.createElement(rebass_1.Flex, { onMouseEnter: () => {
+            return (React.createElement(Flex, { onMouseEnter: () => {
                     if (showEvent === 'click') {
                         // For showEvent=mousenter this is not needed.
                         // When mouseenter is triggered on the overlay, onShowFn is called, the overlay is no longer hidden.
@@ -158,16 +154,16 @@ const QuickFilterValues = (props) => {
                     zIndex: 1000,
                     width: getPopoverWidth(targetWidth),
                 } },
-                React.createElement(rebass_1.Flex, { m: 2 },
-                    React.createElement(SimpleButton_1.default, { onClick: () => clearColumnFilter() }, "Clear Filter"),
-                    ((_a = api.optionsApi.getColumnFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) == false && (React.createElement(SimpleButton_1.default, { ml: 2, onClick: () => {
+                React.createElement(Flex, { m: 2 },
+                    React.createElement(SimpleButton, { onClick: () => clearColumnFilter() }, "Clear Filter"),
+                    ((_a = api.optionsApi.getColumnFilterOptions()) === null || _a === void 0 ? void 0 : _a.autoApplyFilter) == false && (React.createElement(SimpleButton, { ml: 2, onClick: () => {
                             if (transientColumnFilter) {
                                 props.updateColumnFilter(transientColumnFilter);
                             }
                         } }, "Apply Filter"))),
-                React.createElement(ListBoxFilterForm_1.ListBoxFilterForm, { disabled: props.isFilterDisabled, suppressClientSideFilter: quickFilterValues.suppressClientSideFilter, isLoading: isDistinctColumnValuesLoading, onFilterChange: handleFilterChange, currentColumn: props.currentColumn, columns: [], columnDistinctValues: quickFilterValues.values, dataType: props.currentColumn.dataType, uiSelectedColumnValues: props.columnFilter.Predicate.Inputs.filter((input) => input !== ''), useAgGridStyle: true, onColumnValueSelectedChange: (list) => onColumnValueSelectedChange(list) })));
+                React.createElement(ListBoxFilterForm, { disabled: props.isFilterDisabled, suppressClientSideFilter: quickFilterValues.suppressClientSideFilter, isLoading: isDistinctColumnValuesLoading, onFilterChange: handleFilterChange, currentColumn: props.currentColumn, columns: [], columnDistinctValues: quickFilterValues.values, dataType: props.currentColumn.dataType, uiSelectedColumnValues: props.columnFilter.Predicate.Inputs.filter((input) => input !== ''), useAgGridStyle: true, onColumnValueSelectedChange: (list) => onColumnValueSelectedChange(list) })));
         } },
-        React.createElement(SimpleButton_1.default, { "data-name": 'Select Values', style: {
+        React.createElement(SimpleButton, { "data-name": 'Select Values', style: {
                 flex: 1,
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
@@ -177,4 +173,3 @@ const QuickFilterValues = (props) => {
                 borderColor: 'var(--ab-color-primarydark)',
             }, disabled: props.isFilterDisabled || loadedDataIsEmpty }, selectedValues)));
 };
-exports.QuickFilterValues = QuickFilterValues;

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

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Waiting = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const refresh_1 = tslib_1.__importDefault(require("../../../components/icons/refresh"));
-class Waiting extends React.Component {
+import { __rest } from "tslib";
+import * as React from 'react';
+import { Flex } from 'rebass';
+import IconRefresh from '../../../components/icons/refresh';
+export class Waiting extends React.Component {
     render() {
-        const _a = this.props, { WaitingMessage } = _a, props = tslib_1.__rest(_a, ["WaitingMessage"]);
-        return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: "column", marginTop: 2, marginBottom: 2 }, props),
-            React.createElement(rebass_1.Flex, { flexDirection: "row", justifyContent: "center" },
-                React.createElement(refresh_1.default, null)),
-            React.createElement(rebass_1.Flex, { flexDirection: "row", justifyContent: "center" },
+        const _a = this.props, { WaitingMessage } = _a, props = __rest(_a, ["WaitingMessage"]);
+        return (React.createElement(Flex, Object.assign({ flexDirection: "column", marginTop: 2, marginBottom: 2 }, props),
+            React.createElement(Flex, { flexDirection: "row", justifyContent: "center" },
+                React.createElement(IconRefresh, null)),
+            React.createElement(Flex, { flexDirection: "row", justifyContent: "center" },
                 React.createElement("h5", null, WaitingMessage))));
     }
 }
-exports.Waiting = Waiting;

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

@@ -1,9 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDefaultColumnFilterPredicate = void 0;
-const getDefaultColumnFilterPredicate = (column, defaultColumnFilter) => {
+export const getDefaultColumnFilterPredicate = (column, defaultColumnFilter) => {
     return typeof defaultColumnFilter === 'function'
         ? defaultColumnFilter(column)
         : defaultColumnFilter;
 };
-exports.getDefaultColumnFilterPredicate = getDefaultColumnFilterPredicate;

package/src/View/Components/Forms/AdaptableFormControlTextClear.js

@@ -1,18 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableFormControlTextClear = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
-const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
+import * as React from 'react';
+import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
+import FieldWrap from '../../../components/FieldWrap';
+import SimpleButton from '../../../components/SimpleButton';
+import Input from '../../../components/Input';
+export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
-    return (React.createElement(FieldWrap_1.default, { onClick: props.onClick, className: props.className, style: Object.assign({ background: 'var(--ab-color-defaultbackground)', overflow: 'visible', width: '100%' }, props.style) },
-        React.createElement(Input_1.default, { autoFocus: props.autoFocus, style: props.inputStyle, ref: (r) => {
+    return (React.createElement(FieldWrap, { onClick: props.onClick, className: props.className, style: Object.assign({ background: 'var(--ab-color-defaultbackground)', overflow: 'visible', width: '100%' }, props.style) },
+        React.createElement(Input, { autoFocus: props.autoFocus, style: props.inputStyle, ref: (r) => {
                 inputRef.current = r;
                 if (!ref) {
                     return;
@@ -24,7 +20,7 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                     ref.current = r;
                 }
             }, type: "text", placeholder: props.placeholder, value: props.value, onChange: (x) => props.OnTextChange(x.target.value) }),
-        React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tooltip: closeButtonTooltip, px: 0, py: 0, marginRight: 1, onClick: () => {
+        React.createElement(SimpleButton, { variant: "text", icon: "close", tooltip: closeButtonTooltip, px: 0, py: 0, marginRight: 1, onClick: () => {
                 props.OnTextChange('');
                 const input = inputRef.current;
                 if (!focusOnClear) {
@@ -35,5 +31,5 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                         input.focus();
                     }
                 });
-            }, disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(props.value.toString()) })));
+            }, disabled: StringExtensions.IsNullOrEmpty(props.value.toString()) })));
 });

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;