@adaptabletools/adaptable-cjs 23.0.0-canary.7 → 23.0.0-canary.9

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.objectListActionButtonClassName = void 0;
+const utils_1 = require("../../../lib/utils");
+const objectListActionButtonClassName = (kind, className) => (0, utils_1.cn)('ab-ObjectListActionButton', `ab-ObjectListActionButton--${kind}`, className);
+exports.objectListActionButtonClassName = objectListActionButtonClassName;

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

@@ -41,7 +41,7 @@ class EntityListActionButtons extends React.Component {
             'twa:justify-center': justifyContent === 'center',
             'twa:justify-end': justifyContent === 'end',
         }) || 'twa:justify-center';
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${justifyContentClassName} twa:m-0 twa:p-0`, onClick: stopPropagation, children: [this.props.showEdit && ((0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { onClick: () => (this.props.editClick ? this.props.editClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-action-edit-foreground twa:bg-action-edit twa:fill-action-edit-foreground`, disabled: this.props.overrideDisableEdit || this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })), this.props.showClone && ((0, jsx_runtime_1.jsx)(ButtonClone_1.ButtonClone, { onClick: () => (this.props.cloneClick ? this.props.cloneClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-action-clone-foreground twa:bg-action-clone twa:fill-action-clone-foreground`, children: null, disabled: this.props.overrideDisableClone || this.props.cloneAccessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })), this.props.showDelete && ((0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { "data-name": "delete", className: `twa:mx-[px] twa:my-[2px] twa:text-action-delete-foreground twa:bg-action-delete twa:fill-action-delete-foreground`, disabled: this.props.overrideDisableDelete || this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipDelete, ConfirmAction: this.props.confirmDeleteAction, ConfirmationMsg: 'Are you sure you want to delete this ' + this.props.entityType + '?', ConfirmationTitle: 'Delete ' + this.props.entityType, accessLevel: this.props.accessLevel })), this.props.showShare && ((0, jsx_runtime_1.jsx)(ButtonShare_1.ButtonShare, { className: `twa:mx-[1px] twa:my-[2px] twa:text-action-share-foreground twa:bg-action-share twa:fill-action-share-foreground`, onShare: (config) => this.props.shareClick ? this.props.shareClick(config) : null, Header: `TeamSharing ${this.props.entityType}`, disabled: this.props.overrideDisableShare || this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })), this.props.showSuspend && this.props.suspendableObject && ((0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { className: `twa:ml-[2px] twa:align-self-center`, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY }))] }));
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${justifyContentClassName} twa:m-0 twa:p-0`, onClick: stopPropagation, children: [this.props.showEdit && ((0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { onClick: () => (this.props.editClick ? this.props.editClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-action-edit-foreground twa:bg-action-edit twa:fill-action-edit-foreground`, disabled: this.props.overrideDisableEdit || this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipEdit, accessLevel: this.props.accessLevel })), this.props.showClone && ((0, jsx_runtime_1.jsx)(ButtonClone_1.ButtonClone, { onClick: () => (this.props.cloneClick ? this.props.cloneClick() : null), className: `twa:ml-0 twa:mr-[2px] twa:my-[2px] twa:text-action-clone-foreground twa:bg-action-clone twa:fill-action-clone-foreground`, children: null, disabled: this.props.overrideDisableClone || this.props.cloneAccessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipClone, accessLevel: this.props.cloneAccessLevel })), this.props.showDelete && ((0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { "data-name": "delete", className: `twa:mx-[px] twa:my-[2px] twa:text-action-delete-foreground twa:bg-action-delete twa:fill-action-delete-foreground`, disabled: this.props.overrideDisableDelete || this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipDelete, ConfirmAction: this.props.confirmDeleteAction, ConfirmationMsg: 'Are you sure you want to delete this ' + this.props.entityType + '?', ConfirmationTitle: 'Delete ' + this.props.entityType, accessLevel: this.props.accessLevel })), this.props.showShare && ((0, jsx_runtime_1.jsx)(ButtonShare_1.ButtonShare, { className: `twa:mx-[1px] twa:my-[2px] twa:text-action-share-foreground twa:bg-action-share twa:fill-action-share-foreground`, onShare: (config) => this.props.shareClick ? this.props.shareClick(config) : null, Header: `TeamSharing ${this.props.entityType}`, disabled: this.props.overrideDisableShare || this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, tooltip: this.props.overrideTooltipShare, accessLevel: this.props.accessLevel })), this.props.showSuspend && this.props.suspendableObject && ((0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { className: "twa:align-self-center", iconSize: 24, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY }))] }));
     }
 }
 exports.EntityListActionButtons = EntityListActionButtons;

package/src/View/Components/Buttons/SuspendToggleButton/SuspendToggleButton.d.ts

@@ -9,6 +9,7 @@ interface EntityListSuspendButtonProps {
     disabled?: boolean;
     accessLevel?: AccessLevel;
     className?: string;
+    iconSize?: number;
 }
 export declare const SuspendToggleButton: React.FunctionComponent<EntityListSuspendButtonProps>;
 export {};

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

@@ -4,19 +4,19 @@ exports.SuspendToggleButton = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const ToggleButton_1 = require("../../../../components/ToggleButton");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
 const utils_1 = require("../../../../lib/utils");
-exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className }) => {
-    const handleOnChange = React.useCallback((checked) => {
-        if (checked) {
+exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className, iconSize = 26, }) => {
+    const preparedDisabled = (accessLevel && accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY) || disabled;
+    const isSuspended = suspendableObject.IsSuspended;
+    const handleClick = React.useCallback(() => {
+        if (isSuspended) {
             onUnSuspend(suspendableObject);
         }
         else {
             onSuspend(suspendableObject);
         }
-    }, [onUnSuspend, onSuspend]);
-    const preparedDisabled = (accessLevel && accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY) || disabled;
-    const isSuspended = suspendableObject.IsSuspended;
-    return ((0, jsx_runtime_1.jsx)(ToggleButton_1.ToggleButton, { className: (0, utils_1.cn)(`ab-SuspendButton`, className), "data-name": suspendableObject.IsSuspended ? 'un-suspend' : 'suspend', disabled: preparedDisabled, style: style, onChange: handleOnChange, checked: !isSuspended, children: isSuspended ? 'inactive' : 'active' }));
+    }, [isSuspended, onSuspend, onUnSuspend, suspendableObject]);
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: (0, utils_1.cn)('ab-SuspendButton', isSuspended && 'twa:opacity-60', className), "data-name": isSuspended ? 'resume' : 'suspend', disabled: preparedDisabled, style: style, variant: "text", tone: "neutral", iconSize: iconSize, icon: isSuspended ? 'resume' : 'pause', tooltip: isSuspended ? 'Resume' : 'Suspend', accessLevel: accessLevel, onClick: handleClick }));
 });

package/src/View/Components/ColumnFilter/ColumnFilter.js

@@ -40,7 +40,14 @@ const ColumnFilterPredicateDropdown = (props) => {
                     operator: value,
                     args: [],
                 });
-            }, items: options, value: isAndOr ? 'Add Condition' : props.predicate?.operator }) }));
+            }, items: options, 
+            // For the "Add Condition" picker the current predicate is the top-level
+            // AND/OR predicate, which is not a selectable item. Use `null` (a proper
+            // controlled empty value) plus a placeholder rather than a fake string
+            // value: passing a non-item value makes base-ui's Select reconcile and
+            // fire a spurious `onValueChange` when the items change (e.g. switching
+            // the filter to another column), which previously crashed.
+            placeholder: "Add Condition", value: isAndOr ? null : props.predicate?.operator }) }));
 };
 const ColumnFilterEditor = (props) => {
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mb-3 twa:overflow-x-hidden twa:p-0.5", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, predicateDefs: props.predicateDefs, onPredicateChange: props.onPredicateChange }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: props.deleteDisabled, onClick: props.onDelete, variant: "text", icon: "delete" }) })] }), (0, jsx_runtime_1.jsx)(ColumnFilterInputList_1.ColumnFilterInputList, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate, onPredicateChange: props.onPredicateChange, predicateDefs: props.predicateDefs })] }));
@@ -128,6 +135,12 @@ const ColumnFilterComponent = (props) => {
     const isLastPredicateValid = true;
     const filterPredicateDropdown = ((0, jsx_runtime_1.jsx)(ColumnFilterPredicateDropdown, { columnId: props.columnId, disabled: props.disabled, predicate: currentPredicate, predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
             const predicateDef = props.predicateDefs.find((predicateDef) => predicateDef.operator === predicate.operator);
+            // Guard against the select emitting a value that is not a known
+            // predicate for the current column (e.g. a stale/reconciled value while
+            // switching columns).
+            if (!predicateDef) {
+                return;
+            }
             onNewPredicate(predicateDef);
         }, targetProps: {
             tone: 'neutral',

package/src/View/Components/ColumnFilter/components/ColumnFilterInput.js

@@ -9,10 +9,10 @@ const AdaptableInput_1 = tslib_1.__importDefault(require("../../AdaptableInput")
 const AdaptableDateInlineInput_1 = require("../../AdaptableInput/AdaptableDateInlineInput");
 const PermittedValuesSelector_1 = require("../../Selectors/PermittedValuesSelector");
 const AdaptableContext_1 = require("../../../AdaptableContext");
-const debounce_1 = tslib_1.__importDefault(require("../../../../Utilities/utils/debounce"));
+const TimingHelper_1 = require("../../../../Utilities/Helpers/TimingHelper");
 const react_1 = require("react");
 function debounceOrImmediate(fn, time) {
-    return time && time > 0 ? (0, debounce_1.default)(fn, time) : fn;
+    return time && time > 0 ? (0, TimingHelper_1.debounce)(fn, time) : fn;
 }
 const ColumnFilterInput = (props) => {
     const { type, value, onChange: onChangeProp, onClear: onClearProp, disabled, onKeyDown, filterType, usePrimitiveInputs = true, columnId, } = props;

package/src/View/Components/ColumnFilter/components/ColumnFilterInputList.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnFilterInputList = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const debounce_1 = tslib_1.__importDefault(require("../../../../Utilities/utils/debounce"));
+const TimingHelper_1 = require("../../../../Utilities/Helpers/TimingHelper");
 const React = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../../components/ExpressionEditor/QueryBuilder/utils");
 const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
@@ -22,7 +22,7 @@ const ColumnFilterInputList = (props) => {
     const matchingInputs = predicateDef
         ? (0, utils_1.getOperatorMatchingInputs)(fnTypeInput, predicateDef?.inputs, true)
         : [];
-    const debouncedPredicateChange = React.useCallback((0, debounce_1.default)((predicate) => {
+    const debouncedPredicateChange = React.useCallback((0, TimingHelper_1.debounce)((predicate) => {
         props.onPredicateChange(predicate);
     }, 300), [props.predicate, props.columnId]);
     if (['date[]', 'number[]', 'text[]'].includes(matchingInputs[0])) {

package/src/View/Components/ColumnFilter/components/FloatingFilterInputList.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FloatingFilterInputList = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const debounce_1 = tslib_1.__importDefault(require("../../../../Utilities/utils/debounce"));
+const TimingHelper_1 = require("../../../../Utilities/Helpers/TimingHelper");
 const React = tslib_1.__importStar(require("react"));
 const utils_1 = require("../../../../components/ExpressionEditor/QueryBuilder/utils");
 const adaptableQlUtils_1 = require("../../../../Utilities/adaptableQlUtils");
@@ -22,7 +22,7 @@ const FloatingFilterInputList = (props) => {
     const matchingInputs = predicateDef
         ? (0, utils_1.getOperatorMatchingInputs)(fnTypeInput, predicateDef?.inputs, true)
         : [];
-    const debouncedPredicateChange = React.useCallback((0, debounce_1.default)((predicate) => {
+    const debouncedPredicateChange = React.useCallback((0, TimingHelper_1.debounce)((predicate) => {
         props.onPredicateChange(predicate);
     }, 300), [props.predicate, props.columnId]);
     if (['date[]', 'number[]', 'text[]'].includes(matchingInputs[0])) {

package/src/View/Components/Forms/AdaptableFormControlTextClear.js

@@ -9,12 +9,13 @@ const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWr
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const twMerge_1 = require("../../../twMerge");
+const utils_1 = require("../../../lib/utils");
 exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
     const clearDisabled = StringExtensions_1.StringExtensions.IsNullOrEmpty(props.value.toString());
-    return ((0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { onClick: props.onClick, className: (0, twMerge_1.twMerge)('twa:bg-input-background twa:text-input-foreground twa:overflow-visible twa:w-full twa:rounded-input', props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Input_1.default, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: props.inputClassName, ref: (r) => {
+    return ((0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { onClick: props.onClick, className: (0, twMerge_1.twMerge)('twa:bg-input-background twa:text-input-foreground twa:overflow-visible twa:w-full twa:rounded-input', props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Input_1.default, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: (0, utils_1.cn)('twa:min-w-0 twa:flex-1', props.inputClassName), ref: (r) => {
                     inputRef.current = r;
                     if (!ref) {
                         return;

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

@@ -108,7 +108,7 @@ const AdaptablePopupModuleView = (props) => {
                 dispatch(unsuspendAllAction);
             }
         };
-        suspendButton = ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:mr-2", onMouseDown: () => handleSuspendUnsuspendAll(), tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All' }));
+        suspendButton = ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: "twa:mr-2", onMouseDown: () => handleSuspendUnsuspendAll(), tone: "neutral", variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Resume All' }));
     }
     const handleWizardClose = () => {
         setAbObjectType(null);

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

@@ -7,14 +7,14 @@ const react_redux_1 = require("react-redux");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const PopupRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReducers/PopupRedux"));
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
-const resolveSettingsPanelNavigation_1 = require("../../../../Utilities/Helpers/resolveSettingsPanelNavigation");
+const SettingsPanelHelper_1 = require("../../../../Utilities/Helpers/SettingsPanelHelper");
 const settingsPanelNavigationTypes_1 = require("./settingsPanelNavigationTypes");
 const useMenuItems = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
     const allMenuItems = (0, react_redux_1.useSelector)((state) => state?.Internal?.SettingsPanelModuleEntries);
     return React.useMemo(() => {
-        const navigation = (0, resolveSettingsPanelNavigation_1.resolveSettingsPanelNavigation)(adaptable.api, settingsPanelOptions);
+        const navigation = (0, SettingsPanelHelper_1.resolveSettingsPanelNavigation)(adaptable.api, settingsPanelOptions);
         const visibleItems = allMenuItems.filter((item) => item.category !== 'General' &&
             item.category !== 'CustomSettingsPanel' &&
             item.category !== 'Group' &&

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

@@ -7,7 +7,7 @@ const React = tslib_1.__importStar(require("react"));
 const PanelWithImage_1 = require("../Panels/PanelWithImage");
 const UIHelper_1 = require("../../UIHelper");
 const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const alertFormHelper_1 = require("../../../Utilities/Helpers/alertFormHelper");
+const AlertHelper_1 = require("../../../Utilities/Helpers/AlertHelper");
 const AdaptableFormComponent_1 = require("../../../components/AdaptableFormComponent");
 const react_1 = require("react");
 const AdaptableContext_1 = require("../../AdaptableContext");
@@ -35,7 +35,7 @@ const AdaptablePopupAlert = (props) => {
             formData: formData,
         };
     }, [JSON.stringify(formData), props.adaptableAlert]);
-    const alertForm = React.useMemo(() => (0, alertFormHelper_1.resolveAlertFormForDefinition)(props.adaptableAlert.alertDefinition, defaultForm), [props.adaptableAlert.alertDefinition, defaultForm]);
+    const alertForm = React.useMemo(() => (0, AlertHelper_1.resolveAlertFormForDefinition)(props.adaptableAlert.alertDefinition, defaultForm), [props.adaptableAlert.alertDefinition, defaultForm]);
     const adaptableForm = React.useMemo(() => {
         if (api.isDestroyed()) {
             return null;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getWindowPopupSize = exports.getSettingsPanelSize = exports.getActionPanelSize = exports.getMiddlePosition = void 0;
-const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const NumberExtensions_1 = require("../../../Utilities/Extensions/NumberExtensions");
 const getMiddlePosition = (size) => {
     const height = window.innerHeight;
     const width = window.innerWidth;
@@ -15,8 +15,8 @@ const getActionPanelSize = () => {
     const height = window.innerHeight;
     const width = window.innerWidth;
     return {
-        height: (0, Helper_1.clamp)(600, 0, height * 0.9),
-        width: (0, Helper_1.clamp)(800, 0, width * 0.9),
+        height: (0, NumberExtensions_1.clamp)(600, 0, height * 0.9),
+        width: (0, NumberExtensions_1.clamp)(800, 0, width * 0.9),
     };
 };
 exports.getActionPanelSize = getActionPanelSize;
@@ -24,8 +24,8 @@ const getSettingsPanelSize = () => {
     const height = window.innerHeight;
     const width = window.innerWidth;
     return {
-        height: (0, Helper_1.clamp)(height * 0.9, 0, 800),
-        width: (0, Helper_1.clamp)(width * 0.9, 0, 800),
+        height: (0, NumberExtensions_1.clamp)(height * 0.9, 0, 800),
+        width: (0, NumberExtensions_1.clamp)(width * 0.9, 0, 800),
     };
 };
 exports.getSettingsPanelSize = getSettingsPanelSize;

package/src/View/Components/RangesComponent.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { CellColorRange, ColumnComparison, GradientZeroCentredColors, NumericStyledColumn } from '../../AdaptableState/StyledColumnState';
+import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../AdaptableState/StyledColumns/Common/NumericStyledColumn';
+import { ZeroCentredColors } from '../../AdaptableState/StyledColumns/GradientStyle';
 import { ColumnScope } from '../../AdaptableState/Common/ColumnScope';
 export interface RangesComponentProps extends React.ClassAttributes<RangesComponent> {
     ranges: CellColorRange[];
@@ -34,8 +35,8 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
      * `onApplyZeroCentred` and optional `zeroCentred` for the current colours.
      */
     showZeroCentredTab?: boolean;
-    zeroCentred?: GradientZeroCentredColors;
-    onApplyZeroCentred?: (zc: GradientZeroCentredColors) => void;
+    zeroCentred?: ZeroCentredColors;
+    onApplyZeroCentred?: (zc: ZeroCentredColors) => void;
     /**
      * When true, render a per-range "Reverse Gradient" toggle. Only meaningful
      * for Gradient Style (the renderer flips the alpha ramp within the band so

package/src/View/Components/RangesComponent.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const ColorPicker_1 = require("../../components/ColorPicker");
-const clamp_1 = tslib_1.__importDefault(require("../../Utilities/utils/clamp"));
+const NumberExtensions_1 = require("../../Utilities/Extensions/NumberExtensions");
 const CheckBox_1 = require("../../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
 const NumberInput_1 = require("../../components/Input/NumberInput");
@@ -114,13 +114,9 @@ class RangesComponent extends React.Component {
         ].join(' ');
         const renderRangesContent = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRangeValueTypeNumber ? ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:my-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Define value bands from low to high, each with its own colour." }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Tick ", (0, jsx_runtime_1.jsx)("strong", { children: "Use column min" }), " or ", (0, jsx_runtime_1.jsx)("strong", { children: "Use column max" }), " to anchor the first and last band to the column's actual lowest and highest values."] })] })) : ((0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:my-2 twa:text-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: "Define bands as percentages (0\u2013100) of the column's value range." }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "0%" }), " is the column's lowest value and ", (0, jsx_runtime_1.jsx)("strong", { children: "100%" }), " its highest; each band gets its own colour."] })] })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:grid twa:items-end twa:gap-x-2 twa:gap-y-3 twa:mb-3 twa:w-fit", style: { gridTemplateColumns: rangeGridTemplateColumns }, children: this.props.ranges?.map((range, index, list) => ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:contents", "data-name": "percent-bar-range", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === 0 && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', className: "twa:mt-0 twa:mb-1 twa:text-3", disabled: this.props.disabled, children: "Use column min" })), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: this.props.disabled ||
                                             range.Min === 'Col-Min' ||
-                                            (index === 0 && !isRangeValueTypeNumber), value: range.Min === 'Col-Min'
-                                            ? this.props.minMaxRangeValues?.min ?? ''
-                                            : range.Min, onChange: (value) => {
+                                            (index === 0 && !isRangeValueTypeNumber), value: range.Min === 'Col-Min' ? this.props.minMaxRangeValues?.min ?? '' : range.Min, onChange: (value) => {
                                             this.changeRangeMin(index, value);
-                                        } })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === list.length - 1 && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:mt-0 twa:mb-1 twa:text-3", onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', disabled: this.props.disabled, children: "Use column max" })), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { value: range.Max === 'Col-Max'
-                                            ? this.props.minMaxRangeValues?.max ?? ''
-                                            : range.Max, disabled: this.props.disabled ||
+                                        } })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === list.length - 1 && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "twa:mt-0 twa:mb-1 twa:text-3", onClick: () => this.setRangeColMax(range), checked: range.Max === 'Col-Max', disabled: this.props.disabled, children: "Use column max" })), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { value: range.Max === 'Col-Max' ? this.props.minMaxRangeValues?.max ?? '' : range.Max, disabled: this.props.disabled ||
                                             range.Max === 'Col-Max' ||
                                             (index === list.length - 1 && !isRangeValueTypeNumber), onChange: (value) => {
                                             this.changeRangeMax(index, value);
@@ -227,7 +223,7 @@ class RangesComponent extends React.Component {
         const { ranges } = this.props;
         let newMin = Number(value);
         if (this.props.rangeValueType === 'Percentage') {
-            newMin = (0, clamp_1.default)(newMin, 0, 100);
+            newMin = (0, NumberExtensions_1.clamp)(newMin, 0, 100);
         }
         ranges[index].Min = newMin;
         if (ranges[index - 1]) {
@@ -239,7 +235,7 @@ class RangesComponent extends React.Component {
         const { ranges } = this.props;
         let newMax = Number(value);
         if (this.props.rangeValueType === 'Percentage') {
-            newMax = (0, clamp_1.default)(newMax, 0, 100);
+            newMax = (0, NumberExtensions_1.clamp)(newMax, 0, 100);
         }
         ranges[index].Max = newMax;
         if (ranges[index + 1]) {

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAdaptableToolPanelAgGridComponent = exports.ConnectedAdaptableToolPanel = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const kebabCase_1 = tslib_1.__importDefault(require("../../../Utilities/utils/kebabCase"));
+const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
 const react_redux_1 = require("react-redux");
@@ -133,7 +133,7 @@ const AdaptableToolPanelComponent = (props) => {
             toolPanelButtons.push(moduleButtons.map((x) => {
                 let menuItem = props.MainMenuItems.find((y) => y.isVisible && y.category == x);
                 if (menuItem) {
-                    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": menuItem.category, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL }, menuItem.label));
+                    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": menuItem.category, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${(0, StringExtensions_1.kebabCase)(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL }, menuItem.label));
                 }
             }));
         }
@@ -146,7 +146,7 @@ const AdaptableToolPanelComponent = (props) => {
                 toolPanelState: props.api.toolPanelApi.getToolPanelState(),
             };
             const buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext) ?? '';
-            return ((0, jsx_runtime_1.jsx)(AdaptableButton_1.AdaptableButtonView, { button: button, context: toolPanelContext, api: props.api, defaults: AdaptableButton_1.ADAPTABLE_BUTTON_SURFACE_DEFAULTS.toolPanel, rerenderOnClick: false, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)}` }, buttonLabel || button.Uuid));
+            return ((0, jsx_runtime_1.jsx)(AdaptableButton_1.AdaptableButtonView, { button: button, context: toolPanelContext, api: props.api, defaults: AdaptableButton_1.ADAPTABLE_BUTTON_SURFACE_DEFAULTS.toolPanel, rerenderOnClick: false, className: `ab-ToolPanel__Home__${(0, StringExtensions_1.kebabCase)(buttonLabel)}` }, buttonLabel || button.Uuid));
         });
     };
     const onSetToolPanelVisibility = (name, checked) => {

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomToolPanelContent = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableButton_1 = require("../AdaptableButton");
-const kebabCase_1 = tslib_1.__importDefault(require("../../../Utilities/utils/kebabCase"));
+const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const CustomToolPanelContent = (props) => {
     const { customToolPanel } = props;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
@@ -48,7 +47,7 @@ const CustomToolPanelContent = (props) => {
                         customToolPanel: customToolPanel,
                     };
                     const buttonLabel = api.internalApi.getLabelForButton(button, toolPanelContext) ?? '';
-                    return ((0, jsx_runtime_1.jsx)(AdaptableButton_1.AdaptableButtonView, { button: button, context: toolPanelContext, api: api, defaults: AdaptableButton_1.ADAPTABLE_BUTTON_SURFACE_DEFAULTS.customToolPanel, rerenderOnClick: false, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)}` }, buttonLabel || button.Uuid));
+                    return ((0, jsx_runtime_1.jsx)(AdaptableButton_1.AdaptableButtonView, { button: button, context: toolPanelContext, api: api, defaults: AdaptableButton_1.ADAPTABLE_BUTTON_SURFACE_DEFAULTS.customToolPanel, rerenderOnClick: false, className: `ab-ToolPanel__Home__${(0, StringExtensions_1.kebabCase)(buttonLabel)}` }, buttonLabel || button.Uuid));
                 }) }))] }));
 };
 exports.CustomToolPanelContent = CustomToolPanelContent;

package/src/View/Dashboard/CustomDashboardButton.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomDashboardButton = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const kebabCase_1 = tslib_1.__importDefault(require("../../Utilities/utils/kebabCase"));
+const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const AdaptableButton_1 = require("../Components/AdaptableButton");
 const CustomDashboardButton = (props) => {
     const { button } = props;
@@ -12,6 +11,6 @@ const CustomDashboardButton = (props) => {
         dashboardState: props.api.dashboardApi.getDashboardState(),
     };
     const buttonLabel = props.api.internalApi.getLabelForButton(button, dashboardContext) ?? '';
-    return ((0, jsx_runtime_1.jsx)(AdaptableButton_1.AdaptableButtonView, { button: button, context: dashboardContext, api: props.api, accessLevel: props.accessLevel, defaults: AdaptableButton_1.ADAPTABLE_BUTTON_SURFACE_DEFAULTS.dashboard, buttonKey: buttonLabel, ariaLabel: buttonLabel, className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(buttonLabel)}` }));
+    return ((0, jsx_runtime_1.jsx)(AdaptableButton_1.AdaptableButtonView, { button: button, context: dashboardContext, api: props.api, accessLevel: props.accessLevel, defaults: AdaptableButton_1.ADAPTABLE_BUTTON_SURFACE_DEFAULTS.dashboard, buttonKey: buttonLabel, ariaLabel: buttonLabel, className: `ab-DashboardToolbar__Home__${(0, StringExtensions_1.kebabCase)(buttonLabel)}` }));
 };
 exports.CustomDashboardButton = CustomDashboardButton;

package/src/View/Dashboard/Dashboard.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dashboard = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const kebabCase_1 = tslib_1.__importDefault(require("../../Utilities/utils/kebabCase"));
+const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const react_redux_1 = require("react-redux");
 const Dashboard_1 = require("../../components/Dashboard");
@@ -65,7 +65,7 @@ const DashboardComponent = (props) => {
             shortcuts = shortcutsArray.map((x, index) => {
                 let menuItem = props.InternalState.Dashboard.DashboardModuleButtons.find((y) => y.isVisible && y.category == x);
                 if (menuItem) {
-                    return ((0, jsx_runtime_1.jsx)(AdaptableButton_1.AdaptableButtonComponent, { "data-name": `dashboard-module-button-${menuItem.category ?? 'custom-' + index}`, "aria-label": menuItem.label, variant: menuItem.category === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.category === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, style: menuItem.category === 'SystemStatus'
+                    return ((0, jsx_runtime_1.jsx)(AdaptableButton_1.AdaptableButtonComponent, { "data-name": `dashboard-module-button-${menuItem.category ?? 'custom-' + index}`, "aria-label": menuItem.label, variant: menuItem.category === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.category === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${(0, StringExtensions_1.kebabCase)(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == GeneralConstants_1.ACCESS_LEVEL_READ_ONLY, onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, style: menuItem.category === 'SystemStatus'
                             ? {
                                 ...UIHelper_1.default.getStyleForMessageType(props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()?.statusType ??
                                     'Success'),

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -11,7 +11,7 @@ const InternalRedux_1 = require("../../Redux/ActionsReducers/InternalRedux");
 const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
 const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
 const ButtonStop_1 = require("../Components/Buttons/ButtonStop");
-const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
+const DisplayFormatHelper_1 = require("../../Utilities/Helpers/DisplayFormatHelper");
 const Flex_1 = require("../../components/Flex");
 class DataChangeHistoryPopupComponent extends React.Component {
     render() {
@@ -21,7 +21,7 @@ class DataChangeHistoryPopupComponent extends React.Component {
         const suspended = changeHistoryMode === 'SUSPENDED';
         const buttonPanel = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--button-panel twa:gap-1 twa:p-2", children: [disabled && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-activate", "data-name": 'data-change-history--button-activate', variant: 'raised', tone: 'accent', tooltip: '', onClick: () => onChangeHistoryEnable(), children: "Activate" })), suspended && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume(), children: "Resume" })), enabled && ((0, jsx_runtime_1.jsx)(ButtonPause_1.ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend(), children: "Suspend" })), (enabled || suspended) && ((0, jsx_runtime_1.jsx)(ButtonStop_1.ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable(), children: "Deactivate" }))] }));
         const dateFormat = `${this.props.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
-        const statusPanel = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--status-panel twa:gap-1", alignItems: 'center', children: [enabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-success twa:font-bold", children: "Active" }), !!activationTime && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:italic", children: ["(since ", (0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat }), ")"] }))] })), suspended && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPopup--status-suspended twa:text-warn twa:font-bold", children: "Suspended" }), !!suspensionTime && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:italic", children: ["(since ", (0, FormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat }), ")"] }))] })), disabled && (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPopup--status-disabled twa:text-2" })] }));
+        const statusPanel = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPopup--status-panel twa:gap-1", alignItems: 'center', children: [enabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-success twa:font-bold", children: "Active" }), !!activationTime && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:italic", children: ["(since ", (0, DisplayFormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat }), ")"] }))] })), suspended && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPopup--status-suspended twa:text-warn twa:font-bold", children: "Suspended" }), !!suspensionTime && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:italic", children: ["(since ", (0, DisplayFormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat }), ")"] }))] })), disabled && (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPopup--status-disabled twa:text-2" })] }));
         const handleChangeUndo = (changeKey) => {
             const changeToBeUndone = changeHistoryLog[changeKey];
             if (changeToBeUndone) {

package/src/View/DataChangeHistory/DataChangeHistoryTable.js

@@ -7,7 +7,7 @@ const React = tslib_1.__importStar(require("react"));
 const InfiniteTable_1 = require("../../components/InfiniteTable");
 const Flex_1 = require("../../components/Flex");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
-const FormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/FormatHelper"));
+const DisplayFormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/DisplayFormatHelper"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableButtonView_1 = require("../Components/AdaptableButton/AdaptableButtonView");
 const buildActionColumnButton_1 = require("./buildActionColumnButton");
@@ -61,7 +61,7 @@ const DataChangeHistoryTable = (props) => {
                 valueGetter: (params) => {
                     const changedAt = (0, dataChangeHistoryHelpers_1.getChangeHistoryRowChangeInfo)(params.data)?.changedAt;
                     return changedAt != null
-                        ? FormatHelper_1.default.DateFormatter(changedAt, { Pattern: dateFormat })
+                        ? DisplayFormatHelper_1.default.DateFormatter(changedAt, { Pattern: dateFormat })
                         : '';
                 },
             },

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -9,7 +9,7 @@ const InternalRedux_1 = require("../../Redux/ActionsReducers/InternalRedux");
 const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
 const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
 const ButtonStop_1 = require("../Components/Buttons/ButtonStop");
-const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
+const DisplayFormatHelper_1 = require("../../Utilities/Helpers/DisplayFormatHelper");
 const Tooltip_1 = tslib_1.__importDefault(require("../../components/Tooltip"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
@@ -36,7 +36,7 @@ const DataChangeHistoryViewPanelControl = (props) => {
     const buttonsPaddingY = props.buttonsPaddingY ?? 2;
     const buttonPanel = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPanel--button-panel", style: { gap: gap, paddingBlock: buttonsPaddingY }, children: [disabled && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })), suspended && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.ButtonPlay, { "aria-label": "Resume Data Change History", className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })), enabled && ((0, jsx_runtime_1.jsx)(ButtonPause_1.ButtonPause, { "aria-label": "Suspend Data Change History", className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })), (enabled || suspended) && ((0, jsx_runtime_1.jsx)(ButtonStop_1.ButtonStop, { "aria-label": "Deactivate Data Change History", className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))] }));
     const dateFormat = `${adaptable.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
-    const statusPanel = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap }, children: [enabled && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { label: !!activationTime && `since ${(0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat })}`, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-2 twa:text-success", children: "Active" }) })), suspended && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { label: !!suspensionTime && `since ${(0, FormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat })}`, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-suspended twa:text-2 twa:text-warn", children: "Suspended" }) })), disabled && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-disabled twa:text-2", children: "Activate Data Tracking" }))] }));
+    const statusPanel = ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap }, children: [enabled && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { label: !!activationTime && `since ${(0, DisplayFormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat })}`, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-active twa:text-2 twa:text-success", children: "Active" }) })), suspended && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { label: !!suspensionTime && `since ${(0, DisplayFormatHelper_1.DateFormatter)(suspensionTime, { Pattern: dateFormat })}`, children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-suspended twa:text-2 twa:text-warn", children: "Suspended" }) })), disabled && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "ab-DataChangeHistoryPanel--status-disabled twa:text-2", children: "Activate Data Tracking" }))] }));
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: 'row', children: [buttonPanel, statusPanel, (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2", children: (0, jsx_runtime_1.jsxs)(SimpleButton_1.default, { onClick: handleOpenPopup, variant: "text", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "open-in-new" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-1", children: "Show" })] }) })] }));
 };
 exports.DataChangeHistoryViewPanelControl = DataChangeHistoryViewPanelControl;

package/src/View/DataImport/DataImportWizard/sections/DataPreview.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataPreview = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const flatten_1 = tslib_1.__importDefault(require("../../../../Utilities/utils/flatten"));
+const ArrayExtensions_1 = require("../../../../Utilities/Extensions/ArrayExtensions");
 const React = tslib_1.__importStar(require("react"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const icons_1 = require("../../../../components/icons");
@@ -129,7 +129,7 @@ const DataPreview = (props) => {
     };
     return ((0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: props.data, primaryKey: primaryKey, onDataMutations: (params) => {
             const newRowData = [...props.data];
-            const mutationsList = (0, flatten_1.default)(Array.from(params.mutations.values()));
+            const mutationsList = (0, ArrayExtensions_1.flatten)(Array.from(params.mutations.values()));
             if (!mutationsList.length) {
                 return;
             }

package/src/View/Export/ExportSchedulesTab.js

@@ -9,7 +9,7 @@ const ExportRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/Ex
 const formatScheduledReportSummary_1 = require("../../Strategy/Utilities/Export/formatScheduledReportSummary");
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableObjectList_1 = require("../Components/AdaptableObjectList/AdaptableObjectList");
-const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
+const objectListActionButtonStyles_1 = require("../Components/AdaptableObjectList/objectListActionButtonStyles");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const EmptyContent_1 = tslib_1.__importDefault(require("../../components/EmptyContent"));
 const ScheduledReportWizard_1 = require("./Wizard/ScheduledReportWizard");
@@ -53,7 +53,6 @@ const ExportScheduleListItem = (props) => {
                 values: [(0, formatScheduledReportSummary_1.formatScheduledReportSummary)(reportSchedule)],
             },
         ], actions: [
-            (0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { accessLevel: accessLevel, onClick: props.onEdit, tooltip: "Edit Schedule" }, "edit"),
-            (0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { accessLevel: accessLevel, tooltip: "Delete Schedule", ConfirmationTitle: "Delete Schedule", ConfirmationMsg: "Are you sure you want to delete this schedule?", ConfirmAction: ExportRedux.ScheduledReportDelete(reportSchedule) }, "delete"),
-        ], suspendedEnabled: true, onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend }));
+            (0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { accessLevel: accessLevel, onClick: props.onEdit, tooltip: "Edit Schedule", className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('edit') }, "edit"),
+        ], deleteAction: ExportRedux.ScheduledReportDelete(reportSchedule), deleteConfirmationMsg: "Are you sure you want to delete this schedule?", suspendedEnabled: true, onSuspend: props.onSuspend, onUnSuspend: props.onUnSuspend }));
 };

package/src/View/Filter/FilterViewPanel.js

@@ -32,7 +32,7 @@ class FilterViewPanelComponent extends React.Component {
                 this.props.api.filterApi.columnFilterApi.unSuspendAllColumnFilters();
             }
         };
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && ((0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [(0, jsx_runtime_1.jsx)(ActiveFiltersPanel_1.ActiveFiltersPanel, {})], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })), (0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel', children: this.props.viewType === 'ToolPanel' && 'Clear' }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: (0, 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 })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", children: this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY ||
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && ((0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [(0, jsx_runtime_1.jsx)(ActiveFiltersPanel_1.ActiveFiltersPanel, {})], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })), (0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel', children: this.props.viewType === 'ToolPanel' && 'Clear' }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: (0, 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: "neutral", variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'resume', accessLevel: this.props.accessLevel })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", children: this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY ||
                             this.props.api.layoutApi.isCurrentLayoutPivot(), checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                             checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
                         }, children: "Filter Bar" })) })] }));