@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.1

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

@@ -1,21 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ValueOptionsTags = exports.ValueSelector = 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 react_beautiful_dnd_1 = require("react-beautiful-dnd");
-const CheckBox_1 = require("../../../components/CheckBox");
-const icons_1 = require("../../../components/icons");
-const EllipsisContainer_1 = require("../../../components/EllipsisContainer");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const reorder_1 = require("../../../Utilities/reorder");
-const Tag_1 = require("../../../components/Tag");
-const AdaptableFormControlTextClear_1 = require("../Forms/AdaptableFormControlTextClear");
+import * as React from 'react';
+import { useState, useMemo, useCallback } from 'react';
+import { Box, Flex, Text } from 'rebass';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import { CheckBox } from '../../../components/CheckBox';
+import { Icon } from '../../../components/icons';
+import { EllipsisContainer } from '../../../components/EllipsisContainer';
+import SimpleButton from '../../../components/SimpleButton';
+import Radio from '../../../components/Radio';
+import { reorder } from '../../../Utilities/reorder';
+import { Tag } from '../../../components/Tag';
+import { AdaptableFormControlTextClear } from '../Forms/AdaptableFormControlTextClear';
 function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
-    const optionsMap = (0, react_1.useMemo)(() => {
+    const optionsMap = useMemo(() => {
         if (selectedMap) {
             return;
         }
@@ -25,7 +21,7 @@ function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
         });
         return map;
     }, [options, selectedMap]);
-    const result = (0, react_1.useMemo)(() => {
+    const result = useMemo(() => {
         if (selectedMap) {
             return selectedMap;
         }
@@ -38,14 +34,14 @@ function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     }, [optionsMap, selectedMap, value]);
     return { selectedMap: result, optionsMap };
 }
-function ValueSelector(props) {
+export function ValueSelector(props) {
     var _a;
     const { options, value, filter, onChange, allowReorder, singleSelect, toLabel, toListLabel, toIdentifier, noSelectionLabel, clearSelectionLabel, showSelectedOnlyLabel, showFilterInput, xSelectedLabel, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, isOptionDisabled, disabled, } = props;
     const [searchInputValue, setSearchInputValue] = React.useState('');
     const baseClassName = 'ab-ValueSelector';
     const preparedToLabel = toListLabel !== null && toListLabel !== void 0 ? toListLabel : toLabel;
-    const [selectedOnly, doSetSelectedOnly] = (0, react_1.useState)(false);
-    const setSelectedOnly = (0, react_1.useCallback)((selectedOnly) => {
+    const [selectedOnly, doSetSelectedOnly] = useState(false);
+    const setSelectedOnly = useCallback((selectedOnly) => {
         doSetSelectedOnly(selectedOnly);
         onShowSelectedOnlyChange === null || onShowSelectedOnlyChange === void 0 ? void 0 : onShowSelectedOnlyChange(selectedOnly);
     }, [onShowSelectedOnlyChange]);
@@ -54,7 +50,7 @@ function ValueSelector(props) {
         toIdentifier,
         value,
     });
-    const notifyChange = (0, react_1.useCallback)(() => {
+    const notifyChange = useCallback(() => {
         const newSelection = [...selectedMap.keys()];
         if (!newSelection.length && selectedOnly) {
             setSelectedOnly(false);
@@ -66,11 +62,11 @@ function ValueSelector(props) {
         const label = !allowReorder ? preparedToLabel(option) : null;
         const reorderable = typeof allowReorder === 'function' ? allowReorder(option) : allowReorder;
         const renderNode = (props, dragHandleProps) => {
-            return (React.createElement(rebass_1.Flex, Object.assign({ className: `${baseClassName}__option`, alignItems: "center", mt: index ? 1 : 0, key: identifier, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option" }, props),
-                React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", alignItems: "center" },
-                    reorderable ? (React.createElement(rebass_1.Box, Object.assign({ mr: 3 }, dragHandleProps),
-                        React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
-                    singleSelect ? (React.createElement(Radio_1.default, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
+            return (React.createElement(Flex, Object.assign({ className: `${baseClassName}__option`, alignItems: "center", mt: index ? 1 : 0, key: identifier, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option" }, props),
+                React.createElement(Flex, { flex: 1, flexDirection: "row", alignItems: "center" },
+                    reorderable ? (React.createElement(Box, Object.assign({ mr: 3 }, dragHandleProps),
+                        React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
+                    singleSelect ? (React.createElement(Radio, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
                             if (checked) {
                                 selectedMap.clear();
                                 selectedMap.set(identifier, option);
@@ -79,7 +75,7 @@ function ValueSelector(props) {
                                 selectedMap.delete(identifier);
                             }
                             notifyChange();
-                        } }, label)) : (React.createElement(CheckBox_1.CheckBox, { "data-name": identifier, disabled: disabled || (isOptionDisabled ? isOptionDisabled(option) : false), onChange: (checked) => {
+                        } }, label)) : (React.createElement(CheckBox, { "data-name": identifier, disabled: disabled || (isOptionDisabled ? isOptionDisabled(option) : false), onChange: (checked) => {
                             if (checked) {
                                 selectedMap.set(identifier, option);
                             }
@@ -88,39 +84,39 @@ function ValueSelector(props) {
                             }
                             notifyChange();
                         }, checked: selectedMap.has(identifier) }, label)),
-                    React.createElement(rebass_1.Text, { flex: 1, ml: 2 }, allowReorder ? preparedToLabel(option) : null))));
+                    React.createElement(Text, { flex: 1, ml: 2 }, allowReorder ? preparedToLabel(option) : null))));
         };
-        return (React.createElement(react_beautiful_dnd_1.Draggable, { key: identifier, index: index, draggableId: `${identifier}`, isDragDisabled: !reorderable }, (draggableProvided) => {
+        return (React.createElement(Draggable, { key: identifier, index: index, draggableId: `${identifier}`, isDragDisabled: !reorderable }, (draggableProvided) => {
             return renderNode(Object.assign(Object.assign({ ref: draggableProvided.innerRef }, draggableProvided.draggableProps), { style: draggableProvided.draggableProps.style }), draggableProvided.dragHandleProps);
         }));
     };
     const renderSelectionSection = () => {
-        const selectionBox = (React.createElement(rebass_1.Box, { fontSize: 2 }, !value.length ? (React.createElement(React.Fragment, null, noSelectionLabel !== null && noSelectionLabel !== void 0 ? noSelectionLabel : 'No selected options',
-            !singleSelect ? (React.createElement(SimpleButton_1.default, { px: 1, disabled: disabled, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
+        const selectionBox = (React.createElement(Box, { fontSize: 2 }, !value.length ? (React.createElement(React.Fragment, null, noSelectionLabel !== null && noSelectionLabel !== void 0 ? noSelectionLabel : 'No selected options',
+            !singleSelect ? (React.createElement(SimpleButton, { px: 1, disabled: disabled, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
                     options.forEach((option) => {
                         selectedMap.set(toIdentifier(option), option);
                     });
                     notifyChange();
                 } }, "Select all")) : null)) : (React.createElement(React.Fragment, null,
-            React.createElement(SimpleButton_1.default, { disabled: disabled, tabIndex: 0, px: 1, mr: 1, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
+            React.createElement(SimpleButton, { disabled: disabled, tabIndex: 0, px: 1, mr: 1, variant: "text", style: { textDecoration: 'underline', display: 'inline-block' }, onClick: () => {
                     selectedMap.clear();
                     notifyChange();
                 } }, clearSelectionLabel !== null && clearSelectionLabel !== void 0 ? clearSelectionLabel : 'Clear selection.'),
             xSelectedLabel
                 ? xSelectedLabel(value.length)
                 : `Your selected ${value.length} ${value.length > 1 ? 'options' : 'option'}.`))));
-        return (React.createElement(rebass_1.Box, { className: `${baseClassName}__header`, mt: selectionBoxPosition === 'bottom' ? 3 : 0, mb: selectionBoxPosition === 'top' ? 3 : 0 },
+        return (React.createElement(Box, { className: `${baseClassName}__header`, mt: selectionBoxPosition === 'bottom' ? 3 : 0, mb: selectionBoxPosition === 'top' ? 3 : 0 },
             selectionBox,
             React.createElement(ValueOptionsTags, { options: options, value: value, selectedMap: selectedMap, toLabel: toLabel, toIdentifier: toIdentifier, onClearOption: notifyChange, readOnly: disabled })));
     };
-    const showOnlySelectedCheckbox = (React.createElement(CheckBox_1.CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel !== null && showSelectedOnlyLabel !== void 0 ? showSelectedOnlyLabel : 'Show Selected Only'));
+    const showOnlySelectedCheckbox = (React.createElement(CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel !== null && showSelectedOnlyLabel !== void 0 ? showSelectedOnlyLabel : 'Show Selected Only'));
     const showSelectedOnlyPosition = (_a = props.showSelectedOnlyPosition) !== null && _a !== void 0 ? _a : 'floating';
-    return (React.createElement(rebass_1.Flex, { className: baseClassName, flexDirection: "column", flex: 1 },
-        React.createElement(rebass_1.Flex, { mb: 1 },
-            showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", style: { flex: 1, border: 0, margin: 3 } })) : (React.createElement(rebass_1.Box, { flex: 1 })),
-            showSelectedOnlyPosition === 'top' && React.createElement(rebass_1.Box, { ml: 20 }, showOnlySelectedCheckbox)),
+    return (React.createElement(Flex, { className: baseClassName, flexDirection: "column", flex: 1 },
+        React.createElement(Flex, { mb: 1 },
+            showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", style: { flex: 1, border: 0, margin: 3 } })) : (React.createElement(Box, { flex: 1 })),
+            showSelectedOnlyPosition === 'top' && React.createElement(Box, { ml: 20 }, showOnlySelectedCheckbox)),
         selectionBoxPosition === 'top' && renderSelectionSection(),
-        React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: (result) => {
+        React.createElement(DragDropContext, { onDragEnd: (result) => {
                 const { source, destination } = result;
                 const selection = [];
                 const extraKeys = [];
@@ -134,7 +130,7 @@ function ValueSelector(props) {
                     }
                 }
                 const clone = new Map(selectedMap);
-                const newSelection = (0, reorder_1.reorder)(selection, source.index, destination.index);
+                const newSelection = reorder(selection, source.index, destination.index);
                 // and then pushed back in the new order, at the end
                 newSelection.push(...extraKeys);
                 selectedMap.clear();
@@ -143,10 +139,10 @@ function ValueSelector(props) {
                 });
                 notifyChange();
             } },
-            React.createElement(rebass_1.Flex, { className: `${baseClassName}__body`, flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
-                showSelectedOnlyPosition === 'floating' && (React.createElement(rebass_1.Box, { className: `${baseClassName}__show-selected-only-checkbox` },
-                    React.createElement(rebass_1.Box, { className: `${baseClassName}__show-selected-only-checkbox__text`, "data-name": "show-selected-only", backgroundColor: "defaultbackground" }, showOnlySelectedCheckbox))),
-                React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, (droppableProvided) => {
+            React.createElement(Flex, { className: `${baseClassName}__body`, flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
+                showSelectedOnlyPosition === 'floating' && (React.createElement(Box, { className: `${baseClassName}__show-selected-only-checkbox` },
+                    React.createElement(Box, { className: `${baseClassName}__show-selected-only-checkbox__text`, "data-name": "show-selected-only", backgroundColor: "defaultbackground" }, showOnlySelectedCheckbox))),
+                React.createElement(Droppable, { droppableId: "droppable" }, (droppableProvided) => {
                     return (React.createElement("div", Object.assign({ ref: droppableProvided.innerRef }, droppableProvided.droppableProps),
                         options
                             .filter((option) => {
@@ -163,11 +159,10 @@ function ValueSelector(props) {
                 }))),
         selectionBoxPosition === 'bottom' && renderSelectionSection()));
 }
-exports.ValueSelector = ValueSelector;
 ValueSelector.defaultProps = {
     allowReorder: true,
 };
-function ValueOptionsTags(props) {
+export function ValueOptionsTags(props) {
     const { allowWrap, value, toLabel, onChange, onClearOption, readOnly, renderLabel } = props;
     const { selectedMap } = useValuesMap(props);
     const renderOptionTag = (index) => {
@@ -181,20 +176,19 @@ function ValueOptionsTags(props) {
         };
         const option = selectedMap.get(optionId);
         const label = option != null ? toLabel(option) : `${optionId}`;
-        return (React.createElement(Tag_1.Tag, { flexDirection: "row", alignItems: "center", "data-name": "selected-option", "data-id": optionId, mt: allowWrap ? 1 : 0, mr: 1, className: "ab-ValueSelector__tag", onClick: (e) => {
+        return (React.createElement(Tag, { flexDirection: "row", alignItems: "center", "data-name": "selected-option", "data-id": optionId, mt: allowWrap ? 1 : 0, mr: 1, className: "ab-ValueSelector__tag", onClick: (e) => {
                 var _a, _b, _c;
                 (_c = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.lastChild) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
             }, style: { flex: 'none' } },
             renderLabel ? renderLabel(label) : label,
-            readOnly ? null : (React.createElement(SimpleButton_1.default, { icon: "close", ml: 2, iconSize: 14, variant: "text", style: { border: 'none' }, onClick: clear }))));
+            readOnly ? null : (React.createElement(SimpleButton, { icon: "close", ml: 2, iconSize: 14, variant: "text", style: { border: 'none' }, onClick: clear }))));
     };
-    const renderEllipsis = (0, react_1.useCallback)(({ remaining }) => {
-        return (React.createElement(rebass_1.Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } },
+    const renderEllipsis = useCallback(({ remaining }) => {
+        return (React.createElement(Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } },
             "+",
             remaining,
             " ",
             remaining > 1 ? 'others' : 'other'));
     }, []);
-    return (React.createElement(EllipsisContainer_1.EllipsisContainer, { style: props.style, marginRight: 4, my: 1, allowWrap: allowWrap, count: value.length, direction: "horizontal", renderItem: renderOptionTag, renderEllipsis: renderEllipsis }));
+    return (React.createElement(EllipsisContainer, { style: props.style, marginRight: 4, my: 1, allowWrap: allowWrap, count: value.length, direction: "horizontal", renderItem: renderOptionTag, renderEllipsis: renderEllipsis }));
 }
-exports.ValueOptionsTags = ValueOptionsTags;

package/src/View/Components/WizardSummaryPage.js

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WizardSummaryPage = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const WizardPanel_1 = tslib_1.__importDefault(require("../../components/WizardPanel"));
-const InfiniteTable_1 = require("../../components/InfiniteTable");
+import * as React from 'react';
+import WizardPanel from '../../components/WizardPanel';
+import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
 const columnsMap = new Map([
     ['Key', { field: 'Key', header: 'Property', defaultFlex: 1 }],
     ['Value', { field: 'Value', header: 'Value', defaultFlex: 3 }],
@@ -16,9 +12,8 @@ const tableDOMProps = {
         margin: 'var(--ab-space-2)',
     },
 };
-const WizardSummaryPage = (props) => {
-    return (React.createElement(WizardPanel_1.default, { bodyProps: { padding: 0 }, className: "ab-WizardSummary", "data-name": 'wizard-summary' },
-        React.createElement(InfiniteTable_1.DataSource, { data: props.KeyValuePairs, primaryKey: "Key" },
-            React.createElement(InfiniteTable_1.InfiniteTable, { showZebraRows: true, domProps: tableDOMProps, columns: columnsMap }))));
+export const WizardSummaryPage = (props) => {
+    return (React.createElement(WizardPanel, { bodyProps: { padding: 0 }, className: "ab-WizardSummary", "data-name": 'wizard-summary' },
+        React.createElement(DataSource, { data: props.KeyValuePairs, primaryKey: "Key" },
+            React.createElement(InfiniteTable, { showZebraRows: true, domProps: tableDOMProps, columns: columnsMap }))));
 };
-exports.WizardSummaryPage = WizardSummaryPage;

package/src/View/Components/WizardSummaryRow.js

@@ -1,16 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WizardSummaryRow = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const AdaptableObjectRow_1 = require("./AdaptableObjectRow");
-const Helper_1 = require("../../Utilities/Helpers/Helper");
-class WizardSummaryRow extends React.Component {
+import * as React from 'react';
+import { AdaptableObjectRow } from './AdaptableObjectRow';
+import { cloneObject } from '../../Utilities/Helpers/Helper';
+export class WizardSummaryRow extends React.Component {
     render() {
-        let colItems = (0, Helper_1.cloneObject)(this.props.colItems);
+        let colItems = cloneObject(this.props.colItems);
         colItems[0].Content = this.props.propertyName;
         colItems[1].Content = this.props.propertyValue;
-        return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: colItems, fontSize: 'medium' });
+        return React.createElement(AdaptableObjectRow, { colItems: colItems, fontSize: 'medium' });
     }
 }
-exports.WizardSummaryRow = WizardSummaryRow;

package/src/View/CustomSort/CustomSortSummary.js

@@ -1,23 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomSortSummary = exports.CustomSortSummaryComponent = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const EditableConfigEntityState_1 = require("../Components/SharedProps/EditableConfigEntityState");
-const react_redux_1 = require("react-redux");
-const Helper_1 = require("../../Utilities/Helpers/Helper");
-const CustomSortRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/CustomSortRedux"));
-const ObjectFactory_1 = require("../../Utilities/ObjectFactory");
-const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
-const ModuleHeader_1 = require("../Components/ModuleSummary/ModuleHeader");
-const ModuleDetail_1 = require("../Components/ModuleSummary/ModuleDetail");
-const ModuleProfile_1 = require("../Components/ModuleProfile");
-const TeamSharingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/TeamSharingRedux"));
-const UIHelper_1 = require("../UIHelper");
-const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
-const ArrayExtensions_1 = require("../../Utilities/Extensions/ArrayExtensions");
-const CustomSortWizard_1 = require("./Wizard/CustomSortWizard");
-class CustomSortSummaryComponent extends React.Component {
+import * as React from 'react';
+import { WizardStatus, } from '../Components/SharedProps/EditableConfigEntityState';
+import { connect } from 'react-redux';
+import { Helper } from '../../Utilities/Helpers/Helper';
+import * as CustomSortRedux from '../../Redux/ActionsReducers/CustomSortRedux';
+import { ObjectFactory } from '../../Utilities/ObjectFactory';
+import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
+import { ModuleHeader } from '../Components/ModuleSummary/ModuleHeader';
+import { ModuleDetail } from '../Components/ModuleSummary/ModuleDetail';
+import { ModuleProfile } from '../Components/ModuleProfile';
+import * as TeamSharingRedux from '../../Redux/ActionsReducers/TeamSharingRedux';
+import { UIHelper } from '../UIHelper';
+import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
+import { ArrayExtensions } from '../../Utilities/Extensions/ArrayExtensions';
+import { CustomSortWizard } from './Wizard/CustomSortWizard';
+export class CustomSortSummaryComponent extends React.Component {
     constructor(props) {
         super(props);
         this.onFinishWizard = (customSort) => {
@@ -30,10 +26,10 @@ class CustomSortSummaryComponent extends React.Component {
             this.setState({
                 editedAdaptableObject: null,
                 wizardStartIndex: 0,
-                wizardStatus: EditableConfigEntityState_1.WizardStatus.None,
+                wizardStatus: WizardStatus.None,
             });
         };
-        this.state = UIHelper_1.UIHelper.getEmptyConfigState();
+        this.state = UIHelper.getEmptyConfigState();
     }
     render() {
         const customSort = this.props.CustomSorts.find((c) => c.ColumnId == this.props.summarisedColumn.columnId);
@@ -41,52 +37,52 @@ class CustomSortSummaryComponent extends React.Component {
         let noCustomSort = customSort == null && columnSortComparer == null;
         let customSortRow;
         if (!this.props.summarisedColumn.sortable) {
-            customSortRow = (React.createElement(ModuleHeader_1.ModuleHeader, { key: this.props.moduleInfo.FriendlyName, moduleInfo: this.props.moduleInfo, moduleSummary: 'Column is not sortable', newButtonDisabled: true, onNew: () => this.onNew(), newButtonTooltip: this.props.moduleInfo.FriendlyName, accessLevel: this.props.accessLevel }));
+            customSortRow = (React.createElement(ModuleHeader, { key: this.props.moduleInfo.FriendlyName, moduleInfo: this.props.moduleInfo, moduleSummary: 'Column is not sortable', newButtonDisabled: true, onNew: () => this.onNew(), newButtonTooltip: this.props.moduleInfo.FriendlyName, accessLevel: this.props.accessLevel }));
         }
         else if (noCustomSort) {
             // title row
-            customSortRow = (React.createElement(ModuleHeader_1.ModuleHeader, { key: this.props.moduleInfo.FriendlyName, moduleInfo: this.props.moduleInfo, moduleSummary: 'No Custom Sort Set', onNew: () => this.onNew(), accessLevel: this.props.accessLevel, newButtonTooltip: this.props.moduleInfo.FriendlyName }));
+            customSortRow = (React.createElement(ModuleHeader, { key: this.props.moduleInfo.FriendlyName, moduleInfo: this.props.moduleInfo, moduleSummary: 'No Custom Sort Set', onNew: () => this.onNew(), accessLevel: this.props.accessLevel, newButtonTooltip: this.props.moduleInfo.FriendlyName }));
         }
         else if (columnSortComparer != null) {
-            customSortRow = (React.createElement(ModuleHeader_1.ModuleHeader, { key: this.props.moduleInfo.FriendlyName, moduleInfo: this.props.moduleInfo, moduleSummary: 'Using a Custom Sort Comparer Function', onNew: () => this.onNew(), accessLevel: this.props.accessLevel, newButtonTooltip: this.props.moduleInfo.FriendlyName }));
+            customSortRow = (React.createElement(ModuleHeader, { key: this.props.moduleInfo.FriendlyName, moduleInfo: this.props.moduleInfo, moduleSummary: 'Using a Custom Sort Comparer Function', onNew: () => this.onNew(), accessLevel: this.props.accessLevel, newButtonTooltip: this.props.moduleInfo.FriendlyName }));
         }
         else {
-            customSortRow = (React.createElement(ModuleDetail_1.ModuleDetail, { key: this.props.moduleInfo.FriendlyName, item1: React.createElement(ModuleProfile_1.ModuleProfile, { moduleInfo: this.props.moduleInfo }), item2: this.getCustomSortedValues(customSort), configEnity: customSort, moduleInfo: this.props.moduleInfo, onEdit: () => this.onEdit(customSort), showEdit: customSort != undefined, onShare: (config) => this.props.onShare(customSort, config), showShare: this.props.teamSharingActivated, onDelete: CustomSortRedux.CustomSortDelete(customSort), showBold: true, accessLevel: this.props.accessLevel }));
+            customSortRow = (React.createElement(ModuleDetail, { key: this.props.moduleInfo.FriendlyName, item1: React.createElement(ModuleProfile, { moduleInfo: this.props.moduleInfo }), item2: this.getCustomSortedValues(customSort), configEnity: customSort, moduleInfo: this.props.moduleInfo, onEdit: () => this.onEdit(customSort), showEdit: customSort != undefined, onShare: (config) => this.props.onShare(customSort, config), showShare: this.props.teamSharingActivated, onDelete: CustomSortRedux.CustomSortDelete(customSort), showBold: true, accessLevel: this.props.accessLevel }));
         }
         return (React.createElement(React.Fragment, null,
             customSortRow,
-            this.state.editedAdaptableObject && (React.createElement(CustomSortWizard_1.CustomSortWizard, { isNew: this.state.wizardStatus === EditableConfigEntityState_1.WizardStatus.New, moduleInfo: this.props.moduleInfo, data: this.state.editedAdaptableObject, configEntities: this.props.CustomSorts, onCloseWizard: () => this.onCloseWizard(), onFinishWizard: this.onFinishWizard }))));
+            this.state.editedAdaptableObject && (React.createElement(CustomSortWizard, { isNew: this.state.wizardStatus === WizardStatus.New, moduleInfo: this.props.moduleInfo, data: this.state.editedAdaptableObject, configEntities: this.props.CustomSorts, onCloseWizard: () => this.onCloseWizard(), onFinishWizard: this.onFinishWizard }))));
     }
     onNew() {
-        let configEntity = ObjectFactory_1.ObjectFactory.CreateEmptyCustomSort();
+        let configEntity = ObjectFactory.CreateEmptyCustomSort();
         configEntity.ColumnId = this.props.summarisedColumn.columnId;
         this.setState({
             editedAdaptableObject: configEntity,
             wizardStartIndex: 1,
-            wizardStatus: EditableConfigEntityState_1.WizardStatus.New,
+            wizardStatus: WizardStatus.New,
         });
     }
     onEdit(customSort) {
         this.setState({
-            editedAdaptableObject: Helper_1.Helper.cloneObject(customSort),
+            editedAdaptableObject: Helper.cloneObject(customSort),
             wizardStartIndex: 1,
-            wizardStatus: EditableConfigEntityState_1.WizardStatus.Edit,
+            wizardStatus: WizardStatus.Edit,
         });
     }
     onCloseWizard() {
         this.setState({
             editedAdaptableObject: null,
             wizardStartIndex: 0,
-            wizardStatus: EditableConfigEntityState_1.WizardStatus.None,
+            wizardStatus: WizardStatus.None,
         });
     }
     canFinishWizard() {
         let customSort = this.state.editedAdaptableObject;
-        return (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(customSort.ColumnId) &&
-            ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(customSort.SortedValues));
+        return (StringExtensions.IsNotNullOrEmpty(customSort.ColumnId) &&
+            ArrayExtensions.IsNotNullOrEmpty(customSort.SortedValues));
     }
     getCustomSortedValues(customSort) {
-        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(customSort.SortedValues)) {
+        if (ArrayExtensions.IsNotNullOrEmpty(customSort.SortedValues)) {
             return customSort.SortedValues.join(', ');
         }
         else {
@@ -94,7 +90,6 @@ class CustomSortSummaryComponent extends React.Component {
         }
     }
 }
-exports.CustomSortSummaryComponent = CustomSortSummaryComponent;
 function mapStateToProps(state, ownProps) {
     return {
         CustomSorts: state.CustomSort.CustomSorts,
@@ -107,4 +102,4 @@ function mapDispatchToProps(dispatch) {
         onShare: (entity, config) => dispatch(TeamSharingRedux.TeamSharingShare(entity, ModuleConstants.CustomSortModuleId, config)),
     };
 }
-exports.CustomSortSummary = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(CustomSortSummaryComponent);
+export let CustomSortSummary = connect(mapStateToProps, mapDispatchToProps)(CustomSortSummaryComponent);

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -1,29 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomSortColumnWizardSection = exports.isValidCustomSortColumn = exports.renderCustomSortColumn = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const Tabs_1 = require("../../../components/Tabs");
-const Tag_1 = require("../../../components/Tag");
-const ColumnSelector_1 = require("../../Components/ColumnSelector");
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const renderCustomSortColumn = (data) => {
-    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Text, { pr: 2, py: 2, fontSize: 2 },
+import * as React from 'react';
+import { Text } from 'rebass';
+import { Tabs } from '../../../components/Tabs';
+import { Tag } from '../../../components/Tag';
+import { NewColumnSelector } from '../../Components/ColumnSelector';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+export const renderCustomSortColumn = (data) => {
+    const { api } = useOnePageAdaptableWizardContext();
+    return (React.createElement(Text, { pr: 2, py: 2, fontSize: 2 },
         "Custom sort column: ",
-        React.createElement(Tag_1.Tag, null, api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
+        React.createElement(Tag, null, api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
 };
-exports.renderCustomSortColumn = renderCustomSortColumn;
-const isValidCustomSortColumn = (data) => {
+export const isValidCustomSortColumn = (data) => {
     if (!data.ColumnId) {
         return 'You have to select a Column for Custom Sort';
     }
     return true;
 };
-exports.isValidCustomSortColumn = isValidCustomSortColumn;
-const CustomSortColumnWizardSection = (props) => {
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+export const CustomSortColumnWizardSection = (props) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
     const sortableCols = React.useMemo(() => {
         const sortableColumns = api.columnApi.getSortableColumns();
         const customSorts = api.customSortApi.getCustomSorts();
@@ -42,11 +36,10 @@ const CustomSortColumnWizardSection = (props) => {
             });
         });
     }, []);
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Column"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(ColumnSelector_1.NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Column"),
+        React.createElement(Tabs.Content, null,
+            React.createElement(NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
                     props.onChange(Object.assign(Object.assign({}, data), { SortedValues: [], ColumnId: ids[0] }));
                 }, allowReorder: false }))));
 };
-exports.CustomSortColumnWizardSection = CustomSortColumnWizardSection;

package/src/View/CustomSort/Wizard/CustomSortSummaryWizard.js

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomSortSummaryWizard = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const WizardSummaryPage_1 = require("../../Components/WizardSummaryPage");
-class CustomSortSummaryWizard extends React.Component {
+import * as React from 'react';
+import { WizardSummaryPage } from '../../Components/WizardSummaryPage';
+export class CustomSortSummaryWizard extends React.Component {
     constructor(props) {
         super(props);
     }
@@ -16,7 +12,7 @@ class CustomSortSummaryWizard extends React.Component {
             },
             { Key: 'Values', Value: this.props.data.SortedValues.join(', ') },
         ];
-        return (React.createElement(WizardSummaryPage_1.WizardSummaryPage, { KeyValuePairs: keyValuePairs, header: this.props.moduleInfo.FriendlyName }));
+        return (React.createElement(WizardSummaryPage, { KeyValuePairs: keyValuePairs, header: this.props.moduleInfo.FriendlyName }));
     }
     canNext() {
         return true;
@@ -33,4 +29,3 @@ class CustomSortSummaryWizard extends React.Component {
         return 1;
     }
 }
-exports.CustomSortSummaryWizard = CustomSortSummaryWizard;

package/src/View/CustomSort/Wizard/CustomSortValuesWizardSection.js

@@ -1,39 +1,33 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomSortValuesWizardSection = exports.renderCustomSortValuesSummary = exports.isValidCustomSortOrder = 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 Loader_1 = require("../../../components/Loader");
-const Tabs_1 = require("../../../components/Tabs");
-const join_1 = tslib_1.__importDefault(require("../../../components/utils/join"));
-const runIfNotResolvedIn_1 = require("../../../Utilities/runIfNotResolvedIn");
-const sortWithOrder_1 = require("../../../Utilities/sortWithOrder");
-const ValueSelector_1 = require("../../Components/ValueSelector");
-const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const isValidCustomSortOrder = (data) => {
+import * as React from 'react';
+import { useMemo, useEffect, useState } from 'react';
+import { Text } from 'rebass';
+import { Loader } from '../../../components/Loader';
+import { Tabs } from '../../../components/Tabs';
+import join from '../../../components/utils/join';
+import { runIfNotResolvedIn } from '../../../Utilities/runIfNotResolvedIn';
+import { sortWithOrderArray } from '../../../Utilities/sortWithOrder';
+import { ValueOptionsTags, ValueSelector } from '../../Components/ValueSelector';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+export const isValidCustomSortOrder = (data) => {
     if (!data.SortedValues || !data.SortedValues.length) {
         return 'You have to specify at least one value for Custom Sort order';
     }
     return true;
 };
-exports.isValidCustomSortOrder = isValidCustomSortOrder;
-const renderCustomSortValuesSummary = (data) => {
-    return data.SortedValues.length ? (React.createElement(rebass_1.Text, { fontSize: 2 },
-        React.createElement(ValueSelector_1.ValueOptionsTags, { options: data.SortedValues, value: data.SortedValues, toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, allowWrap: true, readOnly: true }))) : null;
+export const renderCustomSortValuesSummary = (data) => {
+    return data.SortedValues.length ? (React.createElement(Text, { fontSize: 2 },
+        React.createElement(ValueOptionsTags, { options: data.SortedValues, value: data.SortedValues, toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, allowWrap: true, readOnly: true }))) : null;
 };
-exports.renderCustomSortValuesSummary = renderCustomSortValuesSummary;
-const CustomSortValuesWizardSection = (props) => {
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const [distinctValues, setDistinctValues] = (0, react_1.useState)([]);
-    const [isDistinctValuesLoading, setIsDistinctValuesLoading] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
+export const CustomSortValuesWizardSection = (props) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
+    const [distinctValues, setDistinctValues] = useState([]);
+    const [isDistinctValuesLoading, setIsDistinctValuesLoading] = useState(false);
+    useEffect(() => {
         let isMounted = true;
         (async () => {
             // for sync and very fast resolving promises does not make sense to show a loader
             setDistinctValues([]);
-            const newValues = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(api.gridApi.internalApi.getDistinctCustomSortDisplayValuesForColumn(data.ColumnId), () => isMounted && setIsDistinctValuesLoading(true));
+            const newValues = await runIfNotResolvedIn(api.gridApi.internalApi.getDistinctCustomSortDisplayValuesForColumn(data.ColumnId), () => isMounted && setIsDistinctValuesLoading(true));
             if (!isMounted) {
                 return;
             }
@@ -44,7 +38,7 @@ const CustomSortValuesWizardSection = (props) => {
             isMounted = false;
         };
     }, [data.ColumnId]);
-    const sortedValuesMap = (0, react_1.useMemo)(() => {
+    const sortedValuesMap = useMemo(() => {
         if (!data.SortedValues || !data.SortedValues.length) {
             return new Map();
         }
@@ -56,21 +50,20 @@ const CustomSortValuesWizardSection = (props) => {
     const allowReorder = React.useCallback((option) => {
         return sortedValuesMap.has(option);
     }, [sortedValuesMap]);
-    const options = (0, react_1.useMemo)(() => {
-        return (0, sortWithOrder_1.sortWithOrderArray)(distinctValues, data.SortedValues, {
+    const options = useMemo(() => {
+        return sortWithOrderArray(distinctValues, data.SortedValues, {
             sortUnorderedItems: false,
         });
     }, [allowReorder, distinctValues, data.SortedValues]);
     const baseClassName = 'ab-CustomSortWizard__SortOrder';
-    const className = (0, join_1.default)(baseClassName, isDistinctValuesLoading && `${baseClassName}--loading`);
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' }, className: className },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Sort Order"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            isDistinctValuesLoading && React.createElement(Loader_1.Loader, null, "Loading"),
-            React.createElement(ValueSelector_1.ValueSelector, { toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, options: options, value: data.SortedValues, allowReorder: allowReorder, xSelectedLabel: () => {
+    const className = join(baseClassName, isDistinctValuesLoading && `${baseClassName}--loading`);
+    return (React.createElement(Tabs, { style: { height: '100%' }, className: className },
+        React.createElement(Tabs.Tab, null, "Sort Order"),
+        React.createElement(Tabs.Content, null,
+            isDistinctValuesLoading && React.createElement(Loader, null, "Loading"),
+            React.createElement(ValueSelector, { toIdentifier: (x) => `${x}`, toLabel: (x) => `${x}`, options: options, value: data.SortedValues, allowReorder: allowReorder, xSelectedLabel: () => {
                     return `Your Sort Order:`;
                 }, onChange: (SortedValues) => {
                     props.onChange(Object.assign(Object.assign({}, data), { SortedValues }));
                 } }))));
 };
-exports.CustomSortValuesWizardSection = CustomSortValuesWizardSection;