@adaptabletools/adaptable 12.1.8-canary.1 → 12.2.0-canary.0

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

@@ -42,6 +42,7 @@ 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] = react_1.useState(false);
     const setSelectedOnly = react_1.useCallback((selectedOnly) => {
@@ -65,7 +66,7 @@ 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({ 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) }),
+            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,
@@ -94,7 +95,7 @@ function ValueSelector(props) {
         }));
     };
     const renderSelectionSection = () => {
-        const selectionBox = (React.createElement(rebass_1.Box, { fontSize: 2, style: { whiteSpace: 'nowrap', flex: 'none' } }, !value.length ? (React.createElement(React.Fragment, null, noSelectionLabel !== null && noSelectionLabel !== void 0 ? noSelectionLabel : 'No selected options',
+        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: () => {
                     options.forEach((option) => {
                         selectedMap.set(toIdentifier(option), option);
@@ -108,15 +109,13 @@ function ValueSelector(props) {
             xSelectedLabel
                 ? xSelectedLabel(value.length)
                 : `Your selected ${value.length} ${value.length > 1 ? 'options' : 'option'}.`))));
-        return (React.createElement(rebass_1.Box, { mt: selectionBoxPosition === 'bottom' ? 3 : 0, mb: selectionBoxPosition === 'top' ? 3 : 0 },
+        return (React.createElement(rebass_1.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 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',
-        } },
+    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)),
@@ -144,19 +143,9 @@ function ValueSelector(props) {
                 });
                 notifyChange();
             } },
-            React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
-                showSelectedOnlyPosition === 'floating' && (React.createElement(rebass_1.Box, { style: {
-                        position: 'sticky',
-                        top: 0,
-                        zIndex: 10000,
-                    } },
-                    React.createElement(rebass_1.Box, { mr: 1, mt: 1, px: 2, "data-name": "show-selected-only", style: {
-                            position: 'absolute',
-                            top: 0,
-                            right: 0,
-                            borderRadius: 'var(--ab__border-radius)',
-                            overflow: 'hidden',
-                        }, fontSize: 2, backgroundColor: "defaultbackground" }, showOnlySelectedCheckbox))),
+            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) => {
                     return (React.createElement("div", Object.assign({ ref: droppableProvided.innerRef }, droppableProvided.droppableProps),
                         options

package/src/View/CustomSort/CustomSortSummary.js

@@ -53,7 +53,7 @@ class CustomSortSummaryComponent extends React.Component {
         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 }));
         }
-        return (React.createElement("div", null,
+        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 }))));
     }

package/src/View/Dashboard/DashboardPopup.js

@@ -72,18 +72,19 @@ class DashboardPopupComponent extends React.Component {
         };
         return (React.createElement(PopupPanel_1.PopupPanel, { headerText: this.props.moduleInfo.FriendlyName, glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() },
             React.createElement(rebass_1.Flex, { flex: 1, height: "100%", flexDirection: "column" },
-                areDashboardSettingsVisible && (React.createElement(Panel_1.default, { header: 'Dashboard Views', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none", marginLeft: 2, marginRight: 2 },
-                    React.createElement(rebass_1.Flex, null,
-                        React.createElement(CheckBox_1.CheckBox, { mr: 3, className: `${baseClassName}__Checkbox__collapsed-check`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
-                        ' ',
-                        this.props.api.internalApi.getAdaptableOptions().dashboardOptions.canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, className: `${baseClassName}__Checkbox__collapsed-check`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
-                        ' ',
-                        React.createElement(CheckBox_1.CheckBox, { className: `${baseClassName}__Checkbox__hidden-check`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")))),
-                React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4, marginLeft: 2, marginRight: 2 },
-                    React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "dashboard-configuration-select" },
+                areDashboardSettingsVisible && (React.createElement(Panel_1.default, { header: 'Dashboard Views', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
+                    React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "collapse", className: `${baseClassName}__settings-option`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
+                    ' ',
+                    this.props.api.internalApi.getAdaptableOptions().dashboardOptions.canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
+                    ' ',
+                    React.createElement(CheckBox_1.CheckBox, { "data-name": "hidden", className: `${baseClassName}__settings-option`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden"))),
+                React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4 },
+                    React.createElement(rebass_1.Flex, { className: `${baseClassName}__contents-selector`, flexDirection: "row", padding: 2 },
                         React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Toolbars, checked: this.state.DashboardConfigView == DashboardConfigView.Toolbars, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Toolbars"),
                         React.createElement(Radio_1.default, { marginLeft: 3, value: DashboardConfigView.Buttons, checked: this.state.DashboardConfigView == DashboardConfigView.Buttons, onChange: (_, e) => this.onDashboardConfigViewChanged(e) }, "Buttons")),
-                    React.createElement(rebass_1.Box, { className: `${baseClassName}__Module-Selector`, style: { minHeight: 0, flex: '1 1 0' }, padding: 2 },
+                    React.createElement(rebass_1.Box, { className: `${baseClassName}__Module-Selector`, "data-name": this.state.DashboardConfigView === DashboardConfigView.Toolbars
+                            ? 'toolbars'
+                            : 'buttons', style: { minHeight: 0, flex: '1 1 0' }, padding: 2 },
                         this.state.DashboardConfigView == DashboardConfigView.Toolbars && (React.createElement(DashboardManager_1.default, { disabled: isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: this.props.onDashboardSetTabs, api: this.props.api })),
                         this.state.DashboardConfigView == DashboardConfigView.Buttons && (React.createElement(ModuleValueSelector_1.ModuleValueSelector, { disabled: isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, noSelectionLabel: 'No selected Module Button', isOptionDisabled: isModuleCheckboxDisabled, xSelectedLabel: () => `Visible Module Buttons:`, onChange: (selectedValues) => this.props.onDashboardSetModuleButtons(selectedValues) })))))));
     }

package/src/View/Export/ExportViewPanel.js

@@ -78,9 +78,9 @@ class ExportViewPanelComponent extends React.Component {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { style: { gap: 5 }, flexDirection: "row", className: `ab-${elementType}__Export__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(rebass_1.Flex, { flex: 1 },
-                React.createElement(DropdownButton_1.default, { disabled: allReportNames.length == 0, style: { width: '100%', fontSize: 'small' }, items: reportItems, columns: ['label'], className: `ab-${elementType}__Export__select`, onClear: () => this.onSelectedReportChanged(null), showClearButton: !!currentReport, variant: "outlined", marginRight: 2 }, currentReportId)),
+                React.createElement(DropdownButton_1.default, { disabled: allReportNames.length == 0, width: "100%", fontSize: "small", items: reportItems, columns: ['label'], className: `ab-${elementType}__Export__select`, onClear: () => this.onSelectedReportChanged(null), showClearButton: !!currentReport, variant: "outlined", marginRight: 2 }, currentReportId)),
             React.createElement(rebass_1.Flex, { flex: 1 },
-                React.createElement(DropdownButton_1.default, { disabled: currentReportId === constants_1.SELECT_REPORT_STRING, style: { width: '100%', fontSize: 'small' }, items: destinationItems, columns: ['label'], className: `ab-${elementType}__Export__export`, onClear: () => this.onSelectedDestinationChanged(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId)),
+                React.createElement(DropdownButton_1.default, { disabled: currentReportId === constants_1.SELECT_REPORT_STRING, width: "100%", fontSize: "small", items: destinationItems, columns: ['label'], className: `ab-${elementType}__Export__export`, onClear: () => this.onSelectedDestinationChanged(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId)),
             React.createElement(rebass_1.Flex, { className: join_1.default(accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Export__controls`), style: { width: '100%' } },
                 React.createElement(ButtonExport_1.ButtonExport, { onClick: () => onApplyExport(), tooltip: "Export Report", className: `ab-${elementType}__Export__export`, disabled: currentReport == null || currentDestination == null }),
                 React.createElement(ButtonEdit_1.ButtonEdit, { onClick: () => this.props.onEditReport(this.props.moduleInfo.Popup), tooltip: "Edit Report", className: `ab-${elementType}__Export__edit`, disabled: currentReport == null || this.props.api.exportApi.isCustomReport(currentReport), accessLevel: accessLevel }),

package/src/View/Export/Wizard/ReportRowsWizardSection.js

@@ -19,7 +19,7 @@ const isValidReportRowsQuery = (report) => {
 };
 exports.isValidReportRowsQuery = isValidReportRowsQuery;
 const renderReportRowsSummary = (report) => {
-    var _a;
+    const { api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     return (React.createElement(rebass_1.Box, { fontSize: 2 },
         report.ReportRowScope === 'AllRows' ? (React.createElement(React.Fragment, null,
             "Include ",
@@ -30,8 +30,9 @@ const renderReportRowsSummary = (report) => {
             React.createElement("b", null, "only visible Rows"),
             " in the Report")) : null,
         report.ReportRowScope === 'ExpressionRows' ? (React.createElement(React.Fragment, null,
-            "Include Rows matching the query: ",
-            React.createElement(Tag_1.Tag, null, (_a = report.Query) === null || _a === void 0 ? void 0 : _a.BooleanExpression))) : null));
+            "Include Rows matching the query:",
+            ' ',
+            React.createElement(Tag_1.Tag, null, api.internalApi.getAdaptableQueryExpressionText(report.Query)))) : null));
 };
 exports.renderReportRowsSummary = renderReportRowsSummary;
 const ReportRowsWizardSection = (props) => {

package/src/View/Filter/FilterViewPanel.js

@@ -13,6 +13,7 @@ const CheckBox_1 = require("../../components/CheckBox");
 const react_redux_1 = require("react-redux");
 const LayoutRedux_1 = require("../../Redux/ActionsReducers/LayoutRedux");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 class FilterViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -35,8 +36,8 @@ class FilterViewPanelComponent extends React.Component {
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(rebass_1.Flex, null,
                 ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, null)], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })),
-                showClearButton && (React.createElement(ButtonClear_1.ButtonClear, { marginLeft: 1, marginBottom: 0, marginRight: 1, className: `ab-${elementType}__Filter__clear`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear')),
-                showSuspendFilterButton && (React.createElement(SimpleButton_1.default, { disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel }))),
+                showClearButton && (React.createElement(ButtonClear_1.ButtonClear, { className: `ab-${elementType}__Filter__clear`, marginLeft: 1, marginBottom: 0, marginRight: 1, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear')),
+                showSuspendFilterButton && (React.createElement(SimpleButton_1.default, { className: join_1.default(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel }))),
             React.createElement(rebass_1.Flex, { alignItems: "center" }, this.props.api.filterApi.isQuickFilterAvailable() && (React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Filter__active-check`, disabled: this.props.accessLevel === 'ReadOnly' ||
                     this.props.api.internalApi.isGridInPivotMode(), marginTop: 0, marginBottom: 0, fontSize: 2, padding: 1, checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                     checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();

package/src/View/GridInfo/AdaptableObjectsSummary.js

@@ -4,13 +4,15 @@ exports.AdaptableObjectsSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableObjectList_1 = require("../Components/AdaptableObjectList");
 const AdaptableObjectsSummary = () => {
     const state = react_redux_1.useSelector((state) => state);
     const adaptable = AdaptableContext_1.useAdaptable();
     const modules = adaptable.ModuleService.getModuleCollection();
-    return (React.createElement(React.Fragment, null, [...modules].map(([moduleName, module]) => {
+    const baseClassName = 'ab-AdaptableObjectsSummary';
+    return (React.createElement(rebass_1.Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
         var _a;
         if (!module.isModuleAvailable()) {
             return null;
@@ -19,8 +21,8 @@ const AdaptableObjectsSummary = () => {
         if (!(items === null || items === void 0 ? void 0 : items.length)) {
             return null;
         }
-        return (React.createElement("div", { key: module.moduleInfo.ModuleName },
-            React.createElement("b", null, module.moduleInfo.FriendlyName),
+        return (React.createElement(rebass_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, key: module.moduleInfo.ModuleName },
+            React.createElement("b", { className: `${baseClassName}__header` }, module.moduleInfo.FriendlyName),
             (items === null || items === void 0 ? void 0 : items.length) && React.createElement(AdaptableObjectList_1.AdaptableObjectList, { items: items, module: module })));
     })));
 };

package/src/View/GridInfo/AdaptableOptionsComponent.js

@@ -91,7 +91,7 @@ const OptionContainerComponent = (props) => {
         onViewModeChange(viewMode === 'expanded' ? 'collapsed' : 'expanded');
     };
     const panelButton = viewMode === 'expanded' ? (React.createElement(ButtonMinimise_1.ButtonMinimise, { onClick: () => requestViewModeChange(), tooltip: `Hide ${label}` })) : (React.createElement(ButtonMaximise_1.ButtonMaximise, { onClick: () => requestViewModeChange(), tooltip: `Show ${label}` }));
-    return (React.createElement(PanelWithButton_1.PanelWithButton, { className: `options-container-${name}`, variant: "default", headerText: label, headerProps: {
+    return (React.createElement(PanelWithButton_1.PanelWithButton, { className: `ab-OptionsContainer options-container-${name}`, variant: "default", headerText: label, headerProps: {
             fontSize: 3,
             style: {
                 fontWeight: viewMode === 'expanded' ? 800 : 400,

package/src/View/GridInfo/GridInfoPopup.js

@@ -102,17 +102,16 @@ const GridInfoPopup = (props) => {
         return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: x });
     });
     const showRadioButtons = [showGridSummary, showAdaptableOptions, showColumnInfo, showAdaptableObjects].filter((item) => item).length > 1;
-    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Grid Info', glyphicon: 'info' },
-        React.createElement(rebass_1.Flex, { marginBottom: 2, padding: 3 }, showRadioButtons && (React.createElement(React.Fragment, null,
-            showGridSummary && (React.createElement(Radio_1.default, { "data-name": "radioButton-GridSummary", marginRight: 3, value: "GridSummary", checked: state.ActiveTab == 'GridSummary', onChange: (_, e) => onShowGridSummaryChanged('GridSummary') }, "Summary")),
+    const baseClassName = 'ab-GridInfo';
+    return (React.createElement(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: 'Grid Info', glyphicon: 'info' },
+        React.createElement(rebass_1.Flex, { className: `${baseClassName}__header`, marginBottom: 2, padding: 3 }, showRadioButtons && (React.createElement(React.Fragment, null,
+            showGridSummary && (React.createElement(Radio_1.default, { className: `${baseClassName}__option-radio`, "data-name": "radioButton-GridSummary", marginRight: 3, value: "GridSummary", checked: state.ActiveTab == 'GridSummary', onChange: (_, e) => onShowGridSummaryChanged('GridSummary') }, "Summary")),
             showAdaptableOptions && (React.createElement(Radio_1.default, { "data-name": "radioButton-AdaptableOptions", marginRight: 3, value: "AdaptableOptions", checked: state.ActiveTab == 'AdaptableOptions', onChange: (_, e) => onShowGridSummaryChanged('AdaptableOptions') }, "Options")),
             showColumnInfo && (React.createElement(Radio_1.default, { "data-name": "radioButton-Column", marginRight: 3, value: "Column", checked: state.ActiveTab == 'ColumnInfo', onChange: (_, e) => onShowGridSummaryChanged('ColumnInfo') }, "Columns")),
             showAdaptableObjects && (React.createElement(Radio_1.default, { "data-name": "radioButton-Column", value: "Column", checked: state.ActiveTab == 'AdaptableObjectsSummary', onChange: (_, e) => onShowGridSummaryChanged('AdaptableObjectsSummary') }, "Objects"))))),
-        state.ActiveTab == 'GridSummary' && (React.createElement(rebass_1.Box, { margin: 2 },
-            React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { colItems: propValueColItems, items: gridSummaries }))),
+        state.ActiveTab == 'GridSummary' && (React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { margin: 2, colItems: propValueColItems, items: gridSummaries })),
         state.ActiveTab == 'AdaptableOptions' && React.createElement(AdaptableOptionsComponent_1.AdaptableOptionsComponent, { api: props.api }),
-        state.ActiveTab == 'ColumnInfo' && (React.createElement("div", null,
-            React.createElement(ColumnInfoComponent_1.ColumnInfoComponent, { api: props.api, teamSharingActivated: props.teamSharingActivated, column: state.CurrentColumn }))),
+        state.ActiveTab == 'ColumnInfo' && (React.createElement(ColumnInfoComponent_1.ColumnInfoComponent, { api: props.api, teamSharingActivated: props.teamSharingActivated, column: state.CurrentColumn })),
         state.ActiveTab === 'AdaptableObjectsSummary' && React.createElement(AdaptableObjectsSummary_1.AdaptableObjectsSummary, null)));
 };
 exports.GridInfoPopup = GridInfoPopup;

package/src/View/Query/Wizard/NamedQueryExpressionWizardSection.js

@@ -6,7 +6,6 @@ const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const rebass_1 = require("rebass");
 const ExpressionEditor_1 = require("../../../components/ExpressionEditor");
-const AdaptableContext_1 = require("../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants");
 const Tag_1 = require("../../../components/Tag");
@@ -22,14 +21,14 @@ const isValidNamedQueryExpression = (data, api) => {
 };
 exports.isValidNamedQueryExpression = isValidNamedQueryExpression;
 const renderNamedQueryExpressionSummary = (data) => {
+    const { api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     return (React.createElement(rebass_1.Text, { fontSize: 2 },
         "Expression: ",
-        React.createElement(Tag_1.Tag, null, data.BooleanExpression)));
+        React.createElement(Tag_1.Tag, null, api.internalApi.getAdaptableQueryExpressionText(data))));
 };
 exports.renderNamedQueryExpressionSummary = renderNamedQueryExpressionSummary;
 const NamedQueryExpressionWizardSection = (props) => {
-    const { api } = AdaptableContext_1.useAdaptable();
-    const { data, moduleInfo } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
+    const { data, moduleInfo, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const initialData = react_1.useMemo(() => api.internalApi.getQueryPreviewData(), []);
     return (React.createElement(ExpressionEditor_1.ExpressionEditor, { allowSaveNamedQuery: false, type: 'boolean', module: moduleInfo.ModuleName, value: data.BooleanExpression, onChange: (BooleanExpression) => {
             props.onChange(Object.assign(Object.assign({}, data), { BooleanExpression }));

package/src/View/StateManagement/StateManagementPopup.js

@@ -4,30 +4,29 @@ exports.StateManagementPopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const rebass_1 = require("rebass");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
 const LoadButton_1 = require("./components/LoadButton");
 const ClearButton_1 = require("./components/ClearButton");
 const ExportDropdown_1 = require("./components/ExportDropdown");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const StateManagementPopup = (props) => {
-    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
-        React.createElement(rebass_1.Box, null,
-            React.createElement(Panel_1.default, { header: 'User State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2 },
-                React.createElement(HelpBlock_1.default, { marginBottom: 2 }, 'Clear all current user state that has been persisted.'),
-                React.createElement(HelpBlock_1.default, null, 'This will cause this window to close and any state you have previously created will be lost and the initial Predefined Config will then be reapplied.'),
-                React.createElement(ClearButton_1.ClearButton, { tone: "error", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.configApi.reloadPredefinedConfig() }, "Clear User State")),
-            React.createElement(Panel_1.default, { header: 'Load Predefined Config', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2 },
-                React.createElement(HelpBlock_1.default, { marginTop: 2 }, 'Load Predefined Config (from a .json file).  This will cause this window to close.'),
-                ' ',
-                React.createElement(LoadButton_1.LoadButton, { tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onLoad: (json) => props.api.configApi.reloadPredefinedConfig(json) }, "Load Predefined Config")),
-            React.createElement(Panel_1.default, { header: 'Export Adaptable State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2 },
-                React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, 'Exports the currently persisted Adaptable state.'),
-                ' ',
-                React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'] }, "Select Export Destination")),
-            React.createElement(Panel_1.default, { header: 'Export Initial Predefined Config', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2 },
-                React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, 'Exports the Predefined Config which was provided at design time.'),
-                ' ',
-                React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'] }, "Select Export Destination")))));
+    const baseClassName = 'ab-ManageState';
+    return (React.createElement(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
+        React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "user-state", header: 'User State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginRight: 2, mb: 2 },
+            React.createElement(HelpBlock_1.default, { marginBottom: 2 }, 'Clear all current user state that has been persisted.'),
+            React.createElement(HelpBlock_1.default, null, 'This will cause this window to close and any state you have previously created will be lost and the initial Predefined Config will then be reapplied.'),
+            React.createElement(ClearButton_1.ClearButton, { tone: "error", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.configApi.reloadPredefinedConfig() }, "Clear User State")),
+        React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "predefined-config", header: 'Load Predefined Config', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
+            React.createElement(HelpBlock_1.default, { marginTop: 2 }, 'Load Predefined Config (from a .json file).  This will cause this window to close.'),
+            ' ',
+            React.createElement(LoadButton_1.LoadButton, { tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onLoad: (json) => props.api.configApi.reloadPredefinedConfig(json) }, "Load Predefined Config")),
+        React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "adaptable-state", header: 'Export Adaptable State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
+            React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, 'Exports the currently persisted Adaptable state.'),
+            ' ',
+            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'] }, "Select Export Destination")),
+        React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "initial-predefined-config", header: 'Export Initial Predefined Config', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
+            React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, 'Exports the Predefined Config which was provided at design time.'),
+            ' ',
+            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "predefinedConfig", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'] }, "Select Export Destination"))));
 };
 exports.StateManagementPopup = StateManagementPopup;

package/src/agGrid/Adaptable.d.ts

@@ -265,6 +265,8 @@ export declare class Adaptable implements IAdaptable {
     setupColumnTooltipValueGetter({ col, colId, abColumn }: ColumnSetupInfo): void;
     setupColumnQuickFilerText({ col, abColumn }: ColumnSetupInfo): void;
     setupAllowedAggFuncs({ col, abColumn }: ColumnSetupInfo): void;
+    triggerSetupColumnKeyCreator(colId: string): void;
+    setupColumnKeyCreator(columnSetupInfo: ColumnSetupInfo): void;
     setupColumnHeader({ col, abColumn }: ColumnSetupInfo): boolean;
     setupColumnFilter({ col, colDef }: ColumnSetupInfo): void;
     setupColumnFloatingFilter({ col, colDef }: ColumnSetupInfo): void;

package/src/agGrid/Adaptable.js

@@ -1305,9 +1305,11 @@ class Adaptable {
             }
             newColState.rowGroupIndex =
                 groupedColumnsIndexesMap[colId] != null ? groupedColumnsIndexesMap[colId] : null;
-            // if (newColState.rowGroupIndex == null) {
+            const previousRowGroup = newColState.rowGroup;
             newColState.rowGroup = newColState.rowGroupIndex != null;
-            // }
+            if (!previousRowGroup && newColState.rowGroup) {
+                this.triggerSetupColumnKeyCreator(colId);
+            }
             const normalizePinned = (pinnedValue) => {
                 if (typeof pinnedValue === 'string') {
                     return pinnedValue;
@@ -2408,7 +2410,6 @@ class Adaptable {
     }
     getColDefsForCalculatedColumns() {
         const defaultCalculatedColumnSettings = ObjectFactory_1.CreateEmptyCalculatedColumn().CalculatedColumnSettings;
-        const isExternalEvaluation = !this.api.internalApi.runModuleInAdaptableQL('CalculatedColumn');
         return this.api.calculatedColumnApi.getAllCalculatedColumn().map((calculatedColumn) => {
             const calculatedColumnSettings = Object.assign(Object.assign({}, defaultCalculatedColumnSettings), calculatedColumn.CalculatedColumnSettings);
             if (!calculatedColumnSettings.DataType) {
@@ -2422,6 +2423,7 @@ class Adaptable {
             if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(calculatedColumnSettings.ColumnTypes)) {
                 columnTypes.push(...calculatedColumnSettings.ColumnTypes);
             }
+            const isExternalEvaluation = !this.api.internalApi.evaluateExpressionInAdaptableQL('CalculatedColumn', this.api.queryLanguageApi.getAdaptableQueryExpression(calculatedColumn.Query));
             const newColDef = {
                 headerName: calculatedColumn.FriendlyName
                     ? calculatedColumn.FriendlyName
@@ -2451,7 +2453,7 @@ class Adaptable {
             if (calculatedColumnSettings.ShowToolTip != null &&
                 calculatedColumnSettings.ShowToolTip == true) {
                 newColDef.tooltipValueGetter = () => {
-                    return this.api.queryLanguageApi.getAdaptableQueryExpression(calculatedColumn.Query);
+                    return this.api.internalApi.getAdaptableQueryExpressionText(calculatedColumn.Query);
                 };
             }
             if (calculatedColumnSettings.HeaderToolTip) {
@@ -2922,26 +2924,28 @@ class Adaptable {
                     (originalIsExternalFilterPresent ? originalIsExternalFilterPresent(params) : false));
             };
         });
-        const evaluateQueryOnClient = this.api.internalApi.runModuleInAdaptableQL('Query');
-        const evaluateFilterOnClient = this.api.internalApi.runModuleInAdaptableQL('Filter');
         this.setGridOptionsProperty('doesExternalFilterPass', (originalDoesExternalFilterPass) => {
             return (node) => {
                 if (this.isDestroyed) {
                     return true;
                 }
                 // first we assess Query (if its running locally)
-                if (evaluateQueryOnClient && !this.isGroupRowNode(node)) {
+                if (!this.isGroupRowNode(node)) {
                     const currentQuery = this.api.queryApi.getCurrentQuery();
                     if (currentQuery) {
-                        const isCurrentQueryValid = this.api.queryLanguageApi.isValidBooleanExpression(currentQuery, ModuleConstants_1.QueryModuleId, `Invalid CurrentQuery '${currentQuery}'`);
-                        if (!isCurrentQueryValid ||
-                            !this.api.internalApi
-                                .getQueryLanguageService()
-                                .evaluateBooleanExpression(currentQuery, ModuleConstants_1.QueryModuleId, node)) {
-                            return false;
+                        const evaluateQueryOnClient = this.api.internalApi.evaluateExpressionInAdaptableQL('Query', currentQuery);
+                        if (evaluateQueryOnClient) {
+                            const isCurrentQueryValid = this.api.queryLanguageApi.isValidBooleanExpression(currentQuery, ModuleConstants_1.QueryModuleId, `Invalid CurrentQuery '${currentQuery}'`);
+                            if (!isCurrentQueryValid ||
+                                !this.api.internalApi
+                                    .getQueryLanguageService()
+                                    .evaluateBooleanExpression(currentQuery, ModuleConstants_1.QueryModuleId, node)) {
+                                return false;
+                            }
                         }
                     }
                 }
+                const evaluateFilterOnClient = this.api.internalApi.evaluateExpressionInAdaptableQL('Filter');
                 try {
                     // we then assess filters (if running locally)
                     if (evaluateFilterOnClient) {
@@ -3060,6 +3064,7 @@ class Adaptable {
             this.setupColumnHeader(colSetupInfo);
             this.setupColumnQuickFilerText(colSetupInfo);
             this.setupAllowedAggFuncs(colSetupInfo);
+            this.setupColumnKeyCreator(colSetupInfo);
         });
         this.setupRowStyling();
         // setupAggregationColumnHeaders() is executed on every setLayout()
@@ -3320,6 +3325,44 @@ class Adaptable {
             return abColumn.availableAggregationFunctions;
         });
     }
+    triggerSetupColumnKeyCreator(colId) {
+        const col = this.gridOptions.columnApi.getColumn(colId);
+        const colDef = col.getColDef();
+        const abColumn = this.api.columnApi.getColumnFromId(colId);
+        const colSetupInfo = {
+            col,
+            colDef,
+            colId,
+            abColumn,
+        };
+        this.setupColumnKeyCreator(colSetupInfo);
+    }
+    setupColumnKeyCreator(columnSetupInfo) {
+        const { col, abColumn } = columnSetupInfo;
+        const adaptableOptions = this.adaptableOptions;
+        const adaptableApi = this.api;
+        this.setColDefProperty(col, 'keyCreator', (userPropertyValue) => {
+            return (params) => {
+                var _a;
+                if (typeof userPropertyValue === 'function') {
+                    return userPropertyValue(params);
+                }
+                const value = params.value;
+                const groupUnbalancedGroupsUnderKey = (_a = adaptableOptions.layoutOptions) === null || _a === void 0 ? void 0 : _a.groupUnbalancedGroupsUnderKey;
+                if (!groupUnbalancedGroupsUnderKey) {
+                    return value;
+                }
+                let groupUnbalancedGroupsUnderKeyValue = typeof groupUnbalancedGroupsUnderKey === 'function'
+                    ? groupUnbalancedGroupsUnderKey({
+                        adaptableApi: adaptableApi,
+                        adaptableColumn: abColumn,
+                        params,
+                    })
+                    : groupUnbalancedGroupsUnderKey;
+                return value === null || value === undefined ? groupUnbalancedGroupsUnderKeyValue : value;
+            };
+        });
+    }
     setupColumnHeader({ col, abColumn }) {
         var _a, _b;
         const previousColumnHeader = (_a = col === null || col === void 0 ? void 0 : col.getColDef()) === null || _a === void 0 ? void 0 : _a.headerName;

package/src/components/DragAndDropContext/ModuleManager.js

@@ -73,10 +73,9 @@ const ModuleManager = (props) => {
                 handleToolbarDragEnd(result);
         } },
         React.createElement(DragAndDropContext_1.DragAndDropContext.Provider, { value: contextValue },
-            React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+            React.createElement("div", { className: "ab-ModuleSelector", style: { display: 'flex', flexDirection: 'column' } },
                 React.createElement(UnusedPanel_1.UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: unusedItems, dragItemText: dragItemText }),
-                React.createElement(PanelWithButton_1.PanelWithButton, { headerText: tabsTitle, button: contextValue.permittedActions.createTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, onClick: handleTabAdd }, "Add Tab")) },
-                    React.createElement("div", { style: { display: 'flex', flex: 1 } },
-                        React.createElement(TabList_1.TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName })))))));
+                React.createElement(PanelWithButton_1.PanelWithButton, { className: "ab-ModuleSelector-UsedPanel", headerText: tabsTitle, button: contextValue.permittedActions.createTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, onClick: handleTabAdd }, "Add Tab")) },
+                    React.createElement(TabList_1.TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName }))))));
 };
 exports.ModuleManager = ModuleManager;

package/src/components/DragAndDropContext/TabList.js

@@ -4,11 +4,12 @@ exports.ToolbarItem = exports.ToolbarList = exports.TabItem = exports.TabList =
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const rebass_1 = require("rebass");
 const icons_1 = require("../icons");
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const DragAndDropContext_1 = require("./DragAndDropContext");
 function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, }) {
-    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.droppableProps, { style: { display: 'flex' }, "data-name": "dashboard-tabs" }),
+    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", Object.assign({}, provided.droppableProps, { className: "ab-ModuleSelector__TabList", ref: provided.innerRef, style: { display: 'flex' }, "data-name": "dashboard-tabs" }),
         tabs.map((tab, tabIndex) => (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabIndex: tabIndex, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }))),
         provided.placeholder))));
 }
@@ -16,29 +17,15 @@ exports.TabList = TabList;
 function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
     const context = React.useContext(DragAndDropContext_1.DragAndDropContext);
     const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
-    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => (React.createElement("div", Object.assign({ "data-name": "dashboard-tab", ref: provided.innerRef }, provided.draggableProps, { style: Object.assign(Object.assign({}, (isDragDisabled ? {} : provided.draggableProps.style)), { boxSizing: 'border-box', border: '1px solid var(--ab-color-primarydark)', borderRadius: 'var(--ab__border-radius)', marginRight: 'var(--ab-space-2)', width: 160, display: 'flex', flexDirection: 'column' }) }),
-        React.createElement("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                padding: 'var(--ab-space-1)',
-                borderBottom: '1px solid var(--ab-color-primarydark)',
-            } },
+    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => (React.createElement("div", Object.assign({ className: "ab-ModuleSelector__TabItem", "data-name": "dashboard-tab", ref: provided.innerRef }, provided.draggableProps, { style: Object.assign({}, (isDragDisabled ? {} : provided.draggableProps.style)) }),
+        React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
             React.createElement("div", Object.assign({}, (disabled ? {} : provided.dragHandleProps), { style: context.permittedActions.dragAndDropTab
                     ? {}
                     : {
                         display: 'none',
                     } }),
                 React.createElement(icons_1.Icon, { name: "drag" })),
-            context.permittedActions.editTabName ? (React.createElement("input", { type: "text", disabled: disabled, value: tab.Name, style: {
-                    flex: 1,
-                    width: '100%',
-                    border: 'none',
-                    marginLeft: 'var(--ab-space-1)',
-                    marginRight: 'var(--ab-space-1)',
-                    alignSelf: 'stretch',
-                    background: 'transparent',
-                    color: 'var(--ab-color-text-on-primary)',
-                }, onChange: (event) => {
+            context.permittedActions.editTabName ? (React.createElement("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
                     onChangeTabName(event.target.value);
                 } })) : (tab.Name),
             context.permittedActions.deleteTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))),
@@ -46,15 +33,7 @@ function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, di
 }
 exports.TabItem = TabItem;
 function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
-    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, (disabled ? {} : provided.droppableProps), { "data-name": "dashboard-toolbar-drop-target", style: {
-            flex: 1,
-            padding: 4,
-            paddingBottom: 0,
-            background: snapshot.isDraggingOver
-                ? 'var(--ab-dashboard-tab-drop-target__background)'
-                : '',
-            minHeight: 200,
-        } }),
+    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(rebass_1.Box, Object.assign({ className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef }, (disabled ? {} : provided.droppableProps), { "data-name": "dashboard-toolbar-drop-target", backgroundColor: snapshot.isDraggingOver ? 'var(--ab-dashboard-tab-drop-target__background)' : '' }),
         toolbars.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
         provided.placeholder))));
 }
@@ -63,9 +42,9 @@ function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
     const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
     let currentItem = availableItems.find((t) => t.Id === toolbar);
     const title = currentItem ? currentItem.Title : toolbar;
-    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: Object.assign(Object.assign({}, provided.draggableProps.style), { display: 'flex', alignItems: 'center', border: '1px solid var(--ab-color-primary)', backgroundColor: snapshot.isDragging
-                ? 'var(--ab-dashboard-toolbar-drag__background)'
-                : 'var(--ab-color-primarylight)', paddingLeft: 'var(--ab-space-1)', marginBottom: 'var(--ab-space-1)' }) }),
+    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(rebass_1.Flex, Object.assign({ className: "ab-ModuleSelector__ToolbarItem", alignItems: "center", backgroundColor: snapshot.isDragging
+            ? 'var(--ab-dashboard-toolbar-drag__background)'
+            : 'var(--ab-color-primarylight)', ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
         React.createElement("div", { style: { flex: 1 } }, title),
         React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "clear", variant: "text", padding: 1, onClick: onRemove })))));
 }

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -6,13 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const react_beautiful_dnd_1 = require("react-beautiful-dnd");
 const DragAndDropContext_1 = require("./DragAndDropContext");
 function UnusedPanel({ items, disabled, title, dragItemText, }) {
-    return (React.createElement("div", { "data-name": "unusedpanel-items", style: {
-            border: '1px solid var(--ab-color-primarydark)',
-            borderRadius: 'var(--ab__border-radius)',
-            marginBottom: 'var(--ab-space-2)',
-            paddingBottom: 'var(--ab-space-1)',
-            backgroundColor: 'var(--ab-color-defaultbackground)',
-        } },
+    return (React.createElement("div", { className: "ab-ModuleSelector__UnusedPanel", "data-name": "unusedpanel-items" },
         React.createElement("div", { style: { padding: 'var(--ab-space-2)' } },
             React.createElement("b", null, title),
             " (",