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

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

@@ -4,8 +4,8 @@ exports.FormatColumnFormatWizardSection = exports.getFormatDisplayTypeForScope =
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const uniq_1 = tslib_1.__importDefault(require("../../../Utilities/utils/uniq"));
-const clamp_1 = tslib_1.__importDefault(require("../../../Utilities/utils/clamp"));
+const ArrayExtensions_1 = require("../../../Utilities/Extensions/ArrayExtensions");
+const NumberExtensions_1 = require("../../../Utilities/Extensions/NumberExtensions");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
@@ -18,7 +18,7 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
 const Tag_1 = require("../../../components/Tag");
 const AdaptableContext_1 = require("../../AdaptableContext");
-const FormatHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/FormatHelper"));
+const DisplayFormatHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/DisplayFormatHelper"));
 const Toggle_1 = require("../../../components/Toggle");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const Textarea_1 = tslib_1.__importDefault(require("../../../components/Textarea"));
@@ -193,7 +193,7 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     // Check for ColumnIds in scope
     if ('ColumnIds' in scope) {
         const columns = scope.ColumnIds.map((c) => api.columnApi.getColumnWithColumnId(c)).filter(Boolean);
-        const columnDataTypes = (0, uniq_1.default)(columns.map((c) => c.dataType));
+        const columnDataTypes = (0, ArrayExtensions_1.uniq)(columns.map((c) => c.dataType));
         // If there's only one data type
         if (columnDataTypes.length === 1) {
             const dataType = columnDataTypes[0];
@@ -298,7 +298,7 @@ const DATE_FORMAT_PRESET_HEADER_HEIGHT = 40;
 const DateFormatPresetsTable = ({ onApplyPattern }) => {
     const rows = React.useMemo(() => DateFormatPresets.map((pattern) => ({
         pattern,
-        formattedDate: FormatHelper_1.default.DateFormatter(new Date(), { Pattern: pattern }) ?? '',
+        formattedDate: DisplayFormatHelper_1.default.DateFormatter(new Date(), { Pattern: pattern }) ?? '',
     })), []);
     const columns = React.useMemo(() => ({
         pattern: {
@@ -331,7 +331,7 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
         return null;
     }
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Format" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Enter a Unicode date pattern (e.g. dd/MM/yyyy), or pick a preset below" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Pattern", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "pattern", value: resolved.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), className: "twa:mr-2" }), (0, jsx_runtime_1.jsx)("span", { children: resolved.Options.Pattern &&
-                                            FormatHelper_1.default.DateFormatter(new Date(), resolved.Options, true) })] }) }) })] }), scopedCustomFormatters.length > 0 && ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Custom Formats" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) })] })), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Presets" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a common date pattern as a starting point" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:px-0 twa:pt-0 twa:pb-1", children: (0, jsx_runtime_1.jsx)(DateFormatPresetsTable, { onApplyPattern: (pattern) => setFormatOption('Pattern', pattern) }) })] })] }));
+                                            DisplayFormatHelper_1.default.DateFormatter(new Date(), resolved.Options, true) })] }) }) })] }), scopedCustomFormatters.length > 0 && ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Custom Formats" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) })] })), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Presets" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a common date pattern as a starting point" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:px-0 twa:pt-0 twa:pb-1", children: (0, jsx_runtime_1.jsx)(DateFormatPresetsTable, { onApplyPattern: (pattern) => setFormatOption('Pattern', pattern) }) })] })] }));
 };
 const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, api) => {
     const resolved = (0, AdaptableFormatPresets_1.resolveDisplayFormat)(data.DisplayFormat);
@@ -367,9 +367,9 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
     return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", "data-name": 'format-column-display-format', className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Presets" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick a common numeric preset as a starting point" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: "twa:m-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-dollar", className: "twa:my-1", checked: IS_DOLLAR, onChange: () => setPreset('Dollar'), children: "Dollar" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-sterling", className: "twa:my-1", checked: IS_STERLING, onChange: () => setPreset('Sterling'), children: "Sterling" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-euro", className: "twa:my-1", checked: IS_EURO, onChange: () => setPreset('Euro'), children: "Euro" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-yen", className: "twa:my-1", checked: IS_YEN, onChange: () => setPreset('Yen'), children: "Yen" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-thousand", className: "twa:my-1", checked: IS_THOUSAND, onChange: () => setPreset('Thousand'), children: "K (Thousand)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-million", className: "twa:my-1", checked: IS_MILLION, onChange: () => setPreset('Million'), children: "M (Million)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-billion", className: "twa:my-1", checked: IS_BILLION, onChange: () => setPreset('Billion'), children: "B (Billion)" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-basis-points", className: "twa:my-1", checked: IS_BASIS_POINTS, onChange: () => setPreset('BasisPoints'), children: "bps (Basis Pts)" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:mr-6", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-integer", className: "twa:my-1", checked: IS_INTEGER, onChange: () => setPreset('Integer'), children: "Integer" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-decimal", className: "twa:my-1", checked: IS_DECIMAL, onChange: () => setPreset('Decimal'), children: "Decimal" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-percentage", className: "twa:my-1", checked: IS_PERCENT, onChange: () => setPreset('Percentage'), children: "Percentage" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-scientific", className: "twa:my-1", checked: IS_SCIENTIFIC, onChange: () => setPreset('Scientific'), children: "Scientific" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-accounting", className: "twa:my-1", checked: IS_ACCOUNTING, onChange: () => setPreset('Accounting'), children: "Accounting" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-fx-rate", className: "twa:my-1", checked: IS_FX_RATE, onChange: () => setPreset('FXRate'), children: "FX Rate" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "preset-bitcoin", className: "twa:my-1", checked: IS_BITCOIN, onChange: () => setPreset('Bitcoin'), children: "Bitcoin" })] })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:pl-0", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Format" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Fine-tune digits, separators, prefix / suffix and rounding behaviour" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:px-0 twa:pt-0 twa:pb-1", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-row twa:items-start twa:-ml-0.5", children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: NUMBER_FORMAT_DIGIT_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, { name: 'children' }], className: "twa:mr-6 twa:shrink-0", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fraction Digits", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "fraction-digits", type: "number", min: "0", value: typeof resolved.Options.FractionDigits === 'number'
                                                     ? resolved.Options.FractionDigits
                                                     : '', onChange: (e) => setFormatOption('FractionDigits', StringExtensions_1.default.IsNumeric(e.currentTarget.value)
-                                                    ? (0, clamp_1.default)(Number(e.currentTarget.value), 0, 20)
+                                                    ? (0, NumberExtensions_1.clamp)(Number(e.currentTarget.value), 0, 20)
                                                     : undefined) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Integer Digits", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "integer-digits", type: "number", min: "0", value: resolved.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions_1.default.IsNumeric(e.currentTarget.value)
-                                                    ? (0, clamp_1.default)(Number(e.currentTarget.value), 0, 20)
+                                                    ? (0, NumberExtensions_1.clamp)(Number(e.currentTarget.value), 0, 20)
                                                     : undefined) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fraction Separator", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Integer Separator", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) }) })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: NUMBER_FORMAT_VALUE_FORM_SIZES, columns: [NUMBER_FORMAT_LABEL_COLUMN, NUMBER_FORMAT_VALUE_CHILDREN_COLUMN], className: "twa:mr-5 twa:shrink-0", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Multiplier", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "multiplier", type: "number", value: resolved.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Prefix", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Suffix", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Zero Display", children: (0, jsx_runtime_1.jsx)(Input_1.default, { className: NUMBER_FORMAT_INPUT_CLASS, "data-name": "zero-display", value: resolved.Options.ZeroDisplay === undefined ||
                                                     resolved.Options.ZeroDisplay === '0'
                                                     ? '0'
@@ -390,25 +390,25 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                                 ] }), (0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                                     { Content: GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
                                     {
-                                        Content: FormatHelper_1.default.NumberFormatter(GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
+                                        Content: DisplayFormatHelper_1.default.NumberFormatter(GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
                                         Size: 1,
                                     },
                                 ] }), (0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                                     { Content: '-' + GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
                                     {
-                                        Content: FormatHelper_1.default.NumberFormatter(-GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
+                                        Content: DisplayFormatHelper_1.default.NumberFormatter(-GeneralConstants_1.DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
                                         Size: 1,
                                     },
                                 ] }), (0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                                     { Content: '0.123', Size: 1 },
                                     {
-                                        Content: FormatHelper_1.default.NumberFormatter(0.123, resolved.Options),
+                                        Content: DisplayFormatHelper_1.default.NumberFormatter(0.123, resolved.Options),
                                         Size: 1,
                                     },
                                 ] }), (0, jsx_runtime_1.jsx)(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: [
                                     { Content: '0', Size: 1 },
                                     {
-                                        Content: FormatHelper_1.default.NumberFormatter(0, resolved.Options),
+                                        Content: DisplayFormatHelper_1.default.NumberFormatter(0, resolved.Options),
                                         Size: 1,
                                     },
                                 ] })] })] })] }));
@@ -426,7 +426,7 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
                                     { Content: '"' + GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE + '"', Size: 1 },
                                     {
                                         Content: '"' +
-                                            FormatHelper_1.default.StringFormatter(GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE, resolved.Options) +
+                                            DisplayFormatHelper_1.default.StringFormatter(GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE, resolved.Options) +
                                             '"',
                                         Size: 1,
                                     },

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

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const AdaptableFormatPresets_1 = require("../../../AdaptableState/Common/AdaptableFormatPresets");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
-const FormatHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/FormatHelper"));
+const DisplayFormatHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/DisplayFormatHelper"));
 const StyleHelper_1 = require("../../../Utilities/Helpers/StyleHelper");
 const Card_1 = require("../../../components/Card");
 const Flex_1 = require("../../../components/Flex");
@@ -52,13 +52,13 @@ const getFormatColumnPreviewText = (formatColumn, api) => {
         return String(sample);
     }
     if (resolved.Formatter === 'NumberFormatter' && typeof sample === 'number') {
-        return FormatHelper_1.default.NumberFormatter(sample, resolved.Options) ?? String(sample);
+        return DisplayFormatHelper_1.default.NumberFormatter(sample, resolved.Options) ?? String(sample);
     }
     if (resolved.Formatter === 'DateFormatter') {
-        return FormatHelper_1.default.DateFormatter(new Date(), resolved.Options) ?? String(sample);
+        return DisplayFormatHelper_1.default.DateFormatter(new Date(), resolved.Options) ?? String(sample);
     }
     if (resolved.Formatter === 'StringFormatter' && typeof sample === 'string') {
-        return FormatHelper_1.default.StringFormatter(sample, resolved.Options) ?? sample;
+        return DisplayFormatHelper_1.default.StringFormatter(sample, resolved.Options) ?? sample;
     }
     return String(sample);
 };

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

@@ -8,7 +8,7 @@ const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const CheckBox_1 = require("../../../components/CheckBox");
-const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
+const DisplayFormatHelper_1 = require("../../../Utilities/Helpers/DisplayFormatHelper");
 const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
 const Tag_1 = require("../../../components/Tag");
 const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
@@ -56,7 +56,7 @@ const FreeTextColumnSettingsWizardSection = (props) => {
         let e = event.target;
         let DefaultValue = e.value;
         if (data.FreeTextColumnSettings.DataType === 'date') {
-            DefaultValue = (0, FormatHelper_1.DateFormatter)(DefaultValue, {
+            DefaultValue = (0, DisplayFormatHelper_1.DateFormatter)(DefaultValue, {
                 Pattern,
             });
         }

package/src/View/Layout/LayoutCloneButton.js

@@ -8,12 +8,13 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleB
 const AdaptableContext_1 = require("../AdaptableContext");
 const isPivotLayout_1 = require("../../Utilities/isPivotLayout");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const objectListActionButtonStyles_1 = require("../Components/AdaptableObjectList/objectListActionButtonStyles");
 const LayoutCloneButton = ({ data, accessLevel }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const isDisabled = accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
     const handleClick = React.useCallback(() => {
         adaptable.api.layoutApi.showLayoutEditor(data.Name, (0, isPivotLayout_1.isPivotLayout)(data) ? 'pivot' : 'table', 'Clone');
     }, []);
-    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone", tooltip: "Clone" }));
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: handleClick, disabled: isDisabled, variant: "text", iconSize: 24, icon: "clone", tooltip: "Clone", className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('clone') }));
 };
 exports.LayoutCloneButton = LayoutCloneButton;

package/src/View/Layout/LayoutViewPanel.js

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 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 join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
@@ -24,7 +24,7 @@ const NewSelect_1 = require("../../components/NewSelect");
 exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 const LayoutViewPanelComponent = (props) => {
     const { Layouts, CurrentLayoutName, accessLevel, viewType, api, onSelectLayout, showMissingLayoutsError, } = props;
-    const isErrorLayout = !Layouts.length || (Layouts.length === 1 && (0, isEqual_1.default)(Layouts[0], GeneralConstants_1.ERROR_LAYOUT));
+    const isErrorLayout = !Layouts.length || (Layouts.length === 1 && (0, ObjectExtensions_1.isEqual)(Layouts[0], GeneralConstants_1.ERROR_LAYOUT));
     React.useEffect(() => {
         if (isErrorLayout) {
             showMissingLayoutsError();

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

@@ -144,7 +144,7 @@ const RowSummaryEditorForm = React.memo(({ rowSummary, onChange, availableScalar
             sortUnorderedItems: false,
         }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
     }, [rowSummary.ColumnsMap]);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-3 twa:h-full twa:min-h-0 twa:overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: [
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:flex twa:flex-col twa:gap-3 twa:h-full twa:overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: [
                                 {
                                     label: 'Top',
                                     value: 'Top',
@@ -163,7 +163,7 @@ const RowSummaryEditorForm = React.memo(({ rowSummary, onChange, availableScalar
                                     ...rowSummary,
                                     IncludeOnlyFilteredRows,
                                 });
-                            }, children: "Include Only Filtered Rows" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Aggregations" }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { style: { minHeight: 0, maxHeight: '100%' }, showFilterInput: true, toggleSelectionOnRowClick: false, filter: Utilities_1.columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => option.friendlyName ?? option.columnId, options: columns, optionLayout: "label-beside-checkbox", toListLabel: (column) => {
+                            }, children: "Include Only Filtered Rows" }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:flex twa:flex-col", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Aggregations" }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden twa:p-1", children: (0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { showFilterInput: true, className: "twa:max-h-full twa:min-h-0", toggleSelectionOnRowClick: false, filter: Utilities_1.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) {
@@ -244,9 +244,9 @@ const RowSummarySection = (props) => {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)((0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), 'twa:p-3'), children: [(0, jsx_runtime_1.jsx)(Flex_1.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" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: handleAddRowSummary, children: "Add Row Summary" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0", children: rowSummaries.map((rowSummary, index) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)((0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), 'twa:p-3'), children: [(0, jsx_runtime_1.jsx)(Flex_1.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" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: handleAddRowSummary, children: "Add Row Summary" }) }), (0, jsx_runtime_1.jsx)(Flex_1.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 ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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: (0, jsx_runtime_1.jsx)(RowSummaryPositionTag, { position: rowSummary.Position }), headerVisual: !cardBinding.expanded ? ((0, jsx_runtime_1.jsx)(RowSummaryPositionTag, { position: rowSummary.Position })) : undefined, headerActions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [cardBinding.expanded ? ((0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { iconSize: 26, className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('suspend'), onSuspend: () => {
+                    return ((0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.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: (0, jsx_runtime_1.jsx)(RowSummaryPositionTag, { position: rowSummary.Position }), headerVisual: !cardBinding.expanded ? ((0, jsx_runtime_1.jsx)(RowSummaryPositionTag, { position: rowSummary.Position })) : undefined, headerActions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [cardBinding.expanded ? ((0, jsx_runtime_1.jsx)(SuspendToggleButton_1.SuspendToggleButton, { className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('suspend'), onSuspend: () => {
                                         const newSummaries = [...rowSummaries];
                                         newSummaries[index] = { ...rowSummary, IsSuspended: true };
                                         props.onChange({ ...layout, RowSummaries: newSummaries });
@@ -254,7 +254,7 @@ const RowSummarySection = (props) => {
                                         const newSummaries = [...rowSummaries];
                                         newSummaries[index] = { ...rowSummary, IsSuspended: false };
                                         props.onChange({ ...layout, RowSummaries: newSummaries });
-                                    }, suspendableObject: rowSummary })) : null, (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", variant: "text", tooltip: "Delete row summary", className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete'), onClick: () => handleDeleteRowSummary(index) })] }), summary: (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(RowSummaryEditorForm, { rowSummary: rowSummary, availableScalarExpressions: availableScalarExpressions, onChange: (nextRowSummary) => {
+                                    }, suspendableObject: rowSummary })) : null, (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { icon: "delete", variant: "text", tooltip: "Delete row summary", className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('delete'), onClick: () => handleDeleteRowSummary(index) })] }), summary: (0, jsx_runtime_1.jsx)(RowSummaryCardSummary, { rowSummary: rowSummary }), className: (0, utils_1.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: (0, jsx_runtime_1.jsx)(RowSummaryEditorForm, { rowSummary: rowSummary, availableScalarExpressions: availableScalarExpressions, onChange: (nextRowSummary) => {
                                 const newSummaries = [...rowSummaries];
                                 newSummaries[index] = nextRowSummary;
                                 props.onChange({

package/src/View/Note/NoteEditor.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NoteEditor = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const throttle_1 = tslib_1.__importDefault(require("../../Utilities/utils/throttle"));
+const TimingHelper_1 = require("../../Utilities/Helpers/TimingHelper");
 const React = tslib_1.__importStar(require("react"));
 const Textarea_1 = tslib_1.__importDefault(require("../../components/Textarea"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
@@ -15,7 +15,7 @@ const NoteEditor = ({ note, onNoteChange, onClose, editMode, isReadonly }) => {
     const textAreaRef = React.useRef(null);
     const [liveValue, setLiveValue] = React.useState(note || '');
     const throttledOnChange = React.useMemo(() => {
-        const throttled = (0, throttle_1.default)((value) => onNoteChange(value), 300);
+        const throttled = (0, TimingHelper_1.throttle)((value) => onNoteChange(value), 300);
         return (value) => {
             setLiveValue(value);
             throttled(value);

package/src/View/Note/NotePopup.js

@@ -11,7 +11,7 @@ const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableButton_1 = require("../Components/AdaptableButton");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
-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 tableDOMProps = {
     style: {
@@ -40,7 +40,7 @@ const NotePopup = (props) => {
     const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Note') ===
         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/PlusMinus/Wizard/PlusMinusSettingsWizardSection.js

@@ -9,10 +9,10 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../components/Tag");
 const Flex_1 = require("../../../components/Flex");
 const Card_1 = require("../../../components/Card");
-const plusMinusTriggerKeys_1 = require("../../../Utilities/Helpers/plusMinusTriggerKeys");
+const PlusMinusHelper_1 = require("../../../Utilities/Helpers/PlusMinusHelper");
 const PlusMinusSettingsSummary = () => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const { incrementKey, decrementKey } = (0, plusMinusTriggerKeys_1.resolvePlusMinusTriggerKeysForNudge)(data, api.optionsApi.getEditOptions().plusMinusOptions ?? {});
+    const { incrementKey, decrementKey } = (0, PlusMinusHelper_1.resolvePlusMinusTriggerKeysForNudge)(data, api.optionsApi.getEditOptions().plusMinusOptions ?? {});
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Name ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.Name || 'Not specified' })] }), (0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Nudge Value ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.NudgeValue ?? 'Not selected' })] }), (0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_1.SummaryText, { children: ["Keys ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: incrementKey }), " / ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: decrementKey })] })] }));
 };
 exports.PlusMinusSettingsSummary = PlusMinusSettingsSummary;
@@ -31,7 +31,7 @@ const isSettingsValid = (data, api, _context) => {
     if (data.NudgeValue === 0) {
         return 'Nudge value must not be zero.';
     }
-    if ((0, plusMinusTriggerKeys_1.plusMinusResolvedKeysConflict)(data, api.optionsApi.getEditOptions().plusMinusOptions ?? {})) {
+    if ((0, PlusMinusHelper_1.plusMinusResolvedKeysConflict)(data, api.optionsApi.getEditOptions().plusMinusOptions ?? {})) {
         return 'Increment and decrement keys cannot be the same for this nudge.';
     }
     return true;
@@ -40,8 +40,8 @@ exports.isSettingsValid = isSettingsValid;
 const PlusMinusSettingsWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const pmOpts = api.optionsApi.getEditOptions().plusMinusOptions ?? {};
-    const incrementBaseline = (0, plusMinusTriggerKeys_1.plusMinusIncrementKeyFromOptionsOnly)(pmOpts);
-    const decrementBaseline = (0, plusMinusTriggerKeys_1.plusMinusDecrementKeyFromOptionsOnly)(pmOpts);
+    const incrementBaseline = (0, PlusMinusHelper_1.plusMinusIncrementKeyFromOptionsOnly)(pmOpts);
+    const decrementBaseline = (0, PlusMinusHelper_1.plusMinusDecrementKeyFromOptionsOnly)(pmOpts);
     const [incrementEdit, setIncrementEdit] = React.useState(undefined);
     const [decrementEdit, setDecrementEdit] = React.useState(undefined);
     React.useEffect(() => {
@@ -60,7 +60,7 @@ const PlusMinusSettingsWizardSection = (props) => {
             : decrementBaseline;
     const commitIncrementKey = React.useCallback((raw) => {
         const trimmed = raw.trim();
-        const next = trimmed === '' || (0, plusMinusTriggerKeys_1.plusMinusTriggerSameAsBaseline)(trimmed, incrementBaseline)
+        const next = trimmed === '' || (0, PlusMinusHelper_1.plusMinusTriggerSameAsBaseline)(trimmed, incrementBaseline)
             ? undefined
             : trimmed;
         const prev = data.IncrementKey?.trim() || undefined;
@@ -70,7 +70,7 @@ const PlusMinusSettingsWizardSection = (props) => {
     }, [data, incrementBaseline, props.onChange]);
     const commitDecrementKey = React.useCallback((raw) => {
         const trimmed = raw.trim();
-        const next = trimmed === '' || (0, plusMinusTriggerKeys_1.plusMinusTriggerSameAsBaseline)(trimmed, decrementBaseline)
+        const next = trimmed === '' || (0, PlusMinusHelper_1.plusMinusTriggerSameAsBaseline)(trimmed, decrementBaseline)
             ? undefined
             : trimmed;
         const prev = data.DecrementKey?.trim() || undefined;

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -15,7 +15,7 @@ const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Exte
 const useQuickSearchDebounced_1 = require("./useQuickSearchDebounced");
 const QuickSearchInput_1 = require("./QuickSearchInput");
 const Card_1 = require("../../components/Card");
-const QuickSearchStyleHelper_1 = require("../../Utilities/Helpers/QuickSearchStyleHelper");
+const QuickSearchHelper_1 = require("../../Utilities/Helpers/QuickSearchHelper");
 const QuickSearchStyleEditor = ({ api, helpText, headerText, style, updateStyle }) => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: headerText }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: helpText })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(StyleComponent_1.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] = (0, useQuickSearchDebounced_1.useQuickSearchDebounced)(props);
@@ -34,10 +34,10 @@ function mapStateToProps(state, ownProps) {
     const quickSearch = state.QuickSearch;
     return {
         QuickSearchText: quickSearch.QuickSearchText,
-        QuickSearchTextMatchStyle: (0, QuickSearchStyleHelper_1.resolveQuickSearchTextMatchStyle)(quickSearch),
-        QuickSearchCurrentTextMatchStyle: (0, QuickSearchStyleHelper_1.resolveQuickSearchCurrentTextMatchStyle)(quickSearch),
+        QuickSearchTextMatchStyle: (0, QuickSearchHelper_1.resolveQuickSearchTextMatchStyle)(quickSearch),
+        QuickSearchCurrentTextMatchStyle: (0, QuickSearchHelper_1.resolveQuickSearchCurrentTextMatchStyle)(quickSearch),
         // Cell match: show only what is in state — defaults are not applied until explicitly set
-        QuickSearchCellMatchStyle: (0, QuickSearchStyleHelper_1.isQuickSearchStyleUnset)(quickSearch.CellMatchStyle)
+        QuickSearchCellMatchStyle: (0, QuickSearchHelper_1.isQuickSearchStyleUnset)(quickSearch.CellMatchStyle)
             ? {}
             : quickSearch.CellMatchStyle,
     };

package/src/View/QuickSearch/useQuickSearchDebounced.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useQuickSearchDebounced = void 0;
-const tslib_1 = require("tslib");
 const react_1 = require("react");
-const debounce_1 = tslib_1.__importDefault(require("../../Utilities/utils/debounce"));
+const TimingHelper_1 = require("../../Utilities/Helpers/TimingHelper");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const useQuickSearchDebounced = (props) => {
     const [searchText, setSearchText] = (0, react_1.useState)(props.QuickSearchText ?? '');
-    const debouncedRunQuickSearch = (0, react_1.useMemo)(() => (0, debounce_1.default)(props.onRunQuickSearch, GeneralConstants_1.QUICK_SEARCH_DEBOUNCE_TIME), [props.onRunQuickSearch]);
+    const debouncedRunQuickSearch = (0, react_1.useMemo)(() => (0, TimingHelper_1.debounce)(props.onRunQuickSearch, GeneralConstants_1.QUICK_SEARCH_DEBOUNCE_TIME), [props.onRunQuickSearch]);
     (0, react_1.useEffect)(() => {
         setSearchText(props.QuickSearchText);
     }, [props.QuickSearchText]);

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

@@ -13,7 +13,7 @@ const Flex_1 = require("../../../components/Flex");
 const Card_1 = require("../../../components/Card");
 const NewSelect_1 = require("../../../components/NewSelect");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
-const ScheduleHelper_1 = require("../../../Utilities/Helpers/ScheduleHelper");
+const ScheduleHelper_1 = require("../../../Utilities/Helpers/Scheduling/ScheduleHelper");
 const isScheduleValid = (holder) => {
     if (!holder?.Schedule) {
         return 'Schedule is not specified';

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SpecialColumnSettingsWizardStep = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const chunk_1 = tslib_1.__importDefault(require("../Utilities/utils/chunk"));
+const ArrayExtensions_1 = require("../Utilities/Extensions/ArrayExtensions");
 const CheckBox_1 = require("../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../components/FormLayout"));
 const AdaptableContext_1 = require("./AdaptableContext");
@@ -39,6 +39,6 @@ const SpecialColumnSettingsWizardStep = (props) => {
                                 { name: 'first', size: '30%' },
                                 { size: '30%', name: 'second' },
                                 { size: '30%', name: 'third' },
-                            ], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns, children: "Filterable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }), children: "Resizable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }), children: "Groupable" })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }), children: "Sortable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }), children: "Pivotable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }), children: "Aggregatable" })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }), children: "Suppress Menu" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }), children: "Suppress Movable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: true, checked: props.isEditable, children: "Editable" })] })] }) })] }), Boolean(possibleColumnTypes?.length) && ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Types" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Assign custom column types to this column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }], children: (0, chunk_1.default)(possibleColumnTypes ?? [], 2)?.map(([first, second]) => ((0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [first && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: props.settings?.ColumnTypes?.includes?.(first), children: first })), second && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: props.settings?.ColumnTypes?.includes?.(second), children: second }))] }, first))) }) })] }))] }));
+                            ], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns, children: "Filterable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }), children: "Resizable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }), children: "Groupable" })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }), children: "Sortable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }), children: "Pivotable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }), children: "Aggregatable" })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }), children: "Suppress Menu" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }), children: "Suppress Movable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: true, checked: props.isEditable, children: "Editable" })] })] }) })] }), Boolean(possibleColumnTypes?.length) && ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Types" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Assign custom column types to this column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }], children: (0, ArrayExtensions_1.chunk)(possibleColumnTypes ?? [], 2)?.map(([first, second]) => ((0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [first && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: props.settings?.ColumnTypes?.includes?.(first), children: first })), second && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: props.settings?.ColumnTypes?.includes?.(second), children: second }))] }, first))) }) })] }))] }));
 };
 exports.SpecialColumnSettingsWizardStep = SpecialColumnSettingsWizardStep;

package/src/View/StatusBar/StatusBarPopup.js

@@ -51,18 +51,22 @@ 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

@@ -25,7 +25,6 @@ const BadgePillStyleEditor_1 = require("./BadgePillStyleEditor");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
 const AdaptableContext_1 = require("../../AdaptableContext");
-const StyledColumnBadgePreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview");
 const CollapsibleWizardCard_1 = require("../../Wizard/CollapsibleWizardCard");
 const NewSelect_1 = require("../../../components/NewSelect");
 const utils_1 = require("../../../lib/utils");
@@ -239,7 +238,7 @@ const StyledColumnBadgeSection = (props) => {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)((0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: handleAddBadge, children: "Add Badge" }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:min-h-0", children: badges.map((badge, index) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)((0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:justify-end twa:mb-2 twa:shrink-0", children: (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { onClick: handleAddBadge, children: "Add Badge" }) }), (0, jsx_runtime_1.jsx)(Flex_1.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;
@@ -296,7 +295,7 @@ const StyledColumnBadgeStyleSection = (props) => {
                                             delete cleaned.Cell;
                                             props.onChange({ ...data, BadgeStyle: cleaned });
                                         }
-                                    } }) })] })] }), (0, jsx_runtime_1.jsx)(StyledColumnBadgePreview_1.StyledColumnBadgePreviewCard, { data: data })] }));
+                                    } }) })] })] })] }));
 };
 exports.StyledColumnBadgeStyleSection = StyledColumnBadgeStyleSection;
 const renderBadgeStyleSummary = (styledColumn, api) => {

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

@@ -16,7 +16,6 @@ const Flex_1 = require("../../../components/Flex");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
-const StyledColumnSparklinePreview_1 = require("./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__';
@@ -174,7 +173,7 @@ const StyledColumnSparklineSettingsSection = ({ onChange }) => {
                                     delete sparkStyle.Cell;
                                 }
                                 onChange({ ...data, SparklineStyle: sparkStyle });
-                            } }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnSparklinePreview_1.StyledColumnSparklinePreviewCard, { data: data })] }));
+                            } }) })] })] }));
 };
 exports.StyledColumnSparklineSettingsSection = StyledColumnSparklineSettingsSection;
 const SparklineObjectArrayProperties = ({ options, onChange, }) => {

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

@@ -270,12 +270,41 @@ const StyledColumnWizard = (props) => {
             render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(StyledColumnBadgeSection_1.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 = (0, jsx_runtime_1.jsx)(StyledColumnGradientPreview_1.StyledColumnGradientPreview, { data: styledColumn });
+    }
+    else if (styledColumn.PercentBarStyle) {
+        headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnPercentBarPreview_1.StyledColumnPercentBarPreview, { data: styledColumn });
+    }
+    else if (styledColumn.BadgeStyle) {
+        headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnBadgePreview_1.StyledColumnBadgePreview, { data: styledColumn });
+    }
+    else if (styledColumn.RatingStyle) {
+        headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnRatingPreview_1.StyledColumnRatingPreview, { data: styledColumn });
+    }
+    else if (styledColumn.IconStyle) {
+        headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnIconPreview_1.StyledColumnIconPreview, { data: styledColumn });
+    }
+    else if (styledColumn.BulletChartStyle) {
+        headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnBulletPreview_1.StyledColumnBulletPreview, { data: styledColumn });
+    }
+    else if (styledColumn.RangeBarStyle) {
+        headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnRangeBarPreview_1.StyledColumnRangeBarPreview, { data: styledColumn });
+    }
+    else if (styledColumn.SparklineStyle) {
+        headerPreview = (0, jsx_runtime_1.jsx)(StyledColumnSparklinePreview_1.StyledColumnSparklinePreview, { data: styledColumn });
+    }
     return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.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: (0, StyledColumnWizardTypeSection_1.getStyledColumnWizardTitle)(styledColumn), data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+        moduleName: (0, StyledColumnWizardTypeSection_1.getStyledColumnWizardTitle)(styledColumn), data: styledColumn, headerPreview: headerPreview, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
                 details: 'Enter a Name and select a Styled Column Type',
                 isValid: (data) => {
@@ -313,7 +342,7 @@ const StyledColumnWizard = (props) => {
                 title: 'Summary',
                 details: 'Review your Styled Column',
                 render: () => {
-                    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: [(0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}), styledColumn.GradientStyle && ((0, jsx_runtime_1.jsx)(StyledColumnGradientPreview_1.StyledColumnGradientPreviewCard, { data: styledColumn })), styledColumn.PercentBarStyle && ((0, jsx_runtime_1.jsx)(StyledColumnPercentBarPreview_1.StyledColumnPercentBarPreviewCard, { data: styledColumn })), styledColumn.BadgeStyle && ((0, jsx_runtime_1.jsx)(StyledColumnBadgePreview_1.StyledColumnBadgePreviewCard, { data: styledColumn })), styledColumn.RatingStyle && ((0, jsx_runtime_1.jsx)(StyledColumnRatingPreview_1.StyledColumnRatingPreviewCard, { data: styledColumn })), styledColumn.IconStyle && ((0, jsx_runtime_1.jsx)(StyledColumnIconPreview_1.StyledColumnIconPreviewCard, { data: styledColumn })), styledColumn.BulletChartStyle && ((0, jsx_runtime_1.jsx)(StyledColumnBulletPreview_1.StyledColumnBulletPreviewCard, { data: styledColumn })), styledColumn.RangeBarStyle && ((0, jsx_runtime_1.jsx)(StyledColumnRangeBarPreview_1.StyledColumnRangeBarPreviewCard, { data: styledColumn })), styledColumn.SparklineStyle && ((0, jsx_runtime_1.jsx)(StyledColumnSparklinePreview_1.StyledColumnSparklinePreviewCard, { data: styledColumn }))] }));
+                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) }));
                 },
             },
         ] }));