@adaptabletools/adaptable 23.0.0-canary.8 → 23.0.0

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import debounce from '../../../../Utilities/utils/debounce';
+import { debounce } from '../../../../Utilities/Helpers/TimingHelper';
 import * as React from 'react';
 import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../../Utilities/adaptableQlUtils';

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

@@ -5,12 +5,13 @@ import FieldWrap from '../../../components/FieldWrap';
 import SimpleButton from '../../../components/SimpleButton';
 import Input from '../../../components/Input';
 import { twMerge } from '../../../twMerge';
+import { cn } from '../../../lib/utils';
 export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
     const clearDisabled = StringExtensions.IsNullOrEmpty(props.value.toString());
-    return (_jsxs(FieldWrap, { onClick: props.onClick, className: twMerge('twa:bg-input-background twa:text-input-foreground twa:overflow-visible twa:w-full twa:rounded-input', props.className), style: props.style, children: [_jsx(Input, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: props.inputClassName, ref: (r) => {
+    return (_jsxs(FieldWrap, { onClick: props.onClick, className: twMerge('twa:bg-input-background twa:text-input-foreground twa:overflow-visible twa:w-full twa:rounded-input', props.className), style: props.style, children: [_jsx(Input, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: 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

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { useAdaptable } from '../../../AdaptableContext';
 import * as PopupRedux from '../../../../Redux/ActionsReducers/PopupRedux';
 import { STANDALONE_MODULE_POPUPS } from '../../../../Utilities/Constants/GeneralConstants';
-import { resolveSettingsPanelNavigation } from '../../../../Utilities/Helpers/resolveSettingsPanelNavigation';
+import { resolveSettingsPanelNavigation } from '../../../../Utilities/Helpers/SettingsPanelHelper';
 import { isSettingsPanelNavigationItem, } from './settingsPanelNavigationTypes';
 export const useMenuItems = () => {
     const adaptable = useAdaptable();

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { PanelWithImage } from '../Panels/PanelWithImage';
 import { UIHelper } from '../../UIHelper';
 import Dialog from '../../../components/Dialog';
-import { resolveAlertFormForDefinition } from '../../../Utilities/Helpers/alertFormHelper';
+import { resolveAlertFormForDefinition } from '../../../Utilities/Helpers/AlertHelper';
 import { AdaptableFormComponent } from '../../../components/AdaptableFormComponent';
 import { useState } from 'react';
 import { useAdaptable } from '../../AdaptableContext';

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

@@ -1,4 +1,4 @@
-import { clamp } from '../../../Utilities/Helpers/Helper';
+import { clamp } from '../../../Utilities/Extensions/NumberExtensions';
 export const getMiddlePosition = (size) => {
     const height = window.innerHeight;
     const width = window.innerWidth;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { ColorPicker } from '../../components/ColorPicker';
-import clamp from '../../Utilities/utils/clamp';
+import { clamp } from '../../Utilities/Extensions/NumberExtensions';
 import { CheckBox } from '../../components/CheckBox';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import { NumberInput } from '../../components/Input/NumberInput';
@@ -110,13 +110,9 @@ export class RangesComponent extends React.Component {
         ].join(' ');
         const renderRangesContent = () => (_jsxs(_Fragment, { children: [isRangeValueTypeNumber ? (_jsxs(HelpBlock, { className: "twa:my-2 twa:text-3", children: [_jsx(Box, { children: "Define value bands from low to high, each with its own colour." }), _jsxs(Box, { children: ["Tick ", _jsx("strong", { children: "Use column min" }), " or ", _jsx("strong", { children: "Use column max" }), " to anchor the first and last band to the column's actual lowest and highest values."] })] })) : (_jsxs(HelpBlock, { className: "twa:my-2 twa:text-3", children: [_jsx(Box, { children: "Define bands as percentages (0\u2013100) of the column's value range." }), _jsxs(Box, { children: [_jsx("strong", { children: "0%" }), " is the column's lowest value and ", _jsx("strong", { children: "100%" }), " its highest; each band gets its own colour."] })] })), _jsx(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) => (_jsxs(Box, { className: "twa:contents", "data-name": "percent-bar-range", children: [_jsxs(Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === 0 && (_jsx(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" })), _jsx(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);
-                                        } })] }), _jsxs(Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === list.length - 1 && (_jsx(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" })), _jsx(NumberInput, { value: range.Max === 'Col-Max'
-                                            ? this.props.minMaxRangeValues?.max ?? ''
-                                            : range.Max, disabled: this.props.disabled ||
+                                        } })] }), _jsxs(Flex, { flexDirection: "column", children: [isRangeValueTypeNumber && index === list.length - 1 && (_jsx(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" })), _jsx(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);

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import kebabCase from '../../../Utilities/utils/kebabCase';
+import { kebabCase } from '../../../Utilities/Extensions/StringExtensions';
 import { ACCESS_LEVEL_FULL } from '../../../Utilities/Constants/GeneralConstants';
 import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
 import { connect } from 'react-redux';

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useLayoutEffect, useRef, useState } from 'react';
 import { useAdaptable } from '../../AdaptableContext';
 import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../AdaptableButton';
-import kebabCase from '../../../Utilities/utils/kebabCase';
+import { kebabCase } from '../../../Utilities/Extensions/StringExtensions';
 export const CustomToolPanelContent = (props) => {
     const { customToolPanel } = props;
     const { api } = useAdaptable();

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

@@ -14,8 +14,11 @@ export var ToolPanelConfigView;
 })(ToolPanelConfigView || (ToolPanelConfigView = {}));
 export const ToolPanelPopupSections = (props) => {
     const { api } = useAdaptable();
-    const initialExpandedId = props.initialTab === ToolPanelConfigView.Buttons ? 'module-buttons' : 'tool-panels';
-    const { bindCard, hasExpandedCard, expandedFillsSpace } = 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 } = useWizardCardAccordion(null);
     const selectedModuleButtons = [];
     if (ArrayExtensions.IsNotNullOrEmpty(props.ToolPanelState.ModuleButtons)) {
         props.ToolPanelState.ModuleButtons.forEach((module) => {

package/src/View/Dashboard/CustomDashboardButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import kebabCase from '../../Utilities/utils/kebabCase';
+import { kebabCase } from '../../Utilities/Extensions/StringExtensions';
 import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../Components/AdaptableButton';
 export const CustomDashboardButton = (props) => {
     const { button } = props;

package/src/View/Dashboard/Dashboard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import kebabCase from '../../Utilities/utils/kebabCase';
+import { kebabCase } from '../../Utilities/Extensions/StringExtensions';
 import { ACCESS_LEVEL_FULL, ACCESS_LEVEL_HIDDEN, ACCESS_LEVEL_READ_ONLY, } from '../../Utilities/Constants/GeneralConstants';
 import { connect } from 'react-redux';
 import { Dashboard as DashboardUI, DashboardTab as DashboardTabUI, } from '../../components/Dashboard';

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -7,7 +7,7 @@ import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryRes
 import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
 import { ButtonPause } from '../Components/Buttons/ButtonPause';
 import { ButtonStop } from '../Components/Buttons/ButtonStop';
-import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
+import { DateFormatter } from '../../Utilities/Helpers/DisplayFormatHelper';
 import { Box, Flex } from '../../components/Flex';
 class DataChangeHistoryPopupComponent extends React.Component {
     render() {

package/src/View/DataChangeHistory/DataChangeHistoryTable.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 import { Flex } from '../../components/Flex';
 import { DataChangeHistoryModuleId } from '../../Utilities/Constants/ModuleConstants';
-import FormatHelper from '../../Utilities/Helpers/FormatHelper';
+import FormatHelper from '../../Utilities/Helpers/DisplayFormatHelper';
 import { useAdaptable } from '../AdaptableContext';
 import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../Components/AdaptableButton/AdaptableButtonView';
 import { buildChangeHistoryButtons, buildDataChangeHistoryContext, } from './buildActionColumnButton';

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -5,7 +5,7 @@ import { DataChangeHistoryDisable, DataChangeHistoryEnable, DataChangeHistoryRes
 import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
 import { ButtonPause } from '../Components/Buttons/ButtonPause';
 import { ButtonStop } from '../Components/Buttons/ButtonStop';
-import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
+import { DateFormatter } from '../../Utilities/Helpers/DisplayFormatHelper';
 import Tooltip from '../../components/Tooltip';
 import { useAdaptable } from '../AdaptableContext';
 import SimpleButton from '../../components/SimpleButton';

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import flatten from '../../../../Utilities/utils/flatten';
+import { flatten } from '../../../../Utilities/Extensions/ArrayExtensions';
 import * as React from 'react';
 import HelpBlock from '../../../../components/HelpBlock';
 import { Icon } from '../../../../components/icons';

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import uniq from '../../../Utilities/utils/uniq';
-import clamp from '../../../Utilities/utils/clamp';
+import { uniq } from '../../../Utilities/Extensions/ArrayExtensions';
+import { clamp } from '../../../Utilities/Extensions/NumberExtensions';
 import HelpBlock from '../../../components/HelpBlock';
 import Input from '../../../components/Input';
 import SimpleButton from '../../../components/SimpleButton';
@@ -14,7 +14,7 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { Tag } from '../../../components/Tag';
 import { useAdaptable } from '../../AdaptableContext';
-import FormatHelper from '../../../Utilities/Helpers/FormatHelper';
+import FormatHelper from '../../../Utilities/Helpers/DisplayFormatHelper';
 import { Toggle, ToggleGroup } from '../../../components/Toggle';
 import { DEFAULT_DOUBLE_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../Utilities/Constants/GeneralConstants';
 import Textarea from '../../../components/Textarea';

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { resolveDisplayFormat } from '../../../AdaptableState/Common/AdaptableFormatPresets';
 import { DEFAULT_DOUBLE_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../Utilities/Constants/GeneralConstants';
-import FormatHelper from '../../../Utilities/Helpers/FormatHelper';
+import FormatHelper from '../../../Utilities/Helpers/DisplayFormatHelper';
 import { convertAdaptableStyleToCSS } from '../../../Utilities/Helpers/StyleHelper';
 import { Card } from '../../../components/Card';
 import { Box } from '../../../components/Flex';

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

@@ -4,7 +4,7 @@ import Radio, { RadioGroup } from '../../../components/Radio';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { CheckBox } from '../../../components/CheckBox';
-import { DateFormatter } from '../../../Utilities/Helpers/FormatHelper';
+import { DateFormatter } from '../../../Utilities/Helpers/DisplayFormatHelper';
 import { parseToISO } from '../../../Utilities/Helpers/DateHelper';
 import { Tag } from '../../../components/Tag';
 import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';

package/src/View/Layout/LayoutCloneButton.js

@@ -4,11 +4,12 @@ import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
 import { isPivotLayout } from '../../Utilities/isPivotLayout';
 import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
+import { objectListActionButtonClassName } from '../Components/AdaptableObjectList/objectListActionButtonStyles';
 export const LayoutCloneButton = ({ data, accessLevel }) => {
     const adaptable = useAdaptable();
     const isDisabled = accessLevel === ACCESS_LEVEL_READ_ONLY;
     const handleClick = React.useCallback(() => {
         adaptable.api.layoutApi.showLayoutEditor(data.Name, isPivotLayout(data) ? 'pivot' : 'table', 'Clone');
     }, []);
-    return (_jsx(SimpleButton, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone", tooltip: "Clone" }));
+    return (_jsx(SimpleButton, { onClick: handleClick, disabled: isDisabled, variant: "text", iconSize: 24, icon: "clone", tooltip: "Clone", className: objectListActionButtonClassName('clone') }));
 };

package/src/View/Layout/LayoutViewPanel.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
 import { connect } from 'react-redux';
-import isEqual from '../../Utilities/utils/isEqual';
+import { isEqual } from '../../Utilities/Extensions/ObjectExtensions';
 import join from '../../components/utils/join';
 import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';

package/src/View/Layout/Wizard/sections/RowSummarySection.js

@@ -138,7 +138,7 @@ const RowSummaryEditorForm = React.memo(({ rowSummary, onChange, availableScalar
             sortUnorderedItems: false,
         }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [rowSummary.ColumnsMap]);
-    return (_jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-3 twa:h-full twa:min-h-0 twa:overflow-hidden", children: [_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Position", children: _jsx(SingleSelect, { items: [
+    return (_jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-3 twa:h-full twa:overflow-hidden", children: [_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Position", children: _jsx(SingleSelect, { items: [
                                 {
                                     label: 'Top',
                                     value: 'Top',
@@ -157,7 +157,7 @@ const RowSummaryEditorForm = React.memo(({ rowSummary, onChange, availableScalar
                                     ...rowSummary,
                                     IncludeOnlyFilteredRows,
                                 });
-                            }, children: "Include Only Filtered Rows" }) })] }), _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:flex twa:flex-col", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Aggregations" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns and choose an aggregation function for each" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: _jsx(ValueSelector, { style: { minHeight: 0, maxHeight: '100%' }, showFilterInput: true, toggleSelectionOnRowClick: false, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, optionLayout: "label-beside-checkbox", toListLabel: (column) => {
+                            }, children: "Include Only Filtered Rows" }) })] }), _jsxs(Card, { shadow: false, className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:flex twa:flex-col", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Aggregations" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select columns and choose an aggregation function for each" })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: _jsx(ValueSelector, { showFilterInput: true, className: "twa:max-h-full twa:min-h-0", toggleSelectionOnRowClick: false, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, optionLayout: "label-beside-checkbox", toListLabel: (column) => {
                                 const label = column.friendlyName ?? column.columnId;
                                 const disabled = !(column.columnId in (rowSummary.ColumnsMap ?? {}));
                                 if (disabled) {
@@ -238,9 +238,9 @@ export const RowSummarySection = (props) => {
             }
         }
     };
-    return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-3'), children: [_jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:mb-2 twa:max-w-[520px] twa:shrink-0", children: "Add summary rows at the top or bottom of the grid with aggregated column values" }), _jsx(Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: _jsx(ButtonNew, { onClick: handleAddRowSummary, children: "Add Row Summary" }) }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0", children: rowSummaries.map((rowSummary, index) => {
+    return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-3'), children: [_jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:mb-2 twa:max-w-[520px] twa:shrink-0", children: "Add summary rows at the top or bottom of the grid with aggregated column values" }), _jsx(Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: _jsx(ButtonNew, { onClick: handleAddRowSummary, children: "Add Row Summary" }) }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0 twa:flex-1 twa:overflow-y-auto", children: rowSummaries.map((rowSummary, index) => {
                     const cardBinding = bindCard(rowSummaryCardId(index), { fillAvailable: true });
-                    return (_jsx(CollapsibleWizardCard, { ...cardBinding, surface: "panel", "data-name": `row-summary-${index}`, title: `Row Summary ${index + 1}`, help: "Configure position, filters, and column aggregations for this summary row", collapsedHelp: false, compactSummary: _jsx(RowSummaryPositionTag, { position: rowSummary.Position }), headerVisual: !cardBinding.expanded ? (_jsx(RowSummaryPositionTag, { position: rowSummary.Position })) : undefined, headerActions: _jsxs(_Fragment, { children: [cardBinding.expanded ? (_jsx(SuspendToggleButton, { iconSize: 26, className: objectListActionButtonClassName('suspend'), onSuspend: () => {
+                    return (_jsx(CollapsibleWizardCard, { ...cardBinding, surface: "panel", "data-name": `row-summary-${index}`, title: `Row Summary ${index + 1}`, help: "Configure position, filters, and column aggregations for this summary row", collapsedHelp: false, compactSummary: _jsx(RowSummaryPositionTag, { position: rowSummary.Position }), headerVisual: !cardBinding.expanded ? (_jsx(RowSummaryPositionTag, { position: rowSummary.Position })) : undefined, headerActions: _jsxs(_Fragment, { children: [cardBinding.expanded ? (_jsx(SuspendToggleButton, { className: objectListActionButtonClassName('suspend'), onSuspend: () => {
                                         const newSummaries = [...rowSummaries];
                                         newSummaries[index] = { ...rowSummary, IsSuspended: true };
                                         props.onChange({ ...layout, RowSummaries: newSummaries });
@@ -248,7 +248,7 @@ export const RowSummarySection = (props) => {
                                         const newSummaries = [...rowSummaries];
                                         newSummaries[index] = { ...rowSummary, IsSuspended: false };
                                         props.onChange({ ...layout, RowSummaries: newSummaries });
-                                    }, suspendableObject: rowSummary })) : null, _jsx(SimpleButton, { icon: "delete", variant: "text", tooltip: "Delete row summary", className: objectListActionButtonClassName('delete'), onClick: () => handleDeleteRowSummary(index) })] }), summary: _jsx(RowSummaryCardSummary, { rowSummary: rowSummary }), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0", children: _jsx(RowSummaryEditorForm, { rowSummary: rowSummary, availableScalarExpressions: availableScalarExpressions, onChange: (nextRowSummary) => {
+                                    }, suspendableObject: rowSummary })) : null, _jsx(SimpleButton, { icon: "delete", variant: "text", tooltip: "Delete row summary", className: objectListActionButtonClassName('delete'), onClick: () => handleDeleteRowSummary(index) })] }), summary: _jsx(RowSummaryCardSummary, { rowSummary: rowSummary }), className: cn('twa:overflow-hidden twa:flex twa:flex-col', cardBinding.expanded && 'twa:min-h-[500px]'), bodyClassName: " twa:overflow-hidden twa:flex twa:flex-col twa:pt-0!", children: _jsx(RowSummaryEditorForm, { rowSummary: rowSummary, availableScalarExpressions: availableScalarExpressions, onChange: (nextRowSummary) => {
                                 const newSummaries = [...rowSummaries];
                                 newSummaries[index] = nextRowSummary;
                                 props.onChange({

package/src/View/Note/NoteEditor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import throttle from '../../Utilities/utils/throttle';
+import { throttle } from '../../Utilities/Helpers/TimingHelper';
 import * as React from 'react';
 import Textarea from '../../components/Textarea';
 import SimpleButton from '../../components/SimpleButton';

package/src/View/Note/NotePopup.js

@@ -7,7 +7,7 @@ import { useAdaptable } from '../AdaptableContext';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
-import FormatHelper from '../../Utilities/Helpers/FormatHelper';
+import FormatHelper from '../../Utilities/Helpers/DisplayFormatHelper';
 import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
 const tableDOMProps = {
     style: {

package/src/View/PlusMinus/Wizard/PlusMinusSettingsWizardSection.js

@@ -5,7 +5,7 @@ import { SummaryText, useOnePageAdaptableWizardContext, } from '../../Wizard/One
 import { Tag } from '../../../components/Tag';
 import { Box, Flex } from '../../../components/Flex';
 import { Card } from '../../../components/Card';
-import { plusMinusDecrementKeyFromOptionsOnly, plusMinusIncrementKeyFromOptionsOnly, plusMinusResolvedKeysConflict, plusMinusTriggerSameAsBaseline, resolvePlusMinusTriggerKeysForNudge, } from '../../../Utilities/Helpers/plusMinusTriggerKeys';
+import { plusMinusDecrementKeyFromOptionsOnly, plusMinusIncrementKeyFromOptionsOnly, plusMinusResolvedKeysConflict, plusMinusTriggerSameAsBaseline, resolvePlusMinusTriggerKeysForNudge, } from '../../../Utilities/Helpers/PlusMinusHelper';
 export const PlusMinusSettingsSummary = () => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const { incrementKey, decrementKey } = resolvePlusMinusTriggerKeysForNudge(data, api.optionsApi.getEditOptions().plusMinusOptions ?? {});

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -11,7 +11,7 @@ import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { useQuickSearchDebounced } from './useQuickSearchDebounced';
 import { QuickSearchInput } from './QuickSearchInput';
 import { Card } from '../../components/Card';
-import { isQuickSearchStyleUnset, resolveQuickSearchCurrentTextMatchStyle, resolveQuickSearchTextMatchStyle, } from '../../Utilities/Helpers/QuickSearchStyleHelper';
+import { isQuickSearchStyleUnset, resolveQuickSearchCurrentTextMatchStyle, resolveQuickSearchTextMatchStyle, } from '../../Utilities/Helpers/QuickSearchHelper';
 const QuickSearchStyleEditor = ({ api, helpText, headerText, style, updateStyle }) => (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: headerText }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: helpText })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(StyleComponent, { headless: true, hidePreview: true, className: "twa:h-full twa:flex-1 twa:rounded-none", api: api, Style: style, UpdateStyle: updateStyle }) })] }));
 const QuickSearchPopupComponent = (props) => {
     const [searchText, search] = useQuickSearchDebounced(props);

package/src/View/QuickSearch/useQuickSearchDebounced.js

@@ -1,5 +1,5 @@
 import { useEffect, useState, useMemo } from 'react';
-import debounce from '../../Utilities/utils/debounce';
+import { debounce } from '../../Utilities/Helpers/TimingHelper';
 import { QUICK_SEARCH_DEBOUNCE_TIME } from '../../Utilities/Constants/GeneralConstants';
 export const useQuickSearchDebounced = (props) => {
     const [searchText, setSearchText] = useState(props.QuickSearchText ?? '');

package/src/View/Schedule/Wizard/ScheduleScheduleWizard.js

@@ -9,7 +9,7 @@ import { Box } from '../../../components/Flex';
 import { Card } from '../../../components/Card';
 import { SingleSelect } from '../../../components/NewSelect';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
-import { buildCronExpression, buildRunAtIso, inferPresetFromCron, isScheduleValid as validateSchedule, parseOneOffDateFromRunAt, parseTimeFromSchedule, } from '../../../Utilities/Helpers/ScheduleHelper';
+import { buildCronExpression, buildRunAtIso, inferPresetFromCron, isScheduleValid as validateSchedule, parseOneOffDateFromRunAt, parseTimeFromSchedule, } from '../../../Utilities/Helpers/Scheduling/ScheduleHelper';
 export const isScheduleValid = (holder) => {
     if (!holder?.Schedule) {
         return 'Schedule is not specified';

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import chunk from '../Utilities/utils/chunk';
+import { chunk } from '../Utilities/Extensions/ArrayExtensions';
 import { CheckBox } from '../components/CheckBox';
 import FormLayout, { FormRow } from '../components/FormLayout';
 import { useAdaptable } from './AdaptableContext';

package/src/View/StatusBar/StatusBarPopup.js

@@ -47,18 +47,22 @@ export const StatusBarPopup = (props) => {
                 moduleShortcutIds.push(item.Id);
             }
         });
+        // Roughly balance the two boxes by item count (~10 panels vs ~17 shortcuts)
+        // so the wider list gets the extra room and they feel more even.
         return [
             {
                 listId: 'UNUSED-PANELS',
                 title: 'Status Panels',
                 help: 'Fully featured actionable controls',
                 items: statusPanelIds,
+                flex: 40,
             },
             {
                 listId: 'UNUSED-SHORTCUTS',
                 title: 'Module Shortcuts',
                 help: 'Buttons to open Module Status Panel',
                 items: moduleShortcutIds,
+                flex: 60,
             },
         ];
     }, [availableItems, adaptable]);

package/src/View/StyledColumn/Wizard/StyledColumnBadgeSection.js

@@ -21,7 +21,6 @@ import { BadgePillStyleEditor, getBadgePillStyleSummaryItems } from './BadgePill
 import { getCellBoxStyleSummaryItems, getCellFontStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
 import { useAdaptable } from '../../AdaptableContext';
-import { StyledColumnBadgePreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
 import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
 import { SingleSelect } from '../../../components/NewSelect';
 import { cn } from '../../../lib/utils';
@@ -229,7 +228,7 @@ export const StyledColumnBadgeSection = (props) => {
             }
         }
     };
-    return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [_jsx(Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: _jsx(ButtonNew, { onClick: handleAddBadge, children: "Add Badge" }) }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0", children: badges.map((badge, index) => {
+    return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [_jsx(Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: _jsx(ButtonNew, { onClick: handleAddBadge, children: "Add Badge" }) }), _jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0 twa:overflow-y-auto", children: badges.map((badge, index) => {
                     const handleEditBadge = (nextBadge) => {
                         const newBadges = [...badges];
                         newBadges[index] = nextBadge;
@@ -285,7 +284,7 @@ export const StyledColumnBadgeStyleSection = (props) => {
                                             delete cleaned.Cell;
                                             props.onChange({ ...data, BadgeStyle: cleaned });
                                         }
-                                    } }) })] })] }), _jsx(StyledColumnBadgePreviewCard, { data: data })] }));
+                                    } }) })] })] })] }));
 };
 export const renderBadgeStyleSummary = (styledColumn, api) => {
     const items = getStyledColumnBadgeStyleViewValues(styledColumn, api);

package/src/View/StyledColumn/Wizard/StyledColumnSparklineSettingsSection.js

@@ -12,7 +12,6 @@ import { Box, Flex } from '../../../components/Flex';
 import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
 import ErrorBox from '../../../components/ErrorBox';
-import { StyledColumnSparklinePreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 /** Sentinel for the theme dropdown — persisted options omit `theme` when this is chosen. */
 const SPARKLINE_CUSTOM_COLOURS_THEME = '__custom__';
@@ -167,7 +166,7 @@ export const StyledColumnSparklineSettingsSection = ({ onChange }) => {
                                     delete sparkStyle.Cell;
                                 }
                                 onChange({ ...data, SparklineStyle: sparkStyle });
-                            } }) })] }), _jsx(StyledColumnSparklinePreviewCard, { data: data })] }));
+                            } }) })] })] }));
 };
 const SparklineObjectArrayProperties = ({ options, onChange, }) => {
     const { data, api } = useOnePageAdaptableWizardContext();

package/src/View/StyledColumn/Wizard/StyledColumnWizard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../Wizard/OnePageAdaptableWizard';
@@ -17,14 +17,14 @@ import { isValidIconStyleMappings, renderStyledColumnIconStyleSummary, renderSty
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
 import { renderBadgeStyleSummary, renderBadgeSummary, StyledColumnBadgeStyleSection, StyledColumnBadgeSection, } from './StyledColumnBadgeSection';
 import { Box } from '../../../components/Flex';
-import { StyledColumnGradientPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview';
-import { StyledColumnPercentBarPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnPercentBarPreview';
-import { StyledColumnBadgePreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
-import { StyledColumnRatingPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
-import { StyledColumnIconPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnIconPreview';
-import { StyledColumnBulletPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
-import { StyledColumnRangeBarPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
-import { StyledColumnSparklinePreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview';
+import { StyledColumnGradientPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview';
+import { StyledColumnPercentBarPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnPercentBarPreview';
+import { StyledColumnBadgePreview } from './StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
+import { StyledColumnRatingPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
+import { StyledColumnIconPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnIconPreview';
+import { StyledColumnBulletPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
+import { StyledColumnRangeBarPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
+import { StyledColumnSparklinePreview } from './StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview';
 /**
  * Mirrors the migration default in `VersionUpgrade23.patchStyledColumnName` and
  * the auto-fill logic in `StyledColumnWizardTypeSection` so users opening the
@@ -265,12 +265,41 @@ export const StyledColumnWizard = (props) => {
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnBadgeStyleSection, { onChange: setStyledColumn }) })),
         });
     }
+    // Persistent live preview shown at the top of the section content on
+    // every step. We render the bare preview (no Card chrome) so it sits
+    // flush above the form. Only one of these can apply at a time — the
+    // styled column owns exactly one of these style buckets.
+    let headerPreview = null;
+    if (styledColumn.GradientStyle) {
+        headerPreview = _jsx(StyledColumnGradientPreview, { data: styledColumn });
+    }
+    else if (styledColumn.PercentBarStyle) {
+        headerPreview = _jsx(StyledColumnPercentBarPreview, { data: styledColumn });
+    }
+    else if (styledColumn.BadgeStyle) {
+        headerPreview = _jsx(StyledColumnBadgePreview, { data: styledColumn });
+    }
+    else if (styledColumn.RatingStyle) {
+        headerPreview = _jsx(StyledColumnRatingPreview, { data: styledColumn });
+    }
+    else if (styledColumn.IconStyle) {
+        headerPreview = _jsx(StyledColumnIconPreview, { data: styledColumn });
+    }
+    else if (styledColumn.BulletChartStyle) {
+        headerPreview = _jsx(StyledColumnBulletPreview, { data: styledColumn });
+    }
+    else if (styledColumn.RangeBarStyle) {
+        headerPreview = _jsx(StyledColumnRangeBarPreview, { data: styledColumn });
+    }
+    else if (styledColumn.SparklineStyle) {
+        headerPreview = _jsx(StyledColumnSparklinePreview, { data: styledColumn });
+    }
     return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, 
         // Display the picked type in the header (e.g. "Gradient Column",
         // "Percent Bar Column") so the user always knows which kind of
         // column they're configuring. Falls back to "Styled Column"
         // before a type has been selected.
-        moduleName: getStyledColumnWizardTitle(styledColumn), data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+        moduleName: getStyledColumnWizardTitle(styledColumn), data: styledColumn, headerPreview: headerPreview, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
                 details: 'Enter a Name and select a Styled Column Type',
                 isValid: (data) => {
@@ -308,7 +337,7 @@ export const StyledColumnWizard = (props) => {
                 title: 'Summary',
                 details: 'Review your Styled Column',
                 render: () => {
-                    return (_jsxs(Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: [_jsx(OnePageWizardSummary, {}), styledColumn.GradientStyle && (_jsx(StyledColumnGradientPreviewCard, { data: styledColumn })), styledColumn.PercentBarStyle && (_jsx(StyledColumnPercentBarPreviewCard, { data: styledColumn })), styledColumn.BadgeStyle && (_jsx(StyledColumnBadgePreviewCard, { data: styledColumn })), styledColumn.RatingStyle && (_jsx(StyledColumnRatingPreviewCard, { data: styledColumn })), styledColumn.IconStyle && (_jsx(StyledColumnIconPreviewCard, { data: styledColumn })), styledColumn.BulletChartStyle && (_jsx(StyledColumnBulletPreviewCard, { data: styledColumn })), styledColumn.RangeBarStyle && (_jsx(StyledColumnRangeBarPreviewCard, { data: styledColumn })), styledColumn.SparklineStyle && (_jsx(StyledColumnSparklinePreviewCard, { data: styledColumn }))] }));
+                    return (_jsx(Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: _jsx(OnePageWizardSummary, {}) }));
                 },
             },
         ] }));