@adaptabletools/adaptable 22.1.1-canary.1 → 23.0.0-canary.0

package/src/View/FlashingCell/Wizard/FlashingCellSettingsWizardSection.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { useRef } from 'react';
 import Input from '../../../components/Input';
@@ -22,15 +23,7 @@ export const isSettingsValid = (data, api) => {
     return true;
 };
 export const renderFlashingAlertSettingsSummary = (flashingAlert) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SummaryText, null,
-            "Name ",
-            React.createElement(Tag, null, flashingAlert.Name || 'Not specified')),
-        React.createElement(Box, { className: "twa:text-2" }, flashingAlert.FlashDuration === 'always' ? (React.createElement(React.Fragment, null, "Flashing is never removed")) : (React.createElement(React.Fragment, null,
-            "Flashing is removed after ",
-            React.createElement(CodeBlock, null, flashingAlert.FlashDuration),
-            ' ',
-            "milliseconds")))));
+    return (_jsxs(_Fragment, { children: [_jsxs(SummaryText, { children: ["Name ", _jsx(Tag, { children: flashingAlert.Name || 'Not specified' })] }), _jsx(Box, { className: "twa:text-2", children: flashingAlert.FlashDuration === 'always' ? (_jsx(_Fragment, { children: "Flashing is never removed" })) : (_jsxs(_Fragment, { children: ["Flashing is removed after ", _jsx(CodeBlock, { children: flashingAlert.FlashDuration }), ' ', "milliseconds"] })) })] }));
 };
 export const FlashingAlertSettingsWizardSection = (props) => {
     let { data: flashingCell } = useOnePageAdaptableWizardContext();
@@ -74,36 +67,11 @@ export const FlashingAlertSettingsWizardSection = (props) => {
             FlashTarget,
         });
     };
-    return (React.createElement(Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full" },
-        React.createElement(Tabs, { autoFocus: false, className: "twa:p-2" },
-            React.createElement(Tabs.Tab, null, "Flashing Cell Settings"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(FormLayout, null,
-                    React.createElement(FormRow, { label: "Name" },
-                        React.createElement(Input, { "data-name": "flashing-cell-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' }))))),
-        React.createElement(Tabs, { autoFocus: false, className: "twa:p-2" },
-            React.createElement(Tabs.Tab, null, "Flash Duration"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(FormLayout, null,
-                    React.createElement(FormRow, { label: "" },
-                        React.createElement(Flex, { alignItems: "center" },
-                            React.createElement(CheckBox, { "data-name": "duration-always", checked: duration === 'always', onChange: (checked) => handleTypeChange(checked ? 'always' : 'number'), className: "twa:mr-4", tabIndex: -1 }, "Always"),
-                            duration !== 'always' && (React.createElement(React.Fragment, null,
-                                React.createElement(Input, { "data-name": "duration-input", readOnly: props.readOnly, type: "number", name: "value", ref: inputRef, className: "twa:w-20 twa:mr-2", value: duration, onChange: (event) => {
-                                        const value = event.target.value;
-                                        setDuration(isNaN(Number(value)) ? 500 : Number(value));
-                                    } }),
-                                React.createElement(Box, { className: "twa:text-2" }, "ms")))))))),
-        ' ',
-        React.createElement(Tabs, { autoFocus: false, className: "twa:p-2" },
-            React.createElement(Tabs.Tab, null, "Flash Target"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(FormLayout, null,
-                    React.createElement(FormRow, { label: "" },
-                        React.createElement(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
-                                flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1 }, "Cell"),
-                        React.createElement(CheckBox, { "data-name": "flashing-target-row", className: "twa:mr-3", onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
-                                flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1 }, "Row"),
-                        React.createElement(CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
-                                flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")))))));
+    return (_jsxs(Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full", children: [_jsxs(Tabs, { autoFocus: false, className: "twa:p-2", children: [_jsx(Tabs.Tab, { children: "Flashing Cell Settings" }), _jsx(Tabs.Content, { children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { "data-name": "flashing-cell-name", className: "twa:flex-1 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: flashingCell.Name ?? '' }) }) }) })] }), _jsxs(Tabs, { autoFocus: false, className: "twa:p-2", children: [_jsx(Tabs.Tab, { children: "Flash Duration" }), _jsx(Tabs.Content, { children: _jsx(FormLayout, { children: _jsx(FormRow, { label: "", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { "data-name": "duration-always", checked: duration === 'always', onChange: (checked) => handleTypeChange(checked ? 'always' : 'number'), className: "twa:mr-4", tabIndex: -1, children: "Always" }), duration !== 'always' && (_jsxs(_Fragment, { children: [_jsx(Input, { "data-name": "duration-input", readOnly: props.readOnly, type: "number", name: "value", ref: inputRef, className: "twa:w-20 twa:mr-2", value: duration, onChange: (event) => {
+                                                        const value = event.target.value;
+                                                        setDuration(isNaN(Number(value)) ? 500 : Number(value));
+                                                    } }), _jsx(Box, { className: "twa:text-2", children: "ms" })] }))] }) }) }) })] }), ' ', _jsxs(Tabs, { autoFocus: false, className: "twa:p-2", children: [_jsx(Tabs.Tab, { children: "Flash Target" }), _jsx(Tabs.Content, { children: _jsx(FormLayout, { children: _jsxs(FormRow, { label: "", children: [_jsx(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
+                                            flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1, children: "Cell" }), _jsx(CheckBox, { "data-name": "flashing-target-row", className: "twa:mr-3", onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
+                                            flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1, children: "Row" }), _jsx(CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
+                                            flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1, children: "Aggregated Function Cell" })] }) }) })] })] }));
 };

package/src/View/FlashingCell/Wizard/FlashingCellStyleWizardSection.js

@@ -1,44 +1,19 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Tabs } from '../../../components/Tabs';
 import { StyleComponent } from '../../Components/StyleComponent';
 import { StylePreview } from '../../../components/StylePreview';
 import { Box } from '../../../components/Flex';
-const changeStyle = React.createElement(Box, { className: "twa:text-2 twa:inline-block" }, "Change style");
+const changeStyle = _jsx(Box, { className: "twa:text-2 twa:inline-block", children: "Change style" });
 export const FlashingAlertStyleWizardSection = (props) => {
     let { data: flashingAlert, api } = useOnePageAdaptableWizardContext();
     flashingAlert = flashingAlert ?? props.flashingAlert;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { defaultValue: "up" },
-            React.createElement(Tabs.Tab, { value: "up" },
-                "Up ",
-                changeStyle),
-            React.createElement(Tabs.Content, { value: "up" },
-                React.createElement(StyleComponent, { headless: true, api: api, Style: flashingAlert.UpChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('UpChangeStyle', style) })),
-            React.createElement(Tabs.Tab, { value: "down" },
-                "Down ",
-                changeStyle),
-            React.createElement(Tabs.Content, { value: "down" },
-                React.createElement(StyleComponent, { headless: true, api: api, Style: flashingAlert.DownChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('DownChangeStyle', style) })),
-            React.createElement(Tabs.Tab, { value: "neutral" },
-                "Neutral ",
-                changeStyle),
-            React.createElement(Tabs.Content, { value: "neutral" },
-                React.createElement(StyleComponent, { headless: true, api: api, Style: flashingAlert.NeutralChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('NeutralChangeStyle', style) })))));
+    return (_jsx(_Fragment, { children: _jsxs(Tabs, { defaultValue: "up", children: [_jsxs(Tabs.Tab, { value: "up", children: ["Up ", changeStyle] }), _jsx(Tabs.Content, { value: "up", children: _jsx(StyleComponent, { headless: true, api: api, Style: flashingAlert.UpChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('UpChangeStyle', style) }) }), _jsxs(Tabs.Tab, { value: "down", children: ["Down ", changeStyle] }), _jsx(Tabs.Content, { value: "down", children: _jsx(StyleComponent, { headless: true, api: api, Style: flashingAlert.DownChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('DownChangeStyle', style) }) }), _jsxs(Tabs.Tab, { value: "neutral", children: ["Neutral ", changeStyle] }), _jsx(Tabs.Content, { value: "neutral", children: _jsx(StyleComponent, { headless: true, api: api, Style: flashingAlert.NeutralChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('NeutralChangeStyle', style) }) })] }) }));
 };
 export const FlashingCellStyle = (props) => {
     const { data, ...boxProps } = props;
-    return (React.createElement(Box, { ...boxProps },
-        React.createElement(StylePreview, { styleObject: props.data.UpChangeStyle },
-            "Up change style ",
-            !props.data.UpChangeStyle ? ' - no style' : ''),
-        React.createElement(StylePreview, { styleObject: props.data.DownChangeStyle, className: "twa:mt-2" },
-            "Down change style ",
-            !props.data.DownChangeStyle ? ' - no style' : ''),
-        React.createElement(StylePreview, { styleObject: props.data.NeutralChangeStyle, className: "twa:mt-2" },
-            "Neutral change style ",
-            !props.data.NeutralChangeStyle ? ' - no style' : '')));
+    return (_jsxs(Box, { ...boxProps, children: [_jsxs(StylePreview, { styleObject: props.data.UpChangeStyle, children: ["Up change style ", !props.data.UpChangeStyle ? ' - no style' : ''] }), _jsxs(StylePreview, { styleObject: props.data.DownChangeStyle, className: "twa:mt-2", children: ["Down change style ", !props.data.DownChangeStyle ? ' - no style' : ''] }), _jsxs(StylePreview, { styleObject: props.data.NeutralChangeStyle, className: "twa:mt-2", children: ["Neutral change style ", !props.data.NeutralChangeStyle ? ' - no style' : ''] })] }));
 };
 export const renderFlashingAlertStyleSummary = (flashingAlert) => {
-    return React.createElement(FlashingCellStyle, { data: flashingAlert });
+    return _jsx(FlashingCellStyle, { data: flashingAlert });
 };

package/src/View/FlashingCell/Wizard/FlashingCellWizard.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { FlashingAlertSettingsWizardSection, renderFlashingAlertSettingsSummary, isSettingsValid, } from './FlashingCellSettingsWizardSection';
@@ -59,35 +59,33 @@ export const FlashingCellWizard = (props) => {
         }
         props.onFinishWizard(flashingCell);
     };
-    return (React.createElement(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: flashingCell, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: flashingCell, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 details: 'Set Name, Duration and Target Properties',
                 isValid: isSettingsValid,
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }) })),
                 renderSummary: renderFlashingAlertSettingsSummary,
                 title: 'Settings',
             },
             {
                 details: 'Specify which data changes should trigger Cell Flashing',
                 isValid: isScopeValid,
-                render: () => React.createElement(FlashingAlertScopeWizardSection, { onChange: setFlashingCell }),
+                render: () => _jsx(FlashingAlertScopeWizardSection, { onChange: setFlashingCell }),
                 renderSummary: renderScopeSummary,
                 title: 'Columns',
             },
             {
                 details: 'Build the Rules for when Cells should Flash',
                 isValid: isValidFlashingCellRules,
-                render: () => React.createElement(FlashingAlertRulesWizardSection, { onChange: setFlashingCell }),
+                render: () => _jsx(FlashingAlertRulesWizardSection, { onChange: setFlashingCell }),
                 renderSummary: renderFlashingAlertRulesSummary,
                 title: 'Rule',
             },
             {
                 details: 'Choose Flash Styles for Up, Down and Neutral Changes',
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
                             updateStyles[styleName](style);
-                        } }))),
+                        } }) })),
                 renderSummary: renderFlashingAlertStyleSummary,
                 title: 'Flash Styles',
             },
@@ -95,16 +93,14 @@ export const FlashingCellWizard = (props) => {
                 details: 'Select Flashing Cell Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { className: "twa:p-2" },
-                    React.createElement(ObjectTagsWizardSection, { onChange: setFlashingCell }))),
+                render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setFlashingCell }) })),
                 renderSummary: renderObjectTagsSummary,
             },
             '-',
             {
                 details: 'Review the Flashing Cell Rule',
                 render: () => {
-                    return (React.createElement(Box, { className: "twa:p-2" },
-                        React.createElement(OnePageWizardSummary, null)));
+                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) }));
                 },
                 title: 'Summary',
             },

package/src/View/FormatColumn/MoveFormatColumn.js

@@ -1,3 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import SimpleButton from '../../components/SimpleButton';
 import * as FormatColumnRedux from '../../Redux/ActionsReducers/FormatColumnRedux';
@@ -14,9 +15,7 @@ export const MoveFormatColumn = (props) => {
         dispatch(FormatColumnRedux.FormatColumnMoveDown(props.data));
     }, []);
     if (formatColumn?.length <= 1) {
-        return React.createElement(React.Fragment, null);
+        return _jsx(_Fragment, {});
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(SimpleButton, { "data-id": "move-up", title: "move up", onClick: handleMoveUp, variant: "text", icon: "arrow-up" }),
-        React.createElement(SimpleButton, { "data-name": "move-down", title: "move down", onClick: handleMoveDown, variant: "text", icon: "arrow-down" })));
+    return (_jsxs(_Fragment, { children: [_jsx(SimpleButton, { "data-id": "move-up", title: "move up", onClick: handleMoveUp, variant: "text", icon: "arrow-up" }), _jsx(SimpleButton, { "data-name": "move-down", title: "move down", onClick: handleMoveDown, variant: "text", icon: "arrow-down" })] }));
 };

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import uniq from '../../../Utilities/utils/uniq';
 import clamp from '../../../Utilities/utils/clamp';
 import HelpBlock from '../../../components/HelpBlock';
@@ -10,7 +10,6 @@ import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
 import Radio from '../../../components/Radio';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import { Tabs } from '../../../components/Tabs';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { Tag } from '../../../components/Tag';
 import { useAdaptable } from '../../AdaptableContext';
@@ -53,8 +52,7 @@ export const getFormatColumnFormatSummaryValue = (data) => {
 };
 const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
     const resolved = resolveDisplayFormat(data.DisplayFormat);
-    return (React.createElement(FormRow, { key: customFormatter.id, label: customFormatter.label ?? customFormatter.id },
-        React.createElement(CheckBox, { "data-name": customFormatter.id, checked: resolved?.Options.CustomDisplayFormats?.some?.((item) => item === customFormatter.id), onChange: (checked) => {
+    return (_jsx(FormRow, { label: customFormatter.label ?? customFormatter.id, children: _jsx(CheckBox, { "data-name": customFormatter.id, checked: resolved?.Options.CustomDisplayFormats?.some?.((item) => item === customFormatter.id), onChange: (checked) => {
                 let newCustomFormats = resolved?.Options?.CustomDisplayFormats ?? [];
                 if (checked) {
                     newCustomFormats = [...newCustomFormats, customFormatter.id];
@@ -63,10 +61,10 @@ const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
                     newCustomFormats = newCustomFormats.filter((item) => item !== customFormatter.id);
                 }
                 setFormatOption('CustomDisplayFormats', newCustomFormats);
-            } })));
+            } }) }, customFormatter.id));
 };
 export const renderFormatColumnFormatSummary = (data) => {
-    return React.createElement(Tag, null, getFormatColumnFormatSummaryValue(data));
+    return _jsx(Tag, { children: getFormatColumnFormatSummaryValue(data) });
 };
 export const getFormatDisplayTypeForScope = (scope, api) => {
     if (scope == undefined) {
@@ -168,43 +166,22 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
     if (resolved?.Formatter !== 'DateFormatter') {
         return null;
     }
-    return (React.createElement(Box, { className: "twa:p-2" },
-        React.createElement(Tabs, null,
-            React.createElement(Tabs.Tab, null, "Format"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Box, { className: "twa:p-2 twa:text-2" },
-                    "Either create your own date pattern, or select one of the preset date formats (check out",
-                    ' ',
-                    React.createElement("a", { href: "https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table", target: "_blank" }, "available symbols"),
-                    ")."),
-                React.createElement(FormLayout, null,
-                    React.createElement(FormRow, { label: "Pattern" },
-                        React.createElement(Input, { "data-name": "pattern", value: resolved.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), className: "twa:mr-2" }),
-                        React.createElement("span", null, resolved.Options.Pattern &&
-                            FormatHelper.DateFormatter(new Date(), resolved.Options, true)))))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Tabs, { className: "twa:mt-2", keyboardNavigation: false },
-            React.createElement(Tabs.Tab, null, "Custom Formats"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(FormLayout, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
-        React.createElement(Tabs, { className: "twa:mt-2", keyboardNavigation: false },
-            React.createElement(Tabs.Tab, null, "Presets"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
-                        { Content: 'Pattern', Size: 1 },
-                        { Content: 'Formatted Date', Size: 1 },
-                        { Content: '', Size: 1 },
-                    ] }),
-                DateFormatPresets.map((Pattern, index) => (React.createElement(AdaptableObjectRow, { key: index, colItems: [
-                        { Content: Pattern, Size: 1 },
-                        {
-                            Content: FormatHelper.DateFormatter(new Date(), { Pattern }),
-                            Size: 1,
-                        },
-                        {
-                            Content: (React.createElement(SimpleButton, { "data-name": "apply-format-pattern", "data-value": Pattern, onClick: () => setFormatOption('Pattern', Pattern) }, "Apply")),
-                            Size: 1,
-                        },
-                    ] })))))));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Format" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Either create your own date pattern, or pick one of the presets below \u2014 see the", ' ', _jsx("a", { href: "https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table", target: "_blank", children: "available symbols" }), "."] })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { children: _jsxs(FormRow, { label: "Pattern", children: [_jsx(Input, { "data-name": "pattern", value: resolved.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), className: "twa:mr-2" }), _jsx("span", { children: resolved.Options.Pattern &&
+                                            FormatHelper.DateFormatter(new Date(), resolved.Options, true) })] }) }) })] }), scopedCustomFormatters.length > 0 && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Formats" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Presets" }), _jsx(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" })] }), _jsxs(Card.Body, { children: [_jsx(AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
+                                    { Content: 'Pattern', Size: 1 },
+                                    { Content: 'Formatted Date', Size: 1 },
+                                    { Content: '', Size: 1 },
+                                ] }), DateFormatPresets.map((Pattern, index) => (_jsx(AdaptableObjectRow, { colItems: [
+                                    { Content: Pattern, Size: 1 },
+                                    {
+                                        Content: FormatHelper.DateFormatter(new Date(), { Pattern }),
+                                        Size: 1,
+                                    },
+                                    {
+                                        Content: (_jsx(SimpleButton, { "data-name": "apply-format-pattern", "data-value": Pattern, onClick: () => setFormatOption('Pattern', Pattern), children: "Apply" })),
+                                        Size: 1,
+                                    },
+                                ] }, index)))] })] })] }));
 };
 const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, api) => {
     const resolved = resolveDisplayFormat(data.DisplayFormat);
@@ -235,117 +212,34 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
     const IS_FX_RATE = activePreset === 'FXRate';
     const IS_SCIENTIFIC = activePreset === 'Scientific';
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
-    return (React.createElement(Box, { "data-name": 'format-column-display-format', className: "twa:p-2" },
-        React.createElement(Tabs, { autoFocus: false, keyboardNavigation: false },
-            React.createElement(Tabs.Tab, null, "Presets"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "row", className: "twa:m-2" },
-                    React.createElement(Flex, { flexDirection: "column", className: "twa:mr-6" },
-                        React.createElement(Radio, { "data-name": "preset-dollar", className: "twa:my-1", checked: IS_DOLLAR, onChange: () => setPreset('Dollar') }, "Dollar"),
-                        React.createElement(Radio, { "data-name": "preset-sterling", className: "twa:my-1", checked: IS_STERLING, onChange: () => setPreset('Sterling') }, "Sterling"),
-                        React.createElement(Radio, { "data-name": "preset-euro", className: "twa:my-1", checked: IS_EURO, onChange: () => setPreset('Euro') }, "Euro"),
-                        React.createElement(Radio, { "data-name": "preset-yen", className: "twa:my-1", checked: IS_YEN, onChange: () => setPreset('Yen') }, "Yen")),
-                    React.createElement(Flex, { flexDirection: "column", className: "twa:mr-6" },
-                        React.createElement(Radio, { "data-name": "preset-thousand", className: "twa:my-1", checked: IS_THOUSAND, onChange: () => setPreset('Thousand') }, "K (Thousand)"),
-                        React.createElement(Radio, { "data-name": "preset-million", className: "twa:my-1", checked: IS_MILLION, onChange: () => setPreset('Million') }, "M (Million)"),
-                        React.createElement(Radio, { "data-name": "preset-billion", className: "twa:my-1", checked: IS_BILLION, onChange: () => setPreset('Billion') }, "B (Billion)"),
-                        React.createElement(Radio, { "data-name": "preset-basis-points", className: "twa:my-1", checked: IS_BASIS_POINTS, onChange: () => setPreset('BasisPoints') }, "bps (Basis Pts)")),
-                    React.createElement(Flex, { flexDirection: "column", className: "twa:mr-6" },
-                        React.createElement(Radio, { "data-name": "preset-integer", className: "twa:my-1", checked: IS_INTEGER, onChange: () => setPreset('Integer') }, "Integer"),
-                        React.createElement(Radio, { "data-name": "preset-decimal", className: "twa:my-1", checked: IS_DECIMAL, onChange: () => setPreset('Decimal') }, "Decimal"),
-                        React.createElement(Radio, { "data-name": "preset-percentage", className: "twa:my-1", checked: IS_PERCENT, onChange: () => setPreset('Percentage') }, "Percentage"),
-                        React.createElement(Radio, { "data-name": "preset-scientific", className: "twa:my-1", checked: IS_SCIENTIFIC, onChange: () => setPreset('Scientific') }, "Scientific")),
-                    React.createElement(Flex, { flexDirection: "column" },
-                        React.createElement(Radio, { "data-name": "preset-accounting", className: "twa:my-1", checked: IS_ACCOUNTING, onChange: () => setPreset('Accounting') }, "Accounting"),
-                        React.createElement(Radio, { "data-name": "preset-fx-rate", className: "twa:my-1", checked: IS_FX_RATE, onChange: () => setPreset('FXRate') }, "FX Rate"),
-                        React.createElement(Radio, { "data-name": "preset-bitcoin", className: "twa:my-1", checked: IS_BITCOIN, onChange: () => setPreset('Bitcoin') }, "Bitcoin"))))),
-        React.createElement(Tabs, { className: "twa:mt-2" },
-            React.createElement(Tabs.Tab, null, "Format"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout, { className: "twa:mr-3" },
-                        React.createElement(FormRow, { label: "Fraction Digits" },
-                            React.createElement(Input, { "data-name": "fraction-digits", type: "number", min: "0", value: typeof resolved.Options.FractionDigits === 'number'
-                                    ? resolved.Options.FractionDigits
-                                    : '', onChange: (e) => setFormatOption('FractionDigits', StringExtensions.IsNumeric(e.currentTarget.value)
-                                    ? clamp(Number(e.currentTarget.value), 0, 20)
-                                    : undefined) })),
-                        React.createElement(FormRow, { label: "Integer Digits" },
-                            React.createElement(Input, { "data-name": "integer-digits", type: "number", min: "0", value: resolved.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions.IsNumeric(e.currentTarget.value)
-                                    ? clamp(Number(e.currentTarget.value), 0, 20)
-                                    : undefined) })),
-                        React.createElement(FormRow, { label: "Fraction Separator" },
-                            React.createElement(Input, { "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
-                        React.createElement(FormRow, { label: "Integer Separator" },
-                            React.createElement(Input, { "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
-                        React.createElement(FormRow, { label: "Multiplier" },
-                            React.createElement(Input, { "data-name": "multiplier", type: "number", value: resolved.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) }))),
-                    React.createElement(FormLayout, { className: "twa:mr-3" },
-                        React.createElement(FormRow, { label: "Prefix" },
-                            React.createElement(Input, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
-                        React.createElement(FormRow, { label: "Suffix" },
-                            React.createElement(Input, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                        React.createElement(FormRow, { label: "Parentheses" },
-                            React.createElement(CheckBox, { "data-name": "parentheses-checkbox", checked: resolved.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
-                        React.createElement(FormRow, { label: "Empty" },
-                            React.createElement(CheckBox, { "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }))),
-                    React.createElement(FormLayout, null,
-                        React.createElement(FormRow, { label: "Truncate" },
-                            React.createElement(CheckBox, { "data-name": "truncate-checkbox", checked: resolved.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
-                        React.createElement(FormRow, { label: "Round" },
-                            React.createElement(CheckBox, { "data-name": "round-checkbox", checked: resolved.Options.Round, onChange: (checked) => setFormatOption('Round', checked) })),
-                        React.createElement(FormRow, { label: "Ceiling" },
-                            React.createElement(CheckBox, { "data-name": "ceiling-checkbox", checked: resolved.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) })),
-                        React.createElement(FormRow, { label: "Floor" },
-                            React.createElement(CheckBox, { "data-name": "floor-checkbox", checked: resolved.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) })),
-                        React.createElement(FormRow, { label: "Absolute" },
-                            React.createElement(CheckBox, { "data-name": "abs-checkbox", checked: resolved.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) })),
-                        React.createElement(FormRow, { label: "Scientific" },
-                            React.createElement(CheckBox, { "data-name": "scientific-checkbox", checked: resolved.Options.Notation === 'scientific', onChange: (checked) => setFormatOption('Notation', checked ? 'scientific' : undefined) })))))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Tabs, { className: "twa:mt-2", keyboardNavigation: false },
-            React.createElement(Tabs.Tab, null, "Custom Formats"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
-        React.createElement(Tabs, { className: "twa:mt-2", autoFocus: false, keyboardNavigation: false },
-            React.createElement(Tabs.Tab, null, "Dynamic Content"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Box, { className: "twa:p-2 twa:text-2" }, "Provide dynamic content through the use of Placeholders"),
-                React.createElement(FormLayout, { className: "twa:m-2" },
-                    React.createElement(FormRow, { label: "" },
-                        React.createElement(Textarea, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content?.toString() ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
-                        showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
-                            React.createElement(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }),
-                            "Learn more about using placeholders"))),
-                    ' '))),
-        React.createElement(Tabs, { className: "twa:mt-2", autoFocus: false, keyboardNavigation: false },
-            React.createElement(Tabs.Tab, null, "Examples"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(AdaptableObjectRow, { className: "twa:font-bold", colItems: [
-                        { Content: 'Raw Number', Size: 1 },
-                        { Content: 'Formatted Number', Size: 1 },
-                    ] }),
-                React.createElement(AdaptableObjectRow, { colItems: [
-                        { Content: DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
-                        {
-                            Content: FormatHelper.NumberFormatter(DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
-                            Size: 1,
-                        },
-                    ] }),
-                React.createElement(AdaptableObjectRow, { colItems: [
-                        { Content: '-' + DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
-                        {
-                            Content: FormatHelper.NumberFormatter(-DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
-                            Size: 1,
-                        },
-                    ] }),
-                React.createElement(AdaptableObjectRow, { colItems: [
-                        { Content: '0.123', Size: 1 },
-                        {
-                            Content: FormatHelper.NumberFormatter(0.123, resolved.Options),
-                            Size: 1,
-                        },
-                    ] })))));
+    return (_jsxs(Flex, { flexDirection: "column", "data-name": 'format-column-display-format', className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Presets" }), _jsx(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" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "row", className: "twa:m-2", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-dollar", className: "twa:my-1", checked: IS_DOLLAR, onChange: () => setPreset('Dollar'), children: "Dollar" }), _jsx(Radio, { "data-name": "preset-sterling", className: "twa:my-1", checked: IS_STERLING, onChange: () => setPreset('Sterling'), children: "Sterling" }), _jsx(Radio, { "data-name": "preset-euro", className: "twa:my-1", checked: IS_EURO, onChange: () => setPreset('Euro'), children: "Euro" }), _jsx(Radio, { "data-name": "preset-yen", className: "twa:my-1", checked: IS_YEN, onChange: () => setPreset('Yen'), children: "Yen" })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-thousand", className: "twa:my-1", checked: IS_THOUSAND, onChange: () => setPreset('Thousand'), children: "K (Thousand)" }), _jsx(Radio, { "data-name": "preset-million", className: "twa:my-1", checked: IS_MILLION, onChange: () => setPreset('Million'), children: "M (Million)" }), _jsx(Radio, { "data-name": "preset-billion", className: "twa:my-1", checked: IS_BILLION, onChange: () => setPreset('Billion'), children: "B (Billion)" }), _jsx(Radio, { "data-name": "preset-basis-points", className: "twa:my-1", checked: IS_BASIS_POINTS, onChange: () => setPreset('BasisPoints'), children: "bps (Basis Pts)" })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:mr-6", children: [_jsx(Radio, { "data-name": "preset-integer", className: "twa:my-1", checked: IS_INTEGER, onChange: () => setPreset('Integer'), children: "Integer" }), _jsx(Radio, { "data-name": "preset-decimal", className: "twa:my-1", checked: IS_DECIMAL, onChange: () => setPreset('Decimal'), children: "Decimal" }), _jsx(Radio, { "data-name": "preset-percentage", className: "twa:my-1", checked: IS_PERCENT, onChange: () => setPreset('Percentage'), children: "Percentage" }), _jsx(Radio, { "data-name": "preset-scientific", className: "twa:my-1", checked: IS_SCIENTIFIC, onChange: () => setPreset('Scientific'), children: "Scientific" })] }), _jsxs(Flex, { flexDirection: "column", children: [_jsx(Radio, { "data-name": "preset-accounting", className: "twa:my-1", checked: IS_ACCOUNTING, onChange: () => setPreset('Accounting'), children: "Accounting" }), _jsx(Radio, { "data-name": "preset-fx-rate", className: "twa:my-1", checked: IS_FX_RATE, onChange: () => setPreset('FXRate'), children: "FX Rate" }), _jsx(Radio, { "data-name": "preset-bitcoin", className: "twa:my-1", checked: IS_BITCOIN, onChange: () => setPreset('Bitcoin'), children: "Bitcoin" })] })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Format" }), _jsx(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" })] }), _jsx(Card.Body, { children: _jsxs(Flex, { flexDirection: "row", children: [_jsxs(FormLayout, { className: "twa:mr-3", children: [_jsx(FormRow, { label: "Fraction Digits", children: _jsx(Input, { "data-name": "fraction-digits", type: "number", min: "0", value: typeof resolved.Options.FractionDigits === 'number'
+                                                    ? resolved.Options.FractionDigits
+                                                    : '', onChange: (e) => setFormatOption('FractionDigits', StringExtensions.IsNumeric(e.currentTarget.value)
+                                                    ? clamp(Number(e.currentTarget.value), 0, 20)
+                                                    : undefined) }) }), _jsx(FormRow, { label: "Integer Digits", children: _jsx(Input, { "data-name": "integer-digits", type: "number", min: "0", value: resolved.Options.IntegerDigits, onChange: (e) => setFormatOption('IntegerDigits', StringExtensions.IsNumeric(e.currentTarget.value)
+                                                    ? clamp(Number(e.currentTarget.value), 0, 20)
+                                                    : undefined) }) }), _jsx(FormRow, { label: "Fraction Separator", children: _jsx(Input, { "data-name": "fraction-separator", value: resolved.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Integer Separator", children: _jsx(Input, { "data-name": "integer-separator", value: resolved.Options.IntegerSeparator ?? '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Multiplier", children: _jsx(Input, { "data-name": "multiplier", type: "number", value: resolved.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) }) })] }), _jsxs(FormLayout, { className: "twa:mr-3", children: [_jsx(FormRow, { label: "Prefix", children: _jsx(Input, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Suffix", children: _jsx(Input, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }) }), _jsx(FormRow, { label: "Parentheses", children: _jsx(CheckBox, { "data-name": "parentheses-checkbox", checked: resolved.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) }) }), _jsx(FormRow, { label: "Empty", children: _jsx(CheckBox, { "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }) })] }), _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Truncate", children: _jsx(CheckBox, { "data-name": "truncate-checkbox", checked: resolved.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) }) }), _jsx(FormRow, { label: "Round", children: _jsx(CheckBox, { "data-name": "round-checkbox", checked: resolved.Options.Round, onChange: (checked) => setFormatOption('Round', checked) }) }), _jsx(FormRow, { label: "Ceiling", children: _jsx(CheckBox, { "data-name": "ceiling-checkbox", checked: resolved.Options.Ceiling, onChange: (checked) => setFormatOption('Ceiling', checked) }) }), _jsx(FormRow, { label: "Floor", children: _jsx(CheckBox, { "data-name": "floor-checkbox", checked: resolved.Options.Floor, onChange: (checked) => setFormatOption('Floor', checked) }) }), _jsx(FormRow, { label: "Absolute", children: _jsx(CheckBox, { "data-name": "abs-checkbox", checked: resolved.Options.Abs, onChange: (checked) => setFormatOption('Abs', checked) }) }), _jsx(FormRow, { label: "Scientific", children: _jsx(CheckBox, { "data-name": "scientific-checkbox", checked: resolved.Options.Notation === 'scientific', onChange: (checked) => setFormatOption('Notation', checked ? 'scientific' : undefined) }) })] })] }) })] }), scopedCustomFormatters.length > 0 && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Formats" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), _jsx(Card.Body, { children: _jsx(Flex, { flexDirection: "row", children: _jsx(FormLayout, { children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Dynamic Content" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide dynamic content through the use of Placeholders" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { className: "twa:m-2", children: [_jsxs(FormRow, { label: "", children: [_jsx(Textarea, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content?.toString() ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }), showDocumentationLinks && (_jsxs(HelpBlock, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3", children: [_jsx(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }), "Learn more about using placeholders"] }))] }), ' '] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Examples" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview the formatter against sample values" })] }), _jsxs(Card.Body, { children: [_jsx(AdaptableObjectRow, { className: "twa:font-bold", colItems: [
+                                    { Content: 'Raw Number', Size: 1 },
+                                    { Content: 'Formatted Number', Size: 1 },
+                                ] }), _jsx(AdaptableObjectRow, { colItems: [
+                                    { Content: DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
+                                    {
+                                        Content: FormatHelper.NumberFormatter(DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
+                                        Size: 1,
+                                    },
+                                ] }), _jsx(AdaptableObjectRow, { colItems: [
+                                    { Content: '-' + DEFAULT_DOUBLE_DISPLAY_VALUE, Size: 1 },
+                                    {
+                                        Content: FormatHelper.NumberFormatter(-DEFAULT_DOUBLE_DISPLAY_VALUE, resolved.Options),
+                                        Size: 1,
+                                    },
+                                ] }), _jsx(AdaptableObjectRow, { colItems: [
+                                    { Content: '0.123', Size: 1 },
+                                    {
+                                        Content: FormatHelper.NumberFormatter(0.123, resolved.Options),
+                                        Size: 1,
+                                    },
+                                ] })] })] })] }));
 };
 const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, api) => {
     const resolved = resolveDisplayFormat(data.DisplayFormat);
@@ -353,51 +247,18 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
         return null;
     }
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
-    return (React.createElement(Flex, { flexDirection: "column", "data-name": 'format-column-display-format', className: "twa:gap-3 twa:p-3" },
-        React.createElement(Card, null,
-            React.createElement(Card.Title, null, "Format"),
-            React.createElement(Card.Body, { className: "twa:grid twa:p-2 twa:grid-cols-[1fr_1fr] twa:gap-2" },
-                React.createElement(Flex, { flexDirection: "row", className: "twa:gap-2 twa:col-span-2 twa:items-center" },
-                    React.createElement("label", null, "Case:"),
-                    React.createElement(ToggleGroup, null,
-                        React.createElement(Toggle, { pressed: resolved.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }),
-                        React.createElement(Toggle, { pressed: resolved.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }),
-                        React.createElement(Toggle, { pressed: resolved.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })),
-                    React.createElement(CheckBox, { "data-name": "trim-checkbox", className: "twa:ml-5", checked: resolved.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim")),
-                React.createElement(Flex, { flexDirection: "column", className: "twa:gap-2" },
-                    React.createElement("label", null, "Prefix"),
-                    React.createElement(Input, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
-                React.createElement(Flex, { flexDirection: "column", className: "twa:gap-2" },
-                    React.createElement("label", null, "Suffix"),
-                    React.createElement(Input, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                React.createElement(Flex, { flexDirection: "column", className: "twa:col-span-2 twa:gap-2" },
-                    React.createElement("label", null, "Content"),
-                    React.createElement(Textarea, { className: "twa:min-w-[300px]", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
-                    showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
-                        React.createElement(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }),
-                        "See how to create dynamic Display Format using placeholders"))),
-                React.createElement(CheckBox, { className: "twa:col-span-2", "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }, "Empty"))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Card, { shadow: false },
-            React.createElement(Card.Title, null, "Custom Formats"),
-            React.createElement(Card.Body, null,
-                React.createElement(Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout, { className: "twa:mr-3" }, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
-        React.createElement(Card, null,
-            React.createElement(Card.Title, null, "Example"),
-            React.createElement(Card.Body, null,
-                React.createElement(AdaptableObjectRow, { className: "twa:font-bold", colItems: [
-                        { Content: 'Raw String', Size: 1 },
-                        { Content: 'Formatted String', Size: 1 },
-                    ] }),
-                React.createElement(AdaptableObjectRow, { colItems: [
-                        { Content: '"' + DEFAULT_STRING_DISPLAY_VALUE + '"', Size: 1 },
-                        {
-                            Content: '"' +
-                                FormatHelper.StringFormatter(DEFAULT_STRING_DISPLAY_VALUE, resolved.Options) +
-                                '"',
-                            Size: 1,
-                        },
-                    ] })))));
+    return (_jsxs(Flex, { flexDirection: "column", "data-name": 'format-column-display-format', className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Format" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Customise the string format with case, trim, prefix / suffix and dynamic content" })] }), _jsxs(Card.Body, { className: "twa:grid twa:p-2 twa:grid-cols-[1fr_1fr] twa:gap-2", children: [_jsxs(Flex, { flexDirection: "row", className: "twa:gap-2 twa:col-span-2 twa:items-center", children: [_jsx("label", { children: "Case:" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: resolved.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }), _jsx(Toggle, { pressed: resolved.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }), _jsx(Toggle, { pressed: resolved.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })] }), _jsx(CheckBox, { "data-name": "trim-checkbox", className: "twa:ml-5", checked: resolved.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked), children: "Trim" })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsx("label", { children: "Prefix" }), _jsx(Input, { "data-name": "prefix", value: resolved.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsx("label", { children: "Suffix" }), _jsx(Input, { "data-name": "suffix", value: resolved.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })] }), _jsxs(Flex, { flexDirection: "column", className: "twa:col-span-2 twa:gap-2", children: [_jsx("label", { children: "Content" }), _jsx(Textarea, { className: "twa:min-w-[300px]", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: resolved.Options.Content ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }), showDocumentationLinks && (_jsxs(HelpBlock, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3", children: [_jsx(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }), "See how to create dynamic Display Format using placeholders"] }))] }), _jsx(CheckBox, { className: "twa:col-span-2", "data-name": "empty-checkbox", checked: resolved.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked), children: "Empty" })] })] }), scopedCustomFormatters.length > 0 && (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Custom Formats" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Apply a developer-defined formatter to this Column" })] }), _jsx(Card.Body, { children: _jsx(Flex, { flexDirection: "column", children: _jsx(FormLayout, { className: "twa:mr-3", children: scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)) }) }) })] })), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Example" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview the formatter against a sample value" })] }), _jsxs(Card.Body, { children: [_jsx(AdaptableObjectRow, { className: "twa:font-bold", colItems: [
+                                    { Content: 'Raw String', Size: 1 },
+                                    { Content: 'Formatted String', Size: 1 },
+                                ] }), _jsx(AdaptableObjectRow, { colItems: [
+                                    { Content: '"' + DEFAULT_STRING_DISPLAY_VALUE + '"', Size: 1 },
+                                    {
+                                        Content: '"' +
+                                            FormatHelper.StringFormatter(DEFAULT_STRING_DISPLAY_VALUE, resolved.Options) +
+                                            '"',
+                                        Size: 1,
+                                    },
+                                ] })] })] })] }));
 };
 export const FormatColumnFormatWizardSection = (props) => {
     const { data } = useOnePageAdaptableWizardContext();
@@ -438,8 +299,5 @@ export const FormatColumnFormatWizardSection = (props) => {
     if (Type === 'StringFormatter') {
         return renderStringFormat(data, update, setFormatOption, customScopedFormatters, adaptable.api);
     }
-    return (React.createElement(HelpBlock, { className: "twa:m-2" },
-        "Setting a Display Format is only possible if ",
-        React.createElement("b", null, "all"),
-        " the columns in Scope are Numeric, String or Date"));
+    return (_jsxs(HelpBlock, { className: "twa:m-2", children: ["Setting a Display Format is only possible if ", _jsx("b", { children: "all" }), " the columns in Scope are Numeric, String or Date"] }));
 };