@adaptabletools/adaptable-cjs 19.2.3 → 20.0.0-canary.0

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

@@ -21,13 +21,12 @@ const AdaptableIconComponent_1 = require("../../Components/AdaptableIconComponen
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const Accordion_1 = require("../../../components/Accordion");
 const BadgeEditor = (props) => {
-    var _a, _b;
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const { badge, columnId, onChange } = props;
     // badges evaluate predicate per value
     const predicateDefs = api.styledColumnApi.internalApi.getBadgePredicateDefsForColumn(columnId);
     const dataType = api.columnApi.getColumnDataTypeForColumnId(columnId);
-    const previewValue = dataType === 'Number' || dataType == 'NumberArray'
+    const previewValue = dataType === 'number' || dataType == 'numberArray'
         ? GeneralConstants_1.DEFAULT_INTEGER_DISPLAY_VALUE
         : GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
     return (React.createElement(
@@ -41,8 +40,11 @@ const BadgeEditor = (props) => {
                     React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Select the Style for the Badge"),
                     ' ',
                     React.createElement(Accordion_1.Accordion, { title: "Edit Badge Style" },
-                        React.createElement(StyleComponent_1.StyleComponent, { showFontSizeAs: "radio", headless: true, hidePreview: true, api: api, Style: (_a = badge.Style) !== null && _a !== void 0 ? _a : {}, UpdateStyle: (Style) => {
-                                onChange(Object.assign(Object.assign({}, badge), { Style }));
+                        React.createElement(StyleComponent_1.StyleComponent, { showFontSizeAs: "radio", headless: true, hidePreview: true, api: api, Style: badge.Style ?? {}, UpdateStyle: (Style) => {
+                                onChange({
+                                    ...badge,
+                                    Style,
+                                });
                             } }))),
                 !api.columnApi.hasArrayDataType(columnId) && ( // dont show predicates for arrays
                 (React.createElement(
@@ -51,34 +53,46 @@ const BadgeEditor = (props) => {
                     columnId ? (React.createElement(React.Fragment, null,
                         React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Create (optional) Rule for when the Badge is displayed; if no Rule provided Badge will always display (unless overriden by another Rule)"),
                         React.createElement(PredicateEditor_1.PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
-                                onChange(Object.assign(Object.assign({}, badge), { Predicate: predicate }));
-                            }, onClear: () => onChange(Object.assign(Object.assign({}, badge), { Predicate: undefined })) }))) : (React.createElement(ErrorBox_1.default, null, "Select a column first"))
+                                onChange({
+                                    ...badge,
+                                    Predicate: predicate,
+                                });
+                            }, onClear: () => onChange({
+                                ...badge,
+                                Predicate: undefined,
+                            }) }))) : (React.createElement(ErrorBox_1.default, null, "Select a column first"))
                 ))),
                 React.createElement(FormLayout_1.FormRow, { label: "Icon" },
                     React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Select (optional) Icon (and Icon position) to display in the Badge"),
                     ' ',
                     // for now, only show for system icons the
-                    !badge.Icon || 'name' in badge.Icon ? (React.createElement(AdaptableIconSelector_1.AdaptableIconSelector, { value: (badge === null || badge === void 0 ? void 0 : badge.Icon) && 'name' in (badge === null || badge === void 0 ? void 0 : badge.Icon) ? badge.Icon.name : undefined, onChange: (iconName) => {
+                    !badge.Icon || 'name' in badge.Icon ? (React.createElement(AdaptableIconSelector_1.AdaptableIconSelector, { value: badge?.Icon && 'name' in badge?.Icon ? badge.Icon.name : undefined, onChange: (iconName) => {
                             if (iconName) {
-                                onChange(Object.assign(Object.assign({}, badge), { Icon: {
+                                onChange({
+                                    ...badge,
+                                    Icon: {
                                         name: iconName,
-                                    } }));
+                                    },
+                                });
                             }
                             else {
-                                onChange(Object.assign(Object.assign({}, badge), { Icon: undefined }));
+                                onChange({
+                                    ...badge,
+                                    Icon: undefined,
+                                });
                             }
                         } })) : (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: badge.Icon }))),
                 badge.Icon && (React.createElement(FormLayout_1.FormRow, { label: "Icon Position" },
                     React.createElement(DropdownButton_1.default, { columns: ['label'], items: [
                             {
                                 label: 'Start',
-                                onClick: () => onChange(Object.assign(Object.assign({}, badge), { IconPosition: 'Start' })),
+                                onClick: () => onChange({ ...badge, IconPosition: 'Start' }),
                             },
                             {
                                 label: 'End',
-                                onClick: () => onChange(Object.assign(Object.assign({}, badge), { IconPosition: 'End' })),
+                                onClick: () => onChange({ ...badge, IconPosition: 'End' }),
                             },
-                        ] }, (_b = badge.IconPosition) !== null && _b !== void 0 ? _b : 'Start'))))),
+                        ] }, badge.IconPosition ?? 'Start'))))),
         React.createElement(rebass_1.Box, { justifyContent: "end" },
             React.createElement(SimpleButton_1.default, { icon: "delete", onClick: props.onDelete }))
     ));
@@ -88,28 +102,42 @@ const renderBadgeSummary = (styledColumn) => {
 };
 exports.renderBadgeSummary = renderBadgeSummary;
 const StyledColumnBadgeSection = (props) => {
-    var _a, _b;
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const badges = (_b = (_a = data === null || data === void 0 ? void 0 : data.BadgeStyle) === null || _a === void 0 ? void 0 : _a.Badges) !== null && _b !== void 0 ? _b : [];
+    const badges = data?.BadgeStyle?.Badges ?? [];
     return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
         React.createElement(Tabs_1.Tabs.Tab, null, "Badges"),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(rebass_1.Flex, { justifyContent: "end" },
                 React.createElement(SimpleButton_1.default, { icon: "plus", onClick: () => {
-                        props.onChange(Object.assign(Object.assign({}, data), { BadgeStyle: {
+                        props.onChange({
+                            ...data,
+                            BadgeStyle: {
                                 Badges: [...badges, ObjectFactory_1.default.CreateDefaultStyledColumnBadge()],
-                            } }));
+                            },
+                        });
                     } }, "Add Badge")),
             React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2 }, badges.map((badge, index) => {
                 const handleEditBadge = (badge) => {
                     const newBadges = [...badges];
                     newBadges[index] = badge;
-                    props.onChange(Object.assign(Object.assign({}, data), { BadgeStyle: Object.assign(Object.assign({}, data.BadgeStyle), { Badges: newBadges }) }));
+                    props.onChange({
+                        ...data,
+                        BadgeStyle: {
+                            ...data.BadgeStyle,
+                            Badges: newBadges,
+                        },
+                    });
                 };
                 return (React.createElement(BadgeEditor, { key: index, badge: badge, columnId: data.ColumnId, onChange: handleEditBadge, onDelete: () => {
                         const newBadges = [...badges];
                         newBadges.splice(index, 1);
-                        props.onChange(Object.assign(Object.assign({}, data), { BadgeStyle: Object.assign(Object.assign({}, data.BadgeStyle), { Badges: newBadges }) }));
+                        props.onChange({
+                            ...data,
+                            BadgeStyle: {
+                                ...data.BadgeStyle,
+                                Badges: newBadges,
+                            },
+                        });
                     } }));
             })))));
 };

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

@@ -12,12 +12,10 @@ const Select_1 = require("../../../components/Select");
 const Tabs_1 = require("../../../components/Tabs");
 const Tag_1 = require("../../../components/Tag");
 const ObjectExtensions_1 = require("../../../Utilities/Extensions/ObjectExtensions");
-const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const UIHelper_1 = require("../../UIHelper");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const CommonProperties = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const axisTypeOptions = React.useMemo(() => {
         return [
@@ -42,145 +40,81 @@ const CommonProperties = (props) => {
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Top" },
-                    React.createElement(Input_1.default, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'top'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_b = (_a = data.SparkLineStyle.options) === null || _a === void 0 ? void 0 : _a.padding) === null || _b === void 0 ? void 0 : _b.top })),
+                    React.createElement(Input_1.default, { onChange: (event) => props.onOptionChange(['padding', 'top'], event.target.value ?? 0), type: "number", value: data.SparkLineStyle.options?.padding?.top })),
                 React.createElement(FormLayout_1.FormRow, { label: "Bottom" },
-                    React.createElement(Input_1.default, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'bottom'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_d = (_c = data.SparkLineStyle.options) === null || _c === void 0 ? void 0 : _c.padding) === null || _d === void 0 ? void 0 : _d.bottom })),
+                    React.createElement(Input_1.default, { onChange: (event) => props.onOptionChange(['padding', 'bottom'], event.target.value ?? 0), type: "number", value: data.SparkLineStyle.options?.padding?.bottom })),
                 React.createElement(FormLayout_1.FormRow, { label: "Left" },
-                    React.createElement(Input_1.default, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'left'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_f = (_e = data.SparkLineStyle.options) === null || _e === void 0 ? void 0 : _e.padding) === null || _f === void 0 ? void 0 : _f.left })),
+                    React.createElement(Input_1.default, { onChange: (event) => props.onOptionChange(['padding', 'left'], event.target.value ?? 0), type: "number", value: data.SparkLineStyle.options?.padding?.left })),
                 React.createElement(FormLayout_1.FormRow, { label: "Right" },
-                    React.createElement(Input_1.default, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'right'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_h = (_g = data.SparkLineStyle.options) === null || _g === void 0 ? void 0 : _g.padding) === null || _h === void 0 ? void 0 : _h.right })))),
+                    React.createElement(Input_1.default, { onChange: (event) => props.onOptionChange(['padding', 'right'], event.target.value ?? 0), type: "number", value: data.SparkLineStyle.options?.padding?.right })))),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Axis Type" },
                     React.createElement(rebass_1.Box, { maxWidth: 180 },
-                        React.createElement(Select_1.Select, { value: (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.SparkLineStyle) === null || _j === void 0 ? void 0 : _j.options) === null || _k === void 0 ? void 0 : _k.axis) === null || _l === void 0 ? void 0 : _l.type, options: axisTypeOptions, onChange: (value) => props.onOptionChange(['axis', 'type'], value), placeholder: "Select Axis Type" }))),
+                        React.createElement(Select_1.Select, { value: data?.SparkLineStyle?.options?.axis?.type, options: axisTypeOptions, onChange: (value) => props.onOptionChange(['axis', 'type'], value), placeholder: "Select Axis Type" }))),
                 React.createElement(FormLayout_1.FormRow, { label: "Stroke Color" },
-                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_q = (_p = (_o = (_m = data.SparkLineStyle) === null || _m === void 0 ? void 0 : _m.options) === null || _o === void 0 ? void 0 : _o.axis) === null || _p === void 0 ? void 0 : _p.stroke) !== null && _q !== void 0 ? _q : '#fff', onChange: (color) => props.onOptionChange(['axis', 'stroke'], color) })),
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: data.SparkLineStyle?.options?.axis?.stroke ?? '#fff', onChange: (color) => props.onOptionChange(['axis', 'stroke'], color) })),
                 React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
-                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_u = (_t = (_s = (_r = data.SparkLineStyle) === null || _r === void 0 ? void 0 : _r.options) === null || _s === void 0 ? void 0 : _s.axis) === null || _t === void 0 ? void 0 : _t.strokeWidth) !== null && _u !== void 0 ? _u : 0, onChange: (event) => props.onOptionChange(['axis', 'strokeWidth'], parseFloat(event.target.value)) })))),
+                    React.createElement(AdaptableInput_1.default, { type: "number", value: data.SparkLineStyle?.options?.axis?.strokeWidth ?? 0, onChange: (event) => props.onOptionChange(['axis', 'strokeWidth'], parseFloat(event.target.value)) })))),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(FormLayout_1.default, null,
-                React.createElement(FormLayout_1.FormRow, { label: "Size" },
-                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_x = (_w = (_v = data.SparkLineStyle) === null || _v === void 0 ? void 0 : _v.options) === null || _w === void 0 ? void 0 : _w.highlightStyle) === null || _x === void 0 ? void 0 : _x.size, onChange: (event) => props.onOptionChange(['highlightStyle', 'size'], parseFloat(event.target.value)) })),
                 React.createElement(FormLayout_1.FormRow, { label: "Fill" },
-                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_1 = (_0 = (_z = (_y = data.SparkLineStyle) === null || _y === void 0 ? void 0 : _y.options) === null || _z === void 0 ? void 0 : _z.highlightStyle) === null || _0 === void 0 ? void 0 : _0.fill) !== null && _1 !== void 0 ? _1 : UIHelper_1.YELLOW, onChange: (color) => props.onOptionChange(['highlightStyle', 'fill'], color) })),
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: data.SparkLineStyle?.options?.highlightStyle?.item?.fill ?? UIHelper_1.YELLOW, onChange: (color) => props.onOptionChange(['highlightStyle', 'item', 'fill'], color) })),
                 React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_5 = (_4 = (_3 = (_2 = data.SparkLineStyle) === null || _2 === void 0 ? void 0 : _2.options) === null || _3 === void 0 ? void 0 : _3.highlightStyle) === null || _4 === void 0 ? void 0 : _4.stroke) !== null && _5 !== void 0 ? _5 : UIHelper_1.LIGHT_GRAY, onChange: (color) => props.onOptionChange(['highlightStyle', 'stroke'], color) })),
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: data.SparkLineStyle?.options?.highlightStyle?.item?.stroke ?? UIHelper_1.LIGHT_GRAY, onChange: (color) => props.onOptionChange(['highlightStyle', 'item', 'stroke'], color) })),
                 React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
-                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_8 = (_7 = (_6 = data.SparkLineStyle) === null || _6 === void 0 ? void 0 : _6.options) === null || _7 === void 0 ? void 0 : _7.highlightStyle) === null || _8 === void 0 ? void 0 : _8.strokeWidth, onChange: (event) => props.onOptionChange(['highlightStyle', 'strokeWidth'], parseFloat(event.target.value)) }))))));
+                    React.createElement(AdaptableInput_1.default, { type: "number", value: data.SparkLineStyle?.options?.highlightStyle?.item?.strokeWidth, onChange: (event) => props.onOptionChange(['highlightStyle', 'item', 'strokeWidth'], parseFloat(event.target.value)) }))))));
 };
 const SparklineMarkerProperties = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const sparklineOptions = data.SparkLineStyle.options;
     return (React.createElement(FormLayout_1.default, null,
         React.createElement(FormLayout_1.FormRow, { label: "Enabled" },
-            React.createElement(CheckBox_1.CheckBox, { checked: (_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true, onChange: (checked) => props.onOptionChange(['marker', 'enabled'], checked) })),
+            React.createElement(CheckBox_1.CheckBox, { checked: sparklineOptions?.marker?.enabled ?? true, onChange: (checked) => props.onOptionChange(['marker', 'enabled'], checked) })),
         React.createElement(FormLayout_1.FormRow, { label: "Size" },
-            React.createElement(AdaptableInput_1.default, { type: "number", value: (_d = (_c = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : 0, onChange: (event) => props.onOptionChange(['marker', 'size'], parseFloat(event.target.value)) })),
+            React.createElement(AdaptableInput_1.default, { type: "number", value: sparklineOptions?.marker?.size ?? 0, onChange: (event) => props.onOptionChange(['marker', 'size'], parseFloat(event.target.value)) })),
         React.createElement(FormLayout_1.FormRow, { label: "Fill" },
-            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_f = (_e = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _e === void 0 ? void 0 : _e.fill) !== null && _f !== void 0 ? _f : UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['marker', 'fill'], color) })),
+            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: sparklineOptions?.marker?.fill ?? UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['marker', 'fill'], color) })),
         React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_h = (_g = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _g === void 0 ? void 0 : _g.stroke) !== null && _h !== void 0 ? _h : UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['marker', 'stroke'], color) })),
+            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: sparklineOptions?.marker?.stroke ?? UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['marker', 'stroke'], color) })),
         React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
-            React.createElement(AdaptableInput_1.default, { type: "number", value: (_k = (_j = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _j === void 0 ? void 0 : _j.strokeWidth) !== null && _k !== void 0 ? _k : 1, onChange: (event) => props.onOptionChange(['marker', 'strokeWidth'], parseFloat(event.target.value)) }))));
+            React.createElement(AdaptableInput_1.default, { type: "number", value: sparklineOptions?.marker?.strokeWidth ?? 1, onChange: (event) => props.onOptionChange(['marker', 'strokeWidth'], parseFloat(event.target.value)) }))));
 };
 const SparklineLineProperties = (props) => {
-    var _a, _b, _c;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const sparklineOptions = data.SparkLineStyle.options;
     return (React.createElement(FormLayout_1.default, null,
         React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.line) === null || _a === void 0 ? void 0 : _a.stroke) !== null && _b !== void 0 ? _b : UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['line', 'stroke'], color) })),
+            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: sparklineOptions?.stroke ?? UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['stroke'], color) })),
         React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
-            React.createElement(AdaptableInput_1.default, { type: "number", value: (_c = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.line) === null || _c === void 0 ? void 0 : _c.strokeWidth, onChange: (event) => props.onOptionChange(['line', 'strokeWidth'], parseFloat(event.target.value)) }))));
-};
-const CrossHairsProperties = (props) => {
-    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const sparklineOptions = data.SparkLineStyle.options;
-    const lineDashes = [
-        'dash',
-        'dashDot',
-        'dashDotDot',
-        'dot',
-        'longDash',
-        'longDashDot',
-        'longDashDotDot',
-        'shortDash',
-        'shortDashDot',
-        'shortDashDotDot',
-        'shortDot',
-        'solid',
-    ];
-    const lineCapOptions = [
-        'butt',
-        'round',
-        'square',
-    ];
-    const buildLineDashProperties = (key) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        const lineDashOptions = lineDashes.map((item) => ({
-            label: (0, StringExtensions_1.Humanize)(item),
-            value: item,
-        }));
-        const lineCapOptionsItems = lineCapOptions.map((item) => ({
-            label: (0, StringExtensions_1.Humanize)(item),
-            value: item,
-        }));
-        return (React.createElement(FormLayout_1.default, null,
-            React.createElement(FormLayout_1.FormRow, { label: "Show" },
-                React.createElement(CheckBox_1.CheckBox, { checked: (_c = (_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.enabled) !== null && _c !== void 0 ? _c : true, onChange: (checked) => props.onOptionChange(['crosshairs', key, 'enabled'], checked) })),
-            React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-                React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_f = (_e = (_d = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _d === void 0 ? void 0 : _d[key]) === null || _e === void 0 ? void 0 : _e.stroke) !== null && _f !== void 0 ? _f : UIHelper_1.BLACK, onChange: (color) => props.onOptionChange(['crosshairs', key, 'stroke'], color) })),
-            React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
-                React.createElement(AdaptableInput_1.default, { type: "number", value: (_j = (_h = (_g = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _g === void 0 ? void 0 : _g[key]) === null || _h === void 0 ? void 0 : _h.strokeWidth) !== null && _j !== void 0 ? _j : 1, onChange: (event) => props.onOptionChange(['crosshairs', key, 'strokeWidth'], event.target.value) })),
-            React.createElement(FormLayout_1.FormRow, { label: "Line Dash" },
-                React.createElement(Select_1.Select, { value: (_m = (_l = (_k = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _k === void 0 ? void 0 : _k[key]) === null || _l === void 0 ? void 0 : _l.lineDash) !== null && _m !== void 0 ? _m : 'solid', onChange: (value) => props.onOptionChange(['crosshairs', key, 'lineDash'], value), options: lineDashOptions, placeholder: "Select Line Dash" })),
-            React.createElement(FormLayout_1.FormRow, { label: "Line Cap" },
-                React.createElement(Select_1.Select, { value: (_q = (_p = (_o = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _o === void 0 ? void 0 : _o[key]) === null || _p === void 0 ? void 0 : _p.lineCap) !== null && _q !== void 0 ? _q : 'butt', onChange: (value) => props.onOptionChange(['crosshairs', key, 'lineCap'], value), options: lineCapOptionsItems, placeholder: "Select Line Cap" }))));
-    };
-    return (React.createElement(rebass_1.Flex, null,
-        React.createElement(rebass_1.Box, { mr: 3 },
-            React.createElement(rebass_1.Box, null, "X Line"),
-            buildLineDashProperties('xLine')),
-        React.createElement(rebass_1.Box, null,
-            React.createElement(rebass_1.Box, null, "Y Line"),
-            buildLineDashProperties('yLine'))));
+            React.createElement(AdaptableInput_1.default, { type: "number", value: sparklineOptions?.strokeWidth, onChange: (event) => props.onOptionChange(['strokeWidth'], parseFloat(event.target.value)) }))));
 };
 const TypeAreaProperties = (props) => {
-    var _a;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const sparklineOptions = data.SparkLineStyle.options;
     return (React.createElement(Tabs_1.Tabs, { mb: 2 },
         React.createElement(Tabs_1.Tabs.Tab, null, "Stroke"),
         React.createElement(Tabs_1.Tabs.Tab, null, "Line"),
         React.createElement(Tabs_1.Tabs.Tab, null, "Marker"),
-        React.createElement(Tabs_1.Tabs.Tab, null, "Cross Hairs"),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.fill) !== null && _a !== void 0 ? _a : UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['fill'], color) })))),
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: sparklineOptions?.fill ?? UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['fill'], color) })))),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(SparklineLineProperties, { onOptionChange: props.onOptionChange })),
         React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(SparklineMarkerProperties, { onOptionChange: props.onOptionChange })),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(CrossHairsProperties, { onOptionChange: props.onOptionChange }))));
+            React.createElement(SparklineMarkerProperties, { onOptionChange: props.onOptionChange }))));
 };
 const TypeLineProperties = (props) => {
     return (React.createElement(Tabs_1.Tabs, { mb: 2 },
         React.createElement(Tabs_1.Tabs.Tab, null, "Line"),
         React.createElement(Tabs_1.Tabs.Tab, null, "Marker"),
-        React.createElement(Tabs_1.Tabs.Tab, null, "Cross Hairs"),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(SparklineLineProperties, { onOptionChange: props.onOptionChange })),
         React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(SparklineMarkerProperties, { onOptionChange: props.onOptionChange })),
-        React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(CrossHairsProperties, { onOptionChange: props.onOptionChange }))));
+            React.createElement(SparklineMarkerProperties, { onOptionChange: props.onOptionChange }))));
 };
 const TypeColumnBarProperties = (props) => {
-    var _a, _b, _c, _d, _e;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const sparklineOptions = data.SparkLineStyle.options;
     return (React.createElement(Tabs_1.Tabs, { mb: 2 },
@@ -188,32 +122,26 @@ const TypeColumnBarProperties = (props) => {
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Fill" },
-                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.fill) !== null && _a !== void 0 ? _a : UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['fill'], color) })),
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: sparklineOptions?.fill ?? UIHelper_1.LIGHT_BLUE, onChange: (color) => props.onOptionChange(['fill'], color) })),
                 React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_b = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.stroke) !== null && _b !== void 0 ? _b : UIHelper_1.LIGHT_GRAY, onChange: (color) => props.onOptionChange(['stroke'], color) })),
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: sparklineOptions?.stroke ?? UIHelper_1.LIGHT_GRAY, onChange: (color) => props.onOptionChange(['stroke'], color) })),
                 React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
-                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_c = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.strokeWidth) !== null && _c !== void 0 ? _c : 1, onChange: (event) => props.onOptionChange(['strokeWidth'], event.target.value) })),
-                React.createElement(FormLayout_1.FormRow, { label: "Padding Inner" },
-                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_d = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.paddingInner) !== null && _d !== void 0 ? _d : 0.1, onChange: (event) => props.onOptionChange(['paddingInner'], event.target.value) })),
-                React.createElement(FormLayout_1.FormRow, { label: "Padding Outer" },
-                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_e = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.paddingOuter) !== null && _e !== void 0 ? _e : 0.2, onChange: (event) => props.onOptionChange(['paddingOuter'], event.target.value) }))))));
+                    React.createElement(AdaptableInput_1.default, { type: "number", value: sparklineOptions?.strokeWidth ?? 1, onChange: (event) => props.onOptionChange(['strokeWidth'], event.target.value) }))))));
 };
 const SparklineObjectNumberArrayProperties = (props) => {
-    var _a, _b;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const sparkLineOptions = data.SparkLineStyle.options;
     const [sparklineDataItem, setSparklineDataItem] = React.useState('');
     React.useEffect(() => {
-        var _a, _b, _c;
         try {
             let cellData = null;
             const MAX_ROWS_TO_CHECK = 20;
             let currentRow = 0;
             while (!cellData || currentRow < MAX_ROWS_TO_CHECK) {
-                const rowWithData = (_a = api.gridApi.getRowNodeForIndex(currentRow)) === null || _a === void 0 ? void 0 : _a.data;
+                const rowWithData = api.gridApi.getRowNodeForIndex(currentRow)?.data;
                 const column = api.columnApi.getColumnWithColumnId(data.ColumnId);
-                if ((_b = rowWithData === null || rowWithData === void 0 ? void 0 : rowWithData[column === null || column === void 0 ? void 0 : column.field]) === null || _b === void 0 ? void 0 : _b[0]) {
-                    cellData = (_c = rowWithData === null || rowWithData === void 0 ? void 0 : rowWithData[column === null || column === void 0 ? void 0 : column.field]) === null || _c === void 0 ? void 0 : _c[0];
+                if (rowWithData?.[column?.field]?.[0]) {
+                    cellData = rowWithData?.[column?.field]?.[0];
                     break;
                 }
                 currentRow++;
@@ -229,19 +157,14 @@ const SparklineObjectNumberArrayProperties = (props) => {
     }, [data]);
     return (React.createElement(React.Fragment, null,
         React.createElement(FormLayout_1.FormRow, { label: "X Key" },
-            React.createElement(Input_1.default, { onChange: (event) => props.onOptionChange(['xKey'], event.target.value), value: (_a = sparkLineOptions === null || sparkLineOptions === void 0 ? void 0 : sparkLineOptions.xKey) !== null && _a !== void 0 ? _a : 'x' })),
+            React.createElement(Input_1.default, { onChange: (event) => props.onOptionChange(['xKey'], event.target.value), value: sparkLineOptions?.xKey ?? 'x' })),
         React.createElement(FormLayout_1.FormRow, { label: "Y Key" },
-            React.createElement(Input_1.default, { onChange: (event) => props.onOptionChange(['yKey'], event.target.value), value: (_b = sparkLineOptions === null || sparkLineOptions === void 0 ? void 0 : sparkLineOptions.yKey) !== null && _b !== void 0 ? _b : 'y' })),
+            React.createElement(Input_1.default, { onChange: (event) => props.onOptionChange(['yKey'], event.target.value), value: sparkLineOptions?.yKey ?? 'y' })),
         sparklineDataItem && (React.createElement(FormLayout_1.FormRow, { label: "Preview" },
             React.createElement(Tag_1.Tag, null, sparklineDataItem)))));
 };
 const StyledColumnSparklineSettingsSection = (props) => {
-    var _a, _b;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const handleTypeChange = React.useCallback((type) => {
-        const newStyledColumn = Object.assign(Object.assign({}, data), { SparkLineStyle: Object.assign(Object.assign({}, data.SparkLineStyle), { options: Object.assign(Object.assign({}, data.SparkLineStyle.options), { type }) }) });
-        props.onChange(newStyledColumn);
-    }, [data]);
     const sparklineTypeOptions = React.useMemo(() => [
         { label: 'Line', value: 'line' },
         { label: 'Area', value: 'area' },
@@ -249,11 +172,16 @@ const StyledColumnSparklineSettingsSection = (props) => {
         { label: 'Bar', value: 'bar' },
     ], [data]);
     const handleOptionChange = React.useCallback((path, value) => {
-        var _a;
-        const newOptions = (0, ObjectExtensions_1.setInPath)((_a = data.SparkLineStyle.options) !== null && _a !== void 0 ? _a : {}, path, value);
-        props.onChange(Object.assign(Object.assign({}, data), { SparkLineStyle: Object.assign(Object.assign({}, data.SparkLineStyle), { options: newOptions }) }));
+        const newOptions = (0, ObjectExtensions_1.setInPath)(data.SparkLineStyle.options ?? {}, path, value);
+        props.onChange({
+            ...data,
+            SparkLineStyle: {
+                ...data.SparkLineStyle,
+                options: newOptions,
+            },
+        });
     }, [data]);
-    const isObjectNumberArray = ((_a = api.columnApi.getColumnWithColumnId(data.ColumnId)) === null || _a === void 0 ? void 0 : _a.dataType) === 'ObjectNumberArray';
+    const isObjectNumberArray = api.columnApi.getColumnWithColumnId(data.ColumnId)?.dataType === 'objectArray';
     return (React.createElement(React.Fragment, null,
         React.createElement(Tabs_1.Tabs, { mb: 2 },
             React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
@@ -261,18 +189,27 @@ const StyledColumnSparklineSettingsSection = (props) => {
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Sparkline Type" },
                         React.createElement(rebass_1.Box, { maxWidth: 160 },
-                            React.createElement(Select_1.Select, { options: sparklineTypeOptions, value: (_b = data.SparkLineStyle.options) === null || _b === void 0 ? void 0 : _b.type, onChange: (value) => handleOptionChange(['type'], value), placeholder: "Select Sparkline Type" }))),
+                            React.createElement(Select_1.Select, { options: sparklineTypeOptions, value: data.SparkLineStyle.options?.type, onChange: (value) => {
+                                    if (value === 'column') {
+                                        handleOptionChange(['type'], 'bar');
+                                        handleOptionChange(['direction'], 'vertical');
+                                    }
+                                    else if (value === 'bar') {
+                                        handleOptionChange(['type'], 'bar');
+                                        handleOptionChange(['direction'], 'horizontal');
+                                    }
+                                    else {
+                                        handleOptionChange(['type'], value);
+                                    }
+                                }, placeholder: "Select Sparkline Type" }))),
                     isObjectNumberArray && (React.createElement(SparklineObjectNumberArrayProperties, { onOptionChange: handleOptionChange }))))),
         React.createElement(CommonProperties, { onOptionChange: handleOptionChange }),
         (() => {
-            var _a;
-            switch ((_a = data.SparkLineStyle.options) === null || _a === void 0 ? void 0 : _a.type) {
+            switch (data.SparkLineStyle.options?.type) {
                 case 'line':
                     return React.createElement(TypeLineProperties, { onOptionChange: handleOptionChange });
                 case 'area':
                     return React.createElement(TypeAreaProperties, { onOptionChange: handleOptionChange });
-                case 'column':
-                    return React.createElement(TypeColumnBarProperties, { onOptionChange: handleOptionChange });
                 case 'bar':
                     // It is the same as column. If they diverge, we can split them out.
                     return React.createElement(TypeColumnBarProperties, { onOptionChange: handleOptionChange });

package/src/View/StyledColumn/Wizard/StyledColumnWizard.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
 import { StyledColumn } from '../../../PredefinedConfig/StyledColumnState';
 export interface StyledColumnWizardProps extends AdaptableOnePageWizardProps<StyledColumn> {
     isNew: boolean;
 }
-export declare const StyledColumnWizard: (props: StyledColumnWizardProps) => JSX.Element;
+export declare const StyledColumnWizard: (props: StyledColumnWizardProps) => React.JSX.Element;

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

@@ -18,20 +18,18 @@ const StyledColumnSparklineSettingsSection_1 = require("./StyledColumnSparklineS
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const StyledColumnBadgeSection_1 = require("./StyledColumnBadgeSection");
 const StyledColumnWizard = (props) => {
-    var _a, _b, _c, _d, _e, _f;
-    const data = (_a = props.data) !== null && _a !== void 0 ? _a : (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.value;
-    const popupDefaultCurrentSectionName = (_e = (_d = (_c = props === null || props === void 0 ? void 0 : props.popupParams) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.defaultCurrentSectionName) !== null && _e !== void 0 ? _e : undefined;
-    const defaultCurrentSectionName = (_f = props.defaultCurrentSectionName) !== null && _f !== void 0 ? _f : popupDefaultCurrentSectionName;
+    const data = props.data ?? props.popupParams?.value;
+    const popupDefaultCurrentSectionName = props?.popupParams?.config?.defaultCurrentSectionName ?? undefined;
+    const defaultCurrentSectionName = props.defaultCurrentSectionName ?? popupDefaultCurrentSectionName;
     const [styledColumn, setStyledColumn] = (0, react_1.useState)(() => {
-        var _a, _b;
         if (data) {
             return (0, Helper_1.cloneObject)(data);
         }
         const newData = ObjectFactory_1.default.CreateEmptyStyledColumn();
         newData.GradientStyle = {};
-        if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column) && ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.action) === 'New') {
+        if (props.popupParams?.column && props.popupParams?.action === 'New') {
             newData.ColumnId = props.popupParams.column.columnId;
-            if (props.popupParams.column.dataType === 'String') {
+            if (props.popupParams.column.dataType === 'text') {
                 newData.BadgeStyle = {
                     Badges: [ObjectFactory_1.default.CreateDefaultStyledColumnBadge()],
                 };
@@ -46,8 +44,7 @@ const StyledColumnWizard = (props) => {
     });
     const dispatch = (0, react_redux_1.useDispatch)();
     const handleFinish = () => {
-        var _a;
-        if (((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' || !data) {
+        if (props?.popupParams?.action === 'New' || !data) {
             dispatch(StyledColumnRedux.StyledColumnAdd(styledColumn));
         }
         else {
@@ -82,8 +79,8 @@ const StyledColumnWizard = (props) => {
             },
             title: 'Style',
             isValid: () => {
-                var _a, _b, _c;
-                const columnComparison = (_b = (_a = styledColumn.GradientStyle) === null || _a === void 0 ? void 0 : _a.ColumnComparison) !== null && _b !== void 0 ? _b : (_c = styledColumn.PercentBarStyle) === null || _c === void 0 ? void 0 : _c.ColumnComparison;
+                const columnComparison = styledColumn.GradientStyle?.ColumnComparison ??
+                    styledColumn.PercentBarStyle?.ColumnComparison;
                 return columnComparison
                     ? columnComparison.MaxValue == undefined && columnComparison.MinValue == undefined
                         ? 'Define Min and Max Values for the Column Comparison'
@@ -104,12 +101,12 @@ const StyledColumnWizard = (props) => {
             title: 'Badges',
             details: 'Create Badge Styles',
             isValid: () => {
-                var _a;
-                if (((_a = styledColumn.BadgeStyle.Badges) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+                if (styledColumn.BadgeStyle.Badges?.length === 0) {
                     return 'Define at least one Badge';
                 }
-                if (styledColumn.BadgeStyle.Badges.filter((badge) => !badge.Predicate).length > 1) {
-                    return 'Only one Badge can have no Predicate';
+                const badgesWithNoRules = styledColumn.BadgeStyle.Badges.filter((b) => b.Expression == undefined || b.Predicate == undefined);
+                if (badgesWithNoRules.length > 1) {
+                    return 'Only one Badge can have no Rule';
                 }
                 return true;
             },

package/src/View/StyledColumn/Wizard/StyledColumnWizardColumnSection.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { StyledColumn } from '../../../PredefinedConfig/StyledColumnState';
-export declare const renderStyledColumnColumnSummary: (data: StyledColumn) => JSX.Element;
+export declare const renderStyledColumnColumnSummary: (data: StyledColumn) => React.JSX.Element;
 export declare const isValidStyledColumnColumn: (data: StyledColumn) => true | string;
 export type StyledColumnWizardColumnSectionProps = {
     onChange: (data: StyledColumn) => void;
     isNew: boolean;
 };
-export declare const StyledColumnWizardColumnSection: (props: StyledColumnWizardColumnSectionProps) => JSX.Element;
+export declare const StyledColumnWizardColumnSection: (props: StyledColumnWizardColumnSectionProps) => React.JSX.Element;

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

@@ -35,8 +35,8 @@ const StyledColumnWizardColumnSection = (props) => {
         else if (data.BadgeStyle) {
             sortableColumns = [
                 ...api.columnApi.getNumericColumns(),
-                ...api.columnApi.getStringColumns(),
-                ...api.columnApi.getStringArrayColumns(),
+                ...api.columnApi.getTextColumns(),
+                ...api.columnApi.getTextArrayColumns(),
                 ...api.columnApi.getNumberArrayColumns(),
             ];
         }
@@ -64,12 +64,21 @@ const StyledColumnWizardColumnSection = (props) => {
         const emptyRanges = api.columnScopeApi.createCellColorRangesForScope({
             ColumnIds: [columnId],
         });
-        const newStyledColumn = Object.assign(Object.assign({}, data), { ColumnId: columnId });
+        const newStyledColumn = {
+            ...data,
+            ColumnId: columnId,
+        };
         if (newStyledColumn.PercentBarStyle) {
-            newStyledColumn.PercentBarStyle = Object.assign(Object.assign({}, newStyledColumn.PercentBarStyle), { CellRanges: emptyRanges });
+            newStyledColumn.PercentBarStyle = {
+                ...newStyledColumn.PercentBarStyle,
+                CellRanges: emptyRanges,
+            };
         }
         if (newStyledColumn.GradientStyle) {
-            newStyledColumn.GradientStyle = Object.assign(Object.assign({}, newStyledColumn.GradientStyle), { CellRanges: emptyRanges });
+            newStyledColumn.GradientStyle = {
+                ...newStyledColumn.GradientStyle,
+                CellRanges: emptyRanges,
+            };
         }
         props.onChange(newStyledColumn);
     };

package/src/View/StyledColumn/Wizard/StyledColumnWizardSettingsSection.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { StyledColumn } from '../../../types';
 type StyledColumnWizardSettingsSectionSectionProps = {
     onChange: (data: StyledColumn) => void;
 };
-export declare const renderStyledColumnWizardSettingsSummary: (data: StyledColumn) => JSX.Element;
-export declare const StyledColumnWizardSettingsSection: (props: StyledColumnWizardSettingsSectionSectionProps) => JSX.Element;
+export declare const renderStyledColumnWizardSettingsSummary: (data: StyledColumn) => React.JSX.Element;
+export declare const StyledColumnWizardSettingsSection: (props: StyledColumnWizardSettingsSectionSectionProps) => React.JSX.Element;
 export {};