@adaptabletools/adaptable 12.0.0 → 12.0.2

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

@@ -15,6 +15,7 @@ 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 AdaptableObjectListItem = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const adaptable = AdaptableContext_1.useAdaptable();
@@ -24,15 +25,17 @@ const AdaptableObjectListItem = (props) => {
     const viewOptions = (_b = (_a = props.module) === null || _a === void 0 ? void 0 : _a.getViewProperties) === null || _b === void 0 ? void 0 : _b.call(_a);
     const EditWizard = (_c = viewOptions.getEditWizard) === null || _c === void 0 ? void 0 : _c.call(viewOptions, props.data.abObject);
     const deleteAction = (_d = viewOptions === null || viewOptions === void 0 ? void 0 : viewOptions.getDeleteAction) === null || _d === void 0 ? void 0 : _d.call(viewOptions, props.data.abObject);
-    const teamSharingActivated = adaptable.api.teamSharingApi.isTeamSharingActivated() &&
+    const isObjectShareable = props.module.isModuleObjectsShareable();
+    const teamSharingActivated = isObjectShareable &&
+        adaptable.api.teamSharingApi.isTeamSharingActivated() &&
         adaptable.api.teamSharingApi.hasTeamSharingFullRights();
     const entityType = props.module.moduleInfo.FriendlyName;
     const moduleAccessLevel = adaptable.api.internalApi
         .getEntitlementService()
         .getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
     const accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(props.data.abObject, moduleAccessLevel);
-    const baseClassName = `${props.baseClassName}__Item`;
-    const itemClassName = join_1.default(baseClassName, props.data.abObject.IsSuspended && `${baseClassName}--is-suspended`);
+    const itemBaseClassName = `${baseClassName}__Item`;
+    const itemClassName = join_1.default(props.data.className, itemBaseClassName, props.data.abObject.IsSuspended && `${itemBaseClassName}--is-suspended`);
     const handleCloseWizard = React.useCallback(() => {
         setIsEditWizardVisible(false);
         setWizardStepName(null);
@@ -56,37 +59,42 @@ const AdaptableObjectListItem = (props) => {
         });
     });
     const isEditDisabled = !Boolean(EditWizard || viewOptions.onOpenEditPopup);
-    return (React.createElement(rebass_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.data.abObject.Uuid, as: "li", mb: 3, className: itemClassName },
-        React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__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) => {
+    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;
-            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 },
-                    tag.label || tag.name,
-                    EditWizard && (React.createElement(SimpleButton_1.default, { accessLevel: accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
+            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: `${baseClassName}__values` },
+                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) })))));
         })),
-        React.createElement(rebass_1.Flex, { flexDirection: "column", className: `${baseClassName}__buttons` },
+        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, { iconSize: ICON_SIZE, ConfirmationMsg: `Are you sure you want to delete this ${entityType}?`, ConfirmationTitle: `Delete ${entityType}`, ConfirmAction: deleteAction, accessLevel: accessLevel })),
+                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 })))),
+                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 }))))),
         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;
-    const baseClassName = 'ab-Adaptable-Object-List';
-    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, baseClassName: baseClassName, data: item, module: props.module })))));
+    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 })))));
 };
 exports.AdaptableObjectList = AdaptableObjectList;

package/src/View/Components/Buttons/ButtonDelete.js

@@ -8,9 +8,9 @@ const PopupRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 class ButtonDeleteComponent extends React.Component {
     render() {
-        var _a;
-        const _b = this.props, { onConfirmWarning, ConfirmAction, ConfirmationMsg, ConfirmationTitle, onClickAction } = _b, props = tslib_1.__rest(_b, ["onConfirmWarning", "ConfirmAction", "ConfirmationMsg", "ConfirmationTitle", "onClickAction"]);
-        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "delete", tooltip: "Delete", variant: "text", icon: "trash", iconSize: (_a = props.iconSize) !== null && _a !== void 0 ? _a : 24 }, props, { onClick: () => this.onClick() })));
+        var _a, _b;
+        const _c = this.props, { onConfirmWarning, ConfirmAction, ConfirmationMsg, ConfirmationTitle, onClickAction } = _c, props = tslib_1.__rest(_c, ["onConfirmWarning", "ConfirmAction", "ConfirmationMsg", "ConfirmationTitle", "onClickAction"]);
+        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "delete", tooltip: (_a = props.tooltip) !== null && _a !== void 0 ? _a : 'Delete', variant: "text", icon: "trash", iconSize: (_b = props.iconSize) !== null && _b !== void 0 ? _b : 24 }, props, { onClick: () => this.onClick() })));
     }
     onClick() {
         if (this.props.ConfirmAction) {

package/src/View/Components/Buttons/ButtonPause.js

@@ -6,7 +6,17 @@ const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 class ButtonPause extends React.Component {
     render() {
-        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "pause", tooltip: "Pause", iconSize: 20, icon: this.props.fillColor === 'red' ? 'pause-red' : 'pause', variant: "text" }, this.props)));
+        const buttonIcon = this.props.fillColor === 'red'
+            ? {
+                name: 'pause',
+                style: {
+                    fill: 'red',
+                },
+            }
+            : {
+                name: 'pause',
+            };
+        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "pause", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text" }, this.props)));
     }
 }
 exports.ButtonPause = ButtonPause;

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

@@ -44,6 +44,7 @@ class QuickFilterFormComponent extends React.Component {
         };
         this.debouncedAddFilter = debounce_1.default(() => this.props.onAddColumnFilter(this.state.filter), 250);
         this.debouncedEditFilter = debounce_1.default(() => this.props.onEditColumnFilter(this.state.filter), 250);
+        this.debouncedLoadPermittedValues = debounce_1.default(() => this.loadPermittedValues(), 500);
         const filter = this.getFilterFromProps();
         this._isMounted = true;
         this.state = {
@@ -58,9 +59,19 @@ class QuickFilterFormComponent extends React.Component {
         if (this.hasValuesPredicate((_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.Predicate)) {
             this.loadPermittedValues();
         }
+        this.unsubscribeOnCellChanged = this.props.api.eventApi.on('CellChanged', (cellChangedInfo) => {
+            this.handleGridValueChange(cellChangedInfo.cellChange.column.columnId);
+        });
+        this.unsubscribeOnGridDataChanged = this.props.api.eventApi.on('GridDataChanged', () => {
+            // there is no way to find out if the changed rows are relevant for this filter, so we have to update it every time :/
+            this.handleGridValueChange();
+        });
     }
     componentWillUnmount() {
+        var _a, _b;
         this._isMounted = false;
+        (_a = this.unsubscribeOnCellChanged) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribeOnGridDataChanged) === null || _b === void 0 ? void 0 : _b.call(this);
     }
     UNSAFE_componentWillReceiveProps(nextProps) {
         const filter = this.getFilterFromProps(nextProps);
@@ -153,7 +164,7 @@ class QuickFilterFormComponent extends React.Component {
     }
     renderPredicateIcon(predicateDef) {
         if (!predicateDef || !predicateDef.icon) {
-            return React.createElement(icons_1.Icon, { name: "filter-outline" });
+            return React.createElement(icons_1.Icon, { name: "filter" });
         }
         if ('text' in predicateDef.icon) {
             return React.createElement("span", null, predicateDef.icon.text);
@@ -239,7 +250,7 @@ class QuickFilterFormComponent extends React.Component {
                 return (React.createElement(rebass_1.Flex, { onMouseEnter: () => {
                         var _a;
                         if (showEvent === 'click') {
-                            // For showEvent=mouseneter this is not needed.
+                            // For showEvent=mousenter this is not needed.
                             // When mouseenter is triggered on the overlay, onShowFn is called, the overlay is no longer hidden.
                             // But in this case because the trigger is click, another show is not triggered.
                             (_a = this.valuesDropdown) === null || _a === void 0 ? void 0 : _a.show();
@@ -295,6 +306,16 @@ class QuickFilterFormComponent extends React.Component {
             });
         }
     }
+    handleGridValueChange(changedColumnId) {
+        var _a, _b, _c, _d;
+        if (!this.hasValuesPredicate((_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.Predicate)) {
+            return;
+        }
+        if (changedColumnId && changedColumnId !== ((_d = (_c = this.state) === null || _c === void 0 ? void 0 : _c.filter) === null || _d === void 0 ? void 0 : _d.ColumnId)) {
+            return;
+        }
+        this.debouncedLoadPermittedValues();
+    }
     updateFilter(filter) {
         this.setState({ filter });
         if (filter.Uuid) {

package/src/View/Components/Panels/PanelWithButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PanelProps } from '../../../components/Panel';
 import { BoxProps } from 'rebass';
+import { AdaptableInternalIconName } from '../../../PredefinedConfig/Common/AdaptableIcon';
 export interface PanelWithButtonProps extends PanelProps {
     buttonContent?: React.ReactNode;
     buttonClick?: () => void;
@@ -10,7 +11,7 @@ export interface PanelWithButtonProps extends PanelProps {
     headerProps?: BoxProps & {
         'data-name': string;
     };
-    glyphicon?: string;
+    glyphicon?: AdaptableInternalIconName;
     buttonDisabled?: boolean;
     buttonStyle?: string;
     borderRadius?: string;

package/src/View/Components/Panels/PanelWithImage.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { PanelProps } from '../../../components/Panel';
 import { BoxProps } from 'rebass';
+import { AdaptableInternalIconName } from '../../../PredefinedConfig/Common/AdaptableIcon';
 export interface PanelWithImageProps extends PanelProps {
-    glyphicon?: string;
-    icon?: string;
+    glyphicon?: AdaptableInternalIconName;
+    icon?: AdaptableInternalIconName;
     infoLink?: string;
     infoLinkDisabled?: boolean;
     borderRadius?: string;

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

@@ -37,6 +37,10 @@ const AdaptablePopupModuleView = (props) => {
             moduleViewProperties.onOpenEditPopup();
         }
     }, []);
+    React.useEffect(() => {
+        var _a;
+        (_a = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.onMount) === null || _a === void 0 ? void 0 : _a.call(moduleViewProperties);
+    }, []);
     React.useEffect(() => {
         var _a, _b;
         if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' || ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'Edit') {

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

@@ -33,7 +33,7 @@ const AdaptablePopupTeamSharing = (props) => {
                             React.createElement("strong", null, "Active"),
                             ": a \"live\" share that is automatically updated with every local change"))),
                 React.createElement(FormLayout_1.default, { padding: 2 },
-                    React.createElement(FormLayout_1.FormRow, { label: "Description: " },
+                    React.createElement(FormLayout_1.FormRow, { label: "Name: " },
                         React.createElement(Input_1.default, { autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig(Object.assign(Object.assign({}, config), { description: e.target.value })) })),
                     React.createElement(FormLayout_1.FormRow, { label: "Share: " },
                         React.createElement(rebass_1.Flex, { flexDirection: "row" },

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

@@ -148,19 +148,11 @@ const AdaptableToolPanelComponent = (props) => {
         return props.api.toolPanelApi.getCustomToolPanelButtons().map((button) => {
             // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
             // with the next opportunity we should abstract it
-            // the default size of AdapTable SVG ModuleButtons
-            const defaultIconProps = {
-                style: {
-                    height: 'var(--ab-cmp-simple-button__height)',
-                    width: 'var(--ab-cmp-simple-button__width)',
-                },
-            };
             const toolPanelContext = {
                 adaptableApi: props.api,
                 toolPanelState: props.api.toolPanelApi.getToolPanelState(),
             };
             const buttonIcon = props.api.internalApi.getIconForButton(button, toolPanelContext);
-            const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
             let buttonStyle = props.api.internalApi.getStyleForButton(button, toolPanelContext);
             let buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext);
             let buttonTooltip = props.api.internalApi.getTooltipForButton(button, toolPanelContext);
@@ -171,9 +163,7 @@ const AdaptableToolPanelComponent = (props) => {
             const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
             const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : uuid_1.createUuid();
-            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' },
-                buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                buttonLabel));
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
         });
     };
     const onSetColumnVisibility = (name) => {

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

@@ -44,20 +44,12 @@ const CustomToolPanelContent = (props) => {
         ((_a = customToolPanel.buttons) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement("div", { id: buttonsDivId, className: `ab-ToolPanel__custom-content__buttons ${buttonsDivId}` }, customToolPanel.buttons.map((button) => {
             // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
             // with the next opportunity we should abstract it
-            // the default size of AdapTable SVG ModuleButtons
-            const defaultIconProps = {
-                style: {
-                    height: 'var(--ab-cmp-simple-button__height)',
-                    width: 'var(--ab-cmp-simple-button__width)',
-                },
-            };
             const toolPanelContext = {
                 adaptableApi: api,
                 toolPanelState: api.toolPanelApi.getToolPanelState(),
                 customToolPanel: customToolPanel,
             };
             const buttonIcon = api.internalApi.getIconForButton(button, toolPanelContext);
-            const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
             let buttonStyle = api.internalApi.getStyleForButton(button, toolPanelContext);
             let buttonLabel = api.internalApi.getLabelForButton(button, toolPanelContext);
             let buttonTooltip = api.internalApi.getTooltipForButton(button, toolPanelContext);
@@ -68,9 +60,7 @@ const CustomToolPanelContent = (props) => {
             const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
             const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : uuid_1.createUuid();
-            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' },
-                buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                buttonLabel));
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
         })))));
 };
 exports.CustomToolPanelContent = CustomToolPanelContent;

package/src/View/Dashboard/CustomDashboardButton.js

@@ -15,18 +15,7 @@ const CustomDashboardButton = (props) => {
         adaptableApi: props.api,
         dashboardState: props.api.dashboardApi.getDashboardState(),
     };
-    const defaultIconProps = {
-        style: {
-            height: 'var(--ab-cmp-simple-button__height)',
-            width: 'var(--ab-cmp-simple-button__width)',
-        },
-    };
     const buttonIcon = props.api.internalApi.getIconForButton(button, dashboardContext);
-    const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
-    //    const iconProps: any = button.icon ? { ...button.icon } : null;
-    //    if (iconProps) {
-    //      delete iconProps.Uuid;
-    //    }
     let buttonStyle = props.api.internalApi.getStyleForButton(button, dashboardContext);
     let buttonLabel = props.api.internalApi.getLabelForButton(button, dashboardContext);
     let buttonTooltip = props.api.internalApi.getTooltipForButton(button, dashboardContext);
@@ -34,15 +23,13 @@ const CustomDashboardButton = (props) => {
         return null;
     }
     const disabled = button.disabled && button.disabled(button, dashboardContext);
-    return (React.createElement(SimpleButton_1.default, { key: buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
+    return (React.createElement(SimpleButton_1.default, { key: buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
             var _a;
             (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, dashboardContext);
             setTimeout(() => {
                 // mutate state to force a re-rendering
                 setComponentRevision(componentRevision + 1);
             }, 16);
-        }, accessLevel: 'Full' },
-        buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-        buttonLabel));
+        }, accessLevel: 'Full' }, buttonLabel));
 };
 exports.CustomDashboardButton = CustomDashboardButton;

package/src/View/Dashboard/CustomToolbarWrapper.js

@@ -69,14 +69,7 @@ const CustomToolbarWrapper = (props) => {
                     adaptableApi: api,
                     dashboardState: api.dashboardApi.getDashboardState(),
                 };
-                const defaultIconProps = {
-                    style: {
-                        height: 'var(--ab-cmp-simple-button__height)',
-                        width: 'var(--ab-cmp-simple-button__width)',
-                    },
-                };
                 const buttonIcon = api.internalApi.getIconForButton(button, dashboardContext);
-                const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
                 let buttonStyle = api.internalApi.getStyleForButton(button, dashboardContext);
                 let buttonLabel = api.internalApi.getLabelForButton(button, dashboardContext);
                 let buttonTooltip = api.internalApi.getTooltipForButton(button, dashboardContext);
@@ -86,15 +79,13 @@ const CustomToolbarWrapper = (props) => {
                 const disabled = button.disabled && button.disabled(button, dashboardContext);
                 let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
                 let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
-                return (React.createElement(SimpleButton_1.default, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, variant: buttonVariant, tone: buttonTone, onClick: () => {
+                return (React.createElement(SimpleButton_1.default, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, onClick: () => {
                         button.onClick ? button.onClick(button, dashboardContext) : null;
                         setTimeout(() => {
                             // mutate state to force a re-rendering
                             setComponentRevision(componentRevision + 1);
                         }, 16);
-                    } },
-                    buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                    buttonLabel));
+                    } }, buttonLabel));
             }))));
 };
 exports.CustomToolbarWrapper = CustomToolbarWrapper;

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -18,6 +18,7 @@ const Tabs_1 = require("../../../components/Tabs");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
 const Tag_1 = require("../../../components/Tag");
 const AdaptableContext_1 = require("../../AdaptableContext");
+const FormatHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/FormatHelper"));
 const DOLLAR_OPTIONS = {
     FractionDigits: 2,
     FractionSeparator: '.',
@@ -84,13 +85,16 @@ const getFormatColumnFormatSummaryValue = (data, formattedColumnApi) => {
     }
     else {
         if (data.DisplayFormat.Formatter === 'NumberFormatter') {
-            content = formattedColumnApi.getNumberFormattedValue(12345.6789, data.DisplayFormat.Options);
+            content = FormatHelper_1.default.NumberFormatter(12345.6789, data.DisplayFormat.Options);
+            //formattedColumnApi.getNumberFormattedValue(12345.6789, data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'DateFormatter') {
-            content = formattedColumnApi.getDateFormattedValue(new Date(), data.DisplayFormat.Options);
+            content = FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options);
+            //formattedColumnApi.getDateFormattedValue(new Date(), data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'StringFormatter') {
-            content = formattedColumnApi.getStringFormattedValue('Hello World ', data.DisplayFormat.Options);
+            content = FormatHelper_1.default.StringFormatter('Hello World ', data.DisplayFormat.Options);
+            //formattedColumnApi.getStringFormattedValue('Hello World ', data.DisplayFormat.Options);
         }
     }
     return content;
@@ -169,7 +173,7 @@ const renderDateFormat = (data, _onChange, setFormatOption, customFormatters, fo
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Pattern" },
                         React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Pattern, onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), mr: 2 }),
-                        React.createElement("span", null, formatColumnApi.getDateFormattedValue(new Date(), data.DisplayFormat.Options))),
+                        React.createElement("span", null, FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options))),
                     customFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))),
         React.createElement(Tabs_1.Tabs, { marginTop: 2 },
             React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
@@ -182,7 +186,7 @@ const renderDateFormat = (data, _onChange, setFormatOption, customFormatters, fo
                 DateFormatPresets.map((Pattern, index) => (React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: [
                         { Content: Pattern, Size: 1 },
                         {
-                            Content: formatColumnApi.getDateFormattedValue(new Date(), { Pattern }),
+                            Content: FormatHelper_1.default.DateFormatter(new Date(), { Pattern }),
                             Size: 1,
                         },
                         {
@@ -299,21 +303,21 @@ const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, f
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                         { Content: '12345.6789', Size: 1 },
                         {
-                            Content: formatColumnApi.getNumberFormattedValue(12345.6789, data.DisplayFormat.Options),
+                            Content: FormatHelper_1.default.NumberFormatter(12345.6789, data.DisplayFormat.Options),
                             Size: 1,
                         },
                     ] }),
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                         { Content: '-12345.6789', Size: 1 },
                         {
-                            Content: formatColumnApi.getNumberFormattedValue(-12345.6789, data.DisplayFormat.Options),
+                            Content: FormatHelper_1.default.NumberFormatter(-12345.6789, data.DisplayFormat.Options),
                             Size: 1,
                         },
                     ] }),
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                         { Content: '0.123', Size: 1 },
                         {
-                            Content: formatColumnApi.getNumberFormattedValue(0.123, data.DisplayFormat.Options),
+                            Content: FormatHelper_1.default.NumberFormatter(0.123, data.DisplayFormat.Options),
                             Size: 1,
                         },
                     ] })))));
@@ -350,7 +354,7 @@ const renderStringFormat = (data, _onChange, setFormatOption, customFormatters,
                         { Content: '"Hello World "', Size: 1 },
                         {
                             Content: '"' +
-                                formatColumnApi.getStringFormattedValue('Hello World ', data.DisplayFormat.Options) +
+                                FormatHelper_1.default.StringFormatter('Hello World ', data.DisplayFormat.Options) +
                                 '"',
                             Size: 1,
                         },

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -60,6 +60,7 @@ const isValidFreeTextColumn = (data, api) => {
 };
 exports.isValidFreeTextColumn = isValidFreeTextColumn;
 const FreeTextColumnSettingsWizardSection = (props) => {
+    var _a;
     const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const Pattern = api.internalApi.getAdaptableOptions().userInterfaceOptions.dateInputOptions.dateFormat;
     const [ColumnNameFocused, setColumnNameFocused] = react_1.useState(false);
@@ -128,6 +129,11 @@ const FreeTextColumnSettingsWizardSection = (props) => {
                 } })) : (React.createElement(AdaptableInput_1.default, { value: data.DataType === 'Date' && data.DefaultValue
                     ? DateHelper_1.parseToISO(data.DefaultValue, Pattern) || ''
                     : data.DefaultValue || '', style: { width: '100%', maxWidth: 500 }, type: data.DataType === 'Number' ? 'number' : data.DataType === 'Date' ? 'date' : 'text', placeholder: "Default Column Value (not required)", onChange: (e) => handleDefaultValueChange(e) }))),
+            React.createElement(FormLayout_1.FormRow, { label: "Header Tooltip" },
+                React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: ((_a = data.FreeTextColumnSettings) === null || _a === void 0 ? void 0 : _a.HeaderToolTip) || '', onChange: (e) => handleSpecialColumnSettingsChange({
+                        HeaderToolTip: e.target.value,
+                    }) })),
+            ' ',
             data.DataType == 'String' && (React.createElement(FormLayout_1.FormRow, { label: "Editor Type" },
                 React.createElement(Radio_1.default, { value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
                 React.createElement(Radio_1.default, { value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),

package/src/View/GridInfo/GridInfoPopup.js

@@ -102,7 +102,7 @@ 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-sign' },
+    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")),
             showAdaptableOptions && (React.createElement(Radio_1.default, { "data-name": "radioButton-AdaptableOptions", marginRight: 3, value: "AdaptableOptions", checked: state.ActiveTab == 'AdaptableOptions', onChange: (_, e) => onShowGridSummaryChanged('AdaptableOptions') }, "Options")),

package/src/View/Layout/LayoutEditorStandalonePopup.js

@@ -70,7 +70,9 @@ const LayoutEditorStandalonePopup = (props) => {
     }, []);
     const finishDisabled = !layoutData.Name;
     return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column" },
-        React.createElement(LayoutEditorWizard_1.LayoutEditorWizard, { data: layoutData, api: adaptable.api, Layouts: layouts, moduleInfo: layoutModule.moduleInfo, onLayoutChange: setStateLayout, updateGoBackState: () => null }),
+        React.createElement(LayoutEditorWizard_1.LayoutEditorWizard, { data: layoutData, api: adaptable.api, Layouts: layouts, moduleInfo: layoutModule.moduleInfo, onLayoutChange: setStateLayout, 
+            // @ts-ignore
+            updateGoBackState: () => null }),
         React.createElement(PanelFooter_1.PanelFooter, { acceptDisabled: finishDisabled, onAccept: handleAccept, onCancel: handleCancel })));
 };
 exports.LayoutEditorStandalonePopup = LayoutEditorStandalonePopup;

package/src/View/Layout/LayoutPopup.d.ts

@@ -28,5 +28,5 @@ declare class LayoutPopupComponent extends React.Component<LayoutPopupProps, Edi
     canFinishWizard(): boolean;
     private getCurrentLayout;
 }
-export declare let LayoutPopup: import("react-redux").ConnectedComponent<typeof LayoutPopupComponent, import("react-redux").Omit<React.ClassAttributes<LayoutPopupComponent> & LayoutPopupProps, "ref" | "key" | "api" | "onSuspend" | "accessLevel" | "popupParams" | "onClearPopupParams" | "teamSharingActivated" | "onClosePopup" | "moduleInfo" | "onUnSuspend" | "modalContainer" | "onShare" | "Layouts" | "onSelectLayout" | "onSaveLayout" | "CurrentLayoutName" | "CurrentLayoutDraft" | "onAddLayout">>;
+export declare let LayoutPopup: import("react-redux").ConnectedComponent<typeof LayoutPopupComponent, import("react-redux").Omit<React.ClassAttributes<LayoutPopupComponent> & LayoutPopupProps, "ref" | "key" | "api" | "onSuspend" | "accessLevel" | "popupParams" | "onClearPopupParams" | "teamSharingActivated" | "onClosePopup" | "moduleInfo" | "onUnSuspend" | "modalContainer" | "onShare" | "onSelectLayout" | "onSaveLayout" | "Layouts" | "CurrentLayoutName" | "CurrentLayoutDraft" | "onAddLayout">>;
 export {};

package/src/View/Layout/LayoutViewPanel.d.ts

@@ -15,5 +15,5 @@ declare class LayoutViewPanelComponent extends React.Component<LayoutViewPanelCo
     render(): any;
     private onSaveLayout;
 }
-export declare let LayoutViewPanelControl: import("react-redux").ConnectedComponent<typeof LayoutViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<LayoutViewPanelComponent> & LayoutViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "viewType" | "Layouts" | "onSelectLayout" | "onSaveLayout" | "CurrentDraftLayout" | "CanSave" | "CurrentLayoutName"> & LayoutViewPanelComponentProps>;
+export declare let LayoutViewPanelControl: import("react-redux").ConnectedComponent<typeof LayoutViewPanelComponent, import("react-redux").Omit<React.ClassAttributes<LayoutViewPanelComponent> & LayoutViewPanelComponentProps, "api" | "accessLevel" | "moduleInfo" | "viewType" | "onSelectLayout" | "onSaveLayout" | "Layouts" | "CurrentDraftLayout" | "CanSave" | "CurrentLayoutName"> & LayoutViewPanelComponentProps>;
 export {};

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

@@ -10,7 +10,7 @@ export interface LayoutEditorWizardState {
     layout: Layout;
     errorMessage: string;
 }
-export declare class LayoutEditorWizard extends React.Component<LayoutEditorWizardProps, LayoutEditorWizardState> implements AdaptableWizardStep {
+export declare class LayoutEditorWizard extends React.Component<any, any> implements AdaptableWizardStep {
     constructor(props: LayoutEditorWizardProps);
     render(): any;
     onLayoutNameChange: (event: React.FormEvent<any>) => void;
@@ -20,32 +20,7 @@ export declare class LayoutEditorWizard extends React.Component<LayoutEditorWiza
     }) => string;
     updateLayout: (layout: Partial<Layout>) => void;
     onLayoutChange: (layout: Layout) => void;
-    getLayout: () => {
-        Name: string;
-        Columns: string[];
-        ColumnWidthMap?: {
-            [columnId: string]: number;
-        };
-        ColumnSorts?: import("../../../types").ColumnSort[];
-        ColumnFilters?: import("../../../types").ColumnFilter[];
-        RowGroupedColumns?: string[];
-        ExpandedRowGroupValues?: any[];
-        AggregationColumns?: Record<string, string | true>;
-        EnablePivot?: boolean;
-        PivotColumns?: string[];
-        PinnedColumnsMap?: {
-            [columnId: string]: "left" | "right";
-        };
-        AutoSave?: boolean;
-        ColumnHeadersMap?: {
-            [columnId: string]: string;
-        };
-        SuppressAggFuncInHeader?: boolean;
-        Uuid?: string;
-        Source?: "Config" | "User";
-        IsReadOnly?: boolean;
-        Tags?: string[];
-    };
+    getLayout: () => any;
     canNext(): boolean;
     canBack(): boolean;
     next(): void;

package/src/View/TeamSharing/SharedEntityDependencies.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { SharedEntity } from '../../../types';
+export declare const Dependencies: React.FunctionComponent<{
+    sharedEntity: SharedEntity;
+}>;
+export declare const SharedEntityDependencies: React.FunctionComponent<{
+    data: SharedEntity;
+}>;

package/src/View/TeamSharing/SharedEntityDependencies.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SharedEntityDependencies = exports.Dependencies = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableObjectList_1 = require("../Components/AdaptableObjectList/AdaptableObjectList");
+const Dependencies = (props) => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const dependencies = adaptable.api.teamSharingApi.getSharedEntryDependencies(props.sharedEntity);
+    return (React.createElement(React.Fragment, null, dependencies.map((sharedEntity) => {
+        const module = adaptable.ModuleService.getModuleById('TeamSharing');
+        const itemView = module.toView(sharedEntity);
+        return (React.createElement(rebass_1.Box, { as: "ul", padding: 0, key: sharedEntity.Uuid, className: "ab-Shared-Entity-Shared-Object", mb: 2 },
+            React.createElement(AdaptableObjectList_1.AdaptableObjectListItem, { deleteTooltip: 'Cannot delete dependencies.', deleteDisabled: true, module: module, data: itemView })));
+    })));
+};
+exports.Dependencies = Dependencies;
+const SharedEntityDependencies = (props) => {
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(rebass_1.Box, { mb: 3, mt: 2 }, isExpanded ? (React.createElement(SimpleButton_1.default, { onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton_1.default, { onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand"))),
+        isExpanded && React.createElement(exports.Dependencies, { sharedEntity: props.data })));
+};
+exports.SharedEntityDependencies = SharedEntityDependencies;

package/src/View/TeamSharing/SharedEntityObjectView.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SharedEntity } from '../../../types';
+export declare const SharedEntityTypeItemView: React.FunctionComponent<{
+    data: SharedEntity;
+}>;
+export declare const getSharedEntityActiveStatusObjectView: (isDependency: boolean) => (props: {
+    data: SharedEntity;
+}) => JSX.Element;
+export declare const getSharedEntityStaleDepsItemView: (staleDependencies: SharedEntity[]) => () => JSX.Element;