@adaptabletools/adaptable-cjs 21.2.2-canary.0 → 22.0.0-canary.0

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

@@ -4,7 +4,6 @@ exports.FlashingCellWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const FlashingCellSettingsWizardSection_1 = require("./FlashingCellSettingsWizardSection");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
@@ -19,6 +18,7 @@ const react_redux_1 = require("react-redux");
 const isValidFlashingCellRules_1 = require("./isValidFlashingCellRules");
 const FlashingCellRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FlashingCellRedux"));
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const Flex_1 = require("../../../components/Flex");
 const FlashingCellWizard = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const [flashingCell, setFlashingCell] = (0, react_1.useState)(() => {
@@ -77,7 +77,7 @@ const FlashingCellWizard = (props) => {
             },
             {
                 details: 'Choose Flash Styles for Up, Down and Neutral Changes',
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(FlashingCellStyleWizardSection_1.FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
                             updateStyles[styleName](style);
                         } }))),
@@ -86,7 +86,7 @@ const FlashingCellWizard = (props) => {
             },
             {
                 details: 'Set Duration and Target Properties',
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(FlashingCellSettingsWizardSection_1.FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }))),
                 renderSummary: FlashingCellSettingsWizardSection_1.renderFlashingAlertSettingsSummary,
                 title: 'Settings',
@@ -95,7 +95,7 @@ const FlashingCellWizard = (props) => {
                 details: 'Select Flashing Cell Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setFlashingCell }))),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
@@ -103,7 +103,7 @@ const FlashingCellWizard = (props) => {
             {
                 details: 'Review the Flashing Cell Rule',
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
                 },
                 title: 'Summary',

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.d.ts

@@ -12,5 +12,5 @@ export interface FormatColumnFormatWizardState {
 }
 export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn) => string;
 export declare const renderFormatColumnFormatSummary: (data: FormatColumn) => React.JSX.Element;
-export declare const getFormatDisplayTypeForScope: (scope: ColumnScope, api: AdaptableApi) => 'number' | 'date' | 'text' | undefined;
+export declare const getFormatDisplayTypeForScope: (scope: ColumnScope, api: AdaptableApi) => "number" | "date" | "text" | undefined;
 export declare const FormatColumnFormatWizardSection: (props: FormatColumnFormatWizardSectionProps) => React.JSX.Element;

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormatColumnFormatWizardSection = exports.getFormatDisplayTypeForScope = exports.renderFormatColumnFormatSummary = exports.getFormatColumnFormatSummaryValue = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const uniq_1 = tslib_1.__importDefault(require("lodash/uniq"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
@@ -25,6 +24,8 @@ const Textarea_1 = tslib_1.__importDefault(require("../../../components/Textarea
 const ButtonInfo_1 = require("../../Components/Buttons/ButtonInfo");
 const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
 const AdaptableColumn_1 = require("../../../AdaptableState/Common/AdaptableColumn");
+const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
 const DOLLAR_OPTIONS = {
     FractionDigits: 2,
     FractionSeparator: '.',
@@ -218,25 +219,25 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
     if (data.DisplayFormat.Formatter !== 'DateFormatter') {
         return null;
     }
-    return (React.createElement(rebass_1.Box, { padding: 2 },
+    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Text, { padding: 2, fontSize: 2 },
+                React.createElement(Flex_1.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_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Pattern" },
-                        React.createElement(Input_1.default, { "data-name": "pattern", value: data.DisplayFormat.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), mr: 2 }),
+                        React.createElement(Input_1.default, { "data-name": "pattern", value: data.DisplayFormat.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), className: "twa:mr-2" }),
                         React.createElement("span", null, data.DisplayFormat.Options.Pattern &&
                             FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options, true)))))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
-        React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
+        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
@@ -309,12 +310,12 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
     const IS_DOLLAR = data.DisplayFormat.Options.Prefix === '$'; //isEqual(data.DisplayFormat.Options, DOLLAR_OPTIONS);
     const IS_STERLING = data.DisplayFormat.Options.Prefix === '£'; //isEqual(data.DisplayFormat, STERLING_OPTIONS);
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
-    return (React.createElement(rebass_1.Box, { "data-name": 'format-column-display-format', padding: 2 },
+    return (React.createElement(Flex_1.Box, { "data-name": 'format-column-display-format', className: "twa:p-2" },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout_1.default, { mr: 3 },
+                React.createElement(Flex_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, { className: "twa:mr-3" },
                         React.createElement(FormLayout_1.FormRow, { label: "Fraction Separator" },
                             React.createElement(Input_1.default, { "data-name": "fraction-separator", value: data.DisplayFormat.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }),
                             ' '),
@@ -355,41 +356,38 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "round-checkbox", checked: data.DisplayFormat.Options.Round, onChange: (checked) => setFormatOption('Round', checked) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Empty" },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) })))))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                React.createElement(Flex_1.Flex, { flexDirection: "row" },
                     React.createElement(FormLayout_1.default, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
-        React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
+        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Text, { padding: 2, fontSize: 2 }, "Select a preset for common use cases"),
-                React.createElement(rebass_1.Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout_1.default, { margin: 2 },
+                React.createElement(Flex_1.Box, { className: "twa:p-2 twa:text-2" }, "Select a preset for common use cases"),
+                React.createElement(Flex_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, { className: "twa:m-2" },
                         React.createElement(FormLayout_1.FormRow, { label: "Show As:" },
-                            React.createElement(Radio_1.default, { "data-name": "preset-percentage", marginLeft: 2, checked: IS_PERCENT, onChange: () => setPercentPreset() }, "Percentage"),
-                            React.createElement(Radio_1.default, { "data-name": "preset-thousand", marginLeft: 3, checked: IS_THOUSAND, onChange: () => setDivideThousandPreset() }, "K (Thousand)"),
-                            React.createElement(Radio_1.default, { "data-name": "preset-million", marginLeft: 3, checked: IS_MILLION, onChange: () => setDivideMillionPreset() }, "M (Million)"),
-                            React.createElement(Radio_1.default, { "data-name": "preset-dollar", marginLeft: 3, checked: IS_DOLLAR, onChange: () => setDollarPreset() }, "Dollar"),
-                            React.createElement(Radio_1.default, { "data-name": "preset-sterling", marginLeft: 3, checked: IS_STERLING, onChange: () => setSterlingPreset() }, "Sterling")))))),
-        React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
+                            React.createElement(Radio_1.default, { "data-name": "preset-percentage", className: "twa:ml-2", checked: IS_PERCENT, onChange: () => setPercentPreset() }, "Percentage"),
+                            React.createElement(Radio_1.default, { "data-name": "preset-thousand", className: "twa:ml-3", checked: IS_THOUSAND, onChange: () => setDivideThousandPreset() }, "K (Thousand)"),
+                            React.createElement(Radio_1.default, { "data-name": "preset-million", className: "twa:ml-3", checked: IS_MILLION, onChange: () => setDivideMillionPreset() }, "M (Million)"),
+                            React.createElement(Radio_1.default, { "data-name": "preset-dollar", className: "twa:ml-3", checked: IS_DOLLAR, onChange: () => setDollarPreset() }, "Dollar"),
+                            React.createElement(Radio_1.default, { "data-name": "preset-sterling", className: "twa:ml-3", checked: IS_STERLING, onChange: () => setSterlingPreset() }, "Sterling")))))),
+        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Dynamic Content"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Text, { padding: 2, fontSize: 2 }, "Provide dynamic content through the use of Placeholders"),
-                React.createElement(FormLayout_1.default, { margin: 2 },
+                React.createElement(Flex_1.Box, { className: "twa:p-2 twa:text-2" }, "Provide dynamic content through the use of Placeholders"),
+                React.createElement(FormLayout_1.default, { className: "twa:m-2" },
                     React.createElement(FormLayout_1.FormRow, { label: "" },
-                        React.createElement(Textarea_1.default, { minWidth: 300, rows: 3, placeholder: "", marginTop: 2, type: 'text', autoFocus: false, value: data.DisplayFormat.Options.Content?.toString() ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
-                        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
-                                fontSize: 'var(--ab-font-size-3)',
-                                padding: 0,
-                            } },
-                            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.FormatColumnPlaceholderDocsLink, '_blank') }),
+                        React.createElement(Textarea_1.default, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: data.DisplayFormat.Options.Content?.toString() ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
+                        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
+                            React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(DocumentationLinkConstants_1.FormatColumnPlaceholderDocsLink, '_blank') }),
                             "Learn more about using placeholders"))),
                     ' '))),
-        React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
+        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Examples"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
+                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { className: "twa:font-bold", colItems: [
                         { Content: 'Raw Number', Size: 1 },
                         { Content: 'Formatted Number', Size: 1 },
                     ] }),
@@ -420,42 +418,39 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
         return null;
     }
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
-    return (React.createElement(rebass_1.Box, { "data-name": 'format-column-display-format', padding: 2 },
-        React.createElement(Tabs_1.Tabs, null,
-            React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout_1.default, { mr: 3 },
-                        React.createElement(FormLayout_1.FormRow, { label: "Case:" },
-                            React.createElement(rebass_1.Flex, null,
-                                React.createElement(Toggle_1.ToggleGroup, null,
-                                    React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }),
-                                    React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }),
-                                    React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })),
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "trim-checkbox", marginLeft: 5, checked: data.DisplayFormat.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim"))),
-                        React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
-                            React.createElement(Input_1.default, { "data-name": "prefix", value: data.DisplayFormat.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { "data-name": "suffix", value: data.DisplayFormat.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Content" },
-                            React.createElement(Textarea_1.default, { minWidth: 300, rows: 3, placeholder: "", marginTop: 2, type: 'text', autoFocus: false, value: data.DisplayFormat.Options.Content ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
-                            showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
-                                    fontSize: 'var(--ab-font-size-3)',
-                                    padding: 0,
-                                } },
-                                React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.FormatColumnPlaceholderDocsLink, '_blank') }),
-                                "See how to create dynamic Display Format using placeholders"))),
-                        React.createElement(FormLayout_1.FormRow, { label: "Empty" },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) })))))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout_1.default, { mr: 3 }, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
-        React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Example"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", "data-name": 'format-column-display-format', className: "twa:gap-3 twa:p-3" },
+        React.createElement(Card_1.Card, null,
+            React.createElement(Card_1.Card.Title, null, "Format"),
+            React.createElement(Card_1.Card.Body, { className: "twa:grid twa:p-2 twa:grid-cols-[1fr_1fr] twa:gap-2" },
+                React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-2 twa:col-span-2 twa:items-center" },
+                    React.createElement("label", null, "Case:"),
+                    React.createElement(Toggle_1.ToggleGroup, null,
+                        React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }),
+                        React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }),
+                        React.createElement(Toggle_1.Toggle, { pressed: data.DisplayFormat.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })),
+                    React.createElement(CheckBox_1.CheckBox, { "data-name": "trim-checkbox", className: "twa:ml-5", checked: data.DisplayFormat.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim")),
+                React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2" },
+                    React.createElement("label", null, "Prefix"),
+                    React.createElement(Input_1.default, { "data-name": "prefix", value: data.DisplayFormat.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2" },
+                    React.createElement("label", null, "Suffix"),
+                    React.createElement(Input_1.default, { "data-name": "suffix", value: data.DisplayFormat.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
+                React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:col-span-2 twa:gap-2" },
+                    React.createElement("label", null, "Content"),
+                    React.createElement(Textarea_1.default, { className: "twa:min-w-[300px]", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: data.DisplayFormat.Options.Content ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
+                    showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
+                        React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(DocumentationLinkConstants_1.FormatColumnPlaceholderDocsLink, '_blank') }),
+                        "See how to create dynamic Display Format using placeholders"))),
+                React.createElement(CheckBox_1.CheckBox, { className: "twa:col-span-2", "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }, "Empty"))),
+        scopedCustomFormatters.length > 0 && (React.createElement(Card_1.Card, { shadow: false },
+            React.createElement(Card_1.Card.Title, null, "Custom Formats"),
+            React.createElement(Card_1.Card.Body, null,
+                React.createElement(Flex_1.Flex, { flexDirection: "column" },
+                    React.createElement(FormLayout_1.default, { className: "twa:mr-3" }, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
+        React.createElement(Card_1.Card, null,
+            React.createElement(Card_1.Card.Title, null, "Example"),
+            React.createElement(Card_1.Card.Body, null,
+                React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { className: "twa:font-bold", colItems: [
                         { Content: 'Raw String', Size: 1 },
                         { Content: 'Formatted String', Size: 1 },
                     ] }),
@@ -494,7 +489,7 @@ const FormatColumnFormatWizardSection = (props) => {
     if (Type === 'StringFormatter') {
         return renderStringFormat(data, update, setFormatOption, customScopedFormatters, adaptable.api);
     }
-    return (React.createElement(HelpBlock_1.default, { margin: 3 },
+    return (React.createElement(HelpBlock_1.default, { 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"));

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormatColumnRuleWizardSection = void 0;
+exports.FormatColumnRuleWizardSection = FormatColumnRuleWizardSection;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
@@ -9,7 +9,7 @@ const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlo
 function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     if (data.Target && data.Target === 'columnHeader') {
-        return (React.createElement(HelpBlock_1.default, { margin: 3 }, "Conditions cannot be applied if the Target of the Format Column is Column Header"));
+        return (React.createElement(HelpBlock_1.default, { className: "twa:mt-3" }, "Conditions cannot be applied if the Target of the Format Column is Column Header"));
     }
     return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, 
         // TODO see what is this
@@ -29,4 +29,3 @@ function FormatColumnRuleWizardSection(props) {
                 " is 'All Columns' - so any data change may be evaluated in a complex AggregatedBooleanExpression")),
         } }));
 }
-exports.FormatColumnRuleWizardSection = FormatColumnRuleWizardSection;

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

@@ -6,7 +6,6 @@ const React = tslib_1.__importStar(require("react"));
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const constants_1 = require("./constants");
-const rebass_1 = require("rebass");
 const renderFormatColumnScopeSummary = (data) => {
     return (0, NewScopeComponent_1.renderScopeSummary)(data.Scope, {
         scopeWholeRow: 'Matching rows will be formatted',
@@ -18,9 +17,6 @@ exports.renderFormatColumnScopeSummary = renderFormatColumnScopeSummary;
 const FormatColumnScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Box, { "data-name": 'scope-heading', style: {
-                borderRadius: `var(--ab__border-radius)`,
-            }, padding: 2, backgroundColor: `var(--ab-color-primarylight)` }, "Scope"),
         React.createElement(NewScopeComponent_1.NewScopeComponent, { descriptions: {
                 rowScope: 'Format all columns in the row',
                 columnScope: 'Select columns to format',

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

@@ -3,34 +3,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormatColumnSettingsWizardSection = exports.renderFormatColumnSettingsSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const CheckBox_1 = require("../../../components/CheckBox");
-const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../components/Tag");
 const ToggleGroup_1 = require("../../../components/Toggle/ToggleGroup");
 const Toggle_1 = require("../../../components/Toggle/Toggle");
 const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
+const Flex_1 = require("../../../components/Flex");
+const Card_1 = require("../../../components/Card");
 const renderFormatColumnSettingsSummary = (data) => {
-    return (React.createElement(rebass_1.Box, { padding: 2 },
-        React.createElement(rebass_1.Text, null,
+    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
+        React.createElement(Flex_1.Box, null,
             "Cell alignment ",
-            React.createElement(Tag_1.Tag, null, data.CellAlignment ?? 'Default')),
-        React.createElement(rebass_1.Text, { mt: 3 },
+            React.createElement(Tag_1.Tag, null, data.CellAlignment ?? 'default')),
+        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Data Rows ",
-            React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeDataRows ? 'No' : 'Yes')),
+            React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
         ' ',
-        React.createElement(rebass_1.Text, { mt: 3 },
+        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Group Rows ",
-            React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeGroupRows ? 'No' : 'Yes')),
-        React.createElement(rebass_1.Text, { mt: 3 },
+            React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
+        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Summary Rows ",
-            React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeSummaryRows ? 'No' : 'Yes')),
-        React.createElement(rebass_1.Text, { mt: 3 },
+            React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeSummaryRows ? 'no' : 'yes')),
+        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Total Rows ",
-            React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeTotalRows ? 'No' : 'Yes')),
-        React.createElement(rebass_1.Text, { mt: 3 },
+            React.createElement(Tag_1.Tag, null, data.RowScope?.ExcludeTotalRows ? 'no' : 'yes')),
+        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Apply on Column Groups:",
             ' ',
             React.createElement(Tag_1.Tag, null, !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
@@ -83,10 +83,10 @@ const FormatColumnSettingsWizardSection = (props) => {
             },
         });
     };
-    return (React.createElement(Tabs_1.Tabs, null,
-        React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(rebass_1.Flex, { flexDirection: "row" },
+    return (React.createElement(Card_1.Card, null,
+        React.createElement(Card_1.Card.Title, null, "Settings"),
+        React.createElement(Card_1.Card.Body, null,
+            React.createElement(Flex_1.Flex, { flexDirection: "row" },
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Cell Alignment" },
                         React.createElement(ToggleGroup_1.ToggleGroup, null,
@@ -101,17 +101,17 @@ const FormatColumnSettingsWizardSection = (props) => {
                                     : onCellAlignmentSelectChanged(null) }))),
                     data.Target === 'cell' && (React.createElement(React.Fragment, null,
                         React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
-                            React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
+                            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, className: "twa:mr-2" }))),
                         React.createElement(FormLayout_1.FormRow, { label: "Exclude Group Rows:" },
-                            React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
+                            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, className: "twa:mr-2" }))),
                         React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
-                            React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
+                            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, className: "twa:mr-2" }))),
                         React.createElement(FormLayout_1.FormRow, { label: "Exclude Total Rows:" },
-                            React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, mr: 2 }))))),
+                            React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                                React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, className: "twa:mr-2" }))))),
                     React.createElement(FormLayout_1.FormRow, { label: "Apply on Column Group:" },
                         React.createElement(Radio_1.RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
                                 props.onChange({
@@ -119,8 +119,8 @@ const FormatColumnSettingsWizardSection = (props) => {
                                     ColumnGroupScope: columnGroupScope,
                                 });
                             } },
-                            React.createElement(Radio_1.default, { marginLeft: 1, value: "Both" }, "Always"),
-                            React.createElement(Radio_1.default, { marginLeft: 4, value: "Expanded" }, "Expanded"),
-                            React.createElement(Radio_1.default, { marginLeft: 4, value: "Collapsed" }, "Collapsed"))))))));
+                            React.createElement(Radio_1.default, { className: "twa:ml-1", value: "Both" }, "Always"),
+                            React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Expanded" }, "Expanded"),
+                            React.createElement(Radio_1.default, { className: "twa:ml-4", value: "Collapsed" }, "Collapsed"))))))));
 };
 exports.FormatColumnSettingsWizardSection = FormatColumnSettingsWizardSection;

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

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormatColumnStyleWizardSection = exports.renderFormatColumnStyleSummary = exports.renderFormatColumnStyleWizardSummary = exports.isFormatColumnStyleValid = void 0;
+exports.renderFormatColumnStyleSummary = exports.renderFormatColumnStyleWizardSummary = exports.isFormatColumnStyleValid = void 0;
+exports.FormatColumnStyleWizardSection = FormatColumnStyleWizardSection;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const StyleHelper_1 = require("../../../Utilities/Helpers/StyleHelper");
 const StyleComponent_1 = require("../../Components/StyleComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const UIHelper_1 = tslib_1.__importDefault(require("../../UIHelper"));
+const Flex_1 = require("../../../components/Flex");
 const isFormatColumnStyleValid = (data, api) => {
     if (data.Style &&
         UIHelper_1.default.IsEmptyStyle(data.Style) &&
@@ -33,7 +34,7 @@ const renderFormatColumnStyleWizardSummary = (data) => {
 };
 exports.renderFormatColumnStyleWizardSummary = renderFormatColumnStyleWizardSummary;
 const renderFormatColumnStyleSummary = (data, api) => {
-    return (React.createElement(rebass_1.Text, { className: "ab-FormatPreview", padding: 2, style: toStyle(data) }, "Preview result"));
+    return (React.createElement(Flex_1.Box, { className: "ab-FormatPreview twa:p-2", style: toStyle(data) }, "Preview result"));
 };
 exports.renderFormatColumnStyleSummary = renderFormatColumnStyleSummary;
 function FormatColumnStyleWizardSection(props) {
@@ -42,4 +43,3 @@ function FormatColumnStyleWizardSection(props) {
             props.onChange({ ...data, Style });
         } }));
 }
-exports.FormatColumnStyleWizardSection = FormatColumnStyleWizardSection;

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

@@ -5,8 +5,8 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Tabs_1 = require("../../../components/Tabs");
-const rebass_1 = require("rebass");
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
+const Flex_1 = require("../../../components/Flex");
 const renderFormatColumnTargetSummary = (data) => {
     if (!data.Target || data.Target === 'cell') {
         return 'Column Cells';
@@ -27,10 +27,10 @@ const FormatColumnTargetWizardSection = (props) => {
         });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs_1.Tabs, { mb: 3 },
+        React.createElement(Tabs_1.Tabs, { className: "twa:mb-3" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Target"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                React.createElement(Flex_1.Flex, { flexDirection: "column" },
                     React.createElement(TypeRadio_1.TypeRadio, { "data-name": "target-column-cell", text: 'Column Cells', description: "Column Cells are styled and formatted", checked: currentTarget === 'cell', onClick: () => handleTargetChange('cell') }),
                     React.createElement(TypeRadio_1.TypeRadio, { "data-name": "target-column-header", text: 'Column Header', description: "The Column Header is styled (Note: Conditions are not available for Column Headers)", checked: currentTarget === 'columnHeader', onClick: () => handleTargetChange('columnHeader') }))))));
 };

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

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormatColumnWizard = void 0;
+exports.FormatColumnWizard = FormatColumnWizard;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const FormatColumnScopeWizardSection_1 = require("./FormatColumnScopeWizardSection");
@@ -22,6 +21,7 @@ const FormatColumnRuleWizardSection_1 = require("./FormatColumnRuleWizardSection
 const constants_1 = require("./constants");
 const ObjectExtensions_1 = require("../../../Utilities/Extensions/ObjectExtensions");
 const FormatColumnTargetWizardSection_1 = require("./FormatColumnTargetWizardSection");
+const Flex_1 = require("../../../components/Flex");
 const adjustDisplayFormat = (fc, api) => {
     const formatColumn = { ...fc };
     let formatDataType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
@@ -95,14 +95,14 @@ function FormatColumnWizard(props) {
         }
         props.onFinishWizard(formatColumn);
     };
-    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, modal: props.modal, data: formatColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Scope',
                 details: 'Select which Columns will be formatted',
                 isValid: NewScopeComponent_1.isScopeValid,
                 renderSummary: FormatColumnScopeWizardSection_1.renderFormatColumnScopeSummary,
                 render: () => {
-                    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+                    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
                         React.createElement(FormatColumnScopeWizardSection_1.FormatColumnScopeWizardSection, { onChange: setFormatColumn })));
                 },
             },
@@ -111,7 +111,7 @@ function FormatColumnWizard(props) {
                 details: 'Select which Columns Elements will be formatted',
                 renderSummary: FormatColumnTargetWizardSection_1.renderFormatColumnTargetSummary,
                 render: () => {
-                    return (React.createElement(rebass_1.Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+                    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
                         React.createElement(FormatColumnTargetWizardSection_1.FormatColumnTargetWizardSection, { onChange: setFormatColumn })));
                 },
             },
@@ -134,7 +134,7 @@ function FormatColumnWizard(props) {
                 isValid: FormatColumnStyleWizardSection_1.isFormatColumnStyleValid,
                 renderSummary: FormatColumnStyleWizardSection_1.renderFormatColumnStyleWizardSummary,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(FormatColumnStyleWizardSection_1.FormatColumnStyleWizardSection, { onChange: setFormatColumn })));
                 },
             },
@@ -151,7 +151,7 @@ function FormatColumnWizard(props) {
                 details: 'Set Additional Properties',
                 renderSummary: FormatColumnSettingsWizardSection_1.renderFormatColumnSettingsSummary,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(FormatColumnSettingsWizardSection_1.FormatColumnSettingsWizardSection, { onChange: setFormatColumn })));
                 },
             },
@@ -159,7 +159,7 @@ function FormatColumnWizard(props) {
                 details: 'Select Format Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setFormatColumn }))),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
@@ -167,11 +167,10 @@ function FormatColumnWizard(props) {
             {
                 details: 'Review the Format Column',
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
                 },
                 title: 'Summary',
             },
         ] }));
 }
-exports.FormatColumnWizard = FormatColumnWizard;