@adaptabletools/adaptable 12.0.9 → 12.1.0-canary.2

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableObjectList = exports.AdaptableObjectListItem = void 0;
+exports.AdaptableObjectList = exports.AdaptableObjectListItem = exports.AdaptableObjectListItemView = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
@@ -15,9 +15,46 @@ const ButtonShare_1 = require("../Buttons/ButtonShare");
 const SuspendToggleButton_1 = require("../Buttons/SuspendToggleButton/SuspendToggleButton");
 const ValueSelector_1 = require("../ValueSelector");
 const ICON_SIZE = 26;
-const baseClassName = 'ab-Adaptable-Object-List';
+const LIST_BASE_CLASS_NAME = 'ab-Adaptable-Object-List';
+const ITEM_BASE_CLASS_NAME = `${LIST_BASE_CLASS_NAME}__Item`;
+const AdaptableObjectListItemView = (props) => {
+    var _a, _b, _c;
+    const baseClassName = ITEM_BASE_CLASS_NAME;
+    return (React.createElement(rebass_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", mb: 3, className: join_1.default(props.className, baseClassName), style: props.style },
+        React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__rows` }, (_c = (_b = (_a = props.items).filter) === null || _b === void 0 ? void 0 : _b.call(_a, Boolean)) === null || _c === void 0 ? void 0 : _c.map((tag, index) => {
+            var _a;
+            let labelEl = tag.label;
+            if (typeof tag.label === 'function') {
+                labelEl = React.createElement(tag.label, { data: props.abObject });
+            }
+            labelEl = labelEl !== null && labelEl !== void 0 ? labelEl : tag.name;
+            return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: index, mb: 2, className: `${baseClassName}__row` },
+                React.createElement(rebass_1.Box, { className: `${baseClassName}__label`, mr: 3 },
+                    labelEl,
+                    props.showEditButton && (React.createElement(SimpleButton_1.default, { accessLevel: props.accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
+                            props.handleOnEdit(tag.name);
+                        } }))),
+                React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__values` },
+                    tag.view &&
+                        React.createElement(tag.view, {
+                            data: props.abObject,
+                        }),
+                    Boolean((tag === null || tag === void 0 ? void 0 : tag.values) && ((_a = tag === null || tag === void 0 ? void 0 : tag.values) === null || _a === void 0 ? void 0 : _a.length)) && (React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: tag.values, value: tag.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))));
+        })),
+        props.showActions && (React.createElement(rebass_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons` },
+            React.createElement(rebass_1.Flex, { justifyContent: "end" },
+                props.actions,
+                props.teamSharingActivated && (React.createElement(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${props.entityType}`, accessLevel: props.accessLevel, onShare: props.onShare })),
+                props.onDelete && (React.createElement(SimpleButton_1.default, { "data-name": "delete", disabled: props.deleteDisabled, iconSize: ICON_SIZE, tooltip: props.deleteTooltip, icon: "trash", onClick: props.onDelete, variant: "text" })),
+                props.deleteAction && (React.createElement(ButtonDelete_1.ButtonDelete, { disabled: props.deleteDisabled, tooltip: props.deleteTooltip, iconSize: ICON_SIZE, ConfirmationMsg: `Are you sure you want to delete this ${props.entityType}?`, ConfirmationTitle: `Delete ${props.entityType}`, ConfirmAction: props.deleteAction, accessLevel: props.accessLevel })),
+                props.showEditButton && (React.createElement(ButtonEdit_1.ButtonEdit, { iconSize: ICON_SIZE, disabled: props.editDisabled, accessLevel: props.accessLevel, onClick: () => props.handleOnEdit() }))),
+            React.createElement(rebass_1.Box, { flex: 1 }),
+            props.suspendedEnabled && (React.createElement(rebass_1.Flex, { justifyContent: "end" },
+                React.createElement(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend, suspendableObject: props.abObject, accessLevel: props.accessLevel })))))));
+};
+exports.AdaptableObjectListItemView = AdaptableObjectListItemView;
 const AdaptableObjectListItem = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f;
     const adaptable = AdaptableContext_1.useAdaptable();
     const dispatch = react_redux_1.useDispatch();
     const [isEditWizardVisible, setIsEditWizardVisible] = React.useState(false);
@@ -34,8 +71,8 @@ const AdaptableObjectListItem = (props) => {
         .getEntitlementService()
         .getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
     const accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(props.data.abObject, moduleAccessLevel);
-    const itemBaseClassName = `${baseClassName}__Item`;
-    const itemClassName = join_1.default(props.data.className, itemBaseClassName, props.data.abObject.IsSuspended && `${itemBaseClassName}--is-suspended`);
+    const itemClassName = join_1.default(props.data.className, ITEM_BASE_CLASS_NAME, props.data.abObject.IsSuspended &&
+        `${ITEM_BASE_CLASS_NAME}--is-suspended`);
     const handleCloseWizard = React.useCallback(() => {
         setIsEditWizardVisible(false);
         setWizardStepName(null);
@@ -60,41 +97,14 @@ const AdaptableObjectListItem = (props) => {
     });
     const isEditDisabled = !Boolean(EditWizard || viewOptions.onOpenEditPopup);
     const showActions = !props.hideControls;
-    return (React.createElement(rebass_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.data.abObject.Uuid, as: "li", mb: 3, className: itemClassName, style: props.data.style },
-        React.createElement(rebass_1.Box, { flex: 1, className: `${itemBaseClassName}__rows` }, (_j = (_h = (_g = props.data.items).filter) === null || _h === void 0 ? void 0 : _h.call(_g, Boolean)) === null || _j === void 0 ? void 0 : _j.map((tag, index) => {
-            var _a;
-            let labelEl = tag.label;
-            if (typeof tag.label === 'function') {
-                labelEl = React.createElement(tag.label, { data: props.data.abObject });
-            }
-            labelEl = labelEl !== null && labelEl !== void 0 ? labelEl : tag.name;
-            return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: index, mb: 2, className: `${itemBaseClassName}__row` },
-                React.createElement(rebass_1.Box, { className: `${itemBaseClassName}__label`, mr: 3 },
-                    labelEl,
-                    EditWizard && (React.createElement(SimpleButton_1.default, { accessLevel: accessLevel, className: `${itemBaseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
-                            handleOnEdit(tag.name);
-                        } }))),
-                React.createElement(rebass_1.Box, { flex: 1, className: `${itemBaseClassName}__values` },
-                    tag.view &&
-                        React.createElement(tag.view, {
-                            data: props.data.abObject,
-                        }),
-                    Boolean((tag === null || tag === void 0 ? void 0 : tag.values) && ((_a = tag === null || tag === void 0 ? void 0 : tag.values) === null || _a === void 0 ? void 0 : _a.length)) && (React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: tag.values, value: tag.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))));
-        })),
-        showActions && (React.createElement(rebass_1.Flex, { flexDirection: "column", className: `${itemBaseClassName}__buttons` },
-            React.createElement(rebass_1.Flex, { justifyContent: "end" },
-                actions,
-                teamSharingActivated && (React.createElement(ButtonShare_1.ButtonShare, { iconSize: ICON_SIZE, Header: `TeamSharing ${entityType}`, accessLevel: accessLevel, onShare: (config) => adaptable.api.teamSharingApi.shareEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config) })),
-                deleteAction && (React.createElement(ButtonDelete_1.ButtonDelete, { disabled: props.deleteDisabled, tooltip: props.deleteTooltip, iconSize: ICON_SIZE, ConfirmationMsg: `Are you sure you want to delete this ${entityType}?`, ConfirmationTitle: `Delete ${entityType}`, ConfirmAction: deleteAction, accessLevel: accessLevel })),
-                React.createElement(ButtonEdit_1.ButtonEdit, { iconSize: ICON_SIZE, disabled: isEditDisabled, accessLevel: accessLevel, onClick: () => handleOnEdit() })),
-            React.createElement(rebass_1.Box, { flex: 1 }),
-            hasSuspend && (React.createElement(rebass_1.Flex, { justifyContent: "end" },
-                React.createElement(SuspendToggleButton_1.SuspendToggleButton, { onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)), suspendableObject: props.data.abObject, accessLevel: accessLevel }))))),
+    const showEditButton = Boolean(EditWizard);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(exports.AdaptableObjectListItemView, { abObject: props.data.abObject, accessLevel: accessLevel, actions: actions, className: itemClassName, handleOnEdit: handleOnEdit, items: props.data.items, showActions: showActions, showEditButton: showEditButton, style: props.data.style, teamSharingActivated: teamSharingActivated, onShare: (config) => adaptable.api.teamSharingApi.shareEntity(props.data.abObject, props.module.moduleInfo.ModuleName, config), entityType: entityType, deleteAction: deleteAction, deleteDisabled: props.deleteDisabled, deleteTooltip: props.deleteTooltip, editDisabled: isEditDisabled, suspendedEnabled: hasSuspend, onSuspend: () => dispatch(viewOptions.getSuspendAction(props.data.abObject)), onUnSuspend: () => dispatch(viewOptions.getUnSuspendAction(props.data.abObject)) }),
         isEditWizardVisible && EditWizard && (React.createElement(EditWizard, { defaultCurrentSectionName: wizardStepName, moduleInfo: props.module.moduleInfo, data: props.data.abObject, configEntities: null, onCloseWizard: handleCloseWizard, onFinishWizard: handleCloseWizard }))));
 };
 exports.AdaptableObjectListItem = AdaptableObjectListItem;
 const AdaptableObjectList = (props) => {
     var _a;
-    return (React.createElement("ul", { className: baseClassName }, (_a = props === null || props === void 0 ? void 0 : props.items) === null || _a === void 0 ? void 0 : _a.map((item) => (React.createElement(exports.AdaptableObjectListItem, { key: item.abObject.Uuid, data: item, module: props.module })))));
+    return (React.createElement("ul", { className: LIST_BASE_CLASS_NAME }, (_a = props === null || props === void 0 ? void 0 : props.items) === null || _a === void 0 ? void 0 : _a.map((item) => (React.createElement(exports.AdaptableObjectListItem, Object.assign({ key: item.abObject.Uuid, data: item, module: props.module }, props.itemProps))))));
 };
 exports.AdaptableObjectList = AdaptableObjectList;

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

@@ -41,14 +41,15 @@ const ListBoxFilterForm = (props) => {
         }
     };
     const columnValuesItemsElements = props.columnDistinctValues.map((distinctValue, index) => {
+        var _a, _b, _c;
         const isActive = UiSelectedColumnValues.indexOf(distinctValue.value) >= 0;
-        const columnValue = distinctValue.value;
-        if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnValue)) {
+        const columnLabel = distinctValue.label;
+        if (StringExtensions_1.StringExtensions.IsNullOrEmpty(columnLabel)) {
             return null;
         }
         if (!props.suppressClientSideFilter &&
             StringExtensions_1.StringExtensions.IsNotNullOrEmpty(FilterValue) &&
-            columnValue.toLocaleLowerCase().indexOf(FilterValue.toLocaleLowerCase()) < 0) {
+            ((_c = (_a = columnLabel === null || columnLabel === void 0 ? void 0 : columnLabel.toLocaleLowerCase) === null || _a === void 0 ? void 0 : (_b = _a.call(columnLabel)).indexOf) === null || _c === void 0 ? void 0 : _c.call(_b, FilterValue.toLocaleLowerCase())) < 0) {
             return null;
         }
         if (props.useAgGridStyle) {
@@ -59,7 +60,7 @@ const ListBoxFilterForm = (props) => {
                 onChange: () => onClickItemColumnValue(distinctValue.value),
             });
         }
-        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: columnValue }, distinctValue.label));
+        return (React.createElement(ListGroupItem_1.default, { noZebra: props.useAgGridStyle, key: 'columnValue' + index, onClick: () => onClickItemColumnValue(distinctValue.value), active: isActive, value: distinctValue.value }, distinctValue.label));
     });
     const textClear = (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { autoFocus: true, type: "text", placeholder: "Search Column Values", value: FilterValue, style: {
             paddingTop: 'var(--ab-space-1)',

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -26,8 +26,10 @@ const AdaptablePopupModuleView = (props) => {
     const moduleViewProperties = props.module.getViewProperties();
     const EditWizard = (_b = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _b === void 0 ? void 0 : _b.call(moduleViewProperties);
     const [isWizardOpen, setIsWizardOpen] = React.useState(() => {
-        var _a, _b;
-        return ((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' || ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'Edit';
+        var _a, _b, _c;
+        return (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' ||
+            ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'Edit' ||
+            ((_c = props.popupParams) === null || _c === void 0 ? void 0 : _c.action) === 'Clone');
     });
     const handleOpenEditPopup = React.useCallback(() => {
         if (EditWizard) {

package/src/View/Components/Popups/AdaptableToaster.js

@@ -5,61 +5,43 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const AdaptablePopupAlert_1 = require("./AdaptablePopupAlert");
-const react_toastify_1 = require("react-toastify");
-const apiInstances = new WeakMap();
-const weakMapKeys = new Map();
+const { toast } = require('react-toastify');
 const showToast = (props) => {
     // we're doing this hack and not simply using props.api in order not to have a memory
     // leak where the api is still kept around in memory by the toaster
-    const adaptableOptions = props.api.internalApi.getAdaptableOptions();
-    const adaptableId = adaptableOptions.adaptableId;
-    let weakMapKey = weakMapKeys.get(adaptableId);
-    if (!weakMapKey) {
-        weakMapKeys.set(adaptableId, { adaptableId });
-    }
-    weakMapKey = weakMapKeys.get(adaptableId);
-    const off = props.api.eventApi.on('AdaptableDestroy', () => {
-        react_toastify_1.toast.dismiss(); // remove all toasts
-        let weakMapKey = weakMapKeys.get(adaptableId);
-        if (weakMapKey) {
-            apiInstances.delete(weakMapKey);
-            weakMapKeys.delete(adaptableId);
-        }
+    let api = props.api;
+    const off = api.eventApi.on('AdaptableDestroy', () => {
+        toast.dismiss(toastId);
+        api = null;
     });
-    apiInstances.set(weakMapKey, props.api);
+    const adaptableOptions = props.api.internalApi.getAdaptableOptions();
     const toastProps = ObjectFactory_1.default.CreateToastOptions(adaptableOptions.notificationsOptions, {
-        containerId: adaptableId,
+        containerId: adaptableOptions.adaptableId,
         onClose: () => {
-            const weakMapKey = weakMapKeys.get(adaptableId);
-            const adaptableApi = weakMapKey ? apiInstances.get(weakMapKey) : null;
-            if (adaptableApi) {
+            if (api) {
                 off();
-                if (!adaptableApi.isDestroyed()) {
-                    adaptableApi.internalApi.hidePopupAlert();
-                }
-                else {
-                    apiInstances.delete(weakMapKey);
-                    weakMapKeys.delete(adaptableId);
+                if (!api.isDestroyed()) {
+                    api.internalApi.hidePopupAlert();
                 }
             }
         },
     });
     const content = (React.createElement(AdaptablePopupAlert_1.AdaptablePopupAlert, { headless: true, adaptableAlert: props.adaptableAlert, onClose: () => {
-            react_toastify_1.toast.dismiss(toastId);
+            toast.dismiss(toastId);
         } }));
     let toastId;
     switch (props.adaptableAlert.alertDefinition.MessageType) {
         case 'Info':
-            toastId = react_toastify_1.toast.info(content, toastProps);
+            toastId = toast.info(content, toastProps);
             break;
         case 'Error':
-            toastId = react_toastify_1.toast.error(content, toastProps);
+            toastId = toast.error(content, toastProps);
             break;
         case 'Success':
-            toastId = react_toastify_1.toast.success(content, toastProps);
+            toastId = toast.success(content, toastProps);
             break;
         case 'Warning':
-            toastId = react_toastify_1.toast.warn(content, toastProps);
+            toastId = toast.warn(content, toastProps);
             break;
     }
 };

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

@@ -5,13 +5,22 @@ export declare type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | str
     value: ID_TYPE[];
     onChange: (selected: ID_TYPE[], selectedMap: Map<ID_TYPE, OPTION_TYPE>) => void;
     allowReorder?: boolean | ((option: OPTION_TYPE) => boolean);
-    filter?: null | ((o: OPTION_TYPE) => boolean);
+    filter?: null | ((o: OPTION_TYPE, searchValue: string) => boolean);
+    /**
+     * To show the filter input, filter needs also to be defined.
+     */
+    showFilterInput?: boolean;
     singleSelect?: boolean;
     toIdentifier: (v: OPTION_TYPE) => ID_TYPE;
     toLabel: (v: OPTION_TYPE) => string | React.ReactElement;
+    /**
+     * Used to render list items, this extra prop allows to have different rendering for list & bottom tags.
+     */
+    toListLabel?: (v: OPTION_TYPE) => string | React.ReactElement;
     noSelectionLabel?: ReactNode;
     clearSelectionLabel?: ReactNode;
     showSelectedOnlyLabel?: ReactNode;
+    showSelectedOnlyPosition?: 'floating' | 'top';
     xSelectedLabel?: (count: number) => ReactNode;
     selectionBoxPosition?: 'top' | 'bottom';
     onShowSelectedOnlyChange?: (selectedOnly: boolean) => void;

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

@@ -13,6 +13,7 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/Simp
 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");
 function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     const optionsMap = react_1.useMemo(() => {
         if (selectedMap) {
@@ -38,7 +39,10 @@ function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
     return { selectedMap: result, optionsMap };
 }
 function ValueSelector(props) {
-    const { options, value, filter, onChange, allowReorder, singleSelect, toLabel, toIdentifier, noSelectionLabel, clearSelectionLabel, showSelectedOnlyLabel, xSelectedLabel, selectionBoxPosition = 'bottom', onShowSelectedOnlyChange, isOptionDisabled, disabled, } = 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 preparedToLabel = toListLabel !== null && toListLabel !== void 0 ? toListLabel : toLabel;
     const [selectedOnly, doSetSelectedOnly] = react_1.useState(false);
     const setSelectedOnly = react_1.useCallback((selectedOnly) => {
         doSetSelectedOnly(selectedOnly);
@@ -58,11 +62,11 @@ function ValueSelector(props) {
     }, [onChange, selectedOnly, selectedMap]);
     const renderOption = (option, index) => {
         const identifier = toIdentifier(option);
-        const label = !allowReorder ? toLabel(option) : null;
+        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({ alignItems: "center", mt: index ? 1 : 0, key: identifier, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option" }, props, { style: Object.assign({ borderRadius: 'var(--ab__border-radius)' }, props === null || props === void 0 ? void 0 : props.style) }),
-                React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center" },
+                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) => {
@@ -83,7 +87,7 @@ function ValueSelector(props) {
                             }
                             notifyChange();
                         }, checked: selectedMap.has(identifier) }, label)),
-                    React.createElement(rebass_1.Text, { ml: 2 }, allowReorder ? toLabel(option) : null))));
+                    React.createElement(rebass_1.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 renderNode(Object.assign(Object.assign({ ref: draggableProvided.innerRef }, draggableProvided.draggableProps), { style: draggableProvided.draggableProps.style }), draggableProvided.dragHandleProps);
@@ -108,9 +112,14 @@ function ValueSelector(props) {
             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 showSelectedOnlyPosition = (_a = props.showSelectedOnlyPosition) !== null && _a !== void 0 ? _a : 'floating';
     return (React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, className: "ab-ValueSelector", style: {
             overflow: 'hidden',
         } },
+        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)),
         selectionBoxPosition === 'top' && renderSelectionSection(),
         React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: (result) => {
                 const { source, destination } = result;
@@ -136,7 +145,7 @@ function ValueSelector(props) {
                 notifyChange();
             } },
             React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
-                React.createElement(rebass_1.Box, { style: {
+                showSelectedOnlyPosition === 'floating' && (React.createElement(rebass_1.Box, { style: {
                         position: 'sticky',
                         top: 0,
                         zIndex: 10000,
@@ -147,15 +156,14 @@ function ValueSelector(props) {
                             right: 0,
                             borderRadius: 'var(--ab__border-radius)',
                             overflow: 'hidden',
-                        }, fontSize: 2, backgroundColor: "defaultbackground" },
-                        React.createElement(CheckBox_1.CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel !== null && showSelectedOnlyLabel !== void 0 ? showSelectedOnlyLabel : 'Show Selected Only'))),
+                        }, fontSize: 2, backgroundColor: "defaultbackground" }, showOnlySelectedCheckbox))),
                 React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, (droppableProvided) => {
                     return (React.createElement("div", Object.assign({ ref: droppableProvided.innerRef }, droppableProvided.droppableProps),
                         options
                             .filter((option) => {
                             let result = true;
                             if (filter) {
-                                result = filter(option);
+                                result = filter(option, searchInputValue);
                             }
                             result =
                                 result && (selectedOnly ? selectedMap.has(toIdentifier(option)) : true);

package/src/View/FormatColumn/FormatColumnSummary.js

@@ -68,7 +68,8 @@ class FormatColumnSummaryComponent extends React.Component {
         });
     }
     onCloseWizard() {
-        this.setState({
+        var _a;
+        (_a = this === null || this === void 0 ? void 0 : this.setState) === null || _a === void 0 ? void 0 : _a.call(this, {
             editedAdaptableObject: null,
             wizardStartIndex: 0,
             wizardStatus: EditableConfigEntityState_1.WizardStatus.None,

package/src/View/Layout/Wizard/LayoutEditor/index.js

@@ -226,7 +226,7 @@ exports.LayoutEditor = React.memo((props) => {
                         const initialHeader = api.columnApi.getFriendlyNameFromColumnId(c.columnId);
                         return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "stretch", "data-name": "drag-item", "data-col-id": c.columnId },
                             React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", backgroundColor: "secondary", color: "text-on-secondary" },
-                                React.createElement(rebass_1.Flex, { flex: 1, alignItems: "center" },
+                                React.createElement(rebass_1.Flex, { alignItems: "center" },
                                     React.createElement(rebass_1.Box, { ml: 2, mr: 2 },
                                         React.createElement(icons_1.Icon, { name: "drag", size: 30 })),
                                     initialHeader,

package/src/View/Layout/Wizard/LayoutWizard.d.ts

@@ -1,9 +1,6 @@
 import * as React from 'react';
-import { AdaptableObjectAdaptableWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
-import { ColumnSort } from '../../../PredefinedConfig/Common/ColumnSort';
-export interface LayoutWizardProps extends AdaptableObjectAdaptableWizardProps<LayoutWizard> {
-    ColumnSorts: ColumnSort[];
-}
-export declare class LayoutWizard extends React.Component<LayoutWizardProps, {}> {
-    render(): JSX.Element;
+import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
+import { Layout } from '../../../../types';
+export interface LayoutWizardProps extends AdaptableOnePageWizardProps<Layout> {
 }
+export declare const LayoutWizard: React.FunctionComponent<LayoutWizardProps>;

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -3,18 +3,132 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const AdaptableWizard_1 = require("../../Wizard/AdaptableWizard");
-const LayoutEditorWizard_1 = require("./LayoutEditorWizard");
-class LayoutWizard extends React.Component {
-    render() {
-        let layouts = this.props.configEntities;
-        return (React.createElement(AdaptableWizard_1.AdaptableWizard, { style: { maxWidth: '', height: '80vh' }, moduleInfo: this.props.moduleInfo, modalContainer: this.props.modalContainer, api: this.props.api, showStepsLegend: false, closeText: "CANCEL", closeTooltip: "Cancel changes and close Layout Editor", steps: [
-                {
-                    StepName: 'Layout Editor',
-                    Index: 0,
-                    Element: (React.createElement(LayoutEditorWizard_1.LayoutEditorWizard, { api: this.props.api, Layouts: layouts, moduleInfo: this.props.moduleInfo })),
+const react_1 = require("react");
+const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const SettingsSection_1 = require("./sections/SettingsSection");
+const rebass_1 = require("rebass");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const react_redux_1 = require("react-redux");
+const ColumnsSection_1 = require("./sections/ColumnsSection");
+const PivotColumnsSection_1 = require("./sections/PivotColumnsSection");
+const RowGroupingSection_1 = require("./sections/RowGroupingSection");
+const AggregationsSection_1 = require("./sections/AggregationsSection");
+const SortSection_1 = require("./sections/SortSection");
+const FilterSection_1 = require("./sections/FilterSection");
+const LayoutWizard = (props) => {
+    var _a, _b;
+    const dispatch = react_redux_1.useDispatch();
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const allLayouts = adaptable.api.layoutApi.getAllLayout();
+    const initialLayout = (_a = props.data) !== null && _a !== void 0 ? _a : (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.value;
+    const [layout, setLayout] = react_1.useState(() => {
+        var _a;
+        if (initialLayout) {
+            const preparedLayout = Helper_1.cloneObject(initialLayout);
+            if (((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'Clone') {
+                preparedLayout.Name = '';
+            }
+            return preparedLayout;
+        }
+        return ObjectFactory_1.default.CreateEmptyLayout({ Name: '' });
+    });
+    const handleFinish = () => {
+        var _a;
+        let action = (_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.action;
+        if (!action) {
+            action = initialLayout ? 'Edit' : 'New';
+        }
+        switch (action) {
+            case 'Edit':
+                const currentLayout = adaptable.api.layoutApi.getCurrentLayout();
+                dispatch(LayoutRedux.LayoutSave(layout));
+                if (currentLayout.Uuid === layout.Uuid) {
+                    dispatch(LayoutRedux.LayoutSelect(layout.Name));
+                }
+                break;
+            case 'Clone':
+                const clonedLayout = Object.assign({}, layout);
+                delete clonedLayout.Uuid;
+                dispatch(LayoutRedux.LayoutAdd(clonedLayout));
+                dispatch(LayoutRedux.LayoutSelect(clonedLayout.Name));
+                break;
+            case 'New':
+                dispatch(LayoutRedux.LayoutAdd(layout));
+                dispatch(LayoutRedux.LayoutSelect(layout.Name));
+        }
+        props.onFinishWizard(layout);
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { titleContainerStyle: { width: 180 }, defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                title: 'Settings',
+                details: 'Configure Layout',
+                isValid: () => {
+                    if (!layout.Name) {
+                        return 'Layout name cannot be blank';
+                    }
+                    if (allLayouts.some((layoutItem) => layoutItem.Name === layout.Name && layoutItem.Uuid !== layout.Uuid)) {
+                        return 'A Layout already exists with that name';
+                    }
+                    return true;
                 },
-            ], data: this.props.editedAdaptableObject, stepStartIndex: this.props.wizardStartIndex, onHide: () => this.props.onCloseWizard(), onFinish: () => this.props.onFinishWizard(), canFinishWizard: () => this.props.canFinishWizard() }));
-    }
-}
+                renderSummary: () => React.createElement(SettingsSection_1.SettingsSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(SettingsSection_1.SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+            },
+            {
+                title: 'Columns',
+                details: 'Select Columns',
+                isVisible: () => !(layout === null || layout === void 0 ? void 0 : layout.EnablePivot),
+                renderSummary: () => React.createElement(ColumnsSection_1.ColumnsSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(ColumnsSection_1.ColumnsSection, { onChange: setLayout }))),
+            },
+            {
+                title: 'Pivot Columns',
+                details: 'Select Pivot Columns',
+                isVisible: () => layout === null || layout === void 0 ? void 0 : layout.EnablePivot,
+                renderSummary: () => React.createElement(PivotColumnsSection_1.PivotColumnsSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(PivotColumnsSection_1.PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+            },
+            {
+                title: 'Row Groups',
+                details: 'Configure Row Grouping',
+                renderSummary: () => React.createElement(RowGroupingSection_1.RowGroupingSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(RowGroupingSection_1.RowGroupingSection, { onChange: setLayout }))),
+            },
+            {
+                title: 'Aggregations',
+                details: 'Select Column Aggregations',
+                renderSummary: () => React.createElement(AggregationsSection_1.AggregationsSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(AggregationsSection_1.AggregationsSection, { onChange: setLayout }))),
+            },
+            {
+                title: 'Sort',
+                renderSummary: () => React.createElement(SortSection_1.SortSectionSummary, null),
+                details: 'Configure Column Sorts',
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+            },
+            {
+                title: 'Filters',
+                details: 'Column Filters',
+                renderSummary: () => React.createElement(FilterSection_1.FilterSectionSummary, null),
+                render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(FilterSection_1.FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+            },
+            '-',
+            {
+                details: 'Review your Layout',
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null))),
+                title: 'Summary',
+            },
+        ] }));
+};
 exports.LayoutWizard = LayoutWizard;

package/src/View/Layout/Wizard/sections/AggregationsSection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Layout } from '../../../../../types';
+export declare const AggregationsSectionSummary: React.FunctionComponent;
+interface AggregationsSectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const AggregationsSection: React.FunctionComponent<AggregationsSectionProps>;
+export {};