@adaptabletools/adaptable-cjs 23.0.0-canary.8 → 23.0.0

package/src/View/Charting/ChartingWizard/AgChargingWizard/PreviewChartSection.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 react_redux_1 = require("react-redux");
-const isEqual_1 = tslib_1.__importDefault(require("../../../../Utilities/utils/isEqual"));
+const ObjectExtensions_1 = require("../../../../Utilities/Extensions/ObjectExtensions");
 const InternalRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReducers/InternalRedux"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const PreviewChartSection = (props) => {
@@ -26,7 +26,7 @@ const PreviewChartSection = (props) => {
     }, [divRef]);
     React.useEffect(() => {
         const model = currentChartModels.find((model) => model.chartId == localChartId);
-        if (model && !(0, isEqual_1.default)(model, props.chartDefinition.Model)) {
+        if (model && !(0, ObjectExtensions_1.isEqual)(model, props.chartDefinition.Model)) {
             props.onChange({
                 ...props.chartDefinition,
                 Model: model,

package/src/View/Charting/ChartingWizard/AgChargingWizard/SettingsSection.js

@@ -5,13 +5,13 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CheckBox_1 = require("../../../../components/CheckBox");
 const NewSelect_1 = require("../../../../components/NewSelect");
-const chartingHelper_1 = require("../../../../Utilities/Helpers/chartingHelper");
+const ChartHelper_1 = require("../../../../Utilities/Helpers/ChartHelper");
 const Flex_1 = require("../../../../components/Flex");
 const Card_1 = require("../../../../components/Card");
 const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
 const PreviewChartSection_1 = require("./PreviewChartSection");
 const isSettingsValid = (chartDefinition, api) => {
-    return (0, chartingHelper_1.validateChartName)(api, chartDefinition.Name, chartDefinition.Uuid);
+    return (0, ChartHelper_1.validateChartName)(api, chartDefinition.Name, chartDefinition.Uuid);
 };
 exports.isSettingsValid = isSettingsValid;
 const AGG_FUNCS = ['sum', 'min', 'max', 'count', 'avg', 'first', 'last'];

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/SettingsSection.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsSection = exports.isSettingsValid = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const chartingHelper_1 = require("../../../../Utilities/Helpers/chartingHelper");
+const ChartHelper_1 = require("../../../../Utilities/Helpers/ChartHelper");
 const Flex_1 = require("../../../../components/Flex");
 const Card_1 = require("../../../../components/Card");
 const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
 const PreviewChartSection_1 = require("./PreviewChartSection");
 const isSettingsValid = (chartDefinition, api) => {
-    return (0, chartingHelper_1.validateChartName)(api, chartDefinition.Name, chartDefinition.Uuid);
+    return (0, ChartHelper_1.validateChartName)(api, chartDefinition.Name, chartDefinition.Uuid);
 };
 exports.isSettingsValid = isSettingsValid;
 const SettingsSection = (props) => {

package/src/View/Comments/CommentsEditor.js

@@ -12,7 +12,7 @@ const CommentsRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/
 const InternalRedux_1 = require("../../Redux/ActionsReducers/InternalRedux");
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
-const FormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/FormatHelper"));
+const DisplayFormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/DisplayFormatHelper"));
 const Flex_1 = require("../../components/Flex");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 // Edit Mode
@@ -55,7 +55,7 @@ const CommentsEditor = (props) => {
         return null;
     }
     const formatDate = (date, format) => {
-        return FormatHelper_1.default.DateFormatter(date, { Pattern: format });
+        return DisplayFormatHelper_1.default.DateFormatter(date, { Pattern: format });
     };
     return ((0, jsx_runtime_1.jsxs)(Panel_1.default, { color: "var(--ab-color-primary-foreground)", onClick: () => props.enableEditMode(), className: "ab-CommentPopup twa:min-w-[250px]", onKeyDown: (event) => {
             if (event.key === 'Escape') {

package/src/View/Comments/CommentsPopup.js

@@ -10,7 +10,7 @@ const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const AdaptableButton_1 = require("../Components/AdaptableButton");
-const FormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/FormatHelper"));
+const DisplayFormatHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/DisplayFormatHelper"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const Flex_1 = require("../../components/Flex");
 const tableDOMProps = {
@@ -34,7 +34,7 @@ const CellComments = (props) => {
     const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') ===
         GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
     const formatDate = (date, format) => {
-        return FormatHelper_1.default.DateFormatter(date, { Pattern: format });
+        return DisplayFormatHelper_1.default.DateFormatter(date, { Pattern: format });
     };
     const columnsMap = React.useMemo(() => {
         const columns = {

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

@@ -15,10 +15,9 @@ const ButtonEdit_1 = require("../Buttons/ButtonEdit");
 const ButtonShare_1 = require("../Buttons/ButtonShare");
 const SuspendToggleButton_1 = require("../Buttons/SuspendToggleButton/SuspendToggleButton");
 const Flex_1 = require("../../../components/Flex");
-const twMerge_1 = require("../../../twMerge");
 const Tag_1 = require("../../../components/Tag/Tag");
 const objectListActionButtonStyles_1 = require("./objectListActionButtonStyles");
-const ICON_SIZE = 26;
+const ICON_SIZE = 24;
 const LIST_BASE_CLASS_NAME = 'ab-Adaptable-Object-List';
 const ITEM_BASE_CLASS_NAME = `${LIST_BASE_CLASS_NAME}__Item`;
 const AdaptableObjectListItemView = (props) => {
@@ -28,8 +27,7 @@ const AdaptableObjectListItemView = (props) => {
         disabled: props.deleteDisabled,
         tooltip: props.deleteTooltip ?? 'Delete',
         iconSize: ICON_SIZE,
-        ConfirmationMsg: props.deleteConfirmationMsg ??
-            `Are you sure you want to delete this ${props.entityType}?`,
+        ConfirmationMsg: props.deleteConfirmationMsg ?? `Are you sure you want to delete this ${props.entityType}?`,
         ConfirmationTitle: `Delete ${props.entityType}`,
         ConfirmAction: props.deleteAction,
         accessLevel: props.accessLevel,
@@ -40,8 +38,8 @@ const AdaptableObjectListItemView = (props) => {
             dispatch(props.deleteAction);
         };
     }
-    const deleteActionButton = ((0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { ...deleteActionProps, className: (0, twMerge_1.twMerge)((0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete'), deleteActionProps.className) }));
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: (0, twMerge_1.twMerge)(baseClassName, 'twa:rounded-standard', props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:flex-1 ${baseClassName}__rows twa:gap-2 twa:flex twa:flex-col`, children: props.items.filter?.(Boolean)?.map((tag, index) => {
+    const deleteActionButton = ((0, jsx_runtime_1.jsx)(ButtonDelete_1.ButtonDelete, { ...deleteActionProps, className: (0, utils_1.cn)((0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete'), deleteActionProps.className) }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.abObject.Uuid, as: "li", className: (0, utils_1.cn)(baseClassName, 'twa:rounded-standard', props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:flex-1 ${baseClassName}__rows twa:gap-2 twa:flex twa:flex-col`, children: props.items.filter?.(Boolean)?.map((tag, index) => {
                     const labelElement = typeof tag.label === 'function'
                         ? React.createElement(tag.label, { key: index, data: props.abObject })
                         : tag.label ?? tag.name;

package/src/View/Components/AdaptableObjectList/objectListActionButtonStyles.d.ts

@@ -1,2 +1,2 @@
-export type ObjectListActionKind = 'edit' | 'suspend' | 'delete' | 'share';
+export type ObjectListActionKind = 'edit' | 'suspend' | 'delete' | 'share' | 'clone';
 export declare const objectListActionButtonClassName: (kind: ObjectListActionKind, className?: string) => string;

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

@@ -2,5 +2,5 @@
 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);
+const objectListActionButtonClassName = (kind, className) => (0, utils_1.cn)('ab-ObjectListActionButton', `ab-ObjectListActionButton--${kind}`, 'twa:shadow-sm', className);
 exports.objectListActionButtonClassName = objectListActionButtonClassName;

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

@@ -7,7 +7,7 @@ const React = tslib_1.__importStar(require("react"));
 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, iconSize = 26, }) => {
+exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSuspend, style, disabled, accessLevel, className, iconSize = 24, }) => {
     const preparedDisabled = (accessLevel && accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY) || disabled;
     const isSuspended = suspendableObject.IsSuspended;
     const handleClick = React.useCallback(() => {
@@ -18,5 +18,5 @@ exports.SuspendToggleButton = React.memo(({ suspendableObject, onUnSuspend, onSu
             onSuspend(suspendableObject);
         }
     }, [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 }));
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { className: (0, utils_1.cn)('ab-SuspendButton', 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/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/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,7 +1,7 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../AdaptableState/StyledColumns/Common/NumericStyledColumn';
-import { GradientZeroCentredColors } from '../../AdaptableState/StyledColumns/GradientStyle';
+import { ZeroCentredColors } from '../../AdaptableState/StyledColumns/GradientStyle';
 import { ColumnScope } from '../../AdaptableState/Common/ColumnScope';
 export interface RangesComponentProps extends React.ClassAttributes<RangesComponent> {
     ranges: CellColorRange[];
@@ -35,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/Components/ToolPanel/ToolPanelPopupSections.js

@@ -18,8 +18,11 @@ var ToolPanelConfigView;
 })(ToolPanelConfigView || (exports.ToolPanelConfigView = ToolPanelConfigView = {}));
 const ToolPanelPopupSections = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    const initialExpandedId = props.initialTab === ToolPanelConfigView.Buttons ? 'module-buttons' : 'tool-panels';
-    const { bindCard, hasExpandedCard, expandedFillsSpace } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(initialExpandedId);
+    // Start with both cards collapsed so the user sees the popup's full
+    // summary at a glance and explicitly chooses which to edit. `initialTab`
+    // is still accepted on the props for backwards compatibility but no
+    // longer pre-expands a card.
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(null);
     const selectedModuleButtons = [];
     if (ArrayExtensions_1.default.IsNotNullOrEmpty(props.ToolPanelState.ModuleButtons)) {
         props.ToolPanelState.ModuleButtons.forEach((module) => {

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