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

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormPopups = exports.FormDialog = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const AdaptableFormComponent_1 = require("../../../../components/AdaptableFormComponent");
@@ -24,19 +25,17 @@ const FormDialog = ({ id, formProps, form, prepareContext, }) => {
         formData: data,
         ...formProps,
     };
-    return (React.createElement(Dialog_1.default, { isOpen: true, showCloseButton: false, className: "twa:min-h-auto twa:min-w-[400px] twa:max-h-[80vh]", onDismiss: handleDismiss },
-        React.createElement(Flex_1.Flex, { flexDirection: 'column', "data-name": "form-dialog", className: "twa:p-4 twa:h-full" },
-            React.createElement(AdaptableFormComponent_1.AdaptableFormComponent, { formDef: form, data: data, context: context, onChange: setData, api: adaptable.api, displayTitle: true, onButtonClick: async (button) => {
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { isOpen: true, showCloseButton: false, className: "twa:min-h-auto twa:min-w-[400px] twa:max-h-[80vh]", onDismiss: handleDismiss, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: 'column', "data-name": "form-dialog", className: "twa:p-4 twa:h-full", children: (0, jsx_runtime_1.jsx)(AdaptableFormComponent_1.AdaptableFormComponent, { formDef: form, data: data, context: context, onChange: setData, api: adaptable.api, displayTitle: true, onButtonClick: async (button) => {
                     handleDismiss();
                     const preparedContext = typeof prepareContext === 'function' ? await prepareContext(context) : context;
                     button.onClick?.(button, preparedContext);
-                } }))));
+                } }) }) }));
 };
 exports.FormDialog = FormDialog;
 const FormPopups = () => {
     const forms = (0, react_redux_1.useSelector)((state) => state.Popup.FormPopup.FormList);
-    return (React.createElement(React.Fragment, null, forms.map((form) => {
-        return (React.createElement(exports.FormDialog, { key: form.Id, prepareContext: form.prepareContext, id: form.Id, formProps: form.FormProps, form: form.Form }));
-    })));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: forms.map((form) => {
+            return ((0, jsx_runtime_1.jsx)(exports.FormDialog, { prepareContext: form.prepareContext, id: form.Id, formProps: form.FormProps, form: form.Form }, form.Id));
+        }) }));
 };
 exports.FormPopups = FormPopups;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridCellPopup = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const NoteRedux_1 = require("../../../../Redux/ActionsReducers/NoteRedux");
@@ -23,8 +24,7 @@ const ConnectedNoteEditor = ({ enableEditMode }) => {
     const handleNoteChange = React.useCallback((value) => {
         api.noteApi.updateNoteText(value, note);
     }, [note]);
-    return (React.createElement(Flex_1.Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotePopup" },
-        React.createElement(NoteEditor_1.NoteEditor, { isReadonly: isReadonly, editMode: editMode, key: note?.Uuid, onClose: () => annotationsService.hidePopup(), note: note?.Text, onNoteChange: (value) => handleNoteChange(value) })));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotePopup", children: (0, jsx_runtime_1.jsx)(NoteEditor_1.NoteEditor, { isReadonly: isReadonly, editMode: editMode, onClose: () => annotationsService.hidePopup(), note: note?.Text, onNoteChange: (value) => handleNoteChange(value) }, note?.Uuid) }));
 };
 const GridCellPopup = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
@@ -43,21 +43,19 @@ const GridCellPopup = (props) => {
         cellPopupRef?.current?.refreshContent?.();
     }, [focusedEntity]);
     if (!cellAddress) {
-        return React.createElement(React.Fragment, null);
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     }
-    const noteEditor = React.createElement(ConnectedNoteEditor, { enableEditMode: () => enableEditMode('Note') });
-    const commentEditor = (React.createElement(CommentsEditor_1.CommentsEditor, { onRefreshContent: () => cellPopupRef?.current?.refreshContent?.(), enableEditMode: () => enableEditMode('Comment') }));
-    return (React.createElement(CellPopup_1.CellPopup, { ref: cellPopupRef, key: `${cellAddress.PrimaryKeyValue}-${cellAddress.ColumnId}`, isOpen: true, primaryKeyValue: cellAddress.PrimaryKeyValue, columnId: cellAddress.ColumnId }, (() => {
-        switch (focusedEntity) {
-            case 'Note':
-                return noteEditor;
-            case 'Comment':
-                return commentEditor;
-            default:
-                return (React.createElement(React.Fragment, null,
-                    noteEditor,
-                    commentEditor));
-        }
-    })()));
+    const noteEditor = (0, jsx_runtime_1.jsx)(ConnectedNoteEditor, { enableEditMode: () => enableEditMode('Note') });
+    const commentEditor = ((0, jsx_runtime_1.jsx)(CommentsEditor_1.CommentsEditor, { onRefreshContent: () => cellPopupRef?.current?.refreshContent?.(), enableEditMode: () => enableEditMode('Comment') }));
+    return ((0, jsx_runtime_1.jsx)(CellPopup_1.CellPopup, { ref: cellPopupRef, isOpen: true, primaryKeyValue: cellAddress.PrimaryKeyValue, columnId: cellAddress.ColumnId, children: (() => {
+            switch (focusedEntity) {
+                case 'Note':
+                    return noteEditor;
+                case 'Comment':
+                    return commentEditor;
+                default:
+                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [noteEditor, commentEditor] }));
+            }
+        })() }, `${cellAddress.PrimaryKeyValue}-${cellAddress.ColumnId}`));
 };
 exports.GridCellPopup = GridCellPopup;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WindowPopups = exports.CUSTOM_WINDOW_FACTORY_ID = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const react_redux_1 = require("react-redux");
@@ -14,7 +15,7 @@ const PanelWithImage_1 = require("../../Panels/PanelWithImage");
 const Utilities_1 = require("../Utilities");
 const windowFactory_1 = require("./windowFactory");
 const NoopComponent = () => {
-    return React.createElement(React.Fragment, null);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
 };
 exports.CUSTOM_WINDOW_FACTORY_ID = 'CUSTOM_WINDOW_FACTORY_ID';
 /**
@@ -48,47 +49,46 @@ const WindowPopups = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const dispatch = (0, react_redux_1.useDispatch)();
     const windowItems = (0, react_redux_1.useSelector)((state) => state.Popup.WindowPopup.PopupList);
-    return (React.createElement(React.Fragment, null, windowItems?.map((windowItem) => {
-        let Component = windowFactory_1.windowFactory[windowItem.FactoryId] ?? null;
-        const { windowModalProps, ...restPopupProps } = windowItem?.PopupProps ?? {};
-        const handleDismiss = () => {
-            dispatch((0, PopupRedux_1.PopupHideWindow)(windowItem.Id));
-        };
-        const size = windowModalSettings?.[windowItem.Id]?.size ??
-            windowItem?.PopupProps?.size ??
-            (0, Utilities_1.getWindowPopupSize)();
-        const position = windowModalSettings?.[windowItem.Id]?.position ??
-            windowItem?.PopupProps?.position ??
-            (0, Utilities_1.getMiddlePosition)(size);
-        let componentNode = null;
-        if (!Component &&
-            (windowItem.PopupProps.render || windowItem.PopupProps.frameworkComponent)) {
-            componentNode = (React.createElement(ExternalRenderer_1.ExternalRenderer, { style: { height: '100%' }, render: windowItem.PopupProps.render, frameworkComponent: windowItem.PopupProps.frameworkComponent, onDestroy: windowItem.PopupProps.onFrameworkComponentDestroyed }));
-        }
-        else {
-            Component = Component ?? NoopComponent;
-            componentNode = (React.createElement(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
-        }
-        // Transposed View: portal into custom container if configured
-        if (windowItem.FactoryId === windowFactory_1.WINDOW_SHOW_TRANSPOSED_VIEW) {
-            const transposedContainer = (0, resolveContainerElement_1.resolveContainerElement)(adaptable.adaptableOptions?.containerOptions?.transposedViewContainer, adaptable.api.internalApi.buildBaseContext());
-            if (transposedContainer) {
-                return (React.createElement(ContainerPortal, { key: windowItem.Id, container: transposedContainer, onContainerRemoved: handleDismiss }, componentNode));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: windowItems?.map((windowItem) => {
+            let Component = windowFactory_1.windowFactory[windowItem.FactoryId] ?? null;
+            const { windowModalProps, ...restPopupProps } = windowItem?.PopupProps ?? {};
+            const handleDismiss = () => {
+                dispatch((0, PopupRedux_1.PopupHideWindow)(windowItem.Id));
+            };
+            const size = windowModalSettings?.[windowItem.Id]?.size ??
+                windowItem?.PopupProps?.size ??
+                (0, Utilities_1.getWindowPopupSize)();
+            const position = windowModalSettings?.[windowItem.Id]?.position ??
+                windowItem?.PopupProps?.position ??
+                (0, Utilities_1.getMiddlePosition)(size);
+            let componentNode = null;
+            if (!Component &&
+                (windowItem.PopupProps.render || windowItem.PopupProps.frameworkComponent)) {
+                componentNode = ((0, jsx_runtime_1.jsx)(ExternalRenderer_1.ExternalRenderer, { style: { height: '100%' }, render: windowItem.PopupProps.render, frameworkComponent: windowItem.PopupProps.frameworkComponent, onDestroy: windowItem.PopupProps.onFrameworkComponentDestroyed }));
             }
-        }
-        return (React.createElement(Dialog_1.default, { "data-name": windowItem.Id, className: "ab-Window-Modal twa:h-full twa:p-0", key: windowItem.Id, windowModal: true, windowModalProps: {
-                ...windowModalProps,
-                onChange: (settings) => {
-                    setWindowModalSettings((settingsMap) => ({
-                        ...settingsMap,
-                        [windowItem.Id]: settings,
-                    }));
-                },
-                handleSelector: '.ab-Window-Modal .ab-Panel__header',
-                size: size,
-                position: position,
-            }, fixed: false, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
-            React.createElement(PanelWithImage_1.PanelWithImage, { className: "twa:h-full", bodyProps: { className: 'twa:h-full twa:p-0' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" }, componentNode)));
-    })));
+            else {
+                Component = Component ?? NoopComponent;
+                componentNode = ((0, jsx_runtime_1.jsx)(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
+            }
+            // Transposed View: portal into custom container if configured
+            if (windowItem.FactoryId === windowFactory_1.WINDOW_SHOW_TRANSPOSED_VIEW) {
+                const transposedContainer = (0, resolveContainerElement_1.resolveContainerElement)(adaptable.adaptableOptions?.containerOptions?.transposedViewContainer, adaptable.api.internalApi.buildBaseContext());
+                if (transposedContainer) {
+                    return ((0, jsx_runtime_1.jsx)(ContainerPortal, { container: transposedContainer, onContainerRemoved: handleDismiss, children: componentNode }, windowItem.Id));
+                }
+            }
+            return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { "data-name": windowItem.Id, className: "ab-Window-Modal twa:h-full twa:p-0", windowModal: true, windowModalProps: {
+                    ...windowModalProps,
+                    onChange: (settings) => {
+                        setWindowModalSettings((settingsMap) => ({
+                            ...settingsMap,
+                            [windowItem.Id]: settings,
+                        }));
+                    },
+                    handleSelector: '.ab-Window-Modal .ab-Panel__header',
+                    size: size,
+                    position: position,
+                }, fixed: false, onDismiss: handleDismiss, isOpen: true, showCloseButton: true, children: (0, jsx_runtime_1.jsx)(PanelWithImage_1.PanelWithImage, { className: "twa:h-full", bodyProps: { className: 'twa:h-full twa:p-0' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary", children: componentNode }) }, windowItem.Id));
+        }) }));
 };
 exports.WindowPopups = WindowPopups;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.windowFactory = exports.COLUMN_FILTER_WINDOW = exports.WINDOW_SHOW_TRANSPOSED_VIEW = exports.SHOW_THEME_EDITOR = exports.SHOW_PIVOT_COLUMN_DETAILS = exports.WINDOW_GRID_FILTER_EDITOR = void 0;
 const GridFilterWindowPopup_1 = require("../../../GridFilter/GridFilterWindowPopup");
 const PivotDetailsPopoup_1 = require("../../../Layout/PivotDetailsPopoup");
-const ThemeEditorWindow_1 = require("../../../Theme/ThemeEditorWindow");
 const TransposedPopup_1 = require("../../../Layout/TransposedPopup");
 const ColumnFilterWindow_1 = require("../../ColumnFilter/ColumnFilterWindow");
 exports.WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
@@ -14,7 +13,6 @@ exports.COLUMN_FILTER_WINDOW = 'COLUMN_FILTER_WINDOW';
 exports.windowFactory = {
     [exports.WINDOW_GRID_FILTER_EDITOR]: GridFilterWindowPopup_1.GridFilterWindowPopup,
     [exports.SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup_1.PivotDetailsPopoup,
-    [exports.SHOW_THEME_EDITOR]: ThemeEditorWindow_1.ThemeEditorWindow,
     [exports.WINDOW_SHOW_TRANSPOSED_VIEW]: TransposedPopup_1.TransposedPopup,
     [exports.COLUMN_FILTER_WINDOW]: ColumnFilterWindow_1.ColumnFilterWindow,
 };

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -2,18 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PredicateEditor = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Icon_1 = require("../../../components/Icon");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Tag_1 = require("../../../components/Tag");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
-const Select_1 = require("../../../components/Select");
 const ListBoxFilterForm_1 = require("../FilterForm/ListBoxFilterForm");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const FloatingFilterValues_1 = require("../ColumnFilter/components/FloatingFilterValues");
 const react_1 = require("react");
 const Flex_1 = require("../../../components/Flex");
+const NewSelect_1 = require("../../../components/NewSelect");
 const PredicateEditor = (props) => {
     const baseClassName = 'ab-PredicateEditor';
     const predicateDefsOptions = React.useMemo(() => props?.predicateDefs?.map((item) => ({
@@ -40,10 +41,10 @@ const PredicateEditor = (props) => {
     let icon = null;
     if (currentPredicateDef) {
         if ((0, Icon_1.isAdaptableSystemIcon)(currentPredicateDef?.icon)) {
-            icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: currentPredicateDef.icon });
+            icon = (0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: currentPredicateDef.icon });
         }
         else if (currentPredicateDef?.icon && 'text' in currentPredicateDef?.icon) {
-            icon = React.createElement("span", null, currentPredicateDef.icon.text);
+            icon = (0, jsx_runtime_1.jsx)("span", { children: currentPredicateDef.icon.text });
         }
     }
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -68,26 +69,16 @@ const PredicateEditor = (props) => {
         }
     }, []);
     const { skipDefaultSearch } = quickFilterValues;
-    return (React.createElement(Flex_1.Box, { className: baseClassName },
-        React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:justify-stretch" },
-            icon && React.createElement(Tag_1.Tag, { className: "twa:mr-2" }, icon),
-            React.createElement(Select_1.Select, { isClearable: true, options: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onChange: (value) => {
-                    const option = predicateDefsOptions.find((x) => x.value === value);
-                    props.onChange({
-                        ...props.predicate,
-                        PredicateId: option?.value,
-                        Inputs: (option?.inputs ?? []).map((input) => input.defaultValue ?? ''),
-                    });
-                } })),
-        React.createElement(Flex_1.Flex, null, currentPredicateDef?.inputs?.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
-            index > 0 && React.createElement(HelpBlock_1.default, { className: "twa:m-2" }, "AND"),
-            React.createElement(Flex_1.Flex, { key: index, className: "twa:flex-1", flexDirection: "column" },
-                React.createElement(AdaptableInput_1.default, { "data-name": `predicate-input-${index}`, className: "twa:mt-2", type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) })))))),
-        adaptable.api.predicateApi.internalApi.IsInOrNotInPredicateDef(currentPredicateDef) && (React.createElement(Flex_1.Box, { className: "twa:mt-2" },
-            React.createElement(ListBoxFilterForm_1.ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, selectProps: {
-                    onMenuOpen,
-                    onInputChange,
-                    skipDefaultFiltering: skipDefaultSearch,
-                }, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange })))));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: baseClassName, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-2", children: icon }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onValueChange: (value) => {
+                            const option = predicateDefsOptions.find((x) => x.value === value);
+                            props.onChange({
+                                ...props.predicate,
+                                PredicateId: option?.value,
+                                Inputs: (option?.inputs ?? []).map((input) => input.defaultValue ?? ''),
+                            });
+                        } })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: currentPredicateDef?.inputs?.map((predicateDefInput, index) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:m-2", children: "AND" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1", flexDirection: "column", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": `predicate-input-${index}`, className: "twa:mt-2", type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) }) }, index)] }))) }), adaptable.api.predicateApi.internalApi.IsInOrNotInPredicateDef(currentPredicateDef) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-2", children: (0, jsx_runtime_1.jsx)(ListBoxFilterForm_1.ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, onMenuOpen: onMenuOpen, selectProps: {
+                        onInputValueChange: onInputChange,
+                        filter: skipDefaultSearch ? null : undefined,
+                    }, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange }) }))] }));
 };
 exports.PredicateEditor = PredicateEditor;

package/src/View/Components/PreviewResultsPanel.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PreviewResultsPanel = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
 const InfiniteTable_1 = require("../../components/InfiniteTable");
@@ -45,26 +46,20 @@ class PreviewResultsPanel extends React.Component {
                 Id: index,
                 InitialValue: previewResult.initialValue,
                 ComputedValue: previewResult.computedValue,
-                ValidInfo: previewResult.validationRules.length > 0 ? (React.createElement(React.Fragment, null, this.props.previewInfo.previewValidationSummary.validationResult != 'None' && (React.createElement(AdaptablePopover_1.AdaptablePopover, { showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [this.getValidationErrorMessage(previewResult.validationRules)], MessageType: 'Error' })))) : (React.createElement(React.Fragment, null,
-                    ' ',
-                    React.createElement(check_1.default, { style: { color: successColor, fill: 'currentColor' } }))),
+                ValidInfo: previewResult.validationRules.length > 0 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: this.props.previewInfo.previewValidationSummary.validationResult != 'None' && ((0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [this.getValidationErrorMessage(previewResult.validationRules)], MessageType: 'Error' })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [' ', (0, jsx_runtime_1.jsx)(check_1.default, { style: { color: successColor, fill: 'currentColor' } })] })),
             };
         });
         const tableHeight = HEADER_HEIGHT + dataSource.length * ROW_HEIGHT;
         const tableDOMProps = {
             style: { height: tableHeight, maxWidth: 500 },
         };
-        return this.props.showPanel ? (React.createElement(Card_1.Card, { className: "twa:overflow-hidden", style: { maxWidth: 500 }, shadow: false },
-            React.createElement(Card_1.Card.Title, null, previewHeader),
-            React.createElement(Card_1.Card.Body, null,
-                React.createElement(InfiniteTable_1.DataSource, { data: dataSource, primaryKey: "Id" },
-                    React.createElement(InfiniteTable_1.InfiniteTableGrid, { sortable: false, domProps: tableDOMProps, columns: columnsMap }))))) : null;
+        return this.props.showPanel ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { className: "twa:flex-1 twa:overflow-hidden twa:min-w-70 twa:min-h-50", shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: previewHeader }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: dataSource, primaryKey: "Id", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { sortable: false, domProps: tableDOMProps, columns: columnsMap }) }) })] })) : null;
     }
     getValidationErrorMessage(alertDefinitions) {
         let validationService = this.props.api.internalApi.getValidationService();
         let returnString = [];
         for (let alertDefinition of alertDefinitions) {
-            let expressionDescription = alertDefinition.Rule.BooleanExpression
+            let expressionDescription = 'Rule' in alertDefinition && alertDefinition.Rule.BooleanExpression
                 ? ' when ' + alertDefinition.Rule.BooleanExpression
                 : '';
             returnString.push(validationService.createValidationDescription(alertDefinition) + expressionDescription);

package/src/View/Components/RangesComponent.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../AdaptableState/StyledColumnState';
+import { CellColorRange, ColumnComparison, GradientZeroCentredColors, NumericStyledColumn } from '../../AdaptableState/StyledColumnState';
 import { ColumnScope } from '../../AdaptableState/Common/ColumnScope';
 export interface RangesComponentProps extends React.ClassAttributes<RangesComponent> {
     ranges: CellColorRange[];
@@ -9,7 +9,6 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
     onRangeValueTypeChange: (rangeValueType: NumericStyledColumn['RangeValueType']) => void;
     scope: ColumnScope;
     api: AdaptableApi;
-    showRangeDirection: boolean;
     updateRanges: (ranges: CellColorRange[]) => void;
     updateColumnComparison: (columnComparison?: ColumnComparison) => void;
     minMaxRangeValues: {
@@ -17,15 +16,42 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
         max: number;
     };
     disabled?: boolean;
+    /**
+     * When true, the user may delete every band so `ranges` becomes `[]`.
+     * Range Bar treats bands as optional; Gradient / Percent Bar / Bullet Chart
+     * keep at least one row by default.
+     */
+    allowEmptyRanges?: boolean;
+    /**
+     * When true, the "Column Comparison" tab is omitted entirely. Used by Bullet
+     * Chart and Range Bar, where the bands ARE the chart's qualitative scale and
+     * Column Comparison doesn't make sense in the same way it does for Percent
+     * Bar / Gradient. The Number Range / Percentage Range tabs are still shown.
+     */
+    hideColumnComparison?: boolean;
+    /**
+     * When true, expose a third tab "Zero Centred Ranges" (Gradient only). Requires
+     * `onApplyZeroCentred` and optional `zeroCentred` for the current colours.
+     */
+    showZeroCentredTab?: boolean;
+    zeroCentred?: GradientZeroCentredColors;
+    onApplyZeroCentred?: (zc: GradientZeroCentredColors) => void;
+    /**
+     * When true, render a per-range "Reverse Gradient" toggle. Only meaningful
+     * for Gradient Style (the renderer flips the alpha ramp within the band so
+     * the lower the value, the darker the colour). Percent Bar / Bullet Chart
+     * leave this off.
+     */
+    showRangeDirection?: boolean;
 }
 export interface RangesComponentState {
-    rangesType: 'Standard' | 'ColumnComparison';
+    rangesType: 'NumberRange' | 'PercentageRange' | 'ZeroCentred' | 'ColumnComparison';
 }
 export declare class RangesComponent extends React.Component<RangesComponentProps, RangesComponentState> {
     constructor(props: RangesComponentProps);
     render(): React.JSX.Element;
-    private onRangesTypeChanged;
-    private handleRangeValueTypeChange;
+    componentDidUpdate(prevProps: RangesComponentProps): void;
+    private handleRangesModeTab;
     changeRangeMin(index: number, value: number): void;
     changeRangeMax(index: number, value: number): void;
     changeRangeColor(index: number, value: string): void;