@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.0

package/src/View/Components/ToolPanel/ToolPanelPopup.js

@@ -1,21 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolPanelPopup = exports.ToolPanelConfigView = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_redux_1 = require("react-redux");
-const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
-const PopupPanel_1 = require("../Popups/AdaptablePopup/PopupPanel");
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const Types_1 = require("../../../PredefinedConfig/Common/Types");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
-const ModuleValueSelector_1 = require("../ModuleValueSelector");
-const Tabs_1 = require("../../../components/Tabs");
-var ToolPanelConfigView;
+import * as React from 'react';
+import { connect } from 'react-redux';
+import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
+import { PopupPanel } from '../Popups/AdaptablePopup/PopupPanel';
+import Radio from '../../../components/Radio';
+import { ALL_TOOL_PANELS, } from '../../../PredefinedConfig/Common/Types';
+import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
+import { ModuleValueSelector } from '../ModuleValueSelector';
+import { Tabs } from '../../../components/Tabs';
+export var ToolPanelConfigView;
 (function (ToolPanelConfigView) {
     ToolPanelConfigView["Buttons"] = "Buttons";
     ToolPanelConfigView["ToolPanels"] = "ToolPanels";
-})(ToolPanelConfigView = exports.ToolPanelConfigView || (exports.ToolPanelConfigView = {}));
+})(ToolPanelConfigView || (ToolPanelConfigView = {}));
 class ToolPanelPopupComponent extends React.Component {
     constructor(props) {
         var _a, _b, _c;
@@ -29,7 +25,7 @@ class ToolPanelPopupComponent extends React.Component {
         const entitlementService = this.props.api.internalApi.getEntitlementService();
         // 1. process module buttons
         const selectedModuleButtons = [];
-        if (ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.ToolPanelState.ModuleButtons)) {
+        if (ArrayExtensions.IsNotNullOrEmpty(this.props.ToolPanelState.ModuleButtons)) {
             this.props.ToolPanelState.ModuleButtons.forEach((module) => {
                 let menuItem = this.props.GridState.SettingPanelModuleMenuItems.find((m) => m.module == module);
                 if (menuItem === null || menuItem === void 0 ? void 0 : menuItem.isVisible) {
@@ -52,7 +48,7 @@ class ToolPanelPopupComponent extends React.Component {
             !entitlementService.isModuleHiddenEntitlement('OpenFin')) {
             availableModules.push('OpenFin');
         }
-        const availableModuleToolPanels = Types_1.ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions_1.default.ContainsItem(availableModules, moduleToolPanel));
+        const availableModuleToolPanels = ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions.ContainsItem(availableModules, moduleToolPanel));
         const availableCustomToolPanels = this.props.api.toolPanelApi
             .getCustomToolPanels()
             .map((customToolPanel) => customToolPanel.name);
@@ -70,16 +66,16 @@ class ToolPanelPopupComponent extends React.Component {
             }
             return false;
         };
-        return (React.createElement(PopupPanel_1.PopupPanel, { headerText: "ToolPanel", glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
-            React.createElement(Tabs_1.Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup", value: this.state.ToolPanelConfigView, style: { height: '100%' }, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
-                React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
-                    React.createElement(Radio_1.default, { margin: 0, value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1 }, "Tool Panels")),
-                React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.Buttons },
-                    React.createElement(Radio_1.default, { margin: 0, value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1 }, "Module Buttons")),
-                React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' } },
-                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, noSelectionLabel: 'No selected Tool Panel', xSelectedLabel: () => `Visible ToolPanels:`, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly })),
-                React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' } },
-                    React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
+        return (React.createElement(PopupPanel, { headerText: "ToolPanel", glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
+            React.createElement(Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup", value: this.state.ToolPanelConfigView, style: { height: '100%' }, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
+                React.createElement(Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
+                    React.createElement(Radio, { margin: 0, value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1 }, "Tool Panels")),
+                React.createElement(Tabs.Tab, { value: ToolPanelConfigView.Buttons },
+                    React.createElement(Radio, { margin: 0, value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1 }, "Module Buttons")),
+                React.createElement(Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' } },
+                    React.createElement(ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, noSelectionLabel: 'No selected Tool Panel', xSelectedLabel: () => `Visible ToolPanels:`, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly })),
+                React.createElement(Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' } },
+                    React.createElement(ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
     }
     onShowGridPropertiesChanged(event) {
         let e = event.target;
@@ -114,4 +110,4 @@ function mapDispatchToProps(dispatch) {
         onToolPanelSetToolPanels: (toolPanels) => dispatch(ToolPanelRedux.ToolPanelSetToolPanels(toolPanels)),
     };
 }
-exports.ToolPanelPopup = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(ToolPanelPopupComponent);
+export let ToolPanelPopup = connect(mapStateToProps, mapDispatchToProps)(ToolPanelPopupComponent);

package/src/View/Components/ToolPanel/ToolPanelWrapper.js

@@ -1,19 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolPanelWrapper = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const AdaptableContext_1 = require("../../AdaptableContext");
-const AdaptableViewFactory_1 = require("../../AdaptableViewFactory");
-const CustomToolPanelContent_1 = require("./CustomToolPanelContent");
-const rebass_1 = require("rebass");
-const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
-const PanelToolPanel_1 = require("../Panels/PanelToolPanel");
-const PopupRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/PopupRedux"));
-const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants");
-const ToolPanelWrapper = (props) => {
+import * as React from 'react';
+import { useAdaptable } from '../../AdaptableContext';
+import { AdaptableViewPanelFactory } from '../../AdaptableViewFactory';
+import { CustomToolPanelContent } from './CustomToolPanelContent';
+import { Box } from 'rebass';
+import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
+import { PanelToolPanel } from '../Panels/PanelToolPanel';
+import * as PopupRedux from '../../../Redux/ActionsReducers/PopupRedux';
+import { ToolPanelModuleId } from '../../../Utilities/Constants/ModuleConstants';
+export const ToolPanelWrapper = (props) => {
     const { adaptableToolPanel, customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: onVisibilityModeChange, } = props;
-    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const { api } = useAdaptable();
     const getToolPanelConfiguration = () => {
         var _a;
         if (adaptableToolPanel) {
@@ -23,7 +19,7 @@ const ToolPanelWrapper = (props) => {
             const moduleInfo = api.internalApi
                 .getModuleService()
                 .getModuleInfoByModule(adaptableToolPanel);
-            const ModuleToolPanel = AdaptableViewFactory_1.AdaptableViewPanelFactory.get(adaptableToolPanel);
+            const ModuleToolPanel = AdaptableViewPanelFactory.get(adaptableToolPanel);
             return [
                 adaptableToolPanel,
                 moduleInfo.FriendlyName,
@@ -36,7 +32,7 @@ const ToolPanelWrapper = (props) => {
             return [
                 customToolPanel.name,
                 (_a = customToolPanel === null || customToolPanel === void 0 ? void 0 : customToolPanel.title) !== null && _a !== void 0 ? _a : customToolPanel.name,
-                React.createElement(CustomToolPanelContent_1.CustomToolPanelContent, { customToolPanel: customToolPanel }),
+                React.createElement(CustomToolPanelContent, { customToolPanel: customToolPanel }),
             ];
         }
     };
@@ -50,10 +46,10 @@ const ToolPanelWrapper = (props) => {
         toolPanelName !== 'Glue42';
     const isToolPanelModuleConfigurable = api.internalApi
         .getModuleService()
-        .getModuleById(ModuleConstants_1.ToolPanelModuleId)
+        .getModuleById(ToolPanelModuleId)
         .isModuleEditable();
-    return (React.createElement(React.Fragment, null, toolPanelContent && (React.createElement(rebass_1.Box, { marginTop: 1, className: `ab-ToolPanel__container ab-ToolPanel__container--${toolPanelName}` },
-        React.createElement(PanelToolPanel_1.PanelToolPanel, { className: `ab-ToolPanel__${toolPanelName}`, "data-name": `ab-ToolPanel__${toolPanelName}`, headerText: toolPanelHeader, disabled: !isToolPanelModuleConfigurable, onMinimiseChanged: () => {
+    return (React.createElement(React.Fragment, null, toolPanelContent && (React.createElement(Box, { marginTop: 1, className: `ab-ToolPanel__container ab-ToolPanel__container--${toolPanelName}` },
+        React.createElement(PanelToolPanel, { className: `ab-ToolPanel__${toolPanelName}`, "data-name": `ab-ToolPanel__${toolPanelName}`, headerText: toolPanelHeader, disabled: !isToolPanelModuleConfigurable, onMinimiseChanged: () => {
                 onVisibilityModeChange(isMinimised ? 'expanded' : 'collapsed');
             }, isMinimised: isMinimised, onConfigure: isConfigurable
                 ? () => {
@@ -67,4 +63,3 @@ const ToolPanelWrapper = (props) => {
                 }
                 : null, onClose: () => api.internalApi.dispatchReduxAction(ToolPanelRedux.ToolPanelHideToolPanel(toolPanelName)) }, isMinimised ? null : toolPanelContent)))));
 };
-exports.ToolPanelWrapper = ToolPanelWrapper;

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);